loco_motion-rails 0.0.7 → 0.0.8

data/app/components/daisy/data_display/timeline_event_component.rb

@@ -1,3 +1,27 @@
+#
+# A component for rendering individual events within a timeline. Each event can
+# have three sections: start (typically a date or time), middle (an icon or
+# marker), and end (the event description).
+#
+# @part start The container for the start content (e.g., date/time).
+# @part middle The container for the middle content.
+# @part middle_icon Container for a simple icon when not using custom middle
+#   content.
+# @part end The container for the end content (e.g., description).
+# @part separator The line connecting this event to the next one.
+#
+# @slot start Custom content for the start section. You can also provide
+#   simple text via the start option.
+#
+# @slot middle Custom content for the middle section. You can also provide
+#   simple text via the middle option, or an icon via the middle_icon option.
+#
+# @slot end Custom content for the end section. You can also provide simple
+#   text via the end option.
+#
+# @note The middle and middle_icon options are mutually exclusive. If both are
+#   provided, middle takes precedence.
+#
 class Daisy::DataDisplay::TimelineEventComponent < LocoMotion::BaseComponent
   renders_one :start, LocoMotion::BasicComponent.build(css: "timeline-start")
   renders_one :middle, LocoMotion::BasicComponent.build(css: "timeline-middle")
@@ -6,7 +30,21 @@ class Daisy::DataDisplay::TimelineEventComponent < LocoMotion::BaseComponent
   define_parts :start, :middle, :middle_icon, :end, :separator
 
   #
-  # middle and middle_icon are mutually exclusive, middle takes presedence
+  # Creates a new timeline event component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws [String] :start Text to display in the start section. You can
+  #   also provide custom content using the start slot.
+  #
+  # @option kws [String] :middle Text to display in the middle section. You
+  #   can also provide custom content using the middle slot.
+  #
+  # @option kws [String] :middle_icon Name of a heroicon to display in the
+  #   middle section. Ignored if middle is provided.
+  #
+  # @option kws [String] :end Text to display in the end section. You can
+  #   also provide custom content using the end slot.
   #
   def initialize(*args, **kws, &block)
     super(*args, **kws, &block)

data/app/components/daisy/feedback/alert_component.rb

@@ -1,9 +1,54 @@
 #
-# The AlertComponent displays an important message to users.
+# The AlertComponent displays an important message to users. It can be used to
+# show information, success messages, warnings, or errors. Alerts can include
+# an optional icon at the start and customizable content.
+#
+# @part icon             [Heroicon] An optional icon displayed at the start of
+#   the alert. Uses the Heroicon system.
+#
+# @part content_wrapper  [HTML] A wrapper for the main content of the alert.
+#   This allows for proper spacing and alignment with the icon.
+#
+# @loco_example Basic Alert
+#   = daisy_alert do
+#     This is a standard alert message.
+#
+# @loco_example Alert with Icon
+#   = daisy_alert(icon: "information-circle", icon_html: { variant: :outline }) do
+#     Here's some important information!
+#
+# @loco_example Alert Types
+#   = daisy_alert(icon: "information-circle", css: "alert-info", icon_html: { variant: :outline }) do
+#     Information alert.
+#
+#   = daisy_alert(icon: "check-circle", css: "alert-success", icon_html: { variant: :outline }) do
+#     Success alert.
+#
+#   = daisy_alert(icon: "exclamation-triangle", css: "alert-warning", icon_html: { variant: :outline }) do
+#     Warning alert.
+#
+#   = daisy_alert(icon: "exclamation-circle", css: "alert-error", icon_html: { variant: :outline }) do
+#     Error alert.
 #
 class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
   define_parts :icon, :content_wrapper
 
+  #
+  # Creates a new Alert component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the alert.
+  #
+  # @option kws icon      [String] The name of the Heroicon to display at the
+  #   start of the alert.
+  #
+  # @option kws icon_html [Hash] Additional HTML attributes for the icon
+  #   element. Options include `variant: :outline` or `variant: :solid`.
+  #
+  # @option kws css      [String] Additional CSS classes for the alert. Use
+  #   `alert-info`, `alert-success`, `alert-warning`, or `alert-error` for
+  #   different alert types.
+  #
   def initialize(*args, **kws, &block)
     super
 

