@neynar/ui 0.1.1 → 0.1.2

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 (173) hide show
  1. package/dist/components/ui/accordion.d.ts +1 -25
  2. package/dist/components/ui/accordion.d.ts.map +1 -1
  3. package/dist/components/ui/alert-dialog.d.ts +240 -46
  4. package/dist/components/ui/alert-dialog.d.ts.map +1 -1
  5. package/dist/components/ui/alert.d.ts +73 -11
  6. package/dist/components/ui/alert.d.ts.map +1 -1
  7. package/dist/components/ui/aspect-ratio.d.ts +44 -10
  8. package/dist/components/ui/aspect-ratio.d.ts.map +1 -1
  9. package/dist/components/ui/avatar.d.ts +117 -33
  10. package/dist/components/ui/avatar.d.ts.map +1 -1
  11. package/dist/components/ui/badge.d.ts +50 -71
  12. package/dist/components/ui/badge.d.ts.map +1 -1
  13. package/dist/components/ui/breadcrumb.d.ts +231 -49
  14. package/dist/components/ui/breadcrumb.d.ts.map +1 -1
  15. package/dist/components/ui/button.d.ts +189 -71
  16. package/dist/components/ui/button.d.ts.map +1 -1
  17. package/dist/components/ui/calendar.d.ts +197 -40
  18. package/dist/components/ui/calendar.d.ts.map +1 -1
  19. package/dist/components/ui/card.d.ts +7 -22
  20. package/dist/components/ui/card.d.ts.map +1 -1
  21. package/dist/components/ui/carousel.d.ts +369 -99
  22. package/dist/components/ui/carousel.d.ts.map +1 -1
  23. package/dist/components/ui/chart.d.ts.map +1 -1
  24. package/dist/components/ui/checkbox.d.ts +110 -38
  25. package/dist/components/ui/checkbox.d.ts.map +1 -1
  26. package/dist/components/ui/collapsible.d.ts +246 -61
  27. package/dist/components/ui/collapsible.d.ts.map +1 -1
  28. package/dist/components/ui/combobox.d.ts +207 -159
  29. package/dist/components/ui/combobox.d.ts.map +1 -1
  30. package/dist/components/ui/command.d.ts +336 -67
  31. package/dist/components/ui/command.d.ts.map +1 -1
  32. package/dist/components/ui/container.d.ts +159 -64
  33. package/dist/components/ui/container.d.ts.map +1 -1
  34. package/dist/components/ui/context-menu.d.ts +321 -39
  35. package/dist/components/ui/context-menu.d.ts.map +1 -1
  36. package/dist/components/ui/date-picker.d.ts +113 -86
  37. package/dist/components/ui/date-picker.d.ts.map +1 -1
  38. package/dist/components/ui/dialog.d.ts +106 -25
  39. package/dist/components/ui/dialog.d.ts.map +1 -1
  40. package/dist/components/ui/drawer.d.ts +388 -59
  41. package/dist/components/ui/drawer.d.ts.map +1 -1
  42. package/dist/components/ui/dropdown-menu.d.ts +521 -74
  43. package/dist/components/ui/dropdown-menu.d.ts.map +1 -1
  44. package/dist/components/ui/empty-state.d.ts +148 -76
  45. package/dist/components/ui/empty-state.d.ts.map +1 -1
  46. package/dist/components/ui/hover-card.d.ts +253 -34
  47. package/dist/components/ui/hover-card.d.ts.map +1 -1
  48. package/dist/components/ui/input.d.ts +143 -44
  49. package/dist/components/ui/input.d.ts.map +1 -1
  50. package/dist/components/ui/label.d.ts +0 -8
  51. package/dist/components/ui/label.d.ts.map +1 -1
  52. package/dist/components/ui/menubar.d.ts +288 -46
  53. package/dist/components/ui/menubar.d.ts.map +1 -1
  54. package/dist/components/ui/navigation-menu.d.ts +444 -127
  55. package/dist/components/ui/navigation-menu.d.ts.map +1 -1
  56. package/dist/components/ui/pagination.d.ts +342 -66
  57. package/dist/components/ui/pagination.d.ts.map +1 -1
  58. package/dist/components/ui/popover.d.ts +0 -8
  59. package/dist/components/ui/popover.d.ts.map +1 -1
  60. package/dist/components/ui/progress.d.ts +88 -30
  61. package/dist/components/ui/progress.d.ts.map +1 -1
  62. package/dist/components/ui/radio-group.d.ts +189 -45
  63. package/dist/components/ui/radio-group.d.ts.map +1 -1
  64. package/dist/components/ui/resizable.d.ts +178 -62
  65. package/dist/components/ui/resizable.d.ts.map +1 -1
  66. package/dist/components/ui/scroll-area.d.ts +180 -21
  67. package/dist/components/ui/scroll-area.d.ts.map +1 -1
  68. package/dist/components/ui/select.d.ts +382 -60
  69. package/dist/components/ui/select.d.ts.map +1 -1
  70. package/dist/components/ui/separator.d.ts +52 -39
  71. package/dist/components/ui/separator.d.ts.map +1 -1
  72. package/dist/components/ui/sheet.d.ts +144 -27
  73. package/dist/components/ui/sheet.d.ts.map +1 -1
  74. package/dist/components/ui/sidebar.d.ts +81 -31
  75. package/dist/components/ui/sidebar.d.ts.map +1 -1
  76. package/dist/components/ui/skeleton.d.ts +94 -32
  77. package/dist/components/ui/skeleton.d.ts.map +1 -1
  78. package/dist/components/ui/slider.d.ts +37 -31
  79. package/dist/components/ui/slider.d.ts.map +1 -1
  80. package/dist/components/ui/sonner.d.ts +280 -46
  81. package/dist/components/ui/sonner.d.ts.map +1 -1
  82. package/dist/components/ui/stack.d.ts +289 -148
  83. package/dist/components/ui/stack.d.ts.map +1 -1
  84. package/dist/components/ui/stories/aspect-ratio.stories.d.ts +1 -2
  85. package/dist/components/ui/stories/aspect-ratio.stories.d.ts.map +1 -1
  86. package/dist/components/ui/stories/container.stories.d.ts +2 -3
  87. package/dist/components/ui/stories/container.stories.d.ts.map +1 -1
  88. package/dist/components/ui/stories/empty-state.stories.d.ts +2 -2
  89. package/dist/components/ui/stories/scroll-area.stories.d.ts +1 -2
  90. package/dist/components/ui/stories/scroll-area.stories.d.ts.map +1 -1
  91. package/dist/components/ui/stories/stack.stories.d.ts +1 -1
  92. package/dist/components/ui/stories/text-field.stories.d.ts +7 -1
  93. package/dist/components/ui/stories/text-field.stories.d.ts.map +1 -1
  94. package/dist/components/ui/switch.d.ts +44 -38
  95. package/dist/components/ui/switch.d.ts.map +1 -1
  96. package/dist/components/ui/table.d.ts +33 -0
  97. package/dist/components/ui/table.d.ts.map +1 -1
  98. package/dist/components/ui/tabs.d.ts +4 -22
  99. package/dist/components/ui/tabs.d.ts.map +1 -1
  100. package/dist/components/ui/text-field.d.ts +170 -84
  101. package/dist/components/ui/text-field.d.ts.map +1 -1
  102. package/dist/components/ui/textarea.d.ts +106 -29
  103. package/dist/components/ui/textarea.d.ts.map +1 -1
  104. package/dist/components/ui/theme-toggle.d.ts +190 -65
  105. package/dist/components/ui/theme-toggle.d.ts.map +1 -1
  106. package/dist/components/ui/theme.d.ts +107 -23
  107. package/dist/components/ui/theme.d.ts.map +1 -1
  108. package/dist/components/ui/toggle-group.d.ts +143 -67
  109. package/dist/components/ui/toggle-group.d.ts.map +1 -1
  110. package/dist/components/ui/toggle.d.ts +118 -30
  111. package/dist/components/ui/toggle.d.ts.map +1 -1
  112. package/dist/components/ui/tooltip.d.ts +152 -28
  113. package/dist/components/ui/tooltip.d.ts.map +1 -1
  114. package/dist/components/ui/typography.d.ts +452 -134
  115. package/dist/components/ui/typography.d.ts.map +1 -1
  116. package/dist/index.js +9388 -8281
  117. package/dist/index.js.map +1 -1
  118. package/dist/tsconfig.tsbuildinfo +1 -1
  119. package/llms.txt +173 -3
  120. package/package.json +5 -2
  121. package/src/components/ui/accordion.tsx +112 -27
  122. package/src/components/ui/alert-dialog.tsx +401 -46
  123. package/src/components/ui/alert.tsx +114 -11
  124. package/src/components/ui/aspect-ratio.tsx +69 -14
  125. package/src/components/ui/avatar.tsx +179 -33
  126. package/src/components/ui/badge.tsx +74 -75
  127. package/src/components/ui/breadcrumb.tsx +335 -50
  128. package/src/components/ui/button.tsx +198 -90
  129. package/src/components/ui/calendar.tsx +867 -43
  130. package/src/components/ui/card.tsx +140 -33
  131. package/src/components/ui/carousel.tsx +529 -98
  132. package/src/components/ui/chart.tsx +222 -1
  133. package/src/components/ui/checkbox.tsx +176 -38
  134. package/src/components/ui/collapsible.tsx +321 -67
  135. package/src/components/ui/combobox.tsx +284 -83
  136. package/src/components/ui/command.tsx +527 -67
  137. package/src/components/ui/container.tsx +217 -65
  138. package/src/components/ui/context-menu.tsx +716 -51
  139. package/src/components/ui/date-picker.tsx +228 -38
  140. package/src/components/ui/dialog.tsx +270 -33
  141. package/src/components/ui/drawer.tsx +546 -67
  142. package/src/components/ui/dropdown-menu.tsx +657 -74
  143. package/src/components/ui/empty-state.tsx +241 -82
  144. package/src/components/ui/hover-card.tsx +328 -39
  145. package/src/components/ui/input.tsx +207 -44
  146. package/src/components/ui/label.tsx +98 -8
  147. package/src/components/ui/menubar.tsx +587 -54
  148. package/src/components/ui/navigation-menu.tsx +557 -128
  149. package/src/components/ui/pagination.tsx +561 -79
  150. package/src/components/ui/popover.tsx +119 -8
  151. package/src/components/ui/progress.tsx +131 -29
  152. package/src/components/ui/radio-group.tsx +260 -51
  153. package/src/components/ui/resizable.tsx +289 -63
  154. package/src/components/ui/scroll-area.tsx +377 -66
  155. package/src/components/ui/select.tsx +545 -60
  156. package/src/components/ui/separator.tsx +146 -40
  157. package/src/components/ui/sheet.tsx +348 -31
  158. package/src/components/ui/sidebar.tsx +471 -29
  159. package/src/components/ui/skeleton.tsx +114 -32
  160. package/src/components/ui/slider.tsx +77 -31
  161. package/src/components/ui/sonner.tsx +574 -46
  162. package/src/components/ui/stack.tsx +423 -101
  163. package/src/components/ui/switch.tsx +78 -39
  164. package/src/components/ui/table.tsx +170 -4
  165. package/src/components/ui/tabs.tsx +108 -22
  166. package/src/components/ui/text-field.tsx +226 -81
  167. package/src/components/ui/textarea.tsx +180 -29
  168. package/src/components/ui/theme-toggle.tsx +313 -65
  169. package/src/components/ui/theme.tsx +117 -23
  170. package/src/components/ui/toggle-group.tsx +280 -69
  171. package/src/components/ui/toggle.tsx +124 -35
  172. package/src/components/ui/tooltip.tsx +239 -29
  173. package/src/components/ui/typography.tsx +1115 -165
