fernandes-ui 0.1.4 → 0.1.6

data/docs/components/calendar.yml

@@ -0,0 +1,166 @@
+---
+name: Calendar
+slug: calendar
+category: forms
+description: Calendar component (Phlex) A date picker calendar with support for single,
+  range, and multiple selection
+anatomy:
+- name: Calendar
+  description: Root container for calendar
+  required: true
+features:
+- Keyboard navigation
+- Form integration
+- Disabled state support
+- ARIA attributes for accessibility
+- Keyboard navigation with arrow keys
+- Click outside to close
+- Animation support
+api:
+  Calendar:
+    description: ''
+    parameters:
+    - name: mode
+      type: Symbol
+      default: ":single"
+      description: The mode
+    - name: selected
+      type: String
+      default: nil
+      description: The selected
+    - name: month
+      type: String
+      default: Date.today
+      description: The month
+    - name: number_of_months
+      type: Integer
+      default: '1'
+      description: The number of months
+    - name: week_starts_on
+      type: Integer
+      default: '0'
+      description: The week starts on
+    - name: locale
+      type: String
+      default: en-US
+      description: The locale
+    - name: min_date
+      type: String
+      default: nil
+      description: The min date
+    - name: max_date
+      type: String
+      default: nil
+      description: The max date
+    - name: disabled_dates
+      type: Array
+      default: "[]"
+      description: The disabled dates
+    - name: show_outside_days
+      type: Boolean
+      default: 'true'
+      description: The show outside days
+    - name: fixed_weeks
+      type: Boolean
+      default: 'false'
+      description: The fixed weeks
+    - name: show_dropdowns
+      type: Boolean
+      default: 'false'
+      description: The show dropdowns
+    - name: year_range
+      type: Integer
+      default: '100'
+      description: The year range
+    - name: min_range_days
+      type: Integer
+      default: '0'
+      description: The min range days
+    - name: max_range_days
+      type: Integer
+      default: '0'
+      description: The max range days
+    - name: exclude_disabled
+      type: Boolean
+      default: 'false'
+      description: The exclude disabled
+    - name: use_native_select
+      type: Boolean
+      default: 'true'
+      description: The use native select
+    - name: name
+      type: String
+      default: nil
+      description: Form field name
+    data_attributes: []
+    css_variables: []
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: Space
+  description: Activates the focused element
+- key: ArrowDown
+  description: Moves focus to next item
+- key: ArrowUp
+  description: Moves focus to previous item
+- key: ArrowLeft
+  description: Moves focus left or decreases value
+- key: ArrowRight
+  description: Moves focus right or increases value
+- key: Home
+  description: Moves focus to first item
+- key: End
+  description: Moves focus to last item
+- key: PageUp
+  description: Moves focus up by page
+- key: PageDown
+  description: Moves focus down by page
+javascript:
+  controller: ui--calendar
+  targets:
+  - grid
+  - monthLabel
+  - input
+  - monthSelect
+  - yearSelect
+  - liveRegion
+  - weekdaysHeader
+  - monthContainer
+  values:
+  - name: mode
+    type: String
+    description: The mode
+  actions:
+  - initializeLocale
+  - previousMonth
+  - nextMonth
+  - previousYear
+  - nextYear
+  - goToMonth
+  - goToYear
+  - goToToday
+  - dispatchMonthChange
+  - announceMonthChange
+  - announceSelection
+  - selectDate
+  - selectRange
+  - hasDisabledDatesInRange
+  - toggleDate
+  - isInRangePreview
+  - isRangePreviewStart
+  - isRangePreviewEnd
+  - animateMonthTransition
+  - isSelected
+  - isDisabled
+  - isInRange
+  - isRangeStart
+  - isRangeEnd
+  - moveFocus
+  - selectFocusedDate
+  - restoreFocus
+  - navigateAndFocus
+  - moveToStartOfWeek
+  - moveToEndOfWeek
+  events: []
+related:
+- date_picker

data/docs/components/card.yml

