@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/dist/card/card.js

@@ -0,0 +1,50 @@
+import card_module_default from "./card.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/card/card.tsx
+function Card({ elevated, interactive, className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: [
+			card_module_default.root,
+			elevated ? card_module_default["root-elevated"] : "",
+			interactive ? card_module_default["root-interactive"] : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
+		...props,
+		children
+	});
+}
+function CardHeader({ heading, description, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${card_module_default.header} ${className ?? ""}`,
+		...props,
+		children: [
+			heading && /* @__PURE__ */ jsx("span", {
+				className: card_module_default.title,
+				children: heading
+			}),
+			description && /* @__PURE__ */ jsx("span", {
+				className: card_module_default.description,
+				children: description
+			}),
+			children
+		]
+	});
+}
+function CardBody({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${card_module_default.body} ${className ?? ""}`,
+		...props,
+		children
+	});
+}
+function CardFooter({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${card_module_default.footer} ${className ?? ""}`,
+		...props,
+		children
+	});
+}
+//#endregion
+export { Card, CardBody, CardFooter, CardHeader };
+
+//# sourceMappingURL=card.js.map

package/dist/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":["styles"],"sources":["../../src/card/card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport styles from \"./card.module.css\";\n\nexport interface CardProps extends ComponentPropsWithoutRef<\"div\"> {\n  elevated?: boolean;\n  interactive?: boolean;\n}\n\n// Omit `title` (HTML string attr) so we can accept ReactNode as `heading`\nexport interface CardHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /** Card heading rendered in the header area. */\n  heading?: ReactNode;\n  description?: ReactNode;\n}\n\nexport function Card({ elevated, interactive, className, children, ...props }: CardProps) {\n  return (\n    <div\n      className={[styles.root, elevated ? styles[\"root-elevated\"] : \"\", interactive ? styles[\"root-interactive\"] : \"\", className ?? \"\"]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function CardHeader({ heading, description, className, children, ...props }: CardHeaderProps) {\n  return (\n    <div className={`${styles.header} ${className ?? \"\"}`} {...props}>\n      {heading && <span className={styles.title}>{heading}</span>}\n      {description && <span className={styles.description}>{description}</span>}\n      {children}\n    </div>\n  );\n}\n\nexport function CardBody({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.body} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardFooter({ className, children, ...props }: ComponentPropsWithoutRef<\"div\">) {\n  return (\n    <div className={`${styles.footer} ${className ?? \"\"}`} {...props}>\n      {children}\n    </div>\n  );\n}\nexport { styles as CardStyles };\n"],"mappings":";;;AAeA,SAAgB,KAAK,EAAE,UAAU,aAAa,WAAW,UAAU,GAAG,SAAoB;AACxF,QACE,oBAAC,OAAD;EACE,WAAW;GAACA,oBAAO;GAAM,WAAWA,oBAAO,mBAAmB;GAAI,cAAcA,oBAAO,sBAAsB;GAAI,aAAa;GAAG,CAC9H,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;EAEH;EACG,CAAA;;AAIV,SAAgB,WAAW,EAAE,SAAS,aAAa,WAAW,UAAU,GAAG,SAA0B;AACnG,QACE,qBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;YAA3D;GACG,WAAW,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAQ;IAAe,CAAA;GAC1D,eAAe,oBAAC,QAAD;IAAM,WAAWA,oBAAO;cAAc;IAAmB,CAAA;GACxE;GACG;;;AAIV,SAAgB,SAAS,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC3F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,KAAK,GAAG,aAAa;EAAM,GAAI;EACtD;EACG,CAAA;;AAIV,SAAgB,WAAW,EAAE,WAAW,UAAU,GAAG,SAA0C;AAC7F,QACE,oBAAC,OAAD;EAAK,WAAW,GAAGA,oBAAO,OAAO,GAAG,aAAa;EAAM,GAAI;EACxD;EACG,CAAA"}

package/dist/card/card.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/card/card.module.js

@@ -0,0 +1,15 @@
+//#region src/card/card.module.css
+var card_module_default = {
+	"body": "body_mD1LSW",
+	"description": "description_mD1LSW",
+	"footer": "footer_mD1LSW",
+	"header": "header_mD1LSW",
+	"root": "root_mD1LSW",
+	"root-elevated": "root-elevated_mD1LSW",
+	"root-interactive": "root-interactive_mD1LSW",
+	"title": "title_mD1LSW"
+};
+//#endregion
+export { card_module_default as default };
+
+//# sourceMappingURL=card.module.js.map

package/dist/card/card.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.module.js","names":[],"sources":["../../src/card/card.module.css"],"sourcesContent":["@layer components {\n  .root {\n    background-color: var(--color-surface-1);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-xl);\n    overflow: hidden;\n  }\n  .root-elevated {\n    box-shadow: var(--shadow-sm);\n  }\n  .root-interactive {\n    cursor: pointer;\n    transition:\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-standard);\n  }\n  .root-interactive:hover {\n    border-color: var(--color-accent);\n    box-shadow: var(--shadow-md);\n  }\n  .root-interactive:active {\n    transform: scale(0.995);\n  }\n  .header {\n    padding: var(--space-4) var(--space-5);\n    border-bottom: var(--border-width-base) solid var(--color-line-subtle);\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5);\n  }\n  .title {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-md);\n    font-weight: var(--font-weight-semibold);\n    color: var(--color-primary);\n    line-height: var(--line-height-tight);\n    letter-spacing: var(--letter-spacing-tight);\n  }\n  .description {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-normal);\n  }\n  .body {\n    padding: var(--space-4) var(--space-5);\n  }\n  .footer {\n    padding: var(--space-3) var(--space-5);\n    border-top: var(--border-width-base) solid var(--color-line-subtle);\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n  }\n}\n"],"mappings":";AAgBA,IAAA,sBAAE;CAAA,QAAA;CAAA,eAAA;CAAA,UAAA;CAAA,UAAA;CAAA,QAAA;CAAA,iBAAA;CAAA,oBAAA;CAAA,SAAA;CAAA"}