@@ -1,80 +1,93 @@
1
1
  import * as React from "react";
2
2
  import * as SeparatorPrimitive from "@radix-ui/react-separator";
3
3
  /**
4
- * Separator component for visually dividing content sections
4
+ * Separator component for visually and semantically dividing content sections
5
5
  *
6
- * A flexible separator component built on Radix UI primitives that creates
6
+ * A flexible, accessible separator component built on Radix UI primitives that creates
7
7
  * visual or semantic divisions between content sections. Supports both horizontal
8
8
  * and vertical orientations with full accessibility features including decorative
9
- * and semantic separator modes for screen reader compatibility.
9
+ * and semantic separator modes for optimal screen reader compatibility.
10
+ *
11
+ * Built on Radix UI Separator primitive which automatically handles:
12
+ * - WAI-ARIA separator role compliance
13
+ * - Proper orientation data attributes
14
+ * - Screen reader visibility control via decorative prop
15
+ * - Keyboard navigation support for interactive separators
16
+ * - Semantic HTML structure with proper ARIA attributes
10
17
  *
11
18
  * @example
12
19
  * ```tsx
13
- * // Basic horizontal separator
14
- * <div>
15
- * <p>Above content</p>
20
+ * // Basic horizontal separator - decorative divider
21
+ * <div className="space-y-4">
22
+ * <p>Content above</p>
16
23
  * <Separator />
17
- * <p>Below content</p>
24
+ * <p>Content below</p>
18
25
  * </div>
19
26
  * ```
20
27
  *
21
28
  * @example
22
29
  * ```tsx
23
- * // Vertical separator in toolbars
24
- * <div className="flex items-center">
30
+ * // Vertical separator in toolbar layouts
31
+ * <div className="flex items-center space-x-2">
25
32
  * <button>Bold</button>
26
- * <Separator orientation="vertical" className="mx-2 h-6" />
27
33
  * <button>Italic</button>
34
+ * <Separator orientation="vertical" className="h-4" />
35
+ * <button>Underline</button>
36
+ * <button>Strike</button>
28
37
  * </div>
29
38
  * ```
30
39
  *
31
40
  * @example
32
41
  * ```tsx
33
- * // Semantic separator for navigation
34
- * <nav className="flex items-center">
35
- * <a href="/home">Home</a>
42
+ * // Semantic separator with screen reader support
43
+ * <nav className="flex items-center space-x-2">
44
+ * <a href="/dashboard">Dashboard</a>
36
45
  * <Separator
37
46
  * orientation="vertical"
38
47
  * decorative={false}
39
48
  * aria-label="Navigation separator"
40
- * className="mx-2 h-4"
49
+ * className="h-4"
41
50
  * />
42
- * <a href="/about">About</a>
51
+ * <a href="/settings">Settings</a>
43
52
  * </nav>
44
53
  * ```
45
54
  *
46
55
  * @example
47
56
  * ```tsx
48
- * // Custom styled separator
49
- * <Separator className="my-6 h-0.5 bg-gradient-to-r from-transparent via-border to-transparent" />
57
+ * // Custom styled separator with gradient
58
+ * <Separator className="my-8 h-px bg-gradient-to-r from-transparent via-border to-transparent" />
59
+ * ```
60
+ *
61
+ * @example
62
+ * ```tsx
63
+ * // Polymorphic separator using semantic HTML
64
+ * <article>
65
+ * <section>First section content</section>
66
+ * <Separator asChild decorative={false} aria-label="Section divider">
67
+ * <hr className="my-6" />
68
+ * </Separator>
69
+ * <section>Second section content</section>
70
+ * </article>
50
71
  * ```
51
72
  *
73
+ * @accessibility
74
+ * - Implements WAI-ARIA separator role automatically
75
+ * - Supports both decorative (visual-only) and semantic modes
76
+ * - When decorative=false, separator is announced by screen readers
77
+ * - Proper ARIA labeling support via aria-label or aria-labelledby
78
+ * - Orientation communicated via data-orientation attribute
79
+ * - Supports interactive separators with ARIA value properties
80
+ * - Keyboard navigation ready for focusable separator implementations
81
+ *
82
+ * @see {@link Button} for related interactive elements
52
83
  * @see {@link https://ui.shadcn.com/docs/components/separator} for design patterns
84
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/separator} for Radix UI API
85
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/separator/} for ARIA separator pattern
53
86
  * @since 1.0.0
54
- * @see {@link https://www.radix-ui.com/primitives/docs/components/separator} for API reference
55
- */
56
- /**
57
- * Props for the Separator component
58
- */
59
- type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root> & {
60
- /** Additional CSS class names to apply to the separator */
61
- className?: string;
62
- /** The orientation of the separator. @default "horizontal" */
63
- orientation?: "horizontal" | "vertical";
64
- /** Whether the separator is purely decorative (hidden from screen readers). @default true */
65
- decorative?: boolean;
66
- };
67
- /**
68
- * Separator component implementation
69
- *
70
- * @param className - Additional CSS class names to apply
71
- * @param orientation - The orientation of the separator ("horizontal" | "vertical")
72
- * @param decorative - Whether the separator is decorative (hidden from screen readers)
73
- * @param props - Additional props passed to the underlying Radix Separator primitive
74
87
  */