data/app/components/daisy/feedback/loading_component.rb

@@ -1,6 +1,45 @@
+#
+# The LoadingComponent displays an animated indicator to show that a process is
+# running in the background. It supports multiple animation styles and can be
+# customized with different colors and sizes.
+#
+# Includes the {LocoMotion::Concerns::TippableComponent} module to enable easy
+# tooltip addition.
+#
+# @loco_example Basic Loading Spinners
+#   = daisy_loading(css: "loading-spinner text-primary")
+#   = daisy_loading(css: "loading-dots text-secondary")
+#   = daisy_loading(css: "loading-ring text-accent")
+#
+# @loco_example Other Loading Styles
+#   = daisy_loader(css: "loading-ball text-info")
+#   = daisy_loader(css: "loading-bars text-success")
+#   = daisy_loader(css: "loading-infinity text-error")
+#
+# @note The helper method is also aliased as `daisy_loader` for better
+#   readability, but CSS classes must still use the `loading-*` prefix.
+#
 class Daisy::Feedback::LoadingComponent < LocoMotion::BaseComponent
   prepend LocoMotion::Concerns::TippableComponent
 
+  #
+  # Creates a new Loading component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the loader.
+  #
+  # @option kws css   [String] Additional CSS classes for the loader. Available
+  #   styles include: `loading-spinner`, `loading-dots`, `loading-ring`,
+  #   `loading-ball`, `loading-bars`, and `loading-infinity`. Can be combined
+  #   with color classes like `text-primary` or `text-success`.
+  #
+  # @option kws tip   [String] Optional tooltip text to display when hovering
+  #   over the loader. Added by the TippableComponent module.
+  #
+  def initialize(*args, **kws, &block)
+    super
+  end
+
   def before_render
     add_css(:component, "loading")
   end

data/app/components/daisy/feedback/progress_component.rb

@@ -1,5 +1,44 @@
+#
+# The ProgressComponent displays a horizontal bar that indicates the completion
+# status of a process. It can show determinate progress with a specific value
+# or indeterminate progress with an animated bar.
+#
+# The component renders as an HTML `<progress>` element and supports various
+# colors and styles through CSS classes.
+#
+# @loco_example Basic Progress Bars
+#   = daisy_progress(value: 25)
+#   = daisy_progress(css: "progress-primary", value: 50)
+#   = daisy_progress(css: "progress-secondary", value: 75)
+#   = daisy_progress(css: "progress-accent", value: 100)
+#
+# @loco_example Indeterminate Progress Bars
+#   = 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]")
+#
 class Daisy::Feedback::ProgressComponent < LocoMotion::BaseComponent
 
+  #
+  # Creates a new Progress component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the progress bar.
+  #
+  # @option kws value [Integer, nil] The current progress value. Set to `nil`
+  #   for an indeterminate progress bar that animates continuously. Defaults
+  #   to `nil`.
+  #
+  # @option kws max   [Integer] The maximum value for the progress bar.
+  #   Defaults to `100` to easily work with percentage values.
+  #
+  # @option kws css   [String] Additional CSS classes for the progress bar.
+  #   Available styles include: `progress-primary`, `progress-secondary`,
+  #   `progress-accent`, `progress-info`, `progress-success`,
+  #   `progress-warning`, and `progress-error`. Can be combined with utility
+  #   classes like `![animation-delay:250ms]` for staggered animations.
+  #
   def initialize(*args, **kws, &block)
     super
 
@@ -16,5 +55,4 @@ class Daisy::Feedback::ProgressComponent < LocoMotion::BaseComponent
   def call
     part(:component)
   end
-
 end

data/app/components/daisy/feedback/radial_progress_component.rb

