fernandes-ui 0.1.5 → 0.1.6

data/docs/components/select.yml

@@ -0,0 +1,195 @@
+---
+name: Select
+slug: select
+category: forms
+description: Displays a list of options for the user to pick from, triggered by a
+  button.
+anatomy:
+- name: Select
+  description: Root container with state management
+  required: true
+- name: Trigger
+  description: Button that opens the dropdown
+  required: true
+- name: Content
+  description: Container for the dropdown options
+  required: true
+- name: Item
+  description: Individual selectable option
+  required: true
+- name: Group
+  description: Groups related items with a label
+  required: false
+- name: Label
+  description: Label for item groups
+  required: false
+- name: Separator
+  description: Visual separator between items
+  required: false
+features:
+- Single selection from a list of options
+- Keyboard navigation with arrow keys
+- Type-ahead search functionality
+- Grouped options with labels
+- Disabled items support
+- Custom trigger with asChild pattern
+- Placeholder text when no selection
+- Form integration with hidden input
+api:
+  Select:
+    description: Shared behavior for Select component across ERB, ViewComponent, and
+      Phlex implementations.
+    parameters:
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    data_attributes:
+    - name: data-state
+      values:
+      - open
+      - closed
+      description: Current open/closed state
+    - name: data-placeholder
+      values:
+      - 'true'
+      description: Present when showing placeholder
+    css_variables:
+    - name: "--trigger-width"
+      description: Width of the trigger element
+  Content:
+    description: Shared behavior for Select dropdown content across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: Shared behavior for Select options group across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: Shared behavior for Individual select option across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    - 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: []
+  Label:
+    description: Shared behavior for Select group label across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+  Scroll Down Button:
+    description: Shared behavior for Select scroll down button across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+  Scroll Up Button:
+    description: Shared behavior for Select scroll up button across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: Shared behavior for Select trigger button across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    - name: placeholder
+      type: String
+      default: Select...
+      description: Placeholder text when no value is selected
+    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:
+  - role="combobox" on the trigger
+  - role="listbox" on the content container
+  - role="option" on each item
+  - aria-expanded on trigger
+  - aria-selected on the selected item
+  - aria-disabled on disabled items
+  - aria-labelledby for label association
+keyboard:
+- key: Space
+  description: Opens dropdown when trigger is focused
+- key: Enter
+  description: Opens dropdown / selects highlighted item
+- key: ArrowDown
+  description: Opens dropdown / moves to next item
+- key: ArrowUp
+  description: Moves to previous item
+- key: Home
+  description: Moves to first item
+- key: End
+  description: Moves to last item
+- key: Escape
+  description: Closes dropdown
+- key: A-Z,a-z
+  description: Type-ahead to find matching item
+javascript:
+  controller: ui--select
+  targets:
+  - trigger
+  - content
+  - item
+  - valueDisplay
+  - hiddenInput
+  - scrollUpButton
+  - scrollDownButton
+  - viewport
+  - itemCheck
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  - name: value
+    type: String
+    description: Current selected value
+  actions:
+  - toggle
+  - close
+  - selectItem
+  events: []
+related:
+- combobox
+- dropdown_menu
+- radio_group

data/docs/components/separator.yml

@@ -0,0 +1,26 @@
+---
+name: Separator
+slug: separator
+category: layout
+description: Separator - Phlex implementation
+anatomy:
+- name: Separator
+  description: Visually or semantically separates content.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- ARIA attributes for accessibility
+api:
+  Separator:
+    description: Visually or semantically separates content.
+    parameters:
+    - name: orientation
+      type: Symbol
+      default: ":horizontal"
+      description: Orientation (horizontal or vertical)
+    - name: decorative
+      type: Boolean
+      default: 'true'
+      description: The decorative
+    data_attributes: []
+    css_variables: []

data/docs/components/sheet.yml

