fernandes-ui 0.1.4 → 0.1.6

data/docs/components/empty.yml

@@ -0,0 +1,88 @@
+---
+name: Empty
+slug: empty
+category: data
+description: Displays empty states in applications with customizable media, titles, descriptions, and actions.
+anatomy:
+- name: Empty
+  description: Root container for empty state display with centered layout and dashed border.
+  required: true
+- name: Header
+  description: Wraps the media, title, and description elements with proper spacing and alignment.
+  required: false
+- name: Media
+  description: Displays visual content like icons, images, or avatars.
+  required: false
+- name: Title
+  description: Displays the main heading text of the empty state.
+  required: false
+- name: Description
+  description: Displays secondary text explaining the empty state or providing guidance.
+  required: false
+- name: Content
+  description: Container for action elements such as buttons, links, or inputs.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Flexible composition with optional sub-components
+- Icon variant for media with background styling
+- Centered layout with responsive padding
+api:
+  Empty:
+    description: Root container that provides centered flexbox layout with dashed border styling.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: '"empty"'
+      description: Identifies the empty state container
+    css_variables: []
+  Header:
+    description: Groups media, title, and description with centered alignment and consistent spacing.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: '"empty-header"'
+      description: Identifies the header container
+    css_variables: []
+  Media:
+    description: Container for visual content with optional icon variant styling.
+    parameters:
+    - name: variant
+      type: String
+      default: '"default"'
+      description: Visual style variant ("default" for transparent background, "icon" for muted background with rounded corners)
+    data_attributes:
+    - name: data-slot
+      value: '"empty-media"'
+      description: Identifies the media container
+    css_variables: []
+  Title:
+    description: Renders an h3 heading element with semibold font styling.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: '"empty-title"'
+      description: Identifies the title element
+    css_variables: []
+  Description:
+    description: Renders a paragraph element with muted text color for secondary information.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: '"empty-description"'
+      description: Identifies the description element
+    css_variables: []
+  Content:
+    description: Container for action elements like buttons or links placed below the header.
+    parameters: []
+    data_attributes:
+    - name: data-slot
+      value: '"empty-content"'
+      description: Identifies the content container
+    css_variables: []
+accessibility:
+  description: Empty states should provide clear, descriptive text to help users understand why content is missing and what actions they can take.
+  aria_attributes: []
+related:
+- card
+- alert

data/docs/components/field.yml

@@ -0,0 +1,81 @@
+---
+name: Field
+slug: field
+category: forms
+description: Field - Phlex implementation
+anatomy:
+- name: Field
+  description: Core wrapper for a single form field with support for different orientations.
+  required: true
+- name: Content
+  description: Flex column that groups control and descriptions.
+  required: true
+- name: Description
+  description: Helper text for form fields.
+  required: false
+- name: Group
+  description: Layout wrapper that stacks Field components.
+  required: false
+- name: Label
+  description: Label styled for form fields with disability states.
+  required: false
+- name: Separator
+  description: Visual divider to separate sections inside FieldGroup.
+  required: false
+- name: Title
+  description: Title with label styling inside FieldContent.
+  required: false
+features:
+- Custom styling with Tailwind classes
+- Form integration
+api:
+  Field:
+    description: Core wrapper for a single form field with support for different orientations.
+    parameters:
+    - name: orientation
+      type: String
+      default: vertical
+      description: Orientation (horizontal or vertical)
+    - name: data_invalid
+      type: String
+      default: nil
+      description: The data invalid
+    data_attributes: []
+    css_variables: []
+  Content:
+    description: Flex column that groups control and descriptions.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Description:
+    description: Helper text for form fields.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Group:
+    description: Layout wrapper that stacks Field components.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Label:
+    description: Label styled for form fields with disability states.
+    parameters:
+    - name: for_id
+      type: String
+      default: nil
+      description: The for id
+    data_attributes: []
+    css_variables: []
+  Separator:
+    description: Visual divider to separate sections inside FieldGroup.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+  Title:
+    description: Title with label styling inside FieldContent.
+    parameters: []
+    data_attributes: []
+    css_variables: []
+related:
+- input
+- label

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