fernandes-ui 0.1.5 → 0.1.6

data/docs/components/hover_card.yml

@@ -0,0 +1,75 @@
+---
+name: Hover Card
+slug: hover_card
+category: overlay
+description: HoverCard - Phlex implementation
+anatomy:
+- name: Hover Card
+  description: Container for hover card trigger and content.
+  required: true
+- name: Content
+  description: The content that appears on hover.
+  required: true
+- name: Trigger
+  description: Element that triggers the hover card on hover.
+  required: true
+features:
+- Custom styling with Tailwind classes
+api:
+  Hover Card:
+    description: Container for hover card trigger and content.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: The content that appears on hover.
+    parameters:
+    - name: align
+      type: String
+      default: center
+      description: Alignment within container
+    - name: side_offset
+      type: Integer
+      default: '4'
+      description: The side offset
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: Element that triggers the hover card on hover.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    - name: tag
+      type: Symbol
+      default: ":span"
+      description: The tag
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Tooltip
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+  description: Implements the WAI-ARIA Tooltip pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+javascript:
+  controller: ui--hover-card
+  targets:
+  - trigger
+  - content
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - show
+  - hide
+  - keepOpen
+  - scheduleHide
+  - clearTimeouts
+  - positionContent
+  events: []
+related:
+- popover
+- tooltip

data/docs/components/input.yml

@@ -0,0 +1,51 @@
+---
+name: Input
+slug: input
+category: forms
+anatomy:
+- name: Input
+  description: Text input field
+  required: true
+- name: Group
+  description: A wrapper component for grouping inputs with addons, buttons, and text.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Form integration
+- Disabled state support
+- ARIA attributes for accessibility
+api:
+  Input:
+    description: ''
+    parameters:
+    - name: type
+      type: String
+      default: text
+      description: The type
+    - name: placeholder
+      type: String
+      default: nil
+      description: Placeholder text when no value is selected
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    - name: name
+      type: String
+      default: nil
+      description: Form field name
+    - name: id
+      type: String
+      default: nil
+      description: HTML id attribute
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: Shared behavior for InputGroup component across ERB, ViewComponent,
+      and Phlex implementations.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+related:
+- textarea
+- field

data/docs/components/input_group.yml

@@ -0,0 +1,37 @@
+---
+name: Input Group
+slug: input_group
+category: other
+description: Textarea - Phlex implementation
+anatomy:
+- name: Input Group Textarea
+  description: A textarea element styled for use within input groups.
+  required: true
+features:
+- Custom styling with Tailwind classes
+api:
+  Input Group Textarea:
+    description: A textarea element styled for use within input groups.
+    parameters:
+    - name: placeholder
+      type: String
+      default: nil
+      description: Placeholder text when no value is selected
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    - name: name
+      type: String
+      default: nil
+      description: Form field name
+    - name: id
+      type: String
+      default: nil
+      description: HTML id attribute
+    - name: rows
+      type: String
+      default: nil
+      description: The rows
+    data_attributes: []
+    css_variables: []

data/docs/components/input_group_addon.yml

@@ -0,0 +1,24 @@
+---
+name: Input Group Addon
+slug: input_group_addon
+category: other
+description: Addon - Phlex implementation
+anatomy:
+- name: Input Group Addon
+  description: An addon element for input groups that can contain text, icons, or
+    other elements.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+api:
+  Input Group Addon:
+    description: An addon element for input groups that can contain text, icons, or
+      other elements.
+    parameters:
+    - name: align
+      type: String
+      default: inline-start
+      description: Alignment within container
+    data_attributes: []
+    css_variables: []

data/docs/components/input_group_button.yml

@@ -0,0 +1,30 @@
+---
+name: Input Group Button
+slug: input_group_button
+category: other
+description: Button - Phlex implementation
+anatomy:
+- name: Input Group Button
+  description: A button component specifically styled for use within input groups.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+api:
+  Input Group Button:
+    description: A button component specifically styled for use within input groups.
+    parameters:
+    - name: size
+      type: String
+      default: xs
+      description: Size of the element
+    - name: variant
+      type: String
+      default: ghost
+      description: Visual style variant
+    - name: type
+      type: String
+      default: button
+      description: The type
+    data_attributes: []
+    css_variables: []

