cjm-fasthtml-daisyui

Python-native daisyUI v5 component and utility class builder providing dynamic class generation with full abstraction for FastHTML projects.

Install

pip install cjm-fasthtml-daisyui

Project Structure

nbs/
├── builders/ (3)
│   ├── colors.ipynb  # Semantic color system builders for daisyUI components
│   ├── sizes.ipynb   # Named sizes support for DaisyUI components
│   └── styles.ipynb  # Named style support for daisyUI components
├── cli/ (2)
│   ├── cli_config.ipynb  # Configuration for the DaisyUI CLI tool
│   └── explorer.ipynb    # CLI tool for exploring cjm-fasthtml-daisyui components and builders
├── components/ (63)
│   ├── actions/ (6)
│   │   ├── button.ipynb            # Buttons allow the user to take actions or make choices.
│   │   ├── dropdown.ipynb          # Dropdown can open a menu or any other element when the button is clicked.
│   │   ├── fab.ipynb               # FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle with up to 4 buttons).
│   │   ├── modal.ipynb             # Modal is used to show a dialog or a box when you click a button.
│   │   ├── swap.ipynb              # Swap allows you to toggle the visibility of two elements using a checkbox or a class name.
│   │   └── theme_controller.ipynb  # If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.
│   ├── data_display/ (16)
│   │   ├── accordion.ipynb      # Accordion is used for showing and hiding content but only one item can stay open at a time.
│   │   ├── avatar.ipynb         # Avatars are used to show a thumbnail representation of an individual or business in the interface.
│   │   ├── badge.ipynb          # Badges are used to inform the user of the status of specific data.
│   │   ├── card.ipynb           # Cards are used to group and display content in a way that is easily readable.
│   │   ├── carousel.ipynb       # Carousel shows images or content in a scrollable area.
│   │   ├── chat_bubble.ipynb    # Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.
│   │   ├── collapse.ipynb       # Collapse is used for showing and hiding content.
│   │   ├── countdown.ipynb      # Countdown gives you a transition effect when you change a number between 0 to 99.
│   │   ├── diff.ipynb           # Diff component shows a side-by-side comparison of two items.
│   │   ├── hover_gallery.ipynb  # Hover Gallery is container of images. The first image is visible be default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfoilios or in image galleries. Hover Gallery can include up to 10 images.
│   │   ├── kbd.ipynb            # Kbd is used to display keyboard shortcuts.
│   │   ├── list.ipynb           # List is a vertical layout to display information in rows.
│   │   ├── stat.ipynb           # Stat is used to show numbers and data in a block.
│   │   ├── status.ipynb         # Status is a really small icon to visually show the current status of an element, like online, offline, error, etc.
│   │   ├── table.ipynb          # Table can be used to show a list of data in a table format.
│   │   └── timeline.ipynb       # Timeline component shows a list of events in chronological order.
│   ├── data_input/ (14)
│   │   ├── calendar.ipynb    # Calendar includes styles for different calendar libraries.
│   │   ├── checkbox.ipynb    # Checkboxes are used to select or deselect a value.
│   │   ├── fieldset.ipynb    # Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description.
│   │   ├── file_input.ipynb  # File Input is a an input field for uploading files.
│   │   ├── filter.ipynb      # Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option.
│   │   ├── label.ipynb       # Label is used to provide a name or title for an input field. Label can be placed before or after the field.
│   │   ├── radio.ipynb       # Radio buttons allow the user to select one option from a set.
│   │   ├── range.ipynb       # Range slider is used to select a value by sliding a handle.
│   │   ├── rating.ipynb      # Rating is a set of radio ratings that allow the user to rate something.
│   │   ├── select.ipynb      # Select is used to pick a value from a list of options.
│   │   ├── text_input.ipynb  # Text Input is a simple input field.
│   │   ├── textarea.ipynb    # Textarea allows users to enter text in multiple lines.
│   │   ├── toggle.ipynb      # Toggle is a checkbox that is styled to look like a switch button.
│   │   └── validator.ipynb   # Validator class changes the color of form elements to error or success based on input's validation rules.
│   ├── feedback/ (7)
│   │   ├── alert.ipynb            # Alert informs users about important events.
│   │   ├── loading.ipynb          # Loading shows an animation to indicate that something is loading.
│   │   ├── progress.ipynb         # Progress bar can be used to show the progress of a task or to show the passing of time.
│   │   ├── radial_progress.ipynb  # Radial progress can be used to show the progress of a task or to show the passing of time.
│   │   ├── skeleton.ipynb         # Skeleton is a component that can be used to show a loading state of a component.
│   │   ├── toast.ipynb            # Toast is a wrapper to stack elements, positioned on the corner of page.
│   │   └── tooltip.ipynb          # Tooltip can be used to show a message when hovering over an element.
│   ├── layout/ (8)
│   │   ├── divider.ipynb    # Divider will be used to separate content vertically or horizontally.
│   │   ├── drawer.ipynb     # Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
│   │   ├── footer.ipynb     # Footer can contain logo, copyright notice, and links to other pages.
│   │   ├── hero.ipynb       # Hero is a component for displaying a large box or image with a title and description.
│   │   ├── indicator.ipynb  # Indicators are used to place an element on the corner of another element.
│   │   ├── join.ipynb       # Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
│   │   ├── mask.ipynb       # Mask crops the content of the element to common shapes.
│   │   └── stack.ipynb      # Stack visually puts elements on top of each other.
│   ├── mockup/ (4)
│   │   ├── browser.ipynb  # Browser mockup shows a box that looks like a browser window.
│   │   ├── code.ipynb     # Code mockup is used to show a block of code in a box that looks like a code editor.
│   │   ├── phone.ipynb    # Phone mockup shows a mockup of an iPhone.
│   │   └── window.ipynb
│   └── navigation/ (8)
│       ├── breadcrumbs.ipynb  # Breadcrumbs helps users to navigate through the website.
│       ├── dock.ipynb         # Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen.
│       ├── link.ipynb         # Link adds the missing underline style to links.
│       ├── menu.ipynb         # Menu is used to display a list of links vertically or horizontally.
│       ├── navbar.ipynb       # Navbar is used to show a navigation bar on the top of the page..
│       ├── pagination.ipynb   # Pagination is a group of buttons that allow the user to navigate between a set of related content.
│       ├── steps.ipynb        # Steps can be used to show a list of steps in a process.
│       └── tabs.ipynb         # Tabs can be used to show a list of links in a tabbed format.
├── core/ (3)
│   ├── resources.ipynb  # CDN resources and headers for daisyUI and Tailwind CSS
│   ├── testing.ipynb    # Standardized test page creation for Jupyter notebooks with FastHTML
│   └── themes.ipynb     # Theme management for daisyUI
└── utilities/ (4)
    ├── border_radius.ipynb       # daisyUI provides additional tokenized border radius values that can be customized based on the theme:
    ├── glass.ipynb               # The glass utility creates a glass morphism effect on elements:
    ├── semantic_colors.ipynb     # daisyUI extends many Tailwind CSS utility classes to support semantic colors. These factories provide access to semantic color utilities with full modifier support:
    └── semantic_gradients.ipynb  # For Tailwind CSS gradient utilities, daisyUI extends the from, via, and to utilities with semantic color support:

Total: 75 notebooks across 5 directories

Module Dependencies

graph LR
    builders_colors[builders.colors<br/>colors]
    builders_sizes[builders.sizes<br/>sizes]
    builders_styles[builders.styles<br/>styles]
    cli_cli_config[cli.cli_config<br/>DaisyUI CLI Configuration]
    cli_explorer[cli.explorer<br/>DaisyUI Explorer]
    components_actions_button[components.actions.button<br/>button]
    components_actions_dropdown[components.actions.dropdown<br/>dropdown]
    components_actions_fab[components.actions.fab<br/>FAB / Speed Dial]
    components_actions_modal[components.actions.modal<br/>modal]
    components_actions_swap[components.actions.swap<br/>swap]
    components_actions_theme_controller[components.actions.theme_controller<br/>theme controller]
    components_data_display_accordion[components.data_display.accordion<br/>accordion]
    components_data_display_avatar[components.data_display.avatar<br/>avatar]
    components_data_display_badge[components.data_display.badge<br/>badge]
    components_data_display_card[components.data_display.card<br/>card]
    components_data_display_carousel[components.data_display.carousel<br/>carousel]
    components_data_display_chat_bubble[components.data_display.chat_bubble<br/>chat bubble]
    components_data_display_collapse[components.data_display.collapse<br/>collapse]
    components_data_display_countdown[components.data_display.countdown<br/>countdown]
    components_data_display_diff[components.data_display.diff<br/>diff]
    components_data_display_hover_gallery[components.data_display.hover_gallery<br/>hover gallery]
    components_data_display_kbd[components.data_display.kbd<br/>kbd]
    components_data_display_list[components.data_display.list<br/>list]
    components_data_display_stat[components.data_display.stat<br/>stat]
    components_data_display_status[components.data_display.status<br/>status]
    components_data_display_table[components.data_display.table<br/>table]
    components_data_display_timeline[components.data_display.timeline<br/>timeline]
    components_data_input_calendar[components.data_input.calendar<br/>calendar]
    components_data_input_checkbox[components.data_input.checkbox<br/>checkbox]
    components_data_input_fieldset[components.data_input.fieldset<br/>fieldset]
    components_data_input_file_input[components.data_input.file_input<br/>file input]
    components_data_input_filter[components.data_input.filter<br/>filter]
    components_data_input_label[components.data_input.label<br/>label]
    components_data_input_radio[components.data_input.radio<br/>radio]
    components_data_input_range_slider[components.data_input.range_slider<br/>range slider]
    components_data_input_rating[components.data_input.rating<br/>rating]
    components_data_input_select[components.data_input.select<br/>select]
    components_data_input_text_input[components.data_input.text_input<br/>text input]
    components_data_input_textarea[components.data_input.textarea<br/>textarea]
    components_data_input_toggle[components.data_input.toggle<br/>toggle]
    components_data_input_validator[components.data_input.validator<br/>validator]
    components_feedback_alert[components.feedback.alert<br/>alert]
    components_feedback_loading[components.feedback.loading<br/>loading]
    components_feedback_progress[components.feedback.progress<br/>progress]
    components_feedback_radial_progress[components.feedback.radial_progress<br/>radial progress]
    components_feedback_skeleton[components.feedback.skeleton<br/>skeleton]
    components_feedback_toast[components.feedback.toast<br/>toast]
    components_feedback_tooltip[components.feedback.tooltip<br/>tooltip]
    components_layout_divider[components.layout.divider<br/>divider]
    components_layout_drawer[components.layout.drawer<br/>drawer]
    components_layout_footer[components.layout.footer<br/>footer]
    components_layout_hero[components.layout.hero<br/>hero]
    components_layout_indicator[components.layout.indicator<br/>indicator]
    components_layout_join[components.layout.join<br/>join]
    components_layout_mask[components.layout.mask<br/>mask]
    components_layout_stack[components.layout.stack<br/>stack]
    components_mockup_browser[components.mockup.browser<br/>browser mockup]
    components_mockup_code[components.mockup.code<br/>code mockup]
    components_mockup_phone[components.mockup.phone<br/>phone mockup]
    components_mockup_window[components.mockup.window]
    components_navigation_breadcrumbs[components.navigation.breadcrumbs<br/>breadcrumbs]
    components_navigation_dock[components.navigation.dock<br/>dock]
    components_navigation_link[components.navigation.link<br/>link]
    components_navigation_menu[components.navigation.menu<br/>menu]
    components_navigation_navbar[components.navigation.navbar<br/>navbar]
    components_navigation_pagination[components.navigation.pagination<br/>pagination]
    components_navigation_steps[components.navigation.steps<br/>steps]
    components_navigation_tabs[components.navigation.tabs<br/>tabs]
    core_resources[core.resources<br/>resources]
    core_testing[core.testing<br/>testing]
    core_themes[core.themes<br/>themes]
    utilities_border_radius[utilities.border_radius<br/>Border Radius Utilities]
    utilities_glass[utilities.glass<br/>Glass Effect Utility]
    utilities_semantic_colors[utilities.semantic_colors<br/>Semantic Color Utility Classes]
    utilities_semantic_gradients[utilities.semantic_gradients<br/>Gradient Stop Utilities]

    cli_explorer --> cli_cli_config
    components_actions_button --> core_themes
    components_actions_button --> builders_styles
    components_actions_button --> builders_colors
    components_actions_button --> core_testing
    components_actions_button --> builders_sizes
    components_actions_dropdown --> core_testing
    components_actions_dropdown --> core_themes
    components_actions_fab --> core_themes
    components_actions_fab --> builders_styles
    components_actions_fab --> builders_colors
    components_actions_fab --> core_testing
    components_actions_fab --> builders_sizes
    components_actions_modal --> core_testing
    components_actions_modal --> core_themes
    components_actions_swap --> core_testing
    components_actions_swap --> core_themes
    components_actions_theme_controller --> core_testing
    components_actions_theme_controller --> core_themes
    components_data_display_accordion --> components_data_display_collapse
    components_data_display_accordion --> core_themes
    components_data_display_accordion --> core_testing
    components_data_display_avatar --> core_themes
    components_data_display_avatar --> core_testing
    components_data_display_badge --> core_themes
    components_data_display_badge --> builders_styles
    components_data_display_badge --> builders_colors
    components_data_display_badge --> core_testing
    components_data_display_badge --> builders_sizes
    components_data_display_card --> core_themes
    components_data_display_card --> core_testing
    components_data_display_card --> builders_styles
    components_data_display_card --> builders_sizes
    components_data_display_carousel --> core_themes
    components_data_display_carousel --> core_testing
    components_data_display_chat_bubble --> core_themes
    components_data_display_chat_bubble --> builders_colors
    components_data_display_chat_bubble --> core_testing
    components_data_display_collapse --> core_themes
    components_data_display_collapse --> core_testing
    components_data_display_countdown --> core_themes
    components_data_display_countdown --> core_testing
    components_data_display_diff --> core_themes
    components_data_display_diff --> core_testing
    components_data_display_hover_gallery --> core_themes
    components_data_display_hover_gallery --> core_testing
    components_data_display_kbd --> core_themes
    components_data_display_kbd --> core_testing
    components_data_display_kbd --> builders_sizes
    components_data_display_list --> core_themes
    components_data_display_list --> core_testing
    components_data_display_stat --> core_themes
    components_data_display_stat --> core_testing
    components_data_display_status --> core_themes
    components_data_display_status --> builders_colors
    components_data_display_status --> core_testing
    components_data_display_status --> builders_sizes
    components_data_display_table --> core_themes
    components_data_display_table --> core_testing
    components_data_display_table --> builders_sizes
    components_data_display_timeline --> core_themes
    components_data_display_timeline --> core_testing
    components_data_input_calendar --> core_testing
    components_data_input_calendar --> core_themes
    components_data_input_checkbox --> core_testing
    components_data_input_checkbox --> builders_colors
    components_data_input_checkbox --> core_themes
    components_data_input_checkbox --> builders_sizes
    components_data_input_fieldset --> core_testing
    components_data_input_fieldset --> core_themes
    components_data_input_file_input --> core_themes
    components_data_input_file_input --> builders_styles
    components_data_input_file_input --> builders_colors
    components_data_input_file_input --> core_testing
    components_data_input_file_input --> builders_sizes
    components_data_input_filter --> core_testing
    components_data_input_filter --> core_themes
    components_data_input_label --> core_testing
    components_data_input_label --> core_themes
    components_data_input_radio --> core_testing
    components_data_input_radio --> builders_colors
    components_data_input_radio --> core_themes
    components_data_input_radio --> builders_sizes
    components_data_input_range_slider --> core_testing
    components_data_input_range_slider --> builders_colors
    components_data_input_range_slider --> core_themes
    components_data_input_range_slider --> builders_sizes
    components_data_input_rating --> core_testing
    components_data_input_rating --> core_themes
    components_data_input_rating --> builders_sizes
    components_data_input_select --> core_testing
    components_data_input_select --> builders_colors
    components_data_input_select --> core_themes
    components_data_input_select --> builders_styles
    components_data_input_select --> builders_sizes
    components_data_input_text_input --> core_themes
    components_data_input_text_input --> builders_styles
    components_data_input_text_input --> builders_colors
    components_data_input_text_input --> core_testing
    components_data_input_text_input --> builders_sizes
    components_data_input_textarea --> core_testing
    components_data_input_textarea --> builders_colors
    components_data_input_textarea --> core_themes
    components_data_input_textarea --> builders_styles
    components_data_input_textarea --> builders_sizes
    components_data_input_toggle --> core_testing
    components_data_input_toggle --> builders_colors
    components_data_input_toggle --> core_themes
    components_data_input_toggle --> builders_sizes
    components_data_input_validator --> core_testing
    components_data_input_validator --> core_themes
    components_feedback_alert --> core_testing
    components_feedback_alert --> builders_styles
    components_feedback_alert --> core_themes
    components_feedback_alert --> builders_colors
    components_feedback_loading --> core_testing
    components_feedback_loading --> core_themes
    components_feedback_loading --> builders_sizes
    components_feedback_progress --> core_testing
    components_feedback_progress --> builders_colors
    components_feedback_progress --> core_themes
    components_feedback_radial_progress --> core_testing
    components_feedback_radial_progress --> core_themes
    components_feedback_skeleton --> core_testing
    components_feedback_skeleton --> core_themes
    components_feedback_toast --> core_testing
    components_feedback_toast --> core_themes
    components_feedback_tooltip --> core_testing
    components_feedback_tooltip --> builders_colors
    components_feedback_tooltip --> core_themes
    components_layout_divider --> core_testing
    components_layout_divider --> builders_colors
    components_layout_divider --> core_themes
    components_layout_drawer --> core_testing
    components_layout_drawer --> core_themes
    components_layout_footer --> core_themes
    components_layout_footer --> core_testing
    components_layout_hero --> core_testing
    components_layout_hero --> core_themes
    components_layout_indicator --> core_testing
    components_layout_indicator --> core_themes
    components_layout_join --> core_testing
    components_layout_join --> core_themes
    components_layout_mask --> core_testing
    components_layout_mask --> core_themes
    components_layout_stack --> core_testing
    components_layout_stack --> core_themes
    components_mockup_browser --> core_testing
    components_mockup_browser --> core_themes
    components_mockup_code --> core_testing
    components_mockup_code --> core_themes
    components_mockup_phone --> core_testing
    components_mockup_phone --> core_themes
    components_mockup_window --> core_testing
    components_mockup_window --> core_themes
    components_navigation_breadcrumbs --> core_testing
    components_navigation_breadcrumbs --> core_themes
    components_navigation_dock --> core_testing
    components_navigation_dock --> core_themes
    components_navigation_dock --> builders_sizes
    components_navigation_link --> core_testing
    components_navigation_link --> builders_colors
    components_navigation_link --> core_themes
    components_navigation_link --> builders_sizes
    components_navigation_menu --> core_testing
    components_navigation_menu --> core_themes
    components_navigation_menu --> builders_sizes
    components_navigation_navbar --> core_testing
    components_navigation_navbar --> core_themes
    components_navigation_pagination --> core_testing
    components_navigation_pagination --> components_layout_join
    components_navigation_pagination --> core_themes
    components_navigation_steps --> core_testing
    components_navigation_steps --> builders_colors
    components_navigation_steps --> core_themes
    components_navigation_tabs --> core_testing
    components_navigation_tabs --> core_themes
    components_navigation_tabs --> builders_styles
    components_navigation_tabs --> builders_sizes
    core_testing --> components_actions_button
    core_testing --> core_themes
    core_testing --> components_feedback_alert
    core_testing --> core_resources
    core_testing --> utilities_semantic_gradients
    core_testing --> components_data_display_card
    core_testing --> utilities_semantic_colors
    utilities_border_radius --> builders_colors
    utilities_border_radius --> core_themes
    utilities_border_radius --> core_testing
    utilities_glass --> builders_colors
    utilities_glass --> core_themes
    utilities_glass --> core_testing
    utilities_semantic_colors --> builders_colors
    utilities_semantic_colors --> core_themes
    utilities_semantic_colors --> core_testing
    utilities_semantic_gradients --> builders_colors
    utilities_semantic_gradients --> core_themes
    utilities_semantic_gradients --> core_testing

