fernandes-ui 0.1.5 → 0.1.6

data/docs/components/alert_dialog.yml

@@ -0,0 +1,151 @@
+---
+name: Alert Dialog
+slug: alert_dialog
+category: feedback
+description: AlertDialog - Phlex implementation
+anatomy:
+- name: Alert Dialog
+  description: A modal alert dialog component for important confirmations and alerts.
+  required: true
+- name: Action
+  description: Primary action button for the alert dialog.
+  required: false
+- name: Cancel
+  description: Cancel button for the alert dialog.
+  required: false
+- name: Content
+  description: Main alert dialog content area with proper ARIA attributes.
+  required: true
+- name: Description
+  description: Description text for the alert dialog.
+  required: false
+- name: Footer
+  description: Footer section with action buttons for the alert dialog.
+  required: false
+- name: Header
+  description: Header section of the alert dialog.
+  required: false
+- name: Overlay
+  description: Container wrapper with backdrop and content for the alert dialog overlay.
+  required: false
+- name: Title
+  description: Title text for the alert dialog.
+  required: false
+- name: Trigger
+  description: A wrapper that adds the alert dialog open action to its child element.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- Focus management
+api:
+  Alert Dialog:
+    description: A modal alert dialog component for important confirmations and alerts.
+    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
+    data_attributes: []
+    css_variables: []
+  Action:
+    description: Primary action button for the alert dialog.
+    parameters:
+    - name: variant
+      type: Symbol
+      default: ":default"
+      description: Visual style variant
+    - name: size
+      type: Symbol
+      default: ":default"
+      description: Size of the element
+    data_attributes: []
+    css_variables: []
+  Cancel:
+    description: Cancel button for the alert dialog.
+    parameters:
+    - 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: Main alert dialog content area with proper ARIA attributes.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Description:
+    description: Description text for the alert dialog.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Footer:
+    description: Footer section with action buttons for the alert dialog.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Header:
+    description: Header section of the alert dialog.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Overlay:
+    description: Container wrapper with backdrop and content for the alert dialog
+      overlay.
+    parameters:
+    - name: open
+      type: Boolean
+      default: 'false'
+      description: Whether the element is open
+    data_attributes: []
+    css_variables: []
+  Title:
+    description: Title text for the alert dialog.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Trigger:
+    description: A wrapper that adds the alert dialog open action to its child element.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Alert Dialog
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+  description: Implements the WAI-ARIA Alert Dialog pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes: []
+keyboard:
+- key: Escape
+  description: Closes the component
+javascript:
+  controller: ui--alert-dialog
+  targets:
+  - container
+  - overlay
+  - content
+  values:
+  - name: open
+    type: Boolean
+    description: Controls open state
+  actions:
+  - open
+  - close
+  - show
+  - hide
+  - preventOverlayClose
+  events:
+  - name: alertdialog:open
+    description: Fired when alertdialog open
+  - name: alertdialog:close
+    description: Fired when alertdialog close
+related:
+- dialog

data/docs/components/aspect_ratio.yml

@@ -0,0 +1,37 @@
+---
+name: Aspect Ratio
+slug: aspect_ratio
+category: layout
+description: AspectRatio - Phlex implementation
+anatomy:
+- name: Aspect Ratio
+  description: Displays content within a desired aspect ratio.
+  required: true
+features:
+- Custom styling with Tailwind classes
+common_ratios:
+  - ratio: "16:9"
+    calculation: "16.0/9.0"
+    use_case: "Widescreen videos, modern displays"
+  - ratio: "4:3"
+    calculation: "4.0/3.0"
+    use_case: "Traditional TV, older content"
+  - ratio: "1:1"
+    calculation: "1.0"
+    use_case: "Square images, avatars"
+  - ratio: "21:9"
+    calculation: "21.0/9.0"
+    use_case: "Ultrawide displays, cinematic"
+  - ratio: "9:16"
+    calculation: "9.0/16.0"
+    use_case: "Portrait/mobile, stories"
+api:
+  Aspect Ratio:
+    description: Displays content within a desired aspect ratio.
+    parameters:
+    - name: ratio
+      type: Float
+      default: '1.0'
+      description: The ratio
+    data_attributes: []
+    css_variables: []

data/docs/components/avatar.yml

@@ -0,0 +1,55 @@
+---
+name: Avatar
+slug: avatar
+category: data
+description: Avatar - Phlex implementation
+anatomy:
+- name: Avatar
+  description: Displays an image element with a fallback for representing users.
+  required: true
+- name: Fallback
+  description: Displays fallback content when the image hasn't loaded or fails to
+    load.
+  required: false
+- name: Image
+  description: Displays the avatar image. Only renders when it has loaded successfully.
+  required: false
+features:
+- Custom styling with Tailwind classes
+api:
+  Avatar:
+    description: Displays an image element with a fallback for representing users.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Fallback:
+    description: Displays fallback content when the image hasn't loaded or fails to
+      load.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Image:
+    description: Displays the avatar image. Only renders when it has loaded successfully.
+    parameters:
+    - name: alt
+      type: String
+      default: ''
+      description: The alt
+    data_attributes: []
+    css_variables: []
+javascript:
+  controller: ui--avatar
+  targets:
+  - image
+  - fallback
+  values: []
+  actions:
+  - onImageLoad
+  - onImageError
+  - showImage
+  - hideImage
+  - hideFallback
+  - showFallback
+  events: []
+related:
+- badge

