fernandes-ui 0.1.5 → 0.1.6

data/docs/components/navigation_menu.yml

@@ -0,0 +1,161 @@
+---
+name: Navigation Menu
+slug: navigation_menu
+category: navigation
+description: NavigationMenu - Phlex implementation
+anatomy:
+- name: Navigation Menu
+  description: A collection of links for navigating websites. Built on Radix UI patterns.
+  required: true
+- name: Content
+  description: Container for navigation menu content that appears when trigger is
+    activated.
+  required: true
+- name: Item
+  description: Wrapper for individual navigation menu item.
+  required: false
+- name: Link
+  description: Navigation link component. Supports asChild pattern for composition
+    with link_to.
+  required: false
+- name: List
+  description: Container for navigation menu items.
+  required: false
+- name: Trigger
+  description: Button that toggles the navigation menu content.
+  required: true
+- name: Viewport
+  description: Container for navigation menu content when viewport mode is enabled.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Keyboard navigation with arrow keys
+- Click outside to close
+- Animation support
+api:
+  Navigation Menu:
+    description: A collection of links for navigating websites. Built on Radix UI
+      patterns.
+    parameters:
+    - name: viewport
+      type: Boolean
+      default: 'true'
+      description: The viewport
+    - name: delay_duration
+      type: Integer
+      default: '200'
+      description: The delay duration
+    - name: skip_delay_duration
+      type: Integer
+      default: '300'
+      description: The skip delay duration
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: Container for navigation menu content that appears when trigger is
+      activated.
+    parameters:
+    - name: viewport
+      type: Boolean
+      default: 'true'
+      description: The viewport
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: Wrapper for individual navigation menu item.
+    parameters:
+    - name: value
+      type: String
+      default: nil
+      description: The current value
+    data_attributes: []
+    css_variables: []
+  Link:
+    description: Navigation link component. Supports asChild pattern for composition
+      with link_to.
+    parameters:
+    - name: href
+      type: String
+      default: nil
+      description: The href
+    - name: active
+      type: Boolean
+      default: 'false'
+      description: The active
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    - name: trigger_style
+      type: Boolean
+      default: 'false'
+      description: The trigger style
+    data_attributes: []
+    css_variables: []
+  List:
+    description: Container for navigation menu items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: Button that toggles the navigation menu content.
+    parameters:
+    - name: first
+      type: Boolean
+      default: 'false'
+      description: The first
+    data_attributes: []
+    css_variables: []
+  Viewport:
+    description: Container for navigation menu content when viewport mode is enabled.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Navigation
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/navigation/
+  description: Implements the WAI-ARIA Navigation 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: 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--navigation-menu
+  targets:
+  - trigger
+  - content
+  - viewport
+  - item
+  values:
+  - name: viewport
+    type: Boolean
+    description: The viewport
+  actions:
+  - initializeTriggers
+  - clearTimers
+  - toggle
+  - openMenu
+  - animateContentOut
+  - closeMenu
+  - closeAll
+  - calculateEnterMotion
+  - calculateExitMotion
+  events: []
+related:
+- menubar
+- tabs

data/docs/components/pagination.yml

@@ -0,0 +1,86 @@
+---
+name: Pagination
+slug: pagination
+category: navigation
+description: Pagination component (Phlex) Container for pagination navigation
+anatomy:
+- name: Pagination
+  description: Root container for pagination
+  required: true
+- name: Content
+  description: Main content container
+  required: true
+- name: Ellipsis
+  description: Indicator for truncated items
+  required: false
+- name: Item
+  description: Individual item element
+  required: false
+- name: Link
+  description: Clickable navigation link
+  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
+api:
+  Pagination:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Ellipsis:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: ''
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Link:
+    description: ''
+    parameters:
+    - name: href
+      type: String
+      default: "#"
+      description: The href
+    - name: active
+      type: Boolean
+      default: 'false'
+      description: The active
+    - name: size
+      type: String
+      default: icon
+      description: Size of the element
+    data_attributes: []
+    css_variables: []
+  Next:
+    description: ''
+    parameters:
+    - name: href
+      type: String
+      default: "#"
+      description: The href
+    data_attributes: []
+    css_variables: []
+  Previous:
+    description: ''
+    parameters:
+    - name: href
+      type: String
+      default: "#"
+      description: The href
+    data_attributes: []
+    css_variables: []

data/docs/components/popover.yml