198 cross-module dependencies detected

CLI Reference

cjm-daisyui-explore Command

usage: cjm-daisyui-explore [-h]
                           {modules,factories,factory,examples,example,search,test-code,core-utils,core-util,imports,scan}
                           ...

cjm_fasthtml_daisyui CLI Explorer

This tool helps you explore the cjm_fasthtml_daisyui library, which provides:
- Python-native DaisyUI v5 utility class builders for FastHTML projects
- Dynamic CSS class generation without hardcoded strings
- Comprehensive utility factories (btn, btn_behaviors, btn_colors, btn_modifiers, etc.)
- Helper functions for common patterns
- Full integration with FastHTML components

Purpose: This CLI tool enables autonomous exploration of the library's API by:
- Discovering all available utility modules and their documentation
- Listing factory instances with their built-in documentation
- Showing usage examples from test functions
- Providing source code for helper functions
- Searching across all library components
- CRITICALLY: Testing code snippets with automatic imports BEFORE implementation
- Generating recommended import statements
- Scanning existing code for replaceable CSS patterns

All information is dynamically extracted from the library itself - nothing is hardcoded.

positional arguments:
  {modules,factories,factory,examples,example,search,test-code,core-utils,core-util,imports,scan}
                        Available commands
    modules             List all utility modules
    factories           List factories
    factory             Show detailed info for a specific factory
    examples            Show usage examples
    example             Show source code for a specific example
    search              Search across all library components
    test-code           ⚠️ CRITICAL: Test code snippets using the library
                        (ALWAYS use before implementation)
    core-utils          List core utility functions
    core-util           Show source code for a core utility
    imports             Show recommended import statements
    scan                Scan code for replaceable CSS patterns

options:
  -h, --help            show this help message and exit

Getting Started:
  1. List all modules:     cjm-daisyui-explore modules
  2. View factories:       cjm-daisyui-explore factories
  3. Search for patterns:  cjm-daisyui-explore search <query>
  4. CRITICAL: Test code:  cjm-daisyui-explore test-code "<code>"
  5. Get imports:          cjm-daisyui-explore imports
  6. Scan existing code:   cjm-daisyui-explore scan <file>

Exploration Workflow:
  - Start with 'modules' to see available utility categories
  - Use 'factories -m <module>' to explore specific modules
  - Use 'factory <module> <name>' for detailed factory information
  - Use 'examples' to see test-based usage patterns
  - Use 'search' to find specific functionality
  - CRITICAL: ALWAYS use 'test-code' to validate code BEFORE implementation
  - Use 'scan' to analyze existing code for migration opportunities

IMPORTANT: Code Validation
  ⚠️  ALWAYS use 'test-code' to verify generated code before using it
  ⚠️  This ensures correct syntax, proper imports, and expected output
  ⚠️  Never skip this step - it prevents errors and saves debugging time

Key Concepts:
  - Factories: Objects that generate CSS classes (e.g., btn, btn_behaviors, btn_colors, btn_modifiers)
  - Modules: Categories of utilities (actions.button, actions.dropdown, actions.fab, etc.)
  - Examples: Test functions demonstrating usage patterns
  - Helpers: Convenience functions for common patterns

Tips for Coding Assistants:
  - MANDATORY: Use 'test-code' to validate ALL generated code before implementation
  - Use 'search --include-source' to find usage patterns in code
  - Use 'imports' to get all necessary import statements
  - Use 'scan' to identify replaceable hardcoded CSS classes
  - Factory names are intuitive: btn, btn_behaviors, btn_colors, btn_modifiers
  - Combine utilities with combine_classes() function
  - All factories support method chaining and attribute access

Example Usage Flow:
  cjm-daisyui-explore modules                       # See what's available
  cjm-daisyui-explore factories -m actions.button   # Explore actions.button utilities
  cjm-daisyui-explore factory actions.button btn    # Learn about btn factory
  cjm-daisyui-explore example actions.button basic  # See usage examples
  cjm-daisyui-explore test-code 'print(str(btn))'   # CRITICAL: Test your understanding
  cjm-daisyui-explore scan app.py                   # Analyze existing code

Tailwind CSS v4 Usage:
⚠️  Important: Use the cjm_fasthtml_tailwind library for adding Tailwind CSS v4 utility classes.
You can learn about the cjm_fasthtml_tailwind library with the cjm-tailwind-explore CLI tool.

For detailed help on any command, use cjm-daisyui-explore <command> --help.

Module Overview

Detailed documentation for each module in the project:

accordion (accordion.ipynb)

Accordion is used for showing and hiding content but only one item can stay open at a time.

Import

from cjm_fasthtml_daisyui.components.data_display.accordion import (
    test_accordion_basic_examples,
    test_accordion_modifiers_examples,
    test_accordion_basic_fasthtml_examples,
    test_accordion_arrow_fasthtml_examples,
    test_accordion_plus_fasthtml_examples,
    test_accordion_join_fasthtml_examples
)

Functions

def test_accordion_basic_examples()
    "Test basic accordion utilities."

def test_accordion_modifiers_examples()
    "Test accordion modifier utilities."

def test_accordion_basic_fasthtml_examples()
    "Test basic accordion using radio inputs from daisyUI v5 documentation."

def test_accordion_arrow_fasthtml_examples()
    "Test accordion with arrow icon from daisyUI v5 documentation."

def test_accordion_plus_fasthtml_examples()
    "Test accordion with plus/minus icon from daisyUI v5 documentation."

def test_accordion_join_fasthtml_examples()
    "Test accordion with join from daisyUI v5 documentation."

alert (alert.ipynb)

Alert informs users about important events.

Import

from cjm_fasthtml_daisyui.components.feedback.alert import (
    alert,
    alert_styles,
    alert_colors,
    alert_directions,
    test_alert_basic_examples,
    test_alert_styles_examples,
    test_alert_colors_examples,
    test_alert_directions_examples,
    test_alert_basic_fasthtml_examples,
    test_alert_colors_fasthtml_examples,
    test_alert_styles_fasthtml_examples,
    test_alert_with_buttons_fasthtml_examples,
    test_alert_with_title_description_fasthtml_examples
)

Functions

def test_alert_basic_examples()
    "Test basic alert utilities."

def test_alert_styles_examples()
    "Test alert style variants."

def test_alert_colors_examples()
    "Test alert color variants."

def test_alert_directions_examples()
    "Test alert direction utilities."

def test_alert_basic_fasthtml_examples()
    "Test basic alert example from daisyUI v5 documentation."

def test_alert_colors_fasthtml_examples()
    "Test alert color variations from daisyUI v5 documentation."

def test_alert_styles_fasthtml_examples()
    "Test alert style variations (soft, outline, dash) from daisyUI v5 documentation."

def test_alert_with_buttons_fasthtml_examples()
    "Test alert with buttons and responsive layout from daisyUI v5 documentation."

def test_alert_with_title_description_fasthtml_examples()
    "Test alert with title and description from daisyUI v5 documentation."

Variables

alert  # Base alert component
alert_styles  # Alert style variants
alert_colors  # Alert color variants

avatar (avatar.ipynb)

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Import

from cjm_fasthtml_daisyui.components.data_display.avatar import (
    avatar,
    avatar_group,
    avatar_modifiers,
    test_avatar_basic_examples,
    test_avatar_modifiers_examples,
    test_avatar_basic_fasthtml_examples,
    test_avatar_rounded_and_mask_fasthtml_examples,
    test_avatar_group_fasthtml_examples,
    test_avatar_ring_and_presence_fasthtml_examples,
    test_avatar_placeholder_fasthtml_examples
)

Functions

def test_avatar_basic_examples()
    "Test basic avatar utilities."

def test_avatar_modifiers_examples()
    "Test avatar modifier utilities."

def test_avatar_basic_fasthtml_examples()
    "Test basic avatar and avatar in custom sizes from daisyUI v5 documentation."

def test_avatar_rounded_and_mask_fasthtml_examples()
    "Test avatar rounded and avatar with mask from daisyUI v5 documentation."

def test_avatar_group_fasthtml_examples()
    "Test avatar group and avatar group with counter from daisyUI v5 documentation."

def test_avatar_ring_and_presence_fasthtml_examples()
    "Test avatar with ring and avatar with presence indicator from daisyUI v5 documentation."

def test_avatar_placeholder_fasthtml_examples()
    "Test avatar placeholder from daisyUI v5 documentation."

Variables

avatar  # Avatar container
avatar_group  # Avatar group

badge (badge.ipynb)

Badges are used to inform the user of the status of specific data.

Import

from cjm_fasthtml_daisyui.components.data_display.badge import (
    badge,
    badge_colors,
    badge_styles,
    badge_sizes,
    test_badge_basic_examples,
    test_badge_colors_examples,
    test_badge_styles_examples,
    test_badge_sizes_examples,
    test_badge_basic_fasthtml_examples,
    test_badge_colors_fasthtml_examples,
    test_badge_style_fasthtml_examples,
    test_badge_icon_fasthtml_examples,
    test_badge_in_text_fasthtml_examples,
    test_badge_in_button_fasthtml_examples
)

Functions

def test_badge_basic_examples()
    "Test basic badge utilities."

def test_badge_colors_examples()
    "Test badge color variants."

def test_badge_styles_examples()
    "Test badge style variants."

def test_badge_sizes_examples()
    "Test badge size variants."

def test_badge_basic_fasthtml_examples()
    "Test basic badge and badge sizes from daisyUI v5 documentation."

def test_badge_colors_fasthtml_examples()
    "Test badge with colors from daisyUI v5 documentation."

def test_badge_style_fasthtml_examples()
    "Test badge with different styles from daisyUI v5 documentation."

def test_badge_icon_fasthtml_examples()
    "Test badge with icon from daisyUI v5 documentation."

def test_badge_in_text_fasthtml_examples()
    "Test badge in text from daisyUI v5 documentation."

def test_badge_in_button_fasthtml_examples()
    "Test badge in button from daisyUI v5 documentation."

Variables

badge  # Badge container
badge_colors  # Badge color variants
badge_styles  # Badge style variants
badge_sizes  # Badge size variants

Border Radius Utilities (border_radius.ipynb)

daisyUI provides additional tokenized border radius values that can be customized based on the theme:

Import

from cjm_fasthtml_daisyui.utilities.border_radius import (
    BORDER_RADIUS_VALUES,
    border_radius,
    test_border_radius_basic_examples,
    test_border_radius_fasthtml_examples
)

Functions

def test_border_radius_basic_examples()
    "Test daisyUI's tokenized border radius utilities."

def test_border_radius_fasthtml_examples()
    "Test practical usage patterns with FastHTML components."

Variables

BORDER_RADIUS_VALUES = {3 items}
border_radius  # The daisyUI border radius factory

breadcrumbs (breadcrumbs.ipynb)

Breadcrumbs helps users to navigate through the website.

Import

from cjm_fasthtml_daisyui.components.navigation.breadcrumbs import (
    breadcrumbs,
    test_breadcrumbs_basic_examples,
    test_breadcrumbs_basic_fasthtml_examples,
    test_breadcrumbs_with_icons_fasthtml_examples,
    test_breadcrumbs_with_max_width_fasthtml_examples
)

Functions

def test_breadcrumbs_basic_examples()
    "Test breadcrumbs utility."

def test_breadcrumbs_basic_fasthtml_examples()
    "Test basic breadcrumbs example from daisyUI v5 documentation."

def test_breadcrumbs_with_icons_fasthtml_examples()
    "Test breadcrumbs with icons from daisyUI v5 documentation."

def test_breadcrumbs_with_max_width_fasthtml_examples()
    "Test breadcrumbs with max-width from daisyUI v5 documentation."

Variables

breadcrumbs  # Breadcrumbs component

browser mockup (browser.ipynb)

Browser mockup shows a box that looks like a browser window.

Import

from cjm_fasthtml_daisyui.components.mockup.browser import (
    mockup_browser,
    mockup_browser_toolbar,
    test_mockup_browser_basic_examples,
    test_browser_mockup_with_border_fasthtml_examples,
    test_browser_mockup_with_background_fasthtml_examples
)

Functions

def test_mockup_browser_basic_examples()
    "Test basic mockup_browser utilities."

def test_browser_mockup_with_border_fasthtml_examples()
    "Test browser mockup with border from daisyUI v5 documentation."

def test_browser_mockup_with_background_fasthtml_examples()
    "Test browser mockup with background color from daisyUI v5 documentation."

Variables

mockup_browser  # Base mockup browser component
mockup_browser_toolbar  # Base mockup browser toolbar part

button (button.ipynb)

Buttons allow the user to take actions or make choices.

Import

from cjm_fasthtml_daisyui.components.actions.button import (
    btn,
    btn_colors,
    btn_styles,
    btn_sizes,
    btn_modifiers,
    btn_behaviors,
    LinkStyle,
    test_button_basic_examples,
    test_button_colors_examples,
    test_button_styles_examples,
    test_button_sizes_examples,
    test_button_modifiers_examples,
    test_button_behaviors_examples,
    test_button_basic_fasthtml_examples,
    test_button_sizes_fasthtml_examples,
    test_button_colors_variants_fasthtml_examples,
    test_button_states_fasthtml_examples,
    test_button_shapes_fasthtml_examples,
    test_button_with_content_fasthtml_examples
)

Functions

def test_button_basic_examples()
    "Test basic button utilities."

