@brijbyte/agentic-ui 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +280 -53
- package/dist/accordion/accordion.d.ts +14 -0
- package/dist/accordion/accordion.d.ts.map +1 -1
- package/dist/accordion/accordion.js +5 -0
- package/dist/accordion/accordion.js.map +1 -1
- package/dist/accordion/index.d.ts +2 -2
- package/dist/accordion/index.js +2 -2
- package/dist/accordion/parts.d.ts +6 -14
- package/dist/accordion/parts.d.ts.map +1 -1
- package/dist/accordion/parts.js +7 -6
- package/dist/accordion/parts.js.map +1 -1
- package/dist/alert-dialog/alert-dialog.d.ts +11 -0
- package/dist/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/dist/alert-dialog/alert-dialog.js +5 -0
- package/dist/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/alert-dialog/parts.d.ts +4 -12
- package/dist/alert-dialog/parts.d.ts.map +1 -1
- package/dist/alert-dialog/parts.js +17 -19
- package/dist/alert-dialog/parts.js.map +1 -1
- package/dist/badge/badge.d.ts +6 -0
- package/dist/badge/badge.d.ts.map +1 -1
- package/dist/badge/badge.js +4 -0
- package/dist/badge/badge.js.map +1 -1
- package/dist/button/button.d.ts +12 -1
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +5 -0
- package/dist/button/button.js.map +1 -1
- package/dist/card/card.d.ts +10 -0
- package/dist/card/card.d.ts.map +1 -1
- package/dist/card/card.js +7 -0
- package/dist/card/card.js.map +1 -1
- package/dist/checkbox/checkbox.d.ts +13 -0
- package/dist/checkbox/checkbox.d.ts.map +1 -1
- package/dist/checkbox/checkbox.js +4 -0
- package/dist/checkbox/checkbox.js.map +1 -1
- package/dist/checkbox/parts.d.ts +2 -5
- package/dist/checkbox/parts.d.ts.map +1 -1
- package/dist/checkbox/parts.js +3 -2
- package/dist/checkbox/parts.js.map +1 -1
- package/dist/collapsible/collapsible.d.ts +11 -0
- package/dist/collapsible/collapsible.d.ts.map +1 -1
- package/dist/collapsible/collapsible.js +5 -0
- package/dist/collapsible/collapsible.js.map +1 -1
- package/dist/collapsible/parts.d.ts +3 -9
- package/dist/collapsible/parts.d.ts.map +1 -1
- package/dist/collapsible/parts.js +7 -6
- package/dist/collapsible/parts.js.map +1 -1
- package/dist/context-menu/context-menu.d.ts +5 -0
- package/dist/context-menu/context-menu.d.ts.map +1 -1
- package/dist/context-menu/context-menu.js +4 -0
- package/dist/context-menu/context-menu.js.map +1 -1
- package/dist/context-menu/parts.d.ts +6 -18
- package/dist/context-menu/parts.d.ts.map +1 -1
- package/dist/context-menu/parts.js +16 -16
- package/dist/context-menu/parts.js.map +1 -1
- package/dist/dialog/dialog.d.ts +13 -1
- package/dist/dialog/dialog.d.ts.map +1 -1
- package/dist/dialog/dialog.js +6 -0
- package/dist/dialog/dialog.js.map +1 -1
- package/dist/dialog/parts.d.ts +6 -18
- package/dist/dialog/parts.d.ts.map +1 -1
- package/dist/dialog/parts.js +8 -9
- package/dist/dialog/parts.js.map +1 -1
- package/dist/drawer/drawer.d.ts +11 -0
- package/dist/drawer/drawer.d.ts.map +1 -1
- package/dist/drawer/drawer.js +5 -0
- package/dist/drawer/drawer.js.map +1 -1
- package/dist/drawer/parts.d.ts +7 -19
- package/dist/drawer/parts.d.ts.map +1 -1
- package/dist/drawer/parts.js +14 -13
- package/dist/drawer/parts.js.map +1 -1
- package/dist/index.css +1580 -1150
- package/dist/index.d.ts +20 -11
- package/dist/index.js +15 -2
- package/dist/input/input.d.ts +8 -0
- package/dist/input/input.d.ts.map +1 -1
- package/dist/input/input.js +5 -0
- package/dist/input/input.js.map +1 -1
- package/dist/menu/menu.css +3 -8
- package/dist/menu/menu.d.ts +11 -4
- package/dist/menu/menu.d.ts.map +1 -1
- package/dist/menu/menu.js +10 -24
- package/dist/menu/menu.js.map +1 -1
- package/dist/menu/menu.module.js +1 -1
- package/dist/menu/menu.module.js.map +1 -1
- package/dist/menu/parts.d.ts +6 -18
- package/dist/menu/parts.d.ts.map +1 -1
- package/dist/menu/parts.js +7 -6
- package/dist/menu/parts.js.map +1 -1
- package/dist/meter/circular-meter.d.ts +48 -0
- package/dist/meter/circular-meter.d.ts.map +1 -0
- package/dist/meter/circular-meter.js +86 -0
- package/dist/meter/circular-meter.js.map +1 -0
- package/dist/meter/index.d.ts +4 -0
- package/dist/meter/index.js +5 -0
- package/dist/meter/meter.css +152 -0
- package/dist/meter/meter.d.ts +58 -0
- package/dist/meter/meter.d.ts.map +1 -0
- package/dist/meter/meter.js +50 -0
- package/dist/meter/meter.js.map +1 -0
- package/dist/meter/meter.module.css.d.ts +2 -0
- package/dist/meter/meter.module.js +27 -0
- package/dist/meter/meter.module.js.map +1 -0
- package/dist/meter/meterState.js +18 -0
- package/dist/meter/meterState.js.map +1 -0
- package/dist/meter/parts.d.ts +25 -0
- package/dist/meter/parts.d.ts.map +1 -0
- package/dist/meter/parts.js +57 -0
- package/dist/meter/parts.js.map +1 -0
- package/dist/number-field/number-field.d.ts +16 -0
- package/dist/number-field/number-field.d.ts.map +1 -1
- package/dist/number-field/number-field.js +4 -0
- package/dist/number-field/number-field.js.map +1 -1
- package/dist/number-field/parts.d.ts +6 -18
- package/dist/number-field/parts.d.ts.map +1 -1
- package/dist/number-field/parts.js +7 -6
- package/dist/number-field/parts.js.map +1 -1
- package/dist/popover/index.d.ts +3 -0
- package/dist/popover/index.js +4 -0
- package/dist/popover/parts.d.ts +29 -0
- package/dist/popover/parts.d.ts.map +1 -0
- package/dist/popover/parts.js +93 -0
- package/dist/popover/parts.js.map +1 -0
- package/dist/popover/popover.css +173 -0
- package/dist/popover/popover.d.ts +49 -0
- package/dist/popover/popover.d.ts.map +1 -0
- package/dist/popover/popover.js +68 -0
- package/dist/popover/popover.js.map +1 -0
- package/dist/popover/popover.module.css.d.ts +2 -0
- package/dist/popover/popover.module.js +16 -0
- package/dist/popover/popover.module.js.map +1 -0
- package/dist/progress/parts.d.ts +2 -4
- package/dist/progress/parts.d.ts.map +1 -1
- package/dist/progress/parts.js +3 -6
- package/dist/progress/parts.js.map +1 -1
- package/dist/progress/progress.d.ts +11 -0
- package/dist/progress/progress.d.ts.map +1 -1
- package/dist/progress/progress.js +5 -0
- package/dist/progress/progress.js.map +1 -1
- package/dist/radio/index.d.ts +3 -0
- package/dist/radio/index.js +4 -0
- package/dist/radio/parts.d.ts +14 -0
- package/dist/radio/parts.d.ts.map +1 -0
- package/dist/radio/parts.js +43 -0
- package/dist/radio/parts.js.map +1 -0
- package/dist/radio/radio.css +84 -0
- package/dist/radio/radio.d.ts +31 -0
- package/dist/radio/radio.d.ts.map +1 -0
- package/dist/radio/radio.js +33 -0
- package/dist/radio/radio.js.map +1 -0
- package/dist/radio/radio.module.css.d.ts +2 -0
- package/dist/radio/radio.module.js +11 -0
- package/dist/radio/radio.module.js.map +1 -0
- package/dist/radio-group/index.d.ts +3 -0
- package/dist/radio-group/index.js +4 -0
- package/dist/radio-group/parts.d.ts +11 -0
- package/dist/radio-group/parts.d.ts.map +1 -0
- package/dist/radio-group/parts.js +32 -0
- package/dist/radio-group/parts.js.map +1 -0
- package/dist/radio-group/radio-group.css +17 -0
- package/dist/radio-group/radio-group.d.ts +37 -0
- package/dist/radio-group/radio-group.d.ts.map +1 -0
- package/dist/radio-group/radio-group.js +28 -0
- package/dist/radio-group/radio-group.js.map +1 -0
- package/dist/radio-group/radio-group.module.css.d.ts +2 -0
- package/dist/radio-group/radio-group.module.js +9 -0
- package/dist/radio-group/radio-group.module.js.map +1 -0
- package/dist/reset-scoped.css +112 -0
- package/dist/select/parts.d.ts +11 -32
- package/dist/select/parts.d.ts.map +1 -1
- package/dist/select/parts.js +10 -9
- package/dist/select/parts.js.map +1 -1
- package/dist/select/select.d.ts +14 -1
- package/dist/select/select.d.ts.map +1 -1
- package/dist/select/select.js +4 -0
- package/dist/select/select.js.map +1 -1
- package/dist/separator/separator.d.ts +4 -0
- package/dist/separator/separator.d.ts.map +1 -1
- package/dist/separator/separator.js +4 -0
- package/dist/separator/separator.js.map +1 -1
- package/dist/shared/PopupArrow.js +22 -0
- package/dist/shared/PopupArrow.js.map +1 -0
- package/dist/slider/parts.d.ts +6 -18
- package/dist/slider/parts.d.ts.map +1 -1
- package/dist/slider/parts.js +7 -6
- package/dist/slider/parts.js.map +1 -1
- package/dist/slider/slider.d.ts +18 -0
- package/dist/slider/slider.d.ts.map +1 -1
- package/dist/slider/slider.js +6 -0
- package/dist/slider/slider.js.map +1 -1
- package/dist/switch/parts.d.ts +2 -6
- package/dist/switch/parts.d.ts.map +1 -1
- package/dist/switch/parts.js +3 -2
- package/dist/switch/parts.js.map +1 -1
- package/dist/switch/switch.css +11 -2
- package/dist/switch/switch.d.ts +12 -0
- package/dist/switch/switch.d.ts.map +1 -1
- package/dist/switch/switch.js +4 -0
- package/dist/switch/switch.js.map +1 -1
- package/dist/switch/switch.module.js.map +1 -1
- package/dist/tabs/parts.d.ts +3 -9
- package/dist/tabs/parts.d.ts.map +1 -1
- package/dist/tabs/parts.js +4 -3
- package/dist/tabs/parts.js.map +1 -1
- package/dist/tabs/tabs.d.ts +8 -1
- package/dist/tabs/tabs.d.ts.map +1 -1
- package/dist/tabs/tabs.js +4 -0
- package/dist/tabs/tabs.js.map +1 -1
- package/dist/toast/parts.d.ts +5 -15
- package/dist/toast/parts.d.ts.map +1 -1
- package/dist/toast/parts.js +6 -5
- package/dist/toast/parts.js.map +1 -1
- package/dist/toast/toast.d.ts +11 -0
- package/dist/toast/toast.d.ts.map +1 -1
- package/dist/toast/toast.js +8 -0
- package/dist/toast/toast.js.map +1 -1
- package/dist/tooltip/parts.d.ts +3 -9
- package/dist/tooltip/parts.d.ts.map +1 -1
- package/dist/tooltip/parts.js +4 -3
- package/dist/tooltip/parts.js.map +1 -1
- package/dist/tooltip/tooltip.d.ts +9 -0
- package/dist/tooltip/tooltip.d.ts.map +1 -1
- package/dist/tooltip/tooltip.js +4 -0
- package/dist/tooltip/tooltip.js.map +1 -1
- package/dist/utils/resolveClassName.js +25 -0
- package/dist/utils/resolveClassName.js.map +1 -0
- package/package.json +25 -4
- package/src/accordion/accordion.tsx +14 -0
- package/src/accordion/index.ts +1 -1
- package/src/accordion/parts.tsx +10 -17
- package/src/alert-dialog/alert-dialog.tsx +11 -0
- package/src/alert-dialog/parts.tsx +23 -31
- package/src/badge/badge.tsx +6 -0
- package/src/button/button.tsx +12 -1
- package/src/card/card.tsx +10 -0
- package/src/checkbox/checkbox.tsx +13 -0
- package/src/checkbox/parts.tsx +5 -7
- package/src/collapsible/collapsible.tsx +11 -0
- package/src/collapsible/parts.tsx +10 -15
- package/src/context-menu/context-menu.tsx +5 -0
- package/src/context-menu/parts.tsx +34 -34
- package/src/dialog/dialog.tsx +13 -1
- package/src/dialog/parts.tsx +14 -27
- package/src/drawer/drawer.tsx +11 -0
- package/src/drawer/parts.tsx +30 -38
- package/src/index.ts +4 -0
- package/src/input/input.tsx +8 -0
- package/src/menu/menu.module.css +3 -10
- package/src/menu/menu.tsx +13 -26
- package/src/menu/parts.tsx +13 -24
- package/src/meter/circular-meter.tsx +114 -0
- package/src/meter/index.ts +9 -0
- package/src/meter/meter.module.css +162 -0
- package/src/meter/meter.tsx +86 -0
- package/src/meter/meterState.ts +29 -0
- package/src/meter/parts.tsx +73 -0
- package/src/number-field/number-field.tsx +16 -0
- package/src/number-field/parts.tsx +33 -24
- package/src/popover/index.ts +14 -0
- package/src/popover/parts.tsx +105 -0
- package/src/popover/popover.module.css +189 -0
- package/src/popover/popover.tsx +80 -0
- package/src/progress/parts.tsx +13 -6
- package/src/progress/progress.tsx +11 -0
- package/src/radio/index.ts +6 -0
- package/src/radio/parts.tsx +42 -0
- package/src/radio/radio.module.css +96 -0
- package/src/radio/radio.tsx +37 -0
- package/src/radio-group/index.ts +5 -0
- package/src/radio-group/parts.tsx +31 -0
- package/src/radio-group/radio-group.module.css +17 -0
- package/src/radio-group/radio-group.tsx +63 -0
- package/src/select/parts.tsx +34 -41
- package/src/select/select.tsx +14 -1
- package/src/separator/separator.tsx +4 -0
- package/src/shared/PopupArrow.tsx +41 -0
- package/src/slider/parts.tsx +13 -24
- package/src/slider/slider.tsx +18 -0
- package/src/styles/reset-scoped.css +112 -0
- package/src/switch/parts.tsx +5 -8
- package/src/switch/switch.module.css +11 -2
- package/src/switch/switch.tsx +12 -0
- package/src/tabs/parts.tsx +7 -12
- package/src/tabs/tabs.tsx +8 -1
- package/src/toast/parts.tsx +11 -20
- package/src/toast/toast.tsx +11 -0
- package/src/tooltip/parts.tsx +7 -12
- package/src/tooltip/tooltip.tsx +9 -0
- package/src/utils/resolveClassName.ts +24 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/progress/parts.tsx"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/progress/parts.tsx"],"mappings":";;;;;KAqBK,cAAA,GAAiB,wBAAA,QAAgC,QAAA,CAAa,KAAA;AAAA,KAC9D,kBAAA,GAAqB,wBAAA,QAAgC,QAAA,CAAa,SAAA;AAAA,UAEtD,kBAAA,SAA2B,cAAA;EAC1C,IAAA;AAAA;AAAA,UAEe,sBAAA,SAA+B,kBAAA;EAC9C,MAAA;AAAA;AAAA,cAGW,aAAA,EAAa,KAAA,CAAA,yBAAA,CAAA,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAab,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
|
package/dist/progress/parts.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { cx, resolveClassName } from "../utils/resolveClassName.js";
|
|
1
2
|
import progress_module_default from "./progress.module.js";
|
|
2
3
|
import { jsx } from "react/jsx-runtime";
|
|
3
4
|
import { forwardRef } from "react";
|
|
@@ -21,18 +22,14 @@ import { Progress } from "@base-ui/react/progress";
|
|
|
21
22
|
const ProgressTrack = forwardRef(function ProgressTrack({ className, size = "md", ...props }, ref) {
|
|
22
23
|
return /* @__PURE__ */ jsx(Progress.Track, {
|
|
23
24
|
ref,
|
|
24
|
-
className:
|
|
25
|
+
className: (state) => cx(progress_module_default.track, progress_module_default[`track-${size}`], resolveClassName(className, state)),
|
|
25
26
|
...props
|
|
26
27
|
});
|
|
27
28
|
});
|
|
28
29
|
const ProgressIndicator = forwardRef(function ProgressIndicator({ className, status = "default", ...props }, ref) {
|
|
29
30
|
return /* @__PURE__ */ jsx(Progress.Indicator, {
|
|
30
31
|
ref,
|
|
31
|
-
className: [
|
|
32
|
-
progress_module_default.indicator,
|
|
33
|
-
status !== "default" ? progress_module_default[`indicator-${status}`] : "",
|
|
34
|
-
className ?? ""
|
|
35
|
-
].filter(Boolean).join(" "),
|
|
32
|
+
className: (state) => cx(progress_module_default.indicator, status !== "default" ? progress_module_default[`indicator-${status}`] : void 0, resolveClassName(className, state)),
|
|
36
33
|
...props
|
|
37
34
|
});
|
|
38
35
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"parts.js","names":["BaseProgress","styles"],"sources":["../../src/progress/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Progress.\n *\n * @example\n * ```tsx\n * import { Progress } from '@base-ui/react/progress';\n * import { ProgressTrack, ProgressIndicator } from '@brijbyte/agentic-ui/progress';\n *\n * <Progress.Root value={60} max={100}>\n * <ProgressTrack>\n * <ProgressIndicator />\n * </ProgressTrack>\n * </Progress.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport styles from \"./progress.module.css\";\n\ntype BaseTrackProps = ComponentPropsWithoutRef<typeof BaseProgress.Track>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;\n\nexport interface ProgressTrackProps extends
|
|
1
|
+
{"version":3,"file":"parts.js","names":["BaseProgress","styles"],"sources":["../../src/progress/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Progress.\n *\n * @example\n * ```tsx\n * import { Progress } from '@base-ui/react/progress';\n * import { ProgressTrack, ProgressIndicator } from '@brijbyte/agentic-ui/progress';\n *\n * <Progress.Root value={60} max={100}>\n * <ProgressTrack>\n * <ProgressIndicator />\n * </ProgressTrack>\n * </Progress.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\";\nimport styles from \"./progress.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseTrackProps = ComponentPropsWithoutRef<typeof BaseProgress.Track>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseProgress.Indicator>;\n\nexport interface ProgressTrackProps extends BaseTrackProps {\n size?: \"sm\" | \"md\" | \"lg\";\n}\nexport interface ProgressIndicatorProps extends BaseIndicatorProps {\n status?: \"default\" | \"success\" | \"warning\" | \"error\";\n}\n\nexport const ProgressTrack = forwardRef<ComponentRef<typeof BaseProgress.Track>, ProgressTrackProps>(function ProgressTrack(\n { className, size = \"md\", ...props },\n ref,\n) {\n return (\n <BaseProgress.Track\n ref={ref}\n className={(state) => cx(styles.track, styles[`track-${size}`], resolveClassName(className, state))}\n {...props}\n />\n );\n});\n\nexport const ProgressIndicator = forwardRef<ComponentRef<typeof BaseProgress.Indicator>, ProgressIndicatorProps>(function ProgressIndicator(\n { className, status = \"default\", ...props },\n ref,\n) {\n return (\n <BaseProgress.Indicator\n ref={ref}\n className={(state) =>\n cx(styles.indicator, status !== \"default\" ? styles[`indicator-${status}`] : undefined, resolveClassName(className, state))\n }\n {...props}\n />\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,gBAAgB,WAAwE,SAAS,cAC5G,EAAE,WAAW,OAAO,MAAM,GAAG,SAC7B,KACA;AACA,QACE,oBAACA,SAAa,OAAd;EACO;EACL,YAAY,UAAU,GAAGC,wBAAO,OAAOA,wBAAO,SAAS,SAAS,iBAAiB,WAAW,MAAM,CAAC;EACnG,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,SAAS,WAAW,GAAG,SACpC,KACA;AACA,QACE,oBAACD,SAAa,WAAd;EACO;EACL,YAAY,UACV,GAAGC,wBAAO,WAAW,WAAW,YAAYA,wBAAO,aAAa,YAAY,KAAA,GAAW,iBAAiB,WAAW,MAAM,CAAC;EAE5H,GAAI;EACJ,CAAA;EAEJ"}
|
|
@@ -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;
|
|
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":"
|
|
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,14 @@
|
|
|
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 BaseRootProps {}
|
|
9
|
+
interface RadioIndicatorProps extends BaseIndicatorProps {}
|
|
10
|
+
declare const RadioRoot: react.ForwardRefExoticComponent<RadioRootProps & react.RefAttributes<HTMLSpanElement>>;
|
|
11
|
+
declare const RadioIndicator: react.ForwardRefExoticComponent<RadioIndicatorProps & react.RefAttributes<HTMLSpanElement>>;
|
|
12
|
+
//#endregion
|
|
13
|
+
export { RadioIndicator, RadioIndicatorProps, RadioRoot, RadioRootProps };
|
|
14
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/radio/parts.tsx"],"mappings":";;;;;KAwBK,aAAA,GAAgB,wBAAA,QAAgC,KAAA,CAAU,IAAA;AAAA,KAC1D,kBAAA,GAAqB,wBAAA,QAAgC,KAAA,CAAU,SAAA;AAAA,UAEnD,cAAA,SAAuB,aAAA;AAAA,UACvB,mBAAA,SAA4B,kBAAA;AAAA,cAEhC,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,43 @@
|
|
|
1
|
+
import { cx, resolveClassName } from "../utils/resolveClassName.js";
|
|
2
|
+
import radio_module_default from "./radio.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { Radio } from "@base-ui/react/radio";
|
|
6
|
+
//#region src/radio/parts.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Styled primitives for Radio (single item).
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* import { RadioGroup } from '@base-ui/react/radio-group';
|
|
13
|
+
* import { RadioRoot, RadioIndicator } from '@brijbyte/agentic-ui/radio';
|
|
14
|
+
*
|
|
15
|
+
* <RadioGroup defaultValue="a">
|
|
16
|
+
* <label htmlFor="opt-a">
|
|
17
|
+
* <RadioRoot id="opt-a" value="a">
|
|
18
|
+
* <RadioIndicator />
|
|
19
|
+
* </RadioRoot>
|
|
20
|
+
* Option A
|
|
21
|
+
* </label>
|
|
22
|
+
* </RadioGroup>
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
const RadioRoot = forwardRef(function RadioRoot({ className, ...props }, ref) {
|
|
26
|
+
return /* @__PURE__ */ jsx(Radio.Root, {
|
|
27
|
+
ref,
|
|
28
|
+
className: (state) => cx(radio_module_default.radio, resolveClassName(className, state)),
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
const RadioIndicator = forwardRef(function RadioIndicator({ className, ...props }, ref) {
|
|
33
|
+
return /* @__PURE__ */ jsx(Radio.Indicator, {
|
|
34
|
+
ref,
|
|
35
|
+
keepMounted: true,
|
|
36
|
+
className: (state) => cx(radio_module_default.indicator, resolveClassName(className, state)),
|
|
37
|
+
...props
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
//#endregion
|
|
41
|
+
export { RadioIndicator, RadioRoot };
|
|
42
|
+
|
|
43
|
+
//# 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\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseRadio.Root>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseRadio.Indicator>;\n\nexport interface RadioRootProps extends BaseRootProps {}\nexport interface RadioIndicatorProps extends BaseIndicatorProps {}\n\nexport const RadioRoot = forwardRef<ComponentRef<typeof BaseRadio.Root>, RadioRootProps>(function RadioRoot({ className, ...props }, ref) {\n return <BaseRadio.Root ref={ref} className={(state) => cx(styles.radio, resolveClassName(className, state))} {...props} />;\n});\n\nexport const RadioIndicator = forwardRef<ComponentRef<typeof BaseRadio.Indicator>, RadioIndicatorProps>(function RadioIndicator(\n { className, ...props },\n ref,\n) {\n return (\n <BaseRadio.Indicator ref={ref} keepMounted className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,YAAY,WAAgE,SAAS,UAAU,EAAE,WAAW,GAAG,SAAS,KAAK;AACxI,QAAO,oBAACA,MAAU,MAAX;EAAqB;EAAK,YAAY,UAAU,GAAGC,qBAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC1H;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QACE,oBAACD,MAAU,WAAX;EAA0B;EAAK,aAAA;EAAY,YAAY,UAAU,GAAGC,qBAAO,WAAW,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAE1I"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.item_hqwDuG {
|
|
3
|
+
align-items: center;
|
|
4
|
+
gap: var(--space-2);
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
user-select: none;
|
|
7
|
+
display: flex;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.item_hqwDuG:has([data-disabled]) {
|
|
11
|
+
cursor: not-allowed;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.item_hqwDuG:has([data-disabled]) .label_hqwDuG {
|
|
15
|
+
opacity: .44;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.radio_hqwDuG {
|
|
19
|
+
border-radius: var(--radius-full);
|
|
20
|
+
border: var(--border-width-base) solid var(--color-line-strong);
|
|
21
|
+
background-color: var(--color-surface-1);
|
|
22
|
+
width: 16px;
|
|
23
|
+
height: 16px;
|
|
24
|
+
transition: background-color var(--duration-fast) var(--easing-standard),
|
|
25
|
+
border-color var(--duration-fast) var(--easing-standard),
|
|
26
|
+
box-shadow var(--duration-fast) var(--easing-standard);
|
|
27
|
+
outline: none;
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
align-items: center;
|
|
31
|
+
margin: 0;
|
|
32
|
+
padding: 0;
|
|
33
|
+
display: flex;
|
|
34
|
+
position: relative;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.radio_hqwDuG:focus-visible {
|
|
38
|
+
box-shadow: var(--shadow-focus);
|
|
39
|
+
border-color: var(--color-accent);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.radio_hqwDuG:hover:not([data-disabled]) {
|
|
43
|
+
border-color: var(--color-accent);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.radio_hqwDuG[data-checked] {
|
|
47
|
+
background-color: var(--color-accent);
|
|
48
|
+
border-color: var(--color-accent);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.radio_hqwDuG[data-checked]:hover:not([data-disabled]) {
|
|
52
|
+
background-color: var(--color-accent-hover);
|
|
53
|
+
border-color: var(--color-accent-hover);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.radio_hqwDuG[data-disabled] {
|
|
57
|
+
opacity: .44;
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.indicator_hqwDuG {
|
|
63
|
+
border-radius: var(--radius-full);
|
|
64
|
+
background-color: var(--color-on-accent);
|
|
65
|
+
width: 6px;
|
|
66
|
+
height: 6px;
|
|
67
|
+
transition: transform var(--duration-fast) var(--easing-spring),
|
|
68
|
+
opacity var(--duration-fast) var(--easing-standard);
|
|
69
|
+
opacity: 0;
|
|
70
|
+
transform: scale(0);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.radio_hqwDuG[data-checked] .indicator_hqwDuG {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
transform: scale(1);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.label_hqwDuG {
|
|
79
|
+
font-family: var(--font-mono);
|
|
80
|
+
font-size: var(--font-size-sm);
|
|
81
|
+
color: var(--color-primary);
|
|
82
|
+
line-height: var(--line-height-normal);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
import styles from "./radio.module.css";
|
|
4
|
+
|
|
5
|
+
//#region src/radio/radio.d.ts
|
|
6
|
+
interface RadioProps {
|
|
7
|
+
/** Value submitted with the form and matched against the group's value. */
|
|
8
|
+
value: string;
|
|
9
|
+
/** Label rendered next to the button. */
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
readOnly?: boolean;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
/** Override the auto-generated element id. */
|
|
15
|
+
id?: string;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* A single radio button with an optional label.
|
|
20
|
+
* Must be placed inside `<RadioGroup>` or a raw base-ui RadioGroup.
|
|
21
|
+
*/
|
|
22
|
+
declare function Radio({
|
|
23
|
+
value,
|
|
24
|
+
children,
|
|
25
|
+
id,
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
}: RadioProps): react_jsx_runtime0.JSX.Element;
|
|
29
|
+
//#endregion
|
|
30
|
+
export { Radio, RadioProps, styles };
|
|
31
|
+
//# sourceMappingURL=radio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.d.ts","names":[],"sources":["../../src/radio/radio.tsx"],"mappings":";;;;;UAKiB,UAAA;;EAEf,KAAA;EAFe;EAIf,QAAA,GAAW,SAAA;EACX,QAAA;EACA,QAAA;EACA,QAAA;EAHA;EAKA,EAAA;EACA,SAAA;AAAA;;;;;iBAOc,KAAA,CAAA;EAAQ,KAAA;EAAO,QAAA;EAAU,EAAA;EAAI,SAAA;EAAA,GAAc;AAAA,GAAS,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import radio_module_default from "./radio.module.js";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useId } from "react";
|
|
4
|
+
import { Radio } from "@base-ui/react/radio";
|
|
5
|
+
//#region src/radio/radio.tsx
|
|
6
|
+
/**
|
|
7
|
+
* A single radio button with an optional label.
|
|
8
|
+
* Must be placed inside `<RadioGroup>` or a raw base-ui RadioGroup.
|
|
9
|
+
*/
|
|
10
|
+
function Radio$1({ value, children, id, className, ...props }) {
|
|
11
|
+
const radioId = id ?? useId();
|
|
12
|
+
return /* @__PURE__ */ jsxs("label", {
|
|
13
|
+
className: `${radio_module_default.item} ${className ?? ""}`,
|
|
14
|
+
htmlFor: radioId,
|
|
15
|
+
children: [/* @__PURE__ */ jsx(Radio.Root, {
|
|
16
|
+
id: radioId,
|
|
17
|
+
value,
|
|
18
|
+
className: radio_module_default.radio,
|
|
19
|
+
...props,
|
|
20
|
+
children: /* @__PURE__ */ jsx(Radio.Indicator, {
|
|
21
|
+
keepMounted: true,
|
|
22
|
+
className: radio_module_default.indicator
|
|
23
|
+
})
|
|
24
|
+
}), children && /* @__PURE__ */ jsx("span", {
|
|
25
|
+
className: radio_module_default.label,
|
|
26
|
+
children
|
|
27
|
+
})]
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
//#endregion
|
|
31
|
+
export { Radio$1 as Radio };
|
|
32
|
+
|
|
33
|
+
//# sourceMappingURL=radio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.js","names":["Radio","styles","BaseRadio"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport styles from \"./radio.module.css\";\n\nexport interface RadioProps {\n /** Value submitted with the form and matched against the group's value. */\n value: string;\n /** Label rendered next to the button. */\n children?: ReactNode;\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n /** Override the auto-generated element id. */\n id?: string;\n className?: string;\n}\n\n/**\n * A single radio button with an optional label.\n * Must be placed inside `<RadioGroup>` or a raw base-ui RadioGroup.\n */\nexport function Radio({ value, children, id, className, ...props }: RadioProps) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const radioId = id ?? useId();\n\n return (\n <label className={`${styles.item} ${className ?? \"\"}`} htmlFor={radioId}>\n <BaseRadio.Root id={radioId} value={value} className={styles.radio} {...props}>\n <BaseRadio.Indicator keepMounted className={styles.indicator} />\n </BaseRadio.Root>\n {children && <span className={styles.label}>{children}</span>}\n </label>\n );\n}\n\nexport { styles as RadioStyles };\n"],"mappings":";;;;;;;;;AAsBA,SAAgBA,QAAM,EAAE,OAAO,UAAU,IAAI,WAAW,GAAG,SAAqB;CAE9E,MAAM,UAAU,MAAM,OAAO;AAE7B,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,qBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,MAAU,MAAX;GAAgB,IAAI;GAAgB;GAAO,WAAWD,qBAAO;GAAO,GAAI;aACtE,oBAACC,MAAU,WAAX;IAAqB,aAAA;IAAY,WAAWD,qBAAO;IAAa,CAAA;GACjD,CAAA,EAChB,YAAY,oBAAC,QAAD;GAAM,WAAWA,qBAAO;GAAQ;GAAgB,CAAA,CACvD"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//#region src/radio/radio.module.css
|
|
2
|
+
var radio_module_default = {
|
|
3
|
+
"indicator": "indicator_hqwDuG",
|
|
4
|
+
"item": "item_hqwDuG",
|
|
5
|
+
"label": "label_hqwDuG",
|
|
6
|
+
"radio": "radio_hqwDuG"
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { radio_module_default as default };
|
|
10
|
+
|
|
11
|
+
//# sourceMappingURL=radio.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.module.js","names":[],"sources":["../../src/radio/radio.module.css"],"sourcesContent":["@layer components {\n /* ── Single radio item layout ───────────────────────────────────── */\n\n .item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n user-select: none;\n }\n\n .item:has([data-disabled]) {\n cursor: not-allowed;\n }\n\n .item:has([data-disabled]) .label {\n opacity: 0.44;\n }\n\n /* ── Radio button (the circle) ──────────────────────────────────── */\n\n .radio {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n border-radius: var(--radius-full);\n border: var(--border-width-base) solid var(--color-line-strong);\n background-color: var(--color-surface-1);\n display: flex;\n align-items: center;\n justify-content: center;\n transition:\n background-color var(--duration-fast) var(--easing-standard),\n border-color var(--duration-fast) var(--easing-standard),\n box-shadow var(--duration-fast) var(--easing-standard);\n outline: none;\n position: relative;\n /* Reset button/span defaults */\n padding: 0;\n margin: 0;\n }\n\n .radio:focus-visible {\n box-shadow: var(--shadow-focus);\n border-color: var(--color-accent);\n }\n\n .radio:hover:not([data-disabled]) {\n border-color: var(--color-accent);\n }\n\n .radio[data-checked] {\n background-color: var(--color-accent);\n border-color: var(--color-accent);\n }\n\n .radio[data-checked]:hover:not([data-disabled]) {\n background-color: var(--color-accent-hover);\n border-color: var(--color-accent-hover);\n }\n\n .radio[data-disabled] {\n opacity: 0.44;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ── Indicator (inner dot) ──────────────────────────────────────── */\n\n .indicator {\n width: 6px;\n height: 6px;\n border-radius: var(--radius-full);\n background-color: var(--color-on-accent);\n transform: scale(0);\n transition:\n transform var(--duration-fast) var(--easing-spring),\n opacity var(--duration-fast) var(--easing-standard);\n opacity: 0;\n }\n\n /* data-checked is on the Root; the Indicator inherits it */\n .radio[data-checked] .indicator {\n transform: scale(1);\n opacity: 1;\n }\n\n /* ── Label text ─────────────────────────────────────────────────── */\n\n .label {\n font-family: var(--font-mono);\n font-size: var(--font-size-sm);\n color: var(--color-primary);\n line-height: var(--line-height-normal);\n }\n}\n"],"mappings":";AAQA,IAAA,uBAAe;CAAC,aAAK;CAAA,QAAA;CAAA,SAAA;CAAA,SAAA;CAAA"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { RadioGroup, RadioGroupProps, RadioOption, styles } from "./radio-group.js";
|
|
2
|
+
import { RadioGroupRoot, RadioGroupRootProps } from "./parts.js";
|
|
3
|
+
export { RadioGroup, type RadioGroupProps, RadioGroupRoot, type RadioGroupRootProps, styles as RadioGroupStyles, type RadioOption };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as react from "react";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
4
|
+
|
|
5
|
+
//#region src/radio-group/parts.d.ts
|
|
6
|
+
type BaseGroupProps = ComponentPropsWithoutRef<typeof RadioGroup>;
|
|
7
|
+
interface RadioGroupRootProps extends BaseGroupProps {}
|
|
8
|
+
declare const RadioGroupRoot: react.ForwardRefExoticComponent<RadioGroupRootProps & react.RefAttributes<HTMLDivElement>>;
|
|
9
|
+
//#endregion
|
|
10
|
+
export { RadioGroupRoot, RadioGroupRootProps };
|
|
11
|
+
//# sourceMappingURL=parts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/radio-group/parts.tsx"],"mappings":";;;;;KAqBK,cAAA,GAAiB,wBAAA,QAAgC,UAAA;AAAA,UAErC,mBAAA,SAA4B,cAAA;AAAA,cAEhC,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { cx, resolveClassName } from "../utils/resolveClassName.js";
|
|
2
|
+
import radio_group_module_default from "./radio-group.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
6
|
+
//#region src/radio-group/parts.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Styled primitive for RadioGroup.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* import { Radio } from '@brijbyte/agentic-ui/radio';
|
|
13
|
+
* import { RadioGroupRoot } from '@brijbyte/agentic-ui/radio-group';
|
|
14
|
+
*
|
|
15
|
+
* <RadioGroupRoot defaultValue="b" name="plan">
|
|
16
|
+
* <Radio value="a">Hobby</Radio>
|
|
17
|
+
* <Radio value="b">Pro</Radio>
|
|
18
|
+
* <Radio value="c">Enterprise</Radio>
|
|
19
|
+
* </RadioGroupRoot>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
const RadioGroupRoot = forwardRef(function RadioGroupRoot({ className, ...props }, ref) {
|
|
23
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
24
|
+
ref,
|
|
25
|
+
className: (state) => cx(radio_group_module_default.group, resolveClassName(className, state)),
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
//#endregion
|
|
30
|
+
export { RadioGroupRoot };
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=parts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parts.js","names":["BaseRadioGroup","styles"],"sources":["../../src/radio-group/parts.tsx"],"sourcesContent":["/**\n * Styled primitive for RadioGroup.\n *\n * @example\n * ```tsx\n * import { Radio } from '@brijbyte/agentic-ui/radio';\n * import { RadioGroupRoot } from '@brijbyte/agentic-ui/radio-group';\n *\n * <RadioGroupRoot defaultValue=\"b\" name=\"plan\">\n * <Radio value=\"a\">Hobby</Radio>\n * <Radio value=\"b\">Pro</Radio>\n * <Radio value=\"c\">Enterprise</Radio>\n * </RadioGroupRoot>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport styles from \"./radio-group.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseGroupProps = ComponentPropsWithoutRef<typeof BaseRadioGroup>;\n\nexport interface RadioGroupRootProps extends BaseGroupProps {}\n\nexport const RadioGroupRoot = forwardRef<ComponentRef<typeof BaseRadioGroup>, RadioGroupRootProps>(function RadioGroupRoot(\n { className, ...props },\n ref,\n) {\n return <BaseRadioGroup ref={ref} className={(state) => cx(styles.group, resolveClassName(className, state))} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,iBAAiB,WAAqE,SAAS,eAC1G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,YAAD;EAAqB;EAAK,YAAY,UAAU,GAAGC,2BAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC1H"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.group_Ps7OCW {
|
|
3
|
+
gap: var(--space-2);
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
display: flex;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.group-label_Ps7OCW {
|
|
9
|
+
font-family: var(--font-mono);
|
|
10
|
+
font-size: var(--font-size-xs);
|
|
11
|
+
font-weight: var(--font-weight-semibold);
|
|
12
|
+
color: var(--color-tertiary);
|
|
13
|
+
text-transform: uppercase;
|
|
14
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
15
|
+
margin-bottom: var(--space-1);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
import styles from "./radio-group.module.css";
|
|
4
|
+
|
|
5
|
+
//#region src/radio-group/radio-group.d.ts
|
|
6
|
+
interface RadioOption {
|
|
7
|
+
value: string;
|
|
8
|
+
label: ReactNode;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface RadioGroupProps {
|
|
12
|
+
/** The options to render. Each becomes one `<Radio>` item. */
|
|
13
|
+
options: RadioOption[];
|
|
14
|
+
/** Accessible group label rendered above the options. */
|
|
15
|
+
label?: ReactNode;
|
|
16
|
+
/** Controlled selected value. */
|
|
17
|
+
value?: string;
|
|
18
|
+
/** Initial selected value (uncontrolled). */
|
|
19
|
+
defaultValue?: string;
|
|
20
|
+
onValueChange?: (value: string, eventDetails: unknown) => void;
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
readOnly?: boolean;
|
|
23
|
+
required?: boolean;
|
|
24
|
+
/** HTML name for form submission. */
|
|
25
|
+
name?: string;
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
declare function RadioGroup({
|
|
29
|
+
options,
|
|
30
|
+
label,
|
|
31
|
+
className,
|
|
32
|
+
onValueChange,
|
|
33
|
+
...props
|
|
34
|
+
}: RadioGroupProps): react_jsx_runtime0.JSX.Element;
|
|
35
|
+
//#endregion
|
|
36
|
+
export { RadioGroup, RadioGroupProps, RadioOption, styles };
|
|
37
|
+
//# sourceMappingURL=radio-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","names":[],"sources":["../../src/radio-group/radio-group.tsx"],"mappings":";;;;;UAMiB,WAAA;EACf,KAAA;EACA,KAAA,EAAO,SAAA;EACP,QAAA;AAAA;AAAA,UAGe,eAAA;EAJC;EAMhB,OAAA,EAAS,WAAA;EANT;EAQA,KAAA,GAAQ,SAAA;EAPR;EASA,KAAA;EATQ;EAWR,YAAA;EACA,aAAA,IAAiB,KAAA,UAAe,YAAA;EAChC,QAAA;EACA,QAAA;EACA,QAAA;EAVS;EAYT,IAAA;EACA,SAAA;AAAA;AAAA,iBAYc,UAAA,CAAA;EAAa,OAAA;EAAS,KAAA;EAAO,SAAA;EAAW,aAAA;EAAA,GAAkB;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Radio } from "../radio/radio.js";
|
|
2
|
+
import radio_group_module_default from "./radio-group.module.js";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { useId } from "react";
|
|
5
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
6
|
+
//#region src/radio-group/radio-group.tsx
|
|
7
|
+
function RadioGroup$1({ options, label, className, onValueChange, ...props }) {
|
|
8
|
+
const labelId = useId();
|
|
9
|
+
return /* @__PURE__ */ jsxs(RadioGroup, {
|
|
10
|
+
"aria-labelledby": label ? labelId : void 0,
|
|
11
|
+
className: `${radio_group_module_default.group} ${className ?? ""}`,
|
|
12
|
+
onValueChange,
|
|
13
|
+
...props,
|
|
14
|
+
children: [label && /* @__PURE__ */ jsx("div", {
|
|
15
|
+
id: labelId,
|
|
16
|
+
className: radio_group_module_default["group-label"],
|
|
17
|
+
children: label
|
|
18
|
+
}), options.map((opt) => /* @__PURE__ */ jsx(Radio, {
|
|
19
|
+
value: opt.value,
|
|
20
|
+
...opt.disabled !== void 0 && { disabled: opt.disabled },
|
|
21
|
+
children: opt.label
|
|
22
|
+
}, opt.value))]
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
//#endregion
|
|
26
|
+
export { RadioGroup$1 as RadioGroup };
|
|
27
|
+
|
|
28
|
+
//# sourceMappingURL=radio-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.js","names":["RadioGroup","BaseRadioGroup","styles"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"../radio/radio\";\nimport styles from \"./radio-group.module.css\";\n\nexport interface RadioOption {\n value: string;\n label: ReactNode;\n disabled?: boolean;\n}\n\nexport interface RadioGroupProps {\n /** The options to render. Each becomes one `<Radio>` item. */\n options: RadioOption[];\n /** Accessible group label rendered above the options. */\n label?: ReactNode;\n /** Controlled selected value. */\n value?: string;\n /** Initial selected value (uncontrolled). */\n defaultValue?: string;\n onValueChange?: (value: string, eventDetails: unknown) => void;\n disabled?: boolean;\n readOnly?: boolean;\n required?: boolean;\n /** HTML name for form submission. */\n name?: string;\n className?: string;\n}\n\n/**\n * A labelled group of radio buttons. Renders a base-ui RadioGroup with one\n * `<Radio>` per option.\n *\n * For full control over layout or behaviour use `RadioGroupRoot` with\n * individual `<Radio>` or `<RadioRoot>` elements.\n */\nexport { styles as RadioGroupStyles };\n\nexport function RadioGroup({ options, label, className, onValueChange, ...props }: RadioGroupProps) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const labelId = useId();\n\n return (\n <BaseRadioGroup\n aria-labelledby={label ? labelId : undefined}\n className={`${styles.group} ${className ?? \"\"}`}\n onValueChange={onValueChange as never}\n {...props}\n >\n {label && (\n <div id={labelId} className={styles[\"group-label\"]}>\n {label}\n </div>\n )}\n {options.map((opt) => (\n <Radio key={opt.value} value={opt.value} {...(opt.disabled !== undefined && { disabled: opt.disabled })}>\n {opt.label}\n </Radio>\n ))}\n </BaseRadioGroup>\n );\n}\n"],"mappings":";;;;;;AAuCA,SAAgBA,aAAW,EAAE,SAAS,OAAO,WAAW,eAAe,GAAG,SAA0B;CAElG,MAAM,UAAU,OAAO;AAEvB,QACE,qBAACC,YAAD;EACE,mBAAiB,QAAQ,UAAU,KAAA;EACnC,WAAW,GAAGC,2BAAO,MAAM,GAAG,aAAa;EAC5B;EACf,GAAI;YAJN,CAMG,SACC,oBAAC,OAAD;GAAK,IAAI;GAAS,WAAWA,2BAAO;aACjC;GACG,CAAA,EAEP,QAAQ,KAAK,QACZ,oBAAC,OAAD;GAAuB,OAAO,IAAI;GAAO,GAAK,IAAI,aAAa,KAAA,KAAa,EAAE,UAAU,IAAI,UAAU;aACnG,IAAI;GACC,EAFI,IAAI,MAER,CACR,CACa"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
//#region src/radio-group/radio-group.module.css
|
|
2
|
+
var radio_group_module_default = {
|
|
3
|
+
"group": "group_Ps7OCW",
|
|
4
|
+
"group-label": "group-label_Ps7OCW"
|
|
5
|
+
};
|
|
6
|
+
//#endregion
|
|
7
|
+
export { radio_group_module_default as default };
|
|
8
|
+
|
|
9
|
+
//# sourceMappingURL=radio-group.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-group.module.js","names":[],"sources":["../../src/radio-group/radio-group.module.css"],"sourcesContent":["@layer components {\n .group {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n }\n\n .group-label {\n font-family: var(--font-mono);\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-semibold);\n color: var(--color-tertiary);\n text-transform: uppercase;\n letter-spacing: var(--letter-spacing-wide);\n margin-bottom: var(--space-1);\n }\n}\n"],"mappings":";AAIA,IAAA,6BAAe;CAAA,SAAQ;CAAA,eAAA;CAAA"}
|