rivet-ui 0.1.0

package/dist/components/Card/index.js

@@ -0,0 +1,47 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Card/Card.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("rounded-lg border border-kraft/20 bg-surface shadow-sm ring-1 ring-kraft/[0.04]", className),
+  ...props
+}));
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("flex flex-col space-y-1.5 px-6 pt-6", className),
+  ...props
+}));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", {
+  ref,
+  className: cn("text-lg font-semibold leading-none tracking-tight text-kraft", className),
+  ...props
+}));
+CardTitle.displayName = "CardTitle";
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("p-6", className),
+  ...props
+}));
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  className: cn("flex items-center p-6 pt-0", className),
+  ...props
+}));
+CardFooter.displayName = "CardFooter";
+export {
+  CardTitle,
+  CardHeader,
+  CardFooter,
+  CardContent,
+  Card
+};
+export { Card, CardHeader, CardTitle, CardContent, CardFooter };
+
+//# debugId=F0AC122A1C71579F64756E2164756E21

package/dist/components/Card/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Card/Card.tsx"],
+  "sourcesContent": [
+    "import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const Card = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n    <div\n        ref={ref}\n        className={cn(\n            'rounded-lg border border-kraft/20 bg-surface shadow-sm ring-1 ring-kraft/[0.04]',\n            className\n        )}\n        {...props}\n    />\n));\n\nCard.displayName = 'Card';\n\nexport const CardHeader = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n    <div\n        ref={ref}\n        className={cn('flex flex-col space-y-1.5 px-6 pt-6', className)}\n        {...props}\n    />\n));\n\nCardHeader.displayName = 'CardHeader';\n\nexport const CardTitle = React.forwardRef<\n    HTMLHeadingElement,\n    React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n    <h3\n        ref={ref}\n        className={cn(\n            'text-lg font-semibold leading-none tracking-tight text-kraft',\n            className\n        )}\n        {...props}\n    />\n));\n\nCardTitle.displayName = 'CardTitle';\n\nexport const CardContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6', className)} {...props} />\n));\n\nCardContent.displayName = 'CardContent';\n\nexport const CardFooter = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n    <div\n        ref={ref}\n        className={cn('flex items-center p-6 pt-0', className)}\n        {...props}\n    />\n));\n\nCardFooter.displayName = 'CardFooter';\n"
+  ],
+  "mappings": ";;;;;AAAA;;AAGO,IAAM,OAAO,MAAM,WAGxB,GAAG,cAAc,SAAS,wBACxB,IAAC,OAAD;AAAA,EACI;AAAA,EACA,WAAW,GACP,mFACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AAED,KAAK,cAAc;AAEZ,IAAM,aAAa,MAAM,WAG9B,GAAG,cAAc,SAAS,wBACxB,IAAC,OAAD;AAAA,EACI;AAAA,EACA,WAAW,GAAG,uCAAuC,SAAS;AAAA,KAC1D;AAAA,CACR,CACH;AAED,WAAW,cAAc;AAElB,IAAM,YAAY,MAAM,WAG7B,GAAG,cAAc,SAAS,wBACxB,IAAC,MAAD;AAAA,EACI;AAAA,EACA,WAAW,GACP,gEACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AAED,UAAU,cAAc;AAEjB,IAAM,cAAc,MAAM,WAG/B,GAAG,cAAc,SAAS,wBACxB,IAAC,OAAD;AAAA,EAAK;AAAA,EAAU,WAAW,GAAG,OAAO,SAAS;AAAA,KAAO;AAAA,CAAO,CAC9D;AAED,YAAY,cAAc;AAEnB,IAAM,aAAa,MAAM,WAG9B,GAAG,cAAc,SAAS,wBACxB,IAAC,OAAD;AAAA,EACI;AAAA,EACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,KACjD;AAAA,CACR,CACH;AAED,WAAW,cAAc;",
+  "debugId": "F0AC122A1C71579F64756E2164756E21",
+  "names": []
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    indeterminate?: boolean;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: "boolean";
+        };
+        defaultChecked: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Group: Story;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxRoot, CheckboxIndicator, CheckboxGroup } from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1,68 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Checkbox/Checkbox.tsx
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+function CheckIcon(props) {
+  return /* @__PURE__ */ jsx("svg", {
+    fill: "currentcolor",
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    "aria-hidden": true,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"
+    })
+  });
+}
+function MinusIcon(props) {
+  return /* @__PURE__ */ jsx("svg", {
+    fill: "none",
+    width: "10",
+    height: "10",
+    viewBox: "0 0 24 24",
+    stroke: "currentcolor",
+    strokeWidth: "3",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    ...props,
+    children: /* @__PURE__ */ jsx("line", {
+      x1: "3",
+      y1: "12",
+      x2: "21",
+      y2: "12"
+    })
+  });
+}
+var CheckboxGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCheckboxGroup, {
+  ref,
+  className: cn("flex flex-col gap-2", className),
+  ...props
+}));
+CheckboxGroup.displayName = "CheckboxGroup";
+var CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCheckbox.Root, {
+  ref,
+  className: cn("flex size-5 shrink-0 items-center justify-center rounded-sm border border-kraft/30 bg-surface transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-checked:border-ribbon data-checked:bg-ribbon data-indeterminate:border-ribbon data-indeterminate:bg-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+  ...props
+}));
+CheckboxRoot.displayName = "CheckboxRoot";
+var CheckboxIndicator = React.forwardRef(({ className, children, indeterminate, ...props }, ref) => /* @__PURE__ */ jsx(BaseCheckbox.Indicator, {
+  ref,
+  className: cn("flex text-white data-unchecked:hidden", className),
+  ...props,
+  children: children ?? (indeterminate ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}))
+}));
+CheckboxIndicator.displayName = "CheckboxIndicator";
+export {
+  CheckboxRoot,
+  CheckboxIndicator,
+  CheckboxGroup
+};
+export { CheckboxGroup, CheckboxRoot, CheckboxIndicator };
+
+//# debugId=DBAE3BCD342C1FD364756E2164756E21

