fernandes-ui 0.1.5 → 0.1.6

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

data/docs/components/context_menu.yml

@@ -0,0 +1,124 @@
+---
+name: Context Menu
+slug: context_menu
+category: overlay
+description: ContextMenu - Phlex implementation
+anatomy:
+- name: Context Menu
+  description: Container for context menus triggered by right-click.
+  required: true
+- name: Content
+  description: Menu items container with animations and positioning.
+  required: true
+- name: Item
+  description: Individual menu item that can be rendered as a link or div.
+  required: false
+- name: Label
+  description: Non-interactive label for grouping menu items.
+  required: false
+- name: Separator
+  description: A visual divider between menu items.
+  required: false
+- name: Shortcut
+  description: Displays keyboard shortcut text for a menu item.
+  required: false
+- name: Trigger
+  description: The element that triggers the context menu on right-click.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Keyboard navigation with arrow keys
+- Click outside to close
+api:
+  Context Menu:
+    description: Container for context menus triggered by right-click.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: Menu items container with animations and positioning.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: Individual menu item that can be rendered as a link or div.
+    parameters:
+    - name: href
+      type: String
+      default: nil
+      description: The href
+    - name: inset
+      type: Boolean
+      default: 'false'
+      description: The inset
+    - name: variant
+      type: String
+      default: default
+      description: Visual style variant
+    data_attributes: []
+    css_variables: []
+  Label:
+    description: Non-interactive label for grouping menu items.
+    parameters:
+    - name: inset
+      type: Boolean
+      default: 'false'
+      description: The inset
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: A visual divider between menu items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Shortcut:
+    description: Displays keyboard shortcut text for a menu item.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: The element that triggers the context menu on right-click.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Menu
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+  description: Implements the WAI-ARIA Menu pattern with proper roles, states, and
+    keyboard navigation.
+  aria_attributes: []
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: Escape
+  description: Closes the component
+- 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--context-menu
+  targets:
+  - trigger
+  - content
+  - item
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - open
+  - close
+  - closeAllContextMenus
+  - teardownKeyboardNavigation
+  - findCurrentItemIndex
+  - trackHoveredItem
+  - positionContextMenu
+  events: []
+related:
+- dropdown_menu
+- menubar