@@ -1,5 +1,49 @@
+#
+# The RadialProgressComponent displays a circular progress indicator that can be
+# customized with different sizes, thicknesses, and colors. The component can
+# also contain content within its circular display.
+#
+# The progress is always displayed as a percentage (0-100) due to the way the
+# component is rendered using CSS custom properties.
+#
+# @loco_example Basic Usage
+#   = daisy_radial(value: 66) do
+#     66%
+#
+# @loco_example With Icons
+#   = daisy_radial(value: 68) do
+#     = hero_icon("beaker", css: "size-8 text-purple-500")
+#
+#   = daisy_radial(value: 52, css: "text-success") do
+#     52%
+#
+# @loco_example Custom Size and Styling
+#   = daisy_radial(value: 19, size: "15rem", thickness: "4px",
+#     css: "bg-primary text-primary-content text-3xl") do
+#     19%
+#
 class Daisy::Feedback::RadialProgressComponent < LocoMotion::BaseComponent
 
+  #
+  # Creates a new Radial Progress component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the radial progress.
+  #
+  # @option kws value      [Integer] The current progress value as a
+  #   percentage (0-100). Required for the progress to be displayed.
+  #
+  # @option kws size       [String] The size of the radial progress component.
+  #   Must include CSS units (e.g., "5rem", "100px"). Defaults to "5rem".
+  #
+  # @option kws thickness [String] The thickness of the progress ring. Must
+  #   include CSS units (e.g., "4px", "0.5rem"). Defaults to one-tenth of
+  #   the size.
+  #
+  # @option kws css       [String] Additional CSS classes for styling. Common
+  #   options include color classes like `text-success` or `text-error`,
+  #   background colors like `bg-primary`, and text sizing like `text-3xl`.
+  #
   def initialize(*args, **kws, &block)
     super
 
@@ -26,4 +70,3 @@ class Daisy::Feedback::RadialProgressComponent < LocoMotion::BaseComponent
   end
 
 end
-

data/app/components/daisy/feedback/skeleton_component.rb

@@ -1,4 +1,48 @@
+#
+# The SkeletonComponent creates loading placeholder elements that mimic the
+# shape and size of content that is being loaded. This provides users with a
+# visual indication of the content's layout before it arrives, reducing
+# perceived loading times and improving user experience.
+#
+# Skeletons can be used in two ways:
+# 1. As standalone shapes with custom dimensions.
+# 2. As a modifier class on existing components to create component-specific
+#    loading states.
+#
+# @loco_example Basic Shapes
+#   = daisy_skeleton(css: "w-24 h-24 rounded-full")
+#   = daisy_skeleton(css: "w-36 h-20")
+#   = daisy_skeleton(css: "w-48 h-5")
+#
+# @loco_example Component Loading States
+#   = daisy_badge(css: "badge-lg skeleton text-slate-400") 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
+#       Loading...
+#
 class Daisy::Feedback::SkeletonComponent < LocoMotion::BaseComponent
+  #
+  # Creates a new Skeleton component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the skeleton.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Dimensions: `w-24`, `h-20`
+  #   - Shapes: `rounded-full`, `rounded-lg`
+  #   - Colors: `bg-base-200`
+  #   When using with other components, combine with `text-transparent` to
+  #   hide placeholder text.
+  #
   def before_render
     add_css(:component, "skeleton")
   end

data/app/components/daisy/feedback/toast_component.rb

@@ -1,4 +1,40 @@
+#
+# The ToastComponent provides a container for displaying non-critical messages
+# to users, typically positioned at the edges of the viewport. Toasts are
+# commonly used for temporary notifications, success messages, or error alerts
+# that don't require immediate user action.
+#
+# @note Currently, this component only handles positioning. JavaScript
+#   functionality for showing/hiding toasts will be implemented in a future
+#   Stimulus ToastController.
+#
+# @loco_example Basic Toast with Alert
+#   = daisy_toast do
+#     = daisy_alert(icon: "check-circle", css: "alert-success text-white") do
+#       Yay! Something went well!
+#
+# @loco_example Multiple Alerts in Toast
+#   = daisy_toast do
+#     = daisy_alert(icon: "check-circle", css: "alert-success text-white") do
+#       Operation successful!
+#
+#     = daisy_alert(icon: "exclamation-circle", css: "alert-error text-white") do
+#       An error occurred.
+#
 class Daisy::Feedback::ToastComponent < LocoMotion::BaseComponent
