@brijbyte/agentic-ui 0.0.3 → 0.0.4

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 (201) hide show
  1. package/README.md +132 -35
  2. package/dist/accordion/accordion.d.ts +14 -0
  3. package/dist/accordion/accordion.d.ts.map +1 -1
  4. package/dist/accordion/accordion.js +5 -0
  5. package/dist/accordion/accordion.js.map +1 -1
  6. package/dist/alert-dialog/alert-dialog.d.ts +11 -0
  7. package/dist/alert-dialog/alert-dialog.d.ts.map +1 -1
  8. package/dist/alert-dialog/alert-dialog.js +5 -0
  9. package/dist/alert-dialog/alert-dialog.js.map +1 -1
  10. package/dist/badge/badge.d.ts +6 -0
  11. package/dist/badge/badge.d.ts.map +1 -1
  12. package/dist/badge/badge.js +4 -0
  13. package/dist/badge/badge.js.map +1 -1
  14. package/dist/button/button.d.ts +12 -1
  15. package/dist/button/button.d.ts.map +1 -1
  16. package/dist/button/button.js +5 -0
  17. package/dist/button/button.js.map +1 -1
  18. package/dist/card/card.d.ts +10 -0
  19. package/dist/card/card.d.ts.map +1 -1
  20. package/dist/card/card.js +7 -0
  21. package/dist/card/card.js.map +1 -1
  22. package/dist/checkbox/checkbox.d.ts +13 -0
  23. package/dist/checkbox/checkbox.d.ts.map +1 -1
  24. package/dist/checkbox/checkbox.js +4 -0
  25. package/dist/checkbox/checkbox.js.map +1 -1
  26. package/dist/collapsible/collapsible.d.ts +11 -0
  27. package/dist/collapsible/collapsible.d.ts.map +1 -1
  28. package/dist/collapsible/collapsible.js +5 -0
  29. package/dist/collapsible/collapsible.js.map +1 -1
  30. package/dist/context-menu/context-menu.d.ts +5 -0
  31. package/dist/context-menu/context-menu.d.ts.map +1 -1
  32. package/dist/context-menu/context-menu.js +4 -0
  33. package/dist/context-menu/context-menu.js.map +1 -1
  34. package/dist/dialog/dialog.d.ts +13 -1
  35. package/dist/dialog/dialog.d.ts.map +1 -1
  36. package/dist/dialog/dialog.js +6 -0
  37. package/dist/dialog/dialog.js.map +1 -1
  38. package/dist/drawer/drawer.d.ts +11 -0
  39. package/dist/drawer/drawer.d.ts.map +1 -1
  40. package/dist/drawer/drawer.js +5 -0
  41. package/dist/drawer/drawer.js.map +1 -1
  42. package/dist/index.css +1681 -1251
  43. package/dist/index.d.ts +19 -10
  44. package/dist/index.js +14 -1
  45. package/dist/input/input.d.ts +8 -0
  46. package/dist/input/input.d.ts.map +1 -1
  47. package/dist/input/input.js +5 -0
  48. package/dist/input/input.js.map +1 -1
  49. package/dist/menu/menu.css +3 -8
  50. package/dist/menu/menu.d.ts +11 -4
  51. package/dist/menu/menu.d.ts.map +1 -1
  52. package/dist/menu/menu.js +10 -24
  53. package/dist/menu/menu.js.map +1 -1
  54. package/dist/menu/menu.module.js +1 -1
  55. package/dist/menu/menu.module.js.map +1 -1
  56. package/dist/meter/circular-meter.d.ts +48 -0
  57. package/dist/meter/circular-meter.d.ts.map +1 -0
  58. package/dist/meter/circular-meter.js +86 -0
  59. package/dist/meter/circular-meter.js.map +1 -0
  60. package/dist/meter/index.d.ts +4 -0
  61. package/dist/meter/index.js +5 -0
  62. package/dist/meter/meter.css +152 -0
  63. package/dist/meter/meter.d.ts +58 -0
  64. package/dist/meter/meter.d.ts.map +1 -0
  65. package/dist/meter/meter.js +50 -0
  66. package/dist/meter/meter.js.map +1 -0
  67. package/dist/meter/meter.module.css.d.ts +2 -0
  68. package/dist/meter/meter.module.js +27 -0
  69. package/dist/meter/meter.module.js.map +1 -0
  70. package/dist/meter/meterState.js +18 -0
  71. package/dist/meter/meterState.js.map +1 -0
  72. package/dist/meter/parts.d.ts +31 -0
  73. package/dist/meter/parts.d.ts.map +1 -0
  74. package/dist/meter/parts.js +56 -0
  75. package/dist/meter/parts.js.map +1 -0
  76. package/dist/number-field/number-field.d.ts +16 -0
  77. package/dist/number-field/number-field.d.ts.map +1 -1
  78. package/dist/number-field/number-field.js +4 -0
  79. package/dist/number-field/number-field.js.map +1 -1
  80. package/dist/popover/index.d.ts +3 -0
  81. package/dist/popover/index.js +4 -0
  82. package/dist/popover/parts.d.ts +43 -0
  83. package/dist/popover/parts.d.ts.map +1 -0
  84. package/dist/popover/parts.js +96 -0
  85. package/dist/popover/parts.js.map +1 -0
  86. package/dist/popover/popover.css +173 -0
  87. package/dist/popover/popover.d.ts +49 -0
  88. package/dist/popover/popover.d.ts.map +1 -0
  89. package/dist/popover/popover.js +68 -0
  90. package/dist/popover/popover.js.map +1 -0
  91. package/dist/popover/popover.module.css.d.ts +2 -0
  92. package/dist/popover/popover.module.js +16 -0
  93. package/dist/popover/popover.module.js.map +1 -0
  94. package/dist/progress/progress.d.ts +11 -0
  95. package/dist/progress/progress.d.ts.map +1 -1
  96. package/dist/progress/progress.js +5 -0
  97. package/dist/progress/progress.js.map +1 -1
  98. package/dist/radio/index.d.ts +3 -0
  99. package/dist/radio/index.js +4 -0
  100. package/dist/radio/parts.d.ts +18 -0
  101. package/dist/radio/parts.d.ts.map +1 -0
  102. package/dist/radio/parts.js +42 -0
  103. package/dist/radio/parts.js.map +1 -0
  104. package/dist/radio/radio.css +84 -0
  105. package/dist/radio/radio.d.ts +31 -0
  106. package/dist/radio/radio.d.ts.map +1 -0
  107. package/dist/radio/radio.js +33 -0
  108. package/dist/radio/radio.js.map +1 -0
  109. package/dist/radio/radio.module.css.d.ts +2 -0
  110. package/dist/radio/radio.module.js +11 -0
  111. package/dist/radio/radio.module.js.map +1 -0
  112. package/dist/radio-group/index.d.ts +3 -0
  113. package/dist/radio-group/index.js +4 -0
  114. package/dist/radio-group/parts.d.ts +13 -0
  115. package/dist/radio-group/parts.d.ts.map +1 -0
  116. package/dist/radio-group/parts.js +31 -0
  117. package/dist/radio-group/parts.js.map +1 -0
  118. package/dist/radio-group/radio-group.css +17 -0
  119. package/dist/radio-group/radio-group.d.ts +37 -0
  120. package/dist/radio-group/radio-group.d.ts.map +1 -0
  121. package/dist/radio-group/radio-group.js +28 -0
  122. package/dist/radio-group/radio-group.js.map +1 -0
  123. package/dist/radio-group/radio-group.module.css.d.ts +2 -0
  124. package/dist/radio-group/radio-group.module.js +9 -0
  125. package/dist/radio-group/radio-group.module.js.map +1 -0
  126. package/dist/select/select.d.ts +14 -1
  127. package/dist/select/select.d.ts.map +1 -1
  128. package/dist/select/select.js +4 -0
  129. package/dist/select/select.js.map +1 -1
  130. package/dist/separator/separator.d.ts +4 -0
  131. package/dist/separator/separator.d.ts.map +1 -1
  132. package/dist/separator/separator.js +4 -0
  133. package/dist/separator/separator.js.map +1 -1
  134. package/dist/shared/PopupArrow.js +22 -0
  135. package/dist/shared/PopupArrow.js.map +1 -0
  136. package/dist/slider/slider.d.ts +18 -0
  137. package/dist/slider/slider.d.ts.map +1 -1
  138. package/dist/slider/slider.js +6 -0
  139. package/dist/slider/slider.js.map +1 -1
  140. package/dist/switch/switch.css +11 -2
  141. package/dist/switch/switch.d.ts +12 -0
  142. package/dist/switch/switch.d.ts.map +1 -1
  143. package/dist/switch/switch.js +4 -0
  144. package/dist/switch/switch.js.map +1 -1
  145. package/dist/switch/switch.module.js.map +1 -1
  146. package/dist/tabs/tabs.d.ts +8 -1
  147. package/dist/tabs/tabs.d.ts.map +1 -1
  148. package/dist/tabs/tabs.js +4 -0
  149. package/dist/tabs/tabs.js.map +1 -1
  150. package/dist/toast/toast.d.ts +11 -0
  151. package/dist/toast/toast.d.ts.map +1 -1
  152. package/dist/toast/toast.js +8 -0
  153. package/dist/toast/toast.js.map +1 -1
  154. package/dist/tooltip/tooltip.d.ts +9 -0
  155. package/dist/tooltip/tooltip.d.ts.map +1 -1
  156. package/dist/tooltip/tooltip.js +4 -0
  157. package/dist/tooltip/tooltip.js.map +1 -1
  158. package/package.json +22 -2
  159. package/src/accordion/accordion.tsx +14 -0
  160. package/src/alert-dialog/alert-dialog.tsx +11 -0
  161. package/src/badge/badge.tsx +6 -0
  162. package/src/button/button.tsx +12 -1
  163. package/src/card/card.tsx +10 -0
  164. package/src/checkbox/checkbox.tsx +13 -0
  165. package/src/collapsible/collapsible.tsx +11 -0
  166. package/src/context-menu/context-menu.tsx +5 -0
  167. package/src/dialog/dialog.tsx +13 -1
  168. package/src/drawer/drawer.tsx +11 -0
  169. package/src/index.ts +4 -0
  170. package/src/input/input.tsx +8 -0
  171. package/src/menu/menu.module.css +3 -10
  172. package/src/menu/menu.tsx +13 -26
  173. package/src/meter/circular-meter.tsx +114 -0
  174. package/src/meter/index.ts +9 -0
  175. package/src/meter/meter.module.css +162 -0
  176. package/src/meter/meter.tsx +86 -0
  177. package/src/meter/meterState.ts +29 -0
  178. package/src/meter/parts.tsx +72 -0
  179. package/src/number-field/number-field.tsx +16 -0
  180. package/src/popover/index.ts +14 -0
  181. package/src/popover/parts.tsx +120 -0
  182. package/src/popover/popover.module.css +189 -0
  183. package/src/popover/popover.tsx +80 -0
  184. package/src/progress/progress.tsx +11 -0
  185. package/src/radio/index.ts +6 -0
  186. package/src/radio/parts.tsx +43 -0
  187. package/src/radio/radio.module.css +96 -0
  188. package/src/radio/radio.tsx +37 -0
  189. package/src/radio-group/index.ts +5 -0
  190. package/src/radio-group/parts.tsx +32 -0
  191. package/src/radio-group/radio-group.module.css +17 -0
  192. package/src/radio-group/radio-group.tsx +63 -0
  193. package/src/select/select.tsx +14 -1
  194. package/src/separator/separator.tsx +4 -0
  195. package/src/shared/PopupArrow.tsx +41 -0
  196. package/src/slider/slider.tsx +18 -0
  197. package/src/switch/switch.module.css +11 -2
  198. package/src/switch/switch.tsx +12 -0
  199. package/src/tabs/tabs.tsx +8 -1
  200. package/src/toast/toast.tsx +11 -0
  201. package/src/tooltip/tooltip.tsx +9 -0