data/docs/components/badge.yml

@@ -0,0 +1,24 @@
+---
+name: Badge
+slug: badge
+category: data
+description: Badge - Phlex implementation
+anatomy:
+- name: Badge
+  description: Displays a badge or a component that looks like a badge.
+  required: true
+features:
+- Custom styling with Tailwind classes
+- ARIA attributes for accessibility
+api:
+  Badge:
+    description: Displays a badge or a component that looks like a badge.
+    parameters:
+    - name: variant
+      type: Symbol
+      default: ":default"
+      description: Visual style variant
+    data_attributes: []
+    css_variables: []
+related:
+- avatar

data/docs/components/breadcrumb.yml

@@ -0,0 +1,76 @@
+---
+name: Breadcrumb
+slug: breadcrumb
+category: navigation
+description: Breadcrumb - Phlex implementation
+anatomy:
+- name: Breadcrumb
+  description: A navigation breadcrumb component for displaying hierarchical navigation.
+  required: true
+- name: Ellipsis
+  description: Indicator for collapsed/hidden breadcrumb items.
+  required: false
+- name: Item
+  description: Individual breadcrumb entry within the breadcrumb list.
+  required: false
+- name: Link
+  description: Clickable breadcrumb link for navigation.
+  required: false
+- name: List
+  description: Container for breadcrumb items, rendered as an ordered list.
+  required: false
+- name: Page
+  description: Current page indicator (non-clickable) for breadcrumbs.
+  required: false
+- name: Separator
+  description: Visual divider between breadcrumb items with default chevron icon.
+  required: false
+features:
+- ARIA attributes for accessibility
+api:
+  Breadcrumb:
+    description: A navigation breadcrumb component for displaying hierarchical navigation.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Ellipsis:
+    description: Indicator for collapsed/hidden breadcrumb items.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Item:
+    description: Individual breadcrumb entry within the breadcrumb list.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Link:
+    description: Clickable breadcrumb link for navigation.
+    parameters:
+    - name: href
+      type: String
+      default: "#"
+      description: The href
+    data_attributes: []
+    css_variables: []
+  List:
+    description: Container for breadcrumb items, rendered as an ordered list.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Page:
+    description: Current page indicator (non-clickable) for breadcrumbs.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: Visual divider between breadcrumb items with default chevron icon.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Breadcrumb
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
+  description: Implements the WAI-ARIA Breadcrumb pattern with proper roles, states,
+    and keyboard navigation.
+  aria_attributes:
+  - aria-label

data/docs/components/button.yml

@@ -0,0 +1,56 @@
+---
+name: Button
+slug: button
+category: forms
+description: Button - Phlex implementation
+anatomy:
+- name: Button
+  description: A versatile button component with multiple variants and sizes.
+  required: true
+- name: Group
+  description: A container that groups related buttons together with consistent styling.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Disabled state support
+- ARIA attributes for accessibility
+api:
+  Button:
+    description: A versatile button component with multiple variants and sizes.
+    parameters:
+    - name: variant
+      type: String
+      default: default
+      description: Visual style variant
+    - name: size
+      type: String
+      default: default
+      description: Size of the element
+    - name: type
+      type: String
+      default: button
+      description: The type
+    - name: disabled
+      type: Boolean
+      default: 'false'
+      description: Whether the element is disabled
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: A container that groups related buttons together with consistent
+      styling.
+    parameters:
+    - name: orientation
+      type: Symbol
+      default: ":horizontal"
+      description: Orientation (horizontal or vertical)
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Button
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+  description: Implements the WAI-ARIA Button pattern with proper roles, states, and
+    keyboard navigation.
+  aria_attributes: []
+related:
+- toggle

data/docs/components/button_group.yml

@@ -0,0 +1,67 @@
+---
+name: Button Group
+slug: button_group
+category: forms
+description: A container that groups related buttons together with consistent styling and shared borders.
+anatomy:
+- name: Button Group
+  description: A container that groups related buttons together with consistent styling.
+  required: true
+- name: Separator
+  description: A visual separator between buttons within the group.
+  required: false
+- name: Text
+  description: A styled text element for use within button groups.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Horizontal and vertical orientations
+- Automatic border radius handling for grouped elements
+- ARIA group role for accessibility
+api:
+  Button Group:
+    description: A container that groups related buttons together with consistent styling.
+    parameters:
+    - name: orientation
+      type: Symbol
+      default: ":horizontal"
+      description: Orientation of the group (horizontal or vertical)
+    data_attributes:
+    - name: data-slot
+      value: button-group
+      description: Identifies this element as a button group
+    - name: data-orientation
+      value: horizontal | vertical
+      description: The current orientation of the group
+    css_variables: []
+  Separator:
+    description: A visual separator between buttons within the group.
+    parameters:
+    - name: orientation
+      type: Symbol
+      default: ":horizontal"
+      description: Orientation of the separator (horizontal or vertical)
+    data_attributes:
+    - name: data-slot
+      value: button-group-separator
+      description: Identifies this element as a button group separator
+    - name: data-orientation
+      value: horizontal | vertical
+      description: The current orientation of the separator
+    css_variables: []
+  Text:
+    description: A styled text element for use within button groups.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+accessibility:
+  aria_pattern: Group
+  w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
+  description: Uses role="group" to semantically group related buttons together.
+  aria_attributes:
+  - name: role
+    value: group
+    description: Indicates this is a group of related elements
+related:
+- button
+- toggle

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