@refine-studio/ui 0.0.0 → 0.1.0

package/dist/components/button/button.js

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/cn.js";
+import { Spinner } from "../spinner/spinner.js";
+import { Slot } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/button/button.tsx
+var buttonVariants = cva([
+	"relative inline-flex shrink-0 items-center justify-center gap-2 rounded-control border border-transparent font-medium whitespace-nowrap select-none",
+	"transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out-expo",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.15em]",
+	"focus-ring",
+	"active:scale-[0.98]",
+	"disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45"
+], {
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground hover:bg-primary/85",
+			gem: "bg-gem-gradient text-gem-foreground hover:shadow-glow",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-pressed",
+			outline: "border-input bg-background/40 text-foreground hover:border-foreground/25 hover:bg-hover",
+			ghost: "text-foreground hover:bg-hover active:bg-pressed",
+			danger: "bg-danger text-white hover:bg-danger/85",
+			link: "h-auto px-0 text-gem-ink underline-offset-4 hover:underline active:scale-100"
+		},
+		size: {
+			xs: "h-control-xs px-2 text-caption",
+			sm: "h-control-sm px-3 text-body-sm",
+			md: "h-control-md px-4 text-body-sm",
+			lg: "h-control-lg px-6 text-body",
+			xl: "h-control-xl px-8 text-body-lg font-semibold",
+			"icon-sm": "size-control-sm text-body-sm",
+			icon: "size-control-md text-body",
+			"icon-lg": "size-control-lg text-body-lg"
+		}
+	},
+	compoundVariants: [{
+		variant: "link",
+		size: [
+			"xs",
+			"sm",
+			"md",
+			"lg",
+			"xl"
+		],
+		className: "h-auto px-0"
+	}],
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+/**
+* Renders an action; while `loading` it keeps its width, swaps its content for a spinner and refuses clicks.
+*/
+var Button = ({ asChild = false, children, className, disabled, loading = false, size, type = "button", variant, ...props }) => {
+	const Component = asChild ? Slot.Root : "button";
+	return /* @__PURE__ */ jsx(Component, {
+		"aria-busy": loading || void 0,
+		className: cn(buttonVariants({
+			size,
+			variant
+		}), className),
+		"data-slot": "button",
+		disabled: disabled || loading,
+		type: asChild ? void 0 : type,
+		...props,
+		children: loading && !asChild ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "invisible inline-flex items-center gap-2",
+			children
+		}), /* @__PURE__ */ jsx(Spinner, { className: "absolute" })] }) : children
+	});
+};
+export { Button, buttonVariants };
+
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["_Fragment"],"sources":["../../../src/components/button/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Spinner } from '../spinner/spinner';\n\nexport const buttonVariants = cva(\n  [\n    // base\n    'relative inline-flex shrink-0 items-center justify-center gap-2 rounded-control border border-transparent font-medium whitespace-nowrap select-none',\n    'transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out-expo',\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.15em]\",\n    'focus-ring',\n    // active\n    'active:scale-[0.98]',\n    // disabled\n    'disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: 'bg-primary text-primary-foreground hover:bg-primary/85',\n        gem: 'bg-gem-gradient text-gem-foreground hover:shadow-glow',\n        secondary: 'bg-secondary text-secondary-foreground hover:bg-pressed',\n        outline: 'border-input bg-background/40 text-foreground hover:border-foreground/25 hover:bg-hover',\n        ghost: 'text-foreground hover:bg-hover active:bg-pressed',\n        danger: 'bg-danger text-white hover:bg-danger/85',\n        link: 'h-auto px-0 text-gem-ink underline-offset-4 hover:underline active:scale-100',\n      },\n      size: {\n        xs: 'h-control-xs px-2 text-caption',\n        sm: 'h-control-sm px-3 text-body-sm',\n        md: 'h-control-md px-4 text-body-sm',\n        lg: 'h-control-lg px-6 text-body',\n        xl: 'h-control-xl px-8 text-body-lg font-semibold',\n        'icon-sm': 'size-control-sm text-body-sm',\n        icon: 'size-control-md text-body',\n        'icon-lg': 'size-control-lg text-body-lg',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'link',\n        size: ['xs', 'sm', 'md', 'lg', 'xl'],\n        className: 'h-auto px-0',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n);\n\ninterface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n}\n\n/**\n * Renders an action; while `loading` it keeps its width, swaps its content for a spinner and refuses clicks.\n */\nexport const Button = ({\n  asChild = false,\n  children,\n  className,\n  disabled,\n  loading = false,\n  size,\n  type = 'button',\n  variant,\n  ...props\n}: ButtonProps) => {\n  const Component = asChild ? Slot.Root : 'button';\n\n  return (\n    <Component\n      aria-busy={loading || undefined}\n      className={cn(buttonVariants({ size, variant }), className)}\n      data-slot=\"button\"\n      disabled={disabled || loading}\n      type={asChild ? undefined : type}\n      {...props}\n    >\n      {loading && !asChild ? (\n        <>\n          <span className=\"invisible inline-flex items-center gap-2\">{children}</span>\n          <Spinner className=\"absolute\" />\n        </>\n      ) : (\n        children\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,iBAAiB,IAC5B;CAEE;CACA;CACA;CACA;CAEA;CAEA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,KAAK;GACL,WAAW;GACX,SAAS;GACT,OAAO;GACP,QAAQ;GACR,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,WAAW;GACX,MAAM;GACN,WAAW;EACb;CACF;CACA,kBAAkB,CAChB;EACE,SAAS;EACT,MAAM;GAAC;GAAM;GAAM;GAAM;GAAM;EAAI;EACnC,WAAW;CACb,CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;;;;AAUA,IAAa,UAAU,EACrB,UAAU,OACV,UACA,WACA,UACA,UAAU,OACV,MACA,OAAO,UACP,SACA,GAAG,YACc;CACjB,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,oBAAC,WAAD;EACE,aAAW,WAAW,KAAA;EACtB,WAAW,GAAG,eAAe;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAC1D,aAAU;EACV,UAAU,YAAY;EACtB,MAAM,UAAU,KAAA,IAAY;EAC5B,GAAI;EAEH,UAAA,WAAW,CAAC,UACX,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAA4C;EAAe,CAAA,GAC3E,oBAAC,SAAD,EAAS,WAAU,WAAY,CAAA,CAC/B,EAAA,CAAA,IAEF;CAEO,CAAA;AAEf"}

