# LocoMotion Component Library v0.5.1

## Library Metadata
- Framework: Ruby on Rails + ViewComponent
- UI Library: DaisyUI v5
- Total Components: 63
- Component Categories: Actions, Data Display, Data Input, Feedback, Hero, Layout, Mockup, Navigation
- Helper Methods: daisy_, hero_ prefixes
- File Conventions: Components in app/components/, Examples in app/views/examples/

This file provides comprehensive documentation for all LocoMotion components.
LocoMotion is a Ruby on Rails component library built on ViewComponent and DaisyUI.

## Common Usage Patterns

This document describes common usage patterns and conventions for the LocoMotion component library. These patterns help LLMs generate idiomatic and consistent code.

## Form Building Patterns

### Basic Form Fields
- Use `daisy_label` with `daisy_text_input` for form fields
- Wrap related inputs in `daisy_fieldset` for grouping
- Add validation errors with `daisy_alert` (error modifier)
- Use `daisy_text_area` for multi-line input

### Form Layout
```haml
= daisy_fieldset do
  = daisy_label("Name")
  = daisy_text_input(name: "name", id: "name", css: "input-bordered")

  = daisy_label("Email")
  = daisy_text_input(name: "email", id: "email", type: "email", css: "input-bordered")

  = daisy_label("Message")
  = daisy_text_area(name: "message", id: "message", css: "textarea-bordered")
```

### Select Fields and Options
- Use `daisy_select` with option groups for better organization
- Include `daisy_label` for accessibility
- Use `daisy_radio_button` for mutually exclusive choices
- Use `daisy_checkbox` for multiple selections

### File Uploads
- Use `daisy_file_input` with proper labeling
- Add validation feedback with `daisy_alert`
- Include help text with `daisy_label` descriptions

## Navigation Patterns

### Main Navigation
- Use `daisy_navbar` for primary site navigation
- Include `daisy_link` components for navigation items
- Add `daisy_dropdown` for sub-menus
- Use `daisy_breadcrumbs` for hierarchical navigation

### Sidebar Navigation
- Use `daisy_menu` for vertical sidebar navigation
- Apply `w-full` or specific width classes
- Use `daisy_link` for menu items
- Consider `daisy_drawer` for mobile navigation

### Navigation Example
```haml
= daisy_navbar(css: "bg-base-100") do
  .navbar-start
    = daisy_link("Home", "/", css: "btn btn-ghost")
    = daisy_link("About", "/about", css: "btn btn-ghost")

  .navbar-end
    = daisy_dropdown(css: "btn btn-ghost") do |dropdown|
      - dropdown.with_trigger do
        Account
      - dropdown.with_content do
        = daisy_link("Profile", "/profile")
        = daisy_link("Settings", "/settings")
```

## Layout Patterns

### Page Structure
- Use `daisy_hero` for page headers and introductions
- Wrap content in `daisy_card` for section grouping
- Use `daisy_divider` to separate content sections
- Apply `daisy_footer` for page footers

### Content Cards
- Use `daisy_card` for content grouping
- Include `daisy_button` for card actions
- Use `daisy_avatar` for user information
- Apply `daisy_badge` for status indicators

### Responsive Layout
- Use Tailwind flexbox utilities with components
- Apply `daisy_stack` for 3D layering effects
- Use `daisy_join` to connect related elements
- Consider `daisy_collapse` for expandable content

## Data Display Patterns

### Tables and Lists
- Use `daisy_table` for tabular data
- Apply `daisy_list` for vertical item displays
- Use `daisy_stat` for metrics and statistics
- Include `daisy_badge` for status and categorization

### Media Content
- Use `daisy_figure` for images with captions
- Apply `daisy_avatar` for user profiles
- Use `daisy_carousel` for image galleries
- Include `daisy_kbd` for keyboard shortcuts

### Data Visualization
- Use `daisy_progress` for progress bars
- Apply `daisy_radial_progress` for circular progress
- Use `daisy_countdown` for timers
- Include `daisy_stat` for key metrics

## Feedback Patterns

### User Feedback
- Use `daisy_alert` for notifications and warnings
- Apply `daisy_toast` for non-critical messages
- Use `daisy_loading` for loading states
- Include `daisy_skeleton` for content placeholders

### Interactive Feedback
- Use `daisy_tooltip` for contextual help
- Apply `daisy_modal` for dialogs and confirmations
- Use `daisy_swap` for toggle states
- Include `daisy_collapse` for expandable content

### Error Handling
```haml
= daisy_alert(modifier: :error) do
  %div
    %svg.w-6.h-6.inline-block.mr-2{fill: "none", stroke: "currentColor", viewBox: "0 0 24 24"}
      %path{stroke_linecap: "round", stroke_linejoin: "round", "stroke-width": "2", d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}
    Error: This field is required

= daisy_alert(modifier: :warning) do
  %div
    %svg.w-6.h-6.inline-block.mr-2{fill: "none", stroke: "currentColor", viewBox: "0 0 24 24"}
      %path{stroke_linecap: "round", stroke_linejoin: "round", "stroke-width": "2", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"}
    Warning: Please review your input
```

## Rails Integration Patterns

### ViewComponent Integration
- All components inherit from `ViewComponent::Base`
- Use Rails helpers within components
- Access controller and request data when needed
- Follow Rails naming conventions

### Helper Method Usage
- Use `daisy_*` helper methods in views
- Apply `hero_*` helpers for icons
- Use standard Rails form helpers with components
- Leverage Rails URL helpers for links

### Asset Pipeline
- Include DaisyUI CSS in your application
- Add Tailwind CSS for utility classes
- Use Stimulus controllers for JavaScript interactions
- Follow Rails asset organization patterns

## Styling Conventions

### DaisyUI Classes
- Use semantic color classes: `btn-primary`, `input-error`
- Apply size modifiers: `btn-sm`, `input-lg`
- Use state classes: `btn-active`, `input-disabled`
- Apply ghost variants for borderless styles: `input-ghost`, `btn-ghost`

### Tailwind Integration
- Use utility classes for spacing: `m-4`, `p-2`
- Apply responsive utilities: `lg:flex`, `md:hidden`
- Use animation classes: `animate-pulse`, `animate-bounce`
- Apply layout utilities: `flex`, `grid`, `block`

### Custom CSS
- Use the `css:` parameter for additional styling
- Apply conditional classes based on state
- Use `html:` parameter for HTML attributes
- Include ARIA attributes for accessibility

## Accessibility Patterns

### Semantic HTML
- Use proper heading hierarchy
- Include ARIA labels and descriptions
- Ensure keyboard navigation support
- Provide alternative text for images

### Form Accessibility
```haml
= daisy_label("Full Name", for: "full_name")
= daisy_text_input(name: "user[full_name]", id: "full_name",
                   html: { aria: { required: true, describedby: "name_help" } })
%p#name_help.text-sm.text-gray-600 Enter your full name as it appears on official documents
```

### Interactive Elements
- Use `daisy_tooltip` for additional context
- Apply proper focus states
- Include skip links for navigation
- Ensure color contrast requirements

## Performance Patterns

### Component Optimization
- Avoid deeply nested component structures
- Use conditional rendering for expensive components
- Leverage Rails caching for repeated content
- Consider lazy loading for heavy components

### Asset Loading
- Load DaisyUI and Tailwind CSS efficiently
- Use Stimulus controllers judiciously
- Optimize image assets with proper sizing
- Consider progressive enhancement strategies

## Components by Category

### Actions

- **Daisy::Actions::ButtonComponent**: Interactive button components for actions, navigation, and form submissions.
- **Daisy::Actions::DropdownComponent**: Dropdowns are a great way to display a list of items in a compact manner. 
- **Daisy::Actions::ModalComponent**: Modals are used to display content that requires user interaction.
- **Daisy::Actions::SwapComponent**: The Swap component allows you to quickly swap between two icons, images, or...
- **Daisy::Actions::ThemeControllerComponent**: do The `ThemeController` component is a **_Builder_** component rather than...

### DataDisplay

- **Daisy::DataDisplay::AccordionComponent**: Collapsible content sections that expand/collapse on click.
- **Daisy::DataDisplay::AvatarComponent**: User profile image components with fallback options and status indicators.
- **Daisy::DataDisplay::BadgeComponent**: Small, colorful indicators for displaying status, counts, or metadata.
- **Daisy::DataDisplay::CardComponent**: Versatile containers for grouping related content with optional images,...
- **Daisy::DataDisplay::CarouselComponent**: Interactive image galleries with smooth sliding transitions and navigation.
- **Daisy::DataDisplay::ChatComponent**: Message bubbles designed for chat interfaces and conversations.
- **Daisy::DataDisplay::CollapseComponent**: Expandable/collapsible content containers with smooth animations.
- **Daisy::DataDisplay::CountdownComponent**: Animated timers that count down from a specified duration to zero.
- **Daisy::DataDisplay::DiffComponent**: Interactive comparison components with a sliding divider to compare before...
- **Daisy::DataDisplay::FigureComponent**: Image containers with optional captions for visual content presentation.
- **Daisy::DataDisplay::KbdComponent**: Styled keyboard key representations for displaying keyboard shortcuts,...
- **Daisy::DataDisplay::ListComponent**: Lists provide a vertical layout to display information in rows.
- **Daisy::DataDisplay::StatComponent**: do Stats have a transparent background by default. Use `bg-base-100` if you...
- **Daisy::DataDisplay::StatusComponent**: Status is a really small icon to visually show the current status of an...
- **Daisy::DataDisplay::TableComponent**: Tables are designed to show data in a tabular layout making it easy to see...
- **Daisy::DataDisplay::TimelineComponent**: Visual sequences for displaying chronological events, progress updates,  or...

### DataInput