+  #
+  # Creates a new Toast component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the toast.
+  #
+  # @option kws css [String] Additional CSS classes for styling. By default,
+  #   toasts are positioned in the bottom-right corner of the viewport.
+  #   Common options include:
+  #   - Position modifiers: `toast-top`, `toast-bottom`, `toast-center`,
+  #     `toast-start`, `toast-end`
+  #   - Stack order: `z-50`
+  #
   def before_render
     add_css(:component, "toast")
   end

data/app/components/daisy/feedback/tooltip_component.rb

@@ -1,20 +1,56 @@
 #
-# A component that displays a tooltip when the user hovers over it.
+# The TooltipComponent displays informative text when users hover over an
+# element. It can be used in two ways:
+# 1. As a wrapper component around any HTML content.
+# 2. Through the TippableComponent concern, which many components include.
+#
+# This component is also aliased as `daisy_tip` for convenience.
 #
 # @loco_example Basic Usage
-#   = daisy_tooltip "This is a tooltip" do
-#     %span Hover over me
+#   = daisy_tip "Helpful information" do
+#     %span Need help?
+#
+#   = daisy_tip "Delete this item", css: "tooltip-error" do
+#     = hero_icon("trash", css: "size-5 text-error")
+#
+# @loco_example Positioned Tips
+#   = daisy_tip "Opens settings menu", css: "tooltip-left" do
+#     = daisy_button(title: "Settings", icon: "cog-6-tooth")
+#
+#   = daisy_tip "View user profile", css: "tooltip-bottom tooltip-info" do
+#     = daisy_avatar(src: image_path("avatars/user.jpg"))
+#
+# @loco_example Component Integration
+#   = daisy_button(title: "Save Changes",
+#     css: "btn-primary",
+#     tip: "Save your current progress")
+#
+#   = daisy_chat do |chat|
+#     - chat.with_avatar(css: "tooltip-left tooltip-info",
+#       tip: "Online",
+#       src: image_path("avatars/user.jpg"))
+#     - chat.with_bubble do
+#       Hello!
 #
 class Daisy::Feedback::TooltipComponent < LocoMotion::BaseComponent
 
   #
-  # Create a new instance of the Tooltip.
+  # Creates a new Tooltip component.
+  #
+  # @param args [Array] If provided, the first argument is used as the `tip`
+  #   text.
+  # @param kws  [Hash]  Keyword arguments for customizing the tooltip.
   #
-  # @param args [Array] If provided, the first argument is considered the `tip`.
-  # @param kws [Hash] The keyword arguments for the component.
+  # @option kws tip [String] The text to display in the tooltip. Can be
+  #   passed as the first positional argument or as a keyword argument.
   #
-  # @option kws tip [String] The text to display in the tooltip. Can be passed
-  #   as the first positional argument, or as a keyword argument.
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Position modifiers: `tooltip-top`, `tooltip-bottom`,
+  #     `tooltip-left`, `tooltip-right`
+  #   - Colors: `tooltip-primary`, `tooltip-secondary`, `tooltip-accent`,
+  #     `tooltip-info`, `tooltip-success`, `tooltip-warning`, `tooltip-error`
+  #   - Open state: `tooltip-open`
   #
   def initialize(*args, **kws, &block)
     super
@@ -24,7 +60,7 @@ class Daisy::Feedback::TooltipComponent < LocoMotion::BaseComponent
   end
 
   #
-  # Sets up the components CSS and HTML attributes.
+  # Sets up the component's CSS and HTML attributes.
   #
   def before_render
     add_css(:component, "tooltip")
@@ -32,7 +68,7 @@ class Daisy::Feedback::TooltipComponent < LocoMotion::BaseComponent
   end
 
   #
-  # Renders the component and it's content (inline).
+  # Renders the component and its content (inline).
   #
   def call
     part(:component) { content }

data/app/components/daisy/layout/artboard_component.rb

@@ -1,9 +1,57 @@
+#
+# The ArtboardComponent provides a fixed-size container that mimics mobile
+# device screens. It's particularly useful for:
+# - Prototyping mobile interfaces.
+# - Displaying responsive design examples.
+# - Creating device-specific mockups.
+#
+# The component includes preset sizes for common mobile devices and supports
+# both portrait and landscape orientations.
+#
+# @loco_example Portrait Mode
+#   = daisy_artboard(css: "phone-4") do
+#     = daisy_hero do
+#       iPhone 13 (375×812)
+#
+# @loco_example Landscape Mode
+#   = daisy_artboard(css: "phone-4 artboard-horizontal") do
+#     = daisy_hero do
+#       iPhone 13 (812×375)
+#
+# @loco_example Custom Demo Style
+#   = daisy_artboard(css: "phone-1 artboard-demo") do
+#     iPhone SE (320×568)
+#
 class Daisy::Layout::ArtboardComponent < LocoMotion::BaseComponent
 
+  #
+  # Creates a new Artboard component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the artboard.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Device sizes: `phone-1` (320×568), `phone-2` (375×667),
+  #     `phone-3` (414×736), `phone-4` (375×812), `phone-5` (414×896),
+  #     `phone-6` (320×1024)
+  #   - Orientation: `artboard-horizontal` for landscape mode
+  #   - Demo style: `artboard-demo` for visible borders and background
+  #
+  def initialize(*args, **kws, &block)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
   def before_render
     add_css(:component, "artboard")
   end
 
+  #
+  # Renders the component and its content.
+  #
   def call
     part(:component) { content }
   end

data/app/components/daisy/layout/divider_component.rb

@@ -1,29 +1,69 @@
 #
-# The divider component is a simple horizontal or vertical line that separates
-# content. It can be colored and have a label.
+# The DividerComponent creates a visual separator between content sections,
+# either horizontally or vertically. It can include optional text or content
+# in the center and supports various colors to match your theme.
 #
-# @loco_example Basic Usage
+# Common use cases include:
+# - Separating sections of a page.
+# - Creating visual breaks between cards or content blocks.
+# - Providing alternative options with "OR" text.
+# - Organizing form sections.
+#
+# @loco_example Basic Dividers
 #   = daisy_divider
 #
-# @loco_example With Text
 #   = daisy_divider do
-#     Hello Dividers!
+#     OR
+#
+# @loco_example Vertical Dividers
+#   .flex.grow
+#     = daisy_card(css: "h-48") do
+#       Left Content
+#
+#     = daisy_divider(css: "divider-horizontal") do
+#       OR
+#
+#     = daisy_card(css: "h-48") do
+#       Right Content
+#
+# @loco_example Colored Dividers
+#   = daisy_divider(css: "divider-primary") do
+#     Primary
+#
+#   = daisy_divider(css: "divider-accent") do
+#     Accent
 #
-# @loco_example Horizontal Accented With Text
-#   = daisy_divider(css: "divider-horizontal divider-accent") do
-#     Accent Divider
+#   = daisy_divider(css: "divider-success") do
+#     Success
 #
 class Daisy::Layout::DividerComponent < LocoMotion::BaseComponent
 
   #
-  # Add the `divider` CSS class to the component.
+  # Creates a new Divider component.
+  #
+  # @param args [Array] Positional arguments passed to the parent class.
+  # @param kws  [Hash]  Keyword arguments for customizing the divider.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Orientation: `divider-horizontal` for vertical divider
+  #   - Colors: `divider-neutral`, `divider-primary`, `divider-secondary`,
+  #     `divider-accent`, `divider-info`, `divider-success`,
+  #     `divider-warning`, `divider-error`
+  #
+  def initialize(*args, **kws, &block)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
   #
   def before_render
     add_css(:component, "divider")
   end
 
   #
-  # Render the component and it's content.
+  # Renders the component and its content.
   #
   def call
     part(:component) { content }

data/app/components/daisy/layout/drawer_component.rb

@@ -1,23 +1,60 @@
 #
-# The DrawerComponent shows a sidebar that can be toggled open and closed.
+# The DrawerComponent provides a sliding sidebar panel that can be toggled
+# open and closed. It's commonly used for:
+# - Navigation menus
+# - Filter panels
+# - Additional information panels
+# - Mobile-friendly navigation
 #
