@surflane/ui 0.4.0 → 0.6.0

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 (296) hide show
  1. package/README.md +2 -2
  2. package/dist/{disclosure.d.ts → accordion.d.ts} +1 -17
  3. package/dist/{disclosure.js → accordion.js} +3 -17
  4. package/dist/alert-dialog.d.ts +31 -0
  5. package/dist/alert-dialog.js +22 -0
  6. package/dist/app-shell.d.ts +44 -3
  7. package/dist/app-shell.js +86 -13
  8. package/dist/{input-extensions.d.ts → autocomplete.d.ts} +4 -42
  9. package/dist/{input-extensions.js → autocomplete.js} +7 -26
  10. package/dist/avatar.js +3 -5
  11. package/dist/badge.d.ts +20 -0
  12. package/dist/badge.js +16 -0
  13. package/dist/bottom-navigation.d.ts +66 -0
  14. package/dist/bottom-navigation.js +36 -0
  15. package/dist/{navigation.d.ts → breadcrumbs.d.ts} +2 -6
  16. package/dist/breadcrumbs.js +31 -0
  17. package/dist/button.d.ts +11 -0
  18. package/dist/button.js +27 -4
  19. package/dist/{content.d.ts → card.d.ts} +6 -24
  20. package/dist/card.js +26 -0
  21. package/dist/chart.d.ts +35 -0
  22. package/dist/chart.js +123 -50
  23. package/dist/checkbox-group.d.ts +2 -0
  24. package/dist/checkbox-group.js +16 -0
  25. package/dist/checkbox.d.ts +9 -0
  26. package/dist/checkbox.js +29 -0
  27. package/dist/choice-label.d.ts +25 -0
  28. package/dist/choice-label.js +14 -0
  29. package/dist/choice.d.ts +7 -0
  30. package/dist/choice.js +3 -0
  31. package/dist/code.d.ts +21 -0
  32. package/dist/{content.js → code.js} +5 -30
  33. package/dist/collapsible.d.ts +18 -0
  34. package/dist/collapsible.js +21 -0
  35. package/dist/{advanced-forms.d.ts → combobox.d.ts} +5 -25
  36. package/dist/{advanced-forms.js → combobox.js} +13 -49
  37. package/dist/{context-overlays.d.ts → context-menu.d.ts} +6 -28
  38. package/dist/{context-overlays.js → context-menu.js} +5 -25
  39. package/dist/css/accordion.css +11 -0
  40. package/dist/css/alert-dialog.css +11 -0
  41. package/{src → dist/css}/all.css +1 -1
  42. package/dist/css/app-shell.css +12 -0
  43. package/dist/css/autocomplete.css +15 -0
  44. package/dist/css/avatar.css +10 -0
  45. package/dist/css/badge.css +10 -0
  46. package/dist/css/bottom-navigation.css +8 -0
  47. package/dist/css/breadcrumbs.css +12 -0
  48. package/dist/css/button.css +8 -0
  49. package/dist/css/card.css +11 -0
  50. package/dist/css/chart.css +13 -0
  51. package/dist/css/checkbox-group.css +9 -0
  52. package/dist/css/checkbox.css +9 -0
  53. package/dist/css/choice-label.css +9 -0
  54. package/dist/css/code.css +13 -0
  55. package/dist/css/collapsible.css +11 -0
  56. package/dist/css/combobox.css +14 -0
  57. package/dist/css/context-menu.css +15 -0
  58. package/dist/css/date-picker.css +12 -0
  59. package/dist/css/dialog.css +10 -0
  60. package/dist/css/drawer.css +11 -0
  61. package/dist/css/empty-state.css +9 -0
  62. package/dist/css/field.css +10 -0
  63. package/dist/css/fieldset.css +8 -0
  64. package/dist/css/file-upload.css +17 -0
  65. package/dist/css/filter-bar.css +8 -0
  66. package/dist/css/form.css +8 -0
  67. package/dist/css/icon.css +8 -0
  68. package/dist/css/inline-message.css +10 -0
  69. package/dist/css/input.css +9 -0
  70. package/dist/css/layout.css +9 -0
  71. package/dist/css/link.css +9 -0
  72. package/dist/css/list.css +9 -0
  73. package/dist/css/markdown.css +18 -0
  74. package/dist/css/menu.css +14 -0
  75. package/dist/css/menubar.css +9 -0
  76. package/dist/css/meter.css +9 -0
  77. package/dist/css/native-select.css +13 -0
  78. package/dist/css/navigation-menu.css +11 -0
  79. package/dist/css/number-field.css +11 -0
  80. package/dist/css/otp-field.css +10 -0
  81. package/dist/css/page-header.css +11 -0
  82. package/dist/css/pagination.css +11 -0
  83. package/dist/css/popover.css +9 -0
  84. package/dist/css/preview-card.css +11 -0
  85. package/dist/css/progress.css +9 -0
  86. package/dist/css/radio-group.css +9 -0
  87. package/dist/css/rules/accordion.css +21 -0
  88. package/dist/css/rules/alert-dialog.css +23 -0
  89. package/dist/css/rules/app-shell.css +220 -0
  90. package/dist/css/rules/autocomplete.css +3 -0
  91. package/dist/css/rules/avatar.css +17 -0
  92. package/dist/css/rules/badge.css +17 -0
  93. package/dist/css/rules/bar.css +38 -0
  94. package/dist/css/rules/base.css +46 -0
  95. package/dist/css/rules/bottom-navigation.css +142 -0
  96. package/dist/css/rules/breadcrumbs.css +9 -0
  97. package/dist/css/rules/button.css +131 -0
  98. package/dist/css/rules/card.css +10 -0
  99. package/dist/css/rules/chart.css +256 -0
  100. package/dist/css/rules/checkbox-group.css +3 -0
  101. package/dist/css/rules/checkbox.css +25 -0
  102. package/dist/css/rules/choice-label.css +52 -0
  103. package/dist/css/rules/choice.css +104 -0
  104. package/dist/css/rules/code.css +9 -0
  105. package/dist/css/rules/collapsible.css +12 -0
  106. package/dist/css/rules/combobox.css +177 -0
  107. package/dist/css/rules/context-menu.css +9 -0
  108. package/dist/css/rules/date-picker.css +301 -0
  109. package/dist/css/rules/dialog.css +160 -0
  110. package/dist/css/rules/disclosure.css +107 -0
  111. package/dist/css/rules/drawer.css +18 -0
  112. package/dist/css/rules/empty-state.css +9 -0
  113. package/dist/css/rules/field-control.css +70 -0
  114. package/dist/css/rules/field.css +56 -0
  115. package/dist/css/rules/fieldset.css +23 -0
  116. package/dist/css/rules/file-upload.css +156 -0
  117. package/dist/css/rules/filter-bar.css +56 -0
  118. package/dist/css/rules/form.css +15 -0
  119. package/dist/css/rules/gauge.css +61 -0
  120. package/dist/css/rules/icon.css +27 -0
  121. package/dist/css/rules/inline-message.css +10 -0
  122. package/dist/css/rules/input-group.css +69 -0
  123. package/dist/css/rules/input.css +33 -0
  124. package/dist/css/rules/item.css +14 -0
  125. package/dist/css/rules/layout.css +3 -0
  126. package/dist/css/rules/link.css +9 -0
  127. package/dist/css/rules/list.css +10 -0
  128. package/dist/css/rules/markdown.css +63 -0
  129. package/dist/css/rules/menu.css +97 -0
  130. package/dist/css/rules/menubar.css +18 -0
  131. package/dist/css/rules/meter.css +3 -0
  132. package/dist/css/rules/native-select.css +3 -0
  133. package/dist/css/rules/navigation-menu.css +159 -0
  134. package/dist/css/rules/number-field.css +55 -0
  135. package/dist/css/rules/otp-field.css +68 -0
  136. package/dist/css/rules/page-header.css +3 -0
  137. package/dist/css/rules/pagination.css +3 -0
  138. package/dist/css/rules/panel.css +221 -0
  139. package/dist/css/rules/popover.css +41 -0
  140. package/dist/css/rules/popup.css +27 -0
  141. package/dist/css/rules/preview-card.css +60 -0
  142. package/dist/css/rules/progress.css +14 -0
  143. package/dist/css/rules/radio-group.css +26 -0
  144. package/dist/css/rules/scroll-area.css +101 -0
  145. package/dist/css/rules/select.css +88 -0
  146. package/dist/css/rules/separator.css +3 -0
  147. package/dist/css/rules/sheet.css +3 -0
  148. package/dist/css/rules/sizing.css +140 -0
  149. package/dist/css/rules/skeleton.css +41 -0
  150. package/dist/css/rules/slider.css +123 -0
  151. package/dist/css/rules/sparkline.css +52 -0
  152. package/dist/css/rules/spinner.css +38 -0
  153. package/dist/css/rules/stat.css +59 -0
  154. package/dist/css/rules/switch.css +50 -0
  155. package/dist/css/rules/syntax-highlighter.css +82 -0
  156. package/dist/css/rules/table.css +28 -0
  157. package/dist/css/rules/tabs.css +126 -0
  158. package/dist/css/rules/textarea.css +21 -0
  159. package/dist/css/rules/toast.css +247 -0
  160. package/dist/css/rules/toggle-group.css +3 -0
  161. package/dist/css/rules/toggle.css +27 -0
  162. package/dist/css/rules/toolbar.css +62 -0
  163. package/dist/css/rules/tooltip.css +38 -0
  164. package/dist/css/rules/tree.css +98 -0
  165. package/dist/css/rules/typography.css +3 -0
  166. package/dist/css/scroll-area.css +8 -0
  167. package/dist/css/select.css +12 -0
  168. package/dist/css/separator.css +9 -0
  169. package/dist/css/sheet.css +11 -0
  170. package/dist/css/sizing.css +7 -0
  171. package/dist/css/skeleton.css +8 -0
  172. package/dist/css/slider.css +8 -0
  173. package/dist/css/sparkline.css +8 -0
  174. package/dist/css/spinner.css +8 -0
  175. package/dist/css/stat.css +9 -0
  176. package/dist/css/styles.css +100 -0
  177. package/dist/css/switch.css +9 -0
  178. package/dist/css/syntax-highlighter.css +9 -0
  179. package/dist/css/table.css +12 -0
  180. package/dist/css/tabs.css +8 -0
  181. package/dist/css/textarea.css +10 -0
  182. package/dist/css/toast.css +11 -0
  183. package/dist/css/toggle-group.css +9 -0
  184. package/dist/css/toggle.css +10 -0
  185. package/dist/css/toolbar.css +12 -0
  186. package/dist/css/tooltip.css +9 -0
  187. package/dist/css/tree.css +10 -0
  188. package/dist/css/typography.css +9 -0
  189. package/dist/date-picker.js +3 -2
  190. package/dist/dialog.d.ts +6 -24
  191. package/dist/dialog.js +7 -20
  192. package/dist/{panels.d.ts → drawer.d.ts} +3 -34
  193. package/dist/drawer.js +47 -0
  194. package/dist/empty-state.d.ts +29 -0
  195. package/dist/empty-state.js +19 -0
  196. package/dist/field.d.ts +42 -0
  197. package/dist/field.js +21 -0
  198. package/dist/fieldset.d.ts +14 -0
  199. package/dist/fieldset.js +10 -0
  200. package/dist/file-upload.d.ts +3 -1
  201. package/dist/file-upload.js +7 -5
  202. package/dist/filter-bar.js +1 -1
  203. package/dist/form.d.ts +2 -0
  204. package/dist/form.js +7 -0
  205. package/dist/format.d.ts +25 -0
  206. package/dist/format.js +42 -0
  207. package/dist/icon.d.ts +11 -0
  208. package/dist/icon.js +19 -3
  209. package/dist/index.d.ts +61 -30
  210. package/dist/index.js +75 -33
  211. package/dist/{messages.d.ts → inline-message.d.ts} +0 -28
  212. package/dist/{messages.js → inline-message.js} +3 -18
  213. package/dist/input.js +2 -2
  214. package/dist/{foundations.d.ts → layout.d.ts} +5 -23
  215. package/dist/{foundations.js → layout.js} +4 -19
  216. package/dist/link.d.ts +6 -0
  217. package/dist/link.js +17 -0
  218. package/dist/list.d.ts +33 -0
  219. package/dist/list.js +21 -0
  220. package/dist/markdown.js +4 -5
  221. package/dist/menu.d.ts +7 -5
  222. package/dist/menu.js +12 -8
  223. package/dist/menubar.d.ts +4 -0
  224. package/dist/menubar.js +4 -0
  225. package/dist/meter.d.ts +29 -0
  226. package/dist/meter.js +13 -0
  227. package/dist/native-select.d.ts +8 -0
  228. package/dist/native-select.js +54 -0
  229. package/dist/navigation-menu.js +8 -5
  230. package/dist/number-field.d.ts +23 -0
  231. package/dist/number-field.js +33 -0
  232. package/dist/page-header.d.ts +12 -0
  233. package/dist/page-header.js +9 -0
  234. package/dist/pagination.js +3 -4
  235. package/dist/panel.d.ts +13 -0
  236. package/dist/panel.js +13 -0
  237. package/dist/parts.d.ts +19 -1
  238. package/dist/parts.js +32 -6
  239. package/dist/popover.d.ts +23 -6
  240. package/dist/popover.js +17 -7
  241. package/dist/preview-card.d.ts +29 -0
  242. package/dist/preview-card.js +27 -0
  243. package/dist/progress.d.ts +29 -0
  244. package/dist/progress.js +13 -0
  245. package/dist/radio-group.d.ts +16 -0
  246. package/dist/radio-group.js +31 -0
  247. package/dist/scroll-area.js +3 -4
  248. package/dist/select.d.ts +8 -8
  249. package/dist/select.js +19 -54
  250. package/dist/separator.d.ts +4 -0
  251. package/dist/separator.js +8 -0
  252. package/dist/sheet.d.ts +29 -0
  253. package/dist/sheet.js +39 -0
  254. package/dist/skeleton.d.ts +8 -0
  255. package/dist/skeleton.js +8 -0
  256. package/dist/slider.d.ts +40 -0
  257. package/dist/slider.js +27 -0
  258. package/dist/sparkline.d.ts +41 -0
  259. package/dist/sparkline.js +50 -0
  260. package/dist/spinner.d.ts +13 -0
  261. package/dist/spinner.js +10 -0
  262. package/dist/stat.d.ts +59 -0
  263. package/dist/stat.js +26 -0
  264. package/dist/status.d.ts +2 -20
  265. package/dist/status.js +11 -14
  266. package/dist/switch.d.ts +13 -0
  267. package/dist/switch.js +25 -0
  268. package/dist/syntax-highlighter.js +2 -1
  269. package/dist/{data.d.ts → table.d.ts} +8 -32
  270. package/dist/{data.js → table.js} +15 -30
  271. package/dist/textarea.d.ts +7 -0
  272. package/dist/textarea.js +12 -0
  273. package/dist/toast.d.ts +57 -1
  274. package/dist/toast.js +80 -8
  275. package/dist/toggle-group.d.ts +5 -0
  276. package/dist/toggle-group.js +7 -0
  277. package/dist/toggle.d.ts +7 -0
  278. package/dist/toggle.js +9 -0
  279. package/dist/{commands.d.ts → toolbar.d.ts} +0 -13
  280. package/dist/toolbar.js +14 -0
  281. package/dist/tooltip.d.ts +10 -3
  282. package/dist/tooltip.js +4 -4
  283. package/dist/tree.js +4 -2
  284. package/dist/typography.d.ts +12 -0
  285. package/dist/typography.js +14 -0
  286. package/package.json +324 -25
  287. package/dist/chevron.d.ts +0 -3
  288. package/dist/chevron.js +0 -6
  289. package/dist/commands.js +0 -27
  290. package/dist/feedback.d.ts +0 -76
  291. package/dist/feedback.js +0 -35
  292. package/dist/forms.d.ts +0 -91
  293. package/dist/forms.js +0 -109
  294. package/dist/navigation.js +0 -41
  295. package/dist/panels.js +0 -100
  296. package/src/styles.css +0 -3780