package/dist/card/index.d.ts

@@ -0,0 +1,2 @@
+import { Card, CardBody, CardFooter, CardHeader, CardHeaderProps, CardProps, styles } from "./card.js";
+export { Card, CardBody, CardFooter, CardHeader, type CardHeaderProps, type CardProps, styles as CardStyles };

package/dist/card/index.js

@@ -0,0 +1,3 @@
+import card_module_default from "./card.module.js";
+import { Card, CardBody, CardFooter, CardHeader } from "./card.js";
+export { Card, CardBody, CardFooter, CardHeader, card_module_default as CardStyles };

package/dist/checkbox/checkbox.css

@@ -0,0 +1,72 @@
+@layer components {
+  .root_J4At5G {
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+  }
+
+  .root_J4At5G[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+  }
+
+  .indicator_J4At5G {
+    border-radius: var(--radius-sm);
+    border: var(--border-width-base) solid var(--color-line-strong);
+    background-color: var(--color-surface-1);
+    width: 16px;
+    height: 16px;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+
+  .indicator_J4At5G:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-color: var(--color-accent);
+  }
+
+  .indicator_J4At5G:hover:not([data-disabled]) {
+    border-color: var(--color-accent);
+  }
+
+  .indicator_J4At5G[data-checked], .indicator_J4At5G[data-indeterminate] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .indicator_J4At5G[data-checked]:hover, .indicator_J4At5G[data-indeterminate]:hover {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  .icon_J4At5G {
+    width: 10px;
+    height: 10px;
+    color: var(--color-on-accent);
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-spring);
+    transform: scale(.9);
+  }
+
+  .indicator_J4At5G[data-checked] .icon_J4At5G, .indicator_J4At5G[data-indeterminate] .icon_J4At5G {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .label_J4At5G {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
+  }
+}

package/dist/checkbox/checkbox.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./checkbox.module.css";
+
+//#region src/checkbox/checkbox.d.ts
+interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  value?: string;
+  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */
+  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+declare function Checkbox({
+  children,
+  id,
+  className,
+  onCheckedChange,
+  ...props
+}: CheckboxProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Checkbox, CheckboxProps, styles };
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;;;UAKiB,aAAA;EACf,OAAA;EACA,cAAA;EACA,aAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,KAAA;EALA;EAOA,eAAA,IAAmB,OAAA,WAAkB,YAAA;EACrC,QAAA,GAAW,SAAA;EACX,EAAA;EACA,SAAA;AAAA;AAAA,iBAGc,QAAA,CAAA;EAAW,QAAA;EAAU,EAAA;EAAI,SAAA;EAAW,eAAA;EAAA,GAAoB;AAAA,GAAS,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/checkbox/checkbox.js

@@ -0,0 +1,40 @@
+import checkbox_module_default from "./checkbox.module.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/checkbox/checkbox.tsx
+function Checkbox$1({ children, id, className, onCheckedChange, ...props }) {
+	const checkboxId = id ?? useId();
+	return /* @__PURE__ */ jsxs("label", {
+		className: `${checkbox_module_default.root} ${className ?? ""}`,
+		htmlFor: checkboxId,
+		children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+			id: checkboxId,
+			className: checkbox_module_default.indicator,
+			onCheckedChange,
+			...props,
+			children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+				className: checkbox_module_default.icon,
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 10 10",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M1.5 5L3.5 7.5L8.5 2.5",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
+				})
+			})
+		}), children && /* @__PURE__ */ jsx("span", {
+			className: checkbox_module_default.label,
+			children
+		})]
+	});
+}
+//#endregion
+export { Checkbox$1 as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["Checkbox","styles","BaseCheckbox"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport styles from \"./checkbox.module.css\";\n\nexport interface CheckboxProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  required?: boolean;\n  name?: string;\n  value?: string;\n  /** Called when checked state changes. `eventDetails` is the base-ui event details object. */\n  onCheckedChange?: (checked: boolean, eventDetails: unknown) => void;\n  children?: ReactNode;\n  id?: string;\n  className?: string;\n}\n\nexport function Checkbox({ children, id, className, onCheckedChange, ...props }: CheckboxProps) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const checkboxId = id ?? useId();\n\n  return (\n    <label className={`${styles.root} ${className ?? \"\"}`} htmlFor={checkboxId}>\n      <BaseCheckbox.Root id={checkboxId} className={styles.indicator} onCheckedChange={onCheckedChange as never} {...props}>\n        <BaseCheckbox.Indicator className={styles.icon}>\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        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n      {children && <span className={styles.label}>{children}</span>}\n    </label>\n  );\n}\nexport { styles as CheckboxStyles };\n"],"mappings":";;;;;AAoBA,SAAgBA,WAAS,EAAE,UAAU,IAAI,WAAW,iBAAiB,GAAG,SAAwB;CAE9F,MAAM,aAAa,MAAM,OAAO;AAEhC,QACE,qBAAC,SAAD;EAAO,WAAW,GAAGC,wBAAO,KAAK,GAAG,aAAa;EAAM,SAAS;YAAhE,CACE,oBAACC,SAAa,MAAd;GAAmB,IAAI;GAAY,WAAWD,wBAAO;GAA4B;GAA0B,GAAI;aAC7G,oBAACC,SAAa,WAAd;IAAwB,WAAWD,wBAAO;cACxC,oBAAC,OAAD;KAAK,SAAQ;KAAY,MAAK;KAAO,OAAM;eACzC,oBAAC,QAAD;MAAM,GAAE;MAAyB,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACpH,CAAA;IACiB,CAAA;GACP,CAAA,EACnB,YAAY,oBAAC,QAAD;GAAM,WAAWA,wBAAO;GAAQ;GAAgB,CAAA,CACvD"}

