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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/ui.esm.js +0 -1
- data/app/assets/javascripts/ui.js +0 -1
- data/app/components/ui/slider.rb +80 -0
- data/app/components/ui/slider_range.rb +33 -0
- data/app/components/ui/slider_thumb.rb +47 -0
- data/app/components/ui/slider_track.rb +35 -0
- data/app/javascript/ui/common.js +0 -1
- data/docs/components/ANNOTATIONS.md +220 -0
- data/docs/components/accordion.yml +109 -0
- data/docs/components/alert.yml +47 -0
- data/docs/components/alert_dialog.yml +151 -0
- data/docs/components/aspect_ratio.yml +37 -0
- data/docs/components/avatar.yml +55 -0
- data/docs/components/badge.yml +24 -0
- data/docs/components/breadcrumb.yml +76 -0
- data/docs/components/button.yml +56 -0
- data/docs/components/button_group.yml +67 -0
- data/docs/components/calendar.yml +166 -0
- data/docs/components/card.yml +99 -0
- data/docs/components/carousel.yml +100 -0
- data/docs/components/checkbox.yml +59 -0
- data/docs/components/collapsible.yml +74 -0
- data/docs/components/combobox.yml +21 -0
- data/docs/components/command.yml +144 -0
- data/docs/components/context_menu.yml +124 -0
- data/docs/components/dialog.yml +155 -0
- data/docs/components/drawer.yml +219 -0
- data/docs/components/dropdown_menu.yml +151 -0
- data/docs/components/empty.yml +88 -0
- data/docs/components/field.yml +81 -0
- data/docs/components/hover_card.yml +75 -0
- data/docs/components/input.yml +51 -0
- data/docs/components/input_group.yml +37 -0
- data/docs/components/input_group_addon.yml +24 -0
- data/docs/components/input_group_button.yml +30 -0
- data/docs/components/input_otp.yml +80 -0
- data/docs/components/input_otp_slot.yml +39 -0
- data/docs/components/item.yml +84 -0
- data/docs/components/kbd.yml +26 -0
- data/docs/components/label.yml +26 -0
- data/docs/components/menubar.yml +201 -0
- data/docs/components/menubar_menu.yml +21 -0
- data/docs/components/navigation_menu.yml +161 -0
- data/docs/components/pagination.yml +86 -0
- data/docs/components/popover.yml +105 -0
- data/docs/components/progress.yml +37 -0
- data/docs/components/radio_button.yml +52 -0
- data/docs/components/resizable.yml +44 -0
- data/docs/components/scroll_area.yml +76 -0
- data/docs/components/select.yml +195 -0
- data/docs/components/separator.yml +26 -0
- data/docs/components/sheet.yml +133 -0
- data/docs/components/sidebar.yml +138 -0
- data/docs/components/skeleton.yml +17 -0
- data/docs/components/sonner.yml +46 -0
- data/docs/components/spinner.yml +22 -0
- data/docs/components/switch.yml +72 -0
- data/docs/components/table.yml +32 -0
- data/docs/components/tabs.yml +126 -0
- data/docs/components/textarea.yml +41 -0
- data/docs/components/toggle.yml +92 -0
- data/docs/components/toggle_group.yml +106 -0
- data/docs/components/tooltip.yml +75 -0
- data/lib/ui/version.rb +1 -1
- metadata +61 -1
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Dialog
|
|
3
|
+
slug: dialog
|
|
4
|
+
category: overlay
|
|
5
|
+
anatomy:
|
|
6
|
+
- name: Dialog
|
|
7
|
+
description: Root container with state management
|
|
8
|
+
required: true
|
|
9
|
+
- name: Close
|
|
10
|
+
description: Button to close/dismiss the component
|
|
11
|
+
required: false
|
|
12
|
+
- name: Content
|
|
13
|
+
description: Main content container
|
|
14
|
+
required: true
|
|
15
|
+
- name: Description
|
|
16
|
+
description: Descriptive text element
|
|
17
|
+
required: false
|
|
18
|
+
- name: Footer
|
|
19
|
+
description: Footer section with actions
|
|
20
|
+
required: false
|
|
21
|
+
- name: Header
|
|
22
|
+
description: Header section with title and controls
|
|
23
|
+
required: false
|
|
24
|
+
- name: Overlay
|
|
25
|
+
description: Background overlay that dims the page
|
|
26
|
+
required: false
|
|
27
|
+
- name: Title
|
|
28
|
+
description: Title text element
|
|
29
|
+
required: false
|
|
30
|
+
- name: Trigger
|
|
31
|
+
description: Button or element that activates the component
|
|
32
|
+
required: true
|
|
33
|
+
features:
|
|
34
|
+
- Custom styling with Tailwind classes
|
|
35
|
+
- Focus management
|
|
36
|
+
api:
|
|
37
|
+
Dialog:
|
|
38
|
+
description: ''
|
|
39
|
+
parameters:
|
|
40
|
+
- name: open
|
|
41
|
+
type: Boolean
|
|
42
|
+
default: 'false'
|
|
43
|
+
description: Whether the element is open
|
|
44
|
+
- name: close_on_escape
|
|
45
|
+
type: Boolean
|
|
46
|
+
default: 'true'
|
|
47
|
+
description: The close on escape
|
|
48
|
+
- name: close_on_overlay_click
|
|
49
|
+
type: Boolean
|
|
50
|
+
default: 'true'
|
|
51
|
+
description: The close on overlay click
|
|
52
|
+
data_attributes: []
|
|
53
|
+
css_variables: []
|
|
54
|
+
Close:
|
|
55
|
+
description: ''
|
|
56
|
+
parameters:
|
|
57
|
+
- name: variant
|
|
58
|
+
type: Symbol
|
|
59
|
+
default: ":outline"
|
|
60
|
+
description: Visual style variant
|
|
61
|
+
- name: size
|
|
62
|
+
type: Symbol
|
|
63
|
+
default: ":default"
|
|
64
|
+
description: Size of the element
|
|
65
|
+
data_attributes: []
|
|
66
|
+
css_variables: []
|
|
67
|
+
Content:
|
|
68
|
+
description: ''
|
|
69
|
+
parameters:
|
|
70
|
+
- name: open
|
|
71
|
+
type: Boolean
|
|
72
|
+
default: 'false'
|
|
73
|
+
description: Whether the element is open
|
|
74
|
+
data_attributes: []
|
|
75
|
+
css_variables: []
|
|
76
|
+
Description:
|
|
77
|
+
description: ''
|
|
78
|
+
parameters: []
|
|
79
|
+
data_attributes: []
|
|
80
|
+
css_variables: []
|
|
81
|
+
Footer:
|
|
82
|
+
description: ''
|
|
83
|
+
parameters: []
|
|
84
|
+
data_attributes: []
|
|
85
|
+
css_variables: []
|
|
86
|
+
Header:
|
|
87
|
+
description: ''
|
|
88
|
+
parameters: []
|
|
89
|
+
data_attributes: []
|
|
90
|
+
css_variables: []
|
|
91
|
+
Overlay:
|
|
92
|
+
description: ''
|
|
93
|
+
parameters:
|
|
94
|
+
- name: open
|
|
95
|
+
type: Boolean
|
|
96
|
+
default: 'false'
|
|
97
|
+
description: Whether the element is open
|
|
98
|
+
data_attributes: []
|
|
99
|
+
css_variables: []
|
|
100
|
+
Title:
|
|
101
|
+
description: ''
|
|
102
|
+
parameters: []
|
|
103
|
+
data_attributes: []
|
|
104
|
+
css_variables: []
|
|
105
|
+
Trigger:
|
|
106
|
+
description: ''
|
|
107
|
+
parameters:
|
|
108
|
+
- name: as_child
|
|
109
|
+
type: Boolean
|
|
110
|
+
default: 'false'
|
|
111
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
112
|
+
- name: variant
|
|
113
|
+
type: Symbol
|
|
114
|
+
default: ":outline"
|
|
115
|
+
description: Visual style variant
|
|
116
|
+
- name: size
|
|
117
|
+
type: Symbol
|
|
118
|
+
default: ":default"
|
|
119
|
+
description: Size of the element
|
|
120
|
+
data_attributes: []
|
|
121
|
+
css_variables: []
|
|
122
|
+
accessibility:
|
|
123
|
+
aria_pattern: Dialog (Modal)
|
|
124
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
|
125
|
+
description: Implements the WAI-ARIA Dialog (Modal) pattern with proper roles, states,
|
|
126
|
+
and keyboard navigation.
|
|
127
|
+
aria_attributes: []
|
|
128
|
+
keyboard:
|
|
129
|
+
- key: Escape
|
|
130
|
+
description: Closes the component
|
|
131
|
+
javascript:
|
|
132
|
+
controller: ui--dialog
|
|
133
|
+
targets:
|
|
134
|
+
- container
|
|
135
|
+
- overlay
|
|
136
|
+
- content
|
|
137
|
+
values:
|
|
138
|
+
- name: open
|
|
139
|
+
type: Boolean
|
|
140
|
+
description: Controls open state
|
|
141
|
+
actions:
|
|
142
|
+
- open
|
|
143
|
+
- close
|
|
144
|
+
- show
|
|
145
|
+
- hide
|
|
146
|
+
- closeOnOverlayClick
|
|
147
|
+
events:
|
|
148
|
+
- name: dialog:open
|
|
149
|
+
description: Fired when dialog open
|
|
150
|
+
- name: dialog:close
|
|
151
|
+
description: Fired when dialog close
|
|
152
|
+
related:
|
|
153
|
+
- alert_dialog
|
|
154
|
+
- drawer
|
|
155
|
+
- sheet
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Drawer
|
|
3
|
+
slug: drawer
|
|
4
|
+
category: overlay
|
|
5
|
+
anatomy:
|
|
6
|
+
- name: Drawer
|
|
7
|
+
description: Root container with state management
|
|
8
|
+
required: true
|
|
9
|
+
- name: Close
|
|
10
|
+
description: Button to close/dismiss the component
|
|
11
|
+
required: false
|
|
12
|
+
- name: Content
|
|
13
|
+
description: Main content container
|
|
14
|
+
required: true
|
|
15
|
+
- name: Description
|
|
16
|
+
description: Descriptive text element
|
|
17
|
+
required: false
|
|
18
|
+
- name: Footer
|
|
19
|
+
description: Footer section with actions
|
|
20
|
+
required: false
|
|
21
|
+
- name: Handle
|
|
22
|
+
description: Draggable handle element
|
|
23
|
+
required: false
|
|
24
|
+
- name: Header
|
|
25
|
+
description: Header section with title and controls
|
|
26
|
+
required: false
|
|
27
|
+
- name: Overlay
|
|
28
|
+
description: Background overlay that dims the page
|
|
29
|
+
required: false
|
|
30
|
+
- name: Title
|
|
31
|
+
description: Title text element
|
|
32
|
+
required: false
|
|
33
|
+
- name: Trigger
|
|
34
|
+
description: Button or element that activates the component
|
|
35
|
+
required: true
|
|
36
|
+
features:
|
|
37
|
+
- Custom styling with Tailwind classes
|
|
38
|
+
- Focus management
|
|
39
|
+
- Animation support
|
|
40
|
+
api:
|
|
41
|
+
Drawer:
|
|
42
|
+
description: ''
|
|
43
|
+
parameters:
|
|
44
|
+
- name: open
|
|
45
|
+
type: Boolean
|
|
46
|
+
default: 'false'
|
|
47
|
+
description: Whether the element is open
|
|
48
|
+
- name: direction
|
|
49
|
+
type: String
|
|
50
|
+
default: bottom
|
|
51
|
+
description: The direction
|
|
52
|
+
- name: dismissible
|
|
53
|
+
type: Boolean
|
|
54
|
+
default: 'true'
|
|
55
|
+
description: The dismissible
|
|
56
|
+
- name: modal
|
|
57
|
+
type: Boolean
|
|
58
|
+
default: 'true'
|
|
59
|
+
description: The modal
|
|
60
|
+
- name: snap_points
|
|
61
|
+
type: String
|
|
62
|
+
default: nil
|
|
63
|
+
description: The snap points
|
|
64
|
+
- name: active_snap_point
|
|
65
|
+
type: String
|
|
66
|
+
default: nil
|
|
67
|
+
description: The active snap point
|
|
68
|
+
- name: fade_from_index
|
|
69
|
+
type: String
|
|
70
|
+
default: nil
|
|
71
|
+
description: The fade from index
|
|
72
|
+
- name: snap_to_sequential_point
|
|
73
|
+
type: Boolean
|
|
74
|
+
default: 'false'
|
|
75
|
+
description: The snap to sequential point
|
|
76
|
+
- name: handle_only
|
|
77
|
+
type: Boolean
|
|
78
|
+
default: 'false'
|
|
79
|
+
description: The handle only
|
|
80
|
+
- name: reposition_inputs
|
|
81
|
+
type: Boolean
|
|
82
|
+
default: 'true'
|
|
83
|
+
description: The reposition inputs
|
|
84
|
+
data_attributes: []
|
|
85
|
+
css_variables: []
|
|
86
|
+
Close:
|
|
87
|
+
description: ''
|
|
88
|
+
parameters:
|
|
89
|
+
- name: variant
|
|
90
|
+
type: Symbol
|
|
91
|
+
default: ":outline"
|
|
92
|
+
description: Visual style variant
|
|
93
|
+
- name: size
|
|
94
|
+
type: Symbol
|
|
95
|
+
default: ":default"
|
|
96
|
+
description: Size of the element
|
|
97
|
+
data_attributes: []
|
|
98
|
+
css_variables: []
|
|
99
|
+
Content:
|
|
100
|
+
description: ''
|
|
101
|
+
parameters:
|
|
102
|
+
- name: open
|
|
103
|
+
type: Boolean
|
|
104
|
+
default: 'false'
|
|
105
|
+
description: Whether the element is open
|
|
106
|
+
- name: direction
|
|
107
|
+
type: String
|
|
108
|
+
default: bottom
|
|
109
|
+
description: The direction
|
|
110
|
+
data_attributes: []
|
|
111
|
+
css_variables: []
|
|
112
|
+
Description:
|
|
113
|
+
description: ''
|
|
114
|
+
parameters: []
|
|
115
|
+
data_attributes: []
|
|
116
|
+
css_variables: []
|
|
117
|
+
Footer:
|
|
118
|
+
description: ''
|
|
119
|
+
parameters: []
|
|
120
|
+
data_attributes: []
|
|
121
|
+
css_variables: []
|
|
122
|
+
Handle:
|
|
123
|
+
description: ''
|
|
124
|
+
parameters: []
|
|
125
|
+
data_attributes: []
|
|
126
|
+
css_variables: []
|
|
127
|
+
Header:
|
|
128
|
+
description: ''
|
|
129
|
+
parameters: []
|
|
130
|
+
data_attributes: []
|
|
131
|
+
css_variables: []
|
|
132
|
+
Overlay:
|
|
133
|
+
description: ''
|
|
134
|
+
parameters:
|
|
135
|
+
- name: open
|
|
136
|
+
type: Boolean
|
|
137
|
+
default: 'false'
|
|
138
|
+
description: Whether the element is open
|
|
139
|
+
data_attributes: []
|
|
140
|
+
css_variables: []
|
|
141
|
+
Title:
|
|
142
|
+
description: ''
|
|
143
|
+
parameters: []
|
|
144
|
+
data_attributes: []
|
|
145
|
+
css_variables: []
|
|
146
|
+
Trigger:
|
|
147
|
+
description: ''
|
|
148
|
+
parameters:
|
|
149
|
+
- name: as_child
|
|
150
|
+
type: Boolean
|
|
151
|
+
default: 'false'
|
|
152
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
153
|
+
- name: variant
|
|
154
|
+
type: Symbol
|
|
155
|
+
default: ":outline"
|
|
156
|
+
description: Visual style variant
|
|
157
|
+
- name: size
|
|
158
|
+
type: Symbol
|
|
159
|
+
default: ":default"
|
|
160
|
+
description: Size of the element
|
|
161
|
+
data_attributes: []
|
|
162
|
+
css_variables: []
|
|
163
|
+
accessibility:
|
|
164
|
+
aria_pattern: Dialog (Modal)
|
|
165
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
|
166
|
+
description: Implements the WAI-ARIA Dialog (Modal) pattern with proper roles, states,
|
|
167
|
+
and keyboard navigation.
|
|
168
|
+
aria_attributes: []
|
|
169
|
+
keyboard:
|
|
170
|
+
- key: Escape
|
|
171
|
+
description: Closes the component
|
|
172
|
+
- key: End
|
|
173
|
+
description: Moves focus to last item
|
|
174
|
+
javascript:
|
|
175
|
+
controller: ui--drawer
|
|
176
|
+
targets:
|
|
177
|
+
- container
|
|
178
|
+
- overlay
|
|
179
|
+
- content
|
|
180
|
+
- handle
|
|
181
|
+
values:
|
|
182
|
+
- name: open
|
|
183
|
+
type: Boolean
|
|
184
|
+
description: Controls open state
|
|
185
|
+
actions:
|
|
186
|
+
- open
|
|
187
|
+
- close
|
|
188
|
+
- closeOnOverlayClick
|
|
189
|
+
- startDrag
|
|
190
|
+
- endDrag
|
|
191
|
+
- snapPointToPixels
|
|
192
|
+
- calculateSnapPosition
|
|
193
|
+
- findClosestSnapPointIndex
|
|
194
|
+
- snapTo
|
|
195
|
+
- snapPointToPercentage
|
|
196
|
+
- isHorizontalDirection
|
|
197
|
+
- isVerticalDirection
|
|
198
|
+
- isClosingDirection
|
|
199
|
+
- calculateVelocity
|
|
200
|
+
- applyDamping
|
|
201
|
+
- shouldIgnoreDrag
|
|
202
|
+
- isHandleEvent
|
|
203
|
+
- resetPosition
|
|
204
|
+
- calculateOverlayOpacity
|
|
205
|
+
- show
|
|
206
|
+
- hide
|
|
207
|
+
- animateToClosedPosition
|
|
208
|
+
- cleanupAfterClose
|
|
209
|
+
- isMobile
|
|
210
|
+
- hasSnapPoints
|
|
211
|
+
- positionAtClosed
|
|
212
|
+
- animateToOpen
|
|
213
|
+
- cleanupEscapeHandler
|
|
214
|
+
- applyTransform
|
|
215
|
+
- dispatchEvent
|
|
216
|
+
events: []
|
|
217
|
+
related:
|
|
218
|
+
- dialog
|
|
219
|
+
- sheet
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Dropdown Menu
|
|
3
|
+
slug: dropdown_menu
|
|
4
|
+
category: overlay
|
|
5
|
+
description: DropdownMenu - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Dropdown Menu
|
|
8
|
+
description: Container for dropdown menus with Stimulus controller for interactivity.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Menu items container with animations and positioning.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Item
|
|
14
|
+
description: Individual menu item that can be rendered as a link or div.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Label
|
|
17
|
+
description: Label for menu sections to organize items.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Separator
|
|
20
|
+
description: Visual separator between menu items.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Shortcut
|
|
23
|
+
description: Keyboard shortcut indicator displayed at the end of menu items.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Sub
|
|
26
|
+
description: Container for submenu with relative positioning.
|
|
27
|
+
required: false
|
|
28
|
+
- name: Sub Content
|
|
29
|
+
description: Submenu items container positioned to the right of the trigger.
|
|
30
|
+
required: true
|
|
31
|
+
- name: Sub Trigger
|
|
32
|
+
description: Item that opens a submenu on hover.
|
|
33
|
+
required: true
|
|
34
|
+
- name: Trigger
|
|
35
|
+
description: Wrapper that adds toggle action to child element.
|
|
36
|
+
required: true
|
|
37
|
+
features:
|
|
38
|
+
- Custom styling with Tailwind classes
|
|
39
|
+
api:
|
|
40
|
+
Dropdown Menu:
|
|
41
|
+
description: Container for dropdown menus with Stimulus controller for interactivity.
|
|
42
|
+
parameters:
|
|
43
|
+
- name: as_child
|
|
44
|
+
type: Boolean
|
|
45
|
+
default: 'false'
|
|
46
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
47
|
+
- name: placement
|
|
48
|
+
type: String
|
|
49
|
+
default: bottom-start
|
|
50
|
+
description: The placement
|
|
51
|
+
- name: offset
|
|
52
|
+
type: Integer
|
|
53
|
+
default: '4'
|
|
54
|
+
description: The offset
|
|
55
|
+
- name: flip
|
|
56
|
+
type: Boolean
|
|
57
|
+
default: 'true'
|
|
58
|
+
description: The flip
|
|
59
|
+
data_attributes: []
|
|
60
|
+
css_variables: []
|
|
61
|
+
Content:
|
|
62
|
+
description: Menu items container with animations and positioning.
|
|
63
|
+
parameters:
|
|
64
|
+
- name: side_offset
|
|
65
|
+
type: Integer
|
|
66
|
+
default: '4'
|
|
67
|
+
description: The side offset
|
|
68
|
+
data_attributes: []
|
|
69
|
+
css_variables: []
|
|
70
|
+
Item:
|
|
71
|
+
description: Individual menu item that can be rendered as a link or div.
|
|
72
|
+
parameters:
|
|
73
|
+
- name: href
|
|
74
|
+
type: String
|
|
75
|
+
default: nil
|
|
76
|
+
description: The href
|
|
77
|
+
- name: inset
|
|
78
|
+
type: Boolean
|
|
79
|
+
default: 'false'
|
|
80
|
+
description: The inset
|
|
81
|
+
- name: variant
|
|
82
|
+
type: String
|
|
83
|
+
default: default
|
|
84
|
+
description: Visual style variant
|
|
85
|
+
data_attributes: []
|
|
86
|
+
css_variables: []
|
|
87
|
+
Label:
|
|
88
|
+
description: Label for menu sections to organize items.
|
|
89
|
+
parameters:
|
|
90
|
+
- name: inset
|
|
91
|
+
type: Boolean
|
|
92
|
+
default: 'false'
|
|
93
|
+
description: The inset
|
|
94
|
+
data_attributes: []
|
|
95
|
+
css_variables: []
|
|
96
|
+
Separator:
|
|
97
|
+
description: Visual separator between menu items.
|
|
98
|
+
parameters: []
|
|
99
|
+
data_attributes: []
|
|
100
|
+
css_variables: []
|
|
101
|
+
Shortcut:
|
|
102
|
+
description: Keyboard shortcut indicator displayed at the end of menu items.
|
|
103
|
+
parameters: []
|
|
104
|
+
data_attributes: []
|
|
105
|
+
css_variables: []
|
|
106
|
+
Sub:
|
|
107
|
+
description: Container for submenu with relative positioning.
|
|
108
|
+
parameters: []
|
|
109
|
+
data_attributes: []
|
|
110
|
+
css_variables: []
|
|
111
|
+
Sub Content:
|
|
112
|
+
description: Submenu items container positioned to the right of the trigger.
|
|
113
|
+
parameters:
|
|
114
|
+
- name: side
|
|
115
|
+
type: String
|
|
116
|
+
default: right
|
|
117
|
+
description: Which side to display on
|
|
118
|
+
- name: align
|
|
119
|
+
type: String
|
|
120
|
+
default: start
|
|
121
|
+
description: Alignment within container
|
|
122
|
+
data_attributes: []
|
|
123
|
+
css_variables: []
|
|
124
|
+
Sub Trigger:
|
|
125
|
+
description: Item that opens a submenu on hover.
|
|
126
|
+
parameters:
|
|
127
|
+
- name: inset
|
|
128
|
+
type: Boolean
|
|
129
|
+
default: 'false'
|
|
130
|
+
description: The inset
|
|
131
|
+
data_attributes: []
|
|
132
|
+
css_variables: []
|
|
133
|
+
Trigger:
|
|
134
|
+
description: Wrapper that adds toggle action to child element.
|
|
135
|
+
parameters:
|
|
136
|
+
- name: as_child
|
|
137
|
+
type: Boolean
|
|
138
|
+
default: 'false'
|
|
139
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
140
|
+
data_attributes: []
|
|
141
|
+
css_variables: []
|
|
142
|
+
accessibility:
|
|
143
|
+
aria_pattern: Menu Button
|
|
144
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
|
|
145
|
+
description: Implements the WAI-ARIA Menu Button pattern with proper roles, states,
|
|
146
|
+
and keyboard navigation.
|
|
147
|
+
aria_attributes: []
|
|
148
|
+
related:
|
|
149
|
+
- context_menu
|
|
150
|
+
- menubar
|
|
151
|
+
- select
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Empty
|
|
3
|
+
slug: empty
|
|
4
|
+
category: data
|
|
5
|
+
description: Displays empty states in applications with customizable media, titles, descriptions, and actions.
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Empty
|
|
8
|
+
description: Root container for empty state display with centered layout and dashed border.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Header
|
|
11
|
+
description: Wraps the media, title, and description elements with proper spacing and alignment.
|
|
12
|
+
required: false
|
|
13
|
+
- name: Media
|
|
14
|
+
description: Displays visual content like icons, images, or avatars.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Title
|
|
17
|
+
description: Displays the main heading text of the empty state.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Description
|
|
20
|
+
description: Displays secondary text explaining the empty state or providing guidance.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Content
|
|
23
|
+
description: Container for action elements such as buttons, links, or inputs.
|
|
24
|
+
required: false
|
|
25
|
+
features:
|
|
26
|
+
- Custom styling with Tailwind classes
|
|
27
|
+
- Flexible composition with optional sub-components
|
|
28
|
+
- Icon variant for media with background styling
|
|
29
|
+
- Centered layout with responsive padding
|
|
30
|
+
api:
|
|
31
|
+
Empty:
|
|
32
|
+
description: Root container that provides centered flexbox layout with dashed border styling.
|
|
33
|
+
parameters: []
|
|
34
|
+
data_attributes:
|
|
35
|
+
- name: data-slot
|
|
36
|
+
value: '"empty"'
|
|
37
|
+
description: Identifies the empty state container
|
|
38
|
+
css_variables: []
|
|
39
|
+
Header:
|
|
40
|
+
description: Groups media, title, and description with centered alignment and consistent spacing.
|
|
41
|
+
parameters: []
|
|
42
|
+
data_attributes:
|
|
43
|
+
- name: data-slot
|
|
44
|
+
value: '"empty-header"'
|
|
45
|
+
description: Identifies the header container
|
|
46
|
+
css_variables: []
|
|
47
|
+
Media:
|
|
48
|
+
description: Container for visual content with optional icon variant styling.
|
|
49
|
+
parameters:
|
|
50
|
+
- name: variant
|
|
51
|
+
type: String
|
|
52
|
+
default: '"default"'
|
|
53
|
+
description: Visual style variant ("default" for transparent background, "icon" for muted background with rounded corners)
|
|
54
|
+
data_attributes:
|
|
55
|
+
- name: data-slot
|
|
56
|
+
value: '"empty-media"'
|
|
57
|
+
description: Identifies the media container
|
|
58
|
+
css_variables: []
|
|
59
|
+
Title:
|
|
60
|
+
description: Renders an h3 heading element with semibold font styling.
|
|
61
|
+
parameters: []
|
|
62
|
+
data_attributes:
|
|
63
|
+
- name: data-slot
|
|
64
|
+
value: '"empty-title"'
|
|
65
|
+
description: Identifies the title element
|
|
66
|
+
css_variables: []
|
|
67
|
+
Description:
|
|
68
|
+
description: Renders a paragraph element with muted text color for secondary information.
|
|
69
|
+
parameters: []
|
|
70
|
+
data_attributes:
|
|
71
|
+
- name: data-slot
|
|
72
|
+
value: '"empty-description"'
|
|
73
|
+
description: Identifies the description element
|
|
74
|
+
css_variables: []
|
|
75
|
+
Content:
|
|
76
|
+
description: Container for action elements like buttons or links placed below the header.
|
|
77
|
+
parameters: []
|
|
78
|
+
data_attributes:
|
|
79
|
+
- name: data-slot
|
|
80
|
+
value: '"empty-content"'
|
|
81
|
+
description: Identifies the content container
|
|
82
|
+
css_variables: []
|
|
83
|
+
accessibility:
|
|
84
|
+
description: Empty states should provide clear, descriptive text to help users understand why content is missing and what actions they can take.
|
|
85
|
+
aria_attributes: []
|
|
86
|
+
related:
|
|
87
|
+
- card
|
|
88
|
+
- alert
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Field
|
|
3
|
+
slug: field
|
|
4
|
+
category: forms
|
|
5
|
+
description: Field - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Field
|
|
8
|
+
description: Core wrapper for a single form field with support for different orientations.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Flex column that groups control and descriptions.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Description
|
|
14
|
+
description: Helper text for form fields.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Group
|
|
17
|
+
description: Layout wrapper that stacks Field components.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Label
|
|
20
|
+
description: Label styled for form fields with disability states.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Separator
|
|
23
|
+
description: Visual divider to separate sections inside FieldGroup.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Title
|
|
26
|
+
description: Title with label styling inside FieldContent.
|
|
27
|
+
required: false
|
|
28
|
+
features:
|
|
29
|
+
- Custom styling with Tailwind classes
|
|
30
|
+
- Form integration
|
|
31
|
+
api:
|
|
32
|
+
Field:
|
|
33
|
+
description: Core wrapper for a single form field with support for different orientations.
|
|
34
|
+
parameters:
|
|
35
|
+
- name: orientation
|
|
36
|
+
type: String
|
|
37
|
+
default: vertical
|
|
38
|
+
description: Orientation (horizontal or vertical)
|
|
39
|
+
- name: data_invalid
|
|
40
|
+
type: String
|
|
41
|
+
default: nil
|
|
42
|
+
description: The data invalid
|
|
43
|
+
data_attributes: []
|
|
44
|
+
css_variables: []
|
|
45
|
+
Content:
|
|
46
|
+
description: Flex column that groups control and descriptions.
|
|
47
|
+
parameters: []
|
|
48
|
+
data_attributes: []
|
|
49
|
+
css_variables: []
|
|
50
|
+
Description:
|
|
51
|
+
description: Helper text for form fields.
|
|
52
|
+
parameters: []
|
|
53
|
+
data_attributes: []
|
|
54
|
+
css_variables: []
|
|
55
|
+
Group:
|
|
56
|
+
description: Layout wrapper that stacks Field components.
|
|
57
|
+
parameters: []
|
|
58
|
+
data_attributes: []
|
|
59
|
+
css_variables: []
|
|
60
|
+
Label:
|
|
61
|
+
description: Label styled for form fields with disability states.
|
|
62
|
+
parameters:
|
|
63
|
+
- name: for_id
|
|
64
|
+
type: String
|
|
65
|
+
default: nil
|
|
66
|
+
description: The for id
|
|
67
|
+
data_attributes: []
|
|
68
|
+
css_variables: []
|
|
69
|
+
Separator:
|
|
70
|
+
description: Visual divider to separate sections inside FieldGroup.
|
|
71
|
+
parameters: []
|
|
72
|
+
data_attributes: []
|
|
73
|
+
css_variables: []
|
|
74
|
+
Title:
|
|
75
|
+
description: Title with label styling inside FieldContent.
|
|
76
|
+
parameters: []
|
|
77
|
+
data_attributes: []
|
|
78
|
+
css_variables: []
|
|
79
|
+
related:
|
|
80
|
+
- input
|
|
81
|
+
- label
|