- **Daisy::DataInput::CallyComponent**: do You must include the Cally script tag or <a href="https://wicky.nillia.
- **Daisy::DataInput::CallyInputComponent**: This component provides an elegant alternative to standard HTML date inputs...
- **Daisy::DataInput::CheckboxComponent**: Checkboxes are great for toggling an item on / off, or selecting multiple items...
- **Daisy::DataInput::FileInputComponent**: Styled file upload controls with drag-and-drop support and visual feedback.
- **Daisy::DataInput::FieldsetComponent**: Fieldsets group related form controls and can optionally include a leg. 
- **Daisy::DataInput::LabelComponent**: Labels provide a useful description for various kinds of inputs. 
- **Daisy::DataInput::RadioButtonComponent**: Interactive selection controls for choosing one option from a group.
- **Daisy::DataInput::RangeComponent**: Slider controls for selecting numeric values within a defined range.
- **Daisy::DataInput::RatingComponent**: Star-based rating controls for user feedback and reviews. Interactive star...
- **Daisy::DataInput::SelectComponent**: do Select inputs have a border by default and a width of 20rem.
- **Daisy::DataInput::TextInputComponent**: Text inputs allow you to enter various forms of text such as usernames,...
- **Daisy::DataInput::TextAreaComponent**: do Text areas have a border by default. Use `textarea-ghost` to remove the...
- **Daisy::DataInput::ToggleComponent**: The Toggle component is a wrapper around the  component_link("Checkbox",...

### Feedback

- **Daisy::Feedback::AlertComponent**:  Alerts inform the user about important information or changes to the system. 
- **Daisy::Feedback::LoadingComponent**:  Loaders are used to indicate that a process is happening in the background. 
- **Daisy::Feedback::ProgressComponent**:  Progress bars are used to indicate the progress of a process. 
- **Daisy::Feedback::RadialProgressComponent**: Radial progress bars are used to indicate the progress of a process, in a...
- **Daisy::Feedback::SkeletonComponent**: Skeletons are used to show a placeholder for content that is loading or  being...
- **Daisy::Feedback::ToastComponent**: Toasts are used to show a message to the user that is not critical, but...
- **Daisy::Feedback::TooltipComponent**: Additionally, we offer the `daisy_tooltip` component to wrap an entire...

### Hero

- **Hero::IconComponent**: Heroicons are a set of free, MIT-licensed high-quality SVG icons for you to...

### Layout

- **Daisy::Layout::DividerComponent**: Dividers are used to separate content in a meaningful way.
- **Daisy::Layout::DrawerComponent**: do The `relative / absolute` and the `h-48` classes allow the drawer to rer...
- **Daisy::Layout::FooterComponent**: Footers are used to provide additional information about a page or site.
- **Daisy::Layout::HeroComponent**: Heroes are used to provide a large, eye-catching introduction to a page or site.
- **Daisy::Layout::IndicatorComponent**: Indicators wrap other elements and provide a visual cue that something requires...
- **Daisy::Layout::JoinComponent**: Joins allow you to combine multiple components into a singular, joined,...
- **Daisy::Layout::MaskComponent**: Masks allow you to create a variety of shapes and patterns!
- **Daisy::Layout::StackComponent**: Stacks provide a 3 dimensional effect to your content. This can be helpful for...

### Mockup

- **Daisy::Mockup::BrowserComponent**: The Browser component is a simple mockup that looks and feels like a user's...
- **Daisy::Mockup::CodeComponent**: Code blocks are a great way to display code snippets in your site or...
- **Daisy::Mockup::DeviceComponent**: Device mockups are a great way to showcase your designs in a realistic way! 
- **Daisy::Mockup::FrameComponent**: Frames showcase your work as if they were displayed in a window.

### Navigation

- **Daisy::Navigation::BreadcrumbsComponent**: Navigation aids that show the user's current location and path within a...
- **Daisy::Navigation::DockComponent**: The Dock component provides a navigation bar fixed to the bottom of the screen,...
- **Daisy::Navigation::LinkComponent**: Tailwind removes the styling on standard links so we provide an easy way to...
- **Daisy::Navigation::MenuComponent**: do Vertical menus no longer have a default width. Use `w-full` or other width...
- **Daisy::Navigation::NavbarComponent**: Horizontal navigation bars that organize primary navigation links, branding,...
- **Daisy::Navigation::PaginationComponent**: Pagination can be implemented by utilizing the existing  component_link("Join",...
- **Daisy::Navigation::StepsComponent**: Steps allow you to create a series of steps that users can follow to  complete...
- **Daisy::Navigation::TabsComponent**: Navigation controls for organizing content into switchable panels.

---

## Component Details

=== Component: Hero::IconComponent
Group: Hero
Title: Icons
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Hero::IconComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/hero/icon_component.rb

Description:
 Heroicons are a set of free, MIT-licensed high-quality SVG icons for you to  use in your web projects. You can find them at  ". link to("https://heroicons.com", target: "_blank", right_icon: "", right_icon_css: "") 

API Signature:
- hero_icon

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Rails Integration:
- Base Class: Hero::IconComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- hero_icon

Examples:

-- Example: Basic Icons
Description:
By default, icons are displayed with the `` Tailwind class to set the width and height. This can be overridden **without** using the `!` Tailwind modifier because we utilize the `:where()` pseudo-class to ensure that our default classes have the lowest CSS specificity possible. The icon color will inherit the text color of the parent element. Additionally, if it's more convenient for your purposes, you can pass the icon as a keyword argument using the `icon:` option instead of the first positional argument.

Code (HAML):
```haml
= hero_icon("academic-cap")

  = hero_icon(icon: "adjustments-horizontal")

  %span.text-blue-500
    = hero_icon("archive-box")
```

-- Example: Customized Icons
Description:
You can customize the size, color, and other properties of the icons using standard Tailwind classes.

Code (HAML):
```haml
= hero_icon("no-symbol", css: "size-4 text-red-600")

  = hero_icon("arrow-trending-up", css: "size-10 text-green-600")

  = hero_icon("exclamation-triangle", css: "size-14 text-yellow-400 animate-pulse")
```

---

=== Component: Daisy::Actions::ButtonComponent
Group: Actions
Title: Buttons
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Actions::ButtonComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/actions/button_component.rb

Description:
 Interactive button components for actions, navigation, and form submissions.  Supports multiple styles (primary, secondary, ghost, link), sizes, icons,  and custom styling options for versatile UI interactions. 

API Signature:
- daisy_button

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Actions::DropdownComponent
- Daisy::Actions::ModalComponent
- Daisy::Actions::SwapComponent
- Daisy::Actions::ThemeControllerComponent

Rails Integration:
- Base Class: Daisy::Actions::ButtonComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::IconableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_button

Examples:

-- Example: Basic Buttons
Description:
Buttons are used to trigger actions. They can be used to submit forms, navigate to other pages, or trigger any other action. And they come in various styles and colors.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4
    = daisy_button do
      Plain Button

    = daisy_button(css: "btn-primary") do
      Primary Button

    = daisy_button(css: "btn-secondary") do
      Secondary Button

    = daisy_button(css: "btn-accent") do
      Accent Button

    = daisy_button(css: "btn-ghost") do
      Ghost Button

    = daisy_button(css: "btn-link") do
      Link Button
```

-- Example: Links
Description:
Buttons can be used as links by providing an `href` attribute. This rers an `<a>` tag instead of a `<button>` tag.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4
    = daisy_button(href: "https://google.com", target: "_blank") do
      External Link

    = daisy_button(href: "/docs", css: "btn-primary") do
      Internal Link

    = daisy_button(href: "#", css: "btn-secondary", icon: "arrow-right") do
      Link with Icon
```

-- Example: Icon Buttons
Description:
Buttons can also have an icon on the left or right side.

Code (HAML):
```haml
.flex.flex-col.md:flex-row.items-center.justify-center.gap-4
    = daisy_button(icon: "plus", css: "btn-circle")

    = daisy_button(icon: "minus", css: "btn-circle")

    = daisy_button(css: "hover:btn-secondary", icon: "heart", title: "Favorites")

    = daisy_button(css: "btn-accent", left_icon: "cloud", right_icon: "folder", title: "Cloud Files")

    = daisy_button(css: "btn-primary btn-lg", right_icon: "chevron-right", right_icon_css: "size-8", title: "Go")
```

-- Example: Multiple Sizes
Description:
You can also use various sizes.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4.items-center
    = daisy_button(css: "btn-lg") do
      Big Button

    = daisy_button do
      Default Button

    = daisy_button(css: "btn-sm") do
      Small Button

    = daisy_button(css: "btn-xs") do
      Tiny Button
```

-- Example: Custom Buttons
Description:
You can also create custom buttons.

Code (HAML):
```haml
= daisy_button(css: "bg-linear-to-r from-blue-500 to-blue-700 text-white rounded-full") do
    .loading.loading-spinner.mr-1

    %span
      Gradient Button
```

-- Example: Outline Buttons
Description:
You can also create outline buttons.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4.items-center
    = daisy_button(css: "btn-outline") do
      Outline Button

    = daisy_button(css: "btn-primary btn-outline") do
      Primary Outline Button

    = daisy_button(css: "btn-secondary btn-outline") do
      Secondary Outline Button

    = daisy_button(css: "btn-accent btn-outline") do
      Accent Outline Button
```

-- Example: Soft Buttons
Description:
You can also create soft buttons.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4.items-center
    = daisy_button(css: "btn-soft") do
      Soft Button

    = daisy_button(css: "btn-primary btn-soft") do
      Primary Soft Button

    = daisy_button(css: "btn-secondary btn-soft") do
      Secondary Soft Button

    = daisy_button(css: "btn-accent btn-soft") do
      Accent Soft Button
```

-- Example: Dash Buttons
Description:
You can also create dash buttons.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4.items-center
    = daisy_button(css: "btn-dash") do
      Dash Button

    = daisy_button(css: "btn-primary btn-dash") do
      Primary Dash Button

    = daisy_button(css: "btn-secondary btn-dash") do
      Secondary Dash Button

    = daisy_button(css: "btn-accent btn-dash") do
      Accent Dash Button
```

---

=== Component: Daisy::Actions::DropdownComponent
Group: Actions
Title: Dropdowns
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Actions::DropdownComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/actions/dropdown_component.rb

Description:
Dropdowns are a great way to display a list of items in a compact manner. 

API Signature:
- daisy_dropdown

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Actions::ButtonComponent
- Daisy::Actions::ModalComponent
- Daisy::Actions::SwapComponent
- Daisy::Actions::ThemeControllerComponent

Rails Integration:
- Base Class: Daisy::Actions::DropdownComponent
- ViewComponent: Yes
- Includes: LocoMotion::Patches::ViewComponent::SlotableDefaultPatch, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_dropdown

Examples:

-- Example: Basic Dropdown
Description:
A basic dropdown has an icon or a title and a list of items (actions).

Code (HAML):
```haml
= daisy_dropdown(title: "Click to Open") do |dropdown|
    - dropdown.with_item do
      = link_to "Ruby", "https://www.ruby-lang.org", target: "_blank"

    - dropdown.with_item do
      = link_to "Rails", "http://www.rubyonrails.org", target: "_blank"

    - dropdown.with_item do
      = link_to "Hotwire", "https://hotwired.dev/", target: "_blank"
```

-- Example: Custom Button
Description:
You can pass in your own button element to the dropdown.

Code (HAML):
```haml
= daisy_dropdown do |dropdown|
    - dropdown.with_button(icon: "heart", title: "Favorites", css: "btn-primary")

    - dropdown.with_item do
      = link_to "Ruby", "https://www.ruby-lang.org", target: "_blank"

    - dropdown.with_item do
      = link_to "Rails", "http://www.rubyonrails.org", target: "_blank"

    - dropdown.with_item do
      = link_to "Hotwire", "https://hotwired.dev/", target: "_blank"
```

-- Example: Fully Custom Dropdown
Description:
You can also pass a custom `activator` allowing you to use any content instead of just a button to open the dropdown. Additionally, if no items are setup, the dropdown will simply output any content you provide, meaning you can completely customize the dropdown content as well. do You'll need to **manually** add the `dropdown-content` CSS class to the content wrapper. We **automatically** add the `role="button"` and `tabindex="0"` attributes to the custom activator to make it keyboard accessible.

Code (HAML):
```haml
.flex.flex-col.items-end{ class: "max-w-[500px]" }
    = daisy_dropdown(css: "dropdown-end dropdown-hover") do |dropdown|
      - # This is the custom activator that will open the dropdown

      - dropdown.with_activator(css: "group") do
        = daisy_stat(css: "w-60 bg-base-100 border border-base-300 group-focus:border-info rounded-lg", title: "Places to Visit", description: "Hover to see more.") do
          = number_with_delimiter(1208)

      - # This is the custom content that will be displayed in the dropdown

      - # Note that we manually add the `dropdown-content` class to the wrapper

      = daisy_card(css: "mt-2 w-72 dropdown-content bg-base-100 shadow-xl") do |card|
        - card.with_top_figure css: "aspect-video", src: image_path("landscapes/beach.jpg")

        %p Such a beautiful beach!

        - card.with_actions(css: "mt-2 justify-end") do
          = daisy_button(css: "btn-primary") do
            Book Travel

    - # Extra content / space to show the dropdown in action

    .mt-4.pb-48.flex.flex-col.gap-4
      Here is some text which will be hidden by the dropdown. We have a lot of
extra space below this so you can see the dropdown in action.

You can also click on the Stat item (or focus it using your keyboard) to
keep the dropdown open.
```

---

=== Component: Daisy::Actions::ModalComponent
Group: Actions
Title: Modals
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Actions::ModalComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/actions/modal_component.rb

Description:
Modals are used to display content that requires user interaction. They are typically used to display forms, alerts, or other content that requires user input. 

API Signature:
- daisy_modal

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Actions::ButtonComponent
- Daisy::Actions::DropdownComponent
- Daisy::Actions::SwapComponent
- Daisy::Actions::ThemeControllerComponent

Rails Integration:
- Base Class: Daisy::Actions::ModalComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_modal

Examples:

-- Example: Simple Modal
Description:
Modals are most often opened through the click of a button. They can be closed by clicking on the `x` icon in the top right, by clicking outside of the modal, or by submitting a `<form method='dialog'>` inside the modal. do If no button or activator is provided, a very basic default button will be used instead. The button title will match the title of the modal.

Code (HAML):
```haml
%turbo-frame{"id" => "simple-modal"}
```

-- Example: Custom Activator
Description:
Sometimes you want to use something other than a button to trigger the modal. You can use the activator slot to specify any custom HTML element as the trigger.

Code (HAML):
```haml
%turbo-frame{"id" => "custom-activator-modal"}
```

---

=== Component: Daisy::Actions::SwapComponent
Group: Actions
Title: Swaps
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Actions::SwapComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/actions/swap_component.rb

Description:
 The Swap component allows you to quickly swap between two icons, images, or  HTML elements with a simple click. 

API Signature:
- daisy_swap

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Actions::ButtonComponent
- Daisy::Actions::DropdownComponent
- Daisy::Actions::ModalComponent
- Daisy::Actions::ThemeControllerComponent

Rails Integration:
- Base Class: Daisy::Actions::SwapComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_swap

Examples:

-- Example: Simple Emojis
Description:
The simplest use of the Swap component is to toggle between two emojis. You can even add various animations!

Code (HAML):
```haml
.mt-4.flex.gap-x-6.text-4xl.lg:text-6xl
    = daisy_swap(off: "❤️", on: "💔")

    = daisy_swap(off: "🌚", on: "🌞", css: "swap-rotate")

    = daisy_swap(off: "🔇", on: "🔊", css: "swap-flip")
```

-- Example: Hero Icons
Description:
You can also use the Swap component with Hero Icons. The following example toggles between various icons. You can also use our special `icon` helper which accepts the `css` property and all other options that our custom components accept.

Code (HAML):
```haml
.mt-2.flex.items-center.gap-x-4
    - sizes = "size-16"

    = daisy_swap(checked: true) do |swap|
      - swap.with_on do
        = hero_icon "pause-circle", css: sizes, variant: :outline

      - swap.with_off do
        = heroicon "play-circle", class: sizes, variant: :outline

    = daisy_swap(checked: true) do |swap|
      - swap.with_on do
        = heroicon "bell-alert", class: sizes + " animate-bounce text-purple-600", variant: :outline

      - swap.with_off do
        = heroicon "bell-slash", class: sizes + " text-gray-400", variant: :outline

    - # The standard tooltip hover doesn't work with the swap element well, so we

    - # force it open for this example.

    - #

    - # Also, the tooltip seems to change the spacing, so we add some top margin

    - # to keep the icon centered vertically.

    = daisy_swap(css: "text-blue-600 mt-1") do |swap|
      - swap.with_on do
        .tooltip.tooltip-right.tooltip-open{ data: { tip: "Dollar" }}
          = heroicon "currency-dollar", class: sizes, variant: :outline

      - swap.with_off do
        .tooltip.tooltip-right.tooltip-open{ data: { tip: "Euro" }}
          = heroicon "currency-euro", class: sizes, variant: :outline
```

-- Example: Custom HTML Elements
Description:
You can also use the Swap component with custom HTML elements. The following example toggles between a stop sign, a go sign, and a slow sign (when you click the `Make Indeterminate` button).

Code (HAML):
```haml
- shared_classes = "p-8 mask text-center font-bold"

  .w-56.mt-4.flex.flex-col.items-center
    = daisy_swap(css: "swap-rotate", checkbox_html: { id: "stopsign" }) do |swap|
      - swap.with_off(css: "mask-hexagon bg-red-600 text-white #{shared_classes}") do
        Stop

      - swap.with_on(css: "mask-circle bg-green-500 text-white #{shared_classes}") do
        Go

      - swap.with_indeterminate(css: "mask-squircle bg-yellow-500 text-black #{shared_classes}") do
        Slow

    .mt-2.btn.btn-sm.px-4.py-2{ onclick: "document.getElementById('stopsign').indeterminate = true" }
      Make Indeterminate
```

---

=== Component: Daisy::Actions::ThemeControllerComponent
Group: Actions
Title: Theme Controller
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Actions::ThemeControllerComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/actions/theme_controller_component.rb

Description:
do The `ThemeController` component is a **_Builder_** component rather than your standard **_Slotable_** ViewComponent. This means that instead of the component providing slots, and handling where your custom components are _inserted_, the developer utilizes helper methods on the component to **choose** where the sub-components are _rered_. In the examples below, we use the HAML `=` syntax to output the rered sub-components, whereas typical components use the HAML `-` syntax to "pass" the component to a slot. 

API Signature:
- daisy_theme_controller

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Actions::ButtonComponent
- Daisy::Actions::DropdownComponent
- Daisy::Actions::ModalComponent
- Daisy::Actions::SwapComponent

Rails Integration:
- Base Class: Daisy::Actions::ThemeControllerComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_theme_controller

Examples:

-- Example: Theme Preview Icons
Description:
One of the most basic sub-components is the theme preview icon. It shows a visual representation of the theme using the `base`, `primary`, `secondary`, and `accent` colors as little dots inside of a rounded square.

Code (HAML):
```haml
= daisy_theme_controller do |theme_controller|
    .flex.flex-col.sm:flex-row.gap-4.items-start.sm:items-center
      - theme_controller.themes.each do |theme|
        .flex.flex-row.gap-2.items-center
          = theme_controller.build_theme_preview(theme)

          = theme.humanize
```

-- Example: Theme Radio Inputs
Description:
When a theme radio input is selected, the theme's page will change to the value of the the input. do We provide a custom name of `docs-radio-theme` so that this example doesn't interfere with the header theme or other examples. However, because we are **only** using the radio inputs, we do **NOT** call the `setTheme()` method, and thus we do **NOT** save these changes to `localStorage`.

Code (HAML):
```haml
= daisy_theme_controller do |theme_controller|
    .flex.flex-col.sm:flex-row.gap-4.items-start.sm:items-center
      - theme_controller.themes.each do |theme|
        %label.flex.flex-row.gap-2.items-center
          = theme_controller.build_radio_input(theme, name: "docs-radio-theme")

          = theme.humanize
```

-- Example: Custom Switcher
Description:
You can also build a custom switcher by using all of the sub-components in combination. do Note that the `daisy_theme_controller` may need to be the **parent** of your custom switcher to ensure that it appropriately sets up the Stimulus controller. In the example below, the dropdown doesn't rer custom content when using the `with_item` helper, so the Stimulus controller wouldn't be applied if the order were switched.

Code (HAML):
```haml
= daisy_theme_controller do |tc|
    = daisy_dropdown do |dropdown|
      - dropdown.with_button(css: "btn-error", icon: "swatch", title: "Themes", right_icon: "chevron-down")

      - tc.themes.each do |theme|
        - dropdown.with_item do
          = daisy_link(href: "#", css: "no-underline", html: { data: { action: "click->loco-theme#setTheme" } }) do
            = tc.build_radio_input(theme, name: "docs-custom-theme", css: "hidden peer")

            = tc.build_theme_preview(theme)

            = theme.humanize

            = hero_icon "check", css: "size-4 invisible peer-checked:visible"
```

---

=== Component: Daisy::DataDisplay::AccordionComponent
Group: DataDisplay
Title: Accordions
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::AccordionComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/accordion_component.rb

Description:
 Collapsible content sections that expand/collapse on click. Perfect for  organizing large amounts of content while keeping the interface clean.  Supports arrow and plus icons with smooth animations. 

API Signature:
- daisy_accordion

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent
- Daisy::DataDisplay::ChatComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::AccordionComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_accordion

Examples:

-- Example: Basic Accordion
Description:
You can apply the `collapse-arrow` or `collapse-plus` CSS modifiers directly to each section.

Code (HAML):
```haml
= daisy_accordion(css: "mt-4 bg-base-200 rounded-lg") do |accordion|
    - accordion.with_section(css: "collapse-arrow", title: "Section 1", checked: true) do
      This is a simple accordion. Click the sections to see more.

    - accordion.with_section(css: "collapse-plus", title: "Section 2") do
      It has three sections.

    - accordion.with_section(title: "Section 3") do
      You can open them independently.
```

-- Example: Separated Accordion
Description:
Sections can be combined or separated by specifying the `name` attribute. You can also set the `:arrow` or `:plus` modifier to the entire accordion to apply it to all sections.

Code (HAML):
```haml
= daisy_accordion(css: "mt-4", modifier: :arrow) do |accordion|
    - accordion.with_section(title: "Section 1", checked: true) do
      Sections can be combined...

    - accordion.with_section(title: "Section 2") do
      Like these two.

    - accordion.with_section(title: "Section A", name: "ex2-lettered", checked: true) do
      Or separated via the <code>name</code> attribute.

    - accordion.with_section(title: "Section B", name: "ex2-lettered") do
      Like these two.
```

-- Example: Form Accordion
Description:
Because it uses `<input type="radio">` elements, you can even use it inside a form!

Code (HAML):
```haml
%turbo-frame{"id" => "accordion-form"}
    %form.mt-4.w-80{ action: "#" }
      %label.block.mb-4.italic What is your favorite color?

      = daisy_accordion(modifier: :plus, css: "flex flex-col gap-y-4", name: "favorite-color") do |accordion|
        - accordion.with_section(css: "bg-red-700 text-white", title: "Red", value: "red", checked: params["favorite-color"] == "red") do
          Rosy!

        - accordion.with_section(css: "bg-blue-700 text-white", title: "Blue", value: "blue", checked: params["favorite-color"] == "blue") do
          Solid!

        - accordion.with_section(css: "bg-green-700 text-white", title: "Green", value: "green", checked: params["favorite-color"] == "green") do
          Groovy!

      .mt-4.flex.flex-row.items-center.gap-x-4
        %input{ type: "submit", value: "Submit", class: "btn btn-secondary" }

        - if params["favorite-color"]
          %span.font-bold "You chose #{params["favorite-color"]}!"
```

---

=== Component: Daisy::DataDisplay::AvatarComponent
Group: DataDisplay
Title: Avatars
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::AvatarComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/avatar_component.rb

Description:
User profile image components with fallback options and status indicators. Supports photos, initials, or icons with online/offline status dots for representing users in chat interfaces and user lists. 

API Signature:
- daisy_avatar

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent
- Daisy::DataDisplay::ChatComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::AvatarComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::IconableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_avatar

Examples:

-- Example: Basic Avatars
Description:
You can use the Avatar component to display a user's profile picture, icon, or initials. You can also add an online or offline indicator.

Code (HAML):
```haml
- # Lady 0 is skipped / unused because she looks kinda fake

  - ladies = (1..4).map { |i| image_path("avatars/lady-smiling-#{i}.jpg") }

  .mt-4.flex.flex-col.lg:flex-row.items-center.gap-4
    - # Avatar without online indicator

    = daisy_avatar(src: ladies[1]) do
      Daisy

    - # Avatar with online indicator

    = daisy_avatar(css: "avatar-online", src: ladies[2]) do
      Daisy

    - # Avatar with offline indicator

    = daisy_avatar(css: "avatar-offline", src: ladies[3]) do
      Daisy

    - # Placeholder avatar without online indicator

    = daisy_avatar do
      AB

    - # Placeholder avatar with icon & online indicator

    = daisy_avatar(css: "avatar-online", icon: "user", icon_css: "size-14 text-sky-400")

    - # Placeholder avatar with offline indicator

    = daisy_avatar(css: "avatar-offline") do
      TF
```

-- Example: Linked Avatars
Description:
You can link the Avatar component to a URL by using the `href` attribute.

Code (HAML):
```haml
.space-x-4
    - # Avatar with link and title

    = daisy_avatar(href: "/", title: "Jane Doe", src: image_path("avatars/lady-smiling-1.jpg")) do
      Daisy

    - # Avatar with online indicator and link

    = daisy_avatar(href: "/", css: "avatar-online", src: image_path("avatars/lady-smiling-2.jpg")) do
      Daisy
```

---

=== Component: Daisy::DataDisplay::BadgeComponent
Group: DataDisplay
Title: Badges
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::BadgeComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/badge_component.rb

Description:
 Small, colorful indicators for displaying status, counts, or metadata.  Ideal for notifications, labels, tags, and visual cues. Supports various  colors, sizes, and positioning options. 

API Signature:
- daisy_badge

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent
- Daisy::DataDisplay::ChatComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::BadgeComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::IconableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_badge

Examples:

-- Example: Simple Badges
Description:
You can use the Badge component to display a small amount of information. Badges can be used to indicate status, category, or other metadata. The `title` can be passed through keyword arguments or as a block.

Code (HAML):
```haml
.my-2.flex.flex-col.lg:flex-row.gap-4
    = daisy_badge(title: "Plain Badge")

    = daisy_badge(title: "Primary Badge", css: "badge-primary")

    = daisy_badge(css: "badge-secondary") do
      Secondary Badge

    = daisy_badge(css: "badge-accent") do
      Accent Badge

    = daisy_badge(css: "badge-ghost") do
      Ghost Badge
```

-- Example: Badge Sizes
Description:
Badges come in four sizes: large, medium, small, and extra small.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-secondary badge-lg") do
      Large Badge

    = daisy_badge(css: "badge-success badge-md") do
      Medium Badge

    = daisy_badge(css: "badge-error badge-sm") do
      Small Badge

    = daisy_badge(css: "badge-warning badge-xs") do
      Extra Small Badge
```

-- Example: Badges with Icons
Description:
Badges can include icons on either the left or right side, or both. Use the `left_icon` and `right_icon` options to add icons. You can also use the `icon` option as an alias for `left_icon`.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(title: "New", left_icon: "sparkles", css: "badge-primary")

    = daisy_badge(title: "Download", right_icon: "arrow-down-tray", css: "badge-secondary")

    = daisy_badge(title: "Favorite", icon: "star", css: "badge-warning")

    = daisy_badge(title: "Settings", left_icon: "cog-6-tooth", right_icon: "chevron-right", css: "badge-accent")
```

-- Example: Linked Badges
Description:
Badges can be made clickable by providing an `href` option. This transforms the badge into an anchor (`<a>`) tag. You can also specify a `target` attribute for the link, such as `_blank` for opening in a new tab.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(title: "Documentation", href: "/api-docs", css: "badge-info")

    = daisy_badge(title: "External Link", href: "https://google.com", target: "_blank", css: "badge-secondary")

    = daisy_badge(title: "GitHub", href: "https://github.com/profoundry-us/loco_motion", left_icon: "code-bracket", css: "badge-neutral")

    = daisy_badge(href: "/", css: "badge-primary") do
      %span.flex.items-center.gap-1
        = hero_icon "document-text", css: "size-4"

        Read More
```

-- Example: Outline Badge
Description:
Badges can be displayed in an outline style.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-outline") { "Default" }

    = daisy_badge(css: "badge-primary badge-outline") { "Primary" }

    = daisy_badge(css: "badge-secondary badge-outline") { "Secondary" }

    = daisy_badge(css: "badge-accent badge-outline") { "Accent" }
```

-- Example: Soft Badge
Description:
Badges can be displayed in a soft style.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-soft") { "Default" }

    = daisy_badge(css: "badge-primary badge-soft") { "Primary" }

    = daisy_badge(css: "badge-secondary badge-soft") { "Secondary" }

    = daisy_badge(css: "badge-accent badge-soft") { "Accent" }
```

-- Example: Dash Badge
Description:
Badges can be displayed in a dash style.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-dash") { "Default" }

    = daisy_badge(css: "badge-primary badge-dash") { "Primary" }

    = daisy_badge(css: "badge-secondary badge-dash") { "Secondary" }

    = daisy_badge(css: "badge-accent badge-dash") { "Accent" }
```

-- Example: Outline badges with state colors
Description:
Outline badges can be displayed with state colors.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-info badge-outline") { "Info" }

    = daisy_badge(css: "badge-success badge-outline") { "Success" }

    = daisy_badge(css: "badge-warning badge-outline") { "Warning" }

    = daisy_badge(css: "badge-error badge-outline") { "Error" }
```

-- Example: Soft badges with state colors
Description:
Soft badges can be displayed with state colors.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-info badge-soft") { "Info" }

    = daisy_badge(css: "badge-success badge-soft") { "Success" }

    = daisy_badge(css: "badge-warning badge-soft") { "Warning" }

    = daisy_badge(css: "badge-error badge-soft") { "Error" }
```

-- Example: Dash badges with state colors
Description:
Dash badges can be displayed with state colors.

Code (HAML):
```haml
.flex.flex-col.lg:flex-row.lg:items-center.gap-4
    = daisy_badge(css: "badge-info badge-dash") { "Info" }

    = daisy_badge(css: "badge-success badge-dash") { "Success" }

    = daisy_badge(css: "badge-warning badge-dash") { "Warning" }

    = daisy_badge(css: "badge-error badge-dash") { "Error" }
```

---

=== Component: Daisy::DataDisplay::CardComponent
Group: DataDisplay
Title: Cards
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::CardComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/card_component.rb

Description:
 Versatile containers for grouping related content with optional images,  titles, descriptions, and actions. Perfect for product displays, article  previews, and organized information presentation. 

API Signature:
- daisy_card

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CarouselComponent
- Daisy::DataDisplay::ChatComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::CardComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_card

Examples:

-- Example: Basic Card
Description:
Cards are used to display information in a structured way. They can contain images, text, and actions.

Code (HAML):
```haml
= daisy_card(css: "max-w-96 bg-base-100 shadow-xl") do |card|
    - card.with_top_figure css: "aspect-video", src: image_path("landscapes/beach.jpg")

    %p Such a beautiful beach!

    - card.with_actions(css: "mt-2 justify-end") do
      = daisy_button(css: "btn-primary") do
        Book Travel
```

-- Example: Card Figures
Description:
The images (figures) can be on the top or the bottom!

Code (HAML):
```haml
- pics = ["beach", "forest", "mountain-river", "desert"]

  .mt-8.grid.grid-cols-1.gap-4.lg:grid-cols-2.xl:grid-cols-4
    - pics.each.with_index do |pic, i|
      = daisy_card(title: pic.titleize, css: "max-w-96 bg-base-100 shadow-xl") do |card|
        - if i % 2 == 0
          - card.with_top_figure css: "aspect-video", src: image_path("landscapes/#{pic}.jpg")

          - else

          - card.with_bottom_figure css: "aspect-video", src: image_path("landscapes/#{pic}.jpg")

        %p Such a beautiful place!

        - card.with_actions(css: "mt-2 justify-end") do
          = daisy_button(css: "btn-primary") do
            Book Travel
```

-- Example: Card Sizes
Description:
Cards can be rered in different sizes. Use the `card-sm` class for a more condensed layout.

Code (HAML):
```haml
.mt-8.space-y-6.md:space-y-0.md:flex.md:flex-row.md:gap-6
    = daisy_card(title: "Large Card", css: "max-w-96 bg-base-100 shadow-xl card-lg") do |card|
      This is a large card with larger text / padding. It provides extra space
for content and is great for highlighting important information.



      - card.with_actions(css: "mt-2 justify-end") do
        = daisy_button(css: "btn-primary") do
          Learn More

    = daisy_card(title: "Normal Card", css: "max-w-96 bg-base-100 shadow-xl") do |card|
      This is a normal card with default padding. It provides ample space for
content and is great for detailed information.



      - card.with_actions(css: "mt-2 justify-end") do
        = daisy_button(css: "btn-primary") do
          Learn More

    = daisy_card(title: "Small Card", css: "max-w-96 bg-base-100 shadow-xl card-sm") do |card|
      This is a small card with reduced padding. It's perfect for displaying
information in a more condensed format.



      - card.with_actions(css: "mt-2 justify-end") do
        = daisy_button(css: "btn-primary btn-sm") do
          Learn More
```

---

=== Component: Daisy::DataDisplay::CarouselComponent
Group: DataDisplay
Title: Carousels
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::CarouselComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/carousel_component.rb

Description:
 Interactive image galleries with smooth sliding transitions and navigation.  Perfect for showcasing products, portfolios, photo collections, and featured  content with customizable controls and auto-play options. 

API Signature:
- daisy_carousel

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::ChatComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::CarouselComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_carousel

Examples:

-- Example: Basic Carousel
Description:
You can use the Carousel component to display a collection of images or other content.

Code (HAML):
```haml
- photos = Rails.cache.fetch("unsplash_landscapes") { Unsplash::Photo.search("landscape") }

  - unsplash_link = "https://unsplash.com?#{Unsplash::Client.connection.utm_params.to_param}"

  = daisy_carousel(css: "h-96 gap-x-2 rounded-lg") do |carousel|
    - if photos.empty?
      %p No photos found.

    - photos.each do |photo|
      - carousel.with_item(css: "relative") do
        = link_to photo.links.html, target: "_blank" do
          = image_tag(photo.urls.regular, alt: photo.alt_description, class: "rounded-lg h-96")

        .absolute.bottom-2.left-0.right-0.flex.justify-center
          %span.rounded.text-base-content.px-2.py-1{ class: "bg-base-200/80" }
            Photo by

            = link_to photo.user.name, photo.user.links.html, class: "link hover:text-black", target: "_blank"

            on

            = link_to "Unsplash", unsplash_link, class: "link hover:text-black", target: "_blank"
```

-- Example: Card Carousel
Description:
The Carousel component can also be used to display other components, such as Cards. This is great for showcasing related content in a compact way.

Code (HAML):
```haml
= daisy_carousel(css: "h-96 gap-x-4 rounded-lg") do |carousel|
    - carousel.with_item(css: "w-96") do
      = daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
        - card.with_top_figure(src: image_path("landscapes/mountain-river.jpg"))

        - card.with_title { "Mountain River" }

        %p{ class: "text-base-content/70" }
          Experience breathtaking views of pristine rivers winding through majestic peaks.

        - card.with_actions do
          = daisy_button("Learn More")

    - carousel.with_item(css: "w-96") do
      = daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
        - card.with_top_figure(src: image_path("landscapes/desert.jpg"))

        - card.with_title { "Desert Vista" }

        %p{ class: "text-base-content/70" }
          Witness the stunning beauty of endless desert landscapes under vast skies.

        - card.with_actions do
          = daisy_button("Learn More")

    - carousel.with_item(css: "w-96") do
      = daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
        - card.with_top_figure(src: image_path("landscapes/forest.jpg"))

        - card.with_title { "Forest Path" }

        %p{ class: "text-base-content/70" }
          Explore winding paths through ancient forests filled with natural wonders.

        - card.with_actions do
          = daisy_button("Learn More")

    - carousel.with_item(css: "w-96") do
      = daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
        - card.with_top_figure(src: image_path("landscapes/beach.jpg"))

        - card.with_title { "Coastal Paradise" }

        %p{ class: "text-base-content/70" }
          Marvel at pristine beaches where turquoise waters meet golden sands.

        - card.with_actions do
          = daisy_button("Learn More")
```

---

=== Component: Daisy::DataDisplay::ChatComponent
Group: DataDisplay
Title: Chat Bubbles
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::ChatComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/chat_component.rb

Description:
 Message bubbles designed for chat interfaces and conversations. Support  different alignments (sent/received), headers, footers, and user avatars  for realistic chat UI implementations. 

API Signature:
- daisy_chat

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::ChatComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_chat

Examples:

-- Example: Advanced Chat
Description:
Chat bubbles are used to display messages in a structured way. They can contain text, user images, a header, and a footer.

Code (HAML):
```haml
.w-full.mx-4
    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))

      - chat.with_bubble do
        Hey Marcia! How are you doing?

    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-3.jpg"))

      - chat.with_bubble do
        I'm doing great! How about you?

    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))

      - chat.with_bubble do
        I'm doing great too! Thanks for asking.

    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-3.jpg"))

      - chat.with_bubble do
        That's great to hear!

      - chat.with_footer do
        Read 10:45 AM

    = # Custom content messages

    = daisy_chat(css: "chat-end") do |chat|
      - chat.with_avatar(icon: "user", icon_css: "text-yellow-400")

      - chat.with_header do
        Unknown Number (555) 883-1234

      - chat.with_footer(css: "text-red-600 mt-1 flex items-center gap-x-2") do
        = heroicon("exclamation-triangle", variant: :outline, class: "size-4")

        %span
          Failed to send

      .chat-bubble
        Who dis? Why am I in this group chat?!
```

-- Example: Colored Chat
Description:
Chat bubbles can be colored to differentiate between different users or types of messages.

Code (HAML):
```haml
.w-full.mx-4
    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))

      - chat.with_bubble(css: "chat-bubble-accent flex items-center gap-x-1") do
        = heroicon "map-pin", class: "size-5"

        %strong
          Jill

        %span
          Started sharing her location.

    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))

      - chat.with_bubble(css: "bg-base-300 text-base-content") do
        Hey Marcia! How are you doing?

    = daisy_chat(css: "chat-end") do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-4.jpg"))

      - chat.with_bubble(css: "chat-bubble-primary") do
        I'm blue da ba dee da ba daa

    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))

      - chat.with_bubble(css: "bg-base-300 text-base-content") do
        Maybe this will help!

    = daisy_chat do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))

      - chat.with_bubble(css: "chat-bubble-success text-base-200") do
        .flex.justify-center
          = heroicon "currency-dollar", class: "size-12"

        Jill sent you <strong>$50</strong>.

    = daisy_chat(css: "chat-end") do |chat|
      - chat.with_avatar(src: image_path("avatars/lady-smiling-4.jpg"))

      - chat.with_bubble(css: "chat-bubble-primary") do
        Wow, thanks! ❤️
```

---

=== Component: Daisy::DataDisplay::CollapseComponent
Group: DataDisplay
Title: Collapses
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::CollapseComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/collapse_component.rb

Description:
 Expandable/collapsible content containers with smooth animations.  Perfect for FAQs, nested content, and progressive disclosure of information  with customizable styling and icons. 

API Signature:
- daisy_collapse

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::CollapseComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_collapse

Examples:

-- Example: Basic Collapse
Description:
Collapses are transparent by default and add additional padding.

Code (HAML):
```haml
.mx-auto{ class: "w-[400px]" }
    = daisy_collapse(title: "Click to Open") do |collapse|
      This is the content of the collapse.
```

-- Example: Arrow & Plus Collapses
Description:
You can apply the `collapse-arrow` or `collapse-plus` CSS modifiers directly to each collapse.

Code (HAML):
```haml
.flex.flex-col.gap-4{ class: "w-[400px]" }
    = daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-arrow") do |collapse|
      This is the content of the arrow collapse.

    = daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-plus") do |collapse|
      This is the content of the plus collapse.
```

-- Example: Advanced Collapse
Description:
You can also customize the collapse with any HTML you desire!

Code (HAML):
```haml
.mx-auto{ class: "w-[400px]" }
    = daisy_collapse(css: "collapse-arrow bg-base-200 border border-base-300") do |collapse|
      - collapse.with_title(css: "collapse-title bg-base-300") do
        .flex.gap-x-2.items-center
          = heroicon("user-circle", class: "size-6")

          %strong User Profile

      .mt-4.flex.gap-x-4.items-center
        = daisy_avatar(src: image_path("avatars/lady-smiling-1.jpg"))

        
          .text-xl.font-bold Jane Oliver

          .italic jane@oliver.test
```

---

=== Component: Daisy::DataDisplay::CountdownComponent
Group: DataDisplay
Title: Countdowns
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::CountdownComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/countdown_component.rb

Description:
 Animated timers that count down from a specified duration to zero. Perfect  for creating urgency in product launches, event start times, limited-time  offers, and deadline tracking with customizable styling and format options. 

API Signature:
- daisy_countdown

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::CountdownComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_countdown

Examples:

-- Example: Basic Countdown
Description:
A basic countdown accepts an ActiveSupport::Duration object as either the first positional argument or as the value of the `:duration` keyword argument.

Code (HAML):
```haml
.flex.flex-col.gap-y-4.font-mono
    = daisy_countdown(60.seconds)

    = daisy_countdown(duration: 60.seconds, modifier: :letters)
```

-- Example: Longer Countdown
Description:
If you want to display a countdown with multiple parts, you can build one using the link_to "https://api.rubyonrails.org/classes/ActiveSupport/Duration.html", target: "_blank ActiveSupport::Duration#build method.

Code (HAML):
```haml
.flex.flex-col.items-center.gap-y-4.font-mono
    = daisy_countdown(ActiveSupport::Duration.build(3725))

    = daisy_countdown(ActiveSupport::Duration.build(3725), separator: "-")

    = daisy_countdown(ActiveSupport::Duration.build(3725), modifier: :letters)

    = daisy_countdown(ActiveSupport::Duration.build(3725), modifier: :words)
```

-- Example: Boxed Countdown
Description:
You can also display the countdowns in a box by customizing each part of the countdown. Note that the wrapper `text-sm` class applies to the words ("hours", "minutes", and "seconds") and the global `parts_css` sets the size of the numbers. You can also customize each part individually by using the `days_css`, `hours_css`, `minutes_css`, and `seconds_css` options. And you can add custom HTML using either the global `parts_html` or the individual `days_html`, `hours_html`, `minutes_html`, and `seconds_html` options.

Code (HAML):
```haml
.flex.flex-col.items-center.gap-y-4.text-sm
    - box_css = "where:bg-neutral where:text-neutral-content rounded-box flex flex-col items-center justify-center size-24 font-bold [&_span]:font-mono [&_span]:text-5xl"

    = daisy_countdown(ActiveSupport::Duration.build(3725), modifier: :words, css: "gap-x-8", parts_css: box_css, seconds_css: "bg-red-600 text-white", seconds_html: { title: "You better hurry!" })
```

---

=== Component: Daisy::DataDisplay::DiffComponent
Group: DataDisplay
Title: Diffs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::DiffComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/diff_component.rb

Description:
 Interactive comparison components with a sliding divider to compare before  and after states. Perfect for showcasing image edits, text changes, design  iterations, and any visual or content differences with smooth transitions. 

API Signature:
- daisy_diff

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::DiffComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_diff

Examples:

-- Example: Text / HTML Diff
Description:
Diffs are best when they show two mostly similar items that have only a few differences.

Code (HAML):
```haml
= daisy_diff(css: "aspect-video max-w-[800px] max-h-[450px]") do |diff|
    - diff.with_item do
      .bg-primary.text-primary-content.grid.place-content-center.text-6xl.lg:text-8xl.font-black
        LocoMotion

    - diff.with_item do
      .bg-base-200.grid.place-content-center.text-6xl.lg:text-8xl.font-black
        LocoMotion
```

-- Example: Image Diff
Description:
Here is an example using two images. One is blurred, and the other is the full-resolution image.

Code (HAML):
```haml
= daisy_diff(css: "aspect-video max-w-[800px] max-h-[450px]") do |diff|
    - diff.with_item do
      = image_tag("landscapes/desert.jpg")

    - diff.with_item do
      = image_tag("landscapes/desert.jpg", class: "blur-xs")
```

---

=== Component: Daisy::DataDisplay::FigureComponent
Group: DataDisplay
Title: Figures
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::FigureComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/figure_component.rb

Description:
 Image containers with optional captions for visual content presentation.  Perfect for displaying photos, illustrations, or graphics with descriptive  text in articles, galleries, and documentation. 

API Signature:
- daisy_figure

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::FigureComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LinkableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_figure

Examples:

-- Example: Basic Figure
Description:
Figures are used to display images with optional captions. They are commonly used within cards and other content containers.

Code (HAML):
```haml
= daisy_figure(css: "max-w-96", src: image_path("landscapes/beach.jpg"))
```

-- Example: Figure with Caption
Description:
You can add a caption to your figure by providing content to the component.

Code (HAML):
```haml
= daisy_figure(css: "max-w-96", src: image_path("landscapes/mountain-river.jpg")) do
    %p.text-center.italic A beautiful mountain river landscape
```

-- Example: Custom Content
Description:
Figures can also be used without an image to display custom content.

Code (HAML):
```haml
= daisy_figure(css: "max-w-96 bg-base-100 border border-base-300 p-4 rounded-lg") do
    .flex.flex-col.items-center.gap-4
      = hero_icon("photo", css: "size-16 text-base-content/50")

      %p.text-center.italic Custom content without an image
```

---

=== Component: Daisy::DataDisplay::KbdComponent
Group: DataDisplay
Title: Keyboard (KBD)
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::KbdComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/kbd_component.rb

Description:
 Styled keyboard key representations for displaying keyboard shortcuts,  hotkeys, and command references. Perfect for documentation, tutorials,  and UI hints with realistic key styling and multiple size options. 

API Signature:
- daisy_kbd

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::KbdComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_kbd

Examples:

-- Example: Basic Example
Code (HAML):
```haml
= daisy_kbd do
    
```

-- Example: Various Sizes
Code (HAML):
```haml
.my-2.flex.flex-row.gap-4.items-center
    = daisy_kbd(css: "kbd-lg") do
      Shift

    = daisy_kbd(css: "kbd-md") do
      Shift

    = daisy_kbd(css: "kbd-sm") do
      Shift

    = daisy_kbd(css: "kbd-xs") do
      Shift
```

-- Example: Inside a Sentence
Code (HAML):
```haml
.my-2.flex.flex-row.gap-2.items-center
    %p Press

    = daisy_kbd do
      F

    %p to pay respects.
```

-- Example: Combined Keys
Code (HAML):
```haml
.my-2.flex.flex-row.gap-2.items-center
    = daisy_kbd do
      Ctrl

    +

    = daisy_kbd do
      Alt

    +

    = daisy_kbd do
      Del
```

-- Example: Function Keys
Code (HAML):
```haml
.my-2.flex.flex-row.gap-4.items-center
    = daisy_kbd do
      ⌘

    = daisy_kbd do
      ⌥

    = daisy_kbd do
      ⇧

    = daisy_kbd do
      ⌃
```

-- Example: Full Keyboard
Code (HAML):
```haml
.flex.justify-center.gap-1.my-1.w-full
      = daisy_kbd do
        tab

      = daisy_kbd do
        q

      = daisy_kbd do
        w

      = daisy_kbd do
        e

      = daisy_kbd do
        r

      = daisy_kbd do
        t

      = daisy_kbd do
        y

      = daisy_kbd do
        u

      = daisy_kbd do
        i

      = daisy_kbd do
        o

      = daisy_kbd do
        p

      = daisy_kbd do
        [

      = daisy_kbd do
        ]

      = daisy_kbd do
        \

    .flex.justify-center.gap-1.my-1.w-full
      = daisy_kbd do
        caps lock

      = daisy_kbd do
        a

      = daisy_kbd do
        s

      = daisy_kbd do
        d

      = daisy_kbd do
        f

      = daisy_kbd do
        g

      = daisy_kbd do
        h

      = daisy_kbd do
        j

      = daisy_kbd do
        k

      = daisy_kbd do
        l

      = daisy_kbd do
        :

      = daisy_kbd do
        '

      = daisy_kbd do
        return

    .flex.justify-center.gap-1.my-1.w-full
      = daisy_kbd do
        shift

      = daisy_kbd do
        z

      = daisy_kbd do
        x

      = daisy_kbd do
        c

      = daisy_kbd do
        v

      = daisy_kbd do
        b

      = daisy_kbd do
        n

      = daisy_kbd do
        m

      = daisy_kbd do
        ,

      = daisy_kbd do
        .

      = daisy_kbd do
        /

      = daisy_kbd do
        shift
```

---

=== Component: Daisy::DataDisplay::ListComponent
Group: DataDisplay
Title: Lists
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::ListComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/list_component.rb

Description:
Lists provide a vertical layout to display information in rows. They can contain various content types including text, images, and actions arranged in a consistent format. 

API Signature:
- daisy_list

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::ListComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_list

Examples:

-- Example: Basic List
Description:
A simple list that displays items in a vertical arrangement. Each item is rered as a list element with basic styling.

Code (HAML):
```haml
= daisy_list do |list|
    - list.with_item { "Item 1" }

    - list.with_item { "Item 2" }

    - list.with_item { "Item 3" }
```

-- Example: List with Header
Description:
Lists can include a header element that describes the content below. This provides context for the items and improves organization.

Code (HAML):
```haml
= daisy_list(header: "Featured Items") do |list|
    - list.with_item { "Featured Item 1" }

    - list.with_item { "Featured Item 2" }

    - list.with_item { "Featured Item 3" }
```

-- Example: Styled List
Description:
Lists can be customized with additional CSS classes for enhanced visual presentation. This example adds a background, rounded corners, shadow, and dividers between items.

Code (HAML):
```haml
= daisy_list(css: "bg-base-100 shadow-md") do |list|
    - list.with_item { "Item 1" }

    - list.with_item { "Item 2" }

    - list.with_item { "Item 3" }
```

-- Example: List with Images
Description:
List items can contain rich content including images and structured text. This is useful for displaying user profiles or other complex information.

Code (HAML):
```haml
= daisy_list(header: "User Profiles", header_css: "p-4 pb-2 text-xs opacity-60 tracking-wide", css: "bg-base-100 rounded-box shadow-md") do |list|
    - list.with_item do |item|
      = image_tag("avatars/lady-smiling-1.jpg", class: "size-10 rounded-box")

      .flex.flex-col
        .font-medium Alice Johnson

        .text-xs.opacity-60 Product Designer

    - list.with_item do |item|
      = image_tag("avatars/lady-smiling-2.jpg", class: "size-10 rounded-box")

      .flex.flex-col
        .font-medium Jane Smith

        .text-xs.opacity-60 Software Engineer

    - list.with_item do |item|
      = image_tag("avatars/lady-smiling-3.jpg", class: "size-10 rounded-box")

      .flex.flex-col
        .font-medium Carol Davis

        .text-xs.opacity-60 UX Researcher
```

-- Example: Interactive List
Description:
Lists can include interactive elements like buttons to provide additional functionality. This example shows a music player interface with play and favorite buttons.

Code (HAML):
```haml
= daisy_list(header: "Most played songs", header_css: "p-4 pb-2 text-xs opacity-60 tracking-wide", css: "w-100 bg-base-100 rounded-box shadow-md") do |list|
    - list.with_item do |item|
      = image_tag("avatars/lady-smiling-1.jpg", class: "size-10 rounded-box")

      .flex.flex-col
        .font-medium Remaining Reason

        .text-xs.uppercase.font-semibold.opacity-60 Dio Lupa

      = daisy_button(css: "btn-square btn-ghost") do
        = hero_icon("play")

      = daisy_button(css: "btn-square btn-ghost") do
        = hero_icon("heart")

    - list.with_item do |item|
      = image_tag("avatars/lady-smiling-4.jpg", class: "size-10 rounded-box")

      .flex.flex-col
        .font-medium Bears of a Fever

        .text-xs.uppercase.font-semibold.opacity-60 Ellie Beilish

      = daisy_button(css: "btn-square btn-ghost") do
        = hero_icon("play")

      = daisy_button(css: "btn-square btn-ghost") do
        = hero_icon("heart")

    - list.with_item do |item|
      = image_tag("avatars/lady-smiling-3.jpg", class: "size-10 rounded-box")

      .flex.flex-col
        .font-medium Cappuccino

        .text-xs.uppercase.font-semibold.opacity-60 Sabrino Gardener

      = daisy_button(css: "btn-square btn-ghost") do
        = hero_icon("play")

      = daisy_button(css: "btn-square btn-ghost") do
        = hero_icon("heart")
```

---

=== Component: Daisy::DataDisplay::StatComponent
Group: DataDisplay
Title: Stats
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::StatComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/stat_component.rb

Description:
do Stats have a transparent background by default. Use `bg-base-100` if you need a background color. 

API Signature:
- daisy_stat

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::StatComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::IconableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_stat

Examples:

-- Example: Basic Stats
Description:
Stats are used to display simple data points. They can be used to display a number (the main content), a title, and a description.

Code (HAML):
```haml
.bg-base-100.lg:grid.lg:grid-flow-col.lg:auto-cols-auto.items-center.gap-x-4.border.rounded-lg{ class: "w-[300px] lg:w-[800px]" }
    = daisy_stat do
      = number_to_currency(8619.45)

    = daisy_stat(title: "Views", description: "Views in the last 24 hours.") do
      = number_with_delimiter(1208)

    - # Example passing options as blocks. This allows you to pass in HTML.

    = daisy_stat do |stat|
      - stat.with_title do
        %p.stat-title Average Cart Value

      = number_to_currency(319, precision: 0)

      - stat.with_description do
        %p.stat-desc You're doing quite well on your ACV!
```

-- Example: Complex Stats
Description:
Stats can also be used to display more complex data points. You can pass in an image, an icon, or any other content you'd like.

Code (HAML):
```haml
.bg-base-100.lg:grid.lg:grid-flow-col.lg:auto-cols-auto.items-center.gap-x-4.border.rounded-lg{ class: "w-[300px] lg:w-[900px]" }
    = daisy_stat(css: "max-w-80", title: "Tasks", description: "Completed this month.", src: image_path("avatars/lady-smiling-1.jpg")) do
      25

    = daisy_stat(css: "max-w-80", title: "Students", description: "Total enrollments.", icon: "academic-cap") do
      = number_with_delimiter(1112)

    = daisy_stat(css: "max-w-80") do |stat|
      - stat.with_title do
        %p.stat-title New Students

      42

      - stat.with_description do
        %p.stat-desc New students in July!

      - stat.with_figure do
        = daisy_badge(css: "badge-primary") do
          New!
```

---

=== Component: Daisy::DataDisplay::StatusComponent
Group: DataDisplay
Title: Status
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::StatusComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/status_component.rb

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

API Signature:
- daisy_status

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::StatusComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_status

Examples:

-- Example: Basic Status
Description:
The basic status component is a simple dot indicator with no additional styling.

Code (HAML):
```haml
= daisy_status
```

-- Example: Status Sizes
Description:
Status indicators come in five sizes: extra small, small, medium (default), large, and extra large.

Code (HAML):
```haml
.flex.flex-col.items-start.gap-2
    .flex.items-center.gap-2
      = daisy_status(css: "status-xs mr-2")

      %span Extra Small

    .flex.items-center.gap-2
      = daisy_status(css: "status-sm mr-2")

      %span Small

    .flex.items-center.gap-2
      = daisy_status(css: "status-md mr-2")

      %span Medium (Default)

    .flex.items-center.gap-2
      = daisy_status(css: "status-lg mr-2")

      %span Large

    .flex.items-center.gap-2
      = daisy_status(css: "status-xl mr-2")

      %span Extra Large
```

-- Example: Status Colors
Description:
Status indicators can use different colors to represent various states or conditions.

Code (HAML):
```haml
.flex.flex-col.items-start.gap-2
    .flex.items-center.gap-2
      = daisy_status(css: "status-primary mr-2")

      %span Primary

    .flex.items-center.gap-2
      = daisy_status(css: "status-secondary mr-2")

      %span Secondary

    .flex.items-center.gap-2
      = daisy_status(css: "status-accent mr-2")

      %span Accent

    .flex.items-center.gap-2
      = daisy_status(css: "status-neutral mr-2")

      %span Neutral

    .flex.items-center.gap-2
      = daisy_status(css: "status-info mr-2")

      %span Info

    .flex.items-center.gap-2
      = daisy_status(css: "status-success mr-2")

      %span Success

    .flex.items-center.gap-2
      = daisy_status(css: "status-warning mr-2")

      %span Warning

    .flex.items-center.gap-2
      = daisy_status(css: "status-error mr-2")

      %span Error
```

-- Example: Status with Tooltip and Aria Label
Description:
For accessibility, status indicators should include descriptive ARIA labels.

Code (HAML):
```haml
= daisy_status(css: "status-md status-success", tip: "Online", html: { aria: { label: "Status: Online" } })
```

---

=== Component: Daisy::DataDisplay::TableComponent
Group: DataDisplay
Title: Tables
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::TableComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/table_component.rb

Description:
 Tables are designed to show data in a tabular layout making it easy to see  large amounts of data at once and compare rows with each other. 

API Signature:
- daisy_table

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::TableComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_table

Examples:

-- Example: Basic Table
Description:
Here is a super-basic table.

Code (HAML):
```haml
- data = [{col1: "foo", col2: "bar"}, {col1: "fizz", col2: "buzz"}]

  = daisy_table do |table|
    - table.with_head do |head|
      - head.with_column do
        Column 1

      - head.with_column do
        Column 2

    - data.each do |d|
      - table.with_row do |row|
        - row.with_column do
          = d[:col1]

        - row.with_column do
          = d[:col2]
```

-- Example: Pinning Rows (Using Sections)
Description:
The following example shows how to have a table with multiple headers pinned as you scroll.

Code (HAML):
```haml
.size-96.border.border-base-300.rounded.overflow-y-auto
    = daisy_table(css: "bg-base-100 table-pin-rows") do |table|
      - (0..90).step(10).with_index do |step, index|
        - table.with_section do |section|
          - section.with_head do |head|
            - head.with_column(css: 'bg-secondary text-secondary-content') do
              - if step == 0
                1900s

                - else

                = "19#{index * 10}s"

          - section.with_body do |body|
            - (0..9).each do |i|
              - body.with_row do |row|
                - row.with_column do
                  - if step == 0
                    = "190#{step + i}"

                    - else

                    = "19#{step + i}"
```

---

=== Component: Daisy::DataDisplay::TimelineComponent
Group: DataDisplay
Title: Timelines
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataDisplay::TimelineComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_display/timeline_component.rb

Description:
 Visual sequences for displaying chronological events, progress updates,  or step-by-step processes. Supports vertical and horizontal layouts with  customizable markers and content sections. 

API Signature:
- daisy_timeline

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataDisplay::AccordionComponent
- Daisy::DataDisplay::AvatarComponent
- Daisy::DataDisplay::BadgeComponent
- Daisy::DataDisplay::CardComponent
- Daisy::DataDisplay::CarouselComponent

Rails Integration:
- Base Class: Daisy::DataDisplay::TimelineComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_timeline

Examples:

-- Example: Basic Timeline
Description:
Timelines are used to display a series of events in chronological order.

Code (HAML):
```haml
= daisy_timeline do |timeline|
    - timeline.with_event(start: "1985", middle_icon: "user-circle", end: "Topher Born")

    - timeline.with_event(start: "College", middle_icon: "academic-cap", end: "2006")

    - timeline.with_event(start: "2010", middle_icon: "cake", end: "Married Marnie")

    - timeline.with_event(start: "Built LocoMotion", middle_icon: "code-bracket", end: "2024")
```

-- Example: Custom Timeline
Description:
The `start`, `middle_icon`, and `` properties can be customized. Or you can provide a completely custom `middle` block.

Code (HAML):
```haml
= daisy_timeline do |timeline|
    - timeline.with_event do |event|
      - event.with_start(css: "font-bold") do
        1985

      - event.with_middle do
        = hero_icon("check-circle", variant: :solid)

      - event.with_end(css: "timeline-box") do
        Born

    - timeline.with_event do |event|
      - event.with_start(css: "font-bold") do
        2006

      - event.with_middle do
        = hero_icon("check-circle", variant: :solid)

      - event.with_end(css: "timeline-box") do
        Graduated College

    - timeline.with_event do |event|
      - event.with_start(css: "font-bold") do
        2010

      - event.with_middle do
        = hero_icon("check-circle", variant: :solid)

      - event.with_end(css: "timeline-box") do
        Married
```

---

=== Component: Daisy::DataInput::CallyComponent
Group: DataInput
Title: Calendars
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::CallyComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/cally_component.rb

Description:
do You must include the Cally script tag or <a href="https://wicky.nillia.ms/cally/#installation">node module</a> in your application for this component to rer and function properly.  doc_code(language: "sh") do npm install cally # or yarn add cally  doc_code(language: "js") do # application.js import "cally"; 

API Signature:
- daisy_cally

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent
- Daisy::DataInput::FilterComponent

Rails Integration:
- Base Class: Daisy::DataInput::CallyComponent
- ViewComponent: Yes
- Includes: LocoMotion::Patches::ViewComponent::SlotableDefaultPatch, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_cally

Examples:

-- Example: Calar
Description:
Calars can be used to select a single date. Use the `update` option to pass a CSS selector of a `<div>` or other element to update. Note that this uses the `onchange` event along with `getElementById` to provide a very basic change system. You may want to use Stimulus controllers to handle more complex scenarios. doc_code(language: "js") do { onchange: "document.getElementById('\#{@update}').innerHTML = this.value" }

Code (HAML):
```haml
= daisy_cally(update: "cally")

  .text-center.italic{"id" => "cally"}
    Select a date...
```

-- Example: Calar with Input
Description:
You can utilize the `change` option to change the value of an HTML input when a date is selected. Similar to the `update` option, this uses `onchange` and `getElementById`, but is specialized for updating an input element's `value`. doc_code(language: "js") do { onchange: "document.getElementById('\#{@update}').value = this.value" } do To attach a Cally calar to an input in a popover, use the component_link("Cally Input", "Daisy::DataInput::CallyInputComponent") component.

Code (HAML):
```haml
= daisy_input(id: "cally_input", placeholder: "Select a date...")

  = daisy_cally(change: "cally_input")
```

-- Example: Calar Range
Description:
Calars can also allow selection of a range of dates.

Code (HAML):
```haml
= daisy_card(css: "card-border bg-base-100 shadow-lg") do
    = daisy_cally(modifier: :range, months: 2, months_css: "grid md:grid-cols-2 gap-8", update: "cally_range")

    .text-center.italic{"id" => "cally_range"}
      Select a date range...
```

---

=== Component: Daisy::DataInput::CallyInputComponent
Group: DataInput
Title: Cally Inputs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::CallyInputComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/cally_input_component.rb

Description:
 This component provides an elegant alternative to standard HTML date inputs  while maintaining a consistent visual style with other form components. 

API Signature:
- daisy_cally_input

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent
- Daisy::DataInput::FilterComponent

Rails Integration:
- Base Class: Daisy::DataInput::CallyInputComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LabelableComponent, LocoMotion::Patches::ViewComponent::SlotableDefaultPatch, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_cally_input

Examples:

-- Example: Basic Usage
Description:
The basic Cally Input provides a text field that, when clicked, displays a calar popover for date selection. do For keyboard navigation, you can use the daisy_kbd("space") or daisy_kbd("↓") keys to open the calar popover.

Code (HAML):
```haml
= daisy_cally_input(value: "2025-07-24")
```

-- Example: Custom Input
Description:
You can customize the input or calar by using the appropriate slots.

Code (HAML):
```haml
= daisy_cally_input(placeholder: "parent placeholder", popover_css: "dropdown-top dropdown-center", auto_scroll_padding: 200) do |c|
    = c.with_input(placeholder: "Select a date...")

    = c.with_calendar(css: "bg-accent")
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension makes it easy to use Cally Inputs in your Rails forms. The component automatically extracts the name, ID, and value attributes from the form object.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :event) do |form|
    .my-2.flex.flex-col.gap-4
      = form.daisy_cally_input(:start_date, start: "Start Date")

      = form.daisy_cally_input(:end_date, end: "End Date")

      = form.daisy_cally_input(:event_date, floating_placeholder: "Select an event date")

      = form.daisy_label(:registration_deadline, "Registration Deadline", css: "mt-4")

      = form.daisy_cally_input(:registration_deadline, value: Date.today.next_month.to_s) do |cally|
        - cally.with_input(placeholder: "Select a registration deadline...")

      = form.daisy_label(:reminder_date, "Reminder Date", css: "mt-4")

      = form.daisy_cally_input(:reminder_date, popover_css: "dropdown-top") do |cally|
        - cally.with_input(placeholder: "Select a reminder date...")

        - cally.with_calendar(css: "bg-secondary")
```

---

=== Component: Daisy::DataInput::CheckboxComponent
Group: DataInput
Title: Checkboxes
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::CheckboxComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/checkbox_component.rb

Description:
Checkboxes are great for toggling an item on / off, or selecting multiple items from a list. 

API Signature:
- daisy_checkbox

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent
- Daisy::DataInput::FilterComponent

Rails Integration:
- Base Class: Daisy::DataInput::CheckboxComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LabelableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_checkbox

Examples:

-- Example: Basic Checkboxes
Description:
Basic checkboxes can be rered with or without a label through standard heirarchy means, or by utilizing the `start` and `` wrappers. do While the <a href="#{doc_url("LocoMotion/Concerns/LabelableComponent")}" >LabelableComponent</a> Concern does implement a `floating_label` attribute, it is not relevant for checkboxes and is not implemented.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    
      = daisy_checkbox(name: "checkbox_no_label", id: "checkbox_no_label")

      .tooltip.tooltip-warning{ "data-tip": "CANNOT click the text to activate" }
        Checkbox with no label

    = daisy_label(for: "checkbox_with_label") do
      = daisy_checkbox(name: "checkbox_with_label", id: "checkbox_with_label")

      Checkbox with regular label

    = daisy_checkbox(name: "checkbox_end", id: "checkbox_end", checked: true, end: "Checkbox using end wrapper")

    = daisy_checkbox(name: "checkbox_start", id: "checkbox_start", checked: true, start: "Checkbox using start wrapper")

    = daisy_checkbox(name: "checkbox_end_block", id: "checkbox_end_block", checked: true) do |checkbox|
      - checkbox.with_end do
        Checkbox using `end` block



    = daisy_checkbox(name: "checkbox_both_labels", id: "checkbox_both_labels", checked: true) do |checkbox|
      - checkbox.with_start(css: "flex flex-row items-center") do
        Using

        = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
          start

      - checkbox.with_end(css: "flex flex-row items-center") do
        and

        = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
          end

        blocks
```

-- Example: Checkboxes with Colors
Description:
Checkboxes can be styled with different colors using DaisyUI's color classes. do Uses `checkbox-neutral` with dark backgrounds for dark mode compatibility.

Code (HAML):
```haml
.my-2.grid.grid-cols-1.md:grid-cols-2.gap-4
    = daisy_label(for: "checkbox_dark_mode") do
      = daisy_checkbox(name: "checkbox_dark_mode", id: "checkbox_dark_mode", css: "checkbox-neutral theme-controller", value: "dark", checked: false)

      Enable Dark Mode

    = daisy_label(for: "checkbox_primary") do
      = daisy_checkbox(name: "checkbox_primary", css: "checkbox-primary", id: "checkbox_primary", checked: true)

      Primary

    = daisy_label(for: "checkbox_secondary") do
      = daisy_checkbox(name: "checkbox_secondary", css: "checkbox-secondary", id: "checkbox_secondary", checked: true)

      Secondary

    = daisy_label(for: "checkbox_accent") do
      = daisy_checkbox(name: "checkbox_accent", css: "checkbox-accent", id: "checkbox_accent", checked: true)

      Accent

    = daisy_label(for: "checkbox_success") do
      = daisy_checkbox(name: "checkbox_success", css: "checkbox-success", id: "checkbox_success", checked: true)

      Success

    = daisy_label(for: "checkbox_warning") do
      = daisy_checkbox(name: "checkbox_warning", css: "checkbox-warning", id: "checkbox_warning", checked: true)

      Warning

    = daisy_label(for: "checkbox_error") do
      = daisy_checkbox(name: "checkbox_error", css: "checkbox-error", id: "checkbox_error", checked: true)

      Error

    = daisy_label(for: "checkbox_info") do
      = daisy_checkbox(name: "checkbox_info", css: "checkbox-info", id: "checkbox_info", checked: true)

      Info
```

-- Example: Checkbox Sizes
Description:
Checkboxes come in different sizes using DaisyUI's size classes.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-8
    .flex.items-center.gap-4
      = daisy_label(for: "checkbox_extra_small") do
        = daisy_checkbox(name: "checkbox_extra_small", id: "checkbox_extra_small", css: "checkbox-xs", checked: true)

        Extra Small

    .flex.items-center.gap-4
      = daisy_label(for: "checkbox_small") do
        = daisy_checkbox(name: "checkbox_small", id: "checkbox_small", css: "checkbox-sm", checked: true)

        Small

    .flex.items-center.gap-4
      = daisy_label(for: "checkbox_medium") do
        = daisy_checkbox(name: "checkbox_medium", id: "checkbox_medium", css: "checkbox-md", checked: true)

        Medium (Default)

    .flex.items-center.gap-4
      = daisy_label(for: "checkbox_large") do
        = daisy_checkbox(name: "checkbox_large", id: "checkbox_large", css: "checkbox-lg", checked: true)

        Large

    .flex.items-center.gap-4
      = daisy_label(for: "checkbox_extra_large") do
        = daisy_checkbox(name: "checkbox_extra_large", id: "checkbox_extra_large", css: "checkbox-xl", checked: true)

        Extra Large
```

-- Example: Combining Colors and Sizes
Description:
You can combine both color and size classes to create different variations.

Code (HAML):
```haml
.my-2.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-6
    = daisy_label(for: "checkbox_primary_small") do
      = daisy_checkbox(name: "checkbox_primary_small", id: "checkbox_primary_small", css: "checkbox-primary checkbox-sm", checked: true)

      Primary Small

    = daisy_label(for: "checkbox_secondary_medium") do
      = daisy_checkbox(name: "checkbox_secondary_medium", id: "checkbox_secondary_medium", css: "checkbox-secondary checkbox-md", checked: true)

      Secondary Medium

    = daisy_label(for: "checkbox_accent_large") do
      = daisy_checkbox(name: "checkbox_accent_large", id: "checkbox_accent_large", css: "checkbox-accent checkbox-lg", checked: true)

      Accent Large

    = daisy_label(for: "checkbox_info_small") do
      = daisy_checkbox(name: "checkbox_info_small", id: "checkbox_info_small", css: "checkbox-info checkbox-sm", checked: true)

      Info Small

    = daisy_label(for: "checkbox_success_medium") do
      = daisy_checkbox(name: "checkbox_success_medium", id: "checkbox_success_medium", css: "checkbox-success checkbox-md", checked: true)

      Success Medium

    = daisy_label(for: "checkbox_warning_large") do
      = daisy_checkbox(name: "checkbox_warning_large", id: "checkbox_warning_large", css: "checkbox-warning checkbox-lg", checked: true)

      Warning Large
```

-- Example: Indeterminate State
Description:
Checkboxes can be set to an indeterminate state to indicate that the value is neither checked nor unchecked. This is commonly used for "Select All" checkboxes where some items are selected and others are not. do You must set the `indeterminate` attribute through JavaScript.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "checkbox_indeterminate_state") do
      = daisy_checkbox(name: "checkbox_indeterminate_state", id: "checkbox_indeterminate_state")

      Indeterminate Checkbox

    document.getElementById("checkbox_indeterminate_state").indeterminate = true;
```

-- Example: Disabled Checkbox
Description:
Checkboxes can be disabled using the `disabled` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "checkbox_disabled_state", css: "cursor-not-allowed") do
      = daisy_checkbox(name: "checkbox_disabled_state", id: "checkbox_disabled_state", disabled: true)

      Disabled Checkbox
```

-- Example: Custom ID
Description:
Checkboxes can be given a custom ID using the `id` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "custom-checkbox") do
      = daisy_checkbox(name: "checkbox12", id: "custom-checkbox")

      Checkbox with Custom ID
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an even easier way to use checkboxes in your pages by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user, class: "flex flex-col gap-8") do |form|
    = form.daisy_label(:terms) do
      = form.daisy_checkbox(:terms)

      I accept the terms and conditions

    = form.daisy_checkbox(:newsletter, toggle: true, end: "Subscribe to newsletter")