package/dist/components/card/card.d.ts

@@ -0,0 +1,46 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+export declare const cardVariants: (props?: ({
+    variant?: "flat" | "gem" | "default" | "sunken" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CardProps extends ComponentProps<'div'>, VariantProps<typeof cardVariants> {
+    asChild?: boolean;
+}
+/**
+ * A raised surface that groups related content; pass `asChild` with a link and `interactive` to make the whole card clickable.
+ */
+export declare const Card: ({ asChild, className, interactive, variant, ...props }: CardProps) => import("react").JSX.Element;
+/**
+ * Lays out the eyebrow, title, description and an optional trailing action.
+ */
+export declare const CardHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Pins a button or menu to the top-right of the header.
+ */
+export declare const CardAction: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * The mono numbered line above a title, the "01 Services" voice of refine.studio.
+ */
+export declare const CardEyebrow: ({ className, ...props }: ComponentProps<"p">) => import("react").JSX.Element;
+/**
+ * The card's heading.
+ */
+export declare const CardTitle: ({ className, ...props }: ComponentProps<"h3">) => import("react").JSX.Element;
+/**
+ * Supporting copy under the title.
+ */
+export declare const CardDescription: ({ className, ...props }: ComponentProps<"p">) => import("react").JSX.Element;
+/**
+ * The card's main body.
+ */
+export declare const CardContent: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Actions or meta at the bottom edge, separated by a hairline.
+ */
+export declare const CardFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * A full-bleed image or illustration area at the top of the card.
+ */
+export declare const CardMedia: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export {};

package/dist/components/card/card.js

@@ -0,0 +1,124 @@
+import { cn } from "../../lib/cn.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/card/card.tsx
+var cardVariants = cva(["@container/card relative flex flex-col overflow-hidden rounded-card border text-card-foreground"], {
+	variants: {
+		variant: {
+			default: "border-border bg-card shadow-soft",
+			flat: "border-border bg-card",
+			sunken: "border-transparent bg-muted",
+			gem: "border-gem/40 bg-gem-soft"
+		},
+		interactive: {
+			true: [
+				"cursor-pointer transition-[transform,box-shadow,border-color] duration-200 ease-out-expo focus-ring",
+				"hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-float",
+				"active:translate-y-0 active:scale-[0.995]"
+			],
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		interactive: false
+	}
+});
+/**
+* A raised surface that groups related content; pass `asChild` with a link and `interactive` to make the whole card clickable.
+*/
+var Card = ({ asChild = false, className, interactive, variant, ...props }) => {
+	const Component = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn(cardVariants({
+			interactive,
+			variant
+		}), className),
+		"data-slot": "card",
+		...props
+	});
+};
+/**
+* Lays out the eyebrow, title, description and an optional trailing action.
+*/
+var CardHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid auto-rows-min grid-cols-1 items-start gap-x-4 gap-y-1.5 p-6 pb-0 last:pb-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+		"data-slot": "card-header",
+		...props
+	});
+};
+/**
+* Pins a button or menu to the top-right of the header.
+*/
+var CardAction = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("col-start-2 row-span-3 row-start-1 self-start justify-self-end", className),
+		"data-slot": "card-action",
+		...props
+	});
+};
+/**
+* The mono numbered line above a title, the "01 Services" voice of refine.studio.
+*/
+var CardEyebrow = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("eyebrow text-muted-foreground", className),
+		"data-slot": "card-eyebrow",
+		...props
+	});
+};
+/**
+* The card's heading.
+*/
+var CardTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("h3", {
+		className: cn("text-headline-sm text-foreground", className),
+		"data-slot": "card-title",
+		...props
+	});
+};
+/**
+* Supporting copy under the title.
+*/
+var CardDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-body-sm text-pretty text-muted-foreground", className),
+		"data-slot": "card-description",
+		...props
+	});
+};
+/**
+* The card's main body.
+*/
+var CardContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex-1 p-6 text-body-sm", className),
+		"data-slot": "card-content",
+		...props
+	});
+};
+/**
+* Actions or meta at the bottom edge, separated by a hairline.
+*/
+var CardFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-3 border-t px-6 py-4 empty:hidden", className),
+		"data-slot": "card-footer",
+		...props
+	});
+};
+/**
+* A full-bleed image or illustration area at the top of the card.
+*/
+var CardMedia = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative aspect-video overflow-hidden bg-muted *:size-full *:object-cover", className),
+		"data-slot": "card-media",
+		...props
+	});
+};
+export { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardMedia, CardTitle, cardVariants };
+
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nexport const cardVariants = cva(\n  [\n    // base\n    '@container/card relative flex flex-col overflow-hidden rounded-card border text-card-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-card shadow-soft',\n        flat: 'border-border bg-card',\n        sunken: 'border-transparent bg-muted',\n        gem: 'border-gem/40 bg-gem-soft',\n      },\n      interactive: {\n        true: [\n          // base\n          'cursor-pointer transition-[transform,box-shadow,border-color] duration-200 ease-out-expo focus-ring',\n          // hover\n          'hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-float',\n          // active\n          'active:translate-y-0 active:scale-[0.995]',\n        ],\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      interactive: false,\n    },\n  },\n);\n\ninterface CardProps extends ComponentProps<'div'>, VariantProps<typeof cardVariants> {\n  asChild?: boolean;\n}\n\n/**\n * A raised surface that groups related content; pass `asChild` with a link and `interactive` to make the whole card clickable.\n */\nexport const Card = ({ asChild = false, className, interactive, variant, ...props }: CardProps) => {\n  const Component = asChild ? Slot.Root : 'div';\n\n  return <Component className={cn(cardVariants({ interactive, variant }), className)} data-slot=\"card\" {...props} />;\n};\n\n/**\n * Lays out the eyebrow, title, description and an optional trailing action.\n */\nexport const CardHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'grid auto-rows-min grid-cols-1 items-start gap-x-4 gap-y-1.5 p-6 pb-0 last:pb-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]',\n        className,\n      )}\n      data-slot=\"card-header\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Pins a button or menu to the top-right of the header.\n */\nexport const CardAction = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('col-start-2 row-span-3 row-start-1 self-start justify-self-end', className)}\n      data-slot=\"card-action\"\n      {...props}\n    />\n  );\n};\n\n/**\n * The mono numbered line above a title, the \"01 Services\" voice of refine.studio.\n */\nexport const CardEyebrow = ({ className, ...props }: ComponentProps<'p'>) => {\n  return <p className={cn('eyebrow text-muted-foreground', className)} data-slot=\"card-eyebrow\" {...props} />;\n};\n\n/**\n * The card's heading.\n */\nexport const CardTitle = ({ className, ...props }: ComponentProps<'h3'>) => {\n  return <h3 className={cn('text-headline-sm text-foreground', className)} data-slot=\"card-title\" {...props} />;\n};\n\n/**\n * Supporting copy under the title.\n */\nexport const CardDescription = ({ className, ...props }: ComponentProps<'p'>) => {\n  return (\n    <p className={cn('text-body-sm text-pretty text-muted-foreground', className)} data-slot=\"card-description\" {...props} />\n  );\n};\n\n/**\n * The card's main body.\n */\nexport const CardContent = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('flex-1 p-6 text-body-sm', className)} data-slot=\"card-content\" {...props} />;\n};\n\n/**\n * Actions or meta at the bottom edge, separated by a hairline.\n */\nexport const CardFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center gap-3 border-t px-6 py-4 empty:hidden', className)}\n      data-slot=\"card-footer\"\n      {...props}\n    />\n  );\n};\n\n/**\n * A full-bleed image or illustration area at the top of the card.\n */\nexport const CardMedia = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('relative aspect-video overflow-hidden bg-muted *:size-full *:object-cover', className)}\n      data-slot=\"card-media\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,eAAe,IAC1B,CAEE,iGACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,MAAM;GACN,QAAQ;GACR,KAAK;EACP;EACA,aAAa;GACX,MAAM;IAEJ;IAEA;IAEA;GACF;GACA,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,aAAa;CACf;AACF,CACF;;;;AASA,IAAa,QAAQ,EAAE,UAAU,OAAO,WAAW,aAAa,SAAS,GAAG,YAAuB;CACjG,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OAAO,oBAAC,WAAD;EAAW,WAAW,GAAG,aAAa;GAAE;GAAa;EAAQ,CAAC,GAAG,SAAS;EAAG,aAAU;EAAO,GAAI;CAAQ,CAAA;AACnH;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,oIACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,kEAAkE,SAAS;EACzF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAiC;CAC3E,OAAO,oBAAC,KAAD;EAAG,WAAW,GAAG,iCAAiC,SAAS;EAAG,aAAU;EAAe,GAAI;CAAQ,CAAA;AAC5G;;;;AAKA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAkC;CAC1E,OAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,oCAAoC,SAAS;EAAG,aAAU;EAAa,GAAI;CAAQ,CAAA;AAC9G;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAiC;CAC/E,OACE,oBAAC,KAAD;EAAG,WAAW,GAAG,kDAAkD,SAAS;EAAG,aAAU;EAAmB,GAAI;CAAQ,CAAA;AAE5H;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAmC;CAC7E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B,SAAS;EAAG,aAAU;EAAe,GAAI;CAAQ,CAAA;AACxG;;;;AAKA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2DAA2D,SAAS;EAClF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAmC;CAC3E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,6EAA6E,SAAS;EACpG,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,6 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+/**
+ * Renders a checkbox with checked, unchecked and indeterminate (`checked="indeterminate"`) states.
+ */
+export declare const Checkbox: ({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>) => import("react").JSX.Element;

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../field/field.js";
+import { Check, Minus } from "lucide-react";
+import { Checkbox } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/checkbox/checkbox.tsx
+/**
+* Renders a checkbox with checked, unchecked and indeterminate (`checked="indeterminate"`) states.
+*/
+var Checkbox$1 = ({ className, ...props }) => {
+	const controlProps = useFieldControl(props);
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		className: cn("peer inline-flex size-4.5 shrink-0 items-center justify-center rounded-inner border border-input bg-background text-primary-foreground", "transition-[background-color,border-color] duration-150 ease-out-expo", "focus-ring", "hover:border-foreground/40", "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary", "aria-invalid:border-danger", "active:scale-90", "disabled:cursor-not-allowed disabled:opacity-45", className),
+		"data-slot": "checkbox",
+		...controlProps,
+		children: /* @__PURE__ */ jsxs(Checkbox.Indicator, {
+			className: "group/indicator flex items-center justify-center animate-in zoom-in-50 duration-150",
+			children: [/* @__PURE__ */ jsx(Check, {
+				className: "size-3.5 group-data-[state=indeterminate]/indicator:hidden",
+				strokeWidth: 3
+			}), /* @__PURE__ */ jsx(Minus, {
+				className: "hidden size-3.5 group-data-[state=indeterminate]/indicator:block",
+				strokeWidth: 3
+			})]
+		})
+	});
+};
+export { Checkbox$1 as Checkbox };
+
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Minus } from 'lucide-react';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\n\n/**\n * Renders a checkbox with checked, unchecked and indeterminate (`checked=\"indeterminate\"`) states.\n */\nexport const Checkbox = ({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        // base\n        'peer inline-flex size-4.5 shrink-0 items-center justify-center rounded-inner border border-input bg-background text-primary-foreground',\n        'transition-[background-color,border-color] duration-150 ease-out-expo',\n        'focus-ring',\n        // hover\n        'hover:border-foreground/40',\n        // checked\n        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',\n        // invalid\n        'aria-invalid:border-danger',\n        // active\n        'active:scale-90',\n        // disabled\n        'disabled:cursor-not-allowed disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"checkbox\"\n      {...controlProps}\n    >\n      <CheckboxPrimitive.Indicator className=\"group/indicator flex items-center justify-center animate-in zoom-in-50 duration-150\">\n        <Check className=\"size-3.5 group-data-[state=indeterminate]/indicator:hidden\" strokeWidth={3} />\n        <Minus className=\"hidden size-3.5 group-data-[state=indeterminate]/indicator:block\" strokeWidth={3} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAaA,cAAY,EAAE,WAAW,GAAG,YAA2D;CAClG,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,oBAACC,SAAkB,MAAnB;EACE,WAAW,GAET,0IACA,yEACA,cAEA,8BAEA,uJAEA,8BAEA,mBAEA,mDACA,SACF;EACA,aAAU;EACV,GAAI;EAEJ,UAAA,qBAACA,SAAkB,WAAnB;GAA6B,WAAU;GAAvC,UAAA,CACE,oBAAC,OAAD;IAAO,WAAU;IAA6D,aAAa;GAAI,CAAA,GAC/F,oBAAC,OAAD;IAAO,WAAU;IAAmE,aAAa;GAAI,CAAA,CAC1E;;CACP,CAAA;AAE5B"}

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+import { badgeVariants } from '../badge/badge';
+/**
+ * What a chip adds to the badge's tone table once a person can click it. Hover and press draw the
+ * edge in the tone's own ink and never touch its ground, so the label keeps the contrast it has at
+ * rest in every tone. A darker ground drops gem ink under 4.5:1 in light mode.
+ */
+export declare const chipVariants: (props?: ({
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ChipProps extends Omit<ComponentProps<'button'>, 'type'>, Pick<VariantProps<typeof badgeVariants>, 'size' | 'variant'> {
+    asChild?: boolean;
+    /**
+     * A mark before the label, such as an icon or an emoji.
+     */
+    icon?: ReactNode;
+}
+/**
+ * A status, tone or filter pill. It wears the badge's tones and adds an `icon` before its label.
+ * It becomes a button a person can click, hover and reach by keyboard when it has an `onClick`,
+ * and a link when `asChild` wraps one; `aria-pressed` marks a filter pill that is on.
+ */
+export declare const Chip: ({ asChild, children, className, icon, onClick, size, variant, ...props }: ChipProps) => import("react").JSX.Element;
+export {};

package/dist/components/chip/chip.js

@@ -0,0 +1,54 @@
+import { cn } from "../../lib/cn.js";
+import { badgeVariants } from "../badge/badge.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/chip/chip.tsx
+/**
+* What a chip adds to the badge's tone table once a person can click it. Hover and press draw the
+* edge in the tone's own ink and never touch its ground, so the label keeps the contrast it has at
+* rest in every tone. A darker ground drops gem ink under 4.5:1 in light mode.
+*/
+var chipVariants = cva("", {
+	variants: { interactive: {
+		false: "",
+		true: [
+			"cursor-pointer focus-ring select-none",
+			"transition-[border-color,transform] duration-150 ease-out-expo",
+			"hover:not-aria-pressed:border-current/35",
+			"active:scale-[0.98] active:not-aria-pressed:border-current/60",
+			"aria-pressed:border-current",
+			"disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45"
+		]
+	} },
+	defaultVariants: { interactive: false }
+});
+/**
+* A status, tone or filter pill. It wears the badge's tones and adds an `icon` before its label.
+* It becomes a button a person can click, hover and reach by keyboard when it has an `onClick`,
+* and a link when `asChild` wraps one; `aria-pressed` marks a filter pill that is on.
+*/
+var Chip = ({ asChild = false, children, className, icon, onClick, size = "sm", variant, ...props }) => {
+	const interactive = asChild || onClick !== void 0;
+	const Component = asChild ? Slot.Root : interactive ? "button" : "span";
+	const mark = icon ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "inline-flex",
+		"data-slot": "chip-icon",
+		children: icon
+	}) : null;
+	return /* @__PURE__ */ jsxs(Component, {
+		className: cn(badgeVariants({
+			size,
+			variant
+		}), chipVariants({ interactive }), className),
+		"data-slot": "chip",
+		onClick,
+		type: Component === "button" ? "button" : void 0,
+		...props,
+		children: [mark, asChild ? /* @__PURE__ */ jsx(Slot.Slottable, { children }) : children]
+	});
+};
+export { Chip, chipVariants };
+
+//# sourceMappingURL=chip.js.map

package/dist/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","names":[],"sources":["../../../src/components/chip/chip.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { badgeVariants } from '../badge/badge';\n\n/**\n * What a chip adds to the badge's tone table once a person can click it. Hover and press draw the\n * edge in the tone's own ink and never touch its ground, so the label keeps the contrast it has at\n * rest in every tone. A darker ground drops gem ink under 4.5:1 in light mode.\n */\nexport const chipVariants = cva('', {\n  variants: {\n    interactive: {\n      false: '',\n      true: [\n        // base\n        'cursor-pointer focus-ring select-none',\n        'transition-[border-color,transform] duration-150 ease-out-expo',\n        // hover\n        'hover:not-aria-pressed:border-current/35',\n        // active\n        'active:scale-[0.98] active:not-aria-pressed:border-current/60',\n        // pressed: a filter pill that is on\n        'aria-pressed:border-current',\n        // disabled\n        'disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45',\n      ],\n    },\n  },\n  defaultVariants: {\n    interactive: false,\n  },\n});\n\ninterface ChipProps\n  extends Omit<ComponentProps<'button'>, 'type'>, Pick<VariantProps<typeof badgeVariants>, 'size' | 'variant'> {\n  asChild?: boolean;\n  /**\n   * A mark before the label, such as an icon or an emoji.\n   */\n  icon?: ReactNode;\n}\n\n/**\n * A status, tone or filter pill. It wears the badge's tones and adds an `icon` before its label.\n * It becomes a button a person can click, hover and reach by keyboard when it has an `onClick`,\n * and a link when `asChild` wraps one; `aria-pressed` marks a filter pill that is on.\n */\nexport const Chip = ({\n  asChild = false,\n  children,\n  className,\n  icon,\n  onClick,\n  size = 'sm',\n  variant,\n  ...props\n}: ChipProps) => {\n  const interactive = asChild || onClick !== undefined;\n  const Component = asChild ? Slot.Root : interactive ? 'button' : 'span';\n  const mark = icon ? (\n    <span aria-hidden className=\"inline-flex\" data-slot=\"chip-icon\">\n      {icon}\n    </span>\n  ) : null;\n\n  return (\n    <Component\n      className={cn(badgeVariants({ size, variant }), chipVariants({ interactive }), className)}\n      data-slot=\"chip\"\n      onClick={onClick}\n      type={Component === 'button' ? 'button' : undefined}\n      {...props}\n    >\n      {mark}\n      {asChild ? <Slot.Slottable>{children}</Slot.Slottable> : children}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAYA,IAAa,eAAe,IAAI,IAAI;CAClC,UAAU,EACR,aAAa;EACX,OAAO;EACP,MAAM;GAEJ;GACA;GAEA;GAEA;GAEA;GAEA;EACF;CACF,EACF;CACA,iBAAiB,EACf,aAAa,MACf;AACF,CAAC;;;;;;AAgBD,IAAa,QAAQ,EACnB,UAAU,OACV,UACA,WACA,MACA,SACA,OAAO,MACP,SACA,GAAG,YACY;CACf,MAAM,cAAc,WAAW,YAAY,KAAA;CAC3C,MAAM,YAAY,UAAU,KAAK,OAAO,cAAc,WAAW;CACjE,MAAM,OAAO,OACX,oBAAC,QAAD;EAAM,eAAA;EAAY,WAAU;EAAc,aAAU;EACjD,UAAA;CACG,CAAA,IACJ;CAEJ,OACE,qBAAC,WAAD;EACE,WAAW,GAAG,cAAc;GAAE;GAAM;EAAQ,CAAC,GAAG,aAAa,EAAE,YAAY,CAAC,GAAG,SAAS;EACxF,aAAU;EACD;EACT,MAAM,cAAc,WAAW,WAAW,KAAA;EAC1C,GAAI;EALN,UAAA,CAOG,MACA,UAAU,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA,IAAI,QAChD;;AAEf"}

package/dist/components/code/code.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps } from 'react';
+/**
+ * Inline code in Geist Mono on a muted chip.
+ */
+export declare const Code: ({ className, ...props }: ComponentProps<"code">) => import("react").JSX.Element;
+interface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'children'> {
+    code: string;
+    copyable?: boolean;
+    title?: string;
+}
+/**
+ * A pre-formatted snippet with an optional filename bar and a copy-to-clipboard button.
+ */
+export declare const CodeBlock: ({ className, code, copyable, title, ...props }: CodeBlockProps) => import("react").JSX.Element;
+export {};

package/dist/components/code/code.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/button.js";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/code/code.tsx
+/**
+* Inline code in Geist Mono on a muted chip.
+*/
+var Code = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("code", {
+		className: cn("rounded-sm border bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground wrap-anywhere", className),
+		"data-slot": "code",
+		...props
+	});
+};
+/**
+* A pre-formatted snippet with an optional filename bar and a copy-to-clipboard button.
+*/
+var CodeBlock = ({ className, code, copyable = true, title, ...props }) => {
+	const [isCopied, setIsCopied] = useState(false);
+	/**
+	* Copies the snippet and flips the button to a check mark for two seconds.
+	*/
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(code);
+		setIsCopied(true);
+		window.setTimeout(() => {
+			setIsCopied(false);
+		}, 2e3);
+	};
+	const copyLabel = isCopied ? "Copied" : "Copy code";
+	return /* @__PURE__ */ jsxs("figure", {
+		className: cn("group/code relative overflow-hidden rounded-card border bg-muted/60", className),
+		"data-slot": "code-block",
+		...props,
+		children: [
+			title && /* @__PURE__ */ jsx("figcaption", {
+				className: "flex h-control-sm items-center border-b px-4 font-mono text-caption text-muted-foreground",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "overflow-x-auto p-4 font-mono text-body-sm leading-relaxed",
+				children: /* @__PURE__ */ jsx("code", { children: code })
+			}),
+			copyable && /* @__PURE__ */ jsxs(Button, {
+				className: "absolute right-2 bottom-2 opacity-0 group-hover/code:opacity-100 focus-visible:opacity-100",
+				size: "icon-sm",
+				title: copyLabel,
+				variant: "outline",
+				onClick: handleCopy,
+				children: [isCopied ? /* @__PURE__ */ jsx(Check, { className: "text-success-ink" }) : /* @__PURE__ */ jsx(Copy, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: copyLabel
+				})]
+			})
+		]
+	});
+};
+export { Code, CodeBlock };
+
+//# sourceMappingURL=code.js.map

package/dist/components/code/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","names":[],"sources":["../../../src/components/code/code.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Copy } from 'lucide-react';\nimport { type ComponentProps, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\n\n/**\n * Inline code in Geist Mono on a muted chip.\n */\nexport const Code = ({ className, ...props }: ComponentProps<'code'>) => {\n  return (\n    <code\n      className={cn(\n        'rounded-sm border bg-muted px-1.5 py-0.5 font-mono text-[0.875em] text-foreground wrap-anywhere',\n        className,\n      )}\n      data-slot=\"code\"\n      {...props}\n    />\n  );\n};\n\ninterface CodeBlockProps extends Omit<ComponentProps<'figure'>, 'children'> {\n  code: string;\n  copyable?: boolean;\n  title?: string;\n}\n\n/**\n * A pre-formatted snippet with an optional filename bar and a copy-to-clipboard button.\n */\nexport const CodeBlock = ({ className, code, copyable = true, title, ...props }: CodeBlockProps) => {\n  const [isCopied, setIsCopied] = useState(false);\n\n  /**\n   * Copies the snippet and flips the button to a check mark for two seconds.\n   */\n  const handleCopy = async () => {\n    await navigator.clipboard.writeText(code);\n    setIsCopied(true);\n    window.setTimeout(() => {\n      setIsCopied(false);\n    }, 2000);\n  };\n\n  const copyLabel = isCopied ? 'Copied' : 'Copy code';\n\n  return (\n    <figure\n      className={cn('group/code relative overflow-hidden rounded-card border bg-muted/60', className)}\n      data-slot=\"code-block\"\n      {...props}\n    >\n      {title && (\n        <figcaption className=\"flex h-control-sm items-center border-b px-4 font-mono text-caption text-muted-foreground\">\n          {title}\n        </figcaption>\n      )}\n      <pre className=\"overflow-x-auto p-4 font-mono text-body-sm leading-relaxed\">\n        <code>{code}</code>\n      </pre>\n      {copyable && (\n        <Button\n          className=\"absolute right-2 bottom-2 opacity-0 group-hover/code:opacity-100 focus-visible:opacity-100\"\n          size=\"icon-sm\"\n          title={copyLabel}\n          variant=\"outline\"\n          onClick={handleCopy}\n        >\n          {isCopied ? <Check className=\"text-success-ink\" /> : <Copy />}\n          <span className=\"sr-only\">{copyLabel}</span>\n        </Button>\n      )}\n    </figure>\n  );\n};\n"],"mappings":";;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,WAAW,GAAG,YAAoC;CACvE,OACE,oBAAC,QAAD;EACE,WAAW,GACT,mGACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAWA,IAAa,aAAa,EAAE,WAAW,MAAM,WAAW,MAAM,OAAO,GAAG,YAA4B;CAClG,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;;;;CAK9C,MAAM,aAAa,YAAY;EAC7B,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,YAAY,IAAI;EAChB,OAAO,iBAAiB;GACtB,YAAY,KAAK;EACnB,GAAG,GAAI;CACT;CAEA,MAAM,YAAY,WAAW,WAAW;CAExC,OACE,qBAAC,UAAD;EACE,WAAW,GAAG,uEAAuE,SAAS;EAC9F,aAAU;EACV,GAAI;EAHN,UAAA;GAKG,SACC,oBAAC,cAAD;IAAY,WAAU;IACnB,UAAA;GACS,CAAA;GAEd,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;GACJ,YACC,qBAAC,QAAD;IACE,WAAU;IACV,MAAK;IACL,OAAO;IACP,SAAQ;IACR,SAAS;IALX,UAAA,CAOG,WAAW,oBAAC,OAAD,EAAO,WAAU,mBAAoB,CAAA,IAAI,oBAAC,MAAD,CAAO,CAAA,GAC5D,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAgB,CAAA,CACrC;;EAEJ;;AAEZ"}

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+/**
+ * Holds one fold-out section: a trigger that opens and shuts the content under it.
+ */
+export declare const Collapsible: ({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) => import("react").JSX.Element;
+/**
+ * Toggles its section and turns the chevron to show the state. With `asChild` it renders the child alone, with no chevron and no styles.
+ */
+export declare const CollapsibleTrigger: ({ asChild, children, className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Trigger>) => import("react").JSX.Element;
+/**
+ * Reveals its section with a height animation.
+ */
+export declare const CollapsibleContent: ({ children, className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Content>) => import("react").JSX.Element;

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,55 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { ChevronDown } from "lucide-react";
+import { Collapsible } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/collapsible/collapsible.tsx
+/**
+* Holds one fold-out section: a trigger that opens and shuts the content under it.
+*/
+var Collapsible$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		className: cn("w-full", className),
+		"data-slot": "collapsible",
+		...props
+	});
+};
+/**
+* Toggles its section and turns the chevron to show the state. With `asChild` it renders the child alone, with no chevron and no styles.
+*/
+var CollapsibleTrigger = ({ asChild = false, children, className, ...props }) => {
+	if (asChild) return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		asChild: true,
+		className,
+		"data-slot": "collapsible-trigger",
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
+		className: cn("group/collapsible flex w-full items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring", "hover:text-gem-ink", "disabled:pointer-events-none disabled:opacity-45", className),
+		"data-slot": "collapsible-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/collapsible:rotate-180",
+			role: "presentation"
+		})]
+	});
+};
+/**
+* Reveals its section with a height animation.
+*/
+var CollapsibleContent = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Collapsible.Content, {
+		className: "overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+		"data-slot": "collapsible-content",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("pb-4", className),
+			children
+		})
+	});
+};
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":["Collapsible","CollapsiblePrimitive"],"sources":["../../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { Collapsible as CollapsiblePrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * Holds one fold-out section: a trigger that opens and shuts the content under it.\n */\nexport const Collapsible = ({ className, ...props }: ComponentProps<typeof CollapsiblePrimitive.Root>) => {\n  return <CollapsiblePrimitive.Root className={cn('w-full', className)} data-slot=\"collapsible\" {...props} />;\n};\n\n/**\n * Toggles its section and turns the chevron to show the state. With `asChild` it renders the child alone, with no chevron and no styles.\n */\nexport const CollapsibleTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Trigger>) => {\n  if (asChild) {\n    return (\n      <CollapsiblePrimitive.Trigger asChild className={className} data-slot=\"collapsible-trigger\" {...props}>\n        {children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  }\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      className={cn(\n        // base\n        'group/collapsible flex w-full items-center justify-between gap-4 rounded-control py-4 text-left text-body font-medium transition-colors focus-ring',\n        // hover\n        'hover:text-gem-ink',\n        // disabled\n        'disabled:pointer-events-none disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronDown\n        aria-hidden\n        className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-200 ease-out-expo group-data-[state=open]/collapsible:rotate-180\"\n        role=\"presentation\"\n      />\n    </CollapsiblePrimitive.Trigger>\n  );\n};\n\n/**\n * Reveals its section with a height animation.\n */\nexport const CollapsibleContent = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Content>) => {\n  return (\n    <CollapsiblePrimitive.Content\n      className=\"overflow-hidden text-body-sm text-muted-foreground data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n      data-slot=\"collapsible-content\"\n      {...props}\n    >\n      <div className={cn('pb-4', className)}>{children}</div>\n    </CollapsiblePrimitive.Content>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAaA,iBAAe,EAAE,WAAW,GAAG,YAA8D;CACxG,OAAO,oBAACC,YAAqB,MAAtB;EAA2B,WAAW,GAAG,UAAU,SAAS;EAAG,aAAU;EAAc,GAAI;CAAQ,CAAA;AAC5G;;;;AAKA,IAAa,sBAAsB,EACjC,UAAU,OACV,UACA,WACA,GAAG,YACsD;CACzD,IAAI,SACF,OACE,oBAACA,YAAqB,SAAtB;EAA8B,SAAA;EAAmB;EAAW,aAAU;EAAsB,GAAI;EAC7F;CAC2B,CAAA;CAIlC,OACE,qBAACA,YAAqB,SAAtB;EACE,WAAW,GAET,sJAEA,sBAEA,oDACA,SACF;EACA,aAAU;EACV,GAAI;EAXN,UAAA,CAaG,UACD,oBAAC,aAAD;GACE,eAAA;GACA,WAAU;GACV,MAAK;EACN,CAAA,CAC2B;;AAElC;;;;AAKA,IAAa,sBAAsB,EACjC,UACA,WACA,GAAG,YACsD;CACzD,OACE,oBAACA,YAAqB,SAAtB;EACE,WAAU;EACV,aAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,QAAQ,SAAS;GAAI;EAAc,CAAA;CAC1B,CAAA;AAElC"}

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+    hint?: ReactNode;
+    keywords?: string[];
+}
+type ComboboxSize = 'lg' | 'md' | 'sm';
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    'aria-label'?: string;
+    className?: string;
+    createLabel?: (query: string) => ReactNode;
+    disabled?: boolean;
+    emptyMessage?: ReactNode;
+    leading?: ReactNode;
+    onCreate?: (query: string) => void;
+    onQueryChange?: (query: string) => void;
+    placeholder?: string;
+    query?: string;
+    renderOption?: (option: ComboboxOption) => ReactNode;
+    renderValue?: (option: ComboboxOption) => ReactNode;
+    size?: ComboboxSize;
+}
+/**
+ * Picks one value from a long list by typing; arrows move, Enter picks, Escape closes, and `onCreate` adds a "Create" row for an unmatched query.
+ */
+export declare const Combobox: ({ "aria-label": ariaLabel, className, createLabel, disabled, emptyMessage, leading, onCreate, onQueryChange, onValueChange, options, placeholder, query: controlledQuery, renderOption, renderValue, size, value, }: ComboboxProps) => import("react").JSX.Element;
+export {};