75
- declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
88
+ declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
76
89
  declare namespace Separator {
77
90
  var displayName: string;
78
91
  }
79
- export { Separator, type SeparatorProps };
92
+ export { Separator };
80
93
  //# sourceMappingURL=separator.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/ui/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAIhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH;;GAEG;AACH,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IAC3E,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;GAOG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,cAAc,2CAahB;kBAlBQ,SAAS;;;AAsBlB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}
1
+ {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/ui/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAkGhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAatD;kBAlBQ,SAAS;;;AAsBlB,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -113,7 +113,8 @@ declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.
113
113
  *
114
114
  * The trigger element that users interact with to open the sheet.
115
115
  * Use the `asChild` prop to render as a different element while
116
- * maintaining the trigger functionality.
116
+ * maintaining the trigger functionality. When clicked, opens the
117
+ * sheet and manages focus appropriately.
117
118
  *
118
119
  * @component
119
120
  * @example
@@ -134,7 +135,16 @@ declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.
134
135
  * </SheetTrigger>
135
136
  * ```
136
137
  *
137
- * @param asChild - When true, merges props with the child element instead of rendering a button
138
+ * @param asChild - When true, merges props with child element instead of rendering a button @default false
139
+ * @param children - Child element to render as the trigger. Required when asChild is true
140
+ *
141
+ * @accessibility
142
+ * - Automatically receives appropriate ARIA attributes
143
+ * - Manages focus when sheet opens and closes
144
+ * - Supports keyboard activation (Space and Enter)
145
+ *
146
+ * @see {@link SheetContent} For the content that this trigger opens
147
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger} Radix UI Dialog Trigger
138
148
  */
139
149
  declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
140
150
  /**
@@ -143,6 +153,7 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
143
153
  * A button that closes the sheet when clicked. Can be placed anywhere
144
154
  * within the sheet content. Use the `asChild` prop to render as a
145
155
  * different element while maintaining the close functionality.
156
+ * Multiple close buttons can be used throughout the sheet content.
146
157
  *
147
158
  * @component
148
159
  * @example
@@ -166,7 +177,16 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
166
177
  * </SheetClose>
167
178
  * ```
168
179
  *
169
- * @param asChild - When true, merges props with the child element instead of rendering a button
180
+ * @param asChild - When true, merges props with child element instead of rendering a button @default false
181
+ * @param children - Child element to render as the close button. Required when asChild is true
182
+ *
183
+ * @accessibility
184
+ * - Automatically receives appropriate ARIA attributes
185
+ * - Supports keyboard activation (Space and Enter)
186
+ * - Focus returns to trigger element after closing
187
+ *
188
+ * @see {@link SheetTrigger} For the element that opens the sheet
189
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close} Radix UI Dialog Close
170
190
  */
