@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.
- package/dist/components/ui/accordion.d.ts +1 -25
- package/dist/components/ui/accordion.d.ts.map +1 -1
- package/dist/components/ui/alert-dialog.d.ts +240 -46
- package/dist/components/ui/alert-dialog.d.ts.map +1 -1
- package/dist/components/ui/alert.d.ts +73 -11
- package/dist/components/ui/alert.d.ts.map +1 -1
- package/dist/components/ui/aspect-ratio.d.ts +44 -10
- package/dist/components/ui/aspect-ratio.d.ts.map +1 -1
- package/dist/components/ui/avatar.d.ts +117 -33
- package/dist/components/ui/avatar.d.ts.map +1 -1
- package/dist/components/ui/badge.d.ts +50 -71
- package/dist/components/ui/badge.d.ts.map +1 -1
- package/dist/components/ui/breadcrumb.d.ts +231 -49
- package/dist/components/ui/breadcrumb.d.ts.map +1 -1
- package/dist/components/ui/button.d.ts +189 -71
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/calendar.d.ts +197 -40
- package/dist/components/ui/calendar.d.ts.map +1 -1
- package/dist/components/ui/card.d.ts +7 -22
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/carousel.d.ts +369 -99
- package/dist/components/ui/carousel.d.ts.map +1 -1
- package/dist/components/ui/chart.d.ts.map +1 -1
- package/dist/components/ui/checkbox.d.ts +110 -38
- package/dist/components/ui/checkbox.d.ts.map +1 -1
- package/dist/components/ui/collapsible.d.ts +246 -61
- package/dist/components/ui/collapsible.d.ts.map +1 -1
- package/dist/components/ui/combobox.d.ts +207 -159
- package/dist/components/ui/combobox.d.ts.map +1 -1
- package/dist/components/ui/command.d.ts +336 -67
- package/dist/components/ui/command.d.ts.map +1 -1
- package/dist/components/ui/container.d.ts +159 -64
- package/dist/components/ui/container.d.ts.map +1 -1
- package/dist/components/ui/context-menu.d.ts +321 -39
- package/dist/components/ui/context-menu.d.ts.map +1 -1
- package/dist/components/ui/date-picker.d.ts +113 -86
- package/dist/components/ui/date-picker.d.ts.map +1 -1
- package/dist/components/ui/dialog.d.ts +106 -25
- package/dist/components/ui/dialog.d.ts.map +1 -1
- package/dist/components/ui/drawer.d.ts +388 -59
- package/dist/components/ui/drawer.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu.d.ts +521 -74
- package/dist/components/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/empty-state.d.ts +148 -76
- package/dist/components/ui/empty-state.d.ts.map +1 -1
- package/dist/components/ui/hover-card.d.ts +253 -34
- package/dist/components/ui/hover-card.d.ts.map +1 -1
- package/dist/components/ui/input.d.ts +143 -44
- package/dist/components/ui/input.d.ts.map +1 -1
- package/dist/components/ui/label.d.ts +0 -8
- package/dist/components/ui/label.d.ts.map +1 -1
- package/dist/components/ui/menubar.d.ts +288 -46
- package/dist/components/ui/menubar.d.ts.map +1 -1
- package/dist/components/ui/navigation-menu.d.ts +444 -127
- package/dist/components/ui/navigation-menu.d.ts.map +1 -1
- package/dist/components/ui/pagination.d.ts +342 -66
- package/dist/components/ui/pagination.d.ts.map +1 -1
- package/dist/components/ui/popover.d.ts +0 -8
- package/dist/components/ui/popover.d.ts.map +1 -1
- package/dist/components/ui/progress.d.ts +88 -30
- package/dist/components/ui/progress.d.ts.map +1 -1
- package/dist/components/ui/radio-group.d.ts +189 -45
- package/dist/components/ui/radio-group.d.ts.map +1 -1
- package/dist/components/ui/resizable.d.ts +178 -62
- package/dist/components/ui/resizable.d.ts.map +1 -1
- package/dist/components/ui/scroll-area.d.ts +180 -21
- package/dist/components/ui/scroll-area.d.ts.map +1 -1
- package/dist/components/ui/select.d.ts +382 -60
- package/dist/components/ui/select.d.ts.map +1 -1
- package/dist/components/ui/separator.d.ts +52 -39
- package/dist/components/ui/separator.d.ts.map +1 -1
- package/dist/components/ui/sheet.d.ts +144 -27
- package/dist/components/ui/sheet.d.ts.map +1 -1
- package/dist/components/ui/sidebar.d.ts +81 -31
- package/dist/components/ui/sidebar.d.ts.map +1 -1
- package/dist/components/ui/skeleton.d.ts +94 -32
- package/dist/components/ui/skeleton.d.ts.map +1 -1
- package/dist/components/ui/slider.d.ts +37 -31
- package/dist/components/ui/slider.d.ts.map +1 -1
- package/dist/components/ui/sonner.d.ts +280 -46
- package/dist/components/ui/sonner.d.ts.map +1 -1
- package/dist/components/ui/stack.d.ts +289 -148
- package/dist/components/ui/stack.d.ts.map +1 -1
- package/dist/components/ui/stories/aspect-ratio.stories.d.ts +1 -2
- package/dist/components/ui/stories/aspect-ratio.stories.d.ts.map +1 -1
- package/dist/components/ui/stories/container.stories.d.ts +2 -3
- package/dist/components/ui/stories/container.stories.d.ts.map +1 -1
- package/dist/components/ui/stories/empty-state.stories.d.ts +2 -2
- package/dist/components/ui/stories/scroll-area.stories.d.ts +1 -2
- package/dist/components/ui/stories/scroll-area.stories.d.ts.map +1 -1
- package/dist/components/ui/stories/stack.stories.d.ts +1 -1
- package/dist/components/ui/stories/text-field.stories.d.ts +7 -1
- package/dist/components/ui/stories/text-field.stories.d.ts.map +1 -1
- package/dist/components/ui/switch.d.ts +44 -38
- package/dist/components/ui/switch.d.ts.map +1 -1
- package/dist/components/ui/table.d.ts +33 -0
- package/dist/components/ui/table.d.ts.map +1 -1
- package/dist/components/ui/tabs.d.ts +4 -22
- package/dist/components/ui/tabs.d.ts.map +1 -1
- package/dist/components/ui/text-field.d.ts +170 -84
- package/dist/components/ui/text-field.d.ts.map +1 -1
- package/dist/components/ui/textarea.d.ts +106 -29
- package/dist/components/ui/textarea.d.ts.map +1 -1
- package/dist/components/ui/theme-toggle.d.ts +190 -65
- package/dist/components/ui/theme-toggle.d.ts.map +1 -1
- package/dist/components/ui/theme.d.ts +107 -23
- package/dist/components/ui/theme.d.ts.map +1 -1
- package/dist/components/ui/toggle-group.d.ts +143 -67
- package/dist/components/ui/toggle-group.d.ts.map +1 -1
- package/dist/components/ui/toggle.d.ts +118 -30
- package/dist/components/ui/toggle.d.ts.map +1 -1
- package/dist/components/ui/tooltip.d.ts +152 -28
- package/dist/components/ui/tooltip.d.ts.map +1 -1
- package/dist/components/ui/typography.d.ts +452 -134
- package/dist/components/ui/typography.d.ts.map +1 -1
- package/dist/index.js +9388 -8281
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/llms.txt +173 -3
- package/package.json +5 -2
- package/src/components/ui/accordion.tsx +112 -27
- package/src/components/ui/alert-dialog.tsx +401 -46
- package/src/components/ui/alert.tsx +114 -11
- package/src/components/ui/aspect-ratio.tsx +69 -14
- package/src/components/ui/avatar.tsx +179 -33
- package/src/components/ui/badge.tsx +74 -75
- package/src/components/ui/breadcrumb.tsx +335 -50
- package/src/components/ui/button.tsx +198 -90
- package/src/components/ui/calendar.tsx +867 -43
- package/src/components/ui/card.tsx +140 -33
- package/src/components/ui/carousel.tsx +529 -98
- package/src/components/ui/chart.tsx +222 -1
- package/src/components/ui/checkbox.tsx +176 -38
- package/src/components/ui/collapsible.tsx +321 -67
- package/src/components/ui/combobox.tsx +284 -83
- package/src/components/ui/command.tsx +527 -67
- package/src/components/ui/container.tsx +217 -65
- package/src/components/ui/context-menu.tsx +716 -51
- package/src/components/ui/date-picker.tsx +228 -38
- package/src/components/ui/dialog.tsx +270 -33
- package/src/components/ui/drawer.tsx +546 -67
- package/src/components/ui/dropdown-menu.tsx +657 -74
- package/src/components/ui/empty-state.tsx +241 -82
- package/src/components/ui/hover-card.tsx +328 -39
- package/src/components/ui/input.tsx +207 -44
- package/src/components/ui/label.tsx +98 -8
- package/src/components/ui/menubar.tsx +587 -54
- package/src/components/ui/navigation-menu.tsx +557 -128
- package/src/components/ui/pagination.tsx +561 -79
- package/src/components/ui/popover.tsx +119 -8
- package/src/components/ui/progress.tsx +131 -29
- package/src/components/ui/radio-group.tsx +260 -51
- package/src/components/ui/resizable.tsx +289 -63
- package/src/components/ui/scroll-area.tsx +377 -66
- package/src/components/ui/select.tsx +545 -60
- package/src/components/ui/separator.tsx +146 -40
- package/src/components/ui/sheet.tsx +348 -31
- package/src/components/ui/sidebar.tsx +471 -29
- package/src/components/ui/skeleton.tsx +114 -32
- package/src/components/ui/slider.tsx +77 -31
- package/src/components/ui/sonner.tsx +574 -46
- package/src/components/ui/stack.tsx +423 -101
- package/src/components/ui/switch.tsx +78 -39
- package/src/components/ui/table.tsx +170 -4
- package/src/components/ui/tabs.tsx +108 -22
- package/src/components/ui/text-field.tsx +226 -81
- package/src/components/ui/textarea.tsx +180 -29
- package/src/components/ui/theme-toggle.tsx +313 -65
- package/src/components/ui/theme.tsx +117 -23
- package/src/components/ui/toggle-group.tsx +280 -69
- package/src/components/ui/toggle.tsx +124 -35
- package/src/components/ui/tooltip.tsx +239 -29
- 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>
|
|
20
|
+
* // Basic horizontal separator - decorative divider
|
|
21
|
+
* <div className="space-y-4">
|
|
22
|
+
* <p>Content above</p>
|
|
16
23
|
* <Separator />
|
|
17
|
-
* <p>
|
|
24
|
+
* <p>Content below</p>
|
|
18
25
|
* </div>
|
|
19
26
|
* ```
|
|
20
27
|
*
|
|
21
28
|
* @example
|
|
22
29
|
* ```tsx
|
|
23
|
-
* // Vertical separator in
|
|
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
|
|
34
|
-
* <nav className="flex items-center">
|
|
35
|
-
* <a href="/
|
|
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="
|
|
49
|
+
* className="h-4"
|
|
41
50
|
* />
|
|
42
|
-
* <a href="/
|
|
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-
|
|
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 }:
|
|
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
|
|
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;
|
|
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
|
|
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
|
|
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
|
|
197
|
+
* slide animations with responsive sizing and proper focus management.
|
|
178
198
|
*
|
|
179
|
-
*
|
|
180
|
-
*
|
|
181
|
-
*
|
|
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
|
-
* -
|
|
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
|
-
* //
|
|
247
|
-
* <SheetHeader
|
|
248
|
-
* <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
|
-
* -
|
|
313
|
-
* -
|
|
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
|
-
* //
|
|
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
|
-
* -
|
|
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;
|
|
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"}
|