@@ -0,0 +1,105 @@
+---
+name: Popover
+slug: popover
+category: overlay
+description: Popover - Phlex implementation
+anatomy:
+- name: Popover
+  description: Container for popover trigger and content.
+  required: true
+- name: Content
+  description: The floating content panel.
+  required: true
+- name: Trigger
+  description: Button or element that triggers the popover.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Click outside to close
+api:
+  Popover:
+    description: Container for popover trigger and content.
+    parameters:
+    - name: placement
+      type: String
+      default: bottom
+      description: The placement
+    - name: offset
+      type: Integer
+      default: '4'
+      description: The offset
+    - name: trigger
+      type: String
+      default: click
+      description: The trigger
+    - name: hover_delay
+      type: Integer
+      default: '200'
+      description: The hover delay
+    - name: align
+      type: String
+      default: nil
+      description: Alignment within container
+    - name: side_offset
+      type: String
+      default: nil
+      description: The side offset
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: The floating content panel.
+    parameters:
+    - name: side
+      type: String
+      default: bottom
+      description: Which side to display on
+    - name: align
+      type: String
+      default: center
+      description: Alignment within container
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: Button or element that triggers the popover.
+    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 (Non-modal)
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-non-modal/
+  description: Implements the WAI-ARIA Dialog (Non-modal) pattern with proper roles,
+    states, and keyboard navigation.
+  aria_attributes: []
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: Escape
+  description: Closes the component
+javascript:
+  controller: ui--popover
+  targets:
+  - trigger
+  - content
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - teardownKeyboardNavigation
+  - toggle
+  - show
+  - findTriggerElementToFocus
+  - hide
+  events:
+  - name: popover:show
+    description: Fired when popover show
+  - name: popover:hide
+    description: Fired when popover hide
+related:
+- tooltip
+- hover_card
+- dropdown_menu

data/docs/components/progress.yml

@@ -0,0 +1,37 @@
+---
+name: Progress
+slug: progress
+category: feedback
+description: Progress - Phlex implementation
+anatomy:
+- name: Progress
+  description: A progress indicator component for displaying task completion or loading
+    status.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Form integration
+- ARIA attributes for accessibility
+api:
+  Progress:
+    description: A progress indicator component for displaying task completion or
+      loading status.
+    parameters:
+    - name: value
+      type: Integer
+      default: '0'
+      description: The current value
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Meter
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/meter/
+  description: Implements the WAI-ARIA Meter pattern with proper roles, states, and
+    keyboard navigation.
+  aria_attributes:
+  - aria-valuemin
+  - aria-valuemax
+  - aria-valuenow
+  - role="progressbar"
+related:
+- skeleton

data/docs/components/radio_button.yml

@@ -0,0 +1,52 @@
+---
+name: Radio Button
+slug: radio_button
+category: forms
+anatomy:
+- name: Radio Button
+  description: Root container for radio button
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+- ARIA attributes for accessibility
+api:
+  Radio Button:
+    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: Radio Group
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+  description: Implements the WAI-ARIA Radio Group pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+related:
+- toggle_group
+- checkbox
+- select

data/docs/components/resizable.yml

@@ -0,0 +1,44 @@
+---
+name: Resizable
+slug: resizable
+category: other
+description: ResizablePanel component (Phlex) Individual resizable panel within a
+  panel group
+anatomy:
+- name: Resizable Panel
+  description: Resizable Panel component part
+  required: true
+- name: Group
+  description: Container for grouping related items
+  required: false
+api:
+  Resizable Panel:
+    description: ''
+    parameters:
+    - name: default_size
+      type: String
+      default: nil
+      description: The default size
+    - name: min_size
+      type: String
+      default: nil
+      description: The min size
+    - name: max_size
+      type: String
+      default: nil
+      description: The max size
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: ''
+    parameters:
+    - name: direction
+      type: String
+      default: horizontal
+      description: The direction
+    - name: keyboard_resize_by
+      type: Integer
+      default: '10'
+      description: The keyboard resize by
+    data_attributes: []
+    css_variables: []

data/docs/components/scroll_area.yml

@@ -0,0 +1,76 @@
+---
+name: Scroll Area
+slug: scroll_area
+category: layout
+description: ScrollArea - Phlex implementation
+anatomy:
+- name: Scroll Area
+  description: Augments native scroll functionality for custom, cross-browser styling.
+  required: true
+- name: Viewport
+  description: Scrollable content container with hidden native scrollbar.
+  required: false
+features:
+- Custom styling with Tailwind classes
+api:
+  Scroll Area:
+    description: Augments native scroll functionality for custom, cross-browser styling.
+    parameters:
+    - name: as_child
+      type: Boolean
+      default: 'false'
+      description: When true, yields attributes to block instead of rendering wrapper
+    - name: type
+      type: String
+      default: hover
+      description: The type
+    - name: scroll_hide_delay
+      type: Integer
+      default: '600'
+      description: The scroll hide delay
+    data_attributes: []
+    css_variables: []
+  Viewport:
+    description: Shared behavior for ScrollArea viewport 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: []
+accessibility:
+  aria_pattern: Scrollable Region
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
+  description: Implements the WAI-ARIA Scrollable Region pattern with proper roles,
+    states, and keyboard navigation.
+  aria_attributes: []
+keyboard:
+- key: Enter
+  description: Activates the focused element
+- key: End
+  description: Moves focus to last item
+javascript:
+  controller: ui--scroll-area
+  targets:
+  - viewport
+  - scrollbar
+  - thumb
+  values:
+  - name: type
+    type: String
+    description: The type
+  actions:
+  - applyViewportOverflow
+  - initializeScrollbarBehavior
+  - initializeHoverScrollbar
+  - initializeScrollScrollbar
+  - initializeAutoScrollbar
+  - initializeAlwaysScrollbar
+  - startScrollSync
+  - syncThumbPosition
+  - startDrag
+  events: []
+related:
+- carousel