package/dist/components/Checkbox/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Checkbox/Checkbox.tsx"],
+  "sourcesContent": [
+    "import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nfunction CheckIcon(props: React.ComponentProps<'svg'>) {\n    return (\n        <svg\n            fill=\"currentcolor\"\n            width=\"10\"\n            height=\"10\"\n            viewBox=\"0 0 10 10\"\n            aria-hidden\n            {...props}\n        >\n            <path d=\"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z\" />\n        </svg>\n    );\n}\n\nfunction MinusIcon(props: React.ComponentProps<'svg'>) {\n    return (\n        <svg\n            fill=\"none\"\n            width=\"10\"\n            height=\"10\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentcolor\"\n            strokeWidth=\"3\"\n            strokeLinecap=\"round\"\n            aria-hidden\n            {...props}\n        >\n            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n        </svg>\n    );\n}\n\nexport const CheckboxGroup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>\n>(({ className, ...props }, ref) => (\n    <BaseCheckboxGroup\n        ref={ref}\n        className={cn('flex flex-col gap-2', className)}\n        {...props}\n    />\n));\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport const CheckboxRoot = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>\n>(({ className, ...props }, ref) => (\n    <BaseCheckbox.Root\n        ref={ref}\n        className={cn(\n            'flex size-5 shrink-0 items-center justify-center rounded-sm border border-kraft/30 bg-surface transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-checked:border-ribbon data-checked:bg-ribbon data-indeterminate:border-ribbon data-indeterminate:bg-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    />\n));\nCheckboxRoot.displayName = 'CheckboxRoot';\n\nexport const CheckboxIndicator = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator> & {\n        indeterminate?: boolean;\n    }\n>(({ className, children, indeterminate, ...props }, ref) => (\n    <BaseCheckbox.Indicator\n        ref={ref}\n        className={cn('flex text-white data-unchecked:hidden', className)}\n        {...props}\n    >\n        {children ?? (indeterminate ? <MinusIcon /> : <CheckIcon />)}\n    </BaseCheckbox.Indicator>\n));\nCheckboxIndicator.displayName = 'CheckboxIndicator';\n"
+  ],
+  "mappings": ";;;;;AAAA,qBAAS;AACT,0BAAS;AACT;;AAGA,SAAS,SAAS,CAAC,OAAoC;AAAA,EACnD,uBACI,IASE,OATF;AAAA,IACI,MAAK;AAAA,IACL,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,eAAW;AAAA,OACP;AAAA,IANR,0BAQI,IAAC,QAAD;AAAA,MAAM,GAAE;AAAA,KAAkX;AAAA,GAC5X;AAAA;AAIV,SAAS,SAAS,CAAC,OAAoC;AAAA,EACnD,uBACI,IAYE,OAZF;AAAA,IACI,MAAK;AAAA,IACL,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,eAAW;AAAA,OACP;AAAA,IATR,0BAWI,IAAC,QAAD;AAAA,MAAM,IAAG;AAAA,MAAI,IAAG;AAAA,MAAK,IAAG;AAAA,MAAK,IAAG;AAAA,KAAK;AAAA,GACvC;AAAA;AAIH,IAAM,gBAAgB,MAAM,WAGjC,GAAG,cAAc,SAAS,wBACxB,IAAC,mBAAD;AAAA,EACI;AAAA,EACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,KAC1C;AAAA,CACR,CACH;AACD,cAAc,cAAc;AAErB,IAAM,eAAe,MAAM,WAGhC,GAAG,cAAc,SAAS,wBACxB,IAAC,aAAa,MAAd;AAAA,EACI;AAAA,EACA,WAAW,GACP,mYACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,aAAa,cAAc;AAEpB,IAAM,oBAAoB,MAAM,WAKrC,GAAG,WAAW,UAAU,kBAAkB,SAAS,wBACjD,IAME,aAAa,WANf;AAAA,EACI;AAAA,EACA,WAAW,GAAG,yCAAyC,SAAS;AAAA,KAC5D;AAAA,EAHR,UAKK,aAAa,gCAAgB,IAAC,WAAD,EAAW,oBAAK,IAAC,WAAD,EAAW;AAAA,CAC3D,CACL;AACD,kBAAkB,cAAc;",
+  "debugId": "DBAE3BCD342C1FD364756E2164756E21",
+  "names": []
+}