@@ -0,0 +1,133 @@
+---
+name: Sheet
+slug: sheet
+category: overlay
+anatomy:
+- name: Sheet
+  description: Root container with state management
+  required: true
+- name: Close
+  description: Button to close/dismiss the component
+  required: false
+- name: Content
+  description: Main content container
+  required: true
+- name: Description
+  description: Descriptive text element
+  required: false
+- name: Footer
+  description: Footer section with actions
+  required: false
+- name: Header
+  description: Header section with title and controls
+  required: false
+- name: Overlay
+  description: Background overlay that dims the page
+  required: false
+- name: Title
+  description: Title text element
+  required: false
+- name: Trigger
+  description: Button or element that activates the component
+  required: true
+features:
+- Custom styling with Tailwind classes
+api:
+  Sheet:
+    description: ''
+    parameters:
+    - name: open
+      type: Boolean
+      default: 'false'
+      description: Whether the element is open
+    - name: close_on_escape
+      type: Boolean
+      default: 'true'
+      description: The close on escape
+    - name: close_on_overlay_click
+      type: Boolean
+      default: 'true'
+      description: The close on overlay click
+    data_attributes: []
+    css_variables: []
+  Close:
+    description: ''
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    - name: variant
+      type: Symbol
+      default: ":outline"
+      description: Visual style variant
+    - name: size
+      type: Symbol
+      default: ":default"
+      description: Size of the element
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: ''
+    parameters:
+    - name: side
+      type: String
+      default: right
+      description: Which side to display on
+    - name: open
+      type: Boolean
+      default: 'false'
+      description: Whether the element is open
+    - name: show_close
+      type: Boolean
+      default: 'true'
+      description: The show close
+    data_attributes: []
+    css_variables: []
+  Description:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Footer:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Header:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Overlay:
+    description: ''
+    parameters:
+    - name: open
+      type: Boolean
+      default: 'false'
+      description: Whether the element is open
+    data_attributes: []
+    css_variables: []
+  Title:
+    description: ''
+    parameters: []
+    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: Dialog (Modal)
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+  description: Implements the WAI-ARIA Dialog (Modal) pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+related:
+- dialog
+- drawer

data/docs/components/sidebar.yml

@@ -0,0 +1,138 @@
+---
+name: Sidebar
+slug: sidebar
+category: navigation
+description: Sidebar - Phlex implementation
+anatomy:
+- name: Sidebar
+  description: Main sidebar container with support for variants and collapsible modes.
+  required: true
+- name: Content
+  description: Scrollable content area in the middle of the sidebar.
+  required: true
+- name: Footer
+  description: Fixed footer section at the bottom of the sidebar.
+  required: false
+- name: Group
+  description: Container for grouping related sidebar items.
+  required: false
+- name: Group Action
+  description: Action button within a sidebar group header.
+  required: false
+- name: Group Content
+  description: Container for content within a sidebar group.
+  required: true
+- name: Header
+  description: Fixed header section at the top of the sidebar.
+  required: false
+- name: Input
+  description: Input field styled for sidebar usage.
+  required: false
+- name: Separator
+  description: Visual divider within the sidebar.
+  required: false
+- name: Trigger
+  description: Button that toggles the sidebar open/closed.
+  required: true
+features:
+- Custom styling with Tailwind classes
+api:
+  Sidebar:
+    description: Main sidebar container with support for variants and collapsible
+      modes.
+    parameters:
+    - name: variant
+      type: String
+      default: sidebar
+      description: Visual style variant
+    - name: side
+      type: String
+      default: left
+      description: Which side to display on
+    - name: collapsible
+      type: String
+      default: icon
+      description: The collapsible
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: Scrollable content area in the middle of the sidebar.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Footer:
+    description: Fixed footer section at the bottom of the sidebar.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: Container for grouping related sidebar items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group Action:
+    description: Action button within a sidebar group header.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    data_attributes: []
+    css_variables: []
+  Group Content:
+    description: Container for content within a sidebar group.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Header:
+    description: Fixed header section at the top of the sidebar.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Input:
+    description: Input field styled for sidebar usage.
+    parameters:
+    - name: type
+      type: String
+      default: text
+      description: The type
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: Visual divider within the sidebar.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: Button that toggles the sidebar open/closed.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+javascript:
+  controller: ui--sidebar
+  targets:
+  - sidebar
+  - trigger
+  - mobileSheet
+  - mobileDrawer
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - toggle
+  - open
+  - close
+  - toggleDesktop
+  - openDesktop
+  - closeDesktop
+  - toggleMobile
+  - openMobile
+  - closeMobile
+  - isMobile
+  - saveCookie
+  - loadCookie
+  - dispatchToggleEvent
+  events:
+  - name: sidebar:toggle
+    description: Fired when sidebar toggle