package/dist/checkbox/checkbox.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/checkbox/checkbox.module.js

@@ -0,0 +1,11 @@
+//#region src/checkbox/checkbox.module.css
+var checkbox_module_default = {
+	"icon": "icon_J4At5G",
+	"indicator": "indicator_J4At5G",
+	"label": "label_J4At5G",
+	"root": "root_J4At5G"
+};
+//#endregion
+export { checkbox_module_default as default };
+
+//# sourceMappingURL=checkbox.module.js.map

package/dist/checkbox/checkbox.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.module.js","names":[],"sources":["../../src/checkbox/checkbox.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    cursor: pointer;\n    user-select: none;\n  }\n  .root[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .indicator {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    border-radius: var(--radius-sm);\n    border: var(--border-width-base) solid var(--color-line-strong);\n    background-color: var(--color-surface-1);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-color var(--duration-fast) var(--easing-standard),\n      box-shadow var(--duration-fast) var(--easing-standard);\n    outline: none;\n    position: relative;\n  }\n  .indicator:focus-visible {\n    box-shadow: var(--shadow-focus);\n    border-color: var(--color-accent);\n  }\n  .indicator:hover:not([data-disabled]) {\n    border-color: var(--color-accent);\n  }\n  .indicator[data-checked],\n  .indicator[data-indeterminate] {\n    background-color: var(--color-accent);\n    border-color: var(--color-accent);\n  }\n  .indicator[data-checked]:hover,\n  .indicator[data-indeterminate]:hover {\n    background-color: var(--color-accent-hover);\n    border-color: var(--color-accent-hover);\n  }\n  /* Checkmark SVG */\n  .icon {\n    width: 10px;\n    height: 10px;\n    color: var(--color-on-accent);\n    opacity: 0;\n    transform: scale(0.9);\n    transition:\n      opacity var(--duration-fast) var(--easing-standard),\n      transform var(--duration-fast) var(--easing-spring);\n  }\n  .indicator[data-checked] .icon,\n  .indicator[data-indeterminate] .icon {\n    opacity: 1;\n    transform: scale(1);\n  }\n  .label {\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-primary);\n    line-height: var(--line-height-normal);\n  }\n}\n"],"mappings":";AAQA,IAAA,0BAAa;CAAA,QAAU;CAAA,aAAA;CAAA,SAAA;CAAA,QAAA;CAAA"}

package/dist/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox, CheckboxProps, styles } from "./checkbox.js";
+import { CheckboxIndicator, CheckboxIndicatorProps, CheckboxRoot, CheckboxRootProps } from "./parts.js";
+export { Checkbox, CheckboxIndicator, type CheckboxIndicatorProps, type CheckboxProps, CheckboxRoot, type CheckboxRootProps, styles as CheckboxStyles };

package/dist/checkbox/index.js

@@ -0,0 +1,4 @@
+import checkbox_module_default from "./checkbox.module.js";
+import { Checkbox } from "./checkbox.js";
+import { CheckboxIndicator, CheckboxRoot } from "./parts.js";
+export { Checkbox, CheckboxIndicator, CheckboxRoot, checkbox_module_default as CheckboxStyles };

package/dist/checkbox/parts.d.ts

@@ -0,0 +1,20 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+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;
+  /** Custom icon rendered inside the indicator. Defaults to an SVG checkmark. */
+  children?: ReactNode;
+}
+declare const CheckboxRoot: react.ForwardRefExoticComponent<CheckboxRootProps & react.RefAttributes<HTMLElement>>;
+declare const CheckboxIndicator: react.ForwardRefExoticComponent<CheckboxIndicatorProps & react.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { CheckboxIndicator, CheckboxIndicatorProps, CheckboxRoot, CheckboxRootProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +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"}

package/dist/checkbox/parts.js

@@ -0,0 +1,51 @@
+import checkbox_module_default from "./checkbox.module.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/checkbox/parts.tsx
+/**
+* Styled primitives for Checkbox.
+*
+* @example
+* ```tsx
+* import { Checkbox } from '@base-ui/react/checkbox';
+* import { CheckboxRoot, CheckboxIndicator } from '@brijbyte/agentic-ui/checkbox';
+*
+* <label htmlFor="cb">
+*   <CheckboxRoot id="cb" onCheckedChange={...}>
+*     <CheckboxIndicator />
+*   </CheckboxRoot>
+*   Enable notifications
+* </label>
+* ```
+*/
+const CheckboxRoot = forwardRef(function CheckboxRoot({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		ref,
+		className: `${checkbox_module_default.indicator} ${className ?? ""}`,
+		...props
+	});
+});
+const CheckboxIndicator = forwardRef(function CheckboxIndicator({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		ref,
+		className: `${checkbox_module_default.icon} ${className ?? ""}`,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 10 10",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M1.5 5L3.5 7.5L8.5 2.5",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+});
+//#endregion
+export { CheckboxIndicator, CheckboxRoot };
+
+//# sourceMappingURL=parts.js.map

package/dist/checkbox/parts.js.map

@@ -0,0 +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"}

package/dist/collapsible/collapsible.css

@@ -0,0 +1,88 @@
+@layer components {
+  .root_rWN60G {
+    flex-direction: column;
+    gap: 0;
+    display: flex;
+  }
+
+  .trigger_rWN60G {
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+    background: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    text-align: left;
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-bottom-left-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
+      border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
+      border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);
+    outline: none;
+    display: flex;
+  }
+
+  .trigger_rWN60G[data-panel-open] {
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-bottom-left-radius var(--duration-normal) var(--easing-standard),
+      border-bottom-right-radius var(--duration-normal) var(--easing-standard),
+      border-bottom-color var(--duration-normal) var(--easing-standard);
+    border-bottom-color: #0000;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .trigger_rWN60G:hover {
+    background-color: var(--color-hover);
+  }
+
+  .trigger_rWN60G:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .trigger_rWN60G[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+  }
+
+  .trigger-icon_rWN60G {
+    color: var(--color-tertiary);
+    transition: transform var(--duration-normal) var(--easing-standard);
+    flex-shrink: 0;
+  }
+
+  .trigger_rWN60G[data-panel-open] .trigger-icon_rWN60G {
+    transform: rotate(90deg);
+  }
+
+  .panel_rWN60G {
+    height: var(--collapsible-panel-height);
+    transition: height var(--duration-normal) var(--easing-standard);
+    overflow: hidden;
+  }
+
+  .panel_rWN60G[hidden]:not([hidden="until-found"]) {
+    display: none;
+  }
+
+  .panel_rWN60G[data-starting-style], .panel_rWN60G[data-ending-style] {
+    height: 0;
+  }
+
+  .panel-content_rWN60G {
+    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+    background: var(--color-elevated);
+    border-top: none;
+  }
+}