171
191
  declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
172
192
  /**
@@ -174,13 +194,13 @@ declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimi
174
194
  *
175
195
  * The primary content area of the sheet that slides in from the specified side.
176
196
  * Includes automatic overlay, portal rendering, and close button. Contains smooth
177
- * slide animations and responsive sizing.
197
+ * slide animations with responsive sizing and proper focus management.
178
198
  *
179
- * @component
180
- * @param side - Which side of the screen the sheet slides in from
181
- * @param className - Additional CSS classes for styling customization
182
- * @param children - Content to display inside the sheet
199
+ * Features automatic positioning based on the side prop:
200
+ * - Right/Left: Full height, responsive width (3/4 on mobile, max 384px on desktop)
201
+ * - Top/Bottom: Full width, auto height based on content
183
202
  *
203
+ * @component
184
204
  * @example
185
205
  * ```tsx
186
206
  * // Default right-side sheet
@@ -217,10 +237,28 @@ declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimi
217
237
  * </SheetContent>
218
238
  * ```
219
239
  *
240
+ * @param asChild - When true, merges props with child element instead of rendering a div @default false
241
+ * @param forceMount - Forces mounting when true. Useful for controlling animations with external state
242
+ * @param onCloseAutoFocus - Event handler called when focus moves to the trigger after closing
243
+ * @param onOpenAutoFocus - Event handler called when focus moves into the component after opening
244
+ * @param onEscapeKeyDown - Event handler called when the escape key is down. Can prevent default to disable escape key closing
245
+ * @param onPointerDownOutside - Event handler called when a pointer down event happens outside the component bounds
246
+ * @param onInteractOutside - Event handler called when an interaction happens outside the component bounds
247
+ * @param side - Which side of the screen the sheet slides in from @default "right"
248
+ * @param className - Additional CSS classes for styling customization
249
+ * @param children - Content to display inside the sheet
250
+ *
220
251
  * @accessibility
221
- * - Includes built-in close button with proper ARIA labels
222
- * - Focus trapped within content when open
223
- * - Supports all keyboard interactions
252
+ * - Includes built-in close button with proper ARIA labels and screen reader text
253
+ * - Focus automatically trapped within content when open
254
+ * - Escape key closes the sheet (can be prevented with onEscapeKeyDown)
255
+ * - Background overlay prevents interaction with page content
256
+ * - Focus returns to trigger element when closed
257
+ * - Supports all standard keyboard interactions
258
+ *
259
+ * @see {@link SheetHeader} For structured header content
260
+ * @see {@link SheetFooter} For action buttons
261
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content} Radix UI Dialog Content
224
262
  */