data/docs/components/skeleton.yml

@@ -0,0 +1,17 @@
+---
+name: Skeleton
+slug: skeleton
+category: feedback
+description: Skeleton - Phlex implementation
+anatomy:
+- name: Skeleton
+  description: A simple loading placeholder component with pulsing animation.
+  required: true
+api:
+  Skeleton:
+    description: A simple loading placeholder component with pulsing animation.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+related:
+- progress

data/docs/components/sonner.yml

@@ -0,0 +1,46 @@
+---
+name: Sonner
+slug: sonner
+category: other
+description: Sonner Toaster component (Phlex) Container for toast notifications -
+  render once in your layout
+anatomy:
+- name: Sonner
+  description: Sonner Toaster component part
+  required: true
+features:
+- Custom styling with Tailwind classes
+api:
+  Sonner Toaster:
+    description: ''
+    parameters:
+    - name: position
+      type: String
+      default: bottom-right
+      description: The position
+    - name: theme
+      type: String
+      default: system
+      description: The theme
+    - name: rich_colors
+      type: Boolean
+      default: 'false'
+      description: The rich colors
+    - name: expand
+      type: Boolean
+      default: 'false'
+      description: The expand
+    - name: duration
+      type: Integer
+      default: '4000'
+      description: The duration
+    - name: close_button
+      type: Boolean
+      default: 'false'
+      description: The close button
+    - name: visible_toasts
+      type: Integer
+      default: '3'
+      description: The visible toasts
+    data_attributes: []
+    css_variables: []

data/docs/components/spinner.yml

@@ -0,0 +1,22 @@
+---
+name: Spinner
+slug: spinner
+category: feedback
+description: Spinner - Phlex implementation
+anatomy:
+- name: Spinner
+  description: A loading indicator component using an animated spinner icon.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- ARIA attributes for accessibility
+api:
+  Spinner:
+    description: A loading indicator component using an animated spinner icon.
+    parameters:
+    - name: size
+      type: String
+      default: default
+      description: Size of the element
+    data_attributes: []
+    css_variables: []

data/docs/components/switch.yml

@@ -0,0 +1,72 @@
+---
+name: Switch
+slug: switch
+category: forms
+description: Switch - Phlex implementation
+anatomy:
+- name: Switch
+  description: A toggle control that allows the user to switch between checked and
+    unchecked states.
+  required: true
+features:
+- Keyboard navigation
+- Custom styling with Tailwind classes
+- Form integration
+- Disabled state support
+- ARIA attributes for accessibility
+- Animation support
+api:
+  Switch:
+    description: A toggle control that allows the user to switch between checked and
+      unchecked states.
+    parameters:
+    - 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: name
+      type: String
+      default: nil
+      description: Form field name
+    - name: id
+      type: String
+      default: nil
+      description: HTML id attribute
+    - name: value
+      type: String
+      default: '1'
+      description: The current value
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Switch
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/switch/
+  description: Implements the WAI-ARIA Switch pattern with proper roles, states, and
+    keyboard navigation.
+  aria_attributes:
+  - aria-checked
+  - aria-disabled
+  - role="switch"
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: Space
+  description: Activates the focused element
+javascript:
+  controller: ui--switch
+  targets:
+  - thumb
+  values:
+  - name: checked
+    type: Boolean
+    description: The checked
+  actions:
+  - toggle
+  events: []
+related:
+- checkbox
+- toggle

data/docs/components/table.yml

@@ -0,0 +1,32 @@
+---
+name: Table
+slug: table
+category: data
+anatomy:
+- name: Table
+  description: Root container for table
+  required: true
+- name: Footer
+  description: Footer section with actions
+  required: false
+- name: Header
+  description: Header section with title and controls
+  required: false
+features:
+- Custom styling with Tailwind classes
+api:
+  Table:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Footer:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Header:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []