@brijbyte/agentic-ui 0.0.3 → 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
@@ -135,34 +137,37 @@ All tokens live in `@layer theme` — the lowest-priority layer. `@layer base` (
 
 Shadows are theme-aware — light mode uses low-opacity black shadows; dark mode uses higher-opacity values so elevation is visible against dark surfaces.
 
-| Token                                                     | Tailwind class       | Role                                        |
-| --------------------------------------------------------- | -------------------- | ------------------------------------------- |
-| `--color-canvas`                                          | `bg-canvas`          | Page background                             |
-| `--color-elevated`                                        | `bg-elevated`        | Cards, popovers                             |
-| `--color-sunken`                                          | `bg-sunken`          | Code blocks, inset areas                    |
-| `--color-overlay`                                         | `bg-overlay`         | Backdrop-blurred surfaces                   |
-| `--color-sidebar`                                         | `bg-sidebar`         | Sidebar / navigation panels                 |
-| `--color-surface-1/2/3`                                   | `bg-surface-1/2/3`   | Layered surface hierarchy                   |
-| `--color-hover`                                           | `bg-hover`           | Hovered interactive surface                 |
-| `--color-active`                                          | `bg-active`          | Pressed interactive surface                 |
-| `--color-selected`                                        | `bg-selected`        | Selected interactive surface                |
-| `--color-primary`                                         | `text-primary`       | Primary text                                |
-| `--color-secondary`                                       | `text-secondary`     | Secondary text                              |
-| `--color-tertiary`                                        | `text-tertiary`      | Tertiary / hint text                        |
-| `--color-disabled`                                        | `text-disabled`      | Disabled text                               |
-| `--color-inverse`                                         | `text-inverse`       | Text on inverse (dark) backgrounds          |
-| `--color-on-accent`                                       | `text-on-accent`     | Text on filled accent backgrounds           |
-| `--color-code`                                            | `text-code`          | Inline code text                            |
-| `--color-line`                                            | `border-line`        | Base border                                 |
-| `--color-line-strong`                                     | `border-line-strong` | Stronger border                             |
-| `--color-line-subtle`                                     | `border-line-subtle` | Subtle / decorative border                  |
-| `--color-accent`                                          | `bg-accent`          | macOS blue — solid interactive colour       |
-| `--color-accent-hover`                                    | —                    | Accent on hover                             |
-| `--color-accent-pressed`                                  | —                    | Accent on press                             |
-| `--color-accent-tint`                                     | `bg-accent-tint`     | Subtle accent fill (badges, soft buttons)   |
-| `--color-accent-tint-hover`                               | —                    | Tint on hover                               |
-| `--color-focus-ring`                                      | —                    | Focus ring colour (semi-transparent accent) |
-| `--color-success/warning/error/info-bg/border/text/solid` | —                    | Status colours                              |
+| Token                                                     | Tailwind class       | Role                                         |
+| --------------------------------------------------------- | -------------------- | -------------------------------------------- |
+| `--color-canvas`                                          | `bg-canvas`          | Page background                              |
+| `--color-elevated`                                        | `bg-elevated`        | Cards, popovers                              |
+| `--color-sunken`                                          | `bg-sunken`          | Code blocks, inset areas                     |
+| `--color-overlay`                                         | `bg-overlay`         | Backdrop-blurred surfaces                    |
+| `--color-sidebar`                                         | `bg-sidebar`         | Sidebar / navigation panels                  |
+| `--color-surface-1/2/3`                                   | `bg-surface-1/2/3`   | Layered surface hierarchy                    |
+| `--color-hover`                                           | `bg-hover`           | Hovered interactive surface                  |
+| `--color-active`                                          | `bg-active`          | Pressed interactive surface                  |
+| `--color-selected`                                        | `bg-selected`        | Selected interactive surface                 |
+| `--color-primary`                                         | `text-primary`       | Primary text                                 |
+| `--color-secondary`                                       | `text-secondary`     | Secondary text                               |
+| `--color-tertiary`                                        | `text-tertiary`      | Tertiary / hint text                         |
+| `--color-disabled`                                        | `text-disabled`      | Disabled text                                |
+| `--color-inverse`                                         | `text-inverse`       | Text on inverse (dark) backgrounds           |
+| `--color-on-accent`                                       | `text-on-accent`     | Text on filled accent backgrounds            |
+| `--color-code`                                            | `text-code`          | Inline code text                             |
+| `--color-line`                                            | `border-line`        | Base border                                  |
+| `--color-line-strong`                                     | `border-line-strong` | Stronger border                              |
+| `--color-line-subtle`                                     | `border-line-subtle` | Subtle / decorative border                   |
+| `--color-accent`                                          | `bg-accent`          | macOS blue — links, focus rings, tints       |
+| `--color-accent-solid`                                    | —                    | Filled button bg — AA contrast vs white      |
+| `--color-accent-text`                                     | —                    | Accent text on tinted surfaces — AA contrast |
+| `--color-accent-hover`                                    | —                    | Accent on hover                              |
+| `--color-accent-pressed`                                  | —                    | Accent on press                              |
+| `--color-accent-tint`                                     | `bg-accent-tint`     | Subtle accent fill (badges, soft buttons)    |
+| `--color-accent-tint-hover`                               | —                    | Tint on hover                                |
+| `--color-focus-ring`                                      | —                    | Focus ring colour (semi-transparent accent)  |
+| `--color-success/warning/error/info-bg/border/text/solid` | —                    | Status colours                               |
+| `--color-success/warning/error-on-solid`                  | —                    | Text on filled status buttons (AA contrast)  |
 
 ### Spacing
 
@@ -221,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/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/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
 ```
 
 ---
@@ -280,7 +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`                                                                                                        |
@@ -413,6 +428,8 @@ import { Button } from "@brijbyte/agentic-ui/button";
 | `success`     | Confirm / complete action       |
 | `warning`     | Caution required                |
 
+All tone/variant combinations meet WCAG AA contrast (4.5:1 for text, 3:1 for borders). Each tone exposes two colour roles internally — a solid fill colour (`--btn-color`) and a separate text colour (`--btn-text-color`) optimised for legibility on tinted surfaces — so `soft`, `outline`, and `ghost` variants are always readable regardless of mode.
+
 **`loading`** disables the button and shows a centred spinner. The button width stays stable — children are hidden with `visibility: hidden` so they still contribute to layout.
 
 **`loadingText`** overrides the stable-width behaviour. When set, children swap to this text during loading (no spinner). Use when the loading state needs to communicate progress via text.
@@ -431,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
@@ -597,6 +635,97 @@ import { Collapsible } from "@brijbyte/agentic-ui/collapsible";
 
 When open, the trigger's bottom corners square off and connect flush with the content panel. When closing, the corners only round back after the panel has fully collapsed — no visible seam at any point during the animation.
 
+### Popover
+
+```tsx
+import { Popover } from "@brijbyte/agentic-ui/popover";
+
+// side: top | bottom (default) | left | right
+// align: start | center (default) | end
+<Popover
+  trigger={<Button variant="outline" size="sm">Details</Button>}
+  title="Deployment info"
+  description="Last deployed 3 minutes ago from main."
+  side="bottom"
+  align="start"
+/>
+
+// With body content and a close button
+<Popover
+  trigger={<Button>Settings</Button>}
+  title="API Settings"
+  dismissible
+>
+  <Input placeholder="API key" style={{ marginTop: "var(--space-3)" }} />
+</Popover>
+```
+
+**`trigger`** is rendered as-is and receives the open/close handler from base-ui.
+
+**`dismissible`** renders a close (×) button in the top-right corner. Omit it for simple informational popovers that dismiss on outside click.
+
+**`side`** / **`align`** control positioning. The popup auto-repositions to avoid viewport overflow — it will flip sides when there isn't enough space.
+
+#### Shared trigger (one popover, many triggers)
+
+Use `Popover.createHandle` from base-ui to connect multiple triggers to a single popup instance. Each trigger passes its own `payload`; the Root receives it via a render-function child. Switching triggers while the popup is open animates the content transition with `PopoverViewport`:
+
+```tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { PopoverPopup, PopoverTitle, PopoverDescription, PopoverArrow, PopoverViewport } from "@brijbyte/agentic-ui/popover";
+
+interface Item {
+  id: string;
+  name: string;
+  detail: string;
+}
+
+// Create once outside the component — typed with the payload shape
+const handle = BasePopover.createHandle<Item>();
+
+function MyList({ items }: { items: Item[] }) {
+  return (
+    <>
+      {/* Single Root — content driven by whichever trigger is active */}
+      <BasePopover.Root handle={handle}>
+        {({ payload }) =>
+          payload ? (
+            <BasePopover.Portal>
+              <BasePopover.Positioner side="right" sideOffset={8}>
+                <PopoverPopup>
+                  <PopoverArrow />
+                  {/* Viewport animates between triggers */}
+                  <PopoverViewport>
+                    <PopoverTitle>{payload.name}</PopoverTitle>
+                    <PopoverDescription>{payload.detail}</PopoverDescription>
+                  </PopoverViewport>
+                </PopoverPopup>
+              </BasePopover.Positioner>
+            </BasePopover.Portal>
+          ) : null
+        }
+      </BasePopover.Root>
+
+      {/* Each trigger passes its item as the payload */}
+      {items.map((item) => (
+        <BasePopover.Trigger
+          key={item.id}
+          handle={handle}
+          payload={item}
+          render={
+            <Button variant="ghost" size="xs">
+              Info
+            </Button>
+          }
+        />
+      ))}
+    </>
+  );
+}
+```
+
+`PopoverViewport` detects the direction between the old and new trigger and slides content in/out accordingly — down when moving to a lower trigger, up when moving higher, left/right for horizontal layouts.
+
 ### Menu
 
 ```tsx
@@ -622,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
@@ -642,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
@@ -726,15 +953,15 @@ import { ContextMenu } from "@brijbyte/agentic-ui/context-menu";
 
 <ContextMenu
   items={[
-    { label: "Cut",   shortcut: "⌘X" },
-    { label: "Copy",  shortcut: "⌘C" },
+    { label: "Cut", shortcut: "⌘X" },
+    { label: "Copy", shortcut: "⌘C" },
     { label: "Paste", shortcut: "⌘V", disabled: true },
     { type: "separator" },
     { label: "Select All", shortcut: "⌘A" },
   ]}
 >
   <div>Right click me</div>
-</ContextMenu>
+</ContextMenu>;
 ```
 
 Activated by right-click or long press on the child element. Supports `items` with `label`, `shortcut`, `icon`, `onSelect`, and `disabled`. Use `type: "separator"` for dividers and `type: "group"` with nested `items` for logical sections.
@@ -755,7 +982,7 @@ import { ContextMenuPopup, ContextMenuItem, ContextMenuSubmenuTrigger } from "@b
       </ContextMenuPopup>
     </BaseContextMenu.Positioner>
   </BaseContextMenu.Portal>
-</BaseContextMenu.SubmenuRoot>
+</BaseContextMenu.SubmenuRoot>;
 ```
 
 ---
@@ -783,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 19 components follow the same pattern
+  …                        ← All 23 components follow the same pattern
 ```
 
 ### Why no CSS in JS?

package/dist/accordion/accordion.d.ts

@@ -4,19 +4,33 @@ import styles from "./accordion.module.css";
 
 //#region src/accordion/accordion.d.ts
 interface AccordionItem {
+  /** Unique identifier for this panel. */
   value: string;
+  /** Content rendered inside the trigger button. */
   header: ReactNode;
+  /** Content revealed when the panel is expanded. */
   content: ReactNode;
+  /** When `true`, the item cannot be toggled. */
   disabled?: boolean;
 }
 interface AccordionProps {
+  /** Array of items to render as collapsible panels. */
   items: AccordionItem[];
+  /** Allow multiple panels open at once. @default true */
   multiple?: boolean;
+  /** Initially expanded panel values (uncontrolled). */
   defaultValue?: string[];
+  /** Currently expanded panel values (controlled). */
   value?: string[];
+  /** Called when the set of open panels changes. */
   onValueChange?: (value: string[]) => void;
   className?: string;
 }
+/**
+ * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+ * headers, triggers, and animated panels. Pass `multiple` to allow more than one
+ * panel open at a time.
+ */
 declare function Accordion({
   items,
   className,

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;EACf,KAAA;EACA,MAAA,EAAQ,SAAA;EACR,OAAA,EAAS,SAAA;EACT,QAAA;AAAA;AAAA,UAGe,cAAA;EACf,KAAA,EAAO,aAAA;EACP,QAAA;EACA,YAAA;EACA,KAAA;EACA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;AAAA,iBAWc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"accordion.d.ts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;;;UAIiB,aAAA;;EAEf,KAAA;EAFe;EAIf,MAAA,EAAQ,SAAA;;EAER,OAAA,EAAS,SAAA;EAJT;EAMA,QAAA;AAAA;AAAA,UAGe,cAAA;EALN;EAOT,KAAA,EAAO,aAAA;EALC;EAOR,QAAA;EAJe;EAMf,YAAA;;EAEA,KAAA;EANA;EAQA,aAAA,IAAiB,KAAA;EACjB,SAAA;AAAA;;;;;;iBAgBc,SAAA,CAAA;EAAY,KAAA;EAAO,SAAA;EAAW,QAAA;EAAA,GAAoB;AAAA,GAAS,cAAA,GAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/accordion/accordion.js

@@ -17,6 +17,11 @@ function ChevronIcon() {
 		})
 	});
 }