```

-- Example: Using Label Component
Description:
You can also use the Label component directly with checkboxes for fully custom approach.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    .flex.items-center.space-x-2
      = daisy_checkbox(name: "agree", id: "agree")

      = daisy_label(for: "agree", title: "I agree to the terms of service")

    .flex.items-center.space-x-2.mt-4
      = daisy_checkbox(name: "updates", id: "updates", toggle: true)

      = daisy_label(for: "updates") do
        Receive product updates
```

---

=== Component: Daisy::DataInput::FileInputComponent
Group: DataInput
Title: File Inputs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::FileInputComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/file_input_component.rb

Description:
Styled file upload controls with drag-and-drop support and visual feedback. Accepts single or multiple files with customizable styling and validation options for modern form interfaces. 

API Signature:
- daisy_file_input

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FieldsetComponent
- Daisy::DataInput::FilterComponent

Rails Integration:
- Base Class: Daisy::DataInput::FileInputComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_file_input

Examples:

-- Example: Basic File Input
Description:
File inputs allow users to select and upload files.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "file1", title: "Upload Document")

    = daisy_file_input(name: "file1", id: "file1")
```

-- Example: File Input with Accept Attribute
Description:
You can restrict the file types that can be selected using the `accept` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "image", title: "Upload Image")

    = daisy_file_input(name: "image", id: "image", accept: "image/*")

    = daisy_label(for: "pdf", title: "Upload PDF", css: "mt-4")

    = daisy_file_input(name: "pdf", id: "pdf", accept: ".pdf")
```