package/dist/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CollapsiblePanel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Collapsible/Collapsible.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const DefaultOpen: Story;
+export declare const Disabled: Story;

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1 @@
+export { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel } from './Collapsible';

package/dist/components/Collapsible/index.js

@@ -0,0 +1,34 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Collapsible/Collapsible.tsx
+import * as React from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { jsx } from "react/jsx-runtime";
+var CollapsibleRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible.Root, {
+  ref,
+  className: cn("", className),
+  ...props
+}));
+CollapsibleRoot.displayName = "CollapsibleRoot";
+var CollapsibleTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible.Trigger, {
+  ref,
+  className: cn("inline-flex items-center justify-center rounded-md border border-kraft/25 bg-surface px-4 py-2 text-sm font-medium text-kraft transition-colors select-none hover:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-disabled:pointer-events-none data-disabled:opacity-40", className),
+  ...props
+}));
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsiblePanel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Collapsible.Panel, {
+  ref,
+  className: cn("[&[hidden]:not([hidden=until-found])]:hidden h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0", className),
+  ...props
+}));
+CollapsiblePanel.displayName = "CollapsiblePanel";
+export {
+  CollapsibleTrigger,
+  CollapsibleRoot,
+  CollapsiblePanel
+};
+export { CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel };
+
+//# debugId=B9678F838E1C01EB64756E2164756E21

package/dist/components/Collapsible/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Collapsible/Collapsible.tsx"],
+  "sourcesContent": [
+    "import * as React from 'react';\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { cn } from '../../utils/cn';\n\nexport const CollapsibleRoot = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Collapsible.Root>\n>(({ className, ...props }, ref) => (\n    <Collapsible.Root ref={ref} className={cn('', className)} {...props} />\n));\nCollapsibleRoot.displayName = 'CollapsibleRoot';\n\nexport const CollapsibleTrigger = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof Collapsible.Trigger>\n>(({ className, ...props }, ref) => (\n    <Collapsible.Trigger\n        ref={ref}\n        className={cn(\n            'inline-flex items-center justify-center rounded-md border border-kraft/25 bg-surface px-4 py-2 text-sm font-medium text-kraft transition-colors select-none hover:bg-canvas focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-2 data-disabled:pointer-events-none data-disabled:opacity-40',\n            className\n        )}\n        {...props}\n    />\n));\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\nexport const CollapsiblePanel = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof Collapsible.Panel>\n>(({ className, ...props }, ref) => (\n    <Collapsible.Panel\n        ref={ref}\n        className={cn(\n            '[&[hidden]:not([hidden=until-found])]:hidden h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0',\n            className\n        )}\n        {...props}\n    />\n));\nCollapsiblePanel.displayName = 'CollapsiblePanel';\n"
+  ],
+  "mappings": ";;;;;AAAA;AACA;;AAGO,IAAM,kBAAwB,iBAGnC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,MAAb;AAAA,EAAkB;AAAA,EAAU,WAAW,GAAG,IAAI,SAAS;AAAA,KAAO;AAAA,CAAO,CACxE;AACD,gBAAgB,cAAc;AAEvB,IAAM,qBAA2B,iBAGtC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,SAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,gVACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,mBAAmB,cAAc;AAE1B,IAAM,mBAAyB,iBAGpC,GAAG,cAAc,SAAS,wBACxB,IAAC,YAAY,OAAb;AAAA,EACI;AAAA,EACA,WAAW,GACP,4LACA,SACJ;AAAA,KACI;AAAA,CACR,CACH;AACD,iBAAiB,cAAc;",
+  "debugId": "B9678F838E1C01EB64756E2164756E21",
+  "names": []
+}

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,24 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+import React from 'react';
+export declare const ComboboxRoot: typeof BaseCombobox.Root;
+export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxCollection: typeof BaseCombobox.Collection;
+export declare const ComboboxValue: typeof BaseCombobox.Value;
+export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipRemoveProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxPositioner: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompletePopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteItemProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare function ComboboxItemText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function ComboboxSeparator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxStatus: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Combobox/Combobox.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        [x: string]: any;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithClear: Story;
+export declare const Grouped: Story;

