@brijbyte/agentic-ui 0.0.4 → 0.0.5

package/README.md

@@ -2,6 +2,8 @@
 
 A developer-focused React component library with an aesthetic loosely inspired by native desktop and mobile UI. Built on top of [`@base-ui/react`](https://base-ui.com) for accessible behaviour, styled with CSS modules under `@layer` rules so every component style is overridable downstream.
 
+**Documentation:** [agentic-ui.brijbyte.com](https://agentic-ui.brijbyte.com)
+
 ---
 
 ## Design philosophy
@@ -224,29 +226,35 @@ CSS bundles
 
 Per-component JS  (also exports <Name>Styles class-name map)
 @brijbyte/agentic-ui/accordion       @brijbyte/agentic-ui/menu
-@brijbyte/agentic-ui/alert-dialog    @brijbyte/agentic-ui/number-field
-@brijbyte/agentic-ui/badge           @brijbyte/agentic-ui/progress
-@brijbyte/agentic-ui/button          @brijbyte/agentic-ui/select
-@brijbyte/agentic-ui/card            @brijbyte/agentic-ui/separator
-@brijbyte/agentic-ui/checkbox        @brijbyte/agentic-ui/slider
-@brijbyte/agentic-ui/collapsible     @brijbyte/agentic-ui/switch
-@brijbyte/agentic-ui/context-menu    @brijbyte/agentic-ui/tabs
-@brijbyte/agentic-ui/dialog          @brijbyte/agentic-ui/toast
-@brijbyte/agentic-ui/drawer          @brijbyte/agentic-ui/tooltip
-@brijbyte/agentic-ui/input           @brijbyte/agentic-ui/popover
+@brijbyte/agentic-ui/alert-dialog    @brijbyte/agentic-ui/meter
+@brijbyte/agentic-ui/badge           @brijbyte/agentic-ui/number-field
+@brijbyte/agentic-ui/button          @brijbyte/agentic-ui/popover
+@brijbyte/agentic-ui/card            @brijbyte/agentic-ui/progress
+@brijbyte/agentic-ui/checkbox        @brijbyte/agentic-ui/radio
+@brijbyte/agentic-ui/collapsible     @brijbyte/agentic-ui/radio-group
+@brijbyte/agentic-ui/context-menu    @brijbyte/agentic-ui/select
+@brijbyte/agentic-ui/dialog          @brijbyte/agentic-ui/separator
+@brijbyte/agentic-ui/drawer          @brijbyte/agentic-ui/slider
+@brijbyte/agentic-ui/input           @brijbyte/agentic-ui/switch
+@brijbyte/agentic-ui/menu            @brijbyte/agentic-ui/tabs
+                                     @brijbyte/agentic-ui/toast
+                                     @brijbyte/agentic-ui/tooltip
 
 Per-component CSS  (/<name>.css mirrors each JS subpath)
 @brijbyte/agentic-ui/accordion.css    @brijbyte/agentic-ui/menu.css
-@brijbyte/agentic-ui/alert-dialog.css @brijbyte/agentic-ui/number-field.css
-@brijbyte/agentic-ui/badge.css        @brijbyte/agentic-ui/progress.css
-@brijbyte/agentic-ui/button.css       @brijbyte/agentic-ui/select.css
-@brijbyte/agentic-ui/card.css         @brijbyte/agentic-ui/separator.css
-@brijbyte/agentic-ui/checkbox.css     @brijbyte/agentic-ui/slider.css
-@brijbyte/agentic-ui/collapsible.css  @brijbyte/agentic-ui/switch.css
-@brijbyte/agentic-ui/context-menu.css @brijbyte/agentic-ui/tabs.css
-@brijbyte/agentic-ui/dialog.css       @brijbyte/agentic-ui/toast.css
-@brijbyte/agentic-ui/drawer.css       @brijbyte/agentic-ui/tooltip.css
-@brijbyte/agentic-ui/input.css        @brijbyte/agentic-ui/popover.css
+@brijbyte/agentic-ui/alert-dialog.css @brijbyte/agentic-ui/meter.css
+@brijbyte/agentic-ui/badge.css        @brijbyte/agentic-ui/number-field.css
+@brijbyte/agentic-ui/button.css       @brijbyte/agentic-ui/popover.css
+@brijbyte/agentic-ui/card.css         @brijbyte/agentic-ui/progress.css
+@brijbyte/agentic-ui/checkbox.css     @brijbyte/agentic-ui/radio.css
+@brijbyte/agentic-ui/collapsible.css  @brijbyte/agentic-ui/radio-group.css
+@brijbyte/agentic-ui/context-menu.css @brijbyte/agentic-ui/select.css
+@brijbyte/agentic-ui/dialog.css       @brijbyte/agentic-ui/separator.css
+@brijbyte/agentic-ui/drawer.css       @brijbyte/agentic-ui/slider.css
+@brijbyte/agentic-ui/input.css        @brijbyte/agentic-ui/switch.css
+@brijbyte/agentic-ui/menu.css         @brijbyte/agentic-ui/tabs.css
+                                      @brijbyte/agentic-ui/toast.css
+                                      @brijbyte/agentic-ui/tooltip.css
 ```
 
 ---
@@ -283,8 +291,11 @@ import { Button, Dialog, Input } from "@brijbyte/agentic-ui";
 | `/input`        | `Input`                                             | —                                                                                                                                                                                                     |
 | `/menu`         | `Menu`                                              | `MenuPositioner`, `MenuPopup`, `MenuItem`, `MenuSeparator`, `MenuGroupLabel`, `MenuArrow`, `MenuItemShortcut`                                                                                         |
 | `/number-field` | `NumberField`                                       | `NumberFieldGroup`, `NumberFieldInput`, `NumberFieldDecrement`, `NumberFieldIncrement`, `NumberFieldScrubArea`, `NumberFieldScrubAreaCursor`                                                          |
+| `/meter`        | `Meter`, `CircularMeter`                            | `MeterTrack`, `MeterIndicator`, `MeterLabel`, `MeterValue`                                                                                                                                            |
 | `/popover`      | `Popover`                                           | `PopoverPositioner`, `PopoverPopup`, `PopoverTitle`, `PopoverDescription`, `PopoverClose`, `PopoverArrow`, `PopoverViewport`                                                                          |
 | `/progress`     | `Progress`                                          | `ProgressTrack`, `ProgressIndicator`                                                                                                                                                                  |
+| `/radio`        | `Radio`                                             | `RadioRoot`, `RadioIndicator`                                                                                                                                                                         |
+| `/radio-group`  | `RadioGroup`                                        | `RadioGroupRoot`                                                                                                                                                                                      |
 | `/select`       | `Select`                                            | `SelectTrigger`, `SelectValue`, `SelectPositioner`, `SelectPopup`, `SelectList`, `SelectItem`, `SelectItemText`, `SelectItemIndicator`, `SelectGroupContainer`, `SelectGroupLabel`, `SelectSeparator` |
 | `/separator`    | `Separator`                                         | —                                                                                                                                                                                                     |
 | `/slider`       | `Slider`                                            | `SliderControl`, `SliderTrack`, `SliderIndicator`, `SliderThumb`, `SliderLabel`, `SliderValue`                                                                                                        |
@@ -437,6 +448,27 @@ import { Badge } from "@brijbyte/agentic-ui/badge";
 
 `dot` shows a small coloured dot before the label text.
 
+### Card
+
+```tsx
+import { Card, CardHeader, CardBody, CardFooter } from "@brijbyte/agentic-ui/card";
+
+<Card>
+  <CardHeader heading="API Key" description="Used for authentication" />
+  <CardBody>sk-1234…</CardBody>
+  <CardFooter>
+    <Button variant="ghost" size="sm">Revoke</Button>
+    <Button size="sm">Copy</Button>
+  </CardFooter>
+</Card>
+
+<Card elevated interactive onClick={() => {}}>
+  <CardBody>Clickable elevated card</CardBody>
+</Card>
+```
+
+**`elevated`** adds a raised shadow for layered surfaces. **`interactive`** adds hover/active states for clickable cards. `CardHeader` accepts `heading` and `description` props. All sub-components are plain `<div>` wrappers — no base-ui dependency.
+
 ### Input
 
 ```tsx
@@ -719,6 +751,83 @@ const items: MenuEntry[] = [
 
 Supports `type: "group"` entries with an optional `label` for grouped sections. The popup uses backdrop blur and highlights use inset rounded corners — matching native context menu aesthetics.
 
+### Meter
+
+```tsx
+import { Meter, CircularMeter } from "@brijbyte/agentic-ui/meter";
+
+// Linear — size: sm | md (default) | lg
+<Meter value={68} label="Memory" showValue />
+
+// With thresholds — optimum: "high" (default) | "low" | "mid"
+// optimum="high" → high=green, mid=amber, low=red  (battery, signal strength)
+// optimum="low"  → low=green, mid=amber, high=red  (CPU load, disk usage)
+// optimum="mid"  → mid=green, extremes=amber        (temperature)
+<Meter value={82} low={20} high={60} optimum="high" label="Battery" showValue showTicks />
+
+// Intl formatting
+<Meter value={0.72} min={0} max={1} format={{ style: "percent" }} label="Disk" showValue />
+
+// Circular gauge
+<CircularMeter value={68} label="CPU" showValue />
+<CircularMeter value={12} low={20} high={60} optimum="high" label="Battery" showValue size="lg" />
+```
+
+**`low`** / **`high`** / **`optimum`** implement the HTML `<meter>` spec colouring algorithm — the fill turns green, amber, or red based on which zone the value is in and which zone is declared optimal.
+
+**`showTicks`** renders 1px dividers inside the track at the `low` and `high` threshold positions (linear only).
+
+**`format`** is passed directly to `Intl.NumberFormat` via base-ui — use it for `percent`, `currency`, or any locale-aware format.
+
+`CircularMeter` accepts the same props as `Meter` (except `showTicks`) and renders an SVG ring gauge. Import from the same path: `@brijbyte/agentic-ui/meter`.
+
+### Radio + RadioGroup
+
+```tsx
+import { Radio, RadioRoot, RadioIndicator } from "@brijbyte/agentic-ui/radio";
+import { RadioGroup, RadioGroupRoot } from "@brijbyte/agentic-ui/radio-group";
+
+// High-level group with options array
+<RadioGroup
+  label="Deployment target"
+  defaultValue="production"
+  options={[
+    { value: "production", label: "Production" },
+    { value: "staging",    label: "Staging" },
+    { value: "local",      label: "Local", disabled: true },
+  ]}
+/>
+
+// Controlled
+<RadioGroup
+  value={target}
+  onValueChange={(v) => setTarget(v)}
+  options={options}
+/>
+
+// Composed — RadioGroupRoot + individual Radio items
+<RadioGroupRoot defaultValue="pro" name="plan">
+  <Radio value="hobby">Hobby</Radio>
+  <Radio value="pro">Pro</Radio>
+  <Radio value="enterprise">Enterprise</Radio>
+</RadioGroupRoot>
+
+// Fully composed — raw base-ui RadioGroup + styled parts
+<RadioGroup defaultValue="ssd" aria-label="Storage">
+  <label>
+    <RadioRoot value="ssd"><RadioIndicator /></RadioRoot>
+    SSD
+  </label>
+</RadioGroup>
+```
+
+`Radio` and `RadioGroup` follow the same import split as base-ui — `Radio` is the single item, `RadioGroup` is the group context. Both CSS files must be imported when using both:
+
+```tsx
+import "@brijbyte/agentic-ui/radio.css"; // item styles
+import "@brijbyte/agentic-ui/radio-group.css"; // group layout styles
+```
+
 ### NumberField
 
 ```tsx
@@ -739,6 +848,27 @@ import { Separator } from "@brijbyte/agentic-ui/separator";
 <Separator orientation="vertical" style={{ height: "1rem" }} />
 ```
 
+### Slider
+
+```tsx
+import { Slider } from "@brijbyte/agentic-ui/slider";
+
+// Single thumb with label and value display
+<Slider label="Volume" defaultValue={50} showValue />
+
+// Range slider — pass an array for two thumbs
+<Slider label="Price range" defaultValue={[20, 80]} showValue />
+
+// Steps with Intl formatting
+<Slider label="Opacity" defaultValue={100} min={0} max={100} step={10}
+  format={{ style: "percent", maximumFractionDigits: 0 }} showValue />
+
+// Disabled
+<Slider label="Locked" defaultValue={42} disabled />
+```
+
+**`defaultValue`** accepts a single number or an array of two numbers for a range slider. **`step`** controls the increment; **`largeStep`** (default 10) is used for Page Up/Down. **`format`** passes `Intl.NumberFormatOptions` to the value display. **`onValueChange`** fires on every drag; **`onValueCommitted`** fires once when the user releases.
+
 ### Progress
 
 ```tsx
@@ -880,7 +1010,7 @@ dist/
   button/index.js          ← Per-component ESM (no CSS imports)
   button/index.d.ts
   button/button.css        ← Per-component plain CSS
-  …                        ← All 20 components follow the same pattern
+  …                        ← All 23 components follow the same pattern
 ```
 
 ### Why no CSS in JS?

package/dist/accordion/index.d.ts

@@ -1,3 +1,3 @@
 import { Accordion, AccordionItem, AccordionProps, styles } from "./accordion.js";
-import { AccordionHeader, AccordionHeaderProps, AccordionItem as AccordionItem$1, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionTrigger, AccordionTriggerProps } from "./parts.js";
-export { Accordion, AccordionHeader, type AccordionHeaderProps, type AccordionItem, AccordionItem$1 as AccordionItemPart, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, styles as AccordionStyles, AccordionTrigger, type AccordionTriggerProps };
+import { AccordionHeader, AccordionHeaderProps, AccordionItemPart, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionTrigger, AccordionTriggerProps } from "./parts.js";
+export { Accordion, AccordionHeader, type AccordionHeaderProps, type AccordionItem, AccordionItemPart, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, styles as AccordionStyles, AccordionTrigger, type AccordionTriggerProps };

package/dist/accordion/index.js

@@ -1,4 +1,4 @@
 import accordion_module_default from "./accordion.module.js";
 import { Accordion } from "./accordion.js";
-import { AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "./parts.js";
-export { Accordion, AccordionHeader, AccordionItem as AccordionItemPart, AccordionPanel, accordion_module_default as AccordionStyles, AccordionTrigger };
+import { AccordionHeader, AccordionItemPart, AccordionPanel, AccordionTrigger } from "./parts.js";
+export { Accordion, AccordionHeader, AccordionItemPart, AccordionPanel, accordion_module_default as AccordionStyles, AccordionTrigger };

package/dist/accordion/parts.d.ts

@@ -7,22 +7,14 @@ type BaseItemProps = ComponentPropsWithoutRef<typeof Accordion.Item>;
 type BaseHeaderProps = ComponentPropsWithoutRef<typeof Accordion.Header>;
 type BaseTriggerProps = ComponentPropsWithoutRef<typeof Accordion.Trigger>;
 type BasePanelProps = ComponentPropsWithoutRef<typeof Accordion.Panel>;
-interface AccordionItemProps extends Omit<BaseItemProps, "className"> {
-  className?: string;
-}
-interface AccordionHeaderProps extends Omit<BaseHeaderProps, "className"> {
-  className?: string;
-}
-interface AccordionTriggerProps extends Omit<BaseTriggerProps, "className"> {
-  className?: string;
-}
-interface AccordionPanelProps extends Omit<BasePanelProps, "className"> {
-  className?: string;
-}
-declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends BaseItemProps {}
+interface AccordionHeaderProps extends BaseHeaderProps {}
+interface AccordionTriggerProps extends BaseTriggerProps {}
+interface AccordionPanelProps extends BasePanelProps {}
+declare const AccordionItemPart: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
 declare const AccordionHeader: react.ForwardRefExoticComponent<AccordionHeaderProps & react.RefAttributes<HTMLHeadingElement>>;
 declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLElement>>;
 declare const AccordionPanel: react.ForwardRefExoticComponent<AccordionPanelProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionTrigger, AccordionTriggerProps };
+export { AccordionHeader, AccordionHeaderProps, AccordionItemPart, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionTrigger, AccordionTriggerProps };
 //# sourceMappingURL=parts.d.ts.map

package/dist/accordion/parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/accordion/parts.tsx"],"mappings":";;;;;KAuBK,aAAA,GAAgB,wBAAA,QAAgC,SAAA,CAAc,IAAA;AAAA,KAC9D,eAAA,GAAkB,wBAAA,QAAgC,SAAA,CAAc,MAAA;AAAA,KAChE,gBAAA,GAAmB,wBAAA,QAAgC,SAAA,CAAc,OAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,SAAA,CAAc,KAAA;AAAA,UAEnD,kBAAA,SAA2B,IAAA,CAAK,aAAA;EAC/C,SAAA;AAAA;AAAA,UAEe,oBAAA,SAA6B,IAAA,CAAK,eAAA;EACjD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,gBAAA;EAClD,SAAA;AAAA;AAAA,UAEe,mBAAA,SAA4B,IAAA,CAAK,cAAA;EAChD,SAAA;AAAA;AAAA,cAGW,aAAA,EAAa,KAAA,CAAA,yBAAA,CAAA,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOb,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOf,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOhB,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/accordion/parts.tsx"],"mappings":";;;;;KAwBK,aAAA,GAAgB,wBAAA,QAAgC,SAAA,CAAc,IAAA;AAAA,KAC9D,eAAA,GAAkB,wBAAA,QAAgC,SAAA,CAAc,MAAA;AAAA,KAChE,gBAAA,GAAmB,wBAAA,QAAgC,SAAA,CAAc,OAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,SAAA,CAAc,KAAA;AAAA,UAEnD,kBAAA,SAA2B,aAAA;AAAA,UAC3B,oBAAA,SAA6B,eAAA;AAAA,UAC7B,qBAAA,SAA8B,gBAAA;AAAA,UAC9B,mBAAA,SAA4B,cAAA;AAAA,cAEhC,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOjB,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOf,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOhB,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,mBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/accordion/parts.js

@@ -1,4 +1,5 @@
 import accordion_module_default from "./accordion.module.js";
+import { cx, resolveClassName } from "../utils/resolveClassName.js";
 import { Accordion } from "@base-ui/react/accordion";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -21,35 +22,35 @@ import { forwardRef } from "react";
 * </Accordion.Root>
 * ```
 */
-const AccordionItem = forwardRef(function AccordionItem({ className, ...props }, ref) {
+const AccordionItemPart = forwardRef(function AccordionItemPart({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Accordion.Item, {
 		ref,
-		className: `${accordion_module_default.item} ${className ?? ""}`,
+		className: (state) => cx(accordion_module_default.item, resolveClassName(className, state)),
 		...props
 	});
 });
 const AccordionHeader = forwardRef(function AccordionHeader({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Accordion.Header, {
 		ref,
-		className: `${accordion_module_default.header} ${className ?? ""}`,
+		className: (state) => cx(accordion_module_default.header, resolveClassName(className, state)),
 		...props
 	});
 });
 const AccordionTrigger = forwardRef(function AccordionTrigger({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Accordion.Trigger, {
 		ref,
-		className: `${accordion_module_default.trigger} ${className ?? ""}`,
+		className: (state) => cx(accordion_module_default.trigger, resolveClassName(className, state)),
 		...props
 	});
 });
 const AccordionPanel = forwardRef(function AccordionPanel({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Accordion.Panel, {
 		ref,
-		className: `${accordion_module_default.panel} ${className ?? ""}`,
+		className: (state) => cx(accordion_module_default.panel, resolveClassName(className, state)),
 		...props
 	});
 });
 //#endregion
-export { AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };
+export { AccordionHeader, AccordionItemPart, AccordionPanel, AccordionTrigger };
 
 //# sourceMappingURL=parts.js.map

package/dist/accordion/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":["BaseAccordion","styles"],"sources":["../../src/accordion/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Accordion.\n *\n * @example\n * ```tsx\n * import { Accordion } from '@base-ui/react/accordion';\n * import { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@brijbyte/agentic-ui/accordion';\n *\n * <Accordion.Root defaultValue={['a']}>\n *   <AccordionItem value=\"a\">\n *     <AccordionHeader>\n *       <AccordionTrigger>Section A</AccordionTrigger>\n *     </AccordionHeader>\n *     <AccordionPanel>Content A</AccordionPanel>\n *   </AccordionItem>\n * </Accordion.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\ntype BaseItemProps = ComponentPropsWithoutRef<typeof BaseAccordion.Item>;\ntype BaseHeaderProps = ComponentPropsWithoutRef<typeof BaseAccordion.Header>;\ntype BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>;\ntype BasePanelProps = ComponentPropsWithoutRef<typeof BaseAccordion.Panel>;\n\nexport interface AccordionItemProps extends Omit<BaseItemProps, \"className\"> {\n  className?: string;\n}\nexport interface AccordionHeaderProps extends Omit<BaseHeaderProps, \"className\"> {\n  className?: string;\n}\nexport interface AccordionTriggerProps extends Omit<BaseTriggerProps, \"className\"> {\n  className?: string;\n}\nexport interface AccordionPanelProps extends Omit<BasePanelProps, \"className\"> {\n  className?: string;\n}\n\nexport const AccordionItem = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItem(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Item ref={ref} className={`${styles.item} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AccordionHeader = forwardRef<ComponentRef<typeof BaseAccordion.Header>, AccordionHeaderProps>(function AccordionHeader(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Header ref={ref} className={`${styles.header} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AccordionTrigger = forwardRef<ComponentRef<typeof BaseAccordion.Trigger>, AccordionTriggerProps>(function AccordionTrigger(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Trigger ref={ref} className={`${styles.trigger} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AccordionPanel = forwardRef<ComponentRef<typeof BaseAccordion.Panel>, AccordionPanelProps>(function AccordionPanel(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Panel ref={ref} className={`${styles.panel} ${className ?? \"\"}`} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,gBAAgB,WAAwE,SAAS,cAC5G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,UAAc,MAAf;EAAyB;EAAK,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAClG;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,QAAf;EAA2B;EAAK,WAAW,GAAGC,yBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,SAAf;EAA4B;EAAK,WAAW,GAAGC,yBAAO,QAAQ,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACxG;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,OAAf;EAA0B;EAAK,WAAW,GAAGC,yBAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACpG"}
+{"version":3,"file":"parts.js","names":["BaseAccordion","styles"],"sources":["../../src/accordion/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Accordion.\n *\n * @example\n * ```tsx\n * import { Accordion } from '@base-ui/react/accordion';\n * import { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from '@brijbyte/agentic-ui/accordion';\n *\n * <Accordion.Root defaultValue={['a']}>\n *   <AccordionItem value=\"a\">\n *     <AccordionHeader>\n *       <AccordionTrigger>Section A</AccordionTrigger>\n *     </AccordionHeader>\n *     <AccordionPanel>Content A</AccordionPanel>\n *   </AccordionItem>\n * </Accordion.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseItemProps = ComponentPropsWithoutRef<typeof BaseAccordion.Item>;\ntype BaseHeaderProps = ComponentPropsWithoutRef<typeof BaseAccordion.Header>;\ntype BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>;\ntype BasePanelProps = ComponentPropsWithoutRef<typeof BaseAccordion.Panel>;\n\nexport interface AccordionItemProps extends BaseItemProps {}\nexport interface AccordionHeaderProps extends BaseHeaderProps {}\nexport interface AccordionTriggerProps extends BaseTriggerProps {}\nexport interface AccordionPanelProps extends BasePanelProps {}\n\nexport const AccordionItemPart = forwardRef<ComponentRef<typeof BaseAccordion.Item>, AccordionItemProps>(function AccordionItemPart(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Item ref={ref} className={(state) => cx(styles.item, resolveClassName(className, state))} {...props} />;\n});\n\nexport const AccordionHeader = forwardRef<ComponentRef<typeof BaseAccordion.Header>, AccordionHeaderProps>(function AccordionHeader(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Header ref={ref} className={(state) => cx(styles.header, resolveClassName(className, state))} {...props} />;\n});\n\nexport const AccordionTrigger = forwardRef<ComponentRef<typeof BaseAccordion.Trigger>, AccordionTriggerProps>(function AccordionTrigger(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Trigger ref={ref} className={(state) => cx(styles.trigger, resolveClassName(className, state))} {...props} />;\n});\n\nexport const AccordionPanel = forwardRef<ComponentRef<typeof BaseAccordion.Panel>, AccordionPanelProps>(function AccordionPanel(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAccordion.Panel ref={ref} className={(state) => cx(styles.panel, resolveClassName(className, state))} {...props} />;\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,oBAAoB,WAAwE,SAAS,kBAChH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,UAAc,MAAf;EAAyB;EAAK,YAAY,UAAU,GAAGC,yBAAO,MAAM,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC7H;AAEF,MAAa,kBAAkB,WAA4E,SAAS,gBAClH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,QAAf;EAA2B;EAAK,YAAY,UAAU,GAAGC,yBAAO,QAAQ,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACjI;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,SAAf;EAA4B;EAAK,YAAY,UAAU,GAAGC,yBAAO,SAAS,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACnI;AAEF,MAAa,iBAAiB,WAA0E,SAAS,eAC/G,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,UAAc,OAAf;EAA0B;EAAK,YAAY,UAAU,GAAGC,yBAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAC/H"}

package/dist/alert-dialog/parts.d.ts

@@ -7,18 +7,10 @@ type BaseBackdropProps = ComponentPropsWithoutRef<typeof AlertDialog.Backdrop>;
 type BasePopupProps = ComponentPropsWithoutRef<typeof AlertDialog.Popup>;
 type BaseTitleProps = ComponentPropsWithoutRef<typeof AlertDialog.Title>;
 type BaseDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialog.Description>;
-interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, "className"> {
-  className?: string;
-}
-interface AlertDialogPopupProps extends Omit<BasePopupProps, "className"> {
-  className?: string;
-}
-interface AlertDialogTitleProps extends Omit<BaseTitleProps, "className"> {
-  className?: string;
-}
-interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, "className"> {
-  className?: string;
-}
+interface AlertDialogBackdropProps extends BaseBackdropProps {}
+interface AlertDialogPopupProps extends BasePopupProps {}
+interface AlertDialogTitleProps extends BaseTitleProps {}
+interface AlertDialogDescriptionProps extends BaseDescriptionProps {}
 declare const AlertDialogBackdrop: react.ForwardRefExoticComponent<AlertDialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogPopup: react.ForwardRefExoticComponent<AlertDialogPopupProps & react.RefAttributes<HTMLDivElement>>;
 declare const AlertDialogTitle: react.ForwardRefExoticComponent<AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;

package/dist/alert-dialog/parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/alert-dialog/parts.tsx"],"mappings":";;;;;KA8BK,iBAAA,GAAoB,wBAAA,QAAgC,WAAA,CAAgB,QAAA;AAAA,KACpE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,oBAAA,GAAuB,wBAAA,QAAgC,WAAA,CAAgB,WAAA;AAAA,UAE3D,wBAAA,SAAiC,IAAA,CAAK,iBAAA;EACrD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,UAEe,2BAAA,SAAoC,IAAA,CAAK,oBAAA;EACxD,SAAA;AAAA;AAAA,cAGW,mBAAA,EAAmB,KAAA,CAAA,yBAAA,CAAA,wBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAMnB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOhB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOhB,sBAAA,EAAsB,KAAA,CAAA,yBAAA,CAAA,2BAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA"}
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/alert-dialog/parts.tsx"],"mappings":";;;;;KA4BK,iBAAA,GAAoB,wBAAA,QAAgC,WAAA,CAAgB,QAAA;AAAA,KACpE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,KACjE,oBAAA,GAAuB,wBAAA,QAAgC,WAAA,CAAgB,WAAA;AAAA,UAE3D,wBAAA,SAAiC,iBAAA;AAAA,UACjC,qBAAA,SAA8B,cAAA;AAAA,UAC9B,qBAAA,SAA8B,cAAA;AAAA,UAC9B,2BAAA,SAAoC,oBAAA;AAAA,cAExC,mBAAA,EAAmB,KAAA,CAAA,yBAAA,CAAA,wBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAMnB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOhB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;AAAA,cAOhB,sBAAA,EAAsB,KAAA,CAAA,yBAAA,CAAA,2BAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA"}

package/dist/alert-dialog/parts.js

@@ -1,3 +1,4 @@
+import { cx, resolveClassName } from "../utils/resolveClassName.js";
 import alert_dialog_module_default from "./alert-dialog.module.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -8,51 +9,48 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 *
 * @example
 * ```tsx
-* import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
-* import { Button } from '@brijbyte/agentic-ui/button';
+* import { AlertDialog } from '@base-ui/react/alert-dialog';
 * import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';
 *
-* <BaseAlertDialog.Root>
-*   <BaseAlertDialog.Trigger render={<button>Open</button>} />
-*   <BaseAlertDialog.Portal>
+* <AlertDialog.Root>
+*   <AlertDialog.Trigger render={<button>Open</button>} />
+*   <AlertDialog.Portal>
 *     <AlertDialogBackdrop />
-*     <AlertDialogPopup>
-*       <AlertDialogTitle>Delete account?</AlertDialogTitle>
-*       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
-*       <div>
-*         <BaseAlertDialog.Close render={<Button variant="soft" tone="destructive" size="sm" />}>Delete</BaseAlertDialog.Close>
-*         <BaseAlertDialog.Close render={<Button variant="outline" size="sm" />}>Cancel</BaseAlertDialog.Close>
-*       </div>
-*     </AlertDialogPopup>
-*   </BaseAlertDialog.Portal>
-* </BaseAlertDialog.Root>
+*     <AlertDialog.Viewport>
+*       <AlertDialogPopup>
+*         <AlertDialogTitle>Confirm</AlertDialogTitle>
+*         <AlertDialogDescription>Are you sure?</AlertDialogDescription>
+*       </AlertDialogPopup>
+*     </AlertDialog.Viewport>
+*   </AlertDialog.Portal>
+* </AlertDialog.Root>
 * ```
 */
 const AlertDialogBackdrop = forwardRef(function AlertDialogBackdrop({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
 		ref,
-		className: `${alert_dialog_module_default.backdrop} ${className ?? ""}`,
+		className: (state) => cx(alert_dialog_module_default.backdrop, resolveClassName(className, state)),
 		...props
 	});
 });
 const AlertDialogPopup = forwardRef(function AlertDialogPopup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
 		ref,
-		className: `${alert_dialog_module_default.popup} ${className ?? ""}`,
+		className: (state) => cx(alert_dialog_module_default.popup, resolveClassName(className, state)),
 		...props
 	});
 });
 const AlertDialogTitle = forwardRef(function AlertDialogTitle({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AlertDialog.Title, {
 		ref,
-		className: `${alert_dialog_module_default.title} ${className ?? ""}`,
+		className: (state) => cx(alert_dialog_module_default.title, resolveClassName(className, state)),
 		...props
 	});
 });
 const AlertDialogDescription = forwardRef(function AlertDialogDescription({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(AlertDialog.Description, {
 		ref,
-		className: `${alert_dialog_module_default.description} ${className ?? ""}`,
+		className: (state) => cx(alert_dialog_module_default.description, resolveClassName(className, state)),
 		...props
 	});
 });

package/dist/alert-dialog/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":["BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for AlertDialog.\n *\n * @example\n * ```tsx\n * import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\n * import { Button } from '@brijbyte/agentic-ui/button';\n * import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';\n *\n * <BaseAlertDialog.Root>\n *   <BaseAlertDialog.Trigger render={<button>Open</button>} />\n *   <BaseAlertDialog.Portal>\n *     <AlertDialogBackdrop />\n *     <AlertDialogPopup>\n *       <AlertDialogTitle>Delete account?</AlertDialogTitle>\n *       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>\n *       <div>\n *         <BaseAlertDialog.Close render={<Button variant=\"soft\" tone=\"destructive\" size=\"sm\" />}>Delete</BaseAlertDialog.Close>\n *         <BaseAlertDialog.Close render={<Button variant=\"outline\" size=\"sm\" />}>Cancel</BaseAlertDialog.Close>\n *       </div>\n *     </AlertDialogPopup>\n *   </BaseAlertDialog.Portal>\n * </BaseAlertDialog.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport styles from \"./alert-dialog.module.css\";\n\ntype BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>;\n\nexport interface AlertDialogBackdropProps extends Omit<BaseBackdropProps, \"className\"> {\n  className?: string;\n}\nexport interface AlertDialogPopupProps extends Omit<BasePopupProps, \"className\"> {\n  className?: string;\n}\nexport interface AlertDialogTitleProps extends Omit<BaseTitleProps, \"className\"> {\n  className?: string;\n}\nexport interface AlertDialogDescriptionProps extends Omit<BaseDescriptionProps, \"className\"> {\n  className?: string;\n}\n\nexport const AlertDialogBackdrop = forwardRef<ComponentRef<typeof BaseAlertDialog.Backdrop>, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return <BaseAlertDialog.Backdrop ref={ref} className={`${styles.backdrop} ${className ?? \"\"}`} {...props} />;\n  },\n);\n\nexport const AlertDialogPopup = forwardRef<ComponentRef<typeof BaseAlertDialog.Popup>, AlertDialogPopupProps>(function AlertDialogPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAlertDialog.Popup ref={ref} className={`${styles.popup} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AlertDialogTitle = forwardRef<ComponentRef<typeof BaseAlertDialog.Title>, AlertDialogTitleProps>(function AlertDialogTitle(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAlertDialog.Title ref={ref} className={`${styles.title} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const AlertDialogDescription = forwardRef<ComponentRef<typeof BaseAlertDialog.Description>, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return <BaseAlertDialog.Description ref={ref} className={`${styles.description} ${className ?? \"\"}`} {...props} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDA,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;AACzD,QAAO,oBAACA,YAAgB,UAAjB;EAA+B;EAAK,WAAW,GAAGC,4BAAO,SAAS,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAE/G;AAED,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,WAAW,GAAGC,4BAAO,MAAM,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC5D,QAAO,oBAACD,YAAgB,aAAjB;EAAkC;EAAK,WAAW,GAAGC,4BAAO,YAAY,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EAErH"}
+{"version":3,"file":"parts.js","names":["BaseAlertDialog","styles"],"sources":["../../src/alert-dialog/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for AlertDialog.\n *\n * @example\n * ```tsx\n * import { AlertDialog } from '@base-ui/react/alert-dialog';\n * import { AlertDialogBackdrop, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription } from '@brijbyte/agentic-ui/alert-dialog';\n *\n * <AlertDialog.Root>\n *   <AlertDialog.Trigger render={<button>Open</button>} />\n *   <AlertDialog.Portal>\n *     <AlertDialogBackdrop />\n *     <AlertDialog.Viewport>\n *       <AlertDialogPopup>\n *         <AlertDialogTitle>Confirm</AlertDialogTitle>\n *         <AlertDialogDescription>Are you sure?</AlertDialogDescription>\n *       </AlertDialogPopup>\n *     </AlertDialog.Viewport>\n *   </AlertDialog.Portal>\n * </AlertDialog.Root>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef } from \"react\";\nimport { AlertDialog as BaseAlertDialog } from \"@base-ui/react/alert-dialog\";\nimport styles from \"./alert-dialog.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseBackdropProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop>;\ntype BasePopupProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup>;\ntype BaseTitleProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Title>;\ntype BaseDescriptionProps = ComponentPropsWithoutRef<typeof BaseAlertDialog.Description>;\n\nexport interface AlertDialogBackdropProps extends BaseBackdropProps {}\nexport interface AlertDialogPopupProps extends BasePopupProps {}\nexport interface AlertDialogTitleProps extends BaseTitleProps {}\nexport interface AlertDialogDescriptionProps extends BaseDescriptionProps {}\n\nexport const AlertDialogBackdrop = forwardRef<ComponentRef<typeof BaseAlertDialog.Backdrop>, AlertDialogBackdropProps>(\n  function AlertDialogBackdrop({ className, ...props }, ref) {\n    return <BaseAlertDialog.Backdrop ref={ref} className={(state) => cx(styles.backdrop, resolveClassName(className, state))} {...props} />;\n  },\n);\n\nexport const AlertDialogPopup = forwardRef<ComponentRef<typeof BaseAlertDialog.Popup>, AlertDialogPopupProps>(function AlertDialogPopup(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAlertDialog.Popup ref={ref} className={(state) => cx(styles.popup, resolveClassName(className, state))} {...props} />;\n});\n\nexport const AlertDialogTitle = forwardRef<ComponentRef<typeof BaseAlertDialog.Title>, AlertDialogTitleProps>(function AlertDialogTitle(\n  { className, ...props },\n  ref,\n) {\n  return <BaseAlertDialog.Title ref={ref} className={(state) => cx(styles.title, resolveClassName(className, state))} {...props} />;\n});\n\nexport const AlertDialogDescription = forwardRef<ComponentRef<typeof BaseAlertDialog.Description>, AlertDialogDescriptionProps>(\n  function AlertDialogDescription({ className, ...props }, ref) {\n    return (\n      <BaseAlertDialog.Description ref={ref} className={(state) => cx(styles.description, resolveClassName(className, state))} {...props} />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,sBAAsB,WACjC,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAS,KAAK;AACzD,QAAO,oBAACA,YAAgB,UAAjB;EAA+B;EAAK,YAAY,UAAU,GAAGC,4BAAO,UAAU,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAE1I;AAED,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,YAAY,UAAU,GAAGC,4BAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACjI;AAEF,MAAa,mBAAmB,WAA8E,SAAS,iBACrH,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACD,YAAgB,OAAjB;EAA4B;EAAK,YAAY,UAAU,GAAGC,4BAAO,OAAO,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACjI;AAEF,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,WAAW,GAAG,SAAS,KAAK;AAC5D,QACE,oBAACD,YAAgB,aAAjB;EAAkC;EAAK,YAAY,UAAU,GAAGC,4BAAO,aAAa,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EAG3I"}

package/dist/checkbox/parts.d.ts

@@ -5,11 +5,8 @@ import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/checkbox/parts.d.ts
 type BaseRootProps = ComponentPropsWithoutRef<typeof Checkbox.Root>;
 type BaseIndicatorProps = ComponentPropsWithoutRef<typeof Checkbox.Indicator>;
-interface CheckboxRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-interface CheckboxIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
-  className?: string;
+interface CheckboxRootProps extends BaseRootProps {}
+interface CheckboxIndicatorProps extends BaseIndicatorProps {
   /** Custom icon rendered inside the indicator. Defaults to an SVG checkmark. */
   children?: ReactNode;
 }

package/dist/checkbox/parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/checkbox/parts.tsx"],"mappings":";;;;;KAqBK,aAAA,GAAgB,wBAAA,QAAgC,QAAA,CAAa,IAAA;AAAA,KAC7D,kBAAA,GAAqB,wBAAA,QAAgC,QAAA,CAAa,SAAA;AAAA,UAEtD,iBAAA,SAA0B,IAAA,CAAK,aAAA;EAC9C,SAAA;AAAA;AAAA,UAEe,sBAAA,SAA+B,IAAA,CAAK,kBAAA;EACnD,SAAA;EAPmB;EASnB,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOZ,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/checkbox/parts.tsx"],"mappings":";;;;;KAsBK,aAAA,GAAgB,wBAAA,QAAgC,QAAA,CAAa,IAAA;AAAA,KAC7D,kBAAA,GAAqB,wBAAA,QAAgC,QAAA,CAAa,SAAA;AAAA,UAEtD,iBAAA,SAA0B,aAAA;AAAA,UAC1B,sBAAA,SAA+B,kBAAA;;EAE9C,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,cAOZ,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAA,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,eAAA"}

package/dist/checkbox/parts.js

@@ -1,3 +1,4 @@
+import { cx, resolveClassName } from "../utils/resolveClassName.js";
 import checkbox_module_default from "./checkbox.module.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -22,14 +23,14 @@ import { Checkbox } from "@base-ui/react/checkbox";
 const CheckboxRoot = forwardRef(function CheckboxRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		ref,
-		className: `${checkbox_module_default.indicator} ${className ?? ""}`,
+		className: (state) => cx(checkbox_module_default.indicator, resolveClassName(className, state)),
 		...props
 	});
 });
 const CheckboxIndicator = forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
 		ref,
-		className: `${checkbox_module_default.icon} ${className ?? ""}`,
+		className: (state) => cx(checkbox_module_default.icon, resolveClassName(className, state)),
 		...props,
 		children: children ?? /* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 10 10",

package/dist/checkbox/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":["BaseCheckbox","styles"],"sources":["../../src/checkbox/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Checkbox.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@base-ui/react/checkbox';\n * import { CheckboxRoot, CheckboxIndicator } from '@brijbyte/agentic-ui/checkbox';\n *\n * <label htmlFor=\"cb\">\n *   <CheckboxRoot id=\"cb\" onCheckedChange={...}>\n *     <CheckboxIndicator />\n *   </CheckboxRoot>\n *   Enable notifications\n * </label>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport styles from \"./checkbox.module.css\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator>;\n\nexport interface CheckboxRootProps extends Omit<BaseRootProps, \"className\"> {\n  className?: string;\n}\nexport interface CheckboxIndicatorProps extends Omit<BaseIndicatorProps, \"className\"> {\n  className?: string;\n  /** Custom icon rendered inside the indicator. Defaults to an SVG checkmark. */\n  children?: ReactNode;\n}\n\nexport const CheckboxRoot = forwardRef<ComponentRef<typeof BaseCheckbox.Root>, CheckboxRootProps>(function CheckboxRoot(\n  { className, ...props },\n  ref,\n) {\n  return <BaseCheckbox.Root ref={ref} className={`${styles.indicator} ${className ?? \"\"}`} {...props} />;\n});\n\nexport const CheckboxIndicator = forwardRef<ComponentRef<typeof BaseCheckbox.Indicator>, CheckboxIndicatorProps>(function CheckboxIndicator(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <BaseCheckbox.Indicator ref={ref} className={`${styles.icon} ${className ?? \"\"}`} {...props}>\n      {children ?? (\n        <svg viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.5 5L3.5 7.5L8.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      )}\n    </BaseCheckbox.Indicator>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,SAAa,MAAd;EAAwB;EAAK,WAAW,GAAGC,wBAAO,UAAU,GAAG,aAAa;EAAM,GAAI;EAAS,CAAA;EACtG;AAEF,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;AACA,QACE,oBAACD,SAAa,WAAd;EAA6B;EAAK,WAAW,GAAGC,wBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;YACnF,YACC,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,OAAM;aACzC,oBAAC,QAAD;IAAM,GAAE;IAAyB,QAAO;IAAe,aAAY;IAAM,eAAc;IAAQ,gBAAe;IAAU,CAAA;GACpH,CAAA;EAEe,CAAA;EAE3B"}
+{"version":3,"file":"parts.js","names":["BaseCheckbox","styles"],"sources":["../../src/checkbox/parts.tsx"],"sourcesContent":["/**\n * Styled primitives for Checkbox.\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@base-ui/react/checkbox';\n * import { CheckboxRoot, CheckboxIndicator } from '@brijbyte/agentic-ui/checkbox';\n *\n * <label htmlFor=\"cb\">\n *   <CheckboxRoot id=\"cb\" onCheckedChange={...}>\n *     <CheckboxIndicator />\n *   </CheckboxRoot>\n *   Enable notifications\n * </label>\n * ```\n */\nimport { forwardRef } from \"react\";\nimport type { ComponentRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport styles from \"./checkbox.module.css\";\nimport { resolveClassName, cx } from \"../utils/resolveClassName\";\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root>;\ntype BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator>;\n\nexport interface CheckboxRootProps extends BaseRootProps {}\nexport interface CheckboxIndicatorProps extends BaseIndicatorProps {\n  /** Custom icon rendered inside the indicator. Defaults to an SVG checkmark. */\n  children?: ReactNode;\n}\n\nexport const CheckboxRoot = forwardRef<ComponentRef<typeof BaseCheckbox.Root>, CheckboxRootProps>(function CheckboxRoot(\n  { className, ...props },\n  ref,\n) {\n  return <BaseCheckbox.Root ref={ref} className={(state) => cx(styles.indicator, resolveClassName(className, state))} {...props} />;\n});\n\nexport const CheckboxIndicator = forwardRef<ComponentRef<typeof BaseCheckbox.Indicator>, CheckboxIndicatorProps>(function CheckboxIndicator(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <BaseCheckbox.Indicator ref={ref} className={(state) => cx(styles.icon, resolveClassName(className, state))} {...props}>\n      {children ?? (\n        <svg viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.5 5L3.5 7.5L8.5 2.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      )}\n    </BaseCheckbox.Indicator>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,eAAe,WAAsE,SAAS,aACzG,EAAE,WAAW,GAAG,SAChB,KACA;AACA,QAAO,oBAACA,SAAa,MAAd;EAAwB;EAAK,YAAY,UAAU,GAAGC,wBAAO,WAAW,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;EAAS,CAAA;EACjI;AAEF,MAAa,oBAAoB,WAAgF,SAAS,kBACxH,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;AACA,QACE,oBAACD,SAAa,WAAd;EAA6B;EAAK,YAAY,UAAU,GAAGC,wBAAO,MAAM,iBAAiB,WAAW,MAAM,CAAC;EAAE,GAAI;YAC9G,YACC,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,OAAM;aACzC,oBAAC,QAAD;IAAM,GAAE;IAAyB,QAAO;IAAe,aAAY;IAAM,eAAc;IAAQ,gBAAe;IAAU,CAAA;GACpH,CAAA;EAEe,CAAA;EAE3B"}

package/dist/collapsible/parts.d.ts

@@ -6,15 +6,9 @@ import { Collapsible } from "@base-ui/react/collapsible";
 type BaseRootProps = ComponentPropsWithoutRef<typeof Collapsible.Root>;
 type BaseTriggerProps = ComponentPropsWithoutRef<typeof Collapsible.Trigger>;
 type BasePanelProps = ComponentPropsWithoutRef<typeof Collapsible.Panel>;
-interface CollapsibleRootProps extends Omit<BaseRootProps, "className"> {
-  className?: string;
-}
-interface CollapsibleTriggerProps extends Omit<BaseTriggerProps, "className"> {
-  className?: string;
-}
-interface CollapsiblePanelProps extends Omit<BasePanelProps, "className"> {
-  className?: string;
-}
+interface CollapsibleRootProps extends BaseRootProps {}
+interface CollapsibleTriggerProps extends BaseTriggerProps {}
+interface CollapsiblePanelProps extends BasePanelProps {}
 declare const CollapsibleRoot: react.ForwardRefExoticComponent<CollapsibleRootProps & react.RefAttributes<HTMLDivElement>>;
 declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const CollapsiblePanel: react.ForwardRefExoticComponent<CollapsiblePanelProps & react.RefAttributes<HTMLDivElement>>;

package/dist/collapsible/parts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/collapsible/parts.tsx"],"mappings":";;;;;KAmBK,aAAA,GAAgB,wBAAA,QAAgC,WAAA,CAAgB,IAAA;AAAA,KAChE,gBAAA,GAAmB,wBAAA,QAAgC,WAAA,CAAgB,OAAA;AAAA,KACnE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,UAErD,oBAAA,SAA6B,IAAA,CAAK,aAAA;EACjD,SAAA;AAAA;AAAA,UAEe,uBAAA,SAAgC,IAAA,CAAK,gBAAA;EACpD,SAAA;AAAA;AAAA,UAEe,qBAAA,SAA8B,IAAA,CAAK,cAAA;EAClD,SAAA;AAAA;AAAA,cAGW,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOf,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,uBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cAMlB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}
+{"version":3,"file":"parts.d.ts","names":[],"sources":["../../src/collapsible/parts.tsx"],"mappings":";;;;;KAoBK,aAAA,GAAgB,wBAAA,QAAgC,WAAA,CAAgB,IAAA;AAAA,KAChE,gBAAA,GAAmB,wBAAA,QAAgC,WAAA,CAAgB,OAAA;AAAA,KACnE,cAAA,GAAiB,wBAAA,QAAgC,WAAA,CAAgB,KAAA;AAAA,UAErD,oBAAA,SAA6B,aAAA;AAAA,UAC7B,uBAAA,SAAgC,gBAAA;AAAA,UAChC,qBAAA,SAA8B,cAAA;AAAA,cAElC,eAAA,EAAe,KAAA,CAAA,yBAAA,CAAA,oBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAOf,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,uBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cAMlB,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,qBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA"}

package/dist/collapsible/parts.js

@@ -1,3 +1,4 @@
+import { cx, resolveClassName } from "../utils/resolveClassName.js";
 import collapsible_module_default from "./collapsible.module.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -9,32 +10,32 @@ import { Collapsible } from "@base-ui/react/collapsible";
 * @example
 * ```tsx
 * import { Collapsible } from '@base-ui/react/collapsible';
-* import { CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';
+* import { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from '@brijbyte/agentic-ui/collapsible';
 *
-* <Collapsible.Root>
+* <CollapsibleRoot>
 *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
 *   <CollapsiblePanel>Content</CollapsiblePanel>
-* </Collapsible.Root>
+* </CollapsibleRoot>
 * ```
 */
 const CollapsibleRoot = forwardRef(function CollapsibleRoot({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Collapsible.Root, {
 		ref,
-		className: `${collapsible_module_default.root} ${className ?? ""}`,
+		className: (state) => cx(collapsible_module_default.root, resolveClassName(className, state)),
 		...props
 	});
 });
 const CollapsibleTrigger = forwardRef(function CollapsibleTrigger({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
 		ref,
-		className: `${collapsible_module_default.trigger} ${className ?? ""}`,
+		className: (state) => cx(collapsible_module_default.trigger, resolveClassName(className, state)),
 		...props
 	});
 });
 const CollapsiblePanel = forwardRef(function CollapsiblePanel({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Collapsible.Panel, {
 		ref,
-		className: `${collapsible_module_default.panel} ${className ?? ""}`,
+		className: (state) => cx(collapsible_module_default.panel, resolveClassName(className, state)),
 		...props
 	});
 });