fernandes-ui 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/ui.esm.js +0 -1
  3. data/app/assets/javascripts/ui.js +0 -1
  4. data/app/components/ui/slider.rb +80 -0
  5. data/app/components/ui/slider_range.rb +33 -0
  6. data/app/components/ui/slider_thumb.rb +47 -0
  7. data/app/components/ui/slider_track.rb +35 -0
  8. data/app/javascript/ui/common.js +0 -1
  9. data/docs/components/ANNOTATIONS.md +220 -0
  10. data/docs/components/accordion.yml +109 -0
  11. data/docs/components/alert.yml +47 -0
  12. data/docs/components/alert_dialog.yml +151 -0
  13. data/docs/components/aspect_ratio.yml +37 -0
  14. data/docs/components/avatar.yml +55 -0
  15. data/docs/components/badge.yml +24 -0
  16. data/docs/components/breadcrumb.yml +76 -0
  17. data/docs/components/button.yml +56 -0
  18. data/docs/components/button_group.yml +67 -0
  19. data/docs/components/calendar.yml +166 -0
  20. data/docs/components/card.yml +99 -0
  21. data/docs/components/carousel.yml +100 -0
  22. data/docs/components/checkbox.yml +59 -0
  23. data/docs/components/collapsible.yml +74 -0
  24. data/docs/components/combobox.yml +21 -0
  25. data/docs/components/command.yml +144 -0
  26. data/docs/components/context_menu.yml +124 -0
  27. data/docs/components/dialog.yml +155 -0
  28. data/docs/components/drawer.yml +219 -0
  29. data/docs/components/dropdown_menu.yml +151 -0
  30. data/docs/components/empty.yml +88 -0
  31. data/docs/components/field.yml +81 -0
  32. data/docs/components/hover_card.yml +75 -0
  33. data/docs/components/input.yml +51 -0
  34. data/docs/components/input_group.yml +37 -0
  35. data/docs/components/input_group_addon.yml +24 -0
  36. data/docs/components/input_group_button.yml +30 -0
  37. data/docs/components/input_otp.yml +80 -0
  38. data/docs/components/input_otp_slot.yml +39 -0
  39. data/docs/components/item.yml +84 -0
  40. data/docs/components/kbd.yml +26 -0
  41. data/docs/components/label.yml +26 -0
  42. data/docs/components/menubar.yml +201 -0
  43. data/docs/components/menubar_menu.yml +21 -0
  44. data/docs/components/navigation_menu.yml +161 -0
  45. data/docs/components/pagination.yml +86 -0
  46. data/docs/components/popover.yml +105 -0
  47. data/docs/components/progress.yml +37 -0
  48. data/docs/components/radio_button.yml +52 -0
  49. data/docs/components/resizable.yml +44 -0
  50. data/docs/components/scroll_area.yml +76 -0
  51. data/docs/components/select.yml +195 -0
  52. data/docs/components/separator.yml +26 -0
  53. data/docs/components/sheet.yml +133 -0
  54. data/docs/components/sidebar.yml +138 -0
  55. data/docs/components/skeleton.yml +17 -0
  56. data/docs/components/sonner.yml +46 -0
  57. data/docs/components/spinner.yml +22 -0
  58. data/docs/components/switch.yml +72 -0
  59. data/docs/components/table.yml +32 -0
  60. data/docs/components/tabs.yml +126 -0
  61. data/docs/components/textarea.yml +41 -0
  62. data/docs/components/toggle.yml +92 -0
  63. data/docs/components/toggle_group.yml +106 -0
  64. data/docs/components/tooltip.yml +75 -0
  65. data/lib/ui/version.rb +1 -1
  66. metadata +61 -1