package/dist/components/Combobox/index.d.ts

@@ -0,0 +1 @@
+export { ComboboxRoot, ComboboxPortal, ComboboxGroup, ComboboxCollection, ComboboxValue, ComboboxChips, ComboboxChip, ComboboxChipRemove, ComboboxInput, ComboboxTrigger, ComboboxClear, ComboboxPositioner, ComboboxPopup, ComboboxList, ComboboxItem, ComboboxItemIndicator, ComboboxItemText, ComboboxEmpty, ComboboxSeparator, ComboboxGroupLabel, ComboboxStatus, ComboboxIcon } from './Combobox';

package/dist/components/Combobox/index.js

@@ -0,0 +1,162 @@
+import {
+  cn
+} from "../../utils/cn.js";
+
+// src/components/Combobox/Combobox.tsx
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ComboboxRoot = BaseCombobox.Root;
+var ComboboxPortal = BaseCombobox.Portal;
+var ComboboxGroup = BaseCombobox.Group;
+var ComboboxCollection = BaseCombobox.Collection;
+var ComboboxValue = BaseCombobox.Value;
+var ComboboxChips = BaseCombobox.Chips;
+var ComboboxChip = BaseCombobox.Chip;
+var ComboboxChipRemove = BaseCombobox.ChipRemove;
+var ComboboxInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Input, {
+  ref,
+  className: cn("flex h-10 w-full rounded-lg border border-kraft/25 bg-surface px-3.5 text-base text-kraft font-normal transition-colors placeholder:text-kraft/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+  ...props
+}));
+ComboboxInput.displayName = "ComboboxInput";
+var ComboboxTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Trigger, {
+  ref,
+  className: cn("flex h-10 w-7 items-center justify-center rounded-r-md border-0 bg-transparent p-0 text-kraft/60 transition-colors hover:not-data-disabled:text-kraft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1 data-disabled:opacity-50", className),
+  ...props
+}));
+ComboboxTrigger.displayName = "ComboboxTrigger";
+var ComboboxClear = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Clear, {
+  ref,
+  className: cn("flex h-10 w-7 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-kraft/50 transition-colors hover:not-data-disabled:text-spool focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1", className),
+  ...props
+}));
+ComboboxClear.displayName = "ComboboxClear";
+var ComboboxPositioner = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Positioner, {
+  ref,
+  className: cn("z-50 outline-none", className),
+  sideOffset: 4,
+  ...props
+}));
+ComboboxPositioner.displayName = "ComboboxPositioner";
+var ComboboxPopup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Popup, {
+  ref,
+  className: cn("w-(--anchor-width) max-h-[min(var(--available-height),22rem)] max-w-(--available-width) overflow-y-auto scroll-py-2 overscroll-contain rounded-lg border border-kraft/15 bg-surface py-1.5 shadow-lg shadow-kraft/10 origin-(--transform-origin) transition-[transform,scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0", className),
+  ...props
+}));
+ComboboxPopup.displayName = "ComboboxPopup";
+var ComboboxList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.List, {
+  ref,
+  className: cn("outline-none data-empty:p-0", className),
+  ...props
+}));
+ComboboxList.displayName = "ComboboxList";
+var ComboboxItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Item, {
+  ref,
+  className: cn("relative grid cursor-default select-none grid-cols-[0.875rem_1fr] items-center gap-2 px-3 py-2 text-sm text-kraft outline-none data-disabled:pointer-events-none data-disabled:opacity-50", 'data-highlighted:before:absolute data-highlighted:before:inset-x-1.5 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-lg data-highlighted:before:bg-kraft data-highlighted:before:content-[""] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white', className),
+  ...props
+}));
+ComboboxItem.displayName = "ComboboxItem";
+var ComboboxItemIndicator = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.ItemIndicator, {
+  ref,
+  className: cn("col-start-1 flex items-center justify-center text-mustard data-highlighted:text-white", className),
+  ...props,
+  children: children ?? /* @__PURE__ */ jsx("svg", {
+    fill: "currentColor",
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"
+    })
+  })
+}));
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+function ComboboxItemText({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn("col-start-2", className),
+    ...props
+  });
+}
+var ComboboxEmpty = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Empty, {
+  ref,
+  className: cn("px-4 py-3 text-sm text-kraft/60 italic empty:m-0 empty:p-0", className),
+  ...props
+}));
+ComboboxEmpty.displayName = "ComboboxEmpty";
+function ComboboxSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "separator",
+    className: cn("my-1 mx-2 h-px bg-kraft/10", className),
+    ...props
+  });
+}
+var ComboboxGroupLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.GroupLabel, {
+  ref,
+  className: cn("sticky top-0 z-1 bg-surface px-3 pb-1 pt-2.5 text-[0.65rem] font-semibold uppercase tracking-widest text-kraft/50", className),
+  ...props
+}));
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+var ComboboxStatus = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Status, {
+  ref,
+  className: cn("flex items-center gap-2 px-3 py-1.5 text-sm text-kraft/60 empty:hidden", className),
+  ...props
+}));
+ComboboxStatus.displayName = "ComboboxStatus";
+var ComboboxIcon = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(BaseCombobox.Icon, {
+  ref,
+  className: cn("flex shrink-0 text-kraft/60", className),
+  ...props,
+  children: children ?? /* @__PURE__ */ jsxs("svg", {
+    width: "8",
+    height: "12",
+    viewBox: "0 0 8 12",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("path", {
+        d: "M0.5 4.5L4 1.5L7.5 4.5"
+      }),
+      /* @__PURE__ */ jsx("path", {
+        d: "M0.5 7.5L4 10.5L7.5 7.5"
+      })
+    ]
+  })
+}));
+ComboboxIcon.displayName = "ComboboxIcon";
+export {
+  ComboboxValue,
+  ComboboxTrigger,
+  ComboboxStatus,
+  ComboboxSeparator,
+  ComboboxRoot,
+  ComboboxPositioner,
+  ComboboxPortal,
+  ComboboxPopup,
+  ComboboxList,
+  ComboboxItemText,
+  ComboboxItemIndicator,
+  ComboboxItem,
+  ComboboxInput,
+  ComboboxIcon,
+  ComboboxGroupLabel,
+  ComboboxGroup,
+  ComboboxEmpty,
+  ComboboxCollection,
+  ComboboxClear,
+  ComboboxChips,
+  ComboboxChipRemove,
+  ComboboxChip
+};
+export { ComboboxRoot, ComboboxPortal, ComboboxGroup, ComboboxCollection, ComboboxValue, ComboboxChips, ComboboxChip, ComboboxChipRemove, ComboboxInput, ComboboxTrigger, ComboboxClear, ComboboxPositioner, ComboboxPopup, ComboboxList, ComboboxItem, ComboboxItemIndicator, ComboboxItemText, ComboboxEmpty, ComboboxSeparator, ComboboxGroupLabel, ComboboxStatus, ComboboxIcon };
+
+//# debugId=54E65CFF266C87D164756E2164756E21