225
263
  declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
226
264
  side?: "top" | "right" | "bottom" | "left";
@@ -230,12 +268,13 @@ declare function SheetContent({ className, children, side, ...props }: React.Com
230
268
  *
231
269
  * A container for the sheet's title and description, positioned at the top
232
270
  * of the sheet content. Provides consistent spacing and layout for sheet headers.
271
+ * Should contain SheetTitle and optionally SheetDescription for proper
272
+ * accessibility and semantic structure.
233
273
  *
234
274
  * @component
235
- * @param className - Additional CSS classes for styling customization
236
- *
237
275
  * @example
238
276
  * ```tsx
277
+ * // Complete header with title and description
239
278
  * <SheetHeader>
240
279
  * <SheetTitle>Edit Profile</SheetTitle>
241
280
  * <SheetDescription>
@@ -243,11 +282,30 @@ declare function SheetContent({ className, children, side, ...props }: React.Com
243
282
  * </SheetDescription>
244
283
  * </SheetHeader>
245
284
  *
246
- * // With custom styling
247
- * <SheetHeader className="border-b pb-4">
248
- * <SheetTitle>Settings</SheetTitle>
285
+ * // Header with title only
286
+ * <SheetHeader>
287
+ * <SheetTitle>Quick Actions</SheetTitle>
288
+ * </SheetHeader>
289
+ *
290
+ * // With custom styling and border
291
+ * <SheetHeader className="border-b pb-4 mb-4">
292
+ * <SheetTitle>Advanced Settings</SheetTitle>
293
+ * <SheetDescription>
294
+ * Configure advanced options for your account.
295
+ * </SheetDescription>
249
296
  * </SheetHeader>
250
297
  * ```
298
+ *
299
+ * @param className - Additional CSS classes for styling customization
300
+ * @param children - Header content (typically SheetTitle and SheetDescription)
301
+ *
302
+ * @accessibility
303
+ * - Provides semantic structure for sheet content
304
+ * - Works with SheetTitle to properly label the sheet
305
+ * - Maintains proper heading hierarchy
306
+ *
307
+ * @see {@link SheetTitle} For the main sheet heading
308
+ * @see {@link SheetDescription} For additional context text
251
309
  */
252
310
  declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
253
311
  /**
@@ -255,12 +313,12 @@ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div"
255
313
  *
256
314
  * A container for action buttons positioned at the bottom of the sheet content.
257
315
  * Uses `mt-auto` to stick to the bottom and provides consistent spacing for buttons.
316
+ * Ideal for primary and secondary actions like Save/Cancel button pairs.
258
317
  *
259
318
  * @component
260
- * @param className - Additional CSS classes for styling customization
261
- *
262
319
  * @example
263
320
  * ```tsx
321
+ * // Standard save/cancel footer
264
322
  * <SheetFooter>
265
323
  * <SheetClose asChild>
266
324
  * <Button variant="outline">Cancel</Button>
@@ -275,7 +333,7 @@ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div"
275
333
  * </SheetClose>
276
334
  * </SheetFooter>
277
335
  *
278
- * // Custom layout
336
+ * // Custom layout with multiple action groups
279
337
  * <SheetFooter className="flex-row justify-between">
280
338
  * <Button variant="ghost">Reset</Button>
281
339
  * <div className="flex gap-2">
@@ -285,7 +343,25 @@ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div"
285
343
  * <Button>Save</Button>
286
344
  * </div>
287
345
  * </SheetFooter>
346
+ *
347
+ * // Footer with destructive action
348
+ * <SheetFooter>
349
+ * <Button variant="destructive">Delete Account</Button>
350
+ * <SheetClose asChild>
351
+ * <Button variant="outline">Keep Account</Button>
352
+ * </SheetClose>
353
+ * </SheetFooter>
288
354
  * ```
355
+ *
356
+ * @param className - Additional CSS classes for styling customization
357
+ * @param children - Footer content (typically action buttons)
358
+ *
359
+ * @accessibility
360
+ * - Provides semantic footer structure
361
+ * - Supports proper tab order for action buttons
362
+ * - Works with form submission patterns
363
+ *
364
+ * @see {@link SheetClose} For buttons that close the sheet
289
365
  */
290
366
  declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
291
367
  /**
@@ -293,12 +369,12 @@ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div"
293
369
  *
294
370
  * The main heading for the sheet content. Provides proper semantic heading
295
371
  * and accessibility labeling for screen readers. Should be used within SheetHeader.
372
+ * This component is required for proper accessibility - every sheet must have a title.
296
373
  *
297
374
  * @component
298
- * @param className - Additional CSS classes for styling customization
299
- *
300
375
  * @example
301
376
  * ```tsx
377
+ * // Standard usage in header
302
378
  * <SheetHeader>
303
379
  * <SheetTitle>Edit Profile</SheetTitle>
304
380
  * <SheetDescription>Update your profile information.</SheetDescription>
@@ -306,11 +382,29 @@ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div"
306
382
  *
307
383
  * // With custom styling
308
384
  * <SheetTitle className="text-lg text-blue-600">Settings</SheetTitle>
385
+ *
386
+ * // As a custom heading level
387
+ * <SheetTitle asChild>
388
+ * <h1 className="text-2xl font-bold">Important Notice</h1>
389
+ * </SheetTitle>
390
+ *
391
+ * // Dynamic title content
392
+ * <SheetTitle>Edit {selectedUser?.name || 'User'}</SheetTitle>
309
393
  * ```
310
394
  *
395
+ * @param asChild - When true, merges props with child element instead of rendering an h2 @default false
396
+ * @param className - Additional CSS classes for styling customization
397
+ * @param children - Title text content
398
+ *
311
399
  * @accessibility
312
- * - Automatically provides ARIA labeling for the sheet
313
- * - Renders as proper heading element
400
+ * - Required for proper sheet accessibility
401
+ * - Automatically provides ARIA labeling for the entire sheet
402
+ * - Renders as semantic heading element (h2 by default)
403
+ * - Screen readers announce this title when sheet opens
404
+ *
405
+ * @see {@link SheetHeader} For proper title placement
406
+ * @see {@link SheetDescription} For additional context
407
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title} Radix UI Dialog Title
314
408
  */
315
409
  declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
316
410
  /**
@@ -318,12 +412,12 @@ declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof
318
412
  *
319
413
  * Provides additional context about the sheet's purpose or instructions.
320
414
  * Appears below the title with muted styling. Should be used within SheetHeader.
415
+ * While optional, it's recommended for better accessibility and user understanding.
321
416
  *
322
417
  * @component
323
- * @param className - Additional CSS classes for styling customization
324
- *
325
418
  * @example
326
419
  * ```tsx
420
+ * // Standard usage with instructional text
327
421
  * <SheetHeader>
328
422
  * <SheetTitle>Edit Profile</SheetTitle>
329
423
  * <SheetDescription>
@@ -331,15 +425,38 @@ declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof
331
425
  * </SheetDescription>
332
426
  * </SheetHeader>
333
427
  *
334
- * // Optional description
428
+ * // Warning or important information
335
429
  * <SheetDescription className="text-orange-600">
336
430
  * This action cannot be undone.
337
431
  * </SheetDescription>
432
+ *
433
+ * // Custom styled description
434
+ * <SheetDescription asChild>
435
+ * <p className="text-sm text-gray-600 italic">
436
+ * Changes will be saved automatically.
437
+ * </p>
438
+ * </SheetDescription>
439
+ *
440
+ * // Contextual help description
441
+ * <SheetDescription>
442
+ * Use this form to update your notification preferences.
443
+ * Changes take effect immediately.
444
+ * </SheetDescription>
338
445
  * ```
339
446
  *
447
+ * @param asChild - When true, merges props with child element instead of rendering a p element @default false
448
+ * @param className - Additional CSS classes for styling customization
449
+ * @param children - Description text content
450
+ *
340
451
  * @accessibility
341
452
  * - Provides additional context for screen readers
342
- * - Linked to the sheet via ARIA attributes
453
+ * - Automatically linked to the sheet via ARIA attributes
454
+ * - Announced by screen readers when sheet opens
455
+ * - Helps users understand the sheet's purpose
456
+ *
457
+ * @see {@link SheetTitle} For the main sheet heading
458
+ * @see {@link SheetHeader} For proper description placement
459
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description} Radix UI Dialog Description
343
460
  */
344
461
  declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
345
462
  export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -1 +1 @@
1
- {"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AAKzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAkDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC5C,2CA4BA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAQnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,2CAQzD;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}
1
+ {"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AA+JzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAgGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC5C,2CA4BA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAQnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,2CAQzD;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}