@@ -0,0 +1,99 @@
+---
+name: Card
+slug: card
+category: layout
+description: A container component for displaying content in a structured, visually distinct box with optional header, footer, and actions.
+anatomy:
+- name: Card
+  description: Root container for card with border, shadow, and background styling.
+  required: true
+- name: Header
+  description: Header section containing title, description, and optional actions.
+  required: false
+- name: Title
+  description: The main title text element within the header.
+  required: false
+- name: Description
+  description: Secondary descriptive text element within the header.
+  required: false
+- name: Action
+  description: Container for action buttons positioned in the header.
+  required: false
+- name: Content
+  description: Main content area of the card.
+  required: true
+- name: Footer
+  description: Footer section typically containing action buttons.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Flexible layout with header, content, and footer sections
+- Action button support in header
+- Responsive grid layout in header
+- Border separator support for header and footer
+api:
+  Card:
+    description: Root container for card with border, shadow, and background styling.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card
+      description: Identifies this element as a card container
+    css_variables: []
+  Header:
+    description: Header section with grid layout that automatically adjusts when actions are present.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card-header
+      description: Identifies this element as a card header
+    css_variables: []
+  Title:
+    description: The main title text element with semibold font styling.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card-title
+      description: Identifies this element as a card title
+    css_variables: []
+  Description:
+    description: Secondary descriptive text with muted foreground color.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card-description
+      description: Identifies this element as a card description
+    css_variables: []
+  Action:
+    description: Container for action buttons, positioned at top-right of header using CSS grid.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card-action
+      description: Identifies this element as a card action container
+    css_variables: []
+  Content:
+    description: Main content area with horizontal padding.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card-content
+      description: Identifies this element as the card content area
+    css_variables: []
+  Footer:
+    description: Footer section with flexbox layout for action buttons.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: card-footer
+      description: Identifies this element as a card footer
+    css_variables: []
+accessibility:
+  aria_pattern: Landmark
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
+  description: Card is a presentational container. Use appropriate semantic elements within (headings, paragraphs, buttons) for accessibility.
+  aria_attributes: []
+related:
+- dialog
+- sheet
+- alert

data/docs/components/carousel.yml

@@ -0,0 +1,100 @@
+---
+name: Carousel
+slug: carousel
+category: data
+anatomy:
+- name: Carousel
+  description: Root container with state management
+  required: true
+- name: Content
+  description: Main content container
+  required: true
+- name: Item
+  description: Individual item element
+  required: false
+- name: Next
+  description: Navigate to next item
+  required: false
+- name: Previous
+  description: Navigate to previous item
+  required: false
+features:
+- Custom styling with Tailwind classes
+- ARIA attributes for accessibility
+- Keyboard navigation with arrow keys
+api:
+  Carousel:
+    description: ''
+    parameters:
+    - name: orientation
+      type: String
+      default: horizontal
+      description: Orientation (horizontal or vertical)
+    - name: opts
+      type: Hash
+      default: "{}"
+      description: The opts
+    - name: plugins
+      type: String
+      default: nil
+      description: The plugins
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Next:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Previous:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Carousel
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
+  description: Implements the WAI-ARIA Carousel pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes:
+  - aria-roledescription
+  - role="region"
+keyboard:
+- key: ArrowDown
+  description: Moves focus to next item
+- key: ArrowUp
+  description: Moves focus to previous item
+- key: ArrowLeft
+  description: Moves focus left or decreases value
+- key: ArrowRight
+  description: Moves focus right or increases value
+javascript:
+  controller: ui--carousel
+  targets:
+  - viewport
+  - prevButton
+  - nextButton
+  - container
+  values:
+  - name: orientation
+    type: String
+    description: Layout orientation
+  actions:
+  - initializeCarousel
+  - buildPlugins
+  - applyOrientationClasses
+  - keydown
+  events:
+  - name: carousel:init
+    description: Fired when carousel init
+related:
+- scroll_area

data/docs/components/checkbox.yml

@@ -0,0 +1,59 @@
+---
+name: Checkbox
+slug: checkbox
+category: forms
+anatomy:
+- name: Checkbox
+  description: Root checkbox element
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+- ARIA attributes for accessibility
+api:
+  Checkbox:
+    description: ''
+    parameters:
+    - name: name
+      type: String
+      default: nil
+      description: Form field name
+    - name: id
+      type: String
+      default: nil
+      description: HTML id attribute
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    - name: checked
+      type: Boolean
+      default: 'false'
+      description: Whether the element is checked
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    - name: required
+      type: Boolean
+      default: 'false'
+      description: The required
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Checkbox
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+  description: Implements the WAI-ARIA Checkbox pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes:
+  - aria-checked
+javascript:
+  controller: ui--checkbox
+  targets: []
+  values: []
+  actions: []
+  events: []
+related:
+- switch
+- toggle
+- radio_button