data/docs/components/input_otp.yml

@@ -0,0 +1,80 @@
+---
+name: Input OTP
+slug: input_otp
+category: forms
+description: InputOtp - Phlex implementation
+anatomy:
+- name: Input OTP
+  description: Accessible one-time password container component.
+  required: true
+- name: Group
+  description: Container for grouping OTP input slots together visually.
+  required: false
+- name: Separator
+  description: Visual divider between OTP input groups.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+api:
+  Input OTP:
+    description: Accessible one-time password container component.
+    parameters:
+    - name: length
+      type: Integer
+      default: '6'
+      description: The length
+    - name: pattern
+      type: String
+      default: "\\\\d"
+      description: The pattern
+    - name: name
+      type: String
+      default: nil
+      description: Form field name
+    - name: id
+      type: String
+      default: nil
+      description: HTML id attribute
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: Container for grouping OTP input slots together visually.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: Visual divider between OTP input groups.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+keyboard:
+- 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
+javascript:
+  controller: ui--input-otp
+  targets:
+  - input
+  values:
+  - name: length
+    type: Number
+    description: The length
+  actions:
+  - input
+  - keydown
+  - paste
+  - checkComplete
+  - clear
+  events:
+  - name: inputotp:complete
+    description: Fired when inputotp complete

data/docs/components/input_otp_slot.yml

@@ -0,0 +1,39 @@
+---
+name: Input OTP Slot
+slug: input_otp_slot
+category: other
+description: Slot - Phlex implementation
+anatomy:
+- name: Input OTP Slot
+  description: Individual OTP input slot for a single character.
+  required: true
+features:
+- Keyboard navigation
+- Custom styling with Tailwind classes
+- Disabled state support
+api:
+  Input OTP Slot:
+    description: Individual OTP input slot for a single character.
+    parameters:
+    - name: index
+      type: Integer
+      default: '0'
+      description: The index
+    - name: value
+      type: String
+      default: ''
+      description: The current value
+    - name: name
+      type: String
+      default: nil
+      description: Form field name
+    - name: id
+      type: String
+      default: nil
+      description: HTML id attribute
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    data_attributes: []
+    css_variables: []

data/docs/components/item.yml

@@ -0,0 +1,84 @@
+---
+name: Item
+slug: item
+category: data
+anatomy:
+- name: Item
+  description: Individual item element
+  required: true
+- 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: Group
+  description: Container for grouping related items
+  required: false
+- name: Header
+  description: Header section with title and controls
+  required: false
+- name: Separator
+  description: Visual divider between sections
+  required: false
+- name: Title
+  description: Title text element
+  required: false
+features:
+- Custom styling with Tailwind classes
+api:
+  Item:
+    description: ''
+    parameters:
+    - name: variant
+      type: String
+      default: default
+      description: Visual style variant
+    - name: size
+      type: String
+      default: default
+      description: Size of the element
+    - 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: []
+    data_attributes: []
+    css_variables: []
+  Description:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Footer:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Header:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Title:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []

data/docs/components/kbd.yml

@@ -0,0 +1,26 @@
+---
+name: Kbd
+slug: kbd
+category: data
+description: Kbd - Phlex implementation
+anatomy:
+- name: Kbd
+  description: Displays textual user input from keyboard, helping users understand
+  required: true
+- name: Group
+  description: Groups multiple keyboard keys together with consistent spacing.
+  required: false
+features:
+- Keyboard navigation
+- Custom styling with Tailwind classes
+api:
+  Kbd:
+    description: Displays textual user input from keyboard, helping users understand
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: Groups multiple keyboard keys together with consistent spacing.
+    parameters: []
+    data_attributes: []
+    css_variables: []

data/docs/components/label.yml

@@ -0,0 +1,26 @@
+---
+name: Label
+slug: label
+category: forms
+description: Label - Phlex implementation
+anatomy:
+- name: Label
+  description: Accessible label for form inputs following shadcn/ui design patterns.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Form integration
+- Disabled state support
+api:
+  Label:
+    description: Accessible label for form inputs following shadcn/ui design patterns.
+    parameters:
+    - name: for_id
+      type: String
+      default: nil
+      description: The for id
+    data_attributes: []
+    css_variables: []
+related:
+- field
+- input