-- Example: Multiple File Selection
Description:
Enable multiple file selection with the `multiple` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "documents", title: "Upload Documents")

    = daisy_file_input(name: "documents[]", id: "documents", multiple: true)
```

-- Example: File Input with Different Colors
Description:
File inputs can be styled with additional CSS classes to change their appearance.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "file_primary", title: "Primary File Input")

    = daisy_file_input(name: "file_primary", id: "file_primary", css: "file-input-primary")

    = daisy_label(for: "file_secondary", title: "Secondary File Input", css: "mt-4")

    = daisy_file_input(name: "file_secondary", id: "file_secondary", css: "file-input-secondary")

    = daisy_label(for: "file_accent", title: "Accent File Input", css: "mt-4")

    = daisy_file_input(name: "file_accent", id: "file_accent", css: "file-input-accent")
```

-- Example: Ghost Style File Input
Description:
File inputs can use the `file-input-ghost` class for a minimalist appearance that only shows borders on focus.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "file_ghost", title: "Ghost Style File Input")

    = daisy_file_input(name: "file_ghost", id: "file_ghost", css: "file-input-ghost")

    .mt-4.p-4.border.rounded-lg.bg-accent.text-accent-content
      %p.text-sm.mb-2 Ghost style with background container:

      = daisy_label(for: "file_ghost_bg", title: "Upload Files")

      = daisy_file_input(name: "file_ghost_bg", id: "file_ghost_bg", css: "file-input-ghost")
```

-- Example: Disabled File Input
Description:
File inputs can be disabled using the `disabled` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "file_disabled", title: "Disabled File Input", css: "cursor-not-allowed")

    = daisy_file_input(name: "file_disabled", id: "file_disabled", disabled: true)
```

-- Example: Required File Input
Description:
File inputs can be marked as required using the `required` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "file_required", title: "Required File Input")

    = daisy_file_input(name: "file_required", id: "file_required", required: true)
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an easy way to use file inputs in your forms by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user, html: { multipart: true }) do |form|
    .my-2.flex.flex-col.gap-4
      = form.daisy_label(:avatar)

      = form.daisy_file_input(:avatar)

      = form.daisy_label(:documents, "Upload Documents", css: "mt-4")

      = form.daisy_file_input(:documents, multiple: true)
```

---

=== Component: Daisy::DataInput::FieldsetComponent
Group: DataInput
Title: Fieldsets
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::FieldsetComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/fieldset_component.rb

Description:
Fieldsets group related form controls and can optionally include a leg. 

API Signature:
- daisy_fieldset

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FilterComponent

Rails Integration:
- Base Class: Daisy::DataInput::FieldsetComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_fieldset

Examples:

-- Example: Basic Fieldset (No Leg)
Description:
A simple fieldset rered without a leg.

Code (HAML):
```haml
= daisy_fieldset do
    = daisy_toggle(end: "Enable Feature X")
```

-- Example: Fieldset with Leg (Argument)
Description:
Pass simple text for the leg directly using the `leg:` argument.

Code (HAML):
```haml
= daisy_fieldset(legend: "Settings (Argument)") do
    = daisy_toggle(end: "Enable Feature X")
```

-- Example: Fieldset with Leg (Slot)
Description:
Use the `with_leg` slot to provide custom content for the leg, including HTML.

Code (HAML):
```haml
= daisy_fieldset do |fieldset|
    - fieldset.with_legend { "Settings (Slot)" }

    = daisy_toggle(end: "Enable Notifications")

    = daisy_toggle(end: "Enable Dark Mode")
```

-- Example: Fieldset with Various Inputs
Description:
Fieldsets are useful for grouping related form inputs under a common leg.

Code (HAML):
```haml
= daisy_fieldset(legend: "User Profile") do
    .mt-4.space-y-4
      = daisy_input(floating: "Name")

      = daisy_text_area(placeholder: "Bio", rows: 3) # Text areas don't currently support floating labels

      = daisy_select(floating: "Country", options: ["USA", "Canada", "Mexico"])
```

-- Example: Fieldset with Custom Styling
Description:
You can customize the Fieldset with standard `css` options to make it look exactly like you want.

Code (HAML):
```haml
= daisy_fieldset(css: "p-4 border rounded bg-base-200 w-80") do |fieldset|
    - fieldset.with_legend(css: "border rounded bg-base-100 px-4") { "Advanced Options" }

    = daisy_label("API Key")

    = daisy_input(placeholder: "asdf1234")

    = daisy_button("Save Settings", css: "mt-4")
```

---

=== Component: Daisy::DataInput::LabelComponent
Group: DataInput
Title: Labels
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::LabelComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/label_component.rb

Description:
Labels provide a useful description for various kinds of inputs. 

API Signature:
- daisy_label

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::LabelComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_label

Examples:

-- Example: Basic Labels
Description:
Labels are used to provide text descriptions for form inputs. They can be used with any form input component.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input1", title: "Standard Label")

    = daisy_label(for: "input2") do
      Content Block Label
```

-- Example: With Form Inputs
Description:
Labels can be used with form inputs to provide a description for the input. Here's an example with a checkbox.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    .flex.items-center.space-x-2
      = daisy_checkbox(name: "accept", id: "accept")

      = daisy_label(for: "accept", title: "I accept the terms and conditions")
```

-- Example: LabelableComponent Functionality
Description:
Many of our input components include the `LabelableComponent` concern, which provides built-in label functionality without needing separate label components. This makes your code cleaner and ensures proper semantic markup. The component_link("TextInput", "Daisy::DataInput::TextInputComponent"), component_link("Select", "Daisy::DataInput::SelectComponent"), component_link("Checkbox", "Daisy::DataInput::CheckboxComponent"), and component_link("Toggle", "Daisy::DataInput::ToggleComponent") components include this functionality.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    %p.font-medium.mb-2 Start Labels (appear before the input)

    = daisy_text_input(name: "username", id: "username", start: "Username:")

    .mt-4
      = daisy_select(name: "country", id: "country", start: "Country:", options: ["USA", "Canada", "UK"])
```

-- Example: End Labels
Description:
End labels appear after the input. They are especially useful for checkboxes and toggles, but can be used with any input component that includes the `LabelableComponent` concern.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_checkbox(name: "terms", id: "terms", end: "I agree to the terms and conditions")

    .mt-4
      = daisy_toggle(name: "notifications", id: "notifications", end: "Enable notifications")

    .mt-4
      = daisy_text_input(name: "email", id: "email", end: "@example.com")
```

-- Example: Floating Labels
Description:
Floating labels appear above the input when it has focus or contains a value. This provides a clean, modern look while maintaining good UX.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_text_input(name: "email", id: "email_floating", floating: "Email Address", placeholder: "example@domain.com")

    .mt-4
      = daisy_select(name: "language", id: "language_floating", floating: "Preferred Language", options: ["English", "Spanish", "French"])
```

-- Example: Custom Label Content
Description:
For more complex labels, you can use the slot API to provide custom content to your labels. This is useful when you need to add HTML or other components within your label.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_text_input(name: "password", id: "password", type: "password") do |input|
      - input.with_start do
        Password

        %span.text-error.ml-1 *

    .mt-4
      = daisy_checkbox(name: "newsletter", id: "newsletter") do |cb|
        - cb.with_end do
          Subscribe to newsletter

          %span.text-xs.text-gray-500.ml-1 (Optional)
```

-- Example: Form Builder Example
Description:
We've also exted the standard Rails FormBuilder with custom helper methods for rering Daisy Inputs with labels.

Code (HAML):
```haml
= form_with(url: "#", class: "my-2 flex flex-col gap-4") do |f|
    = f.daisy_text_input :name, floating_placeholder: "Name"

    = f.daisy_text_input :email, type: :email, floating_placeholder: "Email"
```

---

=== Component: Daisy::DataInput::RadioButtonComponent
Group: DataInput
Title: Radio Buttons
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::RadioButtonComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/radio_button_component.rb

Description:
Interactive selection controls for choosing one option from a group. Automatically grouped by name attribute with customizable styling and labels for form inputs and preference settings. 

API Signature:
- daisy_radio

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::RadioButtonComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_radio

Examples:

-- Example: Basic Radio Buttons
Description:
Radio buttons are used to select a single option from a set of options. Radio buttons with the same name attribute are automatically grouped together.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "radio1") do
      = daisy_radio(name: "radio_group1", id: "radio1", value: "1")

      Option 1

    = daisy_label(for: "radio2") do
      = daisy_radio(name: "radio_group1", id: "radio2", value: "2", checked: true)

      Option 2

    = daisy_label(for: "radio3") do
      = daisy_radio(name: "radio_group1", id: "radio3", value: "3")

      Option 3
```

-- Example: Radio Buttons with Colors
Description:
Radio buttons can be styled with different colors using DaisyUI utility classes.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "radio4") do
      = daisy_radio(name: "radio_group2", id: "radio4", value: "1", css: "radio-primary")

      Primary Radio Button

    = daisy_label(for: "radio5") do
      = daisy_radio(name: "radio_group2", id: "radio5", value: "2", css: "radio-secondary")

      Secondary Radio Button

    = daisy_label(for: "radio6") do
      = daisy_radio(name: "radio_group2", id: "radio6", value: "3", css: "radio-accent")

      Accent Radio Button
```

-- Example: Radio Button States
Description:
Radio buttons can be in different states such as checked, disabled, or required.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "radio7") do
      = daisy_radio(name: "radio_group3", id: "radio7", value: "1")

      Standard Radio Button

    = daisy_label(for: "radio8") do
      = daisy_radio(name: "radio_group3", id: "radio8", value: "2", checked: true)

      Checked Radio Button

    = daisy_label(for: "radio9", css: "cursor-not-allowed") do
      = daisy_radio(name: "radio_group3", id: "radio9", value: "3", disabled: true)

      Disabled Radio Button

    = daisy_label(for: "radio10") do
      = daisy_radio(name: "radio_group3", id: "radio10", value: "4", required: true)

      Required Radio Button
```

-- Example: Disabled Radio Button
Description:
Radio buttons can be disabled using the `disabled` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "radio11", css: "cursor-not-allowed") do
      = daisy_radio(name: "radio_group4", id: "radio11", value: "1", disabled: true)

      Disabled Radio Button
```

-- Example: Custom ID
Description:
Radio buttons can be given a custom ID using the `id` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "custom-radio-id") do
      = daisy_radio(name: "radio_group5", id: "custom-radio-id", value: "1")

      Radio Button with Custom ID
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an even easier way to use radio buttons in your pages by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user) do |form|
    .flex.flex-col.gap-4
      = form.daisy_label(:gender_male) do
        = form.daisy_radio(:gender, value: "male")

        Male

      = form.daisy_label(:gender_female) do
        = form.daisy_radio(:gender, value: "female")

        Female

      = form.daisy_label(:gender_other) do
        = form.daisy_radio(:gender, value: "other")

        Other
```

-- Example: Using Label Component
Description:
You can also use the Label component directly with radio buttons for a fully custom approach.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    .flex.items-center.space-x-2
      = daisy_radio(name: "contact_preference", id: "email", value: "email")

      = daisy_label(for: "email", title: "Email")

    .flex.items-center.space-x-2.mt-4
      = daisy_radio(name: "contact_preference", id: "phone", value: "phone")

      = daisy_label(for: "phone", title: "Phone")

    .flex.items-center.space-x-2.mt-4
      = daisy_radio(name: "contact_preference", id: "mail", value: "mail")

      = daisy_label(for: "mail", title: "Mail")