data/docs/components/collapsible.yml

@@ -0,0 +1,74 @@
+---
+name: Collapsible
+slug: collapsible
+category: data
+anatomy:
+- name: Collapsible
+  description: Root container with state management
+  required: true
+- name: Content
+  description: Main content container
+  required: true
+- name: Trigger
+  description: Button or element that activates the component
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+- Animation support
+api:
+  Collapsible:
+    description: ''
+    parameters:
+    - name: open
+      type: Boolean
+      default: 'false'
+      description: Whether the element is open
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: ''
+    parameters:
+    - name: force_mount
+      type: Boolean
+      default: 'false'
+      description: The force mount
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: ''
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Disclosure
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+  description: Implements the WAI-ARIA Disclosure pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+javascript:
+  controller: ui--collapsible
+  targets:
+  - trigger
+  - content
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - toggle
+  events: []
+related:
+- accordion

data/docs/components/combobox.yml

@@ -0,0 +1,21 @@
+---
+name: Combobox
+slug: combobox
+category: other
+description: Wrapper - Phlex implementation
+anatomy:
+- name: Combobox Wrapper
+  description: Wrapper component that yields combobox attributes to be spread into
+    a container component.
+  required: true
+api:
+  Combobox Wrapper:
+    description: Wrapper component that yields combobox attributes to be spread into
+      a container component.
+    parameters:
+    - name: value
+      type: String
+      default: ''
+      description: The current value
+    data_attributes: []
+    css_variables: []

data/docs/components/command.yml

@@ -0,0 +1,144 @@
+---
+name: Command
+slug: command
+category: data
+anatomy:
+- name: Command
+  description: Root container for command palette
+  required: true
+- name: Empty
+  description: Content shown when no items
+  required: false
+- name: Group
+  description: Container for grouping related items
+  required: false
+- name: Input
+  description: Text input field
+  required: false
+- name: Item
+  description: Individual item element
+  required: false
+- name: List
+  description: Container for list items
+  required: false
+- name: Separator
+  description: Visual divider between sections
+  required: false
+- name: Shortcut
+  description: Keyboard shortcut indicator
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Keyboard navigation with arrow keys
+api:
+  Command:
+    description: ''
+    parameters:
+    - name: loop
+      type: Boolean
+      default: 'true'
+      description: Whether keyboard navigation loops from last to first item
+    - name: autofocus
+      type: Boolean
+      default: 'false'
+      description: Whether to focus the input when the command opens (set to true in CommandDialog)
+    data_attributes: []
+    css_variables: []
+  Empty:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: ''
+    parameters:
+    - name: heading
+      type: String
+      default: nil
+      description: The heading
+    data_attributes: []
+    css_variables: []
+  Input:
+    description: ''
+    parameters:
+    - name: placeholder
+      type: String
+      default: Type a command or search...
+      description: Placeholder text when no value is selected
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: ''
+    parameters:
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    data_attributes: []
+    css_variables: []
+  List:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Shortcut:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Listbox
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+  description: Implements the WAI-ARIA Listbox pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: ArrowDown
+  description: Moves focus to next item
+- key: ArrowUp
+  description: Moves focus to previous item
+- key: Home
+  description: Moves focus to first item
+- key: End
+  description: Moves focus to last item
+javascript:
+  controller: ui--command
+  targets:
+  - input
+  - list
+  - item
+  - group
+  - empty
+  values:
+  - name: loop
+    type: Boolean
+    description: Whether keyboard navigation loops from last to first item
+  - name: autofocus
+    type: Boolean
+    description: Whether to focus the input when the command opens
+  actions:
+  - filter
+  - selectNext
+  - selectPrevious
+  - selectFirst
+  - selectLast
+  - selectCurrent
+  - select
+  - triggerSelect
+  events:
+  - name: command:select
+    description: Fired when command select
+related:
+- combobox
+- dialog