def test_button_colors_examples()
    "Test button color variants."

def test_button_styles_examples()
    "Test button style variants."

def test_button_sizes_examples()
    "Test button size variants."

def test_button_modifiers_examples()
    "Test button modifier utilities."

def test_button_behaviors_examples()
    "Test button behavior states."

def test_button_basic_fasthtml_examples()
    "Test basic button examples from daisyUI v5 documentation."

def test_button_sizes_fasthtml_examples()
    "Test button size variations and responsive buttons."

def test_button_colors_variants_fasthtml_examples()
    "Test button color variants including soft, outline, and dash styles."

def test_button_states_fasthtml_examples()
    "Test button states including active, disabled, ghost, and link."

def test_button_shapes_fasthtml_examples()
    "Test square and circle button shapes with SVG icons."

def test_button_with_content_fasthtml_examples()
    "Test buttons with icons and loading spinners."

Classes

class LinkStyle(str, Enum):

Variables

btn  # Base button component
btn_colors  # Button color variants
btn_styles  # Button style variants
btn_sizes  # Button size variants

calendar (calendar.ipynb)

Calendar includes styles for different calendar libraries.

Import

from cjm_fasthtml_daisyui.components.data_input.calendar import (
    cally,
    pika_single,
    react_day_picker,
    test_calendar_basic_examples,
    test_calendar_cally_basic_fasthtml_examples,
    test_cally_date_picker_fasthtml_examples,
    test_pikaday_calendar_fasthtml_examples
)

Functions

def test_calendar_basic_examples()
    "Test basic calendar utilities."

def test_calendar_cally_basic_fasthtml_examples()
    "Test Cally calendar example from daisyUI v5 documentation."

def test_cally_date_picker_fasthtml_examples()
    "Test Cally date picker example from daisyUI v5 documentation."

def test_pikaday_calendar_fasthtml_examples()
    "Test Pikaday calendar CDN example from daisyUI v5 documentation."

Variables

cally  # Base Cally calendar component
pika_single  # Base Pikaday calender component
react_day_picker  # Base DayPicker calendar component

card (card.ipynb)

Cards are used to group and display content in a way that is easily readable.

Import

from cjm_fasthtml_daisyui.components.data_display.card import (
    card,
    card_title,
    card_body,
    card_actions,
    card_styles,
    card_modifiers,
    card_sizes,
    test_card_basic_examples,
    test_card_styles_examples,
    test_card_modifiers_examples,
    test_card_sizes_examples,
    test_card_basic_fasthtml_examples,
    test_card_pricing_fasthtml_examples,
    test_card_style_fasthtml_examples,
    test_card_layout_fasthtml_examples,
    test_card_special_fasthtml_examples
)

Functions

def test_card_basic_examples()
    "Test basic card utilities."

def test_card_styles_examples()
    "Test card style variants."

def test_card_modifiers_examples()
    "Test card modifier utilities."

def test_card_sizes_examples()
    "Test card size variants."

def test_card_basic_fasthtml_examples()
    "Test basic card examples from daisyUI v5 documentation."

def test_card_pricing_fasthtml_examples()
    "Test pricing card example from daisyUI v5 documentation."

def test_card_style_fasthtml_examples()
    "Test card style variations from daisyUI v5 documentation."

def test_card_layout_fasthtml_examples()
    "Test card layout variations from daisyUI v5 documentation."

def test_card_special_fasthtml_examples()
    "Test special card examples from daisyUI v5 documentation."

Variables

card  # Card container
card_title  # Card title
card_body  # Card body
card_actions  # Card actions
card_styles  # Card style variants
card_sizes  # Card size variants

carousel (carousel.ipynb)

Carousel shows images or content in a scrollable area.

Import

from cjm_fasthtml_daisyui.components.data_display.carousel import (
    carousel,
    carousel_item,
    carousel_snap,
    carousel_direction,
    test_carousel_basic_examples,
    test_carousel_modifiers_examples,
    test_carousel_snap_alignment_fasthtml_examples,
    test_carousel_layout_fasthtml_variations,
    test_carousel_navigation_fasthtml_examples
)

Functions

def test_carousel_basic_examples()
    "Test basic carousel utilities."

def test_carousel_modifiers_examples()
    "Test carousel modifier utilities."

def test_carousel_snap_alignment_fasthtml_examples()
    "Test carousel snap alignment examples from daisyUI v5 documentation."

def test_carousel_layout_fasthtml_variations()
    "Test carousel layout variations from daisyUI v5 documentation."

def test_carousel_navigation_fasthtml_examples()
    "Test carousel with navigation examples from daisyUI v5 documentation."

Variables

carousel  # Carousel container
carousel_item  # Carousel item

chat bubble (chat_bubble.ipynb)

Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.

Import

from cjm_fasthtml_daisyui.components.data_display.chat_bubble import (
    chat,
    chat_image,
    chat_header,
    chat_footer,
    chat_bubble,
    chat_placement,
    chat_bubble_colors,
    test_chat_basic_examples,
    test_chat_placement_examples,
    test_chat_bubble_colors_examples,
    test_chat_basic_fasthtml_examples,
    test_chat_with_image_fasthtml_examples,
    test_chat_with_header_footer_fasthtml_examples,
    test_chat_colors_fasthtml_examples
)

Functions

def test_chat_basic_examples()
    "Test basic chat utilities."

def test_chat_placement_examples()
    "Test chat placement utilities."

def test_chat_bubble_colors_examples()
    "Test chat bubble color variants."

def test_chat_basic_fasthtml_examples()
    "Test basic chat-start and chat-end from daisyUI v5 documentation."

def test_chat_with_image_fasthtml_examples()
    "Test chat with image from daisyUI v5 documentation."

def test_chat_with_header_footer_fasthtml_examples()
    "Test chat with image, header and footer from daisyUI v5 documentation."

def test_chat_colors_fasthtml_examples()
    "Test chat bubble with colors from daisyUI v5 documentation."

Variables

chat  # Chat container
chat_image  # Chat image
chat_header  # Chat header
chat_footer  # Chat footer
chat_bubble  # Chat bubble
chat_bubble_colors  # Chat bubble color variants

checkbox (checkbox.ipynb)

Checkboxes are used to select or deselect a value.

Import

from cjm_fasthtml_daisyui.components.data_input.checkbox import (
    checkbox,
    checkbox_colors,
    checkbox_sizes,
    test_checkbox_basic_examples,
    test_checkbox_colors_examples,
    test_checkbox_sizes_examples,
    test_checkbox_basic_fasthtml_examples,
    test_checkbox_with_fieldset_fasthtml_examples,
    test_checkbox_sizes_fasthtml_examples,
    test_checkbox_colors_fasthtml_examples,
    test_checkbox_disabled_fasthtml_examples,
    test_checkbox_indeterminate_fasthtml_examples,
    test_checkbox_custom_colors_fasthtml_examples
)

Functions

def test_checkbox_basic_examples()
    "Test basic checkbox utilities."

def test_checkbox_colors_examples()
    "Test checkbox color variants."

def test_checkbox_sizes_examples()
    "Test checkbox size variants."

def test_checkbox_basic_fasthtml_examples()
    "Test basic checkbox example from daisyUI v5 documentation."

def test_checkbox_with_fieldset_fasthtml_examples()
    "Test checkbox with fieldset and label from daisyUI v5 documentation."

def test_checkbox_sizes_fasthtml_examples()
    "Test checkbox size variations from daisyUI v5 documentation."

def test_checkbox_colors_fasthtml_examples()
    "Test checkbox color variations from daisyUI v5 documentation."

def test_checkbox_disabled_fasthtml_examples()
    "Test disabled checkbox variations from daisyUI v5 documentation."

def test_checkbox_indeterminate_fasthtml_examples():
    """Test indeterminate checkbox from daisyUI v5 documentation."""
    from fasthtml.common import Input, Script, Div
    
    # Indeterminate checkbox (requires JavaScript to set the state)
    # Note: The indeterminate state must be set via JavaScript
    "Test indeterminate checkbox from daisyUI v5 documentation."

def test_checkbox_custom_colors_fasthtml_examples()
    "Test checkbox with custom colors from daisyUI v5 documentation."

Variables

checkbox  # Base checkbox component
checkbox_colors  # Checkbox color variants
checkbox_sizes  # Checkbox size variants

DaisyUI CLI Configuration (cli_config.ipynb)

Configuration for the DaisyUI CLI tool

Import

from cjm_fasthtml_daisyui.cli.cli_config import (
    get_daisyui_config
)

Functions

def get_daisyui_config() -> LibraryConfig: # Configuration for cjm-fasthtml-daisyui library
    "Get configuration for cjm-fasthtml-daisyui library."

code mockup (code.ipynb)

Code mockup is used to show a block of code in a box that looks like a code editor.

Import

from cjm_fasthtml_daisyui.components.mockup.code import (
    mockup_code,
    test_mockup_code_basic_examples,
    test_mockup_code_with_line_prefix_fasthtml_examples,
    test_mockup_code_multi_line_fasthtml_examples,
    test_mockup_code_highlighted_line_fasthtml_examples,
    test_mockup_code_long_line_fasthtml_examples,
    test_mockup_code_without_prefix_fasthtml_examples,
    test_mockup_code_with_color_fasthtml_examples
)

Functions

def test_mockup_code_basic_examples()
    "Test basic mockup_code utilities."

def test_mockup_code_with_line_prefix_fasthtml_examples()
    "Test mockup code with line prefix from daisyUI v5 documentation."

def test_mockup_code_multi_line_fasthtml_examples()
    "Test multi-line mockup code from daisyUI v5 documentation."

def test_mockup_code_highlighted_line_fasthtml_examples()
    "Test mockup code with highlighted line from daisyUI v5 documentation."

def test_mockup_code_long_line_fasthtml_examples()
    "Test mockup code with long line that will scroll from daisyUI v5 documentation."

def test_mockup_code_without_prefix_fasthtml_examples()
    "Test mockup code without prefix from daisyUI v5 documentation."

def test_mockup_code_with_color_fasthtml_examples()
    "Test mockup code with custom color from daisyUI v5 documentation."

Variables

mockup_code  # Base mockup code component

collapse (collapse.ipynb)

Collapse is used for showing and hiding content.

Import

from cjm_fasthtml_daisyui.components.data_display.collapse import (
    collapse,
    collapse_title,
    collapse_content,
    collapse_modifiers,
    test_collapse_basic_examples,
    test_collapse_modifiers_examples,
    test_collapse_basic_fasthtml_examples,
    test_collapse_style_fasthtml_examples,
    test_collapse_state_fasthtml_examples,
    test_collapse_color_fasthtml_examples
)

Functions

def test_collapse_basic_examples()
    "Test basic collapse utilities."

def test_collapse_modifiers_examples()
    "Test collapse modifier utilities."

def test_collapse_basic_fasthtml_examples()
    "Test basic collapse examples: focus, checkbox, and details/summary from daisyUI v5 documentation."

def test_collapse_style_fasthtml_examples()
    "Test collapse style examples: without border/background, with arrow icon, with plus/minus icon from daisyUI v5 documentation."

def test_collapse_state_fasthtml_examples()
    "Test collapse state examples: force open and force close from daisyUI v5 documentation."

def test_collapse_color_fasthtml_examples()
    "Test collapse color examples: custom colors for focus and checkbox from daisyUI v5 documentation."

Variables

collapse  # Collapse container
collapse_title  # Collapse title
collapse_content  # Collapse content

colors (colors.ipynb)

Semantic color system builders for daisyUI components

Import

from cjm_fasthtml_daisyui.builders.colors import (
    SemanticColorValue,
    SemanticColorBrand,
    SemanticColorStatus,
    SemanticColorBase,
    SemanticColorContent,
    SemanticColor,
    is_valid_semantic_color,
    ColoredUtilityDaisyUI,
    ColoredFactoryDaisyUI,
    test_colors_semantic_enum_examples,
    test_colors_validation_examples,
    test_colors_factory_examples,
    test_colors_opacity_examples,
    test_colors_arbitrary_examples,
    test_colors_multiple_utilities_examples,
    test_colors_practical_usage_examples,
    test_colors_modifier_examples,
    get_all_semantic_colors,
    get_brand_colors,
    get_base_colors,
    get_status_colors
)

Functions

def is_valid_semantic_color(
    value: str  # The value to check
) -> bool:  # True if value is a valid daisyUI semantic color
    "Check if a value is a valid daisyUI semantic color."

def test_colors_semantic_enum_examples()
    "Test semantic color enum."

def test_colors_validation_examples()
    "Test semantic color validation functions."

def test_colors_factory_examples()
    "Test ColoredFactoryDaisyUI with various semantic color specifications."

def test_colors_opacity_examples()
    "Test opacity modifiers with semantic color utilities."

def test_colors_arbitrary_examples()
    "Test arbitrary color values and custom properties."

def test_colors_multiple_utilities_examples()
    "Test semantic color system with multiple utility types."

def test_colors_practical_usage_examples()
    "Test practical usage patterns with FastHTML components."

def test_colors_modifier_examples()
    "Test semantic color utilities with modifiers for conditional styling."

def get_all_semantic_colors() -> List[str]
    "Get list of all daisyUI semantic color names."

def get_brand_colors() -> List[str]
    "Get list of brand semantic colors."

def get_base_colors() -> List[str]
    "Get list of base semantic colors."

def get_status_colors() -> List[str]
    "Get list of status semantic colors."

Classes

class SemanticColorBrand(str, Enum):
    "daisyUI semantic brand color names."

class SemanticColorStatus(str, Enum):
    "daisyUI semantic status color names."

class SemanticColorBase(str, Enum):
    "daisyUI semantic base color names."

class SemanticColorContent(str, Enum):
    "daisyUI semantic content color names."

class SemanticColor(str, Enum):
    "daisyUI semantic color names."

class ColoredUtilityDaisyUI:
    def __init__(
        self,
        prefix: str,  # The utility prefix (e.g., 'bg', 'text', 'border')
        color: Optional[SemanticColorValue] = None,  # The semantic color value
        opacity: Optional[Union[int, str]] = None  # Optional opacity value (0-100 or arbitrary)
    )
    "Utility class with daisyUI semantic color and opacity support."
    
    def __init__(
            self,
            prefix: str,  # The utility prefix (e.g., 'bg', 'text', 'border')
            color: Optional[SemanticColorValue] = None,  # The semantic color value
            opacity: Optional[Union[int, str]] = None  # Optional opacity value (0-100 or arbitrary)
        )
        "Initialize with prefix, optional semantic color, and optional opacity."
    
    def opacity(
            self,
            value: Union[int, str]  # Opacity value (0-100 or arbitrary)
        ) -> 'ColoredUtilityDaisyUI':  # A new instance with opacity set
        "Return a new ColoredUtilityDaisyUI instance with opacity value."

class ColoredFactoryDaisyUI:
    def __init__(
        self,
        prefix: str,  # The utility prefix (e.g., 'bg', 'text', 'border')
        doc: Optional[str] = None  # Optional documentation string
    )
    "Factory for creating daisyUI semantic color-based utilities."
    
    def __init__(
            self,
            prefix: str,  # The utility prefix (e.g., 'bg', 'text', 'border')
            doc: Optional[str] = None  # Optional documentation string
        )
        "Initialize factory with prefix and documentation."
    
    def get_info(
            self
        ) -> Dict[str, Any]:  # Dictionary with factory information
        "Get detailed information about this semantic color factory."

countdown (countdown.ipynb)

Countdown gives you a transition effect when you change a number between 0 to 99.

Import

from cjm_fasthtml_daisyui.components.data_display.countdown import (
    countdown,
    test_countdown_basic_examples,
    test_countdown_basic_fasthtml_examples,
    test_countdown_clock_fasthtml_examples,
    test_countdown_labels_fasthtml_examples,
    test_countdown_boxes_fasthtml_examples
)

Functions

def test_countdown_basic_examples()
    "Test basic countdown utilities."

def test_countdown_basic_fasthtml_examples()
    "Test basic countdown and large text from daisyUI v5 documentation."

def test_countdown_clock_fasthtml_examples()
    "Test clock countdown and clock countdown with colons from daisyUI v5 documentation."

def test_countdown_labels_fasthtml_examples()
    "Test large text with labels and labels under from daisyUI v5 documentation."

def test_countdown_boxes_fasthtml_examples()
    "Test countdown in boxes from daisyUI v5 documentation."

Variables

countdown  # Countdown wrapper

diff (diff.ipynb)

Diff component shows a side-by-side comparison of two items.

Import

from cjm_fasthtml_daisyui.components.data_display.diff import (
    diff,
    diff_item_1,
    diff_item_2,
    diff_resizer,
    test_diff_basic_examples,
    test_diff_basic_fasthtml_examples
)

Functions

def test_diff_basic_examples()
    "Test basic diff utilities."