package/dist/collapsible/collapsible.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import styles from "./collapsible.module.css";
+
+//#region src/collapsible/collapsible.d.ts
+interface CollapsibleProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+}
+declare function Collapsible({
+  trigger,
+  children,
+  className,
+  onOpenChange,
+  ...props
+}: CollapsibleProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Collapsible, CollapsibleProps, styles };
+//# sourceMappingURL=collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","names":[],"sources":["../../src/collapsible/collapsible.tsx"],"mappings":";;;;;UAIiB,gBAAA;EACf,OAAA,EAAS,SAAA;EACT,QAAA,EAAU,SAAA;EACV,WAAA;EACA,IAAA;EACA,YAAA,IAAgB,IAAA;EAChB,QAAA;EACA,SAAA;AAAA;AAAA,iBAWc,WAAA,CAAA;EAAc,OAAA;EAAS,QAAA;EAAU,SAAA;EAAW,YAAA;EAAA,GAAiB;AAAA,GAAS,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/collapsible/collapsible.js

@@ -0,0 +1,44 @@
+import collapsible_module_default from "./collapsible.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/collapsible/collapsible.tsx
+function ChevronIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		fill: "none",
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M3.5 9L7.5 5L3.5 1",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function Collapsible$1({ trigger, children, className, onOpenChange, ...props }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		className: `${collapsible_module_default.root} ${className ?? ""}`,
+		onOpenChange,
+		...props,
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: collapsible_module_default.trigger,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: collapsible_module_default["trigger-icon"],
+				children: /* @__PURE__ */ jsx(ChevronIcon, {})
+			}), trigger]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			className: collapsible_module_default.panel,
+			children: /* @__PURE__ */ jsx("div", {
+				className: collapsible_module_default["panel-content"],
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { Collapsible$1 as Collapsible };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":["Collapsible","BaseCollapsible","styles"],"sources":["../../src/collapsible/collapsible.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport styles from \"./collapsible.module.css\";\n\nexport interface CollapsibleProps {\n  trigger: ReactNode;\n  children: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction ChevronIcon() {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden>\n      <path d=\"M3.5 9L7.5 5L3.5 1\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport function Collapsible({ trigger, children, className, onOpenChange, ...props }: CollapsibleProps) {\n  return (\n    <BaseCollapsible.Root className={`${styles.root} ${className ?? \"\"}`} onOpenChange={onOpenChange as never} {...props}>\n      <BaseCollapsible.Trigger className={styles.trigger}>\n        <span className={styles[\"trigger-icon\"]}>\n          <ChevronIcon />\n        </span>\n        {trigger}\n      </BaseCollapsible.Trigger>\n      <BaseCollapsible.Panel className={styles.panel}>\n        <div className={styles[\"panel-content\"]}>{children}</div>\n      </BaseCollapsible.Panel>\n    </BaseCollapsible.Root>\n  );\n}\nexport { styles as CollapsibleStyles };\n"],"mappings":";;;;AAcA,SAAS,cAAc;AACrB,QACE,oBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,eAAA;YAC1D,oBAAC,QAAD;GAAM,GAAE;GAAqB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EAChH,CAAA;;AAIV,SAAgBA,cAAY,EAAE,SAAS,UAAU,WAAW,cAAc,GAAG,SAA2B;AACtG,QACE,qBAACC,YAAgB,MAAjB;EAAsB,WAAW,GAAGC,2BAAO,KAAK,GAAG,aAAa;EAAoB;EAAuB,GAAI;YAA/G,CACE,qBAACD,YAAgB,SAAjB;GAAyB,WAAWC,2BAAO;aAA3C,CACE,oBAAC,QAAD;IAAM,WAAWA,2BAAO;cACtB,oBAAC,aAAD,EAAe,CAAA;IACV,CAAA,EACN,QACuB;MAC1B,oBAACD,YAAgB,OAAjB;GAAuB,WAAWC,2BAAO;aACvC,oBAAC,OAAD;IAAK,WAAWA,2BAAO;IAAmB;IAAe,CAAA;GACnC,CAAA,CACH"}