data/docs/components/tabs.yml ADDED
@@ -0,0 +1,126 @@
1
+ ---
2
+ name: Tabs
3
+ slug: tabs
4
+ category: navigation
5
+ description: Tabs container component (Phlex) Root component for tabbed interface
6
+ with keyboard navigation
7
+ anatomy:
8
+ - name: Tabs
9
+ description: Root container with state management
10
+ required: true
11
+ - name: Content
12
+ description: Main content container
13
+ required: true
14
+ - name: List
15
+ description: Container for list items
16
+ required: false
17
+ - name: Trigger
18
+ description: Button or element that activates the component
19
+ required: true
20
+ features:
21
+ - Keyboard navigation with arrow keys
22
+ api:
23
+ Tabs:
24
+ description: ''
25
+ parameters:
26
+ - name: default_value
27
+ type: String
28
+ default: ''
29
+ description: The default value
30
+ - name: orientation
31
+ type: String
32
+ default: horizontal
33
+ description: Orientation (horizontal or vertical)
34
+ - name: activation_mode
35
+ type: String
36
+ default: automatic
37
+ description: The activation mode
38
+ data_attributes: []
39
+ css_variables: []
40
+ Content:
41
+ description: ''
42
+ parameters:
43
+ - name: value
44
+ type: String
45
+ default: ''
46
+ description: The current value
47
+ - name: default_value
48
+ type: String
49
+ default: ''
50
+ description: The default value
51
+ - name: orientation
52
+ type: String
53
+ default: horizontal
54
+ description: Orientation (horizontal or vertical)
55
+ data_attributes: []
56
+ css_variables: []
57
+ List:
58
+ description: ''
59
+ parameters:
60
+ - name: orientation
61
+ type: String
62
+ default: horizontal
63
+ description: Orientation (horizontal or vertical)
64
+ data_attributes: []
65
+ css_variables: []
66
+ Trigger:
67
+ description: ''
68
+ parameters:
69
+ - name: value
70
+ type: String
71
+ default: ''
72
+ description: The current value
73
+ - name: default_value
74
+ type: String
75
+ default: ''
76
+ description: The default value
77
+ - name: orientation
78
+ type: String
79
+ default: horizontal
80
+ description: Orientation (horizontal or vertical)
81
+ - name: disabled
82
+ type: Boolean
83
+ default: 'false'
84
+ description: Whether the element is disabled
85
+ data_attributes: []
86
+ css_variables: []
87
+ accessibility:
88
+ aria_pattern: Tabs
89
+ w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
90
+ description: Implements the WAI-ARIA Tabs pattern with proper roles, states, and
91
+ keyboard navigation.
92
+ aria_attributes: []
93
+ keyboard:
94
+ - key: ArrowDown
95
+ description: Moves focus to next item
96
+ - key: ArrowUp
97
+ description: Moves focus to previous item
98
+ - key: ArrowLeft
99
+ description: Moves focus left or decreases value
100
+ - key: ArrowRight
101
+ description: Moves focus right or increases value
102
+ - key: Home
103
+ description: Moves focus to first item
104
+ - key: End
105
+ description: Moves focus to last item
106
+ - key: Tab
107
+ description: Moves focus to next focusable element
108
+ javascript:
109
+ controller: ui--tabs
110
+ targets:
111
+ - trigger
112
+ - content
113
+ values:
114
+ - name: defaultValue
115
+ type: String
116
+ description: The defaultValue
117
+ actions:
118
+ - selectTab
119
+ - activateTrigger
120
+ - deactivateTrigger
121
+ - showContent
122
+ - hideContent
123
+ events: []
124
+ related:
125
+ - navigation_menu
126
+ - accordion
data/docs/components/textarea.yml ADDED
@@ -0,0 +1,41 @@
1
+ ---
2
+ name: Textarea
3
+ slug: textarea
4
+ category: forms
5
+ anatomy:
6
+ - name: Textarea
7
+ description: Root textarea element
8
+ required: true
9
+ features:
10
+ - Custom styling with Tailwind classes
11
+ - Disabled state support
12
+ - ARIA attributes for accessibility
13
+ api:
14
+ Textarea:
15
+ description: ''
16
+ parameters:
17
+ - name: placeholder
18
+ type: String
19
+ default: nil
20
+ description: Placeholder text when no value is selected
21
+ - name: value
22
+ type: String
23
+ default: ''
24
+ description: The current value
25
+ - name: name
26
+ type: String
27
+ default: nil
28
+ description: Form field name
29
+ - name: id
30
+ type: String
31
+ default: nil
32
+ description: HTML id attribute
33
+ - name: rows
34
+ type: String
35
+ default: nil
36
+ description: The rows
37
+ data_attributes: []
38
+ css_variables: []
39
+ related:
40
+ - input
41
+ - field
data/docs/components/toggle.yml ADDED
@@ -0,0 +1,92 @@
1
+ ---
2
+ name: Toggle
3
+ slug: toggle
4
+ category: forms
5
+ description: Toggle - Phlex implementation
6
+ anatomy:
7
+ - name: Toggle
8
+ description: A two-state button that can be either on or off.
9
+ required: true
10
+ - name: Group
11
+ description: A container for a set of toggle items that can be toggled on or off.
12
+ required: false
13
+ features:
14
+ - Custom styling with Tailwind classes
15
+ - Disabled state support
16
+ - ARIA attributes for accessibility
17
+ api:
18
+ Toggle:
19
+ description: A two-state button that can be either on or off.
20
+ parameters:
21
+ - name: variant
22
+ type: String
23
+ default: default
24
+ description: Visual style variant
25
+ - name: size
26
+ type: String
27
+ default: default
28
+ description: Size of the element
29
+ - name: type
30
+ type: String
31
+ default: button
32
+ description: The type
33
+ - name: pressed
34
+ type: Boolean
35
+ default: 'false'
36
+ description: The pressed
37
+ - name: disabled
38
+ type: Boolean
39
+ default: 'false'
40
+ description: Whether the element is disabled
41
+ data_attributes: []
42
+ css_variables: []
43
+ Group:
44
+ description: A container for a set of toggle items that can be toggled on or off.
45
+ parameters:
46
+ - name: type
47
+ type: String
48
+ default: single
49
+ description: The type
50
+ - name: variant
51
+ type: String
52
+ default: default
53
+ description: Visual style variant
54
+ - name: size
55
+ type: String
56
+ default: default
57
+ description: Size of the element
58
+ - name: value
59
+ type: String
60
+ default: nil
61
+ description: The current value
62
+ - name: spacing
63
+ type: Integer
64
+ default: '0'
65
+ description: The spacing
66
+ - name: orientation
67
+ type: String
68
+ default: nil
69
+ description: Orientation (horizontal or vertical)
70
+ data_attributes: []
71
+ css_variables: []
72
+ accessibility:
73
+ aria_pattern: Button
74
+ w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/button/
75
+ description: Implements the WAI-ARIA Button pattern with proper roles, states, and
76
+ keyboard navigation.
77
+ aria_attributes:
78
+ - aria-pressed
79
+ javascript:
80
+ controller: ui--toggle
81
+ targets: []
82
+ values:
83
+ - name: pressed
84
+ type: Boolean
85
+ description: The pressed
86
+ actions:
87
+ - toggle
88
+ events: []
89
+ related:
90
+ - checkbox
91
+ - switch
92
+ - toggle_group
data/docs/components/toggle_group.yml ADDED
@@ -0,0 +1,106 @@
1
+ ---
2
+ name: Toggle Group
3
+ slug: toggle_group
4
+ category: forms
5
+ description: A set of two-state buttons that can be toggled on or off, supporting single or multiple selection.
6
+ anatomy:
7
+ - name: Toggle Group
8
+ description: A container that groups related toggle items together with consistent styling.
9
+ required: true
10
+ - name: Item
11
+ description: An individual toggle button within the group.
12
+ required: true
13
+ features:
14
+ - Custom styling with Tailwind classes
15
+ - Single or multiple selection modes
16
+ - Variant styles (default, outline)
17
+ - Multiple sizes (sm, default, lg)
18
+ - Spacing control between items
19
+ - Disabled state support
20
+ - ARIA attributes for accessibility
21
+ api:
22
+ Toggle Group:
23
+ description: A container that groups related toggle items together with consistent styling.
24
+ parameters:
25
+ - name: type
26
+ type: String
27
+ default: single
28
+ description: Selection mode (single or multiple)
29
+ - name: value
30
+ type: String | Array
31
+ default: nil
32
+ description: Initial selected value(s)
33
+ - name: variant
34
+ type: String
35
+ default: default
36
+ description: Visual style variant (default or outline)
37
+ - name: orientation
38
+ type: Symbol
39
+ default: ":horizontal"
40
+ description: Orientation of the group (horizontal or vertical)
41
+ - name: spacing
42
+ type: Integer
43
+ default: "0"
44
+ description: Gap spacing between items (0, 1, 2, etc.)
45
+ data_attributes:
46
+ - name: data-controller
47
+ value: ui--toggle-group
48
+ description: Stimulus controller for toggle group behavior
49
+ - name: data-orientation
50
+ value: horizontal | vertical
51
+ description: The current orientation of the group
52
+ - name: data-spacing
53
+ value: 0, 1, 2, etc.
54
+ description: Spacing between items
55
+ - name: data-variant
56
+ value: default | outline
57
+ description: Visual style variant
58
+ css_variables: []
59
+ Item:
60
+ description: An individual toggle button within the group.
61
+ parameters:
62
+ - name: value
63
+ type: String
64
+ default: nil
65
+ description: The value associated with this item
66
+ - name: pressed
67
+ type: Boolean
68
+ default: "false"
69
+ description: Whether the item is currently pressed/selected
70
+ - name: disabled
71
+ type: Boolean
72
+ default: "false"
73
+ description: Whether the item is disabled
74
+ - name: size
75
+ type: String
76
+ default: default
77
+ description: Size of the item (sm, default, lg)
78
+ data_attributes:
79
+ - name: data-state
80
+ value: on | off
81
+ description: Current pressed state of the item
82
+ - name: data-value
83
+ value: string
84
+ description: The value of this item
85
+ - name: data-disabled
86
+ value: ""
87
+ description: Present when item is disabled
88
+ css_variables: []
89
+ accessibility:
90
+ aria_pattern: Checkbox Group / Radio Group
91
+ w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
92
+ description: Uses role="radiogroup" for single selection or role="group" for multiple selection, with appropriate aria-checked/aria-pressed states.
93
+ aria_attributes:
94
+ - name: role
95
+ value: radiogroup | group
96
+ description: radiogroup for single selection, group for multiple
97
+ - name: aria-checked
98
+ value: true | false
99
+ description: Used for single selection mode (radio behavior)
100
+ - name: aria-pressed
101
+ value: true | false
102
+ description: Used for multiple selection mode (toggle behavior)
103
+ related:
104
+ - toggle
105
+ - button_group
106
+ - radio_button
data/docs/components/tooltip.yml ADDED
@@ -0,0 +1,75 @@
1
+ ---
2
+ name: Tooltip
3
+ slug: tooltip
4
+ category: overlay
5
+ description: Tooltip - Phlex implementation
6
+ anatomy:
7
+ - name: Tooltip
8
+ description: Root container for tooltip. Manages tooltip state via Stimulus controller.
9
+ required: true
10
+ - name: Content
11
+ description: The popup content that displays tooltip information.
12
+ required: true
13
+ - name: Trigger
14
+ description: The interactive element that shows/hides the tooltip on hover/focus.
15
+ required: true
16
+ features:
17
+ - Keyboard navigation
18
+ - Form integration
19
+ api:
20
+ Tooltip:
21
+ description: Root container for tooltip. Manages tooltip state via Stimulus controller.
22
+ parameters: []
23
+ data_attributes: []
24
+ css_variables: []
25
+ Content:
26
+ description: The popup content that displays tooltip information.
27
+ parameters:
28
+ - name: side
29
+ type: String
30
+ default: top
31
+ description: Which side to display on
32
+ - name: align
33
+ type: String
34
+ default: center
35
+ description: Alignment within container
36
+ - name: side_offset
37
+ type: Integer
38
+ default: '4'
39
+ description: The side offset
40
+ data_attributes: []
41
+ css_variables: []
42
+ Trigger:
43
+ description: The interactive element that shows/hides the tooltip on hover/focus.
44
+ parameters:
45
+ - name: as_child
46
+ type: Boolean
47
+ default: 'false'
48
+ description: When true, yields attributes to block instead of rendering wrapper
49
+ data_attributes: []
50
+ css_variables: []
51
+ accessibility:
52
+ aria_pattern: Tooltip
53
+ w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
54
+ description: Implements the WAI-ARIA Tooltip pattern with proper roles, states,
55
+ and keyboard navigation.
56
+ aria_attributes: []
57
+ keyboard:
58
+ - key: Escape
59
+ description: Closes the component
60
+ javascript:
61
+ controller: ui--tooltip
62
+ targets:
63
+ - trigger
64
+ - content
65
+ values:
66
+ - name: sideOffset
67
+ type: Number
68
+ description: The sideOffset
69
+ actions:
70
+ - show
71
+ - hide
72
+ events: []
73
+ related:
74
+ - popover
75
+ - hover_card
data/lib/ui/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module UI
2
- VERSION = "0.1.5"
2
+ VERSION = "0.1.6"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fernandes-ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.5
4
+ version: 0.1.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - Celso Fernandes
@@ -601,6 +601,10 @@ files:
601
601
  - app/components/ui/sidebar_separator.rb