-# @part input [LocoMotion::BaseComponent] The input checkbox that toggles the
-#   sidebar.
-# @part content_wrapper [LocoMotion::BaseComponent] The wrapper for the page
-#   content.
-# @part overlay [LocoMotion::BaseComponent] The overlay that covers the page
-#   when the sidebar is open.
+# The drawer includes an overlay that covers the main content when open and
+# can be configured to slide in from either the left or right side.
 #
-# @slot sidebar [Daisy::Layout::DrawerSidebarComponent] The sidebar that is
-#   shown when the drawer is toggled open. Renders the overlay inside of itself.
+# @part input            [LocoMotion::BaseComponent] The input checkbox that
+#   toggles the sidebar visibility.
 #
-# @loco_example Basic Usage
+# @part content_wrapper  [LocoMotion::BaseComponent] The wrapper for the main
+#   page content that remains visible when the drawer is closed.
+#
+# @part overlay         [LocoMotion::BaseComponent] The semi-transparent
+#   overlay that covers the main content when the drawer is open. Clicking it
+#   closes the drawer.
+#
+# @slot sidebar        [Daisy::Layout::DrawerSidebarComponent] The sidebar
+#   panel that slides in when the drawer is opened. Contains the overlay
+#   within itself.
+#
+# @loco_example Basic Left Drawer
 #   = daisy_drawer do |drawer|
 #     - drawer.with_sidebar do
 #       .bg-base-100.p-4.w-40
-#         Hello sidebar!
+#         Menu Items
+#
+#     = daisy_button(tag_name: "label",
+#       css: "btn btn-primary",
+#       title: "Open Menu",
+#       html: { for: drawer.id })
+#
+# @loco_example Right Drawer
+#   = daisy_drawer(css: "drawer-end") do |drawer|
+#     - drawer.with_sidebar do
+#       .bg-base-100.p-4.w-40
+#         Filter Options
+#
+#     = daisy_button(tag_name: "label",
+#       css: "btn btn-secondary",
+#       title: "Show Filters",
+#       html: { for: drawer.id })
 #
-#     = daisy_button(tag_name: "label", css: "btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
+# @loco_example Styled Drawer
+#   = daisy_drawer do |drawer|
+#     - drawer.with_sidebar do
+#       .bg-base-200.p-4.w-80.h-full
+#         .flex.justify-between.items-center.mb-4
+#           %h2.text-xl Settings
+#           = daisy_button(tag_name: "label",
+#             css: "btn btn-ghost btn-circle",
+#             icon: "x-mark",
+#             html: { for: drawer.id })
 #
 class Daisy::Layout::DrawerComponent < LocoMotion::BaseComponent
   #
@@ -26,14 +63,14 @@ class Daisy::Layout::DrawerComponent < LocoMotion::BaseComponent
   #
   class Daisy::Layout::DrawerSidebarComponent < LocoMotion::BaseComponent
     #
-    # Add the `drawer-side` CSS class to the component.
+    # Sets up the component's CSS classes.
     #
     def before_render
       add_css(:component, "drawer-side")
     end
 
     #
-    # Render the sidebar, the overlay, and the content.
+    # Renders the sidebar, the overlay, and its content.
     #
     def call
       part(:component) do
@@ -55,10 +92,18 @@ class Daisy::Layout::DrawerComponent < LocoMotion::BaseComponent
   attr_reader :id
 
   #
-  # Create a new instance of the DrawerComponent.
+  # Creates a new Drawer component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the drawer.
+  #
+  # @option kws id  [String] The ID of the drawer. Defaults to a random UUID.
+  #   This is used to connect the toggle button with the drawer.
   #
-  # @param kws [Hash] The keyword arguments passed to the component.
-  # @option kws [String] :id The ID of the drawer. Defaults to a random UUID.
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Position: `drawer-end` to slide from right instead of left
+  #   - Responsive: `lg:drawer-open` to keep drawer open on large screens
+  #   - Z-index: `z-[100]` to control stacking order
   #
   def initialize(**kws)
     super