package/dist/collapsible/collapsible.module.css.d.ts

@@ -0,0 +1,2 @@
+declare const styles: Record<string, string | undefined>;
+export default styles;

package/dist/collapsible/collapsible.module.js

@@ -0,0 +1,12 @@
+//#region src/collapsible/collapsible.module.css
+var collapsible_module_default = {
+	"panel": "panel_rWN60G",
+	"panel-content": "panel-content_rWN60G",
+	"root": "root_rWN60G",
+	"trigger": "trigger_rWN60G",
+	"trigger-icon": "trigger-icon_rWN60G"
+};
+//#endregion
+export { collapsible_module_default as default };
+
+//# sourceMappingURL=collapsible.module.js.map

package/dist/collapsible/collapsible.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.module.js","names":[],"sources":["../../src/collapsible/collapsible.module.css"],"sourcesContent":["@layer components {\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n  .trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-2) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    font-weight: var(--font-weight-medium);\n    color: var(--color-primary);\n    background: var(--color-surface-1);\n    border: var(--border-width-base) solid var(--color-line);\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    outline: none;\n    text-align: left;\n    user-select: none;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-bottom-left-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),\n      border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),\n      border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);\n  }\n  .trigger[data-panel-open] {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-color: transparent;\n    transition:\n      background-color var(--duration-fast) var(--easing-standard),\n      border-bottom-left-radius var(--duration-normal) var(--easing-standard),\n      border-bottom-right-radius var(--duration-normal) var(--easing-standard),\n      border-bottom-color var(--duration-normal) var(--easing-standard);\n  }\n  .trigger:hover {\n    background-color: var(--color-hover);\n  }\n  .trigger:focus-visible {\n    box-shadow: var(--shadow-focus);\n  }\n  .trigger[data-disabled] {\n    opacity: 0.44;\n    cursor: not-allowed;\n  }\n  .trigger-icon {\n    color: var(--color-tertiary);\n    flex-shrink: 0;\n    transition: transform var(--duration-normal) var(--easing-standard);\n  }\n  .trigger[data-panel-open] .trigger-icon {\n    transform: rotate(90deg);\n  }\n  .panel {\n    height: var(--collapsible-panel-height);\n    overflow: hidden;\n    transition: height var(--duration-normal) var(--easing-standard);\n  }\n  /* hide when not using hidden=\"until-found\" */\n  .panel[hidden]:not([hidden=\"until-found\"]) {\n    display: none;\n  }\n  .panel[data-starting-style],\n  .panel[data-ending-style] {\n    height: 0;\n  }\n  .panel-content {\n    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);\n    font-family: var(--font-mono);\n    font-size: var(--font-size-sm);\n    color: var(--color-secondary);\n    line-height: var(--line-height-relaxed);\n    border: var(--border-width-base) solid var(--color-line);\n    border-top: none;\n    border-radius: 0 0 var(--radius-md) var(--radius-md);\n    background: var(--color-elevated);\n  }\n}\n"],"mappings":";AAUA,IAAA,6BAAa;CAAG,SAAQ;CAAe,iBAAG;CAAA,QAAA;CAAA,WAAA;CAAA,gBAAA;CAAA"}

package/dist/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+import { Collapsible, CollapsibleProps, styles } from "./collapsible.js";
+import { CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./parts.js";
+export { Collapsible, CollapsiblePanel, type CollapsiblePanelProps, type CollapsibleProps, CollapsibleRoot, type CollapsibleRootProps, styles as CollapsibleStyles, CollapsibleTrigger, type CollapsibleTriggerProps };

package/dist/collapsible/index.js

@@ -0,0 +1,4 @@
+import collapsible_module_default from "./collapsible.module.js";
+import { Collapsible } from "./collapsible.js";
+import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./parts.js";
+export { Collapsible, CollapsiblePanel, CollapsibleRoot, collapsible_module_default as CollapsibleStyles, CollapsibleTrigger };

package/dist/collapsible/parts.d.ts

@@ -0,0 +1,23 @@
+import * as react from "react";
+import { ComponentPropsWithoutRef } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+
+//#region src/collapsible/parts.d.ts
+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;
+}
+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>>;
+//#endregion
+export { CollapsiblePanel, CollapsiblePanelProps, CollapsibleRoot, CollapsibleRootProps, CollapsibleTrigger, CollapsibleTriggerProps };
+//# sourceMappingURL=parts.d.ts.map

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

@@ -0,0 +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"}