@@ -0,0 +1,96 @@
1
+ import { PopupArrow } from "../shared/PopupArrow.js";
2
+ import popover_module_default from "./popover.module.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { forwardRef } from "react";
5
+ import { Popover } from "@base-ui/react/popover";
6
+ //#region src/popover/parts.tsx
7
+ /**
8
+ * Styled primitives for Popover.
9
+ *
10
+ * Use these when you need full control over the popover's behaviour
11
+ * (controlled state, custom positioning, anchor overrides) while keeping
12
+ * all agentic-ui styles applied.
13
+ *
14
+ * @example
15
+ * ```tsx
16
+ * import { Popover } from '@base-ui/react/popover';
17
+ * import {
18
+ * PopoverPopup,
19
+ * PopoverTitle,
20
+ * PopoverDescription,
21
+ * PopoverClose,
22
+ * PopoverArrow,
23
+ * } from '@brijbyte/agentic-ui/popover';
24
+ *
25
+ * <Popover.Root>
26
+ * <Popover.Trigger render={<button>Open</button>} />
27
+ * <Popover.Portal>
28
+ * <Popover.Positioner side="bottom" sideOffset={8}>
29
+ * <PopoverPopup>
30
+ * <PopoverArrow />
31
+ * <PopoverTitle>Details</PopoverTitle>
32
+ * <PopoverDescription>Supporting text here.</PopoverDescription>
33
+ * <PopoverClose aria-label="Close" />
34
+ * </PopoverPopup>
35
+ * </Popover.Positioner>
36
+ * </Popover.Portal>
37
+ * </Popover.Root>
38
+ * ```
39
+ */
40
+ const PopoverPositioner = forwardRef(function PopoverPositioner({ className, ...props }, ref) {
41
+ return /* @__PURE__ */ jsx(Popover.Positioner, {
42
+ ref,
43
+ className: `${popover_module_default.positioner} ${className ?? ""}`,
44
+ ...props
45
+ });
46
+ });
47
+ const PopoverPopup = forwardRef(function PopoverPopup({ className, ...props }, ref) {
48
+ return /* @__PURE__ */ jsx(Popover.Popup, {
49
+ ref,
50
+ className: `${popover_module_default.popup} ${className ?? ""}`,
51
+ ...props
52
+ });
53
+ });
54
+ const PopoverTitle = forwardRef(function PopoverTitle({ className, ...props }, ref) {
55
+ return /* @__PURE__ */ jsx(Popover.Title, {
56
+ ref,
57
+ className: `${popover_module_default.title} ${className ?? ""}`,
58
+ ...props
59
+ });
60
+ });
61
+ const PopoverDescription = forwardRef(function PopoverDescription({ className, ...props }, ref) {
62
+ return /* @__PURE__ */ jsx(Popover.Description, {
63
+ ref,
64
+ className: `${popover_module_default.description} ${className ?? ""}`,
65
+ ...props
66
+ });
67
+ });
68
+ const PopoverClose = forwardRef(function PopoverClose({ className, ...props }, ref) {
69
+ return /* @__PURE__ */ jsx(Popover.Close, {
70
+ ref,
71
+ className: `${popover_module_default.close} ${className ?? ""}`,
72
+ ...props
73
+ });
74
+ });
75
+ const PopoverViewport = forwardRef(function PopoverViewport({ className, ...props }, ref) {
76
+ return /* @__PURE__ */ jsx(Popover.Viewport, {
77
+ ref,
78
+ className: `${popover_module_default.viewport} ${className ?? ""}`,
79
+ ...props
80
+ });
81
+ });
82
+ const PopoverArrow = forwardRef(function PopoverArrow({ className, children, ...props }, ref) {
83
+ return /* @__PURE__ */ jsx(Popover.Arrow, {
84
+ ref,
85
+ className: `${popover_module_default.arrow} ${className ?? ""}`,
86
+ ...props,
87
+ children: children ?? /* @__PURE__ */ jsx(PopupArrow, {
88
+ fillClass: popover_module_default["arrow-fill"],
89
+ seamClass: popover_module_default["arrow-seam"]
90
+ })
91
+ });
92
+ });
93
+ //#endregion
94
+ export { PopoverArrow, PopoverClose, PopoverDescription, PopoverPopup, PopoverPositioner, PopoverTitle, PopoverViewport };
95
+
96
+ //# sourceMappingURL=parts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parts.js","names":["BasePopover","styles"],"sources":["../../src/popover/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Popover.\n *\n * Use these when you need full control over the popover's behaviour\n * (controlled state, custom positioning, anchor overrides) while keeping\n * all agentic-ui styles applied.\n *\n * @example\n * ```tsx\n * import { Popover } from '@base-ui/react/popover';\n * import {\n * PopoverPopup,\n * PopoverTitle,\n * PopoverDescription,\n * PopoverClose,\n * PopoverArrow,\n * } from '@brijbyte/agentic-ui/popover';\n *\n * <Popover.Root>\n * <Popover.Trigger render={<button>Open</button>} />\n * <Popover.Portal>\n * <Popover.Positioner side=\"bottom\" sideOffset={8}>\n * <PopoverPopup>\n * <PopoverArrow />\n * <PopoverTitle>Details</PopoverTitle>\n * <PopoverDescription>Supporting text here.</PopoverDescription>\n * <PopoverClose aria-label=\"Close\" />\n * </PopoverPopup>\n * </Popover.Positioner>\n * </Popover.Portal>\n * </Popover.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport styles from \"./popover.module.css\";\nimport { PopupArrow } from \"../shared/PopupArrow\";\n\ntype BasePositionerProps = ComponentPropsWithoutRef<typeof BasePopover.Positioner>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BasePopover.Popup>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BasePopover.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BasePopover.Description>;\ntype BaseCloseProps = ComponentPropsWithoutRef<typeof BasePopover.Close>;\ntype BaseArrowProps = ComponentPropsWithoutRef<typeof BasePopover.Arrow>;\ntype BaseViewportProps = ComponentPropsWithoutRef<typeof BasePopover.Viewport>;\n\nexport interface PopoverPositionerProps extends Omit<BasePositionerProps, \"className\"> {\n className?: string;\n}\nexport interface PopoverPopupProps extends Omit<BasePopupProps, \"className\"> {\n className?: string;\n}\nexport interface PopoverTitleProps extends Omit<BaseTitleProps, \"className\"> {\n className?: string;\n}\nexport interface PopoverDescriptionProps extends Omit<BaseDescriptionProps, \"className\"> {\n className?: string;\n}\nexport interface PopoverCloseProps extends Omit<BaseCloseProps, \"className\"> {\n className?: string;\n}\nexport interface PopoverArrowProps extends Omit<BaseArrowProps, \"className\"> {\n className?: string;\n}\nexport interface PopoverViewportProps extends Omit<BaseViewportProps, \"className\"> {\n className?: string;\n}\n\nexport const PopoverPositioner = forwardRef<ComponentRef<typeof BasePopover.Positioner>, PopoverPositionerProps>(function PopoverPositioner(\n { className, ...props },\n ref,\n) {\n return <BasePopover.Positioner ref={ref} className={`${styles.positioner} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const PopoverPopup = forwardRef<ComponentRef<typeof BasePopover.Popup>, PopoverPopupProps>(function PopoverPopup(\n { className, ...props },\n ref,\n) {\n return <BasePopover.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const PopoverTitle = forwardRef<ComponentRef<typeof BasePopover.Title>, PopoverTitleProps>(function PopoverTitle(\n { className, ...props },\n ref,\n) {\n return <BasePopover.Title ref={ref} className={`${styles.title} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const PopoverDescription = forwardRef<ComponentRef<typeof BasePopover.Description>, PopoverDescriptionProps>(\n function PopoverDescription({ className, ...props }, ref) {\n return <BasePopover.Description ref={ref} className={`${styles.description} ${className ?? \"\"}`} {...props} />;\n },\n);\n\nexport const PopoverClose = forwardRef<ComponentRef<typeof BasePopover.Close>, PopoverCloseProps>(function PopoverClose(\n { className, ...props },\n ref,\n) {\n return <BasePopover.Close ref={ref} className={`${styles.close} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const PopoverViewport = forwardRef<ComponentRef<typeof BasePopover.Viewport>, PopoverViewportProps>(function PopoverViewport(\n { className, ...props },\n ref,\n) {\n return <BasePopover.Viewport ref={ref} className={`${styles.viewport} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const PopoverArrow = forwardRef<ComponentRef<typeof BasePopover.Arrow>, PopoverArrowProps>(function PopoverArrow(\n { className, children, ...props },\n ref,\n) {\n return (\n <BasePopover.Arrow ref={ref} className={`${styles.arrow} ${className ?? \"\"}`} {...props}>\n {children ?? <PopupArrow fillClass={styles[\"arrow-fill\"]!} seamClass={styles[\"arrow-seam\"]!} />}\n </BasePopover.Arrow>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,QAAY,YAAb;EAA6B;EAAK,WAAW,GAAGC,uBAAO,WAAW,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC5G;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAS,KAAK;AACxD,QAAO,oBAACD,QAAY,aAAb;EAA8B;EAAK,WAAW,GAAGC,uBAAO,YAAY,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAEjH;AAED,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,QAAY,UAAb;EAA2B;EAAK,WAAW,GAAGC,uBAAO,SAAS,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACxG;AAEF,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;AACA,QACE,oBAACD,QAAY,OAAb;EAAwB;EAAK,WAAW,GAAGC,uBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;YAC/E,YAAY,oBAAC,YAAD;GAAY,WAAWA,uBAAO;GAAgB,WAAWA,uBAAO;GAAkB,CAAA;EAC7E,CAAA;EAEtB"}
@@ -0,0 +1,173 @@
1
+ @layer components {
2
+ .positioner_fGG_sa {
3
+ z-index: var(--z-popover);
4
+ }
5
+
6
+ .popup_fGG_sa {
7
+ --arrow-fill: var(--color-elevated);
8
+ --arrow-stroke: var(--color-line);
9
+ background-color: var(--color-elevated);
10
+ border: var(--border-width-base) solid var(--color-line);
11
+ border-radius: var(--radius-xl);
12
+ box-shadow: var(--shadow-popover);
13
+ padding: var(--space-4);
14
+ min-width: 220px;
15
+ max-width: 320px;
16
+ transition: opacity .2s var(--easing-ease-out);
17
+ outline: none;
18
+ }
19
+
20
+ .popup_fGG_sa[data-starting-style] {
21
+ opacity: 0;
22
+ }
23
+
24
+ .popup_fGG_sa[data-ending-style] {
25
+ opacity: 0;
26
+ transition: opacity .1s var(--easing-ease-in);
27
+ }
28
+
29
+ .popup_fGG_sa[data-instant] {
30
+ transition-duration: 0s;
31
+ }
32
+
33
+ @media (prefers-reduced-motion: reduce) {
34
+ .popup_fGG_sa[data-starting-style], .popup_fGG_sa[data-ending-style] {
35
+ transition: none;
36
+ }
37
+ }
38
+
39
+ .title_fGG_sa {
40
+ font-family: var(--font-mono);
41
+ font-size: var(--font-size-md);
42
+ font-weight: var(--font-weight-semibold);
43
+ color: var(--color-primary);
44
+ line-height: var(--line-height-tight);
45
+ margin: 0;
46
+ }
47
+
48
+ .description_fGG_sa {
49
+ font-family: var(--font-mono);
50
+ font-size: var(--font-size-sm);
51
+ color: var(--color-secondary);
52
+ line-height: var(--line-height-relaxed);
53
+ margin: 0;
54
+ margin-top: var(--space-1);
55
+ }
56
+
57
+ .close_fGG_sa {
58
+ top: var(--space-3);
59
+ right: var(--space-3);
60
+ border-radius: var(--radius-sm);
61
+ width: 22px;
62
+ height: 22px;
63
+ color: var(--color-tertiary);
64
+ cursor: pointer;
65
+ transition: background-color var(--duration-fast) var(--easing-standard),
66
+ color var(--duration-fast) var(--easing-standard),
67
+ transform .1s var(--easing-ease-out);
68
+ background: none;
69
+ border: none;
70
+ outline: none;
71
+ flex-shrink: 0;
72
+ justify-content: center;
73
+ align-items: center;
74
+ display: flex;
75
+ position: absolute;
76
+ }
77
+
78
+ .close_fGG_sa:hover {
79
+ background-color: var(--color-hover);
80
+ color: var(--color-primary);
81
+ }
82
+
83
+ .close_fGG_sa:active {
84
+ transform: scale(.94);
85
+ }
86
+
87
+ .close_fGG_sa:focus-visible {
88
+ box-shadow: var(--shadow-focus);
89
+ }
90
+
91
+ .viewport_fGG_sa {
92
+ position: relative;
93
+ overflow: clip;
94
+ }
95
+
96
+ .viewport_fGG_sa [data-current], .viewport_fGG_sa [data-previous] {
97
+ transition: transform .2s var(--easing-ease-out),
98
+ opacity .15s var(--easing-ease-out);
99
+ }
100
+
101
+ .viewport_fGG_sa [data-current][data-starting-style] {
102
+ opacity: 0;
103
+ }
104
+
105
+ .viewport_fGG_sa [data-previous][data-ending-style] {
106
+ opacity: 0;
107
+ transition: transform .2s var(--easing-ease-in),
108
+ opacity .15s var(--easing-ease-in);
109
+ }
110
+
111
+ .viewport_fGG_sa[data-activation-direction~="down"] [data-current][data-starting-style] {
112
+ transform: translateY(-6px);
113
+ }
114
+
115
+ .viewport_fGG_sa[data-activation-direction~="down"] [data-previous][data-ending-style], .viewport_fGG_sa[data-activation-direction~="up"] [data-current][data-starting-style] {
116
+ transform: translateY(6px);
117
+ }
118
+
119
+ .viewport_fGG_sa[data-activation-direction~="up"] [data-previous][data-ending-style] {
120
+ transform: translateY(-6px);
121
+ }
122
+
123
+ .viewport_fGG_sa[data-activation-direction~="right"] [data-current][data-starting-style] {
124
+ transform: translateX(-6px);
125
+ }
126
+
127
+ .viewport_fGG_sa[data-activation-direction~="right"] [data-previous][data-ending-style], .viewport_fGG_sa[data-activation-direction~="left"] [data-current][data-starting-style] {
128
+ transform: translateX(6px);
129
+ }
130
+
131
+ .viewport_fGG_sa[data-activation-direction~="left"] [data-previous][data-ending-style] {
132
+ transform: translateX(-6px);
133
+ }
134
+
135
+ @media (prefers-reduced-motion: reduce) {
136
+ .viewport_fGG_sa [data-current], .viewport_fGG_sa [data-previous] {
137
+ transition: opacity .15s var(--easing-ease-out);
138
+ transform: none !important;
139
+ }
140
+ }
141
+
142
+ .arrow_fGG_sa {
143
+ display: flex;
144
+ }
145
+
146
+ .arrow_fGG_sa[data-side="top"] {
147
+ bottom: -8px;
148
+ rotate: 180deg;
149
+ }
150
+
151
+ .arrow_fGG_sa[data-side="bottom"] {
152
+ top: -8px;
153
+ rotate: 0deg;
154
+ }
155
+
156
+ .arrow_fGG_sa[data-side="left"] {
157
+ right: -13px;
158
+ rotate: 90deg;
159
+ }
160
+
161
+ .arrow_fGG_sa[data-side="right"] {
162
+ left: -13px;
163
+ rotate: -90deg;
164
+ }
165
+
166
+ .arrow-fill_fGG_sa {
167
+ fill: var(--color-elevated);
168
+ }
169
+
170
+ .arrow-seam_fGG_sa {
171
+ fill: var(--color-line);
172
+ }
173
+ }
@@ -0,0 +1,49 @@
1
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
2
+ import { ReactElement, ReactNode } from "react";
3
+ import styles from "./popover.module.css";
4
+
5
+ //#region src/popover/popover.d.ts
6
+ interface PopoverProps {
7
+ /** The trigger element — rendered as-is, receives the popover open/close handler. */
8
+ trigger: ReactElement;
9
+ /** Optional heading rendered at the top of the popup. */
10
+ title?: ReactNode;
11
+ /** Optional supporting text rendered below the title. */
12
+ description?: ReactNode;
13
+ /** Body content of the popover. */
14
+ children?: ReactNode;
15
+ /** Which side of the trigger to open on. @default "bottom" */
16
+ side?: "top" | "bottom" | "left" | "right";
17
+ /** Alignment relative to the trigger. @default "center" */
18
+ align?: "start" | "center" | "end";
19
+ /** Gap between trigger and popup in px. @default 8 */
20
+ sideOffset?: number;
21
+ /** Show a close (×) button in the top-right corner. @default false */
22
+ dismissible?: boolean;
23
+ /** Controlled open state. */
24
+ open?: boolean;
25
+ /** Uncontrolled default open state. */
26
+ defaultOpen?: boolean;
27
+ /** Called when the popover opens or closes. */
28
+ onOpenChange?: (open: boolean, eventDetails: unknown) => void;
29
+ }
30
+ /**
31
+ * Floating content panel anchored to a trigger. Scales from the trigger's
32
+ * edge and repositions automatically to avoid viewport overflow. Supports
33
+ * title, description, close button, and arbitrary body content.
34
+ */
35
+ declare function Popover({
36
+ trigger,
37
+ title,
38
+ description,
39
+ children,
40
+ side,
41
+ align,
42
+ sideOffset,
43
+ dismissible,
44
+ onOpenChange,
45
+ ...props
46
+ }: PopoverProps): react_jsx_runtime0.JSX.Element;
47
+ //#endregion
48
+ export { Popover, PopoverProps, styles };
49
+ //# sourceMappingURL=popover.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.d.ts","names":[],"sources":["../../src/popover/popover.tsx"],"mappings":";;;;;UAKiB,YAAA;;EAEf,OAAA,EAAS,YAAA;EAFM;EAIf,KAAA,GAAQ,SAAA;;EAER,WAAA,GAAc,SAAA;EAFN;EAIR,QAAA,GAAW,SAAA;EAAA;EAEX,IAAA;EAFoB;EAIpB,KAAA;EAVS;EAYT,UAAA;EAVQ;EAYR,WAAA;EAVc;EAYd,IAAA;EAVW;EAYX,WAAA;EARA;EAUA,YAAA,IAAgB,IAAA,WAAe,YAAA;AAAA;;;;;;iBAgBjB,OAAA,CAAA;EACd,OAAA;EACA,KAAA;EACA,WAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,YAAA,GAAY,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -0,0 +1,68 @@
1
+ import { PopupArrow } from "../shared/PopupArrow.js";
2
+ import popover_module_default from "./popover.module.js";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Popover } from "@base-ui/react/popover";
5
+ //#region src/popover/popover.tsx
6
+ function XIcon() {
7
+ return /* @__PURE__ */ jsx("svg", {
8
+ width: "10",
9
+ height: "10",
10
+ viewBox: "0 0 12 12",
11
+ fill: "none",
12
+ "aria-hidden": "true",
13
+ children: /* @__PURE__ */ jsx("path", {
14
+ d: "M2 2L10 10M10 2L2 10",
15
+ stroke: "currentColor",
16
+ strokeWidth: "1.75",
17
+ strokeLinecap: "round"
18
+ })
19
+ });
20
+ }
21
+ /**
22
+ * Floating content panel anchored to a trigger. Scales from the trigger's
23
+ * edge and repositions automatically to avoid viewport overflow. Supports
24
+ * title, description, close button, and arbitrary body content.
25
+ */
26
+ function Popover$1({ trigger, title, description, children, side = "bottom", align = "center", sideOffset = 8, dismissible = false, onOpenChange, ...props }) {
27
+ return /* @__PURE__ */ jsxs(Popover.Root, {
28
+ onOpenChange,
29
+ ...props,
30
+ children: [/* @__PURE__ */ jsx(Popover.Trigger, { render: trigger }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
31
+ className: popover_module_default.positioner,
32
+ side,
33
+ align,
34
+ sideOffset,
35
+ arrowPadding: 8,
36
+ children: /* @__PURE__ */ jsxs(Popover.Popup, {
37
+ className: popover_module_default.popup,
38
+ children: [
39
+ /* @__PURE__ */ jsx(Popover.Arrow, {
40
+ className: popover_module_default.arrow,
41
+ children: /* @__PURE__ */ jsx(PopupArrow, {
42
+ fillClass: popover_module_default["arrow-fill"],
43
+ seamClass: popover_module_default["arrow-seam"]
44
+ })
45
+ }),
46
+ dismissible && /* @__PURE__ */ jsx(Popover.Close, {
47
+ className: popover_module_default.close,
48
+ "aria-label": "Close",
49
+ children: /* @__PURE__ */ jsx(XIcon, {})
50
+ }),
51
+ title && /* @__PURE__ */ jsx(Popover.Title, {
52
+ className: popover_module_default.title,
53
+ children: title
54
+ }),
55
+ description && /* @__PURE__ */ jsx(Popover.Description, {
56
+ className: popover_module_default.description,
57
+ children: description
58
+ }),
59
+ children
60
+ ]
61
+ })
62
+ }) })]
63
+ });
64
+ }
65
+ //#endregion
66
+ export { Popover$1 as Popover };
67
+
68
+ //# sourceMappingURL=popover.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.js","names":["Popover","BasePopover","styles"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["import type { ReactNode, ReactElement } from \"react\";\nimport { Popover as BasePopover } from \"@base-ui/react/popover\";\nimport styles from \"./popover.module.css\";\nimport { PopupArrow } from \"../shared/PopupArrow\";\n\nexport interface PopoverProps {\n /** The trigger element — rendered as-is, receives the popover open/close handler. */\n trigger: ReactElement;\n /** Optional heading rendered at the top of the popup. */\n title?: ReactNode;\n /** Optional supporting text rendered below the title. */\n description?: ReactNode;\n /** Body content of the popover. */\n children?: ReactNode;\n /** Which side of the trigger to open on. @default \"bottom\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n /** Alignment relative to the trigger. @default \"center\" */\n align?: \"start\" | \"center\" | \"end\";\n /** Gap between trigger and popup in px. @default 8 */\n sideOffset?: number;\n /** Show a close (×) button in the top-right corner. @default false */\n dismissible?: boolean;\n /** Controlled open state. */\n open?: boolean;\n /** Uncontrolled default open state. */\n defaultOpen?: boolean;\n /** Called when the popover opens or closes. */\n onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n}\n\nfunction XIcon() {\n return (\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2 2L10 10M10 2L2 10\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n </svg>\n );\n}\n\n/**\n * Floating content panel anchored to a trigger. Scales from the trigger's\n * edge and repositions automatically to avoid viewport overflow. Supports\n * title, description, close button, and arbitrary body content.\n */\nexport function Popover({\n trigger,\n title,\n description,\n children,\n side = \"bottom\",\n align = \"center\",\n sideOffset = 8,\n dismissible = false,\n onOpenChange,\n ...props\n}: PopoverProps) {\n return (\n <BasePopover.Root onOpenChange={onOpenChange as never} {...props}>\n <BasePopover.Trigger render={trigger} />\n <BasePopover.Portal>\n <BasePopover.Positioner className={styles.positioner} side={side} align={align} sideOffset={sideOffset} arrowPadding={8}>\n <BasePopover.Popup className={styles.popup}>\n <BasePopover.Arrow className={styles.arrow}>\n <PopupArrow fillClass={styles[\"arrow-fill\"]!} seamClass={styles[\"arrow-seam\"]!} />\n </BasePopover.Arrow>\n {dismissible && (\n <BasePopover.Close className={styles.close} aria-label=\"Close\">\n <XIcon />\n </BasePopover.Close>\n )}\n {title && <BasePopover.Title className={styles.title}>{title}</BasePopover.Title>}\n {description && <BasePopover.Description className={styles.description}>{description}</BasePopover.Description>}\n {children}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n </BasePopover.Portal>\n </BasePopover.Root>\n );\n}\n\nexport { styles as PopoverStyles };\n"],"mappings":";;;;;AA8BA,SAAS,QAAQ;AACf,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAY;YACtE,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAO,eAAc;GAAU,CAAA;EAC5F,CAAA;;;;;;;AASV,SAAgBA,UAAQ,EACtB,SACA,OACA,aACA,UACA,OAAO,UACP,QAAQ,UACR,aAAa,GACb,cAAc,OACd,cACA,GAAG,SACY;AACf,QACE,qBAACC,QAAY,MAAb;EAAgC;EAAuB,GAAI;YAA3D,CACE,oBAACA,QAAY,SAAb,EAAqB,QAAQ,SAAW,CAAA,EACxC,oBAACA,QAAY,QAAb,EAAA,UACE,oBAACA,QAAY,YAAb;GAAwB,WAAWC,uBAAO;GAAkB;GAAa;GAAmB;GAAY,cAAc;aACpH,qBAACD,QAAY,OAAb;IAAmB,WAAWC,uBAAO;cAArC;KACE,oBAACD,QAAY,OAAb;MAAmB,WAAWC,uBAAO;gBACnC,oBAAC,YAAD;OAAY,WAAWA,uBAAO;OAAgB,WAAWA,uBAAO;OAAkB,CAAA;MAChE,CAAA;KACnB,eACC,oBAACD,QAAY,OAAb;MAAmB,WAAWC,uBAAO;MAAO,cAAW;gBACrD,oBAAC,OAAD,EAAS,CAAA;MACS,CAAA;KAErB,SAAS,oBAACD,QAAY,OAAb;MAAmB,WAAWC,uBAAO;gBAAQ;MAA0B,CAAA;KAChF,eAAe,oBAACD,QAAY,aAAb;MAAyB,WAAWC,uBAAO;gBAAc;MAAsC,CAAA;KAC9G;KACiB;;GACG,CAAA,EACN,CAAA,CACJ"}
@@ -0,0 +1,2 @@
1
+ declare const styles: Record<string, string | undefined>;
2
+ export default styles;
@@ -0,0 +1,16 @@
1
+ //#region src/popover/popover.module.css
2
+ var popover_module_default = {
3
+ "arrow": "arrow_fGG_sa",
4
+ "arrow-fill": "arrow-fill_fGG_sa",
5
+ "arrow-seam": "arrow-seam_fGG_sa",
6
+ "close": "close_fGG_sa",
7
+ "description": "description_fGG_sa",
8
+ "popup": "popup_fGG_sa",
9
+ "positioner": "positioner_fGG_sa",
10
+ "title": "title_fGG_sa",
11
+ "viewport": "viewport_fGG_sa"
12
+ };
13
+ //#endregion
14
+ export { popover_module_default as default };
15
+
16
+ //# sourceMappingURL=popover.module.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.module.js","names":[],"sources":["../../src/popover/popover.module.css"],"sourcesContent":["@layer components {\n .positioner {\n z-index: var(--z-popover);\n }\n\n .popup {\n /* Arrow colour tokens consumed by .arrow-fill / .arrow-stroke below */\n --arrow-fill: var(--color-elevated);\n --arrow-stroke: var(--color-line);\n background-color: var(--color-elevated);\n border: var(--border-width-base) solid var(--color-line);\n border-radius: var(--radius-xl);\n box-shadow: var(--shadow-popover);\n padding: var(--space-4);\n min-width: 220px;\n max-width: 320px;\n outline: none;\n transition: opacity 200ms var(--easing-ease-out);\n }\n\n .popup[data-starting-style] {\n opacity: 0;\n }\n\n .popup[data-ending-style] {\n opacity: 0;\n transition: opacity 100ms var(--easing-ease-in);\n }\n\n /* Instant dismiss/click — skip the exit animation */\n .popup[data-instant] {\n transition-duration: 0ms;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .popup[data-starting-style],\n .popup[data-ending-style] {\n transition: none;\n }\n }\n\n /* ── Internals ──────────────────────────────────────────────────── */\n\n .title {\n font-family: var(--font-mono);\n font-size: var(--font-size-md);\n font-weight: var(--font-weight-semibold);\n color: var(--color-primary);\n line-height: var(--line-height-tight);\n margin: 0;\n }\n\n .description {\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n color: var(--color-secondary);\n line-height: var(--line-height-relaxed);\n margin: 0;\n margin-top: var(--space-1);\n }\n\n .close {\n position: absolute;\n top: var(--space-3);\n right: var(--space-3);\n width: 22px;\n height: 22px;\n border-radius: var(--radius-sm);\n border: none;\n background: transparent;\n color: var(--color-tertiary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n flex-shrink: 0;\n transition:\n background-color var(--duration-fast) var(--easing-standard),\n color var(--duration-fast) var(--easing-standard),\n transform 100ms var(--easing-ease-out);\n }\n\n .close:hover {\n background-color: var(--color-hover);\n color: var(--color-primary);\n }\n\n .close:active {\n transform: scale(0.94);\n }\n\n .close:focus-visible {\n box-shadow: var(--shadow-focus);\n }\n\n /* ── Viewport ───────────────────────────────────────────────────── */\n\n .viewport {\n position: relative;\n overflow: clip;\n }\n\n /* [data-current] and [data-previous] are direct children injected by\n base-ui's Viewport. Both get transition so the slide is smooth. */\n .viewport [data-current],\n .viewport [data-previous] {\n transition:\n transform 200ms var(--easing-ease-out),\n opacity 150ms var(--easing-ease-out);\n }\n\n /* Entering content */\n .viewport [data-current][data-starting-style] {\n opacity: 0;\n }\n\n /* Exiting content */\n .viewport [data-previous][data-ending-style] {\n opacity: 0;\n transition:\n transform 200ms var(--easing-ease-in),\n opacity 150ms var(--easing-ease-in);\n }\n\n /* Slide direction: previous exits opposite, current enters from direction */\n .viewport[data-activation-direction~=\"down\"] [data-current][data-starting-style] {\n transform: translateY(-6px);\n }\n .viewport[data-activation-direction~=\"down\"] [data-previous][data-ending-style] {\n transform: translateY(6px);\n }\n\n .viewport[data-activation-direction~=\"up\"] [data-current][data-starting-style] {\n transform: translateY(6px);\n }\n .viewport[data-activation-direction~=\"up\"] [data-previous][data-ending-style] {\n transform: translateY(-6px);\n }\n\n .viewport[data-activation-direction~=\"right\"] [data-current][data-starting-style] {\n transform: translateX(-6px);\n }\n .viewport[data-activation-direction~=\"right\"] [data-previous][data-ending-style] {\n transform: translateX(6px);\n }\n\n .viewport[data-activation-direction~=\"left\"] [data-current][data-starting-style] {\n transform: translateX(6px);\n }\n .viewport[data-activation-direction~=\"left\"] [data-previous][data-ending-style] {\n transform: translateX(-6px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .viewport [data-current],\n .viewport [data-previous] {\n transition: opacity 150ms var(--easing-ease-out);\n transform: none !important;\n }\n }\n\n /* ── Arrow ──────────────────────────────────────────────────────── */\n .arrow {\n display: flex;\n }\n .arrow[data-side=\"top\"] {\n bottom: -8px;\n rotate: 180deg;\n }\n .arrow[data-side=\"bottom\"] {\n top: -8px;\n rotate: 0deg;\n }\n .arrow[data-side=\"left\"] {\n right: -13px;\n rotate: 90deg;\n }\n .arrow[data-side=\"right\"] {\n left: -13px;\n rotate: -90deg;\n }\n .arrow-fill {\n fill: var(--color-elevated);\n }\n .arrow-seam {\n fill: var(--color-line);\n }\n}\n"],"mappings":";AAkBA,IAAA,yBAAE;CAAA,SAAA;CAAA,cAAA;CAAA,cAAA;CAAA,SAAA;CAAA,eAAA;CAAA,SAAA;CAAA,cAAA;CAAA,SAAA;CAAA,YAAA;CAAA"}
@@ -5,14 +5,25 @@ import styles from "./progress.module.css";
5
5
  type ProgressStatus = "default" | "success" | "warning" | "error";