602
602
  - app/components/ui/sidebar_trigger.rb
603
603
  - app/components/ui/skeleton.rb
604
+ - app/components/ui/slider.rb
605
+ - app/components/ui/slider_range.rb
606
+ - app/components/ui/slider_thumb.rb
607
+ - app/components/ui/slider_track.rb
604
608
  - app/components/ui/small.rb
605
609
  - app/components/ui/sonner_toaster.rb
606
610
  - app/components/ui/spinner.rb
@@ -1175,6 +1179,62 @@ files:
1175
1179
  - app/views/ui/tooltip/_trigger.html.erb
1176
1180
  - config/importmap.rb
1177
1181
  - config/routes.rb
1182
+ - docs/components/ANNOTATIONS.md
1183
+ - docs/components/accordion.yml
1184
+ - docs/components/alert.yml
1185
+ - docs/components/alert_dialog.yml
1186
+ - docs/components/aspect_ratio.yml
1187
+ - docs/components/avatar.yml
1188
+ - docs/components/badge.yml
1189
+ - docs/components/breadcrumb.yml
1190
+ - docs/components/button.yml
1191
+ - docs/components/button_group.yml
1192
+ - docs/components/calendar.yml
1193
+ - docs/components/card.yml
1194
+ - docs/components/carousel.yml
1195
+ - docs/components/checkbox.yml
1196
+ - docs/components/collapsible.yml
1197
+ - docs/components/combobox.yml
1198
+ - docs/components/command.yml
1199
+ - docs/components/context_menu.yml
1200
+ - docs/components/dialog.yml
1201
+ - docs/components/drawer.yml
1202
+ - docs/components/dropdown_menu.yml
1203
+ - docs/components/empty.yml
1204
+ - docs/components/field.yml
1205
+ - docs/components/hover_card.yml
1206
+ - docs/components/input.yml
1207
+ - docs/components/input_group.yml
1208
+ - docs/components/input_group_addon.yml
1209
+ - docs/components/input_group_button.yml
1210
+ - docs/components/input_otp.yml
1211
+ - docs/components/input_otp_slot.yml
1212
+ - docs/components/item.yml
1213
+ - docs/components/kbd.yml
1214
+ - docs/components/label.yml
1215
+ - docs/components/menubar.yml
1216
+ - docs/components/menubar_menu.yml
1217
+ - docs/components/navigation_menu.yml
1218
+ - docs/components/pagination.yml
1219
+ - docs/components/popover.yml
1220
+ - docs/components/progress.yml
1221
+ - docs/components/radio_button.yml
1222
+ - docs/components/resizable.yml
1223
+ - docs/components/scroll_area.yml
1224
+ - docs/components/select.yml
1225
+ - docs/components/separator.yml
1226
+ - docs/components/sheet.yml
1227
+ - docs/components/sidebar.yml
1228
+ - docs/components/skeleton.yml
1229
+ - docs/components/sonner.yml
1230
+ - docs/components/spinner.yml
1231
+ - docs/components/switch.yml
1232
+ - docs/components/table.yml
1233
+ - docs/components/tabs.yml
1234
+ - docs/components/textarea.yml
1235
+ - docs/components/toggle.yml
1236
+ - docs/components/toggle_group.yml
1237
+ - docs/components/tooltip.yml
1178
1238
  - lib/fernandes-ui.rb
1179
1239
  - lib/generators/ui/css_generator.rb
1180
1240
  - lib/generators/ui/install/templates/Procfile.dev