package/dist/components/Combobox/index.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/Combobox/Combobox.tsx"],
+  "sourcesContent": [
+    "import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const ComboboxRoot = BaseCombobox.Root;\nexport const ComboboxPortal = BaseCombobox.Portal;\nexport const ComboboxGroup = BaseCombobox.Group;\nexport const ComboboxCollection = BaseCombobox.Collection;\nexport const ComboboxValue = BaseCombobox.Value;\nexport const ComboboxChips = BaseCombobox.Chips;\nexport const ComboboxChip = BaseCombobox.Chip;\nexport const ComboboxChipRemove = BaseCombobox.ChipRemove;\n\nexport const ComboboxInput = React.forwardRef<\n    HTMLInputElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Input>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Input\n        ref={ref}\n        className={cn(\n            'flex h-10 w-full rounded-lg border border-kraft/25 bg-surface px-3.5 text-base text-kraft font-normal transition-colors placeholder:text-kraft/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ribbon data-disabled:cursor-not-allowed data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport const ComboboxTrigger = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Trigger>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Trigger\n        ref={ref}\n        className={cn(\n            'flex h-10 w-7 items-center justify-center rounded-r-md border-0 bg-transparent p-0 text-kraft/60 transition-colors hover:not-data-disabled:text-kraft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1 data-disabled:opacity-50',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxTrigger.displayName = 'ComboboxTrigger';\n\nexport const ComboboxClear = React.forwardRef<\n    HTMLButtonElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Clear>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Clear\n        ref={ref}\n        className={cn(\n            'flex h-10 w-7 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-kraft/50 transition-colors hover:not-data-disabled:text-spool focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ribbon focus-visible:ring-offset-1',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxClear.displayName = 'ComboboxClear';\n\nexport const ComboboxPositioner = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Positioner\n        ref={ref}\n        className={cn('z-50 outline-none', className)}\n        sideOffset={4}\n        {...props}\n    />\n));\nComboboxPositioner.displayName = 'ComboboxPositioner';\n\nexport const ComboboxPopup = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Popup\n        ref={ref}\n        className={cn(\n            'w-(--anchor-width) max-h-[min(var(--available-height),22rem)] max-w-(--available-width) overflow-y-auto scroll-py-2 overscroll-contain rounded-lg border border-kraft/15 bg-surface py-1.5 shadow-lg shadow-kraft/10 origin-(--transform-origin) transition-[transform,scale,opacity] duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxPopup.displayName = 'ComboboxPopup';\n\nexport const ComboboxList = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.List>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.List\n        ref={ref}\n        className={cn('outline-none data-empty:p-0', className)}\n        {...props}\n    />\n));\nComboboxList.displayName = 'ComboboxList';\n\nexport const ComboboxItem = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Item>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Item\n        ref={ref}\n        className={cn(\n            'relative grid cursor-default select-none grid-cols-[0.875rem_1fr] items-center gap-2 px-3 py-2 text-sm text-kraft outline-none data-disabled:pointer-events-none data-disabled:opacity-50',\n            // Highlighted: warm kraft background\n            'data-highlighted:before:absolute data-highlighted:before:inset-x-1.5 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-lg data-highlighted:before:bg-kraft data-highlighted:before:content-[\"\"] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nexport const ComboboxItemIndicator = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.ItemIndicator>\n>(({ className, children, ...props }, ref) => (\n    <BaseCombobox.ItemIndicator\n        ref={ref}\n        className={cn(\n            'col-start-1 flex items-center justify-center text-mustard data-highlighted:text-white',\n            className\n        )}\n        {...props}\n    >\n        {children ?? (\n            <svg\n                fill=\"currentColor\"\n                width=\"10\"\n                height=\"10\"\n                viewBox=\"0 0 10 10\"\n                aria-hidden\n            >\n                <path d=\"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z\" />\n            </svg>\n        )}\n    </BaseCombobox.ItemIndicator>\n));\nComboboxItemIndicator.displayName = 'ComboboxItemIndicator';\n\nexport function ComboboxItemText({\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n    return <div className={cn('col-start-2', className)} {...props} />;\n}\n\nexport const ComboboxEmpty = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Empty\n        ref={ref}\n        className={cn(\n            'px-4 py-3 text-sm text-kraft/60 italic empty:m-0 empty:p-0',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nexport function ComboboxSeparator({\n    className,\n    ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n    return (\n        <div\n            role=\"separator\"\n            className={cn('my-1 mx-2 h-px bg-kraft/10', className)}\n            {...props}\n        />\n    );\n}\n\nexport const ComboboxGroupLabel = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.GroupLabel\n        ref={ref}\n        className={cn(\n            'sticky top-0 z-1 bg-surface px-3 pb-1 pt-2.5 text-[0.65rem] font-semibold uppercase tracking-widest text-kraft/50',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport const ComboboxStatus = React.forwardRef<\n    HTMLDivElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Status>\n>(({ className, ...props }, ref) => (\n    <BaseCombobox.Status\n        ref={ref}\n        className={cn(\n            'flex items-center gap-2 px-3 py-1.5 text-sm text-kraft/60 empty:hidden',\n            className\n        )}\n        {...props}\n    />\n));\nComboboxStatus.displayName = 'ComboboxStatus';\n\nexport const ComboboxIcon = React.forwardRef<\n    HTMLSpanElement,\n    React.ComponentPropsWithoutRef<typeof BaseCombobox.Icon>\n>(({ className, children, ...props }, ref) => (\n    <BaseCombobox.Icon\n        ref={ref}\n        className={cn('flex shrink-0 text-kraft/60', className)}\n        {...props}\n    >\n        {children ?? (\n            <svg\n                width=\"8\"\n                height=\"12\"\n                viewBox=\"0 0 8 12\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.5\"\n                aria-hidden\n            >\n                <path d=\"M0.5 4.5L4 1.5L7.5 4.5\" />\n                <path d=\"M0.5 7.5L4 10.5L7.5 7.5\" />\n            </svg>\n        )}\n    </BaseCombobox.Icon>\n));\nComboboxIcon.displayName = 'ComboboxIcon';\n"
+  ],
+  "mappings": "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",
+  "debugId": "54E65CFF266C87D164756E2164756E21",
+  "names": []
+}

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export interface ConfirmDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Called when the confirm button is clicked (dialog closes automatically). */
+    onConfirm?: () => void;
+    /** Called when the cancel button or backdrop is clicked. */
+    onCancel?: () => void;
+    /**
+     * Visual tone of the confirm button.
+     * @default 'default'
+     */
+    variant?: 'default' | 'destructive';
+    /** Element that opens the dialog when clicked. Omit for controlled usage. */
+    trigger?: React.ReactNode;
+}
+export declare function ConfirmDialog({ open, defaultOpen, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, variant, trigger }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfirmDialog/ConfirmDialog.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmDialog } from './ConfirmDialog';
+declare const meta: Meta<typeof ConfirmDialog>;
+export default meta;
+type Story = StoryObj<typeof ConfirmDialog>;
+export declare const Default: Story;
+export declare const Destructive: Story;
+export declare const NoDescription: Story;
+export declare const WithCallbacks: Story;
+export declare const Controlled: Story;