def test_diff_basic_fasthtml_examples()
    "Test basic diff and diff text from daisyUI v5 documentation."

Variables

diff  # Diff container
diff_item_1  # First item
diff_item_2  # Second item
diff_resizer  # Resizer control

divider (divider.ipynb)

Divider will be used to separate content vertically or horizontally.

Import

from cjm_fasthtml_daisyui.components.layout.divider import (
    divider,
    divider_colors,
    divider_directions,
    divider_placement,
    DividerDirection,
    DividerPlacement,
    test_divider_basic_examples,
    test_divider_colors_examples,
    test_divider_directions_examples,
    test_divider_placement_examples,
    test_divider_basic_fasthtml_examples,
    test_divider_horizontal_fasthtml_examples,
    test_divider_responsive_fasthtml_examples,
    test_divider_colors_fasthtml_examples,
    test_divider_positions_fasthtml_examples
)

Functions

def test_divider_basic_examples()
    "Test basic divider utilities."

def test_divider_colors_examples()
    "Test divider color variants."

def test_divider_directions_examples()
    "Test divider directions variants."

def test_divider_placement_examples()
    "Test divider placement variants."

def test_divider_basic_fasthtml_examples()
    "Test basic divider and divider with no text from daisyUI v5 documentation."

def test_divider_horizontal_fasthtml_examples()
    "Test horizontal divider from daisyUI v5 documentation."

def test_divider_responsive_fasthtml_examples()
    "Test responsive divider (lg:divider-horizontal) from daisyUI v5 documentation."

def test_divider_colors_fasthtml_examples()
    "Test divider with colors from daisyUI v5 documentation."

def test_divider_positions_fasthtml_examples()
    "Test divider in different positions (vertical and horizontal) from daisyUI v5 documentation."

Classes

class DividerDirection(str, Enum):

class DividerPlacement(str, Enum):

Variables

divider  # Base divider component
divider_colors  # divider color variants
divider_directions  # divider directions
divider_placement  # divider directions

dock (dock.ipynb)

Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen.

Import

from cjm_fasthtml_daisyui.components.navigation.dock import (
    dock,
    dock_label,
    dock_modifiers,
    dock_sizes,
    test_dock_basic_examples,
    test_dock_modifiers_examples,
    test_dock_sizes_examples,
    test_dock_basic_fasthtml_examples,
    test_dock_sizes_fasthtml_examples,
    test_dock_custom_colors_fasthtml_examples
)

Functions

def test_dock_basic_examples()
    "Test basic dock utilities."

def test_dock_modifiers_examples()
    "Test dock modifier utilities."

def test_dock_sizes_examples()
    "Test dock size variants."

def test_dock_basic_fasthtml_examples()
    "Test basic dock example from daisyUI v5 documentation."

def test_dock_sizes_fasthtml_examples()
    "Test dock size variations from daisyUI v5 documentation."

def test_dock_custom_colors_fasthtml_examples()
    "Test dock with custom colors from daisyUI v5 documentation."

Variables

dock  # Base dock component
dock_label  # Dock label
dock_sizes  # Dock size variants

drawer (drawer.ipynb)

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

Import

from cjm_fasthtml_daisyui.components.layout.drawer import (
    drawer,
    drawer_toggle,
    drawer_content,
    drawer_side,
    drawer_overlay,
    drawer_placement,
    drawer_modifiers,
    DrawerPlacement,
    DrawerModifier,
    test_drawer_basic_examples,
    test_drawer_placement_examples,
    test_drawer_modifier_examples,
    test_drawer_basic_fasthtml_examples,
    test_drawer_navbar_mobile_fasthtml_examples,
    test_drawer_responsive_fasthtml_examples,
    test_drawer_end_fasthtml_examples
)

Functions

def test_drawer_basic_examples()
    "Test basic drawer utilities."

def test_drawer_placement_examples()
    "Test drawer placement variants."

def test_drawer_modifier_examples()
    "Test drawer modifier variants."

def test_drawer_basic_fasthtml_examples()
    "Test basic drawer example from daisyUI v5 documentation."

def test_drawer_navbar_mobile_fasthtml_examples()
    "Test navbar menu for desktop + sidebar drawer for mobile from daisyUI v5 documentation."

def test_drawer_responsive_fasthtml_examples()
    "Test responsive drawer from daisyUI v5 documentation."

def test_drawer_end_fasthtml_examples()
    "Test drawer that opens from right side of page from daisyUI v5 documentation."

Classes

class DrawerPlacement(str, Enum):

class DrawerModifier(str, Enum):

Variables

drawer  # Base drawer component
drawer_toggle  # Drawer toggle part
drawer_content  # Drawer content part
drawer_side  # Drawer sidbar part
drawer_overlay  # Drawer overlay part
drawer_placement  # drawer placement
drawer_modifiers  # drawer modifiers

dropdown (dropdown.ipynb)

Dropdown can open a menu or any other element when the button is clicked.

Import

from cjm_fasthtml_daisyui.components.actions.dropdown import (
    dropdown,
    dropdown_content,
    dropdown_placement,
    dropdown_modifiers,
    test_dropdown_basic_examples,
    test_dropdown_placement_examples,
    test_dropdown_modifiers_examples,
    test_dropdown_basic_fasthtml_examples,
    test_dropdown_placement_fasthtml_examples,
    test_dropdown_hover_and_state_fasthtml_examples,
    test_dropdown_content_variations_fasthtml_examples
)

Functions

def test_dropdown_basic_examples()
    "Test basic dropdown utilities."

def test_dropdown_placement_examples()
    "Test dropdown placement options."

def test_dropdown_modifiers_examples()
    "Test dropdown modifier utilities."

def test_dropdown_basic_fasthtml_examples()
    "Test basic dropdown implementations including details/summary and popover API."

def test_dropdown_placement_fasthtml_examples():
    """Test dropdown placement variations for all positions."""
    from fasthtml.common import Div, Ul, Li, A
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    
    # Helper function to create dropdown content
    def create_dropdown_content()
    "Test dropdown placement variations for all positions."

def test_dropdown_hover_and_state_fasthtml_examples()
    "Test dropdown hover behavior and force open state."

def test_dropdown_content_variations_fasthtml_examples()
    "Test dropdown with different content types including cards and navbar integration."

Variables

dropdown  # Dropdown container
dropdown_content  # Dropdown content

DaisyUI Explorer (explorer.ipynb)

CLI tool for exploring cjm-fasthtml-daisyui components and builders

Import

from cjm_fasthtml_daisyui.cli.explorer import (
    initialize_daisyui_cli,
    setup_argument_parser,
    main
)

Functions

def initialize_daisyui_cli() -> LibraryConfig: # Configuration for the CLI
    "Initialize the CLI with DaisyUI configuration."

def setup_argument_parser(
    config: Optional[LibraryConfig] = None  # Optional configuration to use
) -> argparse.ArgumentParser: # Main argument parser with all subcommands
    "Set up the main argument parser with all subcommands."

def main() -> None: # CLI entry point
    """CLI entry point for exploring cjm-fasthtml-daisyui components."""
    # Initialize with DaisyUI configuration
    initialize_daisyui_cli();
    
    # Set up the argument parser (will use DaisyUI config)
    parser = setup_argument_parser()
    
    # Parse arguments
    args = parser.parse_args()
    
    # If no command specified, show help
    if args.command is None
    "CLI entry point for exploring cjm-fasthtml-daisyui components."

FAB / Speed Dial (fab.ipynb)

FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle with up to 4 buttons).

Import

from cjm_fasthtml_daisyui.components.actions.fab import (
    fab,
    fab_close,
    fab_main_action,
    fab_modifiers,
    test_fab_basic_examples,
    test_fab_modifiers_examples,
    test_fab_basic_fasthtml_examples,
    test_fab_with_svgs_fasthtml_examples,
    test_fab_with_labels_fasthtml_examples,
    test_fab_rectangle_buttons_fasthtml_examples,
    test_fab_close_fasthtml_examples,
    test_fab_main_action_fasthtml_examples,
    test_fab_single_fasthtml_examples,
    test_fab_flower_fasthtml_examples,
    test_fab_flower_with_svgs_fasthtml_examples,
    test_fab_flower_with_tooltip_fasthtml_examples
)

Functions

def test_fab_basic_examples()
    "Test basic FAB utilities."

def test_fab_modifiers_examples()
    "Test button FAB utilities."

def test_fab_basic_fasthtml_examples()
    "Test basic FAB examples from daisyUI v5 documentation."

def test_fab_with_svgs_fasthtml_examples()
    "Test FAB with SVG icons from daisyUI v5 documentation."

def test_fab_with_labels_fasthtml_examples()
    "Test FAB with labels from daisyUI v5 documentation."

def test_fab_rectangle_buttons_fasthtml_examples()
    "Test FAB with rectangle buttons from daisyUI v5 documentation."

def test_fab_close_fasthtml_examples()
    "Test FAB with close button from daisyUI v5 documentation."

def test_fab_main_action_fasthtml_examples()
    "Test FAB with main action button from daisyUI v5 documentation."

def test_fab_single_fasthtml_examples()
    "Test a single FAB from daisyUI v5 documentation."

def test_fab_flower_fasthtml_examples()
    "Test FAB flower modifier from daisyUI v5 documentation."

def test_fab_flower_with_svgs_fasthtml_examples()
    "Test FAB flower modifier with SVG icons from daisyUI v5 documentation."

def test_fab_flower_with_tooltip_fasthtml_examples()
    "Test FAB flower modifier with tooltip from daisyUI v5 documentation."

Variables

fab  # Fab container element
fab_close  # Fab close part
fab_main_action  # FAB main action part

fieldset (fieldset.ipynb)

Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description.

Import

from cjm_fasthtml_daisyui.components.data_input.fieldset import (
    fieldset,
    label,
    fieldset_legend,
    test_fieldset_basic_examples,
    test_fieldset_basic_fasthtml_examples,
    test_fieldset_with_background_fasthtml_examples,
    test_fieldset_multiple_inputs_fasthtml_examples,
    test_fieldset_join_items_fasthtml_examples,
    test_fieldset_login_form_fasthtml_examples
)

Functions

def test_fieldset_basic_examples()
    "Test basic fieldset utilities."

def test_fieldset_basic_fasthtml_examples()
    "Test basic fieldset with legend and label from daisyUI v5 documentation."

def test_fieldset_with_background_fasthtml_examples()
    "Test fieldset with background and border from daisyUI v5 documentation."

def test_fieldset_multiple_inputs_fasthtml_examples()
    "Test fieldset with multiple inputs from daisyUI v5 documentation."

def test_fieldset_join_items_fasthtml_examples()
    "Test fieldset with multiple join items from daisyUI v5 documentation."

def test_fieldset_login_form_fasthtml_examples()
    "Test login form with fieldset from daisyUI v5 documentation."

Variables

fieldset  # Base fieldset component
label  # Base label component
fieldset_legend  # fieldset legend part

file input (file_input.ipynb)

File Input is a an input field for uploading files.

Import

from cjm_fasthtml_daisyui.components.data_input.file_input import (
    file_input,
    file_input_styles,
    file_input_colors,
    file_input_sizes,
    test_file_input_basic_examples,
    test_file_input_styles_examples,
    test_file_input_colors_examples,
    test_file_input_sizes_examples,
    test_file_input_basic_fasthtml_examples,
    test_file_input_with_fieldset_fasthtml_examples,
    test_file_input_sizes_fasthtml_examples,
    test_file_input_colors_fasthtml_examples,
    test_file_input_states_fasthtml_examples
)

Functions

def test_file_input_basic_examples()
    "Test basic file_input utilities."

def test_file_input_styles_examples()
    "Test file_input style variants."

def test_file_input_colors_examples()
    "Test file_input color variants."

def test_file_input_sizes_examples()
    "Test file_input size variants."

def test_file_input_basic_fasthtml_examples()
    "Test basic file input and ghost style from daisyUI v5 documentation."

def test_file_input_with_fieldset_fasthtml_examples()
    "Test file input with fieldset and label from daisyUI v5 documentation."

def test_file_input_sizes_fasthtml_examples()
    "Test file input size variations from daisyUI v5 documentation."

def test_file_input_colors_fasthtml_examples()
    "Test file input color variations from daisyUI v5 documentation."

def test_file_input_states_fasthtml_examples()
    "Test disabled file input from daisyUI v5 documentation."

Variables

file_input  # Base file input component
file_input_styles  # File input style variants
file_input_colors  # File input color variants
file_input_sizes  # File input size variants

filter (filter.ipynb)

Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option.

Import

from cjm_fasthtml_daisyui.components.data_input.filter import (
    filter_dui,
    filter_dui_reset,
    test_filter_basic_examples,
    test_filter_with_form_fasthtml_examples,
    test_filter_without_form_fasthtml_examples
)

Functions

def test_filter_basic_examples()
    "Test basic filter utilities."

def test_filter_with_form_fasthtml_examples()
    "Test filter using HTML form, radio buttons and reset button from daisyUI v5 documentation."

def test_filter_without_form_fasthtml_examples()
    "Test filter without HTML form from daisyUI v5 documentation."

Variables

filter_dui  # Base filter component
filter_dui_reset  # Filter reset part

footer (footer.ipynb)

Footer can contain logo, copyright notice, and links to other pages.

Import

from cjm_fasthtml_daisyui.components.layout.footer import (
    footer,
    footer_title,
    footer_placement,
    footer_directions,
    FooterPlacement,
    FooterDirection,
    test_footer_basic_examples,
    test_footer_placement_examples,
    test_footer_directions_examples,
    test_footer_basic_fasthtml_examples,
    test_footer_with_logo_fasthtml_examples,
    test_footer_with_form_fasthtml_examples,
    test_footer_with_social_icons_fasthtml_examples,
    test_footer_copyright_fasthtml_examples,
    test_footer_copyright_with_icons_fasthtml_examples,
    test_footer_with_links_and_social_fasthtml_examples,
    test_footer_centered_with_logo_fasthtml_examples,
    test_footer_with_two_rows_fasthtml_examples,
    test_footer_centered_with_social_fasthtml_examples,
    test_footer_two_stacked_fasthtml_examples
)

Functions

def test_footer_basic_examples()
    "Test basic footer utilities."

def test_footer_placement_examples()
    "Test footer placement variants."

def test_footer_directions_examples()
    "Test footer directions variants."

def test_footer_basic_fasthtml_examples()
    "Test basic footer with navigation sections from daisyUI v5 documentation."

def test_footer_with_logo_fasthtml_examples()
    "Test footer with logo section from daisyUI v5 documentation."

def test_footer_with_form_fasthtml_examples()
    "Test footer with newsletter form from daisyUI v5 documentation."

def test_footer_with_social_icons_fasthtml_examples()
    "Test footer with social icons from daisyUI v5 documentation."

def test_footer_copyright_fasthtml_examples()
    "Test footer with copyright text from daisyUI v5 documentation."

def test_footer_copyright_with_icons_fasthtml_examples()
    "Test footer with copyright text and social icons from daisyUI v5 documentation."

def test_footer_with_links_and_social_fasthtml_examples()
    "Test footer with links and social icons from daisyUI v5 documentation."

def test_footer_centered_with_logo_fasthtml_examples()
    "Test centered footer with logo and social icons from daisyUI v5 documentation."

def test_footer_with_two_rows_fasthtml_examples()
    "Test footer with 2 rows from daisyUI v5 documentation."

def test_footer_centered_with_social_fasthtml_examples()
    "Test centered footer with social icons from daisyUI v5 documentation."

def test_footer_two_stacked_fasthtml_examples()
    "Test two stacked footers from daisyUI v5 documentation."

Classes

class FooterPlacement(str, Enum):

class FooterDirection(str, Enum):

Variables

footer  # Base footer component
footer_title  # footer title part
footer_placement  # footer placement
footer_directions  # footer directions

Glass Effect Utility (glass.ipynb)

The glass utility creates a glass morphism effect on elements:

Import

from cjm_fasthtml_daisyui.utilities.glass import (
    glass,
    test_glass_basic_examples,
    test_glass_fasthtml_examples
)

Functions

def test_glass_basic_examples()
    "Test glass morphism effect utility."

def test_glass_fasthtml_examples()
    "Test practical usage patterns with FastHTML components."

Variables

glass  # Glass morphism effect

hero (hero.ipynb)

Hero is a component for displaying a large box or image with a title and description.

Import

from cjm_fasthtml_daisyui.components.layout.hero import (
    hero,
    hero_content,
    hero_overlay,
    test_hero_basic_examples,
    test_hero_centered_fasthtml_examples,
    test_hero_with_figure_fasthtml_examples,
    test_hero_with_form_fasthtml_examples,
    test_hero_with_overlay_fasthtml_examples
)

Functions

def test_hero_basic_examples()
    "Test basic hero utilities."