@@ -1,76 +0,0 @@
1
- import * as React from 'react';
2
- import { type ComponentSizeAlias } from './sizing.js';
3
- export declare const Progress: {
4
- Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
5
- size?: import("./sizing.js").ComponentSize;
6
- } & React.RefAttributes<HTMLDivElement>>;
7
- Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
8
- size?: import("./sizing.js").ComponentSize;
9
- } & React.RefAttributes<HTMLSpanElement>>;
10
- Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
11
- size?: import("./sizing.js").ComponentSize;
12
- } & React.RefAttributes<HTMLSpanElement>>;
13
- Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
14
- size?: import("./sizing.js").ComponentSize;
15
- } & React.RefAttributes<HTMLDivElement>>;
16
- Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
17
- size?: import("./sizing.js").ComponentSize;
18
- } & React.RefAttributes<HTMLDivElement>>;
19
- };
20
- export declare const Meter: {
21
- Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
22
- size?: import("./sizing.js").ComponentSize;
23
- } & React.RefAttributes<HTMLDivElement>>;
24
- Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
25
- size?: import("./sizing.js").ComponentSize;
26
- } & React.RefAttributes<HTMLSpanElement>>;
27
- Value: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
28
- size?: import("./sizing.js").ComponentSize;
29
- } & React.RefAttributes<HTMLSpanElement>>;
30
- Track: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
31
- size?: import("./sizing.js").ComponentSize;
32
- } & React.RefAttributes<HTMLDivElement>>;
33
- Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
34
- size?: import("./sizing.js").ComponentSize;
35
- } & React.RefAttributes<HTMLDivElement>>;
36
- };
37
- export type SpinnerProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
38
- label?: string;
39
- decorative?: boolean;
40
- size?: ComponentSizeAlias;
41
- };
42
- /** Use decorative within a loading region that already owns the announcement. */
43
- export declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
44
- label?: string;
45
- decorative?: boolean;
46
- size?: ComponentSizeAlias;
47
- } & React.RefAttributes<HTMLSpanElement>>;
48
- export type SkeletonProps = Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> & {
49
- shape?: 'text' | 'block' | 'circle';
50
- };
51
- /** Decorative placeholder; the owning region provides aria-busy and loading text. */
52
- export declare const Skeleton: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & {
53
- shape?: "text" | "block" | "circle";
54
- } & React.RefAttributes<HTMLSpanElement>>;
55
- export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
56
- size?: import("./sizing.js").ComponentSize;
57
- } & React.RefAttributes<HTMLDivElement>>, MeterLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
58
- size?: import("./sizing.js").ComponentSize;
59
- } & React.RefAttributes<HTMLSpanElement>>, MeterRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
60
- size?: import("./sizing.js").ComponentSize;
61
- } & React.RefAttributes<HTMLDivElement>>, MeterTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
62
- size?: import("./sizing.js").ComponentSize;
63
- } & React.RefAttributes<HTMLDivElement>>, MeterValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/meter").MeterValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
64
- size?: import("./sizing.js").ComponentSize;
65
- } & React.RefAttributes<HTMLSpanElement>>;
66
- export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
67
- size?: import("./sizing.js").ComponentSize;
68
- } & React.RefAttributes<HTMLDivElement>>, ProgressLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
69
- size?: import("./sizing.js").ComponentSize;
70
- } & React.RefAttributes<HTMLSpanElement>>, ProgressRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
71
- size?: import("./sizing.js").ComponentSize;
72
- } & React.RefAttributes<HTMLDivElement>>, ProgressTrack: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
73
- size?: import("./sizing.js").ComponentSize;
74
- } & React.RefAttributes<HTMLDivElement>>, ProgressValue: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
75
- size?: import("./sizing.js").ComponentSize;
76
- } & React.RefAttributes<HTMLSpanElement>>;
package/dist/feedback.js DELETED
@@ -1,35 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as React from 'react';
4
- import { useComponentSize } from './sizing.js';
5
- import { Progress as BaseProgress } from '@base-ui/react/progress';
6
- import { Meter as BaseMeter } from '@base-ui/react/meter';
7
- import { part, sizeName } from './parts.js';
8
- export const Progress = {
9
- ...BaseProgress,
10
- Root: /* @__PURE__ */ part(BaseProgress.Root, 'pui-gauge pui-progress'),
11
- Label: /* @__PURE__ */ part(BaseProgress.Label, 'pui-gauge-label'),
12
- Value: /* @__PURE__ */ part(BaseProgress.Value, 'pui-gauge-value'),
13
- Track: /* @__PURE__ */ part(BaseProgress.Track, 'pui-gauge-track'),
14
- Indicator: /* @__PURE__ */ part(BaseProgress.Indicator, 'pui-gauge-indicator'),
15
- };
16
- export const Meter = {
17
- ...BaseMeter,
18
- Root: /* @__PURE__ */ part(BaseMeter.Root, 'pui-gauge pui-meter'),
19
- Label: /* @__PURE__ */ part(BaseMeter.Label, 'pui-gauge-label'),
20
- Value: /* @__PURE__ */ part(BaseMeter.Value, 'pui-gauge-value'),
21
- Track: /* @__PURE__ */ part(BaseMeter.Track, 'pui-gauge-track'),
22
- Indicator: /* @__PURE__ */ part(BaseMeter.Indicator, 'pui-gauge-indicator'),
23
- };
24
- /** Use decorative within a loading region that already owns the announcement. */
25
- export const Spinner = /* @__PURE__ */ React.forwardRef(function Spinner({ label = 'Loading', decorative = false, size, className, ...props }, ref) {
26
- const scheme = useComponentSize(size);
27
- return (_jsxs("span", { ...props, ref: ref, className: ['pui-spinner', className].filter(Boolean).join(' '), "data-size": sizeName(size), "data-ui-size": scheme, role: decorative ? undefined : 'status', "aria-hidden": decorative || undefined, children: [_jsxs("svg", { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("circle", { cx: '12', cy: '12', r: '9', opacity: '.2' }), _jsx("path", { d: 'M12 3a9 9 0 0 1 9 9', strokeLinecap: 'round' })] }), !decorative && _jsx("span", { className: 'pui-feedback-sr', children: label })] }));
28
- });
29
- /** Decorative placeholder; the owning region provides aria-busy and loading text. */
30
- export const Skeleton = /* @__PURE__ */ React.forwardRef(function Skeleton({ shape = 'text', className, ...props }, ref) {
31
- return (_jsx("span", { ...props, ref: ref, className: ['pui-skeleton', className].filter(Boolean).join(' '), "data-shape": shape, "aria-hidden": 'true' }));
32
- });
33
- // Flat names for React Server Components, which cannot dot into client exports.
34
- export const { Indicator: MeterIndicator, Label: MeterLabel, Root: MeterRoot, Track: MeterTrack, Value: MeterValue, } = Meter;
35
- export const { Indicator: ProgressIndicator, Label: ProgressLabel, Root: ProgressRoot, Track: ProgressTrack, Value: ProgressValue, } = Progress;
package/dist/forms.d.ts DELETED
@@ -1,91 +0,0 @@
1
- import * as React from 'react';
2
- import { type ComponentSize } from './sizing.js';
3
- import { Form as BaseForm } from '@base-ui/react/form';
4
- import { Radio as BaseRadio } from '@base-ui/react/radio';
5
- import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
6
- declare const FieldRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
7
- size?: ComponentSize;
8
- } & React.RefAttributes<HTMLDivElement>>;
9
- declare const FieldLabel: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
10
- size?: ComponentSize;
11
- } & React.RefAttributes<HTMLElement>>;
12
- declare const FieldControl: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
13
- size?: ComponentSize;
14
- } & React.RefAttributes<HTMLElement>>;
15
- declare const FieldDescription: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
16
- size?: ComponentSize;
17
- } & React.RefAttributes<HTMLParagraphElement>>;
18
- declare const FieldError: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
19
- size?: ComponentSize;
20
- } & React.RefAttributes<HTMLDivElement>>;
21
- declare const FieldItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
22
- size?: ComponentSize;
23
- } & React.RefAttributes<HTMLDivElement>>;
24
- export declare const Field: {
25
- Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
26
- size?: ComponentSize;
27
- } & React.RefAttributes<HTMLDivElement>>;
28
- Label: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
29
- size?: ComponentSize;
30
- } & React.RefAttributes<HTMLElement>>;
31
- Control: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
32
- size?: ComponentSize;
33
- } & React.RefAttributes<HTMLElement>>;
34
- Description: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref">, "size"> & {
35
- size?: ComponentSize;
36
- } & React.RefAttributes<HTMLParagraphElement>>;
37
- Error: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
38
- size?: ComponentSize;
39
- } & React.RefAttributes<HTMLDivElement>>;
40
- Item: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
41
- size?: ComponentSize;
42
- } & React.RefAttributes<HTMLDivElement>>;
43
- Validity: React.FC<import("@base-ui/react/field").FieldValidityProps>;
44
- };
45
- export declare const Fieldset: {
46
- Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
47
- size?: ComponentSize;
48
- } & React.RefAttributes<HTMLElement>>;
49
- Legend: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
50
- size?: ComponentSize;
51
- } & React.RefAttributes<HTMLDivElement>>;
52
- };
53
- export declare function Form<Values extends Record<string, unknown> = Record<string, unknown>>({ className, ...props }: BaseForm.Props<Values>): React.JSX.Element;
54
- export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
55
- size?: ComponentSize;
56
- } & React.RefAttributes<HTMLTextAreaElement>>;
57
- declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
58
- declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
59
- export declare const Checkbox: {
60
- Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
61
- Indicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
62
- };
63
- export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/checkbox-group").CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
64
- export declare function RadioGroup<Value = string>({ value, defaultValue, onValueChange, className, form, ref, ...props }: BaseRadioGroup.Props<Value>): React.JSX.Element;
65
- declare const RadioRoot: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
66
- export declare const Radio: {
67
- Root: React.ForwardRefExoticComponent<Omit<BaseRadio.Root.Props<unknown>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
68
- Indicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
69
- size?: ComponentSize;
70
- } & React.RefAttributes<HTMLSpanElement>>;
71
- };
72
- declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
73
- export declare const Switch: {
74
- Root: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
75
- Thumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
76
- size?: ComponentSize;
77
- } & React.RefAttributes<HTMLSpanElement>>;
78
- };
79
- export { CheckboxIndicator, CheckboxRoot, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, RadioRoot, SwitchRoot, };
80
- export declare const FieldValidity: React.FC<import("@base-ui/react/field").FieldValidityProps>;
81
- export declare const FieldsetLegend: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
82
- size?: ComponentSize;
83
- } & React.RefAttributes<HTMLDivElement>>, FieldsetRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "size"> & {
84
- size?: ComponentSize;
85
- } & React.RefAttributes<HTMLElement>>;
86
- export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
87
- size?: ComponentSize;
88
- } & React.RefAttributes<HTMLSpanElement>>;
89
- export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref">, "size"> & {
90
- size?: ComponentSize;
91
- } & React.RefAttributes<HTMLSpanElement>>;
package/dist/forms.js DELETED
@@ -1,109 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as React from 'react';
4
- import { useComponentSize } from './sizing.js';
5
- import { Field as BaseField } from '@base-ui/react/field';
6
- import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
7
- import { Form as BaseForm } from '@base-ui/react/form';
8
- import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
9
- import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
10
- import { Radio as BaseRadio } from '@base-ui/react/radio';
11
- import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
12
- import { Switch as BaseSwitch } from '@base-ui/react/switch';
13
- const ChoiceResetPaint = /* @__PURE__ */ React.createContext(0);
14
- import { skin, part } from './parts.js';
15
- const FieldRoot = /* @__PURE__ */ part(BaseField.Root, 'pui-field');
16
- const FieldLabel = /* @__PURE__ */ part(BaseField.Label, 'pui-field-label');
17
- const FieldControl = /* @__PURE__ */ part(BaseField.Control, 'pui-input');
18
- const FieldDescription = /* @__PURE__ */ part(BaseField.Description, 'pui-field-description');
19
- const FieldError = /* @__PURE__ */ part(BaseField.Error, 'pui-field-error');
20
- const FieldItem = /* @__PURE__ */ part(BaseField.Item, 'pui-field-item');
21
- export const Field = {
22
- ...BaseField,
23
- Root: FieldRoot,
24
- Label: FieldLabel,
25
- Control: FieldControl,
26
- Description: FieldDescription,
27
- Error: FieldError,
28
- Item: FieldItem,
29
- };
30
- export const Fieldset = {
31
- ...BaseFieldset,
32
- Root: /* @__PURE__ */ part(BaseFieldset.Root, 'pui-fieldset'),
33
- Legend: /* @__PURE__ */ part(BaseFieldset.Legend, 'pui-fieldset-legend'),
34
- };
35
- export function Form({ className, ...props }) {
36
- return _jsx(BaseForm, { ...props, className: skin('pui-form', className) });
37
- }
38
- export const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ className, size, ...props }, ref) {
39
- const scheme = useComponentSize(size);
40
- return (_jsx("textarea", { "data-ui-size": scheme, ...props, ref: ref, className: ['pui-input pui-textarea', className]
41
- .filter(Boolean)
42
- .join(' ') }));
43
- });
44
- import { useRootRef, useResetValue } from './form-state.js';
45
- const CheckboxRoot = /* @__PURE__ */ React.forwardRef(function CheckboxRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
46
- React.useContext(ChoiceResetPaint);
47
- const [element, attach] = useRootRef(ref);
48
- const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
49
- return (_jsx(BaseCheckbox.Root, { ...props, form: form, ref: attach, checked: selected, className: skin('pui-checkbox', className), onCheckedChange: (next, event) => {
50
- onCheckedChange?.(next, event);
51
- if (checked === undefined && !event.isCanceled)
52
- setSelected(next);
53
- } }));
54
- });
55
- const CheckboxIndicator = /* @__PURE__ */ React.forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
56
- return (_jsx(BaseCheckbox.Indicator, { ...props, ref: ref, className: skin('pui-checkbox-indicator', className), children: children ?? (_jsxs("svg", { width: '14', height: '14', viewBox: '0 0 20 20', fill: 'none', stroke: 'currentColor', strokeWidth: '2', "aria-hidden": 'true', children: [_jsx("path", { className: 'pui-checkbox-check', d: 'm4 10 4 4 8-8' }), _jsx("path", { className: 'pui-checkbox-mixed', d: 'M4 10h12' })] })) }));
57
- });
58
- export const Checkbox = {
59
- ...BaseCheckbox,
60
- Root: CheckboxRoot,
61
- Indicator: CheckboxIndicator,
62
- };
63
- export const CheckboxGroup = /* @__PURE__ */ React.forwardRef(function CheckboxGroup({ value, defaultValue = [], onValueChange, className, ...props }, ref) {
64
- const [element, attach] = useRootRef(ref);
65
- const [selected, setSelected, revision] = useResetValue(value, defaultValue, element);
66
- return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseCheckboxGroup, { ...props, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
67
- onValueChange?.(next, event);
68
- if (value === undefined && !event.isCanceled)
69
- setSelected(next);
70
- } }) }));
71
- });
72
- export function RadioGroup({ value, defaultValue, onValueChange, className, form, ref, ...props }) {
73
- const [element, attach] = useRootRef(ref);
74
- const [selected, setSelected, revision] = useResetValue(value, defaultValue ?? null, element, form);
75
- return (_jsx(ChoiceResetPaint.Provider, { value: revision, children: _jsx(BaseRadioGroup, { ...props, form: form, ref: attach, value: selected, className: skin('pui-choice-group', className), onValueChange: (next, event) => {
76
- onValueChange?.(next, event);
77
- if (value === undefined && !event.isCanceled)
78
- setSelected(next);
79
- } }) }));
80
- }
81
- const RadioRoot = /* @__PURE__ */ React.forwardRef(function RadioRoot({ className, ...props }, ref) {
82
- React.useContext(ChoiceResetPaint);
83
- return (_jsx(BaseRadio.Root, { ...props, ref: ref, className: skin('pui-radio', className) }));
84
- });
85
- export const Radio = {
86
- ...BaseRadio,
87
- Root: RadioRoot,
88
- Indicator: /* @__PURE__ */ part(BaseRadio.Indicator, 'pui-radio-indicator'),
89
- };
90
- const SwitchRoot = /* @__PURE__ */ React.forwardRef(function SwitchRoot({ checked, defaultChecked = false, onCheckedChange, className, form, ...props }, ref) {
91
- const [element, attach] = useRootRef(ref);
92
- const [selected, setSelected] = useResetValue(checked, defaultChecked, element, form);
93
- return (_jsx(BaseSwitch.Root, { ...props, form: form, ref: attach, checked: selected, className: skin('pui-switch', className), onCheckedChange: (next, event) => {
94
- onCheckedChange?.(next, event);
95
- if (checked === undefined && !event.isCanceled)
96
- setSelected(next);
97
- } }));
98
- });
99
- export const Switch = {
100
- ...BaseSwitch,
101
- Root: SwitchRoot,
102
- Thumb: /* @__PURE__ */ part(BaseSwitch.Thumb, 'pui-switch-thumb'),
103
- };
104
- // Flat names for React Server Components, which cannot dot into client exports.
105
- export { CheckboxIndicator, CheckboxRoot, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldRoot, RadioRoot, SwitchRoot, };
106
- export const { Validity: FieldValidity } = Field;
107
- export const { Legend: FieldsetLegend, Root: FieldsetRoot } = Fieldset;
108
- export const { Indicator: RadioIndicator } = Radio;
109
- export const { Thumb: SwitchThumb } = Switch;
@@ -1,41 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import * as React from 'react';
4
- import { Separator as BaseSeparator } from '@base-ui/react/separator';
5
- import { Chevron } from './chevron.js';
6
- import { skin } from './parts.js';
7
- export const Separator = /* @__PURE__ */ React.forwardRef(function Separator({ inset = false, className, ...props }, ref) {
8
- return (_jsx(BaseSeparator, { ...props, ref: ref, "data-inset": inset || undefined, className: skin('pui-separator', className) }));
9
- });
10
- export const Link = /* @__PURE__ */ React.forwardRef(function Link({ className, ...props }, ref) {
11
- return (_jsx("a", { ...props, ref: ref, className: ['pui-link', className].filter(Boolean).join(' ') }));
12
- });
13
- const BreadcrumbRoot = /* @__PURE__ */ React.forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
14
- return (_jsx("nav", { ...props, ref: ref, "aria-label": label, className: ['pui-breadcrumbs', className].filter(Boolean).join(' ') }));
15
- });
16
- const BreadcrumbList = /* @__PURE__ */ React.forwardRef(function BreadcrumbList({ className, role = 'list', ...props }, ref) {
17
- return (_jsx("ol", { ...props, role: role, ref: ref, className: ['pui-breadcrumb-list', className].filter(Boolean).join(' ') }));
18
- });
19
- const BreadcrumbItem = /* @__PURE__ */ React.forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
20
- return (_jsx("li", { ...props, ref: ref, className: ['pui-breadcrumb-item', className].filter(Boolean).join(' ') }));
21
- });
22
- function BreadcrumbSeparator({ className, ...props }) {
23
- return (_jsx("span", { ...props, className: ['pui-breadcrumb-separator', className]
24
- .filter(Boolean)
25
- .join(' '), "aria-hidden": 'true', children: _jsx(Chevron, {}) }));
26
- }
27
- function BreadcrumbCurrent({ className, ...props }) {
28
- return (_jsx("span", { ...props, className: ['pui-breadcrumb-current', className]
29
- .filter(Boolean)
30
- .join(' '), "aria-current": 'page' }));
31
- }
32
- export const Breadcrumbs = {
33
- Root: BreadcrumbRoot,
34
- List: BreadcrumbList,
35
- Item: BreadcrumbItem,
36
- Link,
37
- Separator: BreadcrumbSeparator,
38
- Current: BreadcrumbCurrent,
39
- };
40
- // Flat names for React Server Components, which cannot dot into client exports.
41
- export const { Root: BreadcrumbsRoot, List: BreadcrumbsList, Item: BreadcrumbsItem, Link: BreadcrumbsLink, Separator: BreadcrumbsSeparator, Current: BreadcrumbsCurrent, } = Breadcrumbs;
package/dist/panels.js DELETED
@@ -1,100 +0,0 @@
1
- 'use client';
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import * as React from 'react';
4
- import { skin } from './parts.js';
5
- import { useComponentSize, normalizeSize, } from './sizing.js';
6
- import { Dialog as BaseDialog } from '@base-ui/react/dialog';
7
- import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
8
- const SheetSide = /* @__PURE__ */ React.createContext({
9
- side: 'right',
10
- modal: true,
11
- });
12
- const DrawerSide = /* @__PURE__ */ React.createContext({
13
- side: 'bottom',
14
- modal: true,
15
- });
16
- const cx = (...values) => values.filter(Boolean).join(' ');
17
- function CloseIcon() {
18
- return (_jsx("svg", { width: '18', height: '18', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.7', "aria-hidden": 'true', children: _jsx("path", { d: 'm6 6 12 12M18 6 6 18' }) }));
19
- }
20
- function SheetRoot({ side = 'right', modal = true, ...props }) {
21
- return (_jsx(SheetSide.Provider, { value: { side, modal }, children: _jsx(BaseDialog.Root, { ...props, modal: modal }) }));
22
- }
23
- function DrawerRoot({ side = 'bottom', modal = true, ...props }) {
24
- const direction = {
25
- left: 'left',
26
- right: 'right',
27
- top: 'up',
28
- bottom: 'down',
29
- };
30
- return (_jsx(DrawerSide.Provider, { value: { side, modal }, children: _jsx(BaseDrawer.Root, { ...props, modal: modal, swipeDirection: direction[side] }) }));
31
- }
32
- const SheetContent = /* @__PURE__ */ React.forwardRef(function SheetContent({ size, closeLabel = 'Close panel', className, children, ...props }, ref) {
33
- const scheme = useComponentSize(size);
34
- const { side, modal } = React.useContext(SheetSide);
35
- return (_jsx(BaseDialog.Portal, { children: _jsxs("div", { className: 'pui-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDialog.Backdrop, { className: 'pui-panel-backdrop' })), _jsx("div", { className: 'pui-panel-viewport', "data-side": side, children: _jsxs(BaseDialog.Popup, { ...props, ref: ref, className: skin('pui-panel', className), "data-side": side, "data-size": size
36
- ? normalizeSize(size) === 'small'
37
- ? 'sm'
38
- : normalizeSize(size) === 'large'
39
- ? 'lg'
40
- : 'md'
41
- : 'md', children: [_jsx(BaseDialog.Close, { className: 'pui-panel-close pui-icon-button', "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), children] }) })] }) }));
42
- });
43
- const DrawerContent = /* @__PURE__ */ React.forwardRef(function DrawerContent({ size, closeLabel = 'Close panel', className, children, ...props }, ref) {
44
- const scheme = useComponentSize(size);
45
- const { side, modal } = React.useContext(DrawerSide);
46
- const KeyboardProvider = side === 'bottom' ? BaseDrawer.VirtualKeyboardProvider : React.Fragment;
47
- return (_jsx(KeyboardProvider, { children: _jsx(BaseDrawer.Portal, { children: _jsxs("div", { className: 'pui-panel-layer', "data-ui-size": scheme, children: [modal === true && (_jsx(BaseDrawer.Backdrop, { className: 'pui-panel-backdrop' })), _jsx(BaseDrawer.Viewport, { className: 'pui-panel-viewport', "data-side": side, children: _jsxs(BaseDrawer.Popup, { ...props, ref: ref, className: skin('pui-panel pui-drawer', className), "data-side": side, "data-size": size
48
- ? normalizeSize(size) === 'small'
49
- ? 'sm'
50
- : normalizeSize(size) === 'large'
51
- ? 'lg'
52
- : 'md'
53
- : 'lg', children: [_jsx("div", { className: 'pui-drawer-handle', "aria-hidden": 'true' }), _jsx(BaseDrawer.Close, { className: 'pui-panel-close pui-icon-button', "aria-label": closeLabel, children: _jsx(CloseIcon, {}) }), _jsx(BaseDrawer.Content, { className: 'pui-panel-content', children: children })] }) })] }) }) }));
54
- });
55
- function Header({ className, ...props }) {
56
- return _jsx("div", { ...props, className: cx('pui-panel-header', className) });
57
- }
58
- const Body = /* @__PURE__ */ React.forwardRef(function Body({ className, ...props }, ref) {
59
- return (_jsx("div", { ...props, ref: ref, className: cx('pui-panel-body', className) }));
60
- });
61
- function Footer({ className, ...props }) {
62
- return _jsx("div", { ...props, className: cx('pui-panel-footer', className) });
63
- }
64
- function SheetTitle({ className, ...props }) {
65
- return (_jsx(BaseDialog.Title, { ...props, className: skin('pui-panel-title', className) }));
66
- }
67
- function SheetDescription({ className, ...props }) {
68
- return (_jsx(BaseDialog.Description, { ...props, className: skin('pui-panel-description', className) }));
69
- }
70
- function DrawerTitle({ className, ...props }) {
71
- return (_jsx(BaseDrawer.Title, { ...props, className: skin('pui-panel-title', className) }));
72
- }
73
- function DrawerDescription({ className, ...props }) {
74
- return (_jsx(BaseDrawer.Description, { ...props, className: skin('pui-panel-description', className) }));
75
- }
76
- export const Sheet = {
77
- ...BaseDialog,
78
- Root: SheetRoot,
79
- Content: SheetContent,
80
- Header,
81
- Body,
82
- Footer,
83
- Title: SheetTitle,
84
- Description: SheetDescription,
85
- };
86
- export const Drawer = {
87
- ...BaseDrawer,
88
- Root: DrawerRoot,
89
- Content: DrawerContent,
90
- PrimitiveContent: BaseDrawer.Content,
91
- Header,
92
- Body,
93
- Footer,
94
- Title: DrawerTitle,
95
- Description: DrawerDescription,
96
- };
97
- // Flat names for React Server Components, which cannot dot into client exports.
98
- export { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle, SheetDescription, SheetRoot, SheetTitle, SheetContent, };
99
- export const { Backdrop: DrawerBackdrop, Close: DrawerClose, Handle: DrawerHandle, Indent: DrawerIndent, IndentBackground: DrawerIndentBackground, Popup: DrawerPopup, Portal: DrawerPortal, Provider: DrawerProvider, SwipeArea: DrawerSwipeArea, Trigger: DrawerTrigger, Viewport: DrawerViewport, VirtualKeyboardProvider: DrawerVirtualKeyboardProvider, PrimitiveContent: DrawerPrimitiveContent, Header: DrawerHeader, Body: DrawerBody, Footer: DrawerFooter, } = Drawer;
100
- export const { Backdrop: SheetBackdrop, Close: SheetClose, Handle: SheetHandle, Popup: SheetPopup, Portal: SheetPortal, Trigger: SheetTrigger, Viewport: SheetViewport, Header: SheetHeader, Body: SheetBody, Footer: SheetFooter, } = Sheet;