package/dist/components/ConfirmDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';

package/dist/components/ConfirmDialog/index.js

@@ -0,0 +1,85 @@
+import {
+  Button
+} from "../Button/index.js";
+import"../../chunk-fjtwj9cw.js";
+import {
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogViewport
+} from "../AlertDialog/index.js";
+import"../../utils/cn.js";
+
+// src/components/ConfirmDialog/ConfirmDialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  trigger
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogRoot, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    children: [
+      trigger && /* @__PURE__ */ jsx(AlertDialogTrigger, {
+        render: trigger
+      }),
+      /* @__PURE__ */ jsxs(AlertDialogPortal, {
+        children: [
+          /* @__PURE__ */ jsx(AlertDialogBackdrop, {}),
+          /* @__PURE__ */ jsx(AlertDialogViewport, {
+            children: /* @__PURE__ */ jsxs(AlertDialogPopup, {
+              children: [
+                /* @__PURE__ */ jsx(AlertDialogTitle, {
+                  children: title
+                }),
+                description && /* @__PURE__ */ jsx(AlertDialogDescription, {
+                  children: description
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex justify-end gap-3",
+                  children: [
+                    /* @__PURE__ */ jsx(AlertDialogClose, {
+                      onClick: onCancel,
+                      render: /* @__PURE__ */ jsx(Button, {
+                        variant: "outline"
+                      }),
+                      children: cancelLabel
+                    }),
+                    /* @__PURE__ */ jsx(AlertDialogClose, {
+                      onClick: onConfirm,
+                      render: /* @__PURE__ */ jsx(Button, {
+                        variant: variant === "destructive" ? "destructive" : "primary"
+                      }),
+                      children: confirmLabel
+                    })
+                  ]
+                })
+              ]
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+export {
+  ConfirmDialog
+};
+export { ConfirmDialog };
+
+//# debugId=A676AEF740480EFF64756E2164756E21