6
6
  type ProgressSize = "sm" | "md" | "lg";
7
7
  interface ProgressProps {
8
+ /** Current progress value. `null` for indeterminate state. */
8
9
  value?: number | null;
10
+ /** Maximum value (the "complete" end). @default 100 */
9
11
  max?: number;
12
+ /** Accessible label shown above the bar. */
10
13
  label?: string;
14
+ /** Display the percentage next to the label. @default false */
11
15
  showValue?: boolean;
16
+ /** Semantic colour for the progress fill. @default "default" */
12
17
  status?: ProgressStatus;
18
+ /** Bar thickness. @default "md" */
13
19
  size?: ProgressSize;
14
20
  className?: string;
15
21
  }
22
+ /**
23
+ * Linear progress indicator with optional label and percentage display.
24
+ * Pass `value={null}` for an indeterminate animated state. Use `status`
25
+ * to apply semantic colour to the fill.
26
+ */
16
27
  declare function Progress({
17
28
  value,
18
29
  max,
@@ -1 +1 @@
1
- {"version":3,"file":"progress.d.ts","names":[],"sources":["../../src/progress/progress.tsx"],"mappings":";;;;KAGY,cAAA;AAAA,KACA,YAAA;AAAA,UAEK,aAAA;EACf,KAAA;EACA,GAAA;EACA,KAAA;EACA,SAAA;EACA,MAAA,GAAS,cAAA;EACT,IAAA,GAAO,YAAA;EACP,SAAA;AAAA;AAAA,iBAGc,QAAA,CAAA;EAAW,KAAA;EAAc,GAAA;EAAW,KAAA;EAAO,SAAA;EAAmB,MAAA;EAAoB,IAAA;EAAa;AAAA,GAAa,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"progress.d.ts","names":[],"sources":["../../src/progress/progress.tsx"],"mappings":";;;;KAGY,cAAA;AAAA,KACA,YAAA;AAAA,UAEK,aAAA;EAHL;EAKV,KAAA;;EAEA,GAAA;EAPwB;EASxB,KAAA;EARsB;EAUtB,SAAA;EAVsB;EAYtB,MAAA,GAAS,cAAA;EAVM;EAYf,IAAA,GAAO,YAAA;EACP,SAAA;AAAA;;;;;;iBAQc,QAAA,CAAA;EAAW,KAAA;EAAc,GAAA;EAAW,KAAA;EAAO,SAAA;EAAmB,MAAA;EAAoB,IAAA;EAAa;AAAA,GAAa,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -2,6 +2,11 @@ import progress_module_default from "./progress.module.js";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { Progress } from "@base-ui/react/progress";
4
4
  //#region src/progress/progress.tsx
5
+ /**
6
+ * Linear progress indicator with optional label and percentage display.
7
+ * Pass `value={null}` for an indeterminate animated state. Use `status`
8
+ * to apply semantic colour to the fill.
9
+ */
5
10
  function Progress$1({ value = null, max = 100, label, showValue = false, status = "default", size = "md", className }) {
6
11
  const percentage = value != null ? Math.round(value / max * 100) : null;
7
12
  return /* @__PURE__ */ jsxs(Progress.Root, {
@@ -1 +1 @@
1
- {"version":3,"file":"progress.js","names":["Progress","BaseProgress","styles"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport styles from \"./progress.module.css\";\n\nexport type ProgressStatus = \"default\" | \"success\" | \"warning\" | \"error\";\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProgressProps {\n value?: number | null;\n max?: number;\n label?: string;\n showValue?: boolean;\n status?: ProgressStatus;\n size?: ProgressSize;\n className?: string;\n}\n\nexport function Progress({ value = null, max = 100, label, showValue = false, status = \"default\", size = \"md\", className }: ProgressProps) {\n const percentage = value != null ? Math.round((value / max) * 100) : null;\n\n return (\n <BaseProgress.Root className={`${styles.root} ${className ?? \"\"}`} value={value} max={max}>\n {(label ?? showValue) && (\n <div className={styles[\"label-row\"]}>\n {label && <span>{label}</span>}\n {showValue && percentage != null && <span>{percentage}%</span>}\n </div>\n )}\n <BaseProgress.Track className={`${styles.track} ${styles[`track-${size}`]}`}>\n <BaseProgress.Indicator\n className={[\n styles.indicator,\n status !== \"default\" ? styles[`indicator-${status}`] : \"\",\n value == null ? styles[\"indicator-indeterminate\"] : \"\",\n ]\n .filter(Boolean)\n .join(\" \")}\n />\n </BaseProgress.Track>\n </BaseProgress.Root>\n );\n}\nexport { styles as ProgressStyles };\n"],"mappings":";;;;AAgBA,SAAgBA,WAAS,EAAE,QAAQ,MAAM,MAAM,KAAK,OAAO,YAAY,OAAO,SAAS,WAAW,OAAO,MAAM,aAA4B;CACzI,MAAM,aAAa,SAAS,OAAO,KAAK,MAAO,QAAQ,MAAO,IAAI,GAAG;AAErE,QACE,qBAACC,SAAa,MAAd;EAAmB,WAAW,GAAGC,wBAAO,KAAK,GAAG,aAAa;EAAa;EAAY;YAAtF,EACI,SAAS,cACT,qBAAC,OAAD;GAAK,WAAWA,wBAAO;aAAvB,CACG,SAAS,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EAC7B,aAAa,cAAc,QAAQ,qBAAC,QAAD,EAAA,UAAA,CAAO,YAAW,IAAQ,EAAA,CAAA,CAC1D;MAER,oBAACD,SAAa,OAAd;GAAoB,WAAW,GAAGC,wBAAO,MAAM,GAAGA,wBAAO,SAAS;aAChE,oBAACD,SAAa,WAAd,EACE,WAAW;IACTC,wBAAO;IACP,WAAW,YAAYA,wBAAO,aAAa,YAAY;IACvD,SAAS,OAAOA,wBAAO,6BAA6B;IACrD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,EACZ,CAAA;GACiB,CAAA,CACH"}
1
+ {"version":3,"file":"progress.js","names":["Progress","BaseProgress","styles"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["import { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport styles from \"./progress.module.css\";\n\nexport type ProgressStatus = \"default\" | \"success\" | \"warning\" | \"error\";\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProgressProps {\n /** Current progress value. `null` for indeterminate state. */\n value?: number | null;\n /** Maximum value (the \"complete\" end). @default 100 */\n max?: number;\n /** Accessible label shown above the bar. */\n label?: string;\n /** Display the percentage next to the label. @default false */\n showValue?: boolean;\n /** Semantic colour for the progress fill. @default \"default\" */\n status?: ProgressStatus;\n /** Bar thickness. @default \"md\" */\n size?: ProgressSize;\n className?: string;\n}\n\n/**\n * Linear progress indicator with optional label and percentage display.\n * Pass `value={null}` for an indeterminate animated state. Use `status`\n * to apply semantic colour to the fill.\n */\nexport function Progress({ value = null, max = 100, label, showValue = false, status = \"default\", size = \"md\", className }: ProgressProps) {\n const percentage = value != null ? Math.round((value / max) * 100) : null;\n\n return (\n <BaseProgress.Root className={`${styles.root} ${className ?? \"\"}`} value={value} max={max}>\n {(label ?? showValue) && (\n <div className={styles[\"label-row\"]}>\n {label && <span>{label}</span>}\n {showValue && percentage != null && <span>{percentage}%</span>}\n </div>\n )}\n <BaseProgress.Track className={`${styles.track} ${styles[`track-${size}`]}`}>\n <BaseProgress.Indicator\n className={[\n styles.indicator,\n status !== \"default\" ? styles[`indicator-${status}`] : \"\",\n value == null ? styles[\"indicator-indeterminate\"] : \"\",\n ]\n .filter(Boolean)\n .join(\" \")}\n />\n </BaseProgress.Track>\n </BaseProgress.Root>\n );\n}\nexport { styles as ProgressStyles };\n"],"mappings":";;;;;;;;;AA2BA,SAAgBA,WAAS,EAAE,QAAQ,MAAM,MAAM,KAAK,OAAO,YAAY,OAAO,SAAS,WAAW,OAAO,MAAM,aAA4B;CACzI,MAAM,aAAa,SAAS,OAAO,KAAK,MAAO,QAAQ,MAAO,IAAI,GAAG;AAErE,QACE,qBAACC,SAAa,MAAd;EAAmB,WAAW,GAAGC,wBAAO,KAAK,GAAG,aAAa;EAAa;EAAY;YAAtF,EACI,SAAS,cACT,qBAAC,OAAD;GAAK,WAAWA,wBAAO;aAAvB,CACG,SAAS,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,EAC7B,aAAa,cAAc,QAAQ,qBAAC,QAAD,EAAA,UAAA,CAAO,YAAW,IAAQ,EAAA,CAAA,CAC1D;MAER,oBAACD,SAAa,OAAd;GAAoB,WAAW,GAAGC,wBAAO,MAAM,GAAGA,wBAAO,SAAS;aAChE,oBAACD,SAAa,WAAd,EACE,WAAW;IACTC,wBAAO;IACP,WAAW,YAAYA,wBAAO,aAAa,YAAY;IACvD,SAAS,OAAOA,wBAAO,6BAA6B;IACrD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,EACZ,CAAA;GACiB,CAAA,CACH"}
@@ -0,0 +1,3 @@
1
+ import { Radio, RadioProps, styles } from "./radio.js";
2
+ import { RadioIndicator, RadioIndicatorProps, RadioRoot, RadioRootProps } from "./parts.js";
3
+ export { Radio, RadioIndicator, type RadioIndicatorProps, type RadioProps, RadioRoot, type RadioRootProps, styles as RadioStyles };
@@ -0,0 +1,4 @@
1
+ import radio_module_default from "./radio.module.js";
2
+ import { Radio } from "./radio.js";
3
+ import { RadioIndicator, RadioRoot } from "./parts.js";
4
+ export { Radio, RadioIndicator, RadioRoot, radio_module_default as RadioStyles };
@@ -0,0 +1,18 @@
1
+ import * as react from "react";
2
+ import { ComponentPropsWithoutRef } from "react";
3
+ import { Radio } from "@base-ui/react/radio";
4
+
5
+ //#region src/radio/parts.d.ts
6
+ type BaseRootProps = ComponentPropsWithoutRef<typeof Radio.Root>;
7
+ type BaseIndicatorProps = ComponentPropsWithoutRef<typeof Radio.Indicator>;
8
+ interface RadioRootProps extends Omit<BaseRootProps, "className"> {
9
+ className?: string;
10
+ }
11
+ interface RadioIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
12
+ className?: string;
13
+ }
14
+ declare const RadioRoot: react.ForwardRefExoticComponent<RadioRootProps & react.RefAttributes<HTMLSpanElement>>;
15
+ declare const RadioIndicator: react.ForwardRefExoticComponent<RadioIndicatorProps & react.RefAttributes<HTMLSpanElement>>;
16
+ //#endregion
17
+ export { RadioIndicator, RadioIndicatorProps, RadioRoot, RadioRootProps };
18
+ //# sourceMappingURL=parts.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/radio/parts.tsx"],"mappings":";;;;;KAuBK,aAAA,GAAgB,wBAAA,QAAgC,KAAA,CAAU,IAAA;AAAA,KAC1D,kBAAA,GAAqB,wBAAA,QAAgC,KAAA,CAAU,SAAA;AAAA,UAEnD,cAAA,SAAuB,IAAA,CAAK,aAAA;EAC3C,SAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,IAAA,CAAK,kBAAA;EAChD,SAAA;AAAA;AAAA,cAGW,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,cAIT,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}
@@ -0,0 +1,42 @@
1
+ import radio_module_default from "./radio.module.js";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { forwardRef } from "react";
4
+ import { Radio } from "@base-ui/react/radio";
5
+ //#region src/radio/parts.tsx
6
+ /**
7
+ * Styled primitives for Radio (single item).
8
+ *
9
+ * @example
10
+ * ```tsx
11
+ * import { RadioGroup } from '@base-ui/react/radio-group';
12
+ * import { RadioRoot, RadioIndicator } from '@brijbyte/agentic-ui/radio';
13
+ *
14
+ * <RadioGroup defaultValue="a">
15
+ * <label htmlFor="opt-a">
16
+ * <RadioRoot id="opt-a" value="a">
17
+ * <RadioIndicator />
18
+ * </RadioRoot>
19
+ * Option A
20
+ * </label>
21
+ * </RadioGroup>
22
+ * ```
23
+ */
24
+ const RadioRoot = forwardRef(function RadioRoot({ className, ...props }, ref) {
25
+ return /* @__PURE__ */ jsx(Radio.Root, {
26
+ ref,
27
+ className: `${radio_module_default.radio} ${className ?? ""}`,
28
+ ...props
29
+ });
30
+ });
31
+ const RadioIndicator = forwardRef(function RadioIndicator({ className, ...props }, ref) {
32
+ return /* @__PURE__ */ jsx(Radio.Indicator, {
33
+ ref,
34
+ keepMounted: true,
35
+ className: `${radio_module_default.indicator} ${className ?? ""}`,
36
+ ...props
37
+ });
38
+ });
39
+ //#endregion
40
+ export { RadioIndicator, RadioRoot };
41
+
42
+ //# sourceMappingURL=parts.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parts.js","names":["BaseRadio","styles"],"sources":["../../src/radio/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Radio (single item).\n *\n * @example\n * ```tsx\n * import { RadioGroup } from '@base-ui/react/radio-group';\n * import { RadioRoot, RadioIndicator } from '@brijbyte/agentic-ui/radio';\n *\n * <RadioGroup defaultValue=\"a\">\n * <label htmlFor=\"opt-a\">\n * <RadioRoot id=\"opt-a\" value=\"a\">\n * <RadioIndicator />\n * </RadioRoot>\n * Option A\n * </label>\n * </RadioGroup>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport styles from \"./radio.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseRadio.Root>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseRadio.Indicator>;\n\nexport interface RadioRootProps extends Omit<BaseRootProps, \"className\"> {\n className?: string;\n}\nexport interface RadioIndicatorProps extends Omit<BaseIndicatorProps, \"className\"> {\n className?: string;\n}\n\nexport const RadioRoot = forwardRef<ComponentRef<typeof BaseRadio.Root>, RadioRootProps>(function RadioRoot({ className, ...props }, ref) {\n return <BaseRadio.Root ref={ref} className={`${styles.radio} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const RadioIndicator = forwardRef<ComponentRef<typeof BaseRadio.Indicator>, RadioIndicatorProps>(function RadioIndicator(\n { className, ...props },\n ref,\n) {\n return <BaseRadio.Indicator ref={ref} keepMounted className={`${styles.indicator} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,YAAY,WAAgE,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;AACxI,QAAO,oBAACA,MAAU,MAAX;EAAqB;EAAK,WAAW,GAAGC,qBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAC/F;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,MAAU,WAAX;EAA0B;EAAK,aAAA;EAAY,WAAW,GAAGC,qBAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpH"}