@brijbyte/agentic-ui 0.0.1-beta → 0.0.1

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 (319) hide show
  1. package/README.md +736 -0
  2. package/dist/accordion/accordion.css +89 -0
  3. package/dist/accordion/accordion.d.ts +28 -0
  4. package/dist/accordion/accordion.d.ts.map +1 -0
  5. package/dist/accordion/accordion.js +51 -0
  6. package/dist/accordion/accordion.js.map +1 -0
  7. package/dist/accordion/accordion.module.css.d.ts +2 -0
  8. package/dist/accordion/accordion.module.js +14 -0
  9. package/dist/accordion/accordion.module.js.map +1 -0
  10. package/dist/accordion/index.d.ts +3 -0
  11. package/dist/accordion/index.js +4 -0
  12. package/dist/accordion/parts.d.ts +28 -0
  13. package/dist/accordion/parts.d.ts.map +1 -0
  14. package/dist/accordion/parts.js +55 -0
  15. package/dist/accordion/parts.js.map +1 -0
  16. package/dist/badge/badge.css +70 -0
  17. package/dist/badge/badge.d.ts +20 -0
  18. package/dist/badge/badge.d.ts.map +1 -0
  19. package/dist/badge/badge.js +21 -0
  20. package/dist/badge/badge.js.map +1 -0
  21. package/dist/badge/badge.module.css.d.ts +2 -0
  22. package/dist/badge/badge.module.js +16 -0
  23. package/dist/badge/badge.module.js.map +1 -0
  24. package/dist/badge/index.d.ts +2 -0
  25. package/dist/badge/index.js +3 -0
  26. package/dist/button/button.css +242 -0
  27. package/dist/button/button.d.ts +28 -0
  28. package/dist/button/button.d.ts.map +1 -0
  29. package/dist/button/button.js +34 -0
  30. package/dist/button/button.js.map +1 -0
  31. package/dist/button/button.module.css.d.ts +2 -0
  32. package/dist/button/button.module.js +27 -0
  33. package/dist/button/button.module.js.map +1 -0
  34. package/dist/button/index.d.ts +2 -0
  35. package/dist/button/index.js +3 -0
  36. package/dist/card/card.css +68 -0
  37. package/dist/card/card.d.ts +41 -0
  38. package/dist/card/card.d.ts.map +1 -0
  39. package/dist/card/card.js +50 -0
  40. package/dist/card/card.js.map +1 -0
  41. package/dist/card/card.module.css.d.ts +2 -0
  42. package/dist/card/card.module.js +15 -0
  43. package/dist/card/card.module.js.map +1 -0
  44. package/dist/card/index.d.ts +2 -0
  45. package/dist/card/index.js +3 -0
  46. package/dist/checkbox/checkbox.css +76 -0
  47. package/dist/checkbox/checkbox.d.ts +29 -0
  48. package/dist/checkbox/checkbox.d.ts.map +1 -0
  49. package/dist/checkbox/checkbox.js +40 -0
  50. package/dist/checkbox/checkbox.js.map +1 -0
  51. package/dist/checkbox/checkbox.module.css.d.ts +2 -0
  52. package/dist/checkbox/checkbox.module.js +11 -0
  53. package/dist/checkbox/checkbox.module.js.map +1 -0
  54. package/dist/checkbox/index.d.ts +3 -0
  55. package/dist/checkbox/index.js +4 -0
  56. package/dist/checkbox/parts.d.ts +20 -0
  57. package/dist/checkbox/parts.d.ts.map +1 -0
  58. package/dist/checkbox/parts.js +51 -0
  59. package/dist/checkbox/parts.js.map +1 -0
  60. package/dist/collapsible/collapsible.css +92 -0
  61. package/dist/collapsible/collapsible.d.ts +24 -0
  62. package/dist/collapsible/collapsible.d.ts.map +1 -0
  63. package/dist/collapsible/collapsible.js +44 -0
  64. package/dist/collapsible/collapsible.js.map +1 -0
  65. package/dist/collapsible/collapsible.module.css.d.ts +2 -0
  66. package/dist/collapsible/collapsible.module.js +12 -0
  67. package/dist/collapsible/collapsible.module.js.map +1 -0
  68. package/dist/collapsible/index.d.ts +3 -0
  69. package/dist/collapsible/index.js +4 -0
  70. package/dist/collapsible/parts.d.ts +23 -0
  71. package/dist/collapsible/parts.d.ts.map +1 -0
  72. package/dist/collapsible/parts.js +44 -0
  73. package/dist/collapsible/parts.js.map +1 -0
  74. package/dist/dialog/dialog.css +120 -0
  75. package/dist/dialog/dialog.d.ts +32 -0
  76. package/dist/dialog/dialog.d.ts.map +1 -0
  77. package/dist/dialog/dialog.js +54 -0
  78. package/dist/dialog/dialog.js.map +1 -0
  79. package/dist/dialog/dialog.module.css.d.ts +2 -0
  80. package/dist/dialog/dialog.module.js +15 -0
  81. package/dist/dialog/dialog.module.js.map +1 -0
  82. package/dist/dialog/index.d.ts +3 -0
  83. package/dist/dialog/index.js +4 -0
  84. package/dist/dialog/parts.d.ts +38 -0
  85. package/dist/dialog/parts.d.ts.map +1 -0
  86. package/dist/dialog/parts.js +75 -0
  87. package/dist/dialog/parts.js.map +1 -0
  88. package/dist/drawer/drawer.css +257 -0
  89. package/dist/drawer/drawer.d.ts +38 -0
  90. package/dist/drawer/drawer.d.ts.map +1 -0
  91. package/dist/drawer/drawer.js +87 -0
  92. package/dist/drawer/drawer.js.map +1 -0
  93. package/dist/drawer/drawer.module.css.d.ts +2 -0
  94. package/dist/drawer/drawer.module.js +20 -0
  95. package/dist/drawer/drawer.module.js.map +1 -0
  96. package/dist/drawer/index.d.ts +3 -0
  97. package/dist/drawer/index.js +4 -0
  98. package/dist/drawer/parts.d.ts +58 -0
  99. package/dist/drawer/parts.d.ts.map +1 -0
  100. package/dist/drawer/parts.js +107 -0
  101. package/dist/drawer/parts.js.map +1 -0
  102. package/dist/index.css +2424 -0
  103. package/dist/index.d.ts +33 -0
  104. package/dist/index.js +53 -0
  105. package/dist/input/index.d.ts +2 -0
  106. package/dist/input/index.js +3 -0
  107. package/dist/input/input.css +107 -0
  108. package/dist/input/input.d.ts +17 -0
  109. package/dist/input/input.d.ts.map +1 -0
  110. package/dist/input/input.js +37 -0
  111. package/dist/input/input.js.map +1 -0
  112. package/dist/input/input.module.css.d.ts +2 -0
  113. package/dist/input/input.module.js +18 -0
  114. package/dist/input/input.module.js.map +1 -0
  115. package/dist/menu/index.d.ts +4 -0
  116. package/dist/menu/index.js +5 -0
  117. package/dist/menu/menu.css +158 -0
  118. package/dist/menu/menu.d.ts +50 -0
  119. package/dist/menu/menu.d.ts.map +1 -0
  120. package/dist/menu/menu.js +69 -0
  121. package/dist/menu/menu.js.map +1 -0
  122. package/dist/menu/menu.module.css.d.ts +2 -0
  123. package/dist/menu/menu.module.js +19 -0
  124. package/dist/menu/menu.module.js.map +1 -0
  125. package/dist/menu/menuitemshortcut.d.ts +9 -0
  126. package/dist/menu/menuitemshortcut.d.ts.map +1 -0
  127. package/dist/menu/menuitemshortcut.js +15 -0
  128. package/dist/menu/menuitemshortcut.js.map +1 -0
  129. package/dist/menu/parts.d.ts +39 -0
  130. package/dist/menu/parts.d.ts.map +1 -0
  131. package/dist/menu/parts.js +76 -0
  132. package/dist/menu/parts.js.map +1 -0
  133. package/dist/number-field/index.d.ts +3 -0
  134. package/dist/number-field/index.js +4 -0
  135. package/dist/number-field/number-field.css +115 -0
  136. package/dist/number-field/number-field.d.ts +31 -0
  137. package/dist/number-field/number-field.d.ts.map +1 -0
  138. package/dist/number-field/number-field.js +78 -0
  139. package/dist/number-field/number-field.js.map +1 -0
  140. package/dist/number-field/number-field.module.css.d.ts +2 -0
  141. package/dist/number-field/number-field.module.js +16 -0
  142. package/dist/number-field/number-field.module.js.map +1 -0
  143. package/dist/number-field/parts.d.ts +38 -0
  144. package/dist/number-field/parts.d.ts.map +1 -0
  145. package/dist/number-field/parts.js +74 -0
  146. package/dist/number-field/parts.js.map +1 -0
  147. package/dist/progress/index.d.ts +3 -0
  148. package/dist/progress/index.js +4 -0
  149. package/dist/progress/parts.d.ts +20 -0
  150. package/dist/progress/parts.d.ts.map +1 -0
  151. package/dist/progress/parts.js +42 -0
  152. package/dist/progress/parts.js.map +1 -0
  153. package/dist/progress/progress.css +75 -0
  154. package/dist/progress/progress.d.ts +27 -0
  155. package/dist/progress/progress.d.ts.map +1 -0
  156. package/dist/progress/progress.js +27 -0
  157. package/dist/progress/progress.js.map +1 -0
  158. package/dist/progress/progress.module.css.d.ts +2 -0
  159. package/dist/progress/progress.module.js +19 -0
  160. package/dist/progress/progress.module.js.map +1 -0
  161. package/dist/reset.css +91 -0
  162. package/dist/select/index.d.ts +3 -0
  163. package/dist/select/index.js +4 -0
  164. package/dist/select/parts.d.ts +65 -0
  165. package/dist/select/parts.d.ts.map +1 -0
  166. package/dist/select/parts.js +134 -0
  167. package/dist/select/parts.js.map +1 -0
  168. package/dist/select/select.css +159 -0
  169. package/dist/select/select.d.ts +38 -0
  170. package/dist/select/select.d.ts.map +1 -0
  171. package/dist/select/select.js +80 -0
  172. package/dist/select/select.js.map +1 -0
  173. package/dist/select/select.module.css.d.ts +2 -0
  174. package/dist/select/select.module.js +17 -0
  175. package/dist/select/select.module.js.map +1 -0
  176. package/dist/separator/index.d.ts +2 -0
  177. package/dist/separator/index.js +3 -0
  178. package/dist/separator/separator.css +20 -0
  179. package/dist/separator/separator.d.ts +16 -0
  180. package/dist/separator/separator.d.ts.map +1 -0
  181. package/dist/separator/separator.js +17 -0
  182. package/dist/separator/separator.js.map +1 -0
  183. package/dist/separator/separator.module.css.d.ts +2 -0
  184. package/dist/separator/separator.module.js +6 -0
  185. package/dist/separator/separator.module.js.map +1 -0
  186. package/dist/styles/reset.css +69 -0
  187. package/dist/styles/tokens.css +274 -0
  188. package/dist/switch/index.d.ts +3 -0
  189. package/dist/switch/index.js +4 -0
  190. package/dist/switch/parts.d.ts +18 -0
  191. package/dist/switch/parts.d.ts.map +1 -0
  192. package/dist/switch/parts.js +39 -0
  193. package/dist/switch/parts.js.map +1 -0
  194. package/dist/switch/switch.css +68 -0
  195. package/dist/switch/switch.d.ts +28 -0
  196. package/dist/switch/switch.d.ts.map +1 -0
  197. package/dist/switch/switch.js +26 -0
  198. package/dist/switch/switch.js.map +1 -0
  199. package/dist/switch/switch.module.css.d.ts +2 -0
  200. package/dist/switch/switch.module.js +11 -0
  201. package/dist/switch/switch.module.js.map +1 -0
  202. package/dist/tabs/index.d.ts +3 -0
  203. package/dist/tabs/index.js +4 -0
  204. package/dist/tabs/parts.d.ts +23 -0
  205. package/dist/tabs/parts.d.ts.map +1 -0
  206. package/dist/tabs/parts.js +48 -0
  207. package/dist/tabs/parts.js.map +1 -0
  208. package/dist/tabs/tabs.css +90 -0
  209. package/dist/tabs/tabs.d.ts +28 -0
  210. package/dist/tabs/tabs.d.ts.map +1 -0
  211. package/dist/tabs/tabs.js +30 -0
  212. package/dist/tabs/tabs.js.map +1 -0
  213. package/dist/tabs/tabs.module.css.d.ts +2 -0
  214. package/dist/tabs/tabs.module.js +11 -0
  215. package/dist/tabs/tabs.module.js.map +1 -0
  216. package/dist/tailwind-theme.css +142 -0
  217. package/dist/toast/index.d.ts +3 -0
  218. package/dist/toast/index.js +4 -0
  219. package/dist/toast/parts.d.ts +33 -0
  220. package/dist/toast/parts.d.ts.map +1 -0
  221. package/dist/toast/parts.js +62 -0
  222. package/dist/toast/parts.js.map +1 -0
  223. package/dist/toast/toast.css +211 -0
  224. package/dist/toast/toast.d.ts +43 -0
  225. package/dist/toast/toast.d.ts.map +1 -0
  226. package/dist/toast/toast.js +156 -0
  227. package/dist/toast/toast.js.map +1 -0
  228. package/dist/toast/toast.module.css.d.ts +2 -0
  229. package/dist/toast/toast.module.js +25 -0
  230. package/dist/toast/toast.module.js.map +1 -0
  231. package/dist/tokens.css +400 -0
  232. package/dist/tooltip/index.d.ts +3 -0
  233. package/dist/tooltip/index.js +4 -0
  234. package/dist/tooltip/parts.d.ts +23 -0
  235. package/dist/tooltip/parts.d.ts.map +1 -0
  236. package/dist/tooltip/parts.js +53 -0
  237. package/dist/tooltip/parts.js.map +1 -0
  238. package/dist/tooltip/tooltip.css +64 -0
  239. package/dist/tooltip/tooltip.d.ts +22 -0
  240. package/dist/tooltip/tooltip.d.ts.map +1 -0
  241. package/dist/tooltip/tooltip.js +23 -0
  242. package/dist/tooltip/tooltip.js.map +1 -0
  243. package/dist/tooltip/tooltip.module.css.d.ts +2 -0
  244. package/dist/tooltip/tooltip.module.js +10 -0
  245. package/dist/tooltip/tooltip.module.js.map +1 -0
  246. package/package.json +137 -4
  247. package/src/accordion/accordion.module.css +89 -0
  248. package/src/accordion/accordion.tsx +50 -0
  249. package/src/accordion/index.ts +6 -0
  250. package/src/accordion/parts.tsx +68 -0
  251. package/src/badge/badge.module.css +70 -0
  252. package/src/badge/badge.tsx +19 -0
  253. package/src/badge/index.ts +3 -0
  254. package/src/button/button.module.css +265 -0
  255. package/src/button/button.tsx +67 -0
  256. package/src/button/index.ts +3 -0
  257. package/src/card/card.module.css +67 -0
  258. package/src/card/card.tsx +54 -0
  259. package/src/card/index.ts +3 -0
  260. package/src/checkbox/checkbox.module.css +80 -0
  261. package/src/checkbox/checkbox.tsx +38 -0
  262. package/src/checkbox/index.ts +6 -0
  263. package/src/checkbox/parts.tsx +54 -0
  264. package/src/collapsible/collapsible.module.css +94 -0
  265. package/src/collapsible/collapsible.tsx +38 -0
  266. package/src/collapsible/index.ts +6 -0
  267. package/src/collapsible/parts.tsx +52 -0
  268. package/src/css.d.ts +8 -0
  269. package/src/dialog/dialog.module.css +123 -0
  270. package/src/dialog/dialog.tsx +60 -0
  271. package/src/dialog/index.ts +13 -0
  272. package/src/dialog/parts.tsx +96 -0
  273. package/src/drawer/drawer.module.css +289 -0
  274. package/src/drawer/drawer.tsx +96 -0
  275. package/src/drawer/index.ts +24 -0
  276. package/src/drawer/parts.tsx +122 -0
  277. package/src/index.ts +189 -0
  278. package/src/input/index.ts +3 -0
  279. package/src/input/input.module.css +109 -0
  280. package/src/input/input.tsx +39 -0
  281. package/src/menu/index.ts +7 -0
  282. package/src/menu/menu.module.css +172 -0
  283. package/src/menu/menu.tsx +108 -0
  284. package/src/menu/menuitemshortcut.tsx +9 -0
  285. package/src/menu/parts.tsx +90 -0
  286. package/src/number-field/index.ts +20 -0
  287. package/src/number-field/number-field.module.css +114 -0
  288. package/src/number-field/number-field.tsx +75 -0
  289. package/src/number-field/parts.tsx +91 -0
  290. package/src/progress/index.ts +6 -0
  291. package/src/progress/parts.tsx +51 -0
  292. package/src/progress/progress.module.css +70 -0
  293. package/src/progress/progress.tsx +42 -0
  294. package/src/select/index.ts +30 -0
  295. package/src/select/parts.tsx +171 -0
  296. package/src/select/select.module.css +167 -0
  297. package/src/select/select.tsx +89 -0
  298. package/src/separator/index.ts +3 -0
  299. package/src/separator/separator.module.css +18 -0
  300. package/src/separator/separator.tsx +20 -0
  301. package/src/styles/reset.css +91 -0
  302. package/src/styles/tailwind-theme.css +142 -0
  303. package/src/styles/tokens.css +400 -0
  304. package/src/switch/index.ts +6 -0
  305. package/src/switch/parts.tsx +44 -0
  306. package/src/switch/switch.module.css +67 -0
  307. package/src/switch/switch.tsx +33 -0
  308. package/src/tabs/index.ts +6 -0
  309. package/src/tabs/parts.tsx +48 -0
  310. package/src/tabs/tabs.module.css +92 -0
  311. package/src/tabs/tabs.tsx +48 -0
  312. package/src/toast/index.ts +6 -0
  313. package/src/toast/parts.tsx +76 -0
  314. package/src/toast/toast.module.css +252 -0
  315. package/src/toast/toast.tsx +129 -0
  316. package/src/tooltip/index.ts +6 -0
  317. package/src/tooltip/parts.tsx +62 -0
  318. package/src/tooltip/tooltip.module.css +67 -0
  319. package/src/tooltip/tooltip.tsx +30 -0