data/docs/components/menubar.yml

@@ -0,0 +1,201 @@
+---
+name: Menubar
+slug: menubar
+category: navigation
+description: Menubar - Phlex implementation
+anatomy:
+- name: Menubar
+  description: Container for horizontal menu bar with Stimulus controller for interactivity.
+  required: true
+- name: Content
+  description: Container for menu items that appears when trigger is activated.
+  required: true
+- name: Item
+  description: A selectable menu item.
+  required: false
+- name: Label
+  description: Non-interactive label/header for menu sections.
+  required: false
+- name: Separator
+  description: Visual divider between menu items.
+  required: false
+- name: Shortcut
+  description: Displays keyboard shortcut hint for menu items.
+  required: false
+- name: Sub
+  description: Container for submenu within the menubar menu.
+  required: false
+- name: Sub Content
+  description: Container for submenu items.
+  required: true
+- name: Sub Trigger
+  description: Menu item that opens a submenu.
+  required: true
+- name: Trigger
+  description: Button that toggles the menu content open/closed.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- ARIA attributes for accessibility
+- Keyboard navigation with arrow keys
+- Click outside to close
+api:
+  Menubar:
+    description: Container for horizontal menu bar with Stimulus controller for interactivity.
+    parameters:
+    - name: loop
+      type: Boolean
+      default: 'false'
+      description: The loop
+    - name: aria_label
+      type: String
+      default: nil
+      description: The aria label
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: Container for menu items that appears when trigger is activated.
+    parameters:
+    - name: align
+      type: String
+      default: start
+      description: Alignment within container
+    - name: side
+      type: String
+      default: bottom
+      description: Which side to display on
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: A selectable menu item.
+    parameters:
+    - name: variant
+      type: Symbol
+      default: ":default"
+      description: Visual style variant
+    - name: inset
+      type: Boolean
+      default: 'false'
+      description: The inset
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    data_attributes: []
+    css_variables: []
+  Label:
+    description: Non-interactive label/header for menu sections.
+    parameters:
+    - name: inset
+      type: Boolean
+      default: 'false'
+      description: The inset
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: Visual divider between menu items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Shortcut:
+    description: Displays keyboard shortcut hint for menu items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Sub:
+    description: Container for submenu within the menubar menu.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Sub Content:
+    description: Container for submenu items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Sub Trigger:
+    description: Menu item that opens a submenu.
+    parameters:
+    - name: inset
+      type: Boolean
+      default: 'false'
+      description: The inset
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: Button that toggles the menu content open/closed.
+    parameters:
+    - name: first
+      type: Boolean
+      default: 'false'
+      description: The first
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Menu Bar
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+  description: Implements the WAI-ARIA Menu Bar pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes:
+  - aria-label
+  - role="menubar"
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: Space
+  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: 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: Tab
+  description: Moves focus to next focusable element
+javascript:
+  controller: ui--menubar
+  targets:
+  - trigger
+  - content
+  - item
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - initializeTriggers
+  - toggle
+  - openMenu
+  - closeAll
+  - trackHoveredItem
+  - selectItem
+  - openSubmenu
+  - openSubmenuWithAutoUpdate
+  - closeSubmenuAndCleanup
+  - closeSubmenu
+  - cancelSubmenuClose
+  - closeSiblingSubmenus
+  - teardownKeyboardNavigation
+  - navigateToNextMenu
+  - navigateToPreviousMenu
+  - openSubmenuWithKeyboard
+  - closeCurrentSubmenu
+  - activateCurrentItem
+  - toggleCheckbox
+  - selectRadio
+  events: []
+related:
+- dropdown_menu
+- context_menu
+- navigation_menu

data/docs/components/menubar_menu.yml

@@ -0,0 +1,21 @@
+---
+name: Menubar Menu
+slug: menubar_menu
+category: other
+description: Menu - Phlex implementation
+anatomy:
+- name: Menubar Menu
+  description: Wrapper for each top-level menu in the menubar.
+  required: true
+features:
+- Custom styling with Tailwind classes
+api:
+  Menubar Menu:
+    description: Wrapper for each top-level menu in the menubar.
+    parameters:
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    data_attributes: []
+    css_variables: []