def test_hero_centered_fasthtml_examples()
    "Test centered hero example from daisyUI v5 documentation."

def test_hero_with_figure_fasthtml_examples()
    "Test hero with figure examples from daisyUI v5 documentation."

def test_hero_with_form_fasthtml_examples()
    "Test hero with form example from daisyUI v5 documentation."

def test_hero_with_overlay_fasthtml_examples()
    "Test hero with overlay image example from daisyUI v5 documentation."

Variables

hero  # Base hero component
hero_content  # Hero content part
hero_overlay  # Hero overlay part

hover gallery (hover_gallery.ipynb)

Hover Gallery is container of images. The first image is visible be default and when we hover it horizontally, other images show up. Hover Gallery is useful for product cards in ecommerce sites, portfoilios or in image galleries. Hover Gallery can include up to 10 images.

Import

from cjm_fasthtml_daisyui.components.data_display.hover_gallery import (
    hover_gallery,
    test_hover_gallery_basic_examples,
    test_hover_gallery_basic_fasthtml_examples,
    test_hover_gallery_card_fasthtml_examples
)

Functions

def test_hover_gallery_basic_examples()
    "Test basic hover gallery utilities."

def test_hover_gallery_basic_fasthtml_examples()
    "Test basic hover gallery from daisyUI v5 documentation."

def test_hover_gallery_card_fasthtml_examples()
    "Test basic hover gallery in card from daisyUI v5 documentation."

Variables

hover_gallery  # Hover gallery container

indicator (indicator.ipynb)

Indicators are used to place an element on the corner of another element.

Import

from cjm_fasthtml_daisyui.components.layout.indicator import (
    indicator,
    indicator_item,
    indicator_placement,
    IndicatorPlacement,
    test_indicator_basic_examples,
    test_indicator_placement_examples,
    test_indicator_basic_fasthtml_examples,
    test_indicator_for_components_fasthtml_examples,
    test_indicator_card_fasthtml_examples,
    test_indicator_image_overlay_fasthtml_examples,
    test_indicator_positions_fasthtml_examples,
    test_indicator_multiple_fasthtml_examples,
    test_indicator_responsive_fasthtml_examples
)

Functions

def test_indicator_basic_examples()
    "Test basic indicator utilities."

def test_indicator_placement_examples()
    "Test indicator placement options."

def test_indicator_basic_fasthtml_examples()
    "Test basic indicator examples from daisyUI v5 documentation."

def test_indicator_for_components_fasthtml_examples()
    "Test indicator with various components from daisyUI v5 documentation."

def test_indicator_card_fasthtml_examples()
    "Test button as indicator for card from daisyUI v5 documentation."

def test_indicator_image_overlay_fasthtml_examples()
    "Test indicator in center of image from daisyUI v5 documentation."

def test_indicator_positions_fasthtml_examples():
    """Test all indicator position combinations from daisyUI v5 documentation."""
    from fasthtml.common import Div, Span
    from cjm_fasthtml_tailwind.utilities.sizing import h, w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_items, grid_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_colors
    from cjm_fasthtml_daisyui.components.layout.divider import divider, divider_directions
    
    # Helper function to create indicator box
    def create_indicator_box(*position_classes)
    "Test all indicator position combinations from daisyUI v5 documentation."

def test_indicator_multiple_fasthtml_examples()
    "Test multiple indicators from daisyUI v5 documentation."

def test_indicator_responsive_fasthtml_examples()
    "Test responsive indicator from daisyUI v5 documentation."

Classes

class IndicatorPlacement(str, Enum):

Variables

indicator  # Base indicator component
indicator_item  # Indicator item part
indicator_placement  # indicator directions

join (join.ipynb)

Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.

Import

from cjm_fasthtml_daisyui.components.layout.join import (
    join,
    join_item,
    join_directions,
    JoinDirection,
    test_join_basic_examples,
    test_join_directions_examples,
    test_join_basic_fasthtml_examples,
    test_join_vertical_fasthtml_examples,
    test_join_responsive_fasthtml_examples,
    test_join_with_extra_elements_fasthtml_examples,
    test_join_custom_border_fasthtml_examples,
    test_join_radio_inputs_fasthtml_examples
)

Functions

def test_join_basic_examples()
    "Test basic join utilities."

def test_join_directions_examples()
    "Test join directions variants."

def test_join_basic_fasthtml_examples():
    """Test basic join example from daisyUI v5 documentation."""
    from fasthtml.common import Button, Div
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Basic join with buttons
    basic_join = Div(
        Button("Button", cls=combine_classes(btn, join_item)),
        Button("Button", cls=combine_classes(btn, join_item)),
        Button("Button", cls=combine_classes(btn, join_item)),
        cls=str(join)
    )
    
    # Verify structure
    assert basic_join.tag == "div"
    assert basic_join.attrs['class'] == "join"
    
    # Verify all buttons
    assert len(basic_join.children) == 3
    for i, button in enumerate(basic_join.children)
    "Test basic join example from daisyUI v5 documentation."

def test_join_vertical_fasthtml_examples()
    "Test vertical join example from daisyUI v5 documentation."

def test_join_responsive_fasthtml_examples()
    "Test responsive join example from daisyUI v5 documentation."

def test_join_with_extra_elements_fasthtml_examples()
    "Test join with extra elements from daisyUI v5 documentation."

def test_join_custom_border_fasthtml_examples()
    "Test join with custom border radius from daisyUI v5 documentation."

def test_join_radio_inputs_fasthtml_examples():
    """Test join with radio inputs styled as buttons from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input
    from cjm_fasthtml_daisyui.components.actions.button import btn
    
    # Join with radio inputs styled as buttons
    radio_join = Div(
        Input(type="radio", name="options", aria_label="Radio 1", cls=combine_classes(join_item, btn)),
        Input(type="radio", name="options", aria_label="Radio 2", cls=combine_classes(join_item, btn)),
        Input(type="radio", name="options", aria_label="Radio 3", cls=combine_classes(join_item, btn)),
        cls=str(join)
    )
    
    # Verify structure
    assert radio_join.tag == "div"
    assert radio_join.attrs['class'] == "join"
    assert len(radio_join.children) == 3
    
    # Verify all radio inputs
    for i, radio in enumerate(radio_join.children, 1)
    "Test join with radio inputs styled as buttons from daisyUI v5 documentation."

Classes

class JoinDirection(str, Enum):

Variables

join  # Base join component
join_item  # Join item component
join_directions  # join directions

kbd (kbd.ipynb)

Kbd is used to display keyboard shortcuts.

Import

from cjm_fasthtml_daisyui.components.data_display.kbd import (
    kbd,
    kbd_sizes,
    test_kbd_basic_examples,
    test_kbd_sizes_examples,
    test_kbd_basic_fasthtml_examples,
    test_kbd_combination_fasthtml_examples,
    test_kbd_keyboard_fasthtml_examples
)

Functions

def test_kbd_basic_examples()
    "Test basic kbd utilities."

def test_kbd_sizes_examples()
    "Test kbd size variants."

def test_kbd_basic_fasthtml_examples()
    "Test basic kbd and sizes from daisyUI v5 documentation."

def test_kbd_combination_fasthtml_examples()
    "Test key combinations and function keys from daisyUI v5 documentation."

def test_kbd_keyboard_fasthtml_examples()
    "Test full keyboard and arrow keys from daisyUI v5 documentation."

Variables

kbd  # Kbd component
kbd_sizes  # Kbd size variants

label (label.ipynb)

Label is used to provide a name or title for an input field. Label can be placed before or after the field.

Import

from cjm_fasthtml_daisyui.components.data_input.label import (
    label,
    floating_label,
    test_label_basic_examples,
    test_label_for_input_fasthtml_examples,
    test_label_for_select_and_date_fasthtml_examples,
    test_floating_label_fasthtml_examples,
    test_floating_label_sizes_fasthtml_examples
)

Functions

def test_label_basic_examples()
    "Test basic label utilities."

def test_label_for_input_fasthtml_examples()
    "Test label for input examples from daisyUI v5 documentation."

def test_label_for_select_and_date_fasthtml_examples()
    "Test label for select and date input examples from daisyUI v5 documentation."

def test_floating_label_fasthtml_examples()
    "Test floating label example from daisyUI v5 documentation."

def test_floating_label_sizes_fasthtml_examples()
    "Test floating label with different sizes from daisyUI v5 documentation."

Variables

label  # Base label component
floating_label  # Base floating label component

link (link.ipynb)

Link adds the missing underline style to links.

Import

from cjm_fasthtml_daisyui.components.navigation.link import (
    link,
    link_styles,
    link_colors,
    LinkStyle,
    test_link_basic_examples,
    test_link_styles_examples,
    test_link_colors_examples,
    test_link_basic_fasthtml_examples,
    test_link_colors_fasthtml_examples,
    test_link_hover_fasthtml_examples
)

Functions

def test_link_basic_examples()
    "Test basic link utilities."

def test_link_styles_examples()
    "Test link style variants."

def test_link_colors_examples()
    "Test link color variants."

def test_link_basic_fasthtml_examples()
    "Test basic link examples from daisyUI v5 documentation."

def test_link_colors_fasthtml_examples()
    "Test link color variations from daisyUI v5 documentation."

def test_link_hover_fasthtml_examples()
    "Test link hover style from daisyUI v5 documentation."

Classes

class LinkStyle(str, Enum):

Variables

link  # Link component
link_styles  # Link style variants
link_colors  # Link color variants

list (list.ipynb)

List is a vertical layout to display information in rows.

Import

from cjm_fasthtml_daisyui.components.data_display.list import (
    list_ui,
    list_row,
    list_modifiers,
    test_list_basic_examples,
    test_list_modifiers_examples,
    test_list_basic_fasthtml_examples,
    test_list_column_grow_fasthtml_examples,
    test_list_column_wrap_fasthtml_examples
)

Functions

def test_list_basic_examples()
    "Test basic list utilities."

def test_list_modifiers_examples()
    "Test list modifier utilities."

def test_list_basic_fasthtml_examples()
    "Test basic list example: second column grows (default behavior) from daisyUI v5 documentation."

def test_list_column_grow_fasthtml_examples()
    "Test list example: third column grows from daisyUI v5 documentation."

def test_list_column_wrap_fasthtml_examples()
    "Test list example: third column wraps to next row from daisyUI v5 documentation."

Variables

list_ui  # List container
list_row  # List row

loading (loading.ipynb)

Loading shows an animation to indicate that something is loading.

Import

from cjm_fasthtml_daisyui.components.feedback.loading import (
    loading,
    loading_styles,
    loading_sizes,
    LoadingStyle,
    test_loading_basic_examples,
    test_loading_styles_examples,
    test_loading_sizes_examples,
    test_loading_spinner_fasthtml_examples,
    test_loading_dots_fasthtml_examples,
    test_loading_ring_fasthtml_examples,
    test_loading_ball_fasthtml_examples,
    test_loading_bars_fasthtml_examples,
    test_loading_infinity_fasthtml_examples,
    test_loading_with_colors_fasthtml_examples
)

Functions

def test_loading_basic_examples()
    "Test basic loading utilities."

def test_loading_styles_examples()
    "Test loading style variants."

def test_loading_sizes_examples()
    "Test loading size variants."

def test_loading_spinner_fasthtml_examples()
    "Test loading spinner with all sizes from daisyUI v5 documentation."

def test_loading_dots_fasthtml_examples()
    "Test loading dots with all sizes from daisyUI v5 documentation."

def test_loading_ring_fasthtml_examples()
    "Test loading ring with all sizes from daisyUI v5 documentation."

def test_loading_ball_fasthtml_examples()
    "Test loading ball with all sizes from daisyUI v5 documentation."

def test_loading_bars_fasthtml_examples()
    "Test loading bars with all sizes from daisyUI v5 documentation."

def test_loading_infinity_fasthtml_examples()
    "Test loading infinity with all sizes from daisyUI v5 documentation."

def test_loading_with_colors_fasthtml_examples()
    "Test loading with colors from daisyUI v5 documentation."

Classes

class LoadingStyle(str, Enum):

Variables

loading  # Base loading component
loading_styles  # Loading styles
loading_sizes  # Loading size variants

mask (mask.ipynb)

Mask crops the content of the element to common shapes.

Import

from cjm_fasthtml_daisyui.components.layout.mask import (
    mask,
    mask_styles,
    mask_modifiers,
    MaskStyle,
    MaskModifier,
    test_mask_basic_examples,
    test_mask_styles_examples,
    test_mask_modifiers_examples,
    test_mask_squircle_heart_hexagon_fasthtml_examples,
    test_mask_hexagon2_decagon_pentagon_fasthtml_examples,
    test_mask_diamond_square_circle_fasthtml_examples,
    test_mask_star_variations_fasthtml_examples,
    test_mask_triangle_variations_fasthtml_examples
)

Functions

def test_mask_basic_examples()
    "Test basic mask utilities."

def test_mask_styles_examples()
    "Test mask style variants."

def test_mask_modifiers_examples()
    "Test mask modifier utilities."

def test_mask_squircle_heart_hexagon_fasthtml_examples()
    "Test mask with squircle, heart, and hexagon shapes from daisyUI v5 documentation."

def test_mask_hexagon2_decagon_pentagon_fasthtml_examples()
    "Test mask with hexagon-2, decagon, and pentagon shapes from daisyUI v5 documentation."

def test_mask_diamond_square_circle_fasthtml_examples()
    "Test mask with diamond, square, and circle shapes from daisyUI v5 documentation."

def test_mask_star_variations_fasthtml_examples()
    "Test mask with star and star-2 shapes from daisyUI v5 documentation."

def test_mask_triangle_variations_fasthtml_examples()
    "Test mask with triangle variations from daisyUI v5 documentation."

Classes

class MaskStyle(str, Enum):

class MaskModifier(str, Enum):

Variables

mask  # Base mask component
mask_styles  # mask style variants
mask_modifiers  # mask modifiers

menu (menu.ipynb)

Menu is used to display a list of links vertically or horizontally.

Import

from cjm_fasthtml_daisyui.components.navigation.menu import (
    menu,
    menu_title,
    menu_dropdown,
    menu_dropdown_toggle,
    menu_modifiers,
    menu_sizes,
    menu_directions,
    test_menu_basic_examples,
    test_menu_modifiers_examples,
    test_menu_sizes_examples,
    test_menu_directions_examples,
    test_menu_basic_fasthtml_examples,
    test_menu_responsive_fasthtml_examples,
    test_menu_icons_fasthtml_examples,
    test_menu_sizes_fasthtml_examples,
    test_menu_with_title_fasthtml_examples,
    test_menu_submenu_fasthtml_examples,
    test_menu_states_fasthtml_examples,
    test_menu_file_tree_fasthtml_examples,
    test_menu_mega_menu_fasthtml_examples,
    test_menu_collapsible_responsive_fasthtml_examples
)

Functions

def test_menu_basic_examples()
    "Test basic menu utilities."

def test_menu_modifiers_examples()
    "Test menu modifier utilities."

def test_menu_sizes_examples()
    "Test menu size variants."

def test_menu_directions_examples()
    "Test menu direction utilities."

def test_menu_basic_fasthtml_examples()
    "Test basic menu from daisyUI v5 documentation."

def test_menu_responsive_fasthtml_examples():
    """Test responsive menu and horizontal menu from daisyUI v5 documentation."""
    from fasthtml.common import Ul, Li, A, Div
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    
    # Responsive: vertical on small screen, horizontal on large screen
    "Test responsive menu and horizontal menu from daisyUI v5 documentation."

def test_menu_icons_fasthtml_examples()
    "Test menu with icons from daisyUI v5 documentation."

def test_menu_sizes_fasthtml_examples()
    "Test menu sizes from daisyUI v5 documentation."

def test_menu_with_title_fasthtml_examples()
    "Test menu with title from daisyUI v5 documentation."

def test_menu_submenu_fasthtml_examples()
    "Test submenu examples from daisyUI v5 documentation."

def test_menu_states_fasthtml_examples()
    "Test menu states and modifiers from daisyUI v5 documentation."

def test_menu_file_tree_fasthtml_examples()
    "Test file tree menu from daisyUI v5 documentation."

def test_menu_mega_menu_fasthtml_examples()
    "Test mega menu with submenu (responsive) from daisyUI v5 documentation."

def test_menu_collapsible_responsive_fasthtml_examples()
    "Test collapsible with submenu (responsive) from daisyUI v5 documentation."

Variables

menu  # Base menu component
menu_title  # Menu title part
menu_dropdown  # Menu dropdown part
menu_dropdown_toggle  # Menu dropdown toggle part
menu_sizes  # Menu size variants

modal (modal.ipynb)

Modal is used to show a dialog or a box when you click a button.

Import

from cjm_fasthtml_daisyui.components.actions.modal import (
    modal,
    modal_box,
    modal_action,
    modal_backdrop,
    modal_toggle,
    modal_placement,
    modal_open,
    test_modal_basic_examples,
    test_modal_placement_examples,
    test_modal_dialog_fasthtml_examples,
    test_modal_checkbox_fasthtml_examples,
    test_modal_anchor_fasthtml_examples
)

Functions

def test_modal_basic_examples()
    "Test basic modal utilities."

def test_modal_placement_examples()
    "Test modal placement options."

def test_modal_dialog_fasthtml_examples()
    "Test modal examples using HTML dialog element (recommended method)."

def test_modal_checkbox_fasthtml_examples()
    "Test modal examples using checkbox method (legacy)."

def test_modal_anchor_fasthtml_examples()
    "Test modal examples using anchor links (legacy method)."

Variables

modal  # Modal container
modal_box  # Modal content box
modal_action  # Modal actions
modal_backdrop  # Modal backdrop
modal_toggle  # Modal toggle
modal_open  # Modal open state

navbar (navbar.ipynb)

Navbar is used to show a navigation bar on the top of the page..

Import

from cjm_fasthtml_daisyui.components.navigation.navbar import (
    navbar,
    navbar_start,
    navbar_center,
    navbar_end,
    test_navbar_basic_examples,
    test_navbar_title_only_fasthtml_examples,
    test_navbar_with_title_and_icon_fasthtml_examples,
    test_navbar_with_icons_fasthtml_examples,
    test_navbar_with_menu_fasthtml_examples,
    test_navbar_with_search_and_dropdown_fasthtml_examples,
    test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples,
    test_navbar_with_dropdown_center_logo_fasthtml_examples,
    test_navbar_responsive_fasthtml_examples,
    test_navbar_colors_fasthtml_examples
)

Functions

def test_navbar_basic_examples()
    "Test basic navbar utilities."

def test_navbar_title_only_fasthtml_examples()
    "Test navbar with title only from daisyUI v5 documentation."

def test_navbar_with_title_and_icon_fasthtml_examples()
    "Test navbar with title and icon from daisyUI v5 documentation."

def test_navbar_with_icons_fasthtml_examples()
    "Test navbar with icon at start and end from daisyUI v5 documentation."

def test_navbar_with_menu_fasthtml_examples()
    "Test navbar with menu and submenu from daisyUI v5 documentation."

def test_navbar_with_search_and_dropdown_fasthtml_examples()
    "Test navbar with search input and dropdown from daisyUI v5 documentation."

def test_navbar_with_icon_indicator_and_dropdown_fasthtml_examples()
    "Test navbar with icon, indicator and dropdown from daisyUI v5 documentation."

def test_navbar_with_dropdown_center_logo_fasthtml_examples()
    "Test navbar with dropdown, center logo and icon from daisyUI v5 documentation."

def test_navbar_responsive_fasthtml_examples()
    "Test responsive navbar from daisyUI v5 documentation."

def test_navbar_colors_fasthtml_examples()
    "Test navbar with colors from daisyUI v5 documentation."

Variables

navbar  # Base navbar component
navbar_start  # Navbar start part
navbar_center  # Navbar center part
navbar_end  # Navbar end part

pagination (pagination.ipynb)

Pagination is a group of buttons that allow the user to navigate between a set of related content.

Import

from cjm_fasthtml_daisyui.components.navigation.pagination import (
    test_pagination_basic_examples,
    test_pagination_directions_examples,
    test_pagination_basic_fasthtml_examples,
    test_pagination_sizes_fasthtml_examples,
    test_pagination_disabled_fasthtml_examples,
    test_pagination_extra_small_fasthtml_examples,
    test_pagination_grid_fasthtml_examples,
    test_pagination_radio_fasthtml_examples
)

Functions

def test_pagination_basic_examples()
    "Test basic pagination utilities."

def test_pagination_directions_examples()
    "Test join directions variants."

def test_pagination_basic_fasthtml_examples()
    "Test pagination with an active button from daisyUI v5 documentation."

def test_pagination_sizes_fasthtml_examples()
    "Test pagination with different button sizes from daisyUI v5 documentation."

def test_pagination_disabled_fasthtml_examples()
    "Test pagination with a disabled button from daisyUI v5 documentation."

def test_pagination_extra_small_fasthtml_examples()
    "Test extra small buttons pagination from daisyUI v5 documentation."

def test_pagination_grid_fasthtml_examples()
    "Test next/prev outline buttons with equal width from daisyUI v5 documentation."

def test_pagination_radio_fasthtml_examples()
    "Test pagination using radio inputs from daisyUI v5 documentation."

phone mockup (phone.ipynb)

Phone mockup shows a mockup of an iPhone.

Import

from cjm_fasthtml_daisyui.components.mockup.phone import (
    mockup_phone,
    mockup_phone_camera,
    mockup_phone_display,
    test_mockup_phone_basic_examples,
    test_phone_mockup_basic_fasthtml_examples,
    test_phone_mockup_with_color_and_wallpaper_fasthtml_examples
)

Functions

def test_mockup_phone_basic_examples()
    "Test basic mockup_phone utilities."

def test_phone_mockup_basic_fasthtml_examples()
    "Test basic iPhone mockup from daisyUI v5 documentation."

def test_phone_mockup_with_color_and_wallpaper_fasthtml_examples()
    "Test phone mockup with color and wallpaper from daisyUI v5 documentation."

Variables

mockup_phone  # Base mockup phone component
mockup_phone_camera  # Mockup phone camera part
mockup_phone_display  # Mockup phone display part

progress (progress.ipynb)

Progress bar can be used to show the progress of a task or to show the passing of time.

Import

from cjm_fasthtml_daisyui.components.feedback.progress import (
    progress,
    progress_colors,
    test_progress_basic_examples,
    test_progress_colors_examples,
    test_progress_basic_fasthtml_examples,
    test_progress_primary_color_fasthtml_examples,
    test_progress_all_colors_fasthtml_examples,
    test_progress_indeterminate_fasthtml_examples
)

Functions

def test_progress_basic_examples()
    "Test basic progress utilities."

def test_progress_colors_examples()
    "Test progress color variants."

def test_progress_basic_fasthtml_examples()
    "Test basic progress examples from daisyUI v5 documentation."

def test_progress_primary_color_fasthtml_examples()
    "Test progress with primary color from daisyUI v5 documentation."

def test_progress_all_colors_fasthtml_examples():
    """Test progress with all semantic colors from daisyUI v5 documentation."""
    from fasthtml.common import Progress, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Helper function to create progress bars with different values for a given color
    def create_color_set(color_class, color_name)
    "Test progress with all semantic colors from daisyUI v5 documentation."

def test_progress_indeterminate_fasthtml_examples()
    "Test indeterminate progress (without value) from daisyUI v5 documentation."

Variables

progress  # Base progress component
progress_colors  # Progress color variants

radial progress (radial_progress.ipynb)

Radial progress can be used to show the progress of a task or to show the passing of time.

Import

from cjm_fasthtml_daisyui.components.feedback.radial_progress import (
    radial_progress,
    test_radial_progress_basic_examples,
    test_radial_progress_basic_fasthtml_examples,
    test_radial_progress_values_fasthtml_examples,
    test_radial_progress_colors_fasthtml_examples,
    test_radial_progress_custom_size_fasthtml_examples
)

Functions

def test_radial_progress_basic_examples()
    "Test basic button utilities."

def test_radial_progress_basic_fasthtml_examples()
    "Test basic radial progress from daisyUI v5 documentation."

def test_radial_progress_values_fasthtml_examples()
    "Test radial progress with different values from daisyUI v5 documentation."

def test_radial_progress_colors_fasthtml_examples()
    "Test radial progress with custom colors from daisyUI v5 documentation."

def test_radial_progress_custom_size_fasthtml_examples()
    "Test radial progress with custom size and thickness from daisyUI v5 documentation."

Variables

radial_progress  # Base radial progress component

radio (radio.ipynb)

Radio buttons allow the user to select one option from a set.

Import

from cjm_fasthtml_daisyui.components.data_input.radio import (
    radio,
    radio_colors,
    radio_sizes,
    test_radio_basic_examples,
    test_radio_colors_examples,
    test_radio_sizes_examples,
    test_radio_basic_fasthtml_examples,
    test_radio_sizes_fasthtml_examples,
    test_radio_colors_fasthtml_examples,
    test_radio_disabled_fasthtml_examples,
    test_radio_custom_colors_fasthtml_examples
)

Functions

def test_radio_basic_examples()
    "Test basic radio utilities."

def test_radio_colors_examples()
    "Test radio color variants."

def test_radio_sizes_examples()
    "Test radio size variants."

def test_radio_basic_fasthtml_examples()
    "Test basic radio button examples from daisyUI v5 documentation."

def test_radio_sizes_fasthtml_examples()
    "Test radio button size variations from daisyUI v5 documentation."

def test_radio_colors_fasthtml_examples()
    "Test radio button color variations from daisyUI v5 documentation."

def test_radio_disabled_fasthtml_examples()
    "Test disabled radio button examples from daisyUI v5 documentation."

def test_radio_custom_colors_fasthtml_examples()
    "Test radio buttons with custom colors from daisyUI v5 documentation."

Variables

radio  # Base radio component
radio_colors  # Radio color variants
radio_sizes  # Radio size variants

range slider (range.ipynb)

Range slider is used to select a value by sliding a handle.

Import

# No corresponding Python module found for components.data_input.range

Functions

def test_range_basic_examples()
    "Test basic range utilities."

def test_range_colors_examples()
    "Test range color variants."

def test_range_sizes_examples()
    "Test range size variants."

def test_range_basic_fasthtml_examples()
    "Test basic range slider from daisyUI v5 documentation."

def test_range_with_steps_fasthtml_examples()
    "Test range with steps and measure from daisyUI v5 documentation."

def test_range_colors_fasthtml_examples()
    "Test range color variations from daisyUI v5 documentation."

def test_range_sizes_fasthtml_examples()
    "Test range size variations from daisyUI v5 documentation."

def test_range_custom_fasthtml_examples()
    "Test range with custom color and no fill from daisyUI v5 documentation."

Variables

range_dui  # Base range component
range_colors  # range color variants
range_sizes  # range size variants

rating (rating.ipynb)

Rating is a set of radio ratings that allow the user to rate something.

Import

from cjm_fasthtml_daisyui.components.data_input.rating import (
    rating,
    rating_modifiers,
    rating_sizes,
    RatingModifier,
    test_rating_basic_examples,
    test_rating_modifiers_examples,
    test_rating_sizes_examples,
    test_rating_basic_fasthtml_examples,
    test_rating_readonly_fasthtml_examples,
    test_rating_with_colors_fasthtml_examples,
    test_rating_sizes_fasthtml_examples,
    test_rating_with_hidden_fasthtml_examples,
    test_rating_half_stars_fasthtml_examples
)

Functions

def test_rating_basic_examples()
    "Test basic rating utilities."

def test_rating_modifiers_examples()
    "Test rating modifier utilities."

def test_rating_sizes_examples()
    "Test rating size variants."

def test_rating_basic_fasthtml_examples()
    "Test basic rating example from daisyUI v5 documentation."

def test_rating_readonly_fasthtml_examples()
    "Test read-only rating from daisyUI v5 documentation."

def test_rating_with_colors_fasthtml_examples()
    "Test rating with different colors from daisyUI v5 documentation."

def test_rating_sizes_fasthtml_examples()
    "Test rating size variations from daisyUI v5 documentation."

def test_rating_with_hidden_fasthtml_examples()
    "Test rating with hidden clear option from daisyUI v5 documentation."

def test_rating_half_stars_fasthtml_examples()
    "Test rating with half stars from daisyUI v5 documentation."

Classes

class RatingModifier(str, Enum):

Variables

rating  # Base rating component
rating_modifiers  # rating modifiers
rating_sizes  # rating size variants

resources (resources.ipynb)

CDN resources and headers for daisyUI and Tailwind CSS

Import

from cjm_fasthtml_daisyui.core.resources import (
    DAISYUI_CDN,
    DAISYUI_THEMES_CDN,
    DAISYUI_COLOR_PROPERTIES,
    DAISYUI_COLOR_PROPERTIES_EXT,
    get_daisyui_headers,
    create_css_link,
    create_js_script,
    build_headers
)

Functions

def get_daisyui_headers(
    include_themes: bool = True  # Include the daisyUI themes CSS file
) -> List[Union[Link, Script]]:  # List of Link and Script elements for daisyUI and Tailwind CSS
    "Get the standard daisyUI and Tailwind CSS CDN headers."

def create_css_link(
    href: str,  # URL or path to CSS file
    media: Optional[str] = None,  # Media query (e.g., "screen", "print")
    crossorigin: Optional[Literal["anonymous", "use-credentials"]] = None
) -> Link:  # Link element for CSS stylesheet
    "Create a CSS link element with optional attributes."

def create_js_script(
    src: str,  # URL or path to JavaScript file
    async_: bool = False,  # Load script asynchronously
    defer: bool = False,  # Defer script execution
    module: bool = False,  # ES6 module
    crossorigin: Optional[Literal["anonymous", "use-credentials"]] = None
) -> Script:  # Script element for JavaScript file
    "Create a JavaScript script element with optional attributes."

def build_headers(
    include_themes: bool = True,  # Include daisyUI themes
    custom_css: Optional[List[Union[str, Link]]] = None,  # Additional CSS files
    custom_js: Optional[List[Union[str, Script]]] = None,  # Additional JS files
    custom_theme_css: Optional[str] = None,  # Custom theme CSS as a string
    custom_theme_paths: Optional[List[Union[str, Path]]] = None  # List of paths to custom theme CSS files
) -> List[Union[Link, Script, Style]]:  # List of Link, Script, and Style elements for complete app headers
    """
    Build a complete set of headers for a FastHTML app with daisyUI and Tailwind.
    
    The order of headers is:
    1. daisyUI CSS
    2. daisyUI themes CSS (if included)
    3. Custom theme CSS (if provided as string)
    4. Custom theme CSS files (if provided as Path objects)
    5. Custom CSS files
    6. Tailwind CSS JavaScript
    7. Custom JavaScript files
    """

Variables

DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@5'
DAISYUI_THEMES_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@5/themes.css'
DAISYUI_COLOR_PROPERTIES = 'https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties.css'
DAISYUI_COLOR_PROPERTIES_EXT = 'https://cdn.jsdelivr.net/npm/daisyui@5/colors/properties-extended.css'

select (select.ipynb)

Select is used to pick a value from a list of options.

Import

from cjm_fasthtml_daisyui.components.data_input.select import (
    select,
    select_styles,
    select_colors,
    select_sizes,
    test_select_basic_examples,
    test_select_styles_examples,
    test_select_colors_examples,
    test_select_sizes_examples,
    test_select_basic_fasthtml_examples,
    test_select_colors_fasthtml_examples,
    test_select_sizes_fasthtml_examples,
    test_select_special_fasthtml_examples
)

Functions

def test_select_basic_examples()
    "Test basic select utilities."

def test_select_styles_examples()
    "Test select style variants."

def test_select_colors_examples()
    "Test select color variants."

def test_select_sizes_examples()
    "Test select size variants."

def test_select_basic_fasthtml_examples()
    "Test basic select example from daisyUI v5 documentation."

def test_select_colors_fasthtml_examples()
    "Test select with different color variations from daisyUI v5 documentation."

def test_select_sizes_fasthtml_examples()
    "Test select with different sizes from daisyUI v5 documentation."

def test_select_special_fasthtml_examples()
    "Test select with special styles (ghost, fieldset, disabled) from daisyUI v5 documentation."

Variables

select  # Base select component
select_styles  # select style variants
select_colors  # select color variants
select_sizes  # select size variants

Semantic Color Utility Classes (semantic_colors.ipynb)

daisyUI extends many Tailwind CSS utility classes to support semantic colors. These factories provide access to semantic color utilities with full modifier support:

Import

from cjm_fasthtml_daisyui.utilities.semantic_colors import (
    bg_dui,
    text_dui,
    border_dui,
    ring_dui,
    fill_dui,
    stroke_dui,
    caret_dui,
    accent_dui,
    shadow_dui,
    outline_dui,
    decoration_dui,
    placeholder_dui,
    divide_dui,
    ring_offset_dui,
    test_semantic_colors_basic_examples,
    test_semantic_colors_opacity_examples,
    test_semantic_color_fasthtml_examples
)

Functions

def test_semantic_colors_basic_examples()
    "Test semantic color utility classes for various CSS properties."

def test_semantic_colors_opacity_examples()
    "Test semantic color utilities with opacity modifiers."

def test_semantic_color_fasthtml_examples()
    "Test practical usage patterns with FastHTML components."

Variables

bg_dui  # The semantic background color factory
text_dui  # The semantic text color factory
border_dui  # The semantic border color factory
ring_dui  # The semantic ring color factory
fill_dui  # The semantic fill color factory
stroke_dui  # The semantic stroke color factory
caret_dui  # The semantic caret color factory
accent_dui  # The semantic accent color factory
shadow_dui  # The semantic shadow color factory
outline_dui  # The semantic outline color factory
decoration_dui  # The semantic decoration color factory
placeholder_dui  # The semantic placeholder color factory
divide_dui  # The semantic divide color factory
ring_offset_dui  # The semantic ring offset color factory

Gradient Stop Utilities (semantic_gradients.ipynb)

For Tailwind CSS gradient utilities, daisyUI extends the from, via, and to utilities with semantic color support:

Import

from cjm_fasthtml_daisyui.utilities.semantic_gradients import (
    from_dui,
    via_dui,
    to_dui,
    GradientStopFactoryDaisyUI,
    test_semantic_gradients_basic_examples,
    test_semantic_gradients_fasthtml_examples
)

Functions

def test_semantic_gradients_basic_examples()
    "Test gradient utilities with semantic colors."

def test_semantic_gradients_fasthtml_examples()
    "Test practical usage patterns with FastHTML components."

Classes

class GradientStopFactoryDaisyUI:
    def __init__(
        self,
        stop_type: str,  # Type of stop (from, via, to)
        doc: Optional[str] = None  # Documentation
    )
    "Enhanced factory for gradient color stops with semantic color support."
    
    def __init__(
            self,
            stop_type: str,  # Type of stop (from, via, to)
            doc: Optional[str] = None  # Documentation
        )
        "Initialize gradient stop factory."

Variables

from_dui  # Semantic gradient from color factory
via_dui  # Semantic gradient via color factory
to_dui  # Semantic gradient to color factory

sizes (sizes.ipynb)

Named sizes support for DaisyUI components

Import

from cjm_fasthtml_daisyui.builders.sizes import (
    DaisyUINamedSize
)

Classes

class DaisyUINamedSize(str, Enum):

skeleton (skeleton.ipynb)

Skeleton is a component that can be used to show a loading state of a component.

Import

from cjm_fasthtml_daisyui.components.feedback.skeleton import (
    skeleton,
    test_skeleton_basic_examples,
    test_skeleton_basic_fasthtml_examples,
    test_skeleton_circle_with_content_fasthtml_examples,
    test_skeleton_rectangle_with_content_fasthtml_examples
)

Functions

def test_skeleton_basic_examples()
    "Test basic skeleton utilities."

def test_skeleton_basic_fasthtml_examples()
    "Test basic skeleton from daisyUI v5 documentation."

def test_skeleton_circle_with_content_fasthtml_examples()
    "Test skeleton circle with content from daisyUI v5 documentation."

def test_skeleton_rectangle_with_content_fasthtml_examples()
    "Test skeleton rectangle with content from daisyUI v5 documentation."

Variables

skeleton  # Base skeleton component

stack (stack.ipynb)

Stack visually puts elements on top of each other.

Import

from cjm_fasthtml_daisyui.components.layout.stack import (
    stack,
    stack_modifiers,
    StackModifier,
    test_stack_basic_examples,
    test_stack_modifiers_examples,
    test_stack_basic_divs_fasthtml_examples,
    test_stack_images_fasthtml_examples,
    test_stack_cards_fasthtml_examples,
    test_stack_cards_directions_fasthtml_examples,
    test_stack_cards_shadow_fasthtml_examples,
    test_stack_notification_cards_fasthtml_examples
)

Functions

def test_stack_basic_examples()
    "Test basic stack utilities."

def test_stack_modifiers_examples()
    "Test stack modifier utilities."

def test_stack_basic_divs_fasthtml_examples()
    "Test basic stack with 3 divs from daisyUI v5 documentation."

def test_stack_images_fasthtml_examples()
    "Test stacked images from daisyUI v5 documentation."

def test_stack_cards_fasthtml_examples()
    "Test stacked cards from daisyUI v5 documentation."

def test_stack_cards_directions_fasthtml_examples():
    """Test stacked cards with different directions from daisyUI v5 documentation."""
    from fasthtml.common import Div
    from cjm_fasthtml_tailwind.utilities.sizing import size_util
    from cjm_fasthtml_tailwind.utilities.borders import border
    from cjm_fasthtml_tailwind.utilities.typography import text_align
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, border_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body
    
    # Helper function to create a card
    def create_card(letter)
    "Test stacked cards with different directions from daisyUI v5 documentation."

def test_stack_cards_shadow_fasthtml_examples()
    "Test stacked cards with shadow from daisyUI v5 documentation."

def test_stack_notification_cards_fasthtml_examples()
    "Test stacked notification cards from daisyUI v5 documentation."

Classes

class StackModifier(str, Enum):

Variables

stack  # Base stack component
stack_modifiers  # stack modifiers

stat (stat.ipynb)

Stat is used to show numbers and data in a block.

Import

from cjm_fasthtml_daisyui.components.data_display.stat import (
    stats,
    stat,
    stat_title,
    stat_value,
    stat_desc,
    stat_figure,
    stat_actions,
    stats_direction,
    test_stat_basic_examples,
    test_stat_direction_examples,
    test_stat_basic_fasthtml_examples,
    test_stat_with_icons_fasthtml_examples,
    test_stat_detailed_fasthtml_examples,
    test_stat_centered_fasthtml_examples,
    test_stat_vertical_fasthtml_examples,
    test_stat_with_actions_fasthtml_examples
)

Functions

def test_stat_basic_examples()
    "Test basic stat utilities."

def test_stat_direction_examples()
    "Test stat direction modifiers."

def test_stat_basic_fasthtml_examples()
    "Test basic stat examples from daisyUI v5 documentation."

def test_stat_with_icons_fasthtml_examples()
    "Test stat with icons or image examples from daisyUI v5 documentation."

def test_stat_detailed_fasthtml_examples()
    "Test detailed stat examples with different icons from daisyUI v5 documentation."

def test_stat_centered_fasthtml_examples()
    "Test centered stat items examples from daisyUI v5 documentation."

def test_stat_vertical_fasthtml_examples()
    "Test vertical and responsive stat examples from daisyUI v5 documentation."

def test_stat_with_actions_fasthtml_examples()
    "Test stat with custom colors and button actions from daisyUI v5 documentation."

Variables

stats  # Stats container
stat  # Stat block
stat_title  # Stat title
stat_value  # Stat value
stat_desc  # Stat description
stat_figure  # Stat figure
stat_actions  # Stat actions

status (status.ipynb)

Status is a really small icon to visually show the current status of an element, like online, offline, error, etc.

Import

from cjm_fasthtml_daisyui.components.data_display.status import (
    status,
    status_colors,
    status_sizes,
    test_status_basic_examples,
    test_status_colors_examples,
    test_status_sizes_examples,
    test_status_basic_fasthtml_examples,
    test_status_sizes_fasthtml_examples,
    test_status_colors_fasthtml_examples,
    test_status_animation_fasthtml_examples
)

Functions

def test_status_basic_examples()
    "Test basic status utilities."

def test_status_colors_examples()
    "Test status color variants."

def test_status_sizes_examples()
    "Test status size variants."

def test_status_basic_fasthtml_examples()
    "Test basic status from daisyUI v5 documentation."

def test_status_sizes_fasthtml_examples()
    "Test status sizes from daisyUI v5 documentation."

def test_status_colors_fasthtml_examples()
    "Test status with colors from daisyUI v5 documentation."

def test_status_animation_fasthtml_examples()
    "Test status with ping and bounce animations from daisyUI v5 documentation."

Variables

status  # Status icon
status_colors  # Status color variants
status_sizes  # Status size variants

steps (steps.ipynb)

Steps can be used to show a list of steps in a process.

Import

from cjm_fasthtml_daisyui.components.navigation.steps import (
    steps,
    step,
    step_icon,
    step_colors,
    steps_directions,
    test_steps_basic_examples,
    test_step_colors_examples,
    test_steps_directions_examples,
    test_steps_horizontal_fasthtml_examples,
    test_steps_vertical_fasthtml_examples,
    test_steps_responsive_fasthtml_examples,
    test_steps_with_custom_content_fasthtml_examples,
    test_steps_with_data_content_fasthtml_examples,
    test_steps_custom_colors_fasthtml_examples,
    test_steps_with_scrollable_wrapper_fasthtml_examples
)

Functions

def test_steps_basic_examples()
    "Test basic steps utilities."

def test_step_colors_examples()
    "Test step color variants."

def test_steps_directions_examples()
    "Test steps direction utilities."

def test_steps_horizontal_fasthtml_examples()
    "Test horizontal steps from daisyUI v5 documentation."

def test_steps_vertical_fasthtml_examples()
    "Test vertical steps from daisyUI v5 documentation."

def test_steps_responsive_fasthtml_examples()
    "Test responsive steps (vertical on small screen, horizontal on large screen) from daisyUI v5 documentation."

def test_steps_with_custom_content_fasthtml_examples()
    "Test steps with custom content in step-icon from daisyUI v5 documentation."

def test_steps_with_data_content_fasthtml_examples()
    "Test steps with data-content attribute from daisyUI v5 documentation."

def test_steps_custom_colors_fasthtml_examples()
    "Test steps with custom colors from daisyUI v5 documentation."

def test_steps_with_scrollable_wrapper_fasthtml_examples()
    "Test steps with scrollable wrapper from daisyUI v5 documentation."

Variables

steps  # Base steps component
step  # step part
step_icon  # step icon part
step_colors  # Step color variants

styles (styles.ipynb)

Named style support for daisyUI components

Import

from cjm_fasthtml_daisyui.builders.styles import (
    OutlineStyle,
    DashStyle,
    SoftStyle,
    GhostStyle,
    BorderStyle,
    HoverStyle
)

Classes

class OutlineStyle(str, Enum):
    "daisyUI style names."

class DashStyle(str, Enum):
    "daisyUI style names."

class SoftStyle(str, Enum):
    "daisyUI style names."

class GhostStyle(str, Enum):
    "daisyUI style names."

class BorderStyle(str, Enum):
    "daisyUI style names."

class HoverStyle(str, Enum):
    "daisyUI style names."

swap (swap.ipynb)

Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

Import

from cjm_fasthtml_daisyui.components.actions.swap import (
    swap,
    swap_on,
    swap_off,
    swap_indeterminate,
    swap_styles,
    test_swap_basic_examples,
    test_swap_styles_examples,
    test_swap_basic_fasthtml_examples,
    test_swap_effects_fasthtml_examples,
    test_swap_advanced_fasthtml_examples
)

Functions

def test_swap_basic_examples()
    "Test basic swap utilities."

def test_swap_styles_examples()
    "Test swap style utilities."

def test_swap_basic_fasthtml_examples()
    "Test basic swap examples including text and icon swaps."

def test_swap_effects_fasthtml_examples()
    "Test swap examples with rotate and flip effects."

def test_swap_advanced_fasthtml_examples()
    "Test advanced swap examples including hamburger button and class-based activation."

Variables

swap  # Swap container
swap_on  # Swap on state
swap_off  # Swap off state
swap_indeterminate  # Swap indeterminate state

table (table.ipynb)

Table can be used to show a list of data in a table format.

Import

from cjm_fasthtml_daisyui.components.data_display.table import (
    table,
    table_modifiers,
    table_sizes,
    test_table_basic_examples,
    test_table_modifiers_examples,
    test_table_sizes_examples,
    test_table_basic_fasthtml_examples,
    test_table_style_fasthtml_examples,
    test_table_visual_elements_fasthtml_examples,
    test_table_sizes_fasthtml_examples,
    test_table_pinned_fasthtml_examples
)

Functions

def test_table_basic_examples()
    "Test basic table utilities."

def test_table_modifiers_examples()
    "Test table modifier utilities."

def test_table_sizes_examples()
    "Test table size variants."

def test_table_basic_fasthtml_examples()
    "Test basic table and table with border and background from daisyUI v5 documentation."

def test_table_style_fasthtml_examples()
    "Test table with active row, hover row, and zebra stripes from daisyUI v5 documentation."

def test_table_visual_elements_fasthtml_examples()
    "Test table with visual elements from daisyUI v5 documentation."

def test_table_sizes_fasthtml_examples()
    "Test table xs size from daisyUI v5 documentation."

def test_table_pinned_fasthtml_examples()
    "Test table with pinned rows and pinned rows+columns from daisyUI v5 documentation."

Variables

table  # Table component
table_sizes  # Table size variants

tabs (tabs.ipynb)

Tabs can be used to show a list of links in a tabbed format.

Import

from cjm_fasthtml_daisyui.components.navigation.tabs import (
    tabs,
    tab,
    tab_content,
    tabs_styles,
    tab_modifiers,
    tabs_placement,
    tabs_sizes,
    BoxStyle,
    LiftStyle,
    test_tabs_basic_examples,
    test_tab_modifiers_examples,
    test_tab_placement_examples,
    test_tabs_sizes_examples,
    test_tabs_basic_fasthtml_examples,
    test_tabs_styles_fasthtml_examples,
    test_tabs_radio_inputs_fasthtml_examples,
    test_tabs_sizes_fasthtml_examples,
    test_tabs_with_content_fasthtml_examples,
    test_tabs_with_icons_fasthtml_examples,
    test_tabs_special_fasthtml_examples
)

Functions

def test_tabs_basic_examples()
    "Test basic tabs utilities."

def test_tab_modifiers_examples()
    "Test tab modifier utilities."

def test_tab_placement_examples()
    "Test tab modifier utilities."

def test_tabs_sizes_examples()
    "Test tabs size variants."

def test_tabs_basic_fasthtml_examples()
    "Test basic tabs example from daisyUI v5 documentation."

def test_tabs_styles_fasthtml_examples()
    "Test tabs style variations from daisyUI v5 documentation."

def test_tabs_radio_inputs_fasthtml_examples()
    "Test tabs using radio inputs from daisyUI v5 documentation."

def test_tabs_sizes_fasthtml_examples()
    "Test tabs size variations from daisyUI v5 documentation."

def test_tabs_with_content_fasthtml_examples()
    "Test tabs with content panels from daisyUI v5 documentation."

def test_tabs_with_icons_fasthtml_examples()
    "Test tabs with icons and content from daisyUI v5 documentation."

def test_tabs_special_fasthtml_examples()
    "Test special tabs variations from daisyUI v5 documentation."

Classes

class BoxStyle(str, Enum):

class LiftStyle(str, Enum):

Variables

tabs  # Base tabs component
tab  # tab part
tab_content  # tab content part
tabs_styles  # Tabs style variants
tabs_sizes  # Tabs size variants

testing (testing.ipynb)

Standardized test page creation for Jupyter notebooks with FastHTML

Import

from cjm_fasthtml_daisyui.core.testing import (
    create_theme_persistence_script,
    create_theme_selector,
    create_test_app,
    create_test_page,
    start_test_server
)

Functions

def create_theme_persistence_script() -> Script
    """
    Create a JavaScript script that handles theme persistence using localStorage.
    This script:
    1. Loads saved theme on page load
    2. Listens for theme changes and saves them
    3. Syncs radio button state with saved theme
    """

def create_theme_selector(
    custom_themes: Optional[List[str]] = None  # Optional list of custom theme names to include
) -> Div:  # Div containing theme selector dropdown
    "Create a daisyUI theme selector dropdown component."

def create_test_app(
   theme: Union[DaisyUITheme, str] = DaisyUITheme.LIGHT,  # Default theme
   custom_css: Optional[List[Union[str, Link]]] = None,  # Additional CSS
   custom_js: Optional[List[Union[str, Script]]] = None,  # Additional JS
   custom_theme_css: Optional[str] = None,  # Custom theme CSS as string
   custom_theme_paths: Optional[List[Union[str, Path]]] = None,  # List of paths to custom theme CSS files
   custom_theme_names: Optional[List[str]] = None,  # Names of custom themes to include in selector
   enable_theme_persistence: bool = True,  # Enable localStorage theme persistence
   debug: bool = True,  # Enable debug mode
   **kwargs
) -> tuple: # Tuple containing (app, rt) - FastHTML app instance and route decorator
    "Create a standardized test app for Jupyter notebooks with daisyUI and Tailwind."

def create_test_page(
    title: str,  # Page title
    *content,  # Page content elements
    include_theme_selector: bool = True,  # Include theme selector
    use_container: bool = True,  # Wrap in container
    custom_theme_names: Optional[List[str]] = None  # Custom themes for selector
) -> Div:  # Div containing complete page layout with navbar and content
    "Create a standardized test page layout with optional theme selector."

def start_test_server(
    app: FastHTML,    # FastHTML app instance created by create_test_app or fast_app
    port: int = 8000,  # Port
) -> JupyUvi:  # JupyUvi server instance for Jupyter notebook testing
    """
    Start a test server and return the JupyUvi instance.
    
    Usage:
        server = start_test_server(app)
        HTMX()  # Display the app
        
        # Later, in another cell:
        server.stop()
    """

text input (text_input.ipynb)

Text Input is a simple input field.

Import

from cjm_fasthtml_daisyui.components.data_input.text_input import (
    text_input,
    text_input_styles,
    text_input_colors,
    text_input_sizes,
    test_text_input_basic_examples,
    test_text_input_styles_examples,
    test_text_input_colors_examples,
    test_text_input_sizes_examples,
    test_text_input_basic_fasthtml_examples,
    test_text_input_with_labels_fasthtml_examples,
    test_text_input_styles_and_fieldset_fasthtml_examples,
    test_text_input_colors_fasthtml_examples,
    test_text_input_sizes_fasthtml_examples,
    test_text_input_special_types_fasthtml_examples,
    test_text_input_validators_part1_fasthtml_examples,
    test_text_input_validators_part2_fasthtml_examples
)

Functions

def test_text_input_basic_examples()
    "Test basic text_input utilities."

def test_text_input_styles_examples()
    "Test text_input style variants."

def test_text_input_colors_examples()
    "Test text_input color variants."

def test_text_input_sizes_examples()
    "Test text_input size variants."

def test_text_input_basic_fasthtml_examples()
    "Test basic text input examples from daisyUI v5 documentation."

def test_text_input_with_labels_fasthtml_examples()
    "Test text input with labels from daisyUI v5 documentation."

def test_text_input_styles_and_fieldset_fasthtml_examples()
    "Test text input styles and fieldset from daisyUI v5 documentation."

def test_text_input_colors_fasthtml_examples()
    "Test text input color variants from daisyUI v5 documentation."

def test_text_input_sizes_fasthtml_examples()
    "Test text input size variants from daisyUI v5 documentation."

def test_text_input_special_types_fasthtml_examples()
    "Test special input types from daisyUI v5 documentation."

def test_text_input_validators_part1_fasthtml_examples()
    "Test text input validators part 1: username, search, email from daisyUI v5 documentation."

def test_text_input_validators_part2_fasthtml_examples()
    "Test text input validators part 2: password, number, phone, URL from daisyUI v5 documentation."

Variables

text_input  # Base text_input component
text_input_styles  # text_input style variants
text_input_colors  # text_input color variants
text_input_sizes  # text_input size variants

textarea (textarea.ipynb)

Textarea allows users to enter text in multiple lines.

Import

from cjm_fasthtml_daisyui.components.data_input.textarea import (
    textarea,
    textarea_styles,
    textarea_colors,
    textarea_sizes,
    test_textarea_basic_examples,
    test_textarea_styles_examples,
    test_textarea_colors_examples,
    test_textarea_sizes_examples,
    test_textarea_basic_fasthtml_examples,
    test_textarea_ghost_fasthtml_examples,
    test_textarea_with_form_control_fasthtml_examples,
    test_textarea_colors_fasthtml_examples,
    test_textarea_sizes_fasthtml_examples,
    test_textarea_disabled_fasthtml_examples
)

Functions

def test_textarea_basic_examples()
    "Test basic textarea utilities."

def test_textarea_styles_examples()
    "Test textarea style variants."

def test_textarea_colors_examples()
    "Test textarea color variants."

def test_textarea_sizes_examples()
    "Test textarea size variants."

def test_textarea_basic_fasthtml_examples()
    "Test basic textarea example from daisyUI v5 documentation."

def test_textarea_ghost_fasthtml_examples()
    "Test ghost textarea (no background) from daisyUI v5 documentation."

def test_textarea_with_form_control_fasthtml_examples()
    "Test textarea with form control and labels from daisyUI v5 documentation."

def test_textarea_colors_fasthtml_examples()
    "Test textarea color variations from daisyUI v5 documentation."

def test_textarea_sizes_fasthtml_examples()
    "Test textarea size variations from daisyUI v5 documentation."

def test_textarea_disabled_fasthtml_examples()
    "Test disabled textarea from daisyUI v5 documentation."

Variables

textarea  # Base textarea component
textarea_styles  # textarea style variants
textarea_colors  # textarea color variants
textarea_sizes  # textarea size variants

theme controller (theme_controller.ipynb)

If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input’s value.

Import

from cjm_fasthtml_daisyui.components.actions.theme_controller import (
    theme_controller,
    test_theme_controller_basic_examples,
    test_theme_controller_basic_fasthtml_examples,
    test_theme_controller_swap_fasthtml_examples,
    test_theme_controller_radio_fasthtml_examples,
    test_theme_controller_advanced_fasthtml_examples
)

Functions

def test_theme_controller_basic_examples()
    "Test basic theme controller utility."

def test_theme_controller_basic_fasthtml_examples()
    "Test basic theme controller examples with toggle and checkbox inputs."

def test_theme_controller_swap_fasthtml_examples()
    "Test theme controller examples using swap component."

def test_theme_controller_radio_fasthtml_examples()
    "Test theme controller examples using radio inputs."

def test_theme_controller_advanced_fasthtml_examples()
    "Test advanced theme controller examples including dropdown and custom styles."

themes (themes.ipynb)

Theme management for daisyUI

Import

from cjm_fasthtml_daisyui.core.themes import (
    DaisyUITheme,
    get_theme_value,
    ThemeColors,
    ThemeConfig,
    create_theme_css,
    save_theme_css,
    save_theme_json,
    load_theme_json,
    load_style_css
)

Functions

def get_theme_value(
    theme: Union[DaisyUITheme, str],  # The theme to validate (DaisyUITheme enum or string)
    allow_custom: bool = False  # If True, allows any string value for custom themes
) -> str:  # The validated theme name as a string
    "Get the string value of a theme, supporting both enum and string inputs. This allows flexibility in how themes are specified while maintaining type safety."

def create_theme_css(
    theme: ThemeConfig  # Theme configuration with colors, sizes, and effects
) -> str:  # CSS string with theme variables
    """
    Generate CSS for a custom daisyUI theme.
    
    This creates the CSS variables needed for a custom theme when using the CDN approach.
    """

def save_theme_css(
    theme: ThemeConfig,  # Theme configuration to convert to CSS
    path: Union[str, Path]  # File path where CSS will be saved
) -> None:  # None
    "Save a theme configuration as a CSS file."

def save_theme_json(
    theme: ThemeConfig,  # Theme configuration to save
    path: Union[str, Path]  # File path where JSON will be saved
) -> None:  # None
    "Save a theme configuration as a JSON file for reuse."

def load_theme_json(
    path: Union[str, Path]  # Path to JSON file containing theme configuration
) -> ThemeConfig:  # Theme configuration dictionary
    "Load a theme configuration from a JSON file."

def load_style_css(
    path: Union[str, Path]  # Path to CSS file containing theme configuration
) -> Style:  # FasthHTML Style element
    "Load a theme configuration from a CSS file to a FasthHTML Style element."

Classes

class DaisyUITheme(str, Enum):
    "All built-in daisyUI themes."

class ThemeColors(TypedDict):
    "Color definitions for a daisyUI theme using OKLCH color space."

class ThemeConfig(TypedDict):
    "Complete configuration for a custom daisyUI theme."

timeline (timeline.ipynb)

Timeline component shows a list of events in chronological order.

Import

from cjm_fasthtml_daisyui.components.data_display.timeline import (
    timeline,
    timeline_start,
    timeline_middle,
    timeline_end,
    timeline_modifiers,
    timeline_direction,
    test_timeline_basic_examples,
    test_timeline_modifiers_examples,
    test_timeline_direction_examples,
    test_timeline_basic_fasthtml_examples,
    test_timeline_single_side_fasthtml_examples,
    test_timeline_alternating_fasthtml_examples,
    test_timeline_without_icons_fasthtml_examples,
    test_timeline_vertical_fasthtml_examples,
    test_timeline_vertical_advanced_fasthtml_examples,
    test_timeline_responsive_fasthtml_examples,
    test_timeline_snap_icon_fasthtml_examples
)

Functions

def test_timeline_basic_examples()
    "Test basic timeline utilities."

def test_timeline_modifiers_examples()
    "Test timeline modifier utilities."

def test_timeline_direction_examples()
    "Test timeline direction utilities."

def test_timeline_basic_fasthtml_examples()
    "Test timeline with text on both sides and icon from daisyUI v5 documentation."

def test_timeline_single_side_fasthtml_examples()
    "Test timeline with bottom side only and top side only from daisyUI v5 documentation."

def test_timeline_alternating_fasthtml_examples()
    "Test timeline with different sides and colorful lines from daisyUI v5 documentation."

def test_timeline_without_icons_fasthtml_examples()
    "Test timeline without icons from daisyUI v5 documentation."

def test_timeline_vertical_fasthtml_examples()
    "Test vertical timeline variations from daisyUI v5 documentation."

def test_timeline_vertical_advanced_fasthtml_examples()
    "Test vertical timeline with different sides, colorful lines, and without icons from daisyUI v5 documentation."

def test_timeline_responsive_fasthtml_examples()
    "Test responsive timeline (vertical by default, horizontal on large screen) from daisyUI v5 documentation."

def test_timeline_snap_icon_fasthtml_examples()
    "Test timeline with icon snapped to the start from daisyUI v5 documentation."

Variables

timeline  # Timeline container
timeline_start  # Timeline start
timeline_middle  # Timeline middle
timeline_end  # Timeline end

toast (toast.ipynb)

Toast is a wrapper to stack elements, positioned on the corner of page.

Import

from cjm_fasthtml_daisyui.components.feedback.toast import (
    toast,
    toast_placement,
    ToastPlacement,
    test_toast_basic_examples,
    test_toast_placement_examples,
    test_toast_basic_fasthtml_examples,
    test_toast_top_positions_fasthtml_examples,
    test_toast_middle_positions_fasthtml_examples,
    test_toast_bottom_positions_fasthtml_examples
)

Functions

def test_toast_basic_examples()
    "Test basic toast utilities."

def test_toast_placement_examples()
    "Test toast placement options."

def test_toast_basic_fasthtml_examples()
    "Test basic toast with alert inside from daisyUI v5 documentation."

def test_toast_top_positions_fasthtml_examples()
    "Test toast positioning at top (start, center, end) from daisyUI v5 documentation."

def test_toast_middle_positions_fasthtml_examples()
    "Test toast positioning at middle (start, center, end) from daisyUI v5 documentation."

def test_toast_bottom_positions_fasthtml_examples()
    "Test toast positioning at bottom (start, center, end) from daisyUI v5 documentation."

Classes

class ToastPlacement(str, Enum):

Variables

toast  # Base toast component
toast_placement  # toast placement options

toggle (toggle.ipynb)

Toggle is a checkbox that is styled to look like a switch button.

Import

from cjm_fasthtml_daisyui.components.data_input.toggle import (
    toggle,
    toggle_colors,
    toggle_sizes,
    test_toggle_basic_examples,
    test_toggle_colors_examples,
    test_toggle_sizes_examples,
    test_toggle_basic_fasthtml_examples,
    test_toggle_with_fieldset_fasthtml_examples,
    test_toggle_sizes_fasthtml_examples,
    test_toggle_colors_fasthtml_examples,
    test_toggle_disabled_fasthtml_examples,
    test_toggle_with_icons_fasthtml_examples,
    test_toggle_custom_colors_fasthtml_examples,
    test_toggle_indeterminate_fasthtml_examples
)

Functions

def test_toggle_basic_examples()
    "Test basic toggle utilities."

def test_toggle_colors_examples()
    "Test toggle color variants."

def test_toggle_sizes_examples()
    "Test toggle size variants."

def test_toggle_basic_fasthtml_examples()
    "Test basic toggle example from daisyUI v5 documentation."

def test_toggle_with_fieldset_fasthtml_examples()
    "Test toggle with fieldset and label from daisyUI v5 documentation."

def test_toggle_sizes_fasthtml_examples()
    "Test toggle size variations from daisyUI v5 documentation."

def test_toggle_colors_fasthtml_examples()
    "Test toggle color variations from daisyUI v5 documentation."

def test_toggle_disabled_fasthtml_examples()
    "Test disabled toggle states from daisyUI v5 documentation."

def test_toggle_with_icons_fasthtml_examples()
    "Test toggle with icons inside from daisyUI v5 documentation."

def test_toggle_custom_colors_fasthtml_examples()
    "Test toggle with custom colors from daisyUI v5 documentation."

def test_toggle_indeterminate_fasthtml_examples():
    """Test indeterminate toggle state from daisyUI v5 documentation."""
    from fasthtml.common import Input, Script, Div
    
    # Indeterminate toggle
    # Note: The indeterminate state must be set via JavaScript
    "Test indeterminate toggle state from daisyUI v5 documentation."

Variables

toggle  # Base toggle component
toggle_colors  # toggle color variants
toggle_sizes  # toggle size variants

tooltip (tooltip.ipynb)

Tooltip can be used to show a message when hovering over an element.

Import

from cjm_fasthtml_daisyui.components.feedback.tooltip import (
    tooltip,
    tooltip_content,
    tooltip_placement,
    tooltip_modifiers,
    tooltip_colors,
    TooltipPlacement,
    TooltipModifier,
    test_tooltip_basic_examples,
    test_tooltip_placement_examples,
    test_tooltip_modifiers_examples,
    test_tooltip_colors_examples,
    test_tooltip_basic_fasthtml_examples,
    test_tooltip_with_content_fasthtml_examples,
    test_tooltip_positions_fasthtml_examples,
    test_tooltip_colors_fasthtml_examples,
    test_tooltip_responsive_fasthtml_examples
)

Functions

def test_tooltip_basic_examples()
    "Test basic tooltip utilities."

def test_tooltip_placement_examples()
    "Test tooltip placement options."

def test_tooltip_modifiers_examples()
    "Test tooltip modifier utilities."

def test_tooltip_colors_examples()
    "Test tooltip color variants."

def test_tooltip_basic_fasthtml_examples()
    "Test basic tooltip examples from daisyUI v5 documentation."

def test_tooltip_with_content_fasthtml_examples()
    "Test tooltip with tooltip-content from daisyUI v5 documentation."

def test_tooltip_positions_fasthtml_examples()
    "Test tooltip position variations from daisyUI v5 documentation."

def test_tooltip_colors_fasthtml_examples()
    "Test tooltip color variations from daisyUI v5 documentation."

def test_tooltip_responsive_fasthtml_examples()
    "Test responsive tooltip from daisyUI v5 documentation."

Classes

class TooltipPlacement(str, Enum):

class TooltipModifier(str, Enum):

Variables

tooltip  # Base tooltip component
tooltip_content  # Base tooltip content part
tooltip_placement  # tooltip placement options
tooltip_modifiers  # tooltip modifiers
tooltip_colors  # Tooltip color variants

validator (validator.ipynb)

Validator class changes the color of form elements to error or success based on input’s validation rules.

Import

from cjm_fasthtml_daisyui.components.data_input.validator import (
    validator,
    validator_hint,
    test_validator_basic_examples,
    test_validator_basic_fasthtml_examples,
    test_validator_with_hint_fasthtml_examples,
    test_validator_password_fasthtml_examples,
    test_validator_username_phone_fasthtml_examples,
    test_validator_url_date_number_fasthtml_examples,
    test_validator_checkbox_toggle_select_fasthtml_examples
)

Functions

def test_validator_basic_examples()
    "Test basic validator utilities."

def test_validator_basic_fasthtml_examples()
    "Test basic validator example from daisyUI v5 documentation."

def test_validator_with_hint_fasthtml_examples()
    "Test validator with hint from daisyUI v5 documentation."

def test_validator_password_fasthtml_examples()
    "Test password requirement validator from daisyUI v5 documentation."

def test_validator_username_phone_fasthtml_examples()
    "Test username and phone requirement validators from daisyUI v5 documentation."

def test_validator_url_date_number_fasthtml_examples()
    "Test URL, date, and number requirement validators from daisyUI v5 documentation."

def test_validator_checkbox_toggle_select_fasthtml_examples()
    "Test checkbox, toggle, and select requirement validators from daisyUI v5 documentation."

Variables

validator  # Base validator component
validator_hint  # validator_hint component

components.mockup.window (window.ipynb)

Import

from cjm_fasthtml_daisyui.components.mockup.window import (
    mockup_window,
    test_mockup_window_basic_examples,
    test_window_mockup_with_border_fasthtml_examples,
    test_window_mockup_with_background_fasthtml_examples
)

Functions

def test_mockup_window_basic_examples()
    "Test basic mockup_window utilities."

def test_window_mockup_with_border_fasthtml_examples()
    "Test window mockup with border from daisyUI v5 documentation."

def test_window_mockup_with_background_fasthtml_examples()
    "Test window mockup with background color from daisyUI v5 documentation."

Variables

mockup_window  # Base mockup window component