```

---

=== Component: Daisy::DataInput::RangeComponent
Group: DataInput
Title: Range Inputs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::RangeComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/range_component.rb

Description:
Slider controls for selecting numeric values within a defined range. Perfect for volume controls, price filters, progress indicators, and any quantitative input with visual feedback. 

API Signature:
- daisy_range

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::RangeComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_range

Examples:

-- Example: Basic Range
Description:
Range inputs allow users to select a value within a specific range by sliding a handle along a track.

Code (HAML):
```haml
.w-full.max-w-xs.my-2.space-y-2
    = daisy_label(for: "volume", title: "Volume")

    = daisy_range(name: "volume", id: "volume", min: 0, max: 100, value: 50)
```

-- Example: Range with Colors
Description:
Range inputs can be styled with different colors using DaisyUI utility classes.

Code (HAML):
```haml
.w-full.max-w-xs.my-2.space-y-6
    .space-y-2
      = daisy_label(for: "primary_range", title: "Primary Range")

      = daisy_range(name: "primary_range", id: "primary_range", value: 60, css: "range-primary")

    .space-y-2
      = daisy_label(for: "secondary_range", title: "Secondary Range")

      = daisy_range(name: "secondary_range", id: "secondary_range", value: 70, css: "range-secondary")

    .space-y-2
      = daisy_label(for: "accent_range", title: "Accent Range")

      = daisy_range(name: "accent_range", id: "accent_range", value: 80, css: "range-accent")

    .space-y-2
      = daisy_label(for: "success_range", title: "Success Range")

      = daisy_range(name: "success_range", id: "success_range", value: 90, css: "range-success")

    .space-y-2
      = daisy_label(for: "warning_range", title: "Warning Range")

      = daisy_range(name: "warning_range", id: "warning_range", value: 30, css: "range-warning")

    .space-y-2
      = daisy_label(for: "error_range", title: "Error Range")

      = daisy_range(name: "error_range", id: "error_range", value: 10, css: "range-error")
```

-- Example: Range with Steps
Description:
Range inputs can be configured with specific step values and visual indicators to help users select precise values.

Code (HAML):
```haml
.w-full.max-w-sm
    = daisy_label(for: "step_range", title: "Satisfaction Level")

    = daisy_range(name: "step_range", id: "step_range", css: "w-full", min: 0, max: 100, step: 25, value: 50)

    .flex.justify-between.px-2.mt-2.text-xs
      %span "|"

      %span "|"

      %span "|"

      %span "|"

      %span "|"

    .flex.justify-between.px-2.mt-2.text-xs
      %span 1

      %span 2

      %span 3

      %span 4

      %span 5
```

-- Example: Range States
Description:
Range inputs can be in different states such as disabled or required.

Code (HAML):
```haml
.w-full.max-w-xs.my-2.space-y-2
    = daisy_label(for: "disabled_range", title: "Disabled Range", css: "cursor-not-allowed")

    = daisy_range(name: "disabled_range", id: "disabled_range", value: 50, disabled: true)

    = daisy_label(for: "required_range", title: "Required Range")

    = daisy_range(name: "required_range", id: "required_range", value: 75, required: true)
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an even easier way to use range inputs in your pages by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user, html: { class: "w-full max-w-xs space-y-2" }) do |form|
    = form.daisy_label(:volume, "Volume Control") do
      .flex.items-center.gap-2
        = hero_icon("speaker-wave", class: "size-4 inline-block")

        Volume Control

    = form.daisy_range(:volume, min: 0, max: 100, step: 5, value: 65)

    = form.daisy_label(:brightness, "Brightness") do
      .flex.items-center.gap-2
        = hero_icon("sun", class: "size-4 inline-block")

        Brightness

    = form.daisy_range(:brightness, css: "range-primary", value: 80)
```

---

=== Component: Daisy::DataInput::RatingComponent
Group: DataInput
Title: Rating Inputs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::RatingComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/rating_component.rb

Description:
Star-based rating controls for user feedback and reviews. Interactive star selection with customizable colors, sizes, and half-star precision for product ratings and satisfaction surveys. 

API Signature:
- daisy_rating

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::RatingComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_rating

Examples:

-- Example: Basic Rating
Description:
Rating inputs allow users to provide a rating by selecting from a set of stars. They are implemented using radio buttons styled with DaisyUI's mask classes.

Code (HAML):
```haml
.flex.flex-col.max-w-xs.my-2.space-y-2
    = daisy_label(for: "basic_rating", title: "Basic Rating")

    = daisy_rating(name: "basic_rating", id: "basic_rating")
```

-- Example: Rating with Heart Style
Description:
The rating style can be customized using DaisyUI's mask classes. Here we use the `mask-heart` class for a heart-shaped rating.

Code (HAML):
```haml
.flex.flex-col.max-w-xs.my-2.space-y-2
    = daisy_label(for: "heart_rating", title: "Heart Rating")

    = daisy_rating(name: "heart_rating", id: "heart_rating", css: "space-x-1", inputs_css: "mask-heart bg-red-500", value: 2)
```

-- Example: Rating with Colors
Description:
Rating inputs can be styled with different colors using DaisyUI utility classes.

Code (HAML):
```haml
.max-w-xs.my-2.space-y-6
    .flex.flex-col.space-y-2
      = daisy_label(for: "primary_rating", title: "Primary Color Rating")

      = daisy_rating(name: "primary_rating", id: "primary_rating", value: 2, inputs_css: "bg-primary")

    .flex.flex-col.space-y-2
      = daisy_label(for: "warning_rating", title: "Warning Color Rating")

      = daisy_rating(name: "warning_rating", id: "warning_rating", value: 3, inputs_css: "bg-warning")

    .flex.flex-col.space-y-2
      = daisy_label(for: "success_rating", title: "Success Color Rating")

      = daisy_rating(name: "success_rating", id: "success_rating", value: 4, inputs_css: "bg-success")
```

-- Example: Rating with Different Sizes
Description:
Rating inputs can be rered in different sizes using DaisyUI's size classes.

Code (HAML):
```haml
.max-w-xs.my-2.space-y-6
    .flex.flex-col.space-y-2
      = daisy_label(for: "rating_xs", title: "Extra Small Rating")

      = daisy_rating(name: "rating_xs", id: "rating_xs", css: "rating-xs")

    .flex.flex-col.space-y-2
      = daisy_label(for: "rating_sm", title: "Small Rating")

      = daisy_rating(name: "rating_sm", id: "rating_sm", css: "rating-sm")

    .flex.flex-col.space-y-2
      = daisy_label(for: "rating_md", title: "Medium Rating (Default)")

      = daisy_rating(name: "rating_md", id: "rating_md")

    .flex.flex-col.space-y-2
      = daisy_label(for: "rating_lg", title: "Large Rating")

      = daisy_rating(name: "rating_lg", id: "rating_lg", css: "rating-lg")
```

-- Example: Half-Star Rating
Description:
Half-star ratings can be achieved by using the `mask-half-1` and `mask-half-2` classes along with a higher max value. Each star is made up of two inputs, one for each half.

Code (HAML):
```haml
.flex.flex-col.max-w-xs.my-2.space-y-2
    = daisy_label(for: "half_star_rating", title: "Half-Star Rating")

    = daisy_rating(name: "half_star_rating", id: "half_star_rating", css: "rating-half rating-lg") do |rating|
      - (1..10).each do |i|
        - rating.with_item(css: "mask mask-star mask-half-#{i.even? ? 2 : 1}")
```

-- Example: Read-Only Rating
Description:
Rating inputs can be set to read-only / disdbled mode to display a static rating that cannot be changed. do You may also want to add the `cursor-not-allowed!` class to the rating's `inputs_css` to make each radio button appear disabled.

Code (HAML):
```haml
.flex.flex-col.max-w-xs.my-2.space-y-2
    = daisy_label(for: "disabled_rating", title: "Disabled Rating (3/5)")

    = daisy_rating(name: "disabled_rating", id: "disabled_rating", inputs_css: "cursor-not-allowed!", value: 3, disabled: true)
```

-- Example: Custom Content Rating
Description:
You can provide custom content to the Rating component using ViewComponent's standard `content` feature. This gives you full control over the input elements while still maintaining the component's structure and behavior. Note that you'll need to set the proper attributes on your inputs to ensure they work correctly with the component.

Code (HAML):
```haml
.flex.flex-col.max-w-xs.my-2.space-y-2
    = daisy_label(for: "custom_rating", title: "Custom Rating")

    = daisy_rating(name: "custom_rating", id: "custom_rating", css: "gap-4") do
      %input.mask.mask-triangle.bg-accent{type: "radio", name: "custom_rating", value: "1"}

      %input.mask.mask-square.scale-90.bg-info{type: "radio", name: "custom_rating", value: "2"}

      %input.mask.mask-pentagon.-translate-y-px.bg-success{type: "radio", name: "custom_rating", value: "3"}

      %input.mask.mask-decagon.bg-primary{type: "radio", name: "custom_rating", value: "4"}

      %input.mask.mask-circle.bg-secondary{type: "radio", name: "custom_rating", value: "5"}
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an even easier way to use rating inputs in your pages by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :review, html: { class: "max-w-xs space-y-4" }) do |form|
    .flex.flex-col.space-y-2
      = form.daisy_label(:rating) do
        .flex.items-center.gap-2
          = hero_icon("star", class: "size-4 inline-block")

          Your Rating

      = form.daisy_rating(:rating, inputs_css: "mask-star-2")

    .flex.flex-col.space-y-2
      = form.daisy_label(:comment) do
        .flex.items-center.gap-2
          = hero_icon("chat-bubble-bottom-center-text", class: "size-4 inline-block")

          Your Comment

      = form.text_area(:comment, class: "textarea textarea-bordered h-24")

    = form.submit "Submit Review", class: "btn btn-primary"
```

---

=== Component: Daisy::DataInput::SelectComponent
Group: DataInput
Title: Select Inputs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::SelectComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/select_component.rb

Description:
do Select inputs have a border by default and a width of 20rem. Use `select-ghost` to remove the border. 

API Signature:
- daisy_select

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::SelectComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LabelableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_select

Examples:

-- Example: Basic Select
Description:
Select inputs allow users to choose an option from a dropdown list. They are implemented using the native HTML select element styled with DaisyUI classes.

Code (HAML):
```haml
.flex.flex-col.gap-2
    = daisy_label(for: "basic_select", title: "Basic Select")

    = daisy_select(name: "basic_select", id: "basic_select", placeholder: "Select a country") do |select|
      - select.with_option(value: "us", label: "United States")

      - select.with_option(value: "ca", label: "Canada")

      - select.with_option(value: "mx", label: "Mexico")

    = daisy_label(css: "mt-2", for: "left_label_select", title: "Country")

    = daisy_select(name: "left_label_select", id: "left_label_select", placeholder: "Select a country", start: "Country") do |select|
      - select.with_option(value: "us", label: "United States")

      - select.with_option(value: "ca", label: "Canada")

      - select.with_option(value: "mx", label: "Mexico")

    = daisy_label(css: "mt-2", for: "right_label_select", title: "Country")

    = daisy_tip("DaisyUI end-labeled selects don't currently allow you to select the label area.", css: "tooltip-warning") do
      = daisy_select(name: "right_label_select", id: "right_label_select", placeholder: "Select a country", end: "Country") do |select|
        - select.with_option(value: "us", label: "United States")

        - select.with_option(value: "ca", label: "Canada")

        - select.with_option(value: "mx", label: "Mexico")

    = daisy_select(label_wrapper_css: "mt-8", name: "floating_label_select", id: "floating_label_select", include_blank: true, floating: "Country", placeholder: "Select a country...") do |select|
      - select.with_option(value: "us", label: "United States")

      - select.with_option(value: "ca", label: "Canada")

      - select.with_option(value: "mx", label: "Mexico")
```

-- Example: Select with Simple Options
Description:
For simpler cases, you can pass a list of strings as options. The value and label will both be set to the string value. Or you can pass an array of Hashes. You can set the label and value keys through the `option_label` and `option_value` parameters.

Code (HAML):
```haml
.flex.flex-col.gap-8
    - tshirt_sizes = ["Small", "Medium", "Large", "X-Large"]

    = daisy_select(css: "w-60", name: "tshirt_size", id: "tshirt_size", floating: "Select a t-shirt size", options: tshirt_sizes)

    table_sizes = [
  { code: "sm", display: "Small (fits 1-2 people)" },
  { code: "md", display: "Medium (fits 2-4 people)" },
  { code: "lg", display: "Large (fits 4-6 people)" },
  { code: "xl", display: "X-Large (fits 6+ people)" }
]



    = daisy_select(name: "table_size", id: "table_size", floating: "Select a table size", options: table_sizes, option_label: :display, option_value: :code)
```

-- Example: Select Sizes
Description:
Select inputs can be rered in different sizes using DaisyUI's size classes.

Code (HAML):
```haml
.my-2.space-y-6
    .space-y-2
      = daisy_label(for: "select_xs", title: "Extra Small Select")

      = daisy_select(name: "select_xs", id: "select_xs", css: "select-xs", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

    .space-y-2
      = daisy_label(for: "select_sm", title: "Small Select")

      = daisy_select(name: "select_sm", id: "select_sm", css: "select-sm", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

    .space-y-2
      = daisy_label(for: "select_md", title: "Medium Select (Default)")

      = daisy_select(name: "select_md", id: "select_md", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

    .space-y-2
      = daisy_label(for: "select_lg", title: "Large Select")

      = daisy_select(name: "select_lg", id: "select_lg", css: "select-lg", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")
```

-- Example: Select with Colors
Description:
Select inputs can be styled with different colors using DaisyUI's color classes.

Code (HAML):
```haml
.my-2.space-y-6
    .space-y-2
      = daisy_label(for: "select_primary", title: "Primary Select")

      = daisy_select(name: "select_primary", id: "select_primary", css: "select-primary", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

    .space-y-2
      = daisy_label(for: "select_secondary", title: "Secondary Select")

      = daisy_select(name: "select_secondary", id: "select_secondary", css: "select-secondary", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

    .space-y-2
      = daisy_label(for: "select_accent", title: "Accent Select")

      = daisy_select(name: "select_accent", id: "select_accent", css: "select-accent", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")

    .space-y-2
      = daisy_label(for: "select_warning", title: "Warning Select")

      = daisy_select(name: "select_warning", id: "select_warning", css: "select-warning", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")
```

-- Example: Ghost Select
Description:
Select inputs can be styled without a border using the `select-ghost` class. The border will appear on focus.

Code (HAML):
```haml
.my-2.space-y-6
    .space-y-2
      = daisy_label(for: "select_ghost", title: "Ghost Select")

      = daisy_select(name: "select_ghost", id: "select_ghost", css: "select-ghost", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option")
```

-- Example: Disabled Select
Description:
Select inputs can be disabled using the `disabled` attribute.

Code (HAML):
```haml
.my-2.space-y-2
    = daisy_label(for: "disabled_select", title: "Disabled Select", css: "cursor-not-allowed")

    = daisy_select(name: "disabled_select", id: "disabled_select", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option", disabled: true)
```

-- Example: Required Select
Description:
Select inputs can be marked as required using the `required` attribute.

Code (HAML):
```haml
.my-2.space-y-2
    = daisy_label(for: "required_select", title: "Required Select *")

    = daisy_select(name: "required_select", id: "required_select", options: ["Option 1", "Option 2", "Option 3"], placeholder: "Select an option", required: true)
```

-- Example: Pre-Selected Value
Description:
Select inputs can have a pre-selected value by setting the `value` attribute.

Code (HAML):
```haml
.my-2.space-y-2
    = daisy_label(for: "preselected_select", title: "Pre-Selected Select")

    = daisy_select(name: "preselected_select", id: "preselected_select", placeholder: "Select a country") do |select|
      - select.with_option(value: "us", label: "United States")

      - select.with_option(value: "ca", label: "Canada", selected: true)

      - select.with_option(value: "mx", label: "Mexico")
```

-- Example: Block Syntax for Options
Description:
You can use block syntax to define options for more control over each option.

Code (HAML):
```haml
.my-2.space-y-2
    = daisy_label(for: "block_select", title: "Block Syntax Select")

    = daisy_select(name: "block_select", id: "block_select", css: "select-primary") do |select|
      - select.with_option(value: "red", label: "Red")

      - select.with_option(value: "green", label: "Green")

      - select.with_option(value: "blue", label: "Blue")

      - select.with_option(value: "disabled_option", label: "Disabled Option", disabled: true)
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an even easier way to use select inputs in your pages by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :get, scope: :product, html: { class: "space-y-4" }) do |form|
    .space-y-2
      = form.daisy_label(:category) do
        .flex.items-center.gap-2
          = hero_icon("tag", class: "size-4 inline-block")

          Product Category

      = form.daisy_select(:category, placeholder: "Select a category") do |select|
        - select.with_option(value: "electronics", label: "Electronics")

        - select.with_option(value: "clothing", label: "Clothing")

        - select.with_option(value: "home", label: "Home & Kitchen")

        - select.with_option(value: "books", label: "Books")

    .space-y-2
      - options = [ "Under $25", "$25 - $50", "$50 - $100", "$100 - $200", "Over $200" ]

      = form.daisy_label(:price_range) do
        .flex.items-center.gap-2
          = hero_icon("currency-dollar", class: "size-4 inline-block")

          Price Range

      = form.daisy_select(:price_range, options: options, placeholder: "Select a price range")

    = form.submit "Filter Results", class: "mt-2 btn btn-primary w-full"
```

---

=== Component: Daisy::DataInput::TextInputComponent
Group: DataInput
Title: Text Inputs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::TextInputComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/text_input_component.rb

Description:
Text inputs allow you to enter various forms of text such as usernames, passwords, numbers, and more. 

API Signature:
- daisy_input
- daisy_text_input

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::TextInputComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LabelableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_input
- daisy_text_input

Examples:

-- Example: Basic Text Input
Description:
Text inputs can be used with or without labels. do Adding the `label` class to the `start/` slots will apply a thin separator between the label and the input.

Code (HAML):
```haml
.flex.flex-col.gap-4
    = daisy_label("Basic Inputs")

    = daisy_text_input(name: "username_input", id: "username_input", placeholder: "Username")

    = daisy_text_input(name: "password_input", id: "password_input", placeholder: "Password")

    = daisy_divider("OR")

    .flex.flex-col.gap-2
      = daisy_label(for: "url_input", title: "URL")

      = daisy_text_input(name: "url_input", id: "url_input", start: "https://", start_css: "label")

    .flex.flex-col.gap-2
      = daisy_label(for: "email_input", title: "Email")

      = daisy_text_input(name: "email_input", id: "email_input") do |text|
        - text.with_end(css: "label") do
          @gmail.com
```

-- Example: Floating Label Inputs
Description:
Inputs can also utilize a floating label with or without a placeholder to control animation.

Code (HAML):
```haml
.flex.flex-col.gap-4
    .space-y-4
      = daisy_text_input(name: "first_name_input", id: "first_name_input", floating: "First Name")

      = daisy_text_input(name: "last_name_input", id: "last_name_input", floating: "Last Name")

    = daisy_divider("OR")

    .space-y-4
      = daisy_text_input(name: "phone_floating_input", id: "phone_floating_input", floating: "Phone Number", placeholder: "ph: (123) 456-7890")

      = daisy_text_input(name: "fax_floating_input", id: "fax_floating_input", floating: "Fax", placeholder: "fax: (123) 456-7890")
```

-- Example: Different Input Types
Description:
Text inputs can have different types such as password, email, number, etc.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "email", title: "Email", css: "mt-4")

    = daisy_text_input(name: "email", id: "email", type: "email")

    = daisy_label(for: "password", title: "Password")

    = daisy_text_input(name: "password", id: "password", type: "password")

    = daisy_label(for: "number", title: "Number", css: "mt-4")

    = daisy_text_input(name: "number", id: "number", type: "number")

    = daisy_label(for: "date", title: "Date", css: "mt-4")

    = daisy_text_input(name: "date", id: "date", type: "date")

    .text-sm.text-right
      %span{ class: "text-base-content/50" } See also:

      = component_link("Cally Input", "Daisy::DataInput::CallyInputComponent")

    = daisy_label(for: "time", title: "Time", css: "mt-4")

    = daisy_text_input(name: "time", id: "time", type: "time")

    = daisy_label(for: "datetime-local", title: "Datetime Local", css: "mt-4")

    = daisy_text_input(name: "datetime-local", id: "datetime-local", type: "datetime-local")
```

-- Example: Text Input Sizes
Description:
Text inputs can have different sizes using the `input-lg`, `input-md`, `input-sm`, or `input-xs` classes.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input-lg", title: "Large Input")

    = daisy_text_input(name: "input-lg", id: "input-lg", placeholder: "Large input", css: "input-lg")

    = daisy_label(for: "input-md", title: "Medium Input (default)", css: "mt-4")

    = daisy_text_input(name: "input-md", id: "input-md", placeholder: "Medium input", css: "input-md")

    = daisy_label(for: "input-sm", title: "Small Input", css: "mt-4")

    = daisy_text_input(name: "input-sm", id: "input-sm", placeholder: "Small input", css: "input-sm")

    = daisy_label(for: "input-xs", title: "Extra Small Input", css: "mt-4")

    = daisy_text_input(name: "input-xs", id: "input-xs", placeholder: "Extra small input", css: "input-xs")
```

-- Example: Text Input with Different Colors
Description:
Text inputs can be styled with additional CSS classes to change their appearance.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input_primary", title: "Primary Text Input")

    = daisy_text_input(name: "input_primary", id: "input_primary", css: "input-primary")

    = daisy_label(for: "input_secondary", title: "Secondary Text Input", css: "mt-4")

    = daisy_text_input(name: "input_secondary", id: "input_secondary", css: "input-secondary")

    = daisy_label(for: "input_accent", title: "Accent Text Input", css: "mt-4")

    = daisy_text_input(name: "input_accent", id: "input_accent", css: "input-accent")
```

-- Example: Ghost Style Text Input
Description:
Text inputs can use the `input-ghost` class to remove the border. The border will appear on focus.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input_ghost", title: "Ghost Style Text Input")

    = daisy_text_input(name: "input_ghost", id: "input_ghost", css: "input-ghost")

    .mt-4.p-4.border.rounded-lg.bg-secondary.text-secondary-content
      %p.text-sm.mb-2 Ghost style with background container:

      = daisy_label(for: "input_ghost_bg", title: "Search")

      = daisy_text_input(name: "input_ghost_bg", id: "input_ghost_bg", css: "input-ghost", placeholder: "Search the docs...")
```

-- Example: Disabled Text Input
Description:
Text inputs can be disabled using the `disabled` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input_disabled", title: "Disabled Text Input", css: "cursor-not-allowed")

    = daisy_text_input(name: "input_disabled", id: "input_disabled", disabled: true)
```

-- Example: Required Text Input
Description:
Text inputs can be marked as required using the `required` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input_required", title: "Required Text Input")

    = daisy_text_input(name: "input_required", id: "input_required", required: true)
```

-- Example: Text Input with Icons
Description:
Text inputs can be combined with icons and other elements using the `start` and `` options or slots, which appear before and after the input field.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "input_icon_prefix", title: "Search with Icon Prefix")

    = daisy_text_input(name: "input_icon_prefix", id: "input_icon_prefix", placeholder: "Search...") do |text_input|
      - text_input.with_start(css: "label") do
        = hero_icon("magnifying-glass", size: 5, css: "text-gray-400")

    = daisy_label(for: "input_icon_suffix", title: "Email with Icon Suffix", css: "mt-4")

    = daisy_text_input(name: "input_icon_suffix", id: "input_icon_suffix", type: "email", placeholder: "Enter your email") do |text_input|
      - text_input.with_end do
        = hero_icon("envelope", size: 5, css: "text-gray-400")

    = daisy_label(for: "input_icon_both", title: "Input with Both Icons", css: "mt-4")

    = daisy_text_input(name: "input_icon_both", id: "input_icon_both", placeholder: "Username") do |text_input|
      - text_input.with_start do
        = hero_icon("user", size: 5, css: "text-gray-400")

      - text_input.with_end do
        = hero_icon("check", size: 5, css: "text-success")
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an easy way to use text inputs in your forms by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user) do |form|
    .my-2.flex.flex-col.gap-4
      = form.daisy_label(:username)

      = form.daisy_text_input(:username)

      = form.daisy_label(:email, "Email Address", css: "mt-4")

      = form.daisy_text_input(:email, type: "email", placeholder: "example@mail.com")

      = form.daisy_label(:password, css: "mt-4")

      = form.daisy_text_input(:password, type: "password")
```

---

=== Component: Daisy::DataInput::TextAreaComponent
Group: DataInput
Title: Text Areas
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::TextAreaComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/text_area_component.rb

Description:
do Text areas have a border by default. Use `textarea-ghost` to remove the border. 

API Signature:
- daisy_text_area

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::TextAreaComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_text_area

Examples:

-- Example: Basic Text Area
Description:
Text areas allow users to enter multiple lines of text.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "message1", title: "Message")

    = daisy_text_area(name: "message1", id: "message1")
```

-- Example: Text Area with Placeholder
Description:
You can add placeholder text to guide users on what to enter.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "feedback", title: "Feedback")

    = daisy_text_area(name: "feedback", id: "feedback", placeholder: "Tell us what you think...")
```

-- Example: Text Area with Initial Value
Description:
You can pre-populate a text area with an initial value.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "bio", title: "Biography")

    = daisy_text_area(name: "bio", id: "bio", value: "I am a software developer with expertise in Ruby on Rails and JavaScript.")
```

-- Example: Custom Rows
Description:
You can customize the height of the text area by specifying the number of rows.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "short_note", title: "Short Note (2 rows)")

    = daisy_text_area(name: "short_note", id: "short_note", rows: 2)

    = daisy_label(for: "long_note", title: "Long Note (8 rows)", css: "mt-4")

    = daisy_text_area(name: "long_note", id: "long_note", rows: 8)
```

-- Example: Text Area with Different Colors
Description:
Text areas can be styled with additional CSS classes to change their appearance.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "textarea_primary", title: "Primary Text Area")

    = daisy_text_area(name: "textarea_primary", id: "textarea_primary", css: "textarea-primary")

    = daisy_label(for: "textarea_secondary", title: "Secondary Text Area", css: "mt-4")

    = daisy_text_area(name: "textarea_secondary", id: "textarea_secondary", css: "textarea-secondary")

    = daisy_label(for: "textarea_accent", title: "Accent Text Area", css: "mt-4")

    = daisy_text_area(name: "textarea_accent", id: "textarea_accent", css: "textarea-accent")
```

-- Example: Borderless (Ghost) Text Area
Description:
Use `textarea-ghost` to remove the border from a text area. This creates a minimalist appearance that only shows borders on hover.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "textarea_ghost", title: "Ghost Style Text Area")

    = daisy_text_area(name: "textarea_ghost", id: "textarea_ghost", css: "textarea-ghost")

    .mt-4.p-4.border.rounded-lg.bg-teal-200
      %p.text-sm.mb-2 Ghost style with background container:

      = daisy_label(for: "textarea_ghost_bg", title: "Your Message")

      = daisy_text_area(name: "textarea_ghost_bg", id: "textarea_ghost_bg", css: "textarea-ghost")
```

-- Example: Disabled Text Area
Description:
Text areas can be disabled using the `disabled` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "textarea_disabled", title: "Disabled Text Area", css: "cursor-not-allowed")

    = daisy_text_area(name: "textarea_disabled", id: "textarea_disabled", disabled: true, value: "This text area is disabled and cannot be edited.")
```

-- Example: Read-only Text Area
Description:
Text areas can be set to read-only using the `readonly` attribute, allowing users to see but not edit the content.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "textarea_readonly", title: "Read-only Text Area")

    = daisy_text_area(name: "textarea_readonly", id: "textarea_readonly", readonly: true, value: "This text area is read-only. You can select the text but cannot edit it.")
```

-- Example: Required Text Area
Description:
Text areas can be marked as required using the `required` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "textarea_required", title: "Required Text Area")

    = daisy_text_area(name: "textarea_required", id: "textarea_required", required: true)
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an easy way to use text areas in your forms by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user) do |form|
    .my-2.flex.flex-col.gap-4
      = form.daisy_label(:bio)

      = form.daisy_text_area(:bio)

      = form.daisy_label(:comments, "Additional Comments", css: "mt-4")

      = form.daisy_text_area(:comments, rows: 6, placeholder: "Share your thoughts...")
```

---

=== Component: Daisy::DataInput::ToggleComponent
Group: DataInput
Title: Toggles
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::DataInput::ToggleComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/data_input/toggle_component.rb

Description:
 The Toggle component is a wrapper around the  component_link("Checkbox", "Daisy::DataInput::CheckboxComponent")  component that sets the <code>toggle</code> property to <code>true</code> by default, providing a switch-like appearance. 

API Signature:
- daisy_toggle

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::DataInput::CallyComponent
- Daisy::DataInput::CallyInputComponent
- Daisy::DataInput::CheckboxComponent
- Daisy::DataInput::FileInputComponent
- Daisy::DataInput::FieldsetComponent

Rails Integration:
- Base Class: Daisy::DataInput::ToggleComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LabelableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_toggle

Examples:

-- Example: Basic Toggles
Description:
Toggles are switches that allow users to turn options on or off. They're a visual alternative to checkboxes, ideal for settings and preferences. do While the <a href="#{doc_url("LocoMotion/Concerns/LabelableComponent")}" >LabelableComponent</a> Concern does implement a `floating` attribute, it is not relevant for toggles and does not rer properly.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    
      = daisy_toggle(name: "toggle0", id: "toggle0")

      .tooltip.tooltip-warning{ "data-tip": "CANNOT click the text to activate" }
        Toggle with no label

    = daisy_label(for: "toggle1") do
      = daisy_toggle(name: "toggle1", id: "toggle1")

      Default Toggle with regular label

    = daisy_toggle(name: "toggle_end", id: "toggle_end", checked: true, end: "Toggle using end wrapper")

    = daisy_toggle(name: "toggle_start", id: "toggle_start", checked: true, start: "Toggle using start wrapper")

    = daisy_toggle(name: "toggle_end_block", id: "toggle_end_block", checked: true) do |toggle|
      - toggle.with_end do
        Toggle using `end` block



    = daisy_toggle(name: "toggle_start_block", id: "toggle_start_block", checked: true) do |toggle|
      - toggle.with_start(css: "flex flex-row items-center") do
        Using

        = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
          start

      - toggle.with_end(css: "flex flex-row items-center") do
        and

        = daisy_badge(css: "mx-1 badge-secondary badge-sm") do
          end

        blocks
```

-- Example: Toggles with Colors
Description:
Toggles can be styled with different colors using CSS classes like `toggle-primary`.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "toggle-dark") do
      = daisy_toggle(name: "toggle-dark", id: "toggle-dark", css: "toggle-neutral theme-controller", value: "dark", checked: false)

      Enable Dark Mode

    = daisy_label(for: "toggle_primary") do
      = daisy_toggle(name: "toggle_primary", css: "toggle-primary", id: "toggle_primary", checked: true)

      Primary Toggle

    = daisy_label(for: "toggle_secondary") do
      = daisy_toggle(name: "toggle_secondary", css: "toggle-secondary", id: "toggle_secondary", checked: true)

      Secondary Toggle

    = daisy_label(for: "toggle_accent") do
      = daisy_toggle(name: "toggle_accent", css: "toggle-accent", id: "toggle_accent", checked: true)

      Accent Toggle

    = daisy_label(for: "toggle_success") do
      = daisy_toggle(name: "toggle_success", css: "toggle-success", id: "toggle_success", checked: true)

      Success Toggle

    = daisy_label(for: "toggle_warning") do
      = daisy_toggle(name: "toggle_warning", css: "toggle-warning", id: "toggle_warning", checked: true)

      Warning Toggle

    = daisy_label(for: "toggle_error") do
      = daisy_toggle(name: "toggle_error", css: "toggle-error", id: "toggle_error", checked: true)

      Error Toggle
```

-- Example: Toggle Sizes
Description:
Toggles come in different sizes by applying CSS classes.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "toggle_small") do
      = daisy_toggle(name: "toggle_small", id: "toggle_small", css: "toggle-sm")

      Small Toggle

    = daisy_label(for: "toggle_default") do
      = daisy_toggle(name: "toggle_default", id: "toggle_default")

      Default Size Toggle

    = daisy_label(for: "toggle_large") do
      = daisy_toggle(name: "toggle_large", id: "toggle_large", css: "toggle-lg")

      Large Toggle
```

-- Example: Toggle States
Description:
Toggles can be in different states such as checked, disabled, or required.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "toggle_unchecked") do
      = daisy_toggle(name: "toggle_unchecked", id: "toggle_unchecked")

      Unchecked Toggle

    = daisy_label(for: "toggle_checked") do
      = daisy_toggle(name: "toggle_checked", id: "toggle_checked", checked: true)

      Checked Toggle

    = daisy_label(for: "toggle_disabled", css: "cursor-not-allowed") do
      = daisy_toggle(name: "toggle_disabled", id: "toggle_disabled", disabled: true)

      Disabled Toggle

    = daisy_label(for: "toggle_required") do
      = daisy_toggle(name: "toggle_required", id: "toggle_required", required: true)

      Required Toggle
```

-- Example: Custom ID
Description:
Toggles can be given a custom ID using the `id` attribute.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4
    = daisy_label(for: "custom-toggle-id") do
      = daisy_toggle(name: "toggle_custom", id: "custom-toggle-id")

      Toggle with Custom ID
```

-- Example: Rails Form Example
Description:
The built-in Form Builder extension provides an even easier way to use toggles in your pages by extracting the name and ID attributes from the form object and attributes.

Code (HAML):
```haml
= form_with(url: "#", method: :post, scope: :user) do |form|
    .flex.flex-col.gap-4
      = form.daisy_label(:notifications) do
        = form.daisy_toggle(:notifications)

        Enable notifications

      = form.daisy_label(:dark_mode) do
        = form.daisy_toggle(:dark_mode, css: "toggle-primary theme-controller", value: "dark")

        Enable dark mode
```

-- Example: Using Label Component
Description:
You can also use the Label component directly with toggles for a fully custom approach.

Code (HAML):
```haml
.my-2.flex.flex-col.gap-4.w-80
    .flex.items-center.justify-between
      = daisy_label(for: "location", title: "Enable location services")

      = daisy_toggle(name: "location", id: "location")

    .flex.items-center.justify-between
      = daisy_label(for: "marketing") do
        Receive marketing emails

      = daisy_toggle(name: "marketing", id: "marketing", css: "toggle-primary")
```

---

=== Component: Daisy::Navigation::BreadcrumbsComponent
Group: Navigation
Title: Breadcrumbs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::BreadcrumbsComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/breadcrumbs_component.rb

Description:
 Navigation aids that show the user's current location and path within a  website hierarchy. Perfect for complex sites with multiple levels, providing  context and easy navigation back to parent pages with customizable separators  and styling options. 

API Signature:
- daisy_breadcrumbs

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::DockComponent
- Daisy::Navigation::LinkComponent
- Daisy::Navigation::MenuComponent
- Daisy::Navigation::NavbarComponent
- Daisy::Navigation::PaginationComponent

Rails Integration:
- Base Class: Daisy::Navigation::BreadcrumbsComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_breadcrumbs

Examples:

-- Example: Basic Breadcrumbs
Description:
Basic breadcrumbs show only text and a separator.

Code (HAML):
```haml
= daisy_breadcrumbs do |breadcrumbs|
    - # Options via keyword arguments

    - breadcrumbs.with_item(title: "Docs", href: "/")

    - # Options via positional arguments

    - breadcrumbs.with_item("Breadcrumbs", "/examples/Daisy::Navigation::BreadcrumbsComponent")

    - # Custom content

    - breadcrumbs.with_item(css: "italic selection:bg-secondary selection:text-secondary-content") do
      This example
```

-- Example: Breadcrumbs with Icons
Description:
Breadcrumbs can also utilize icons to help users quickly identify different pages.

Code (HAML):
```haml
- links = [ ["Home", "home"], ["Docs", "document"], ["Components", "cube"], ["Breadcrumbs", "squares-2x2"] ]

  = daisy_breadcrumbs do |breadcrumbs|
    - links.each do |link|
      - breadcrumbs.with_item(title: link[0], href: "#", icon: link[1], icon_css: "size-4 mr-1 text-base-content/50", icon_options: { variant: :mini })
```

-- Example: Custom Breadcrumbs
Description:
You can also pass any content to fully customize your breadcrumbs.

Code (HAML):
```haml
- links = [ [ "🙂", "Favorites", ""], ["😃", "Super Favorites", "italic"], ["🤩", "Amazeballs Favorites", "font-bold italic"] ]

  = daisy_breadcrumbs do |breadcrumbs|
    - links.each.with_index do |link, index|
      - breadcrumbs.with_item do
        = daisy_link "#", css: "no-underline! hover:text-secondary" do
          .text-3xl.-rotate-12
            = link.first

          .text-xl{ class: link.last }
            = link.second
```

---

=== Component: Daisy::Navigation::DockComponent
Group: Navigation
Title: Dock
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::DockComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/dock_component.rb

Description:
The Dock component provides a navigation bar fixed to the bottom of the screen, commonly used in mobile interfaces. 

API Signature:
- daisy_dock

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::BreadcrumbsComponent
- Daisy::Navigation::LinkComponent
- Daisy::Navigation::MenuComponent
- Daisy::Navigation::NavbarComponent
- Daisy::Navigation::PaginationComponent

Rails Integration:
- Base Class: Daisy::Navigation::DockComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_dock

Examples:

-- Example: Basic Dock
Description:
A simple dock component with three sections. do We add the `relative` class to ensure visibility in the example rather than the default of being fixed to the bottom of the screen.

Code (HAML):
```haml
= daisy_dock(css: "relative border border-base-300") do |dock|
    - dock.with_section(icon: "home", href: "#")

    - dock.with_section(icon: "information-circle", href: "#", active: true)

    - dock.with_section(icon: "chart-bar", href: "#")
```

-- Example: Dock with Titles
Description:
The Dock sections can also have a simple title passed via the `title` attribute, or a more complex title by passing a block to the section.

Code (HAML):
```haml
= daisy_dock(css: "relative border border-base-content") do |dock|
    - dock.with_section(icon: "home", href: "#", title: "Home")

    - dock.with_section(icon: "information-circle", icon_css: "text-blue-600 -rotate-45", href: "#", active: true, title: "Info")

    - dock.with_section(icon: "chart-bar", href: "#") do
      .font-bold.italic.text-xs.text-error.animate-bounce
        Stats
```

-- Example: Colored Dock
Description:
You can also use any of the built-in Daisy, Tailwind, or custom colors.

Code (HAML):
```haml
- colors = ["text-primary", "text-secondary", "text-accent", "text-info", "text-success", "text-warning", "text-error", "text-cyan-400", "text-[#449944]"]

  - colors.each do |color|
    = daisy_dock(css: "relative border border-base-300") do |dock|
      - dock.with_section(icon: "home", href: "#", title: "Home", css: color)

      - dock.with_section(icon: "information-circle", title: color, href: "#", css: color)

      - dock.with_section(icon: "chart-bar", href: "#", title: "Stats", css: color)
```

---

=== Component: Daisy::Navigation::LinkComponent
Group: Navigation
Title: Links
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::LinkComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/link_component.rb

Description:
 Tailwind removes the styling on standard links so we provide an easy way to  re-add them. This works very similarly to the  link_to "link_to", "https://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to", class: "font-mono"  helper in Rails. 

API Signature:
- daisy_link

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::BreadcrumbsComponent
- Daisy::Navigation::DockComponent
- Daisy::Navigation::MenuComponent
- Daisy::Navigation::NavbarComponent
- Daisy::Navigation::PaginationComponent

Rails Integration:
- Base Class: Daisy::Navigation::LinkComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::LinkableComponent, LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_link

Examples:

-- Example: Basic Links
Description:
Basic links are styled with the `.link` class. The `title` and `href` options can be passed as keyword arguments, or as the first two positional arguments. The `title` can also be passed as a block.

Code (HAML):
```haml
.flex.items-end.space-x-4
    = daisy_link title: "Home", href: "#"

    = daisy_link "Docs", "#", css: "link-primary text-xl"

    = daisy_link "Components", "#", css: "link-secondary text-2xl"

    = daisy_link "#", css: "link-success link-hover text-3xl" do
      Big Hover Link
```

---

=== Component: Daisy::Navigation::MenuComponent
Group: Navigation
Title: Menus
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::MenuComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/menu_component.rb

Description:
do Vertical menus no longer have a default width. Use `w-full` or other width classes if you want to control the width. 

API Signature:
- daisy_menu

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::BreadcrumbsComponent
- Daisy::Navigation::DockComponent
- Daisy::Navigation::LinkComponent
- Daisy::Navigation::NavbarComponent
- Daisy::Navigation::PaginationComponent

Rails Integration:
- Base Class: Daisy::Navigation::MenuComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_menu

Examples:

-- Example: Basic Menu
Description:
Menus typically contain a list of links or buttons that users can click. The styling is very minimal, just adding a hover effect.

Code (HAML):
```haml
= daisy_menu(css: "w-56") do |menu|
    - # Menu Item Group with a title keyword argument

    - menu.with_item(title: "Group 1") do
      = link_to "Item 1 - 1", "#"

    - # Menu Item Group with a title as the first positional argument

    - menu.with_item("Group 2") do
      = link_to "Item 2 - 1", "#"

    - menu.with_item do
      = link_to "Item 2 - 2", "#"
```

-- Example: Horizontal Menu
Description:
Menus can be displayed horizontally by adding the `.menu-horizontal` class to the menu. They can also have icons, disabled / active items, and many other options. Use `menu-active`, `menu-focus`, and `menu-disabled` classes to style menu items in different states. do We can't actually disable the link since the HTML spec does not allow that (instead you should generally just make it text). However, we can disable the link with CSS and use `.pointer-events-none` to ensure it cannot be clicked. You may also want to add `tabindex: -1` to your link to ensure it cannot be focused with the keyboard.

Code (HAML):
```haml
= daisy_menu(css: "menu-horizontal") do |menu|
    - menu.with_item do
      = link_to "Item 1", "#"

    - menu.with_item(disabled: true) do
      = link_to "Item 2", "#", tabindex: -1

    - menu.with_item do
      = link_to "Item 3", "#", class: "menu-active"
```

-- Example: Nested Menus
Description:
Menus can also contain nested menus. This is useful for organizing a large number of options.

Code (HAML):
```haml
- icon_options = { css: "size-4 mr-1 text-slate-600", variant: :mini }

  = daisy_menu(css: "w-56 bg-base-100 border border-base-300 rounded-lg shadow-md") do |menu|
    - menu.with_item do
      = link_to "#" do
        = hero_icon("home", **icon_options)

        Home

    - menu.with_item do
      = link_to "#" do
        = hero_icon("bell-alert", **icon_options)

        Notifications

    - menu.with_item(title: "Parent") do
      = daisy_menu(css: "w-full") do |menu|
        - menu.with_item do
          = link_to "Child 1", "#"

        - menu.with_item do
          = link_to "Child 2", "#"

        - menu.with_item do
          - icon_options[:css] += " text-yellow-500!"

          = link_to "#" do
            Child 3

            = hero_icon("bolt", **icon_options)
```

---

=== Component: Daisy::Navigation::NavbarComponent
Group: Navigation
Title: Navbars
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::NavbarComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/navbar_component.rb

Description:
 Horizontal navigation bars that organize primary navigation links, branding,  and user actions at the top of pages. Perfect for site headers, application  navigation, and responsive layouts with flexible sections for logo, menu items,  and interactive elements. 

API Signature:
- daisy_navbar

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::BreadcrumbsComponent
- Daisy::Navigation::DockComponent
- Daisy::Navigation::LinkComponent
- Daisy::Navigation::MenuComponent
- Daisy::Navigation::PaginationComponent

Rails Integration:
- Base Class: Daisy::Navigation::NavbarComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_navbar

Examples:

-- Example: Basic Navbar
Description:
Navbars are simple elements which typically contain start and sections, and sometimes a center section.

Code (HAML):
```haml
.w-full{ class: "max-w-[800px]" }
    = daisy_navbar(css: "bg-base-100 border border-base-200 rounded-lg shadow-xs") do |navbar|
      - navbar.with_start do
        = image_tag("loco-logo.png", class: "h-8")

        %span
          %em Loco

          %span.font-bold Motion

      - navbar.with_end do
        = link_to "https://github.com/profoundry-us/loco_motion", target: "_blank", class: "flex items-center space-x-2" do
          %svg.size-6{role: "img", viewbox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", class: "dark:fill-base-100"}
            %title GitHub

            %path{d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"}

          %span

          GitHub
```

-- Example: Advanced Navbar
Description:
Navbars items can also contain center sections and dropdowns with menus. do Note that the size of the elements inside the navbar will affect the height of the navbar itself. The navbar will grow to fit the largest element inside it. Try hovering the green icon below to see the change.

Code (HAML):
```haml
.w-full{ class: "max-w-[800px]" }
    = daisy_navbar(css: "bg-base-100 border border-base-200 rounded-lg shadow-xs") do |navbar|
      - navbar.with_start(css: "text-lg italic") do
        Code-<strong>Fur</strong>-Life

      - navbar.with_center do
        = hero_icon("code-bracket-square", css: "transition-all size-14 hover:size-20 text-green-600 -rotate-12")

      - navbar.with_end do
        = daisy_dropdown(css: "dropdown-end") do |dropdown|
          - dropdown.with_button(css: "btn-ghost", title: "Languages", right_icon: "chevron-down")

          - dropdown.with_item do
            = link_to "Ruby", "https://www.ruby-lang.org", target: "_blank"

          - dropdown.with_item do
            = link_to "Rails", "http://www.rubyonrails.org", target: "_blank"

          - dropdown.with_item do
            = link_to "Hotwire", "https://hotwired.dev/", target: "_blank"
```

---

=== Component: Daisy::Navigation::PaginationComponent
Group: Navigation
Title: Pagination
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::PaginationComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/pagination_component.rb

Description:
 Pagination can be implemented by utilizing the existing  component_link("Join", "Daisy::Layout::JoinComponent")  component. 

Helpers:
- (No helper methods defined)

Examples:

-- Example: Basic Pagination
Description:
Pagination is used to navigate between pages of content. It is typically used in conjunction with a list of items that are paginated.

Code (HAML):
```haml
= daisy_join do |join|
    - join.with_item do
      = daisy_button(title: "1", css: "btn-primary join-item")

    - join.with_item do
      = daisy_button(title: "2", css: "join-item")

    - join.with_item do
      = daisy_button(title: "...", css: "join-item")

    - join.with_item do
      = daisy_button(title: "9", css: "join-item")

    - join.with_item do
      = daisy_button(title: "10", css: "join-item")
```

---

=== Component: Daisy::Navigation::StepsComponent
Group: Navigation
Title: Steps
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::StepsComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/steps_component.rb

Description:
 Steps allow you to create a series of steps that users can follow to  complete a task. This is useful for onboarding, form completion, and many  more. 

API Signature:
- daisy_steps

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::BreadcrumbsComponent
- Daisy::Navigation::DockComponent
- Daisy::Navigation::LinkComponent
- Daisy::Navigation::MenuComponent
- Daisy::Navigation::NavbarComponent

Rails Integration:
- Base Class: Daisy::Navigation::StepsComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_steps

Examples:

-- Example: Basic Steps
Description:
Steps are automatically numbered and connected with lines. You can utilize colors to indicate progress through the steps.

Code (HAML):
```haml
= daisy_steps do |steps|
    - steps.with_step(title: "Write Code", css: "step-primary")

    - steps.with_step(title: "Release Code", css: "step-primary")

    - steps.with_step(title: "Profit", css: "step-secondary")

    - steps.with_step(title: "Rule the World")
```

-- Example: Vertical Steps
Description:
You can also display steps vertically.

Code (HAML):
```haml
= daisy_steps(css: "steps-vertical") do |steps|
    - steps.with_step(title: "Write Code", css: "step-primary")

    - steps.with_step(title: "Release Code", css: "step-primary")

    - steps.with_step(title: "Profit", css: "step-secondary")

    - steps.with_step(title: "Rule the World")
```

-- Example: Custom Content
Description:
You can customize the content of each step to include any (short) content you want by using the `number` option. do You can also supply this via the `data-content` attribute in the html. doc_code(language: "haml") do = daisy_steps do |steps| - steps.with_step(html: { data: { content: "❤️" } }) And you can alter the colors by supplying CSS for the `after` pseudo-element. Note that you may need to use the `!important` modifier to override the default styles.

Code (HAML):
```haml
= daisy_steps do |steps|
    - steps.with_step(number: "AB")

    - steps.with_step(number: "CD")

    - steps.with_step(number: "EF")

    - steps.with_step(number: "★")

    - steps.with_step(number: "✓")

    - steps.with_step(number: "✕", css: "after:bg-black! after:text-green-500!")
```

---

=== Component: Daisy::Navigation::TabsComponent
Group: Navigation
Title: Tabs
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Navigation::TabsComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/navigation/tabs_component.rb

Description:
Navigation controls for organizing content into switchable panels. Supports multiple sizes (xs, sm, md, lg, xl) and styles (boxed, bordered, lift) for creating intuitive content navigation and filtering interfaces. 

API Signature:
- daisy_tabs

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Navigation::BreadcrumbsComponent
- Daisy::Navigation::DockComponent
- Daisy::Navigation::LinkComponent
- Daisy::Navigation::MenuComponent
- Daisy::Navigation::NavbarComponent

Rails Integration:
- Base Class: Daisy::Navigation::TabsComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_tabs

Examples:

-- Example: Basic Tabs
Description:
Tabs are transparent by default and don't automatically do anything since they are simple `<a>` (anchor) elements. You can set the `href` attribute to make them link to another page.

Code (HAML):
```haml
= daisy_tabs(css: "tabs-border") do |tabs|
    - tabs.with_tab(title: "I Do Nothing", active: true)

    - tabs.with_tab(title: "Ditto", html: { onclick: "alert('Ha! Gotcha ;-)')" })

    - tabs.with_tab(title: "Open Google", href: "https://google.com", target: "_blank")
```

-- Example: Tab Sizes
Description:
Tabs come in five different sizes: `tabs-xs`, `tabs-sm`, `tabs-md` (default), `tabs-lg`, and `tabs-xl`. Each size can be combined with any tab style.

Code (HAML):
```haml
.space-y-8
    .space-y-2
      %p.text-sm Extra Small

      = daisy_tabs(css: "tabs-border tabs-xs") do |tabs|
        - tabs.with_tab(title: "Tab 1", active: true)

        - tabs.with_tab(title: "Tab 2")

        - tabs.with_tab(title: "Tab 3")

    .space-y-2
      %p.text-sm Small

      = daisy_tabs(css: "tabs-border tabs-sm") do |tabs|
        - tabs.with_tab(title: "Tab 1", active: true)

        - tabs.with_tab(title: "Tab 2")

        - tabs.with_tab(title: "Tab 3")

    .space-y-2
      %p.text-sm Medium (Default)

      = daisy_tabs(css: "tabs-border") do |tabs|
        - tabs.with_tab(title: "Tab 1", active: true)

        - tabs.with_tab(title: "Tab 2")

        - tabs.with_tab(title: "Tab 3")

    .space-y-2
      %p.text-sm Large

      = daisy_tabs(css: "tabs-border tabs-lg") do |tabs|
        - tabs.with_tab(title: "Tab 1", active: true)

        - tabs.with_tab(title: "Tab 2")

        - tabs.with_tab(title: "Tab 3")

    .space-y-2
      %p.text-sm Extra Large

      = daisy_tabs(css: "tabs-border tabs-xl") do |tabs|
        - tabs.with_tab(title: "Tab 1", active: true)

        - tabs.with_tab(title: "Tab 2")

        - tabs.with_tab(title: "Tab 3")
```

-- Example: Radio Button Tabs with Content
Description:
If you want the tabs to change their content, you can use the `radio` option. Note that this does *not* allow the use of icons or other HTML elements in the title.

Code (HAML):
```haml
= daisy_tabs(css: "tabs-lift w-[500px]", radio: true) do |tabs|
    - # Add some space before the first tab

    - tabs.with_tab(title: "", css: "w-14! cursor-auto!", disabled: true)

    - (1..3).each do |i|
      - tabs.with_tab(title: "Tab #{i}", content_wrapper_css: "bg-base-100 border-base-300 rounded-box p-6", checked: i == 1) do
        %p "Tab #{i} content"
```

-- Example: Turbo Frame Tabs
Description:
You can also use tabs with Turbo Frames to load content dynamically.

Code (HAML):
```haml
%turbo-frame{"id" => "tabs--turob-tabs-example"}
    = daisy_tabs(css: "tabs-lift w-[500px]") do |tabs|
      - (2..4).each do |i|
        - is_checked = params[:custom_tab] ? params[:custom_tab] == i.to_s : i == 3

        - tabs.with_tab(href: "?custom_tab=#{i}", checked: is_checked) do |tab|
          - tab.with_title(css: "test-tab") do
            .flex.gap-x-2.items-center
              %span.size-4
                = heroicon("bars-#{i}", class: "size-4")

              %span.whitespace-nowrap "#{i} Bars"

          - tab.with_custom_content(css: "tab-content bg-base-100 border-base-300 rounded-box p-6") do
            %p "#{i} bars content..."
```

---

=== Component: Daisy::Feedback::AlertComponent
Group: Feedback
Title: Alerts
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::AlertComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/alert_component.rb

Description:
 Alerts inform the user about important information or changes to the system. 

API Signature:
- daisy_alert

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::LoadingComponent
- Daisy::Feedback::ProgressComponent
- Daisy::Feedback::RadialProgressComponent
- Daisy::Feedback::SkeletonComponent
- Daisy::Feedback::ToastComponent

Rails Integration:
- Base Class: Daisy::Feedback::AlertComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::IconableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_alert

Examples:

-- Example: Basic Alerts
Description:
Alerts come in a variety of flavors and generally have an icon at the start to indicate the type of alert.

Code (HAML):
```haml
= daisy_alert(icon: "archive-box", icon_html: { variant: :outline }, css: "w-100") do |alert|
    Standard alerts are gray-t!

  = daisy_alert(icon: "information-circle", css: "alert-info w-100", icon_html: { variant: :outline }) do |alert|
    Here is some important information!

  = daisy_alert(icon: "check-circle", css: "alert-success w-100", icon_html: { variant: :outline }) do |alert|
    Success! You did it!

  = daisy_alert(icon: "exclamation-triangle", css: "alert-warning w-100", icon_html: { variant: :outline }) do |alert|
    Ooh, be careful here!

  = daisy_alert(icon: "exclamation-circle", css: "alert-error w-100", icon_html: { variant: :outline }) do |alert|
    Uh oh, something went wrong!
```

-- Example: Alerts Without Icons
Description:
If you don't want an icon, you can simply omit it.

Code (HAML):
```haml
= daisy_alert(css: "alert-info w-100") do |alert|
    Here is some important information!

  = daisy_alert(css: "alert-success w-100") do |alert|
    Success! You did it!

  = daisy_alert(css: "alert-warning w-100") do |alert|
    Ooh, be careful here!

  = daisy_alert(css: "alert-error w-100") do |alert|
    Uh oh, something went wrong!
```

-- Example: Custom Icon Alerts
Description:
You can also use a custom icon (or any HTML) if you prefer.

Code (HAML):
```haml
= daisy_alert do |alert|
    = hero_icon("star", css: "text-yellow-500")

    Custom icon alert!

  = daisy_alert do |alert|
    %span ❤️

    %span Custom emoji alert!

  = daisy_alert do |alert|
    = daisy_avatar(css: "size-10", src: image_path("avatars/lady-smiling-3.jpg"))

    %span Or even Daisy avatars / other elements!
```

-- Example: Soft Alerts
Description:
Alerts can also be displayed in soft style.

Code (HAML):
```haml
= daisy_alert(icon: "information-circle", css: "alert-info alert-soft") do
    Info alert.

  = daisy_alert(icon: "check-circle", css: "alert-success alert-soft") do
    Success alert.

  = daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-soft") do
    Warning alert.

  = daisy_alert(icon: "exclamation-circle", css: "alert-error alert-soft") do
    Error alert.
```

-- Example: Outline Alerts
Description:
Alerts can also be displayed in outline style.

Code (HAML):
```haml
= daisy_alert(icon: "information-circle", css: "alert-info alert-outline") do
    Info alert.

  = daisy_alert(icon: "check-circle", css: "alert-success alert-outline") do
    Success alert.

  = daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-outline") do
    Warning alert.

  = daisy_alert(icon: "exclamation-circle", css: "alert-error alert-outline") do
    Error alert.
```

-- Example: Dash Alerts
Description:
Alerts can also be displayed in dash style.

Code (HAML):
```haml
= daisy_alert(icon: "information-circle", css: "alert-info alert-dash") do
    Info alert.

  = daisy_alert(icon: "check-circle", css: "alert-success alert-dash") do
    Success alert.

  = daisy_alert(icon: "exclamation-triangle", css: "alert-warning alert-dash") do
    Warning alert.

  = daisy_alert(icon: "exclamation-circle", css: "alert-error alert-dash") do
    Error alert.
```

---

=== Component: Daisy::Feedback::LoadingComponent
Group: Feedback
Title: Loaders
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::LoadingComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/loading_component.rb

Description:
 Loaders are used to indicate that a process is happening in the background. 

API Signature:
- daisy_loading
- daisy_loader

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::AlertComponent
- Daisy::Feedback::ProgressComponent
- Daisy::Feedback::RadialProgressComponent
- Daisy::Feedback::SkeletonComponent
- Daisy::Feedback::ToastComponent

Rails Integration:
- Base Class: Daisy::Feedback::LoadingComponent
- ViewComponent: Yes
- Includes: LocoMotion::Concerns::TippableComponent, LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_loading
- daisy_loader

Examples:

-- Example: Basic Loaders
Description:
Loaders come in a variety of flavors! do This component's helper method is also aliased as `daisy_loader` because we think it sounds better 😄 However, you **must** use the `loading` class names for the CSS to work properly.

Code (HAML):
```haml
= daisy_loading(css: "loading-spinner text-primary")

  = daisy_loading(css: "loading-dots text-secondary")

  = daisy_loading(css: "loading-ring text-accent")

  = daisy_loader(css: "loading-ball text-info")

  = daisy_loader(css: "loading-bars text-success")

  = daisy_loader(css: "loading-infinity text-error")
```

---

=== Component: Daisy::Feedback::ProgressComponent
Group: Feedback
Title: Progress Bars
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::ProgressComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/progress_component.rb

Description:
 Progress bars are used to indicate the progress of a process. 

API Signature:
- daisy_progress

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::AlertComponent
- Daisy::Feedback::LoadingComponent
- Daisy::Feedback::RadialProgressComponent
- Daisy::Feedback::SkeletonComponent
- Daisy::Feedback::ToastComponent

Rails Integration:
- Base Class: Daisy::Feedback::ProgressComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_progress

Examples:

-- Example: Basic Bars
Description:
Progress bars utilize `value` and a `max` attributes to set the progress and can have various colors. By default, they take up the full width of their parent container. - `value` defaults to `nil` if not provided (for indeterminate bars) - `max` defaults to `100` if not provided to mimic percentages

Code (HAML):
```haml
- `value` defaults to `nil` if not provided (for indeterminate bars)
- `max` defaults to `100` if not provided to mimic percentages



  .flex.flex-col.gap-4.w-56
    = daisy_progress(value: 25)

    = daisy_progress(css: "progress-primary", value: 50, max: 100)

    = daisy_progress(css: "progress-secondary", value: 75, max: 100)

    = daisy_progress(css: "progress-accent", value: 100, max: 100)
```

-- Example: Indeterminate Bars
Description:
Indeterminate progress bars are used when the progress is unknown. They animate to indicate that a process is currently happening.

Code (HAML):
```haml
.flex.flex-col.gap-4.w-56
    = daisy_progress(css: "progress-info")

    = daisy_progress(css: "progress-success [animation-delay:250ms]!")

    = daisy_progress(css: "progress-warning [animation-delay:500ms]!")

    = daisy_progress(css: "progress-error [animation-delay:750ms]!")
```

---

=== Component: Daisy::Feedback::RadialProgressComponent
Group: Feedback
Title: Radial Progress Bars
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::RadialProgressComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/radial_progress_component.rb

Description:
 Radial progress bars are used to indicate the progress of a process, in a  circular fasion. 

API Signature:
- daisy_radial

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::AlertComponent
- Daisy::Feedback::LoadingComponent
- Daisy::Feedback::ProgressComponent
- Daisy::Feedback::SkeletonComponent
- Daisy::Feedback::ToastComponent

Rails Integration:
- Base Class: Daisy::Feedback::RadialProgressComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_radial

Examples:

-- Example: Basic Radials
Description:
Radial progress bars utilize a `value` attribute to set the progress and can have various colors / sizes, along with content inside. The max is always set to 100 due to the way they are rered, so `value` should always be a percentage of the bar that is filled.

Code (HAML):
```haml
= daisy_radial(value: 66) do
    66%
```

-- Example: Fancy Radials
Description:
The content doesn't have to be just text!

Code (HAML):
```haml
= daisy_radial(value: 68) do
    = hero_icon("beaker", css: "size-8 text-primary")

  = daisy_radial(value: 52, css: "text-success") do
    52%

  = daisy_radial(value: 13, css: "text-error text-3xl") do
    😢
```

-- Example: Controlling Size & Color
Description:
You can also control the size, thickness, and color of the radial progress. - `size` defaults to `5rem` and **must** include units - `thickness` defaults to `calc(size / 10)` and **must** include units

Code (HAML):
```haml
- `size` defaults to `5rem` and **must** include units
- `thickness` defaults to `calc(size / 10)` and **must** include units



  = daisy_radial(value: 19, size: "15rem", thickness: "4px", css: "bg-primary text-primary-content text-3xl border-accent border-8") do
    19%
```

---

=== Component: Daisy::Feedback::SkeletonComponent
Group: Feedback
Title: Skeletons
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::SkeletonComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/skeleton_component.rb

Description:
 Skeletons are used to show a placeholder for content that is loading or  being fetched. They are often used to give the user an idea of what the  content will look like before it is loaded. 

API Signature:
- daisy_skeleton

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::AlertComponent
- Daisy::Feedback::LoadingComponent
- Daisy::Feedback::ProgressComponent
- Daisy::Feedback::RadialProgressComponent
- Daisy::Feedback::ToastComponent

Rails Integration:
- Base Class: Daisy::Feedback::SkeletonComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_skeleton

Examples:

-- Example: Basic Skeletons
Description:
Skeletons can take on various shapes and sizes that you define.

Code (HAML):
```haml
.flex.flex-col.gap-4.w-72
    .flex.items-center.gap-4
      = daisy_skeleton(css: "size-24 rounded-full")

      = daisy_skeleton(css: "w-36 h-20")

    - 3.times do |i|
      - width = i.even? ? "w-36" : "w-48"

      = daisy_skeleton(css: "#{width} h-5")
```

-- Example: Component Skeletons
Description:
You can also use skeletons to show placeholders for components by adding the `skeleton` class to many existing components.

Code (HAML):
```haml
.flex.flex-col.gap-8
    .flex.items-center.gap-8
      = daisy_badge(css: "badge-lg skeleton text-base-content/50") do
        Loading...

      .w-12.md:w-48

      = daisy_button(css: "skeleton text-transparent") do
        Loading...

      = daisy_button(css: "skeleton text-transparent") do
        Loading...

    = daisy_alert(css: "skeleton")

    = daisy_chat do |chat|
      - chat.with_avatar(wrapper_css: "skeleton")

      - chat.with_bubble(css: "skeleton text-transparent") do
        Here is text that won't be displayed...

    = daisy_chat do |chat|
      - chat.with_avatar(wrapper_css: "skeleton")

      - chat.with_bubble(css: "skeleton text-transparent") do
        Here is a lot more text that won't be displayed and people can't see...

    = daisy_chat(css: "chat-end") do |chat|
      - chat.with_avatar(wrapper_css: "skeleton")

      - chat.with_bubble(css: "skeleton text-transparent") do
        Here is some more text that won't be displayed...
```

---

=== Component: Daisy::Feedback::ToastComponent
Group: Feedback
Title: Toasts
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::ToastComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/toast_component.rb

Description:
 Toasts are used to show a message to the user that is not critical, but  important. They are often used to show a message that is not part of the  main content flow and can be dismissed by the user. 

API Signature:
- daisy_toast

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::AlertComponent
- Daisy::Feedback::LoadingComponent
- Daisy::Feedback::ProgressComponent
- Daisy::Feedback::RadialProgressComponent
- Daisy::Feedback::SkeletonComponent

Rails Integration:
- Base Class: Daisy::Feedback::ToastComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_toast

Examples:

-- Example: Basic Toasts
Description:
The Toast component is a simple wrapper that positions it's contents at various spots on the page, usually in the bottom right corner.

Code (HAML):
```haml
= daisy_toast(css: "z-10") do
    = daisy_alert(icon: "check-circle", css: "alert-success text-white") do
      Yay! Something went well!

    = daisy_alert(icon: "exclamation-circle", css: "alert-error text-white") do
      Uh oh! Something went wrong...
```

---

=== Component: Daisy::Feedback::TooltipComponent
Group: Feedback
Title: Tooltips
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Feedback::TooltipComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/feedback/tooltip_component.rb

Description:
Additionally, we offer the `daisy_tooltip` component to wrap an entire component, or any block of HTML, in a tooltip. This is also aliased as `daisy_tip` for convenience. 

API Signature:
- daisy_tooltip
- daisy_tip

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Feedback::AlertComponent
- Daisy::Feedback::LoadingComponent
- Daisy::Feedback::ProgressComponent
- Daisy::Feedback::RadialProgressComponent
- Daisy::Feedback::SkeletonComponent

Rails Integration:
- Base Class: Daisy::Feedback::TooltipComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_tooltip
- daisy_tip

Examples:

-- Example: Component Tooltips
Description:
Tooltips can be added to many components by setting the `tip` attribute or by adding the `tooltip` class and setting the `data-tip` attribute to the text you want to display.

Code (HAML):
```haml
.flex.flex-col.gap-12
    .flex.items-center.justify-center.gap-8
      - # Just pass the `tip` argument to any component that supports it!

      = daisy_button(title: "Hover Me", css: "btn-primary", tip: "This is a tooltip!")

      = daisy_badge(title: "Hover Me", css: "badge-secondary", tip: "This is a badge tooltip!")

      = daisy_link(title: "Hover Me", css: "text-accent", tip: "This is a link tooltip!")

    - # You can also use the `tooltip` class / `data-tip` attribute directly

    = daisy_alert(css: "tooltip tooltip-bottom tooltip-success", html: { data: { tip: "This is an alert tooltip!" }}) do
      Here is an alert with a bottom tooltip!

    = daisy_chat do |chat|
      - chat.with_avatar(css: "tooltip-left tooltip-info", tip: "This is a left avatar tooltip!", src: image_path("avatars/lady-smiling-3.jpg"))

      - chat.with_bubble do
        - # Note that we can't add it directly to the bubble because it won't

        - # render properly. So we render it on the text instead and add some

        - # margin to make sure it's not inside of the bubble.

        .tooltip.tooltip-right.tooltip-primary.before:ml-4.after:ml-4{ data: { tip: "This is a right chat bubble tooltip!" } }
          Here is some text that also has a tooltip!
```

-- Example: Wrapper Tooltips
Description:
Sometimes, you may need to wrap the entire component in a tooltip. For this, we offer the very basic `daisy_tooltip` (or `daisy_tip`) component which has a `tip` argument to simplify your code a bit.

Code (HAML):
```haml
.flex.flex-col.gap-8
    - # Manual-style HAML tootlip

    .tooltip{ data: { tip: "This is a progress tooltip!" } }
      = daisy_progress(value: 42, css: "w-56")

    - # Standard helper method

    = daisy_tooltip("This is a radial tooltip!", css: "flex justify-center") do
      = daisy_radial(value: 58) do
        58%

    - # Aliased helper method

    = daisy_tip(css: "tooltip-bottom tooltip-info", tip: "We're loading a skeleton tooltip!") do
      = daisy_skeleton(css: "w-56 h-24")
```

---

=== Component: Daisy::Layout::DividerComponent
Group: Layout
Title: Dividers
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::DividerComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/divider_component.rb

Description:
Dividers are used to separate content in a meaningful way. They can be used to separate different sections of a page or to highlight a specific piece of content. They can be used both horizontally and vertically, and can include content if desired. 

API Signature:
- daisy_divider

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DrawerComponent
- Daisy::Layout::FooterComponent
- Daisy::Layout::HeroComponent
- Daisy::Layout::IndicatorComponent
- Daisy::Layout::JoinComponent

Rails Integration:
- Base Class: Daisy::Layout::DividerComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_divider

Examples:

-- Example: Basic Dividers
Description:
The basic divider is a simple horizontal or vertical line that can be used to separate content.

Code (HAML):
```haml
.w-full{ class: "md:w-1/3" }
    - card_css = "border border-base-300 bg-base-100 shadow-xl text-center"

    = daisy_card(css: card_css) do
      Top Card

    = daisy_divider do
      OR

    = daisy_card(css: card_css) do
      Bottom Card

  .flex.grow
    - card_css = "h-48 border border-base-300 bg-base-100 shadow-xl"

    = daisy_card(css: card_css, body_css: "justify-center") do
      Left Card

    = daisy_divider(css: "divider-horizontal") do
      OR

    = daisy_card(css: card_css, body_css: "justify-center") do
      Right Card
```

-- Example: Colored Dividers
Description:
Dividers can be colored to match the theme of the page or to highlight specific content.

Code (HAML):
```haml
.w-full{ class: "md:w-1/2" }
    = daisy_divider do
      Default Divider

    = daisy_divider(css: "divider-neutral") do
      Neutral

    = daisy_divider(css: "divider-primary") do
      Primary

    = daisy_divider(css: "divider-secondary") do
      Secondary

    = daisy_divider(css: "divider-accent") do
      Accent

    = daisy_divider(css: "divider-success") do
      Success

    = daisy_divider(css: "divider-warning") do
      Warning

    = daisy_divider(css: "divider-info") do
      Info

    = daisy_divider(css: "divider-error") do
      Error
```

---

=== Component: Daisy::Layout::DrawerComponent
Group: Layout
Title: Drawers
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::DrawerComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/drawer_component.rb

Description:
do The `relative / absolute` and the `h-48` classes allow the drawer to rer properly inside the example preview box instead of the whole screen. 

API Signature:
- daisy_drawer

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DividerComponent
- Daisy::Layout::FooterComponent
- Daisy::Layout::HeroComponent
- Daisy::Layout::IndicatorComponent
- Daisy::Layout::JoinComponent

Rails Integration:
- Base Class: Daisy::Layout::DrawerComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_drawer

Examples:

-- Example: Basic Drawer
Description:
The basic drawer slides in from the left side of the screen.

Code (HAML):
```haml
.relative.w-full.h-48
    = daisy_drawer do |drawer|
      - drawer.with_sidebar(css: "absolute h-48") do
        .bg-base-100.p-4.w-40.h-48
          Hello sidebar!

      = daisy_button(tag_name: "label", css: "m-8 btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
```

-- Example: Right Drawer
Description:
The right drawer slides in from the right side of the screen. do Drawers are not designed to work with multiple on the page, so this example behaves a bit weirdly on desktop, showing both drawers.

Code (HAML):
```haml
.w-full.h-48
    = daisy_drawer(css: "drawer-end") do |drawer|
      - drawer.with_sidebar do
        - # The calc accounts for the top nav bar

        .w-48.bg-base-100.mt-16.p-4{ class: "h-[calc(100%-4rem)]" }
          Right sidebar!

      = daisy_button(tag_name: "label", css: "m-8 btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
```

-- Example: Advanced Drawer
Description:
The advanced drawer slides in from the left side of the screen and has multiple ways to close it, along with some extra styling.

Code (HAML):
```haml
.relative.w-full.h-48
    = daisy_drawer do |drawer|
      - drawer.with_sidebar(css: "absolute h-48") do
        .bg-base-100.p-4.h-48
          .flex.items-center.justify-between.gap-8
            %h1.text-lg
              Sidenav Menu

            = daisy_button(tag_name: "label", css: "btn-sm btn-ghost", html: { for: drawer.id }) do
              = hero_icon(icon: "x-circle", css: "size-4")

          %ul.mt-4
            %li link_to "Home", "/", class: "link-hover"

            %li link_to "API Docs", "/api-docs", class: "link-hover", target: "_blank"

            %li link_to "GitHub", "https://github.com/profoundry-us/loco_motion", class: "link-hover", target: "_blank"

      .flex.items-center.justify-center.h-48
        
          %p.my-4
            Click the button below to open the drawer!

          = daisy_button(tag_name: "label", css: "btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
```

---

=== Component: Daisy::Layout::FooterComponent
Group: Layout
Title: Footers
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::FooterComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/footer_component.rb

Description:
Footers are used to provide additional information about a page or site. They are vertical by default, but can be made horizontal using the `footer-horizontal` class. 

API Signature:
- daisy_footer

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DividerComponent
- Daisy::Layout::DrawerComponent
- Daisy::Layout::HeroComponent
- Daisy::Layout::IndicatorComponent
- Daisy::Layout::JoinComponent

Rails Integration:
- Base Class: Daisy::Layout::FooterComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_footer

Examples:

-- Example: Basic Nav Footer (Vertical)
Description:
The basic nav footer is vertical by default, which works well for most mobile-first designs.

Code (HAML):
```haml
= daisy_footer(css: "max-w-64 bg-neutral text-neutral-content p-10") do
    %nav
      %h6.footer-title
        LocoMotion

      = link_to "Home", "/", class: "link-hover"

      = link_to "API Docs", "/api-docs", class: "link-hover", target: "_blank"

      = link_to "GitHub", "https://github.com/profoundry-us/loco_motion", class: "link-hover", target: "_blank"

    %nav
      %h6.footer-title
        My Neat Stuff

      = link_to "Abilene Smalltalk", "https://abilenesmalltalk.com/", class: "link-hover", target: "_blank"

      = link_to "Create. Connect. Heal.", "https://profoundry.us", class: "link-hover", target: "_blank"

      = link_to "Social Marketplace Secrets", "https://sm-secrets.com/", class: "link-hover", target: "_blank"

    %nav
      %h6.footer-title
        Other Neat Stuff

      = link_to "Ruby", "https://ruby-lang.org", class: "link-hover", target: "_blank"

      = link_to "Rails", "https://rubyonrails.org/", class: "link-hover", target: "_blank"

      = link_to "EGS", "https://www.egscomics.com/", class: "link-hover", target: "_blank"
```

-- Example: Horizontal Footer
Description:
Use the `footer-horizontal` class to make the footer horizontal. You can also use responsive variants like `lg:footer-horizontal` to make it horizontal only on larger screens.

Code (HAML):
```haml
= daisy_footer(css: "max-w-[1000px] mx-32 bg-base-200 text-base-content p-10 lg:footer-horizontal") do
    %nav
      %h6.footer-title
        Products

      = link_to "Features", "#", class: "link-hover"

      = link_to "Pricing", "#", class: "link-hover"

      = link_to "Enterprise", "#", class: "link-hover"

    %nav
      %h6.footer-title
        Support

      = link_to "Documentation", "#", class: "link-hover"

      = link_to "Help Center", "#", class: "link-hover"

      = link_to "Contact", "#", class: "link-hover"

    %nav
      %h6.footer-title
        Legal

      = link_to "Privacy", "#", class: "link-hover"

      = link_to "Terms", "#", class: "link-hover"

      = link_to "Cookie Policy", "#", class: "link-hover"
```

-- Example: Center-Aligned Footer
Description:
A simple footer with centered content, perfect for copyright notices or minimal information.

Code (HAML):
```haml
= daisy_footer(css: "max-w-[1000px] mx-32 justify-center p-4 bg-neutral text-neutral-content") do
    .text-xs
      ="Copyright &copy; #{Date.today.year} LocoMotion."

      All rights reserved.
```

---

=== Component: Daisy::Layout::HeroComponent
Group: Layout
Title: Heroes
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::HeroComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/hero_component.rb

Description:
Heroes are used to provide a large, eye-catching introduction to a page or site. They are responsive by default and will stack on smaller screens. 

API Signature:
- daisy_hero

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DividerComponent
- Daisy::Layout::DrawerComponent
- Daisy::Layout::FooterComponent
- Daisy::Layout::IndicatorComponent
- Daisy::Layout::JoinComponent

Rails Integration:
- Base Class: Daisy::Layout::HeroComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_hero

Examples:

-- Example: Basic Hero
Description:
The basic hero is a simple hero with a title and a subtitle.

Code (HAML):
```haml
= daisy_hero(css: "max-w-[1000px] mx-16 lg:mx-32 bg-base-200 text-center") do
    - # Heroes display their children in a flex column by default

    
      %h1.text-5xl.font-bold
        Hello, World!

      %p.my-6
        Welcome to the world of LocoMotion.

      = daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")
```

-- Example: Heroes with Images
Description:
You can add an image to the hero by making it the first or last child. You can also change the layout of the hero by passing a `content_wrapper_css` to make it responsive or add other styling.

Code (HAML):
```haml
= daisy_hero(css: "block max-w-[1000px] mx-16 py-8 lg:mx-32 bg-base-200") do
    %img.h-40.rounded{ src: image_path('landscapes/mountain-river.jpg'), alt: "Beautiful Landscape" }

    
      %h1.text-5xl.font-bold
        Hello, World!

      %p.my-6
        Welcome to the world of LocoMotion.

      = daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")

  = daisy_hero(css: "block max-w-[1000px] mx-16 py-8 lg:mx-32 bg-base-200") do
    
      %h1.text-5xl.font-bold
        Hello, World!

      %p.my-6
        Welcome to the world of LocoMotion.

      = daisy_button(css: "btn btn-primary", title: "Get Started", href: "/")

    %img.h-40.rounded{ src: image_path('landscapes/mountain-river.jpg'), alt: "Beautiful Landscape" }
```

-- Example: Hero with Overlay
Description:
The Hero component provides an `overlay` slot allowing you to add a semi-transparent background to the hero and apply other effects (such as a blur).

Code (HAML):
```haml
- image = image_path("landscapes/mountain-river.jpg")

  - fix_for_v5_bug = "z-0"

  = daisy_hero(css: "max-w-[1000px] mx-16 lg:mx-32 bg-base-200 min-h-96", content_wrapper_css: fix_for_v5_bug, html: { style: "background-image: url('#{image}')" }) do |hero|
    - hero.with_overlay(css: "bg-black/50 backdrop-blur-xs")

    .text-white
      %h1.text-5xl.font-bold
        Hello, World!

      %p.my-6
        Welcome to the world of LocoMotion.

      = daisy_button(css: "btn btn-accent", title: "Get Started", href: "/")
```

---

=== Component: Daisy::Layout::IndicatorComponent
Group: Layout
Title: Indicators
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::IndicatorComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/indicator_component.rb

Description:
Indicators wrap other elements and provide a visual cue that something requires the user's attention. 

API Signature:
- daisy_indicator

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DividerComponent
- Daisy::Layout::DrawerComponent
- Daisy::Layout::FooterComponent
- Daisy::Layout::HeroComponent
- Daisy::Layout::JoinComponent

Rails Integration:
- Base Class: Daisy::Layout::IndicatorComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_indicator

Examples:

-- Example: Basic Indicator
Description:
By default, the indicator is positioned in the top right corner.

Code (HAML):
```haml
= daisy_indicator do |indicator|
    - indicator.with_item do
      = daisy_badge(title: "8", css: "badge-secondary text-xl")

    = daisy_avatar(wrapper_css: "rounded-xl", src: image_path("avatars/lady-smiling-2.jpg"))

  = daisy_indicator do |indicator|
    - indicator.with_item do
      = daisy_badge(title: "New!", css: "badge-accent")

    = daisy_button(title: "Checkout", left_icon: "shopping-cart")
```

-- Example: Different Positions
Description:
You can position the indicator in all of the usual places, and indicators can contain multiple items. Additionally, you can apply many of the DaisyUI classes directly to the indicator items, which might be required for the positioning to work correctly.

Code (HAML):
```haml
- vertical = ["indicator-top", "indicator-middle", "indicator-bottom"]

  - horizontal = ["indicator-start", "indicator-center", "indicator-end"]

  = daisy_indicator do |indicator|
    - vertical.each do |v|
      - horizontal.each do |h|
        - title = "#{v.split("-").last.capitalize} #{h.split("-").last.capitalize}"

        - indicator.with_item(css: "badge badge-secondary #{v} #{h}") do
          = title

    .w-96.h-48.bg-base-200
```

---

=== Component: Daisy::Layout::JoinComponent
Group: Layout
Title: Joins
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::JoinComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/join_component.rb

Description:
 Joins allow you to combine multiple components into a singular, joined,  element. This is useful for components like buttons, inputs with symbols,  and many more. 

API Signature:
- daisy_join

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DividerComponent
- Daisy::Layout::DrawerComponent
- Daisy::Layout::FooterComponent
- Daisy::Layout::HeroComponent
- Daisy::Layout::IndicatorComponent

Rails Integration:
- Base Class: Daisy::Layout::JoinComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_join

Examples:

-- Example: Button Joins
Description:
Buttons can be joined with other components to create a single, cohesive element. do You **must** manually add the `.join-item` CSS class to the items you want to be joined since this could be complicated to do automatically in many use-cases and would almost certainly cause rering issues.

Code (HAML):
```haml
= daisy_join do |join|
    - join.with_item do
      = daisy_button(title: "Start", css: "join-item")

    - join.with_item do
      = daisy_button(title: "Center", css: "join-item")

    - join.with_item do
      = daisy_button(title: "End", css: "join-item")

  = daisy_join do |join|
    - join.with_item do
      = daisy_button(icon: "bars-3-bottom-left", css: "join-item")

    - join.with_item do
      = daisy_button(icon: "bars-3", css: "join-item")

    - join.with_item do
      = daisy_button(icon: "bars-3-bottom-right", css: "join-item")
```

-- Example: Vertical Joins
Description:
You can also join elements vertically.

Code (HAML):
```haml
= daisy_join(css: "join-vertical min-w-32") do |join|
    - join.with_item do
      = daisy_button(title: "Top", css: "w-full join-item")

    - join.with_item do
      = daisy_button(title: "Middle", css: "w-full join-item btn-primary")

    - join.with_item do
      = daisy_button(title: "Bottom", css: "w-full join-item")
```

---

=== Component: Daisy::Layout::MaskComponent
Group: Layout
Title: Masks
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::MaskComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/mask_component.rb

Description:
Masks allow you to create a variety of shapes and patterns! Masks are **NOT** a full component, but rather a set of CSS classes that can be applied to many existing elements. 

Helpers:
- (No helper methods defined)

Examples:

-- Example: Basic Masks
Description:
Masks can be applied to many elements, and can be combined with other classes to create interesting effects.

Code (HAML):
```haml
- masks = ["mask-squircle", "mask-heart", "mask-hexagon", "mask-hexagon-2", "mask-decagon", "mask-pentagon", "mask-diamond", "mask-square", "mask-circle", "mask-star", "mask-star-2", "mask-triangle", "mask-triangle-2", "mask-triangle-3", "mask-triangle-4"]

  .grid.grid-cols-4.gap-4
    - masks.each do |mask|
      = daisy_tip(mask) do
        = daisy_avatar(src: image_path("avatars/lady-smiling-2.jpg"), wrapper_css: "rounded-none mask #{mask}")
```

-- Example: Masked Text
Description:
Masks can also be applied to HTML elements. Masks apply the `inline-block` display, so you may need to override that for certain cases.

Code (HAML):
```haml
.flex.flex-col.justify-center.gap-8
    = daisy_button(left_icon: "shopping-bag", css: "btn-primary flex mask mask-diamond animate-pulse")

    .flex.items-center.justify-center.size-20.bg-red-600.hover:bg-green-600.text-white.mask.mask-decagon
      STOP
```

---

=== Component: Daisy::Layout::StackComponent
Group: Layout
Title: Stacks
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Layout::StackComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/layout/stack_component.rb

Description:
Stacks provide a 3 dimensional effect to your content. This can be helpful for displaying lots of notifications or other content in a small space. 

API Signature:
- daisy_stack

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Layout::DividerComponent
- Daisy::Layout::DrawerComponent
- Daisy::Layout::FooterComponent
- Daisy::Layout::HeroComponent
- Daisy::Layout::IndicatorComponent

Rails Integration:
- Base Class: Daisy::Layout::StackComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_stack

Examples:

-- Example: Basic Stack
Description:
A Stack is a wrapper around other elements, making it's children appear on top of each other. This example uses a slightly transparent background and some clever padding to show the effect.

Code (HAML):
```haml
- card_css = "bg-base-100/80 border-base-300 border shadow-lg text-center"

  = daisy_stack do
    = daisy_card(css: card_css + " pb-2") do
      Top Stack

    = daisy_card(css: card_css + " py-1") do
      Middle Stack

    = daisy_card(css: card_css + " pt-2") do
      Bottom Stack
```

-- Example: Animated Stack
Description:
You can also do some slick effects with a library like '!' do link_to "Anime.js", "https://animejs.com/", target: "_blank"

Code (HAML):
```haml

```

-- Example: Stack Positions
Description:
DaisyUI 5 introduces directional stacking with `stack-top`, `stack-bottom`, `stack-start`, and `stack-` CSS classes. These allow you to position the stacked elements in different directions.

Code (HAML):
```haml
.grid.grid-cols-2.gap-6
    .space-y-2
      %p.font-medium.text-center stack-top

      .stack.stack-top.size-28
        - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"

        = daisy_card(css: card_css + " bg-primary text-white") do
          1

        = daisy_card(css: card_css + " bg-secondary text-white") do
          2

        = daisy_card(css: card_css + " bg-accent text-white") do
          3

    .space-y-2
      %p.font-medium.text-center stack-bottom

      .stack.stack-bottom.size-28
        - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"

        = daisy_card(css: card_css + " bg-primary text-white") do
          1

        = daisy_card(css: card_css + " bg-secondary text-white") do
          2

        = daisy_card(css: card_css + " bg-accent text-white") do
          3

    .space-y-2
      %p.font-medium.text-center stack-start

      .stack.stack-start.size-28
        - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"

        = daisy_card(css: card_css + " bg-primary text-white") do
          1

        = daisy_card(css: card_css + " bg-secondary text-white") do
          2

        = daisy_card(css: card_css + " bg-accent text-white") do
          3

    .space-y-2
      %p.font-medium.text-center stack-end

      .stack.stack-end.size-28
        - card_css = "border-base-300 border shadow-lg text-center flex items-center justify-center"

        = daisy_card(css: card_css + " bg-primary text-white") do
          1

        = daisy_card(css: card_css + " bg-secondary text-white") do
          2

        = daisy_card(css: card_css + " bg-accent text-white") do
          3
```

-- Example: CSS Stack
Description:
The Stack component simply applies the `stack` CSS class, which you can also use directly. You can also add spacing between stacked elements using gap utilities like `gap-3`. Adjust the slider below to see how different gap values affect the stack.

Code (HAML):
```haml
.space-y-4{ data: { controller: "stack-gap" } }
    .flex.items-center.gap-4
      %span.text-sm.min-w-16 Gap size:

      %span.badge.badge-primary{ data: { stack_gap_target: "label" } } 3

      %input.range.range-primary{
        type: "range",
        min: "1",
        max: "5",
        value: "3",
        data: { stack_gap_target: "slider", action: "input->stack-gap#updateGap" }
        }

    .stack.w-96{ data: { stack_gap_target: "stack", class: "gap-3" } }
      %img{ src: image_path("landscapes/beach.jpg") }

      %img{ src: image_path("landscapes/desert.jpg") }

      %img{ src: image_path("landscapes/forest.jpg") }
```

---

=== Component: Daisy::Mockup::BrowserComponent
Group: Mockup
Title: Browsers
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Mockup::BrowserComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/mockup/browser_component.rb

Description:
 The Browser component is a simple mockup that looks and feels like a user's  web browser. This can be useful for creating mockups of web applications or  to showcase your own website in a more realistic setting. 

API Signature:
- daisy_browser

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Mockup::CodeComponent
- Daisy::Mockup::DeviceComponent
- Daisy::Mockup::FrameComponent

Rails Integration:
- Base Class: Daisy::Mockup::BrowserComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_browser

Examples:

-- Example: Basic Browser
Description:
A basic browser has very minimal styling and can include an optional toolbar.

Code (HAML):
```haml
= daisy_browser(css: "w-full max-w-4xl border border-base-300") do |browser|
    - browser.with_toolbar do
      %input.input.input-bordered{ placeholder: "https://loco-motion.io" }

    .border-t.border-base-300.px-4.py-16.text-center
      This is the content of the browser. You can put anything you want here.
```

-- Example: Styled Browser
Description:
You can apply whatever styling you wish to make the browser stand out more.

Code (HAML):
```haml
= daisy_browser(css: "w-full max-w-4xl bg-accent border border-accent") do |browser|
    - browser.with_toolbar do
      %input.input.input-bordered.border-accent-content{ class: "ml-4! pl-2! w-full!", placeholder: "https://loco-motion.io" }

    .bg-base-200.border-t.border-accent.px-4.py-16.text-center
      This browser mockup is very easy to style and make look however you want!
```

---

=== Component: Daisy::Mockup::CodeComponent
Group: Mockup
Title: Code Blocks
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Mockup::CodeComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/mockup/code_component.rb

Description:
 Code blocks are a great way to display code snippets in your site or  documentation. They can be used to show examples, provide context, or call  out something important. 

API Signature:
- daisy_code

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Mockup::BrowserComponent
- Daisy::Mockup::DeviceComponent
- Daisy::Mockup::FrameComponent

Rails Integration:
- Base Class: Daisy::Mockup::CodeComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_code

Examples:

-- Example: Basic Code Block
Description:
A basic code block is just a simple block of code with no additional styling. You can pass the `prefix` attribute to add a prefix to the code block.

Code (HAML):
```haml
= daisy_code(prefix: "$") do
    echo "Hello, world!"
```

-- Example: Multi-line Code Block
Description:
You can also create multi-line code blocks by calling the `with_line` slot multiple times.

Code (HAML):
```haml
= daisy_code do |code|
    - code.with_line(prefix: "$") do
      yarn add @profoundry-us/loco_motion

    - code.with_line(prefix: ">", css: "text-warning") do
      Installing...

    - code.with_line(prefix: ">", css: "text-success") do
      Done!
```

-- Example: Code Block with Language
Description:
You can also pass full code blocks by utilizing the `:plain` filter provided by HAML. do You cannot use the `prefix` option and the `:plain` filter at the same time as we have to apply some special styling

Code (HAML):
```haml
= daisy_code do
    def hello_world
  puts "Hello, world!"
```

-- Example: Numbered / Highlighted Lines
Description:
You can also highlight specific lines in your code block by utilizing standard Tailwind classes.

Code (HAML):
```haml
= daisy_code do |code|
    - code.with_line(prefix: "1") do
      Here is the first line

    - code.with_line(prefix: "2") do
      Here is the second line

    - code.with_line(prefix: "3", css: "bg-warning text-warning-content") do
      Here is the third line

    - code.with_line(prefix: "4") do
      Here is the fourth line

    - code.with_line(prefix: "5", css: "bg-green-400 text-purple-600") do
      Here is the fifth line
```

---

=== Component: Daisy::Mockup::DeviceComponent
Group: Mockup
Title: Devices
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Mockup::DeviceComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/mockup/device_component.rb

Description:
Device mockups are a great way to showcase your designs in a realistic way! 

API Signature:
- daisy_device

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Mockup::BrowserComponent
- Daisy::Mockup::CodeComponent
- Daisy::Mockup::FrameComponent

Rails Integration:
- Base Class: Daisy::Mockup::DeviceComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_device

Examples:

-- Example: Phone
Description:
You can use the `daisy_device` component to display a phone mockup.

Code (HAML):
```haml
= daisy_device(css: "mockup-phone", display_css: "overflow-auto") do
    .flex.flex-col.gap-4.p-4.pt-12.pb-8.bg-base-100
      .text-center.text-2xl.font-bold
        Beautiful Landscapes

      = image_tag("landscapes/beach.jpg", class: "rounded-lg")

      = image_tag("landscapes/desert.jpg", class: "rounded-lg")

      = image_tag("landscapes/forest.jpg", class: "rounded-lg")

      = image_tag("landscapes/mountain-river.jpg", class: "rounded-lg")
```

-- Example: Tablet
Description:
You can also hide the camera by passing `show_camera: false` to the component and add any colors you want to the device.

Code (HAML):
```haml
= daisy_device(css: "mockup-phone border-red-600", display_css: "overflow-auto w-[736px] h-[414px]", show_camera: false) do
    .flex.flex-col.gap-4.p-4.bg-base-100
      .text-center.text-2xl.font-bold
        Beautiful Landscapes

      = image_tag("landscapes/beach.jpg", class: "rounded-xl")

      = image_tag("landscapes/desert.jpg", class: "rounded-xl")

      = image_tag("landscapes/forest.jpg", class: "rounded-xl")

      = image_tag("landscapes/mountain-river.jpg", class: "rounded-xl")
```

---

=== Component: Daisy::Mockup::FrameComponent
Group: Mockup
Title: Frames
API URL: https://loco-motion.profoundry.us/api-docs
Examples URL: https://loco-motion.profoundry.us/examples/Daisy::Mockup::FrameComponent
File: https://github.com/profoundry-us/loco_motion/blob/main/app/components/daisy/mockup/frame_component.rb

Description:
 Frames showcase your work as if they were displayed in a window. This is  very similar to the existing  component_link("Browser", "Daisy::Mockup::BrowserComponent")  component but without some of the additional styling such as the browser  toolbar. 

API Signature:
- daisy_frame

Initialize Method:
  initialize()

Common Parameters:
- css (String): CSS classes for styling
- html (Hash): HTML attributes

Related Components:
- Daisy::Mockup::BrowserComponent
- Daisy::Mockup::CodeComponent
- Daisy::Mockup::DeviceComponent

Rails Integration:
- Base Class: Daisy::Mockup::FrameComponent
- ViewComponent: Yes
- Includes: LocoMotion::BaseComponent::GeneratedSlotMethods

Helpers:
- daisy_frame

Examples:

-- Example: Basic Frame
Description:
A basic frame is just a simple frame with no additional styling.

Code (HAML):
```haml
= daisy_frame(css: "w-full max-w-4xl border border-base-300") do |frame|
    .border-t.border-base-300.px-4.py-16.text-center
      This is the content of the browser. You can put anything you want here.

      .mt-4
        = image_tag("landscapes/desert.jpg", class: "max-w-lg mx-auto rounded-xl")
```

-- Example: Styled Frame
Description:
You can style the frames however you like!

Code (HAML):
```haml
= daisy_frame(css: "w-full max-w-4xl bg-purple-200 border border-purple-600") do |frame|
    .bg-base-100.border-t.border-purple-300.px-4.py-16.text-center
      = image_tag("loco-logo.png", class: "max-w-xs mx-auto")

      %p
        This is the content of the browser. You can put anything you want here.

      .mt-4
        = image_tag("landscapes/desert.jpg", class: "max-w-lg mx-auto rounded-xl")
```

---