+/**
+* Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled
+* headers, triggers, and animated panels. Pass `multiple` to allow more than one
+* panel open at a time.
+*/
 function Accordion$1({ items, className, multiple = true, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion.Root, {
 		className: `${accordion_module_default.root} ${className ?? ""}`,

package/dist/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n  value: string;\n  header: ReactNode;\n  content: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  items: AccordionItem[];\n  multiple?: boolean;\n  defaultValue?: string[];\n  value?: string[];\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n      {items.map((item) => (\n        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n          <BaseAccordion.Header className={styles.header}>\n            <BaseAccordion.Trigger className={styles.trigger}>\n              {item.header}\n              <span className={styles[\"trigger-icon\"]}>\n                <ChevronIcon />\n              </span>\n            </BaseAccordion.Trigger>\n          </BaseAccordion.Header>\n          <BaseAccordion.Panel className={styles.panel}>\n            <div className={styles[\"panel-content\"]}>{item.content}</div>\n          </BaseAccordion.Panel>\n        </BaseAccordion.Item>\n      ))}\n    </BaseAccordion.Root>\n  );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AAoBA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;AAIV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}
+{"version":3,"file":"accordion.js","names":["Accordion","BaseAccordion","styles"],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Accordion as BaseAccordion } from \"@base-ui/react/accordion\";\nimport styles from \"./accordion.module.css\";\n\nexport interface AccordionItem {\n  /** Unique identifier for this panel. */\n  value: string;\n  /** Content rendered inside the trigger button. */\n  header: ReactNode;\n  /** Content revealed when the panel is expanded. */\n  content: ReactNode;\n  /** When `true`, the item cannot be toggled. */\n  disabled?: boolean;\n}\n\nexport interface AccordionProps {\n  /** Array of items to render as collapsible panels. */\n  items: AccordionItem[];\n  /** Allow multiple panels open at once. @default true */\n  multiple?: boolean;\n  /** Initially expanded panel values (uncontrolled). */\n  defaultValue?: string[];\n  /** Currently expanded panel values (controlled). */\n  value?: string[];\n  /** Called when the set of open panels changes. */\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n      <path d=\"M2.5 4.5L6 8L9.5 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * Collapsible content panels. Wraps `@base-ui/react` Accordion with pre-styled\n * headers, triggers, and animated panels. Pass `multiple` to allow more than one\n * panel open at a time.\n */\nexport function Accordion({ items, className, multiple = true, ...props }: AccordionProps) {\n  return (\n    <BaseAccordion.Root className={`${styles.root} ${className ?? \"\"}`} multiple={multiple} {...props}>\n      {items.map((item) => (\n        <BaseAccordion.Item key={item.value} value={item.value} className={styles.item} disabled={item.disabled ?? false}>\n          <BaseAccordion.Header className={styles.header}>\n            <BaseAccordion.Trigger className={styles.trigger}>\n              {item.header}\n              <span className={styles[\"trigger-icon\"]}>\n                <ChevronIcon />\n              </span>\n            </BaseAccordion.Trigger>\n          </BaseAccordion.Header>\n          <BaseAccordion.Panel className={styles.panel}>\n            <div className={styles[\"panel-content\"]}>{item.content}</div>\n          </BaseAccordion.Panel>\n        </BaseAccordion.Item>\n      ))}\n    </BaseAccordion.Root>\n  );\n}\nexport { styles as AccordionStyles };\n"],"mappings":";;;;AA6BA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;YACnD,oBAAC,QAAD;GAAM,GAAE;GAAuB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAClH,CAAA;;;;;;;AASV,SAAgBA,YAAU,EAAE,OAAO,WAAW,WAAW,MAAM,GAAG,SAAyB;AACzF,QACE,oBAACC,UAAc,MAAf;EAAoB,WAAW,GAAGC,yBAAO,KAAK,GAAG,aAAa;EAAgB;EAAU,GAAI;YACzF,MAAM,KAAK,SACV,qBAACD,UAAc,MAAf;GAAqC,OAAO,KAAK;GAAO,WAAWC,yBAAO;GAAM,UAAU,KAAK,YAAY;aAA3G,CACE,oBAACD,UAAc,QAAf;IAAsB,WAAWC,yBAAO;cACtC,qBAACD,UAAc,SAAf;KAAuB,WAAWC,yBAAO;eAAzC,CACG,KAAK,QACN,oBAAC,QAAD;MAAM,WAAWA,yBAAO;gBACtB,oBAAC,aAAD,EAAe,CAAA;MACV,CAAA,CACe;;IACH,CAAA,EACvB,oBAACD,UAAc,OAAf;IAAqB,WAAWC,yBAAO;cACrC,oBAAC,OAAD;KAAK,WAAWA,yBAAO;eAAmB,KAAK;KAAc,CAAA;IACzC,CAAA,CACH;KAZI,KAAK,MAYT,CACrB;EACiB,CAAA"}

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"}