@@ -0,0 +1,54 @@
1
+ import dialog_module_default from "./dialog.module.js";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { Dialog } from "@base-ui/react/dialog";
4
+ //#region src/dialog/dialog.tsx
5
+ function XIcon() {
6
+ return /* @__PURE__ */ jsx("svg", {
7
+ width: "12",
8
+ height: "12",
9
+ viewBox: "0 0 12 12",
10
+ fill: "none",
11
+ children: /* @__PURE__ */ jsx("path", {
12
+ d: "M2 2L10 10M10 2L2 10",
13
+ stroke: "currentColor",
14
+ strokeWidth: "1.5",
15
+ strokeLinecap: "round"
16
+ })
17
+ });
18
+ }
19
+ function Dialog$1({ trigger, title, description, children, footer, className, dismissible = true, onOpenChange, ...props }) {
20
+ return /* @__PURE__ */ jsxs(Dialog.Root, {
21
+ onOpenChange,
22
+ ...props,
23
+ children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: dialog_module_default.backdrop }), /* @__PURE__ */ jsx(Dialog.Viewport, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
24
+ className: `${dialog_module_default.popup} ${className ?? ""}`,
25
+ children: [
26
+ title && /* @__PURE__ */ jsx(Dialog.Title, {
27
+ className: dialog_module_default.title,
28
+ children: title
29
+ }),
30
+ description && /* @__PURE__ */ jsx(Dialog.Description, {
31
+ className: dialog_module_default.description,
32
+ children: description
33
+ }),
34
+ dismissible && /* @__PURE__ */ jsx(Dialog.Close, {
35
+ className: dialog_module_default.close,
36
+ "aria-label": "Close dialog",
37
+ children: /* @__PURE__ */ jsx(XIcon, {})
38
+ }),
39
+ children && /* @__PURE__ */ jsx("div", {
40
+ className: dialog_module_default.body,
41
+ children
42
+ }),
43
+ footer && /* @__PURE__ */ jsx("div", {
44
+ className: dialog_module_default.footer,
45
+ children: footer
46
+ })
47
+ ]
48
+ }) })] })]
49
+ });
50
+ }
51
+ //#endregion
52
+ export { Dialog$1 as Dialog };
53
+
54
+ //# sourceMappingURL=dialog.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dialog.js","names":["Dialog","BaseDialog","styles"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\nexport interface DialogProps {\n open?: boolean;\n defaultOpen?: boolean;\n /** `eventDetails` is the base-ui event details object. */\n onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n trigger?: ReactElement;\n title?: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n footer?: ReactNode;\n className?: string;\n dismissible?: boolean;\n}\n\nfunction XIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\nexport function Dialog({\n trigger,\n title,\n description,\n children,\n footer,\n className,\n dismissible = true,\n onOpenChange,\n ...props\n}: DialogProps) {\n return (\n <BaseDialog.Root onOpenChange={onOpenChange as never} {...props}>\n {trigger && <BaseDialog.Trigger render={trigger} />}\n <BaseDialog.Portal>\n <BaseDialog.Backdrop className={styles.backdrop} />\n <BaseDialog.Viewport>\n <BaseDialog.Popup className={`${styles.popup} ${className ?? \"\"}`}>\n {title && <BaseDialog.Title className={styles.title}>{title}</BaseDialog.Title>}\n {description && <BaseDialog.Description className={styles.description}>{description}</BaseDialog.Description>}\n {dismissible && (\n <BaseDialog.Close className={styles.close} aria-label=\"Close dialog\">\n <XIcon />\n </BaseDialog.Close>\n )}\n {children && <div className={styles.body}>{children}</div>}\n {footer && <div className={styles.footer}>{footer}</div>}\n </BaseDialog.Popup>\n </BaseDialog.Viewport>\n </BaseDialog.Portal>\n </BaseDialog.Root>\n );\n}\nexport { styles as DialogStyles };\n"],"mappings":";;;;AAkBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;AAIV,SAAgBA,SAAO,EACrB,SACA,OACA,aACA,UACA,QACA,WACA,cAAc,MACd,cACA,GAAG,SACW;AACd,QACE,qBAACC,OAAW,MAAZ;EAA+B;EAAuB,GAAI;YAA1D,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWC,sBAAO,UAAY,CAAA,EACnD,oBAACD,OAAW,UAAZ,EAAA,UACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;aAA7D;IACG,SAAS,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;eAAQ;KAAyB,CAAA;IAC9E,eAAe,oBAACD,OAAW,aAAZ;KAAwB,WAAWC,sBAAO;eAAc;KAAqC,CAAA;IAC5G,eACC,oBAACD,OAAW,OAAZ;KAAkB,WAAWC,sBAAO;KAAO,cAAW;eACpD,oBAAC,OAAD,EAAS,CAAA;KACQ,CAAA;IAEpB,YAAY,oBAAC,OAAD;KAAK,WAAWA,sBAAO;KAAO;KAAe,CAAA;IACzD,UAAU,oBAAC,OAAD;KAAK,WAAWA,sBAAO;eAAS;KAAa,CAAA;IACvC;MACC,CAAA,CACJ,EAAA,CAAA,CACJ"}
@@ -0,0 +1,2 @@
1
+ declare const styles: Record<string, string | undefined>;
2
+ export default styles;
@@ -0,0 +1,15 @@
1
+ //#region src/dialog/dialog.module.css
2
+ var dialog_module_default = {
3
+ "backdrop": "backdrop_VsZA5W",
4
+ "body": "body_VsZA5W",
5
+ "close": "close_VsZA5W",
6
+ "description": "description_VsZA5W",
7
+ "footer": "footer_VsZA5W",
8
+ "header": "header_VsZA5W",
9
+ "popup": "popup_VsZA5W",
10
+ "title": "title_VsZA5W"
11
+ };
12
+ //#endregion
13
+ export { dialog_module_default as default };
14
+
15
+ //# sourceMappingURL=dialog.module.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dialog.module.js","names":[],"sources":["../../src/dialog/dialog.module.css"],"sourcesContent":["@layer theme, base, components, utilities;\n\n@layer components {\n .backdrop {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.48);\n z-index: var(--z-overlay);\n transition: opacity var(--duration-slow) var(--easing-standard);\n }\n\n .backdrop[data-starting-style],\n .backdrop[data-ending-style] {\n opacity: 0;\n }\n\n .popup {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: var(--z-modal);\n background-color: var(--color-bg-elevated);\n border: var(--border-width-base) solid var(--color-border-base);\n border-radius: var(--radius-2xl);\n box-shadow: var(--shadow-xl);\n padding: var(--space-6);\n width: min(480px, calc(100vw - var(--space-8)));\n max-height: min(640px, calc(100vh - var(--space-8)));\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n outline: none;\n overflow: hidden;\n\n transition:\n opacity 200ms var(--easing-ease-out),\n transform 200ms var(--easing-spring);\n }\n\n .popup[data-starting-style] {\n opacity: 0;\n transform: translate(-50%, -48%) scale(0.96);\n }\n\n .popup[data-ending-style] {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.98);\n transition:\n opacity 150ms var(--easing-ease-in),\n transform 150ms var(--easing-ease-in);\n }\n\n .header {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n }\n\n .title {\n font-family: var(--font-mono);\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-primary);\n line-height: var(--line-height-tight);\n letter-spacing: var(--letter-spacing-tight);\n padding-right: var(--space-6);\n }\n\n .description {\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n color: var(--color-text-secondary);\n line-height: var(--line-height-relaxed);\n }\n\n .close {\n position: absolute;\n top: var(--space-4);\n right: var(--space-4);\n width: 24px;\n height: 24px;\n border-radius: var(--radius-sm);\n border: none;\n background: transparent;\n color: var(--color-text-tertiary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n transition:\n background-color var(--duration-fast) var(--easing-standard),\n color var(--duration-fast) var(--easing-standard);\n }\n\n .close:hover {\n background-color: var(--color-surface-hover);\n color: var(--color-text-primary);\n }\n\n .close:focus-visible {\n box-shadow: var(--shadow-focus);\n }\n\n .body {\n flex: 1;\n overflow-y: auto;\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n color: var(--color-text-secondary);\n line-height: var(--line-height-relaxed);\n }\n\n .footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-2);\n padding-top: var(--space-2);\n border-top: var(--border-width-base) solid var(--color-border-subtle);\n }\n}\n"],"mappings":";AAgBA,IAAA,wBAAS;CAAA,YAAA;CAAA,QAAA;CAAA,SAAA;CAAA,eAAA;CAAA,UAAA;CAAA,UAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}
@@ -0,0 +1,3 @@
1
+ import { Dialog, DialogProps, styles } from "./dialog.js";
2
+ import { DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogPopup, DialogPopupProps, DialogTitle, DialogTitleProps, DialogViewport, DialogViewportProps } from "./parts.js";
3
+ export { Dialog, DialogBackdrop, type DialogBackdropProps, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogPopup, type DialogPopupProps, type DialogProps, styles as DialogStyles, DialogTitle, type DialogTitleProps, DialogViewport, type DialogViewportProps };
@@ -0,0 +1,4 @@
1
+ import dialog_module_default from "./dialog.module.js";
2
+ import { Dialog } from "./dialog.js";
3
+ import { DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogViewport } from "./parts.js";
4
+ export { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogPopup, dialog_module_default as DialogStyles, DialogTitle, DialogViewport };
@@ -0,0 +1,38 @@
1
+ import * as react from "react";
2
+ import { ComponentPropsWithoutRef } from "react";
3
+ import { Dialog } from "@base-ui/react/dialog";
4
+
5
+ //#region src/dialog/parts.d.ts
6
+ type BaseBackdropProps = ComponentPropsWithoutRef<typeof Dialog.Backdrop>;
7
+ type BaseViewportProps = ComponentPropsWithoutRef<typeof Dialog.Viewport>;
8
+ type BasePopupProps = ComponentPropsWithoutRef<typeof Dialog.Popup>;
9
+ type BaseTitleProps = ComponentPropsWithoutRef<typeof Dialog.Title>;
10
+ type BaseDescriptionProps = ComponentPropsWithoutRef<typeof Dialog.Description>;
11
+ type BaseCloseProps = ComponentPropsWithoutRef<typeof Dialog.Close>;
12
+ interface DialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
13
+ className?: string;
14
+ }
15
+ interface DialogViewportProps extends Omit<BaseViewportProps, "className"> {
16
+ className?: string;
17
+ }
18
+ interface DialogPopupProps extends Omit<BasePopupProps, "className"> {
19
+ className?: string;
20
+ }
21
+ interface DialogTitleProps extends Omit<BaseTitleProps, "className"> {
22
+ className?: string;
23
+ }
24
+ interface DialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
25
+ className?: string;
26
+ }
27
+ interface DialogCloseProps extends Omit<BaseCloseProps, "className"> {
28
+ className?: string;
29
+ }
30
+ declare const DialogBackdrop: react.ForwardRefExoticComponent<DialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
31
+ declare const DialogViewport: react.ForwardRefExoticComponent<DialogViewportProps & react.RefAttributes<HTMLDivElement>>;
32
+ declare const DialogPopup: react.ForwardRefExoticComponent<DialogPopupProps & react.RefAttributes<HTMLDivElement>>;
33
+ declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
34
+ declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
35
+ declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
36
+ //#endregion
37
+ export { DialogBackdrop, DialogBackdropProps, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogPopup, DialogPopupProps, DialogTitle, DialogTitleProps, DialogViewport, DialogViewportProps };
38
+ //# sourceMappingURL=parts.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/dialog/parts.tsx"],"mappings":";;;;;KA6BK,iBAAA,GAAoB,wBAAA,QAAgC,MAAA,CAAW,QAAA;AAAA,KAC/D,iBAAA,GAAoB,wBAAA,QAAgC,MAAA,CAAW,QAAA;AAAA,KAC/D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,KAC5D,oBAAA,GAAuB,wBAAA,QAAgC,MAAA,CAAW,WAAA;AAAA,KAClE,cAAA,GAAiB,wBAAA,QAAgC,MAAA,CAAW,KAAA;AAAA,UAEhD,mBAAA,SAA4B,IAAA,CAAK,iBAAA;EAChD,SAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,IAAA,CAAK,iBAAA;EAChD,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,UAEe,sBAAA,SAA+B,IAAA,CAAK,oBAAA;EACnD,SAAA;AAAA;AAAA,UAEe,gBAAA,SAAyB,IAAA,CAAK,cAAA;EAC7C,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOd,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOd,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOX,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOX,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA;AAAA,cAOjB,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA"}
@@ -0,0 +1,75 @@
1
+ import dialog_module_default from "./dialog.module.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Dialog } from "@base-ui/react/dialog";
5
+ //#region src/dialog/parts.tsx
6
+ /**
7
+ * Styled primitives for Dialog — each one wraps the corresponding @base-ui/react
8
+ * Dialog part and pre-applies the agentic-ui CSS class. All base-ui props are
9
+ * forwarded so you can compose these with a raw `Dialog.Root` / `Dialog.Trigger`.
10
+ *
11
+ * @example
12
+ * ```tsx
13
+ * import { Dialog } from '@base-ui/react/dialog';
14
+ * import { DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogClose } from '@brijbyte/agentic-ui/dialog';
15
+ *
16
+ * <Dialog.Root>
17
+ * <Dialog.Trigger render={<button>Open</button>} />
18
+ * <Dialog.Portal>
19
+ * <DialogBackdrop />
20
+ * <DialogViewport>
21
+ * <DialogPopup>
22
+ * <DialogTitle>Hello</DialogTitle>
23
+ * <DialogClose aria-label="Close" />
24
+ * </DialogPopup>
25
+ * </DialogViewport>
26
+ * </Dialog.Portal>
27
+ * </Dialog.Root>
28
+ * ```
29
+ */
30
+ const DialogBackdrop = forwardRef(function DialogBackdrop({ className, ...props }, ref) {
31
+ return /* @__PURE__ */ jsx(Dialog.Backdrop, {
32
+ ref,
33
+ className: `${dialog_module_default.backdrop} ${className ?? ""}`,
34
+ ...props
35
+ });
36
+ });
37
+ const DialogViewport = forwardRef(function DialogViewport({ className, ...props }, ref) {
38
+ return /* @__PURE__ */ jsx(Dialog.Viewport, {
39
+ ref,
40
+ className: `${dialog_module_default.viewport ?? ""} ${className ?? ""}`,
41
+ ...props
42
+ });
43
+ });
44
+ const DialogPopup = forwardRef(function DialogPopup({ className, ...props }, ref) {
45
+ return /* @__PURE__ */ jsx(Dialog.Popup, {
46
+ ref,
47
+ className: `${dialog_module_default.popup} ${className ?? ""}`,
48
+ ...props
49
+ });
50
+ });
51
+ const DialogTitle = forwardRef(function DialogTitle({ className, ...props }, ref) {
52
+ return /* @__PURE__ */ jsx(Dialog.Title, {
53
+ ref,
54
+ className: `${dialog_module_default.title} ${className ?? ""}`,
55
+ ...props
56
+ });
57
+ });
58
+ const DialogDescription = forwardRef(function DialogDescription({ className, ...props }, ref) {
59
+ return /* @__PURE__ */ jsx(Dialog.Description, {
60
+ ref,
61
+ className: `${dialog_module_default.description} ${className ?? ""}`,
62
+ ...props
63
+ });
64
+ });
65
+ const DialogClose = forwardRef(function DialogClose({ className, ...props }, ref) {
66
+ return /* @__PURE__ */ jsx(Dialog.Close, {
67
+ ref,
68
+ className: `${dialog_module_default.close} ${className ?? ""}`,
69
+ ...props
70
+ });
71
+ });
72
+ //#endregion
73
+ export { DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogTitle, DialogViewport };
74
+
75
+ //# sourceMappingURL=parts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parts.js","names":["BaseDialog","styles"],"sources":["../../src/dialog/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Dialog — each one wraps the corresponding @base-ui/react\n * Dialog part and pre-applies the agentic-ui CSS class. All base-ui props are\n * forwarded so you can compose these with a raw `Dialog.Root` / `Dialog.Trigger`.\n *\n * @example\n * ```tsx\n * import { Dialog } from '@base-ui/react/dialog';\n * import { DialogBackdrop, DialogViewport, DialogPopup, DialogTitle, DialogClose } from '@brijbyte/agentic-ui/dialog';\n *\n * <Dialog.Root>\n * <Dialog.Trigger render={<button>Open</button>} />\n * <Dialog.Portal>\n * <DialogBackdrop />\n * <DialogViewport>\n * <DialogPopup>\n * <DialogTitle>Hello</DialogTitle>\n * <DialogClose aria-label=\"Close\" />\n * </DialogPopup>\n * </DialogViewport>\n * </Dialog.Portal>\n * </Dialog.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport styles from \"./dialog.module.css\";\n\ntype BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>;\ntype BaseViewportProps = ComponentPropsWithoutRef<typeof BaseDialog.Viewport>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseDialog.Popup>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BaseDialog.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseDialog.Description>;\ntype BaseCloseProps = ComponentPropsWithoutRef<typeof BaseDialog.Close>;\n\nexport interface DialogBackdropProps extends Omit<BaseBackdropProps, \"className\"> {\n className?: string;\n}\nexport interface DialogViewportProps extends Omit<BaseViewportProps, \"className\"> {\n className?: string;\n}\nexport interface DialogPopupProps extends Omit<BasePopupProps, \"className\"> {\n className?: string;\n}\nexport interface DialogTitleProps extends Omit<BaseTitleProps, \"className\"> {\n className?: string;\n}\nexport interface DialogDescriptionProps extends Omit<BaseDescriptionProps, \"className\"> {\n className?: string;\n}\nexport interface DialogCloseProps extends Omit<BaseCloseProps, \"className\"> {\n className?: string;\n}\n\nexport const DialogBackdrop = forwardRef<ComponentRef<typeof BaseDialog.Backdrop>, DialogBackdropProps>(function DialogBackdrop(\n { className, ...props },\n ref,\n) {\n return <BaseDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogViewport = forwardRef<ComponentRef<typeof BaseDialog.Viewport>, DialogViewportProps>(function DialogViewport(\n { className, ...props },\n ref,\n) {\n return <BaseDialog.Viewport ref={ref} className={`${styles.viewport ?? \"\"} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogPopup = forwardRef<ComponentRef<typeof BaseDialog.Popup>, DialogPopupProps>(function DialogPopup(\n { className, ...props },\n ref,\n) {\n return <BaseDialog.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogTitle = forwardRef<ComponentRef<typeof BaseDialog.Title>, DialogTitleProps>(function DialogTitle(\n { className, ...props },\n ref,\n) {\n return <BaseDialog.Title ref={ref} className={`${styles.title} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogDescription = forwardRef<ComponentRef<typeof BaseDialog.Description>, DialogDescriptionProps>(function DialogDescription(\n { className, ...props },\n ref,\n) {\n return <BaseDialog.Description ref={ref} className={`${styles.description} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const DialogClose = forwardRef<ComponentRef<typeof BaseDialog.Close>, DialogCloseProps>(function DialogClose(\n { className, ...props },\n ref,\n) {\n return <BaseDialog.Close ref={ref} className={`${styles.close} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,OAAW,UAAZ;EAA0B;EAAK,WAAW,GAAGC,sBAAO,SAAS,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACvG;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,UAAZ;EAA0B;EAAK,WAAW,GAAGC,sBAAO,YAAY,GAAG,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC7G;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG;AAEF,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,aAAZ;EAA6B;EAAK,WAAW,GAAGC,sBAAO,YAAY,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC7G;AAEF,MAAa,cAAc,WAAoE,SAAS,YACtG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,OAAW,OAAZ;EAAuB;EAAK,WAAW,GAAGC,sBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACjG"}
@@ -0,0 +1,257 @@
1
+ @layer theme, base;
2
+
3
+ @layer components {
4
+ .backdrop_JNKGQq {
5
+ --backdrop-opacity: .48;
6
+ min-height: 100dvh;
7
+ opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
8
+ z-index: var(--z-overlay);
9
+ background-color: #000;
10
+ transition-property: opacity;
11
+ transition-duration: .45s;
12
+ transition-timing-function: cubic-bezier(.32, .72, 0, 1);
13
+ position: fixed;
14
+ inset: 0;
15
+
16
+ @supports (-webkit-touch-callout: none) {
17
+ position: absolute;
18
+ }
19
+ }
20
+
21
+ .backdrop_JNKGQq[data-starting-style], .backdrop_JNKGQq[data-ending-style] {
22
+ opacity: 0;
23
+ }
24
+
25
+ .backdrop_JNKGQq[data-swiping] {
26
+ transition-duration: 0s;
27
+ }
28
+
29
+ .backdrop_JNKGQq[data-ending-style] {
30
+ transition-duration: calc(var(--drawer-swipe-strength) * .4s);
31
+ }
32
+
33
+ .viewport_JNKGQq {
34
+ z-index: var(--z-modal);
35
+ display: flex;
36
+ position: fixed;
37
+ inset: 0;
38
+ }
39
+
40
+ .viewport_JNKGQq[data-side="left"] {
41
+ justify-content: flex-start;
42
+ align-items: stretch;
43
+ }
44
+
45
+ .viewport_JNKGQq[data-side="right"] {
46
+ justify-content: flex-end;
47
+ align-items: stretch;
48
+ }
49
+
50
+ .viewport_JNKGQq[data-side="bottom"] {
51
+ justify-content: center;
52
+ align-items: flex-end;
53
+ }
54
+
55
+ .viewport_JNKGQq[data-side="top"] {
56
+ justify-content: center;
57
+ align-items: flex-start;
58
+ }
59
+
60
+ @supports (-webkit-touch-callout: none) {
61
+ .viewport_JNKGQq[data-side="left"], .viewport_JNKGQq[data-side="right"] {
62
+ padding: .625rem;
63
+ }
64
+
65
+ .viewport_JNKGQq[data-side="bottom"] {
66
+ padding: 0 .625rem .625rem;
67
+ }
68
+
69
+ .viewport_JNKGQq[data-side="top"] {
70
+ padding: .625rem .625rem 0;
71
+ }
72
+ }
73
+
74
+ .popup_JNKGQq {
75
+ box-sizing: border-box;
76
+ background-color: var(--color-bg-elevated);
77
+ border: var(--border-width-base) solid var(--color-border-base);
78
+ overscroll-behavior: contain;
79
+ touch-action: auto;
80
+ will-change: transform;
81
+ outline: none;
82
+ transition-duration: .45s;
83
+ transition-timing-function: cubic-bezier(.32, .72, 0, 1);
84
+ overflow-y: auto;
85
+ }
86
+
87
+ .popup_JNKGQq[data-swiping] {
88
+ user-select: none;
89
+ transition-duration: 0s;
90
+ }
91
+
92
+ .popup_JNKGQq[data-ending-style] {
93
+ transition-duration: calc(var(--drawer-swipe-strength) * .4s);
94
+ }
95
+
96
+ .popup-right_JNKGQq {
97
+ --bleed: 3rem;
98
+ height: 100%;
99
+ width: calc(var(--drawer-width, 20rem) + var(--bleed));
100
+ max-width: calc(100vw - 3rem + var(--bleed));
101
+ padding: var(--space-6);
102
+ padding-right: calc(var(--space-6) + var(--bleed));
103
+ margin-right: calc(-1 * var(--bleed));
104
+ transform: translateX(var(--drawer-swipe-movement-x));
105
+ transition-property: transform;
106
+
107
+ @supports (-webkit-touch-callout: none) {
108
+ --bleed: 0px;
109
+ border-radius: var(--radius-xl);
110
+ margin-right: 0;
111
+ }
112
+ }
113
+
114
+ .popup-right_JNKGQq[data-starting-style], .popup-right_JNKGQq[data-ending-style] {
115
+ transform: translateX(calc(100% - var(--bleed) + 2px));
116
+ }
117
+
118
+ .popup-left_JNKGQq {
119
+ --bleed: 3rem;
120
+ height: 100%;
121
+ width: calc(var(--drawer-width, 20rem) + var(--bleed));
122
+ max-width: calc(100vw - 3rem + var(--bleed));
123
+ padding: var(--space-6);
124
+ padding-left: calc(var(--space-6) + var(--bleed));
125
+ margin-left: calc(-1 * var(--bleed));
126
+ transform: translateX(var(--drawer-swipe-movement-x));
127
+ transition-property: transform;
128
+
129
+ @supports (-webkit-touch-callout: none) {
130
+ --bleed: 0px;
131
+ border-radius: var(--radius-xl);
132
+ margin-left: 0;
133
+ }
134
+ }
135
+
136
+ .popup-left_JNKGQq[data-starting-style], .popup-left_JNKGQq[data-ending-style] {
137
+ transform: translateX(calc(-100% + var(--bleed) - 2px));
138
+ }
139
+
140
+ .popup-bottom_JNKGQq {
141
+ width: 100%;
142
+ max-width: var(--drawer-max-width, 480px);
143
+ max-height: 90dvh;
144
+ padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
145
+ border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
146
+ transform: translateY(var(--drawer-swipe-movement-y));
147
+ border-bottom: none;
148
+ transition-property: transform;
149
+
150
+ @supports (-webkit-touch-callout: none) {
151
+ border-radius: var(--radius-2xl);
152
+ }
153
+ }
154
+
155
+ .popup-bottom_JNKGQq[data-starting-style], .popup-bottom_JNKGQq[data-ending-style] {
156
+ transform: translateY(calc(100% + 2px));
157
+ }
158
+
159
+ .popup-top_JNKGQq {
160
+ width: 100%;
161
+ max-width: var(--drawer-max-width, 480px);
162
+ max-height: 90dvh;
163
+ padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);
164
+ border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
165
+ transform: translateY(var(--drawer-swipe-movement-y));
166
+ border-top: none;
167
+ transition-property: transform;
168
+
169
+ @supports (-webkit-touch-callout: none) {
170
+ border-radius: var(--radius-2xl);
171
+ }
172
+ }
173
+
174
+ .popup-top_JNKGQq[data-starting-style], .popup-top_JNKGQq[data-ending-style] {
175
+ transform: translateY(calc(-100% - 2px));
176
+ }
177
+
178
+ .handle-bar_JNKGQq {
179
+ background-color: var(--color-border-strong);
180
+ width: 2.5rem;
181
+ height: 4px;
182
+ margin: 0 auto var(--space-4);
183
+ border-radius: 9999px;
184
+ flex-shrink: 0;
185
+ }
186
+
187
+ .popup-top_JNKGQq .handle-bar_JNKGQq {
188
+ margin: var(--space-4) auto 0;
189
+ order: 1;
190
+ }
191
+
192
+ .content_JNKGQq {
193
+ gap: var(--space-4);
194
+ flex-direction: column;
195
+ height: 100%;
196
+ display: flex;
197
+ }
198
+
199
+ .title_JNKGQq {
200
+ font-family: var(--font-mono);
201
+ font-size: var(--font-size-lg);
202
+ font-weight: var(--font-weight-semibold);
203
+ color: var(--color-text-primary);
204
+ line-height: var(--line-height-tight);
205
+ letter-spacing: var(--letter-spacing-tight);
206
+ padding-right: var(--space-6);
207
+ margin: 0;
208
+ }
209
+
210
+ .description_JNKGQq {
211
+ font-family: var(--font-mono);
212
+ font-size: var(--font-size-sm);
213
+ color: var(--color-text-secondary);
214
+ line-height: var(--line-height-relaxed);
215
+ margin: 0;
216
+ }
217
+
218
+ .close_JNKGQq {
219
+ top: var(--space-4);
220
+ right: var(--space-4);
221
+ border-radius: var(--radius-sm);
222
+ width: 24px;
223
+ height: 24px;
224
+ color: var(--color-text-tertiary);
225
+ cursor: pointer;
226
+ transition: background-color var(--duration-fast) var(--easing-standard),
227
+ color var(--duration-fast) var(--easing-standard);
228
+ background: none;
229
+ border: none;
230
+ outline: none;
231
+ justify-content: center;
232
+ align-items: center;
233
+ display: flex;
234
+ position: absolute;
235
+ }
236
+
237
+ .close_JNKGQq:hover {
238
+ background-color: var(--color-surface-hover);
239
+ color: var(--color-text-primary);
240
+ }
241
+
242
+ .close_JNKGQq:focus-visible {
243
+ box-shadow: var(--shadow-focus);
244
+ }
245
+
246
+ .footer_JNKGQq {
247
+ justify-content: flex-end;
248
+ align-items: center;
249
+ gap: var(--space-2);
250
+ padding-top: var(--space-4);
251
+ border-top: var(--border-width-base) solid var(--color-border-subtle);
252
+ margin-top: auto;
253
+ display: flex;
254
+ }
255
+ }
256
+
257
+ @layer utilities;
@@ -0,0 +1,38 @@
1
+ import { ReactElement, ReactNode } from "react";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+ import styles from "./drawer.module.css";
4
+
5
+ //#region src/drawer/drawer.d.ts
6
+ type DrawerSide = "left" | "right" | "bottom" | "top";
7
+ interface DrawerProps {
8
+ /** Element that triggers the drawer — rendered as a `Drawer.Trigger`. */
9
+ trigger?: ReactElement;
10
+ /** Which edge the drawer slides in from. @default "right" */
11
+ side?: DrawerSide;
12
+ title?: ReactNode;
13
+ description?: ReactNode;
14
+ children?: ReactNode;
15
+ footer?: ReactNode;
16
+ /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */
17
+ handleBar?: boolean;
18
+ /** Show a close button in the top-right corner. @default true */
19
+ dismissible?: boolean;
20
+ open?: boolean;
21
+ defaultOpen?: boolean;
22
+ onOpenChange?: (open: boolean) => void;
23
+ }
24
+ declare function Drawer({
25
+ trigger,
26
+ side,
27
+ title,
28
+ description,
29
+ children,
30
+ footer,
31
+ handleBar,
32
+ dismissible,
33
+ onOpenChange,
34
+ ...props
35
+ }: DrawerProps): react_jsx_runtime0.JSX.Element;
36
+ //#endregion
37
+ export { Drawer, DrawerProps, DrawerSide, styles };
38
+ //# sourceMappingURL=drawer.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.d.ts","names":[],"sources":["../../src/drawer/drawer.tsx"],"mappings":";;;;;KAIY,UAAA;AAAA,UAEK,WAAA;;EAEf,OAAA,GAAU,YAAA;EAJU;EAMpB,IAAA,GAAO,UAAA;EACP,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,SAAA;;EAET,SAAA;EANO;EAQP,WAAA;EAEA,IAAA;EACA,WAAA;EACA,YAAA,IAAgB,IAAA;AAAA;AAAA,iBA2BF,MAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,MAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,WAAA,GAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -0,0 +1,87 @@
1
+ import drawer_module_default from "./drawer.module.js";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { Drawer } from "@base-ui/react/drawer";
4
+ //#region src/drawer/drawer.tsx
5
+ function XIcon() {
6
+ return /* @__PURE__ */ jsx("svg", {
7
+ width: "12",
8
+ height: "12",
9
+ viewBox: "0 0 12 12",
10
+ fill: "none",
11
+ "aria-hidden": true,
12
+ children: /* @__PURE__ */ jsx("path", {
13
+ d: "M2 2L10 10M10 2L2 10",
14
+ stroke: "currentColor",
15
+ strokeWidth: "1.5",
16
+ strokeLinecap: "round"
17
+ })
18
+ });
19
+ }
20
+ /** Map side → swipe direction for dismiss gesture */
21
+ const SWIPE_DIR = {
22
+ right: "right",
23
+ left: "left",
24
+ bottom: "down",
25
+ top: "up"
26
+ };
27
+ /** Popup CSS classes by side */
28
+ const POPUP_CLASS = {
29
+ right: drawer_module_default["popup-right"],
30
+ left: drawer_module_default["popup-left"],
31
+ bottom: drawer_module_default["popup-bottom"],
32
+ top: drawer_module_default["popup-top"]
33
+ };
34
+ function Drawer$1({ trigger, side = "right", title, description, children, footer, handleBar, dismissible = true, onOpenChange, ...props }) {
35
+ const showHandle = handleBar ?? (side === "bottom" || side === "top");
36
+ const popupClass = `${drawer_module_default.popup} ${POPUP_CLASS[side]}`;
37
+ return /* @__PURE__ */ jsxs(Drawer.Root, {
38
+ swipeDirection: SWIPE_DIR[side],
39
+ onOpenChange,
40
+ ...props,
41
+ children: [trigger && /* @__PURE__ */ jsx(Drawer.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: drawer_module_default.backdrop }), /* @__PURE__ */ jsx(Drawer.Viewport, {
42
+ className: drawer_module_default.viewport,
43
+ "data-side": side,
44
+ children: /* @__PURE__ */ jsxs(Drawer.Popup, {
45
+ className: popupClass,
46
+ style: { position: "relative" },
47
+ children: [
48
+ showHandle && side !== "top" && /* @__PURE__ */ jsx("div", {
49
+ className: drawer_module_default["handle-bar"],
50
+ "aria-hidden": true
51
+ }),
52
+ /* @__PURE__ */ jsxs(Drawer.Content, {
53
+ className: drawer_module_default.content,
54
+ children: [
55
+ title && /* @__PURE__ */ jsx(Drawer.Title, {
56
+ className: drawer_module_default.title,
57
+ children: title
58
+ }),
59
+ description && /* @__PURE__ */ jsx(Drawer.Description, {
60
+ className: drawer_module_default.description,
61
+ children: description
62
+ }),
63
+ children,
64
+ footer && /* @__PURE__ */ jsx("div", {
65
+ className: drawer_module_default.footer,
66
+ children: footer
67
+ })
68
+ ]
69
+ }),
70
+ showHandle && side === "top" && /* @__PURE__ */ jsx("div", {
71
+ className: drawer_module_default["handle-bar"],
72
+ "aria-hidden": true
73
+ }),
74
+ dismissible && /* @__PURE__ */ jsx(Drawer.Close, {
75
+ className: drawer_module_default.close,
76
+ "aria-label": "Close drawer",
77
+ children: /* @__PURE__ */ jsx(XIcon, {})
78
+ })
79
+ ]
80
+ })
81
+ })] })]
82
+ });
83
+ }
84
+ //#endregion
85
+ export { Drawer$1 as Drawer };
86
+
87
+ //# sourceMappingURL=drawer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.js","names":["styles","Drawer","BaseDrawer"],"sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Drawer as BaseDrawer } from \"@base-ui/react/drawer\";\nimport styles from \"./drawer.module.css\";\n\nexport type DrawerSide = \"left\" | \"right\" | \"bottom\" | \"top\";\n\nexport interface DrawerProps {\n /** Element that triggers the drawer — rendered as a `Drawer.Trigger`. */\n trigger?: ReactElement;\n /** Which edge the drawer slides in from. @default \"right\" */\n side?: DrawerSide;\n title?: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n footer?: ReactNode;\n /** Show a drag handle bar (useful for bottom/top drawers). @default true for bottom/top */\n handleBar?: boolean;\n /** Show a close button in the top-right corner. @default true */\n dismissible?: boolean;\n\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nfunction XIcon() {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden>\n <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\n/** Map side → swipe direction for dismiss gesture */\nconst SWIPE_DIR: Record<DrawerSide, \"left\" | \"right\" | \"up\" | \"down\"> = {\n right: \"right\",\n left: \"left\",\n bottom: \"down\",\n top: \"up\",\n};\n\n/** Popup CSS classes by side */\nconst POPUP_CLASS: Record<DrawerSide, string> = {\n right: styles[\"popup-right\"] as string,\n left: styles[\"popup-left\"] as string,\n bottom: styles[\"popup-bottom\"] as string,\n top: styles[\"popup-top\"] as string,\n};\n\nexport function Drawer({\n trigger,\n side = \"right\",\n title,\n description,\n children,\n footer,\n handleBar,\n dismissible = true,\n onOpenChange,\n ...props\n}: DrawerProps) {\n const showHandle = handleBar ?? (side === \"bottom\" || side === \"top\");\n const popupClass = `${styles.popup} ${POPUP_CLASS[side]}`;\n\n return (\n <BaseDrawer.Root swipeDirection={SWIPE_DIR[side]} onOpenChange={onOpenChange as never} {...props}>\n {trigger && <BaseDrawer.Trigger render={trigger} />}\n <BaseDrawer.Portal>\n <BaseDrawer.Backdrop className={styles.backdrop} />\n <BaseDrawer.Viewport className={styles.viewport} data-side={side}>\n <BaseDrawer.Popup className={popupClass} style={{ position: \"relative\" }}>\n {/* handle bar sits above content in bottom drawers */}\n {showHandle && side !== \"top\" && <div className={styles[\"handle-bar\"]} aria-hidden />}\n\n <BaseDrawer.Content className={styles.content}>\n {title && <BaseDrawer.Title className={styles.title}>{title}</BaseDrawer.Title>}\n {description && <BaseDrawer.Description className={styles.description}>{description}</BaseDrawer.Description>}\n {children}\n {footer && <div className={styles.footer}>{footer}</div>}\n </BaseDrawer.Content>\n\n {/* handle bar sits below content in top drawers */}\n {showHandle && side === \"top\" && <div className={styles[\"handle-bar\"]} aria-hidden />}\n\n {dismissible && (\n <BaseDrawer.Close className={styles.close} aria-label=\"Close drawer\">\n <XIcon />\n </BaseDrawer.Close>\n )}\n </BaseDrawer.Popup>\n </BaseDrawer.Viewport>\n </BaseDrawer.Portal>\n </BaseDrawer.Root>\n );\n}\nexport { styles as DrawerStyles };\n"],"mappings":";;;;AAyBA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAC1D,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAU,CAAA;EAC3F,CAAA;;;AAKV,MAAM,YAAkE;CACtE,OAAO;CACP,MAAM;CACN,QAAQ;CACR,KAAK;CACN;;AAGD,MAAM,cAA0C;CAC9C,OAAOA,sBAAO;CACd,MAAMA,sBAAO;CACb,QAAQA,sBAAO;CACf,KAAKA,sBAAO;CACb;AAED,SAAgBC,SAAO,EACrB,SACA,OAAO,SACP,OACA,aACA,UACA,QACA,WACA,cAAc,MACd,cACA,GAAG,SACW;CACd,MAAM,aAAa,cAAc,SAAS,YAAY,SAAS;CAC/D,MAAM,aAAa,GAAGD,sBAAO,MAAM,GAAG,YAAY;AAElD,QACE,qBAACE,OAAW,MAAZ;EAAiB,gBAAgB,UAAU;EAAqB;EAAuB,GAAI;YAA3F,CACG,WAAW,oBAACA,OAAW,SAAZ,EAAoB,QAAQ,SAAW,CAAA,EACnD,qBAACA,OAAW,QAAZ,EAAA,UAAA,CACE,oBAACA,OAAW,UAAZ,EAAqB,WAAWF,sBAAO,UAAY,CAAA,EACnD,oBAACE,OAAW,UAAZ;GAAqB,WAAWF,sBAAO;GAAU,aAAW;aAC1D,qBAACE,OAAW,OAAZ;IAAkB,WAAW;IAAY,OAAO,EAAE,UAAU,YAAY;cAAxE;KAEG,cAAc,SAAS,SAAS,oBAAC,OAAD;MAAK,WAAWF,sBAAO;MAAe,eAAA;MAAc,CAAA;KAErF,qBAACE,OAAW,SAAZ;MAAoB,WAAWF,sBAAO;gBAAtC;OACG,SAAS,oBAACE,OAAW,OAAZ;QAAkB,WAAWF,sBAAO;kBAAQ;QAAyB,CAAA;OAC9E,eAAe,oBAACE,OAAW,aAAZ;QAAwB,WAAWF,sBAAO;kBAAc;QAAqC,CAAA;OAC5G;OACA,UAAU,oBAAC,OAAD;QAAK,WAAWA,sBAAO;kBAAS;QAAa,CAAA;OACrC;;KAGpB,cAAc,SAAS,SAAS,oBAAC,OAAD;MAAK,WAAWA,sBAAO;MAAe,eAAA;MAAc,CAAA;KAEpF,eACC,oBAACE,OAAW,OAAZ;MAAkB,WAAWF,sBAAO;MAAO,cAAW;gBACpD,oBAAC,OAAD,EAAS,CAAA;MACQ,CAAA;KAEJ;;GACC,CAAA,CACJ,EAAA,CAAA,CACJ"}
@@ -0,0 +1,2 @@
1
+ declare const styles: Record<string, string | undefined>;
2
+ export default styles;
@@ -0,0 +1,20 @@
1
+ //#region src/drawer/drawer.module.css
2
+ var drawer_module_default = {
3
+ "backdrop": "backdrop_JNKGQq",
4
+ "close": "close_JNKGQq",
5
+ "content": "content_JNKGQq",
6
+ "description": "description_JNKGQq",
7
+ "footer": "footer_JNKGQq",
8
+ "handle-bar": "handle-bar_JNKGQq",
9
+ "popup": "popup_JNKGQq",
10
+ "popup-bottom": "popup-bottom_JNKGQq",
11
+ "popup-left": "popup-left_JNKGQq",
12
+ "popup-right": "popup-right_JNKGQq",
13
+ "popup-top": "popup-top_JNKGQq",
14
+ "title": "title_JNKGQq",
15
+ "viewport": "viewport_JNKGQq"
16
+ };
17
+ //#endregion
18
+ export { drawer_module_default as default };
19
+
20
+ //# sourceMappingURL=drawer.module.js.map