@refine-studio/ui 0.0.0 → 0.1.0

package/dist/components/switch/switch.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../field/field.js";
+import { Switch } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/switch/switch.tsx
+var switchVariants = cva([
+	"peer inline-flex shrink-0 items-center rounded-full border border-transparent bg-input p-0.5",
+	"transition-colors duration-200 ease-out-expo",
+	"focus-ring",
+	"hover:bg-foreground/25",
+	"data-[state=checked]:bg-gem data-[state=checked]:hover:bg-gem/85",
+	"aria-invalid:border-danger",
+	"disabled:cursor-not-allowed disabled:opacity-45"
+], {
+	variants: { size: {
+		sm: "h-4.5 w-8",
+		md: "h-6 w-11"
+	} },
+	defaultVariants: { size: "md" }
+});
+var switchThumbVariants = cva(["pointer-events-none block rounded-full bg-background shadow-sm", "transition-transform duration-200 ease-spring data-[state=unchecked]:translate-x-0"], {
+	variants: { size: {
+		sm: "size-3.5 data-[state=checked]:translate-x-3.5",
+		md: "size-5 data-[state=checked]:translate-x-5"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* Toggles a setting on or off immediately, filling with the current gem when on.
+*/
+var Switch$1 = ({ className, size, ...props }) => {
+	const controlProps = useFieldControl(props);
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		className: cn(switchVariants({ size }), className),
+		"data-slot": "switch",
+		...controlProps,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switchThumbVariants({ size }) })
+	});
+};
+export { Switch$1 as Switch };
+
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":["Switch","SwitchPrimitive"],"sources":["../../../src/components/switch/switch.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Switch as SwitchPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\n\nconst switchVariants = cva(\n  [\n    // base\n    'peer inline-flex shrink-0 items-center rounded-full border border-transparent bg-input p-0.5',\n    'transition-colors duration-200 ease-out-expo',\n    'focus-ring',\n    // hover\n    'hover:bg-foreground/25',\n    // checked\n    'data-[state=checked]:bg-gem data-[state=checked]:hover:bg-gem/85',\n    // invalid\n    'aria-invalid:border-danger',\n    // disabled\n    'disabled:cursor-not-allowed disabled:opacity-45',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4.5 w-8',\n        md: 'h-6 w-11',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\nconst switchThumbVariants = cva(\n  [\n    // base\n    'pointer-events-none block rounded-full bg-background shadow-sm',\n    // animation\n    'transition-transform duration-200 ease-spring data-[state=unchecked]:translate-x-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'size-3.5 data-[state=checked]:translate-x-3.5',\n        md: 'size-5 data-[state=checked]:translate-x-5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\ninterface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {}\n\n/**\n * Toggles a setting on or off immediately, filling with the current gem when on.\n */\nexport const Switch = ({ className, size, ...props }: SwitchProps) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <SwitchPrimitive.Root className={cn(switchVariants({ size }), className)} data-slot=\"switch\" {...controlProps}>\n      <SwitchPrimitive.Thumb className={switchThumbVariants({ size })} />\n    </SwitchPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;AASA,IAAM,iBAAiB,IACrB;CAEE;CACA;CACA;CAEA;CAEA;CAEA;CAEA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,sBAAsB,IAC1B,CAEE,kEAEA,oFACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;AAOA,IAAaA,YAAU,EAAE,WAAW,MAAM,GAAG,YAAyB;CACpE,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,oBAACC,OAAgB,MAAjB;EAAsB,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EAAG,aAAU;EAAS,GAAI;EAC/F,UAAA,oBAACA,OAAgB,OAAjB,EAAuB,WAAW,oBAAoB,EAAE,KAAK,CAAC,EAAI,CAAA;CAC9C,CAAA;AAE1B"}

package/dist/components/table/table.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentProps } from 'react';
+interface TableProps extends ComponentProps<'table'> {
+    containerClassName?: string;
+    stickyHeader?: boolean;
+}
+/**
+ * A dense data table inside a scroll container; `stickyHeader` pins the header row while the body scrolls.
+ * Rows carry no rule between them: a hairline sits under the header and over the totals, and a
+ * row shows itself on hover with a rounded fill. Borders and corners live on the cells, because
+ * a separated table is the only one whose cells take a radius.
+ */
+export declare const Table: ({ className, containerClassName, stickyHeader, ...props }: TableProps) => import("react").JSX.Element;
+/**
+ * The header row group.
+ */
+export declare const TableHeader: ({ className, ...props }: ComponentProps<"thead">) => import("react").JSX.Element;
+/**
+ * The body row group.
+ */
+export declare const TableBody: ({ className, ...props }: ComponentProps<"tbody">) => import("react").JSX.Element;
+/**
+ * The totals row group.
+ */
+export declare const TableFooter: ({ className, ...props }: ComponentProps<"tfoot">) => import("react").JSX.Element;
+interface TableRowProps extends ComponentProps<'tr'> {
+    /** `false` for a row that is not a record, such as a group heading or an empty state: it never lights up */
+    hoverable?: boolean;
+}
+/**
+ * A row that fills on hover and when `data-state="selected"`, with rounded ends. The fill sits on
+ * its cells, so a header row of `TableHead` cells never takes it.
+ */
+export declare const TableRow: ({ className, hoverable, ...props }: TableRowProps) => import("react").JSX.Element;
+interface TableCellProps extends ComponentProps<'td'> {
+    numeric?: boolean;
+}
+interface TableHeadProps extends ComponentProps<'th'> {
+    numeric?: boolean;
+}
+/**
+ * A header cell in the mono eyebrow voice; `numeric` right-aligns it over a number column.
+ */
+export declare const TableHead: ({ className, numeric, ...props }: TableHeadProps) => import("react").JSX.Element;
+/**
+ * A body cell; `numeric` right-aligns it with tabular figures so digits line up.
+ */
+export declare const TableCell: ({ className, numeric, ...props }: TableCellProps) => import("react").JSX.Element;
+/**
+ * A caption under the table.
+ */
+export declare const TableCaption: ({ className, ...props }: ComponentProps<"caption">) => import("react").JSX.Element;
+export {};

package/dist/components/table/table.js

@@ -0,0 +1,96 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/table/table.tsx
+/**
+* A dense data table inside a scroll container; `stickyHeader` pins the header row while the body scrolls.
+* Rows carry no rule between them: a hairline sits under the header and over the totals, and a
+* row shows itself on hover with a rounded fill. Borders and corners live on the cells, because
+* a separated table is the only one whose cells take a radius.
+*/
+var Table = ({ className, containerClassName, stickyHeader = false, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative w-full overflow-auto", containerClassName),
+		"data-slot": "table-container",
+		"data-sticky": stickyHeader || void 0,
+		children: /* @__PURE__ */ jsx("table", {
+			className: cn("group/table w-full caption-bottom border-separate border-spacing-0 text-body-sm", className),
+			"data-slot": "table",
+			"data-sticky": stickyHeader || void 0,
+			...props
+		})
+	});
+};
+/**
+* The header row group.
+*/
+var TableHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("thead", {
+		className: cn("[&_th]:border-b group-data-sticky/table:sticky group-data-sticky/table:top-0 group-data-sticky/table:z-10 group-data-sticky/table:bg-background/90 group-data-sticky/table:backdrop-blur", className),
+		"data-slot": "table-header",
+		...props
+	});
+};
+/**
+* The body row group.
+*/
+var TableBody = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("tbody", {
+		className,
+		"data-slot": "table-body",
+		...props
+	});
+};
+/**
+* The totals row group.
+*/
+var TableFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("tfoot", {
+		className: cn("bg-muted/60 font-medium [&>tr:first-child>td]:border-t", className),
+		"data-slot": "table-footer",
+		...props
+	});
+};
+/**
+* A row that fills on hover and when `data-state="selected"`, with rounded ends. The fill sits on
+* its cells, so a header row of `TableHead` cells never takes it.
+*/
+var TableRow = ({ className, hoverable = true, ...props }) => {
+	return /* @__PURE__ */ jsx("tr", {
+		className: cn("[&>td]:transition-colors [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control", hoverable && "[&:hover>td]:bg-hover data-[state=selected]:[&>td]:bg-gem/10 data-[state=selected]:[&:hover>td]:bg-gem/15", className),
+		"data-slot": "table-row",
+		...props
+	});
+};
+/**
+* A header cell in the mono eyebrow voice; `numeric` right-aligns it over a number column.
+*/
+var TableHead = ({ className, numeric = false, ...props }) => {
+	return /* @__PURE__ */ jsx("th", {
+		className: cn("eyebrow h-control-md px-3 text-left align-middle whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pr-0", { "text-right": numeric }, className),
+		"data-slot": "table-head",
+		...props
+	});
+};
+/**
+* A body cell; `numeric` right-aligns it with tabular figures so digits line up.
+*/
+var TableCell = ({ className, numeric = false, ...props }) => {
+	return /* @__PURE__ */ jsx("td", {
+		className: cn("h-control-lg px-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", { "text-right font-mono tabular-nums": numeric }, className),
+		"data-slot": "table-cell",
+		...props
+	});
+};
+/**
+* A caption under the table.
+*/
+var TableCaption = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("caption", {
+		className: cn("mt-4 text-body-sm text-muted-foreground", className),
+		"data-slot": "table-caption",
+		...props
+	});
+};
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface TableProps extends ComponentProps<'table'> {\n  containerClassName?: string;\n  stickyHeader?: boolean;\n}\n\n/**\n * A dense data table inside a scroll container; `stickyHeader` pins the header row while the body scrolls.\n * Rows carry no rule between them: a hairline sits under the header and over the totals, and a\n * row shows itself on hover with a rounded fill. Borders and corners live on the cells, because\n * a separated table is the only one whose cells take a radius.\n */\nexport const Table = ({ className, containerClassName, stickyHeader = false, ...props }: TableProps) => {\n  return (\n    <div\n      className={cn('relative w-full overflow-auto', containerClassName)}\n      data-slot=\"table-container\"\n      data-sticky={stickyHeader || undefined}\n    >\n      <table\n        className={cn('group/table w-full caption-bottom border-separate border-spacing-0 text-body-sm', className)}\n        data-slot=\"table\"\n        data-sticky={stickyHeader || undefined}\n        {...props}\n      />\n    </div>\n  );\n};\n\n/**\n * The header row group.\n */\nexport const TableHeader = ({ className, ...props }: ComponentProps<'thead'>) => {\n  return (\n    <thead\n      className={cn(\n        '[&_th]:border-b group-data-sticky/table:sticky group-data-sticky/table:top-0 group-data-sticky/table:z-10 group-data-sticky/table:bg-background/90 group-data-sticky/table:backdrop-blur',\n        className,\n      )}\n      data-slot=\"table-header\"\n      {...props}\n    />\n  );\n};\n\n/**\n * The body row group.\n */\nexport const TableBody = ({ className, ...props }: ComponentProps<'tbody'>) => {\n  return <tbody className={className} data-slot=\"table-body\" {...props} />;\n};\n\n/**\n * The totals row group.\n */\nexport const TableFooter = ({ className, ...props }: ComponentProps<'tfoot'>) => {\n  return (\n    <tfoot\n      className={cn('bg-muted/60 font-medium [&>tr:first-child>td]:border-t', className)}\n      data-slot=\"table-footer\"\n      {...props}\n    />\n  );\n};\n\ninterface TableRowProps extends ComponentProps<'tr'> {\n  /** `false` for a row that is not a record, such as a group heading or an empty state: it never lights up */\n  hoverable?: boolean;\n}\n\n/**\n * A row that fills on hover and when `data-state=\"selected\"`, with rounded ends. The fill sits on\n * its cells, so a header row of `TableHead` cells never takes it.\n */\nexport const TableRow = ({ className, hoverable = true, ...props }: TableRowProps) => {\n  return (\n    <tr\n      className={cn(\n        '[&>td]:transition-colors [&>td:first-child]:rounded-l-control [&>td:last-child]:rounded-r-control',\n        hoverable &&\n          '[&:hover>td]:bg-hover data-[state=selected]:[&>td]:bg-gem/10 data-[state=selected]:[&:hover>td]:bg-gem/15',\n        className,\n      )}\n      data-slot=\"table-row\"\n      {...props}\n    />\n  );\n};\n\ninterface TableCellProps extends ComponentProps<'td'> {\n  numeric?: boolean;\n}\n\ninterface TableHeadProps extends ComponentProps<'th'> {\n  numeric?: boolean;\n}\n\n/**\n * A header cell in the mono eyebrow voice; `numeric` right-aligns it over a number column.\n */\nexport const TableHead = ({ className, numeric = false, ...props }: TableHeadProps) => {\n  return (\n    <th\n      className={cn(\n        'eyebrow h-control-md px-3 text-left align-middle whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:w-0 [&:has([role=checkbox])]:pr-0',\n        {\n          'text-right': numeric,\n        },\n        className,\n      )}\n      data-slot=\"table-head\"\n      {...props}\n    />\n  );\n};\n\n/**\n * A body cell; `numeric` right-aligns it with tabular figures so digits line up.\n */\nexport const TableCell = ({ className, numeric = false, ...props }: TableCellProps) => {\n  return (\n    <td\n      className={cn(\n        'h-control-lg px-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',\n        {\n          'text-right font-mono tabular-nums': numeric,\n        },\n        className,\n      )}\n      data-slot=\"table-cell\"\n      {...props}\n    />\n  );\n};\n\n/**\n * A caption under the table.\n */\nexport const TableCaption = ({ className, ...props }: ComponentProps<'caption'>) => {\n  return (\n    <caption className={cn('mt-4 text-body-sm text-muted-foreground', className)} data-slot=\"table-caption\" {...props} />\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,IAAa,SAAS,EAAE,WAAW,oBAAoB,eAAe,OAAO,GAAG,YAAwB;CACtG,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,iCAAiC,kBAAkB;EACjE,aAAU;EACV,eAAa,gBAAgB,KAAA;EAE7B,UAAA,oBAAC,SAAD;GACE,WAAW,GAAG,mFAAmF,SAAS;GAC1G,aAAU;GACV,eAAa,gBAAgB,KAAA;GAC7B,GAAI;EACL,CAAA;CACE,CAAA;AAET;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAqC;CAC/E,OACE,oBAAC,SAAD;EACE,WAAW,GACT,4LACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAqC;CAC7E,OAAO,oBAAC,SAAD;EAAkB;EAAW,aAAU;EAAa,GAAI;CAAQ,CAAA;AACzE;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAqC;CAC/E,OACE,oBAAC,SAAD;EACE,WAAW,GAAG,0DAA0D,SAAS;EACjF,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;;AAWA,IAAa,YAAY,EAAE,WAAW,YAAY,MAAM,GAAG,YAA2B;CACpF,OACE,oBAAC,MAAD;EACE,WAAW,GACT,qGACA,aACE,6GACF,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAaA,IAAa,aAAa,EAAE,WAAW,UAAU,OAAO,GAAG,YAA4B;CACrF,OACE,oBAAC,MAAD;EACE,WAAW,GACT,uJACA,EACE,cAAc,QAChB,GACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,aAAa,EAAE,WAAW,UAAU,OAAO,GAAG,YAA4B;CACrF,OACE,oBAAC,MAAD;EACE,WAAW,GACT,kFACA,EACE,qCAAqC,QACvC,GACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,gBAAgB,EAAE,WAAW,GAAG,YAAuC;CAClF,OACE,oBAAC,WAAD;EAAS,WAAW,GAAG,2CAA2C,SAAS;EAAG,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAExH"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import { type ComponentProps } from 'react';
+declare const tabsListVariants: (props?: ({
+    variant?: "underline" | "pill" | "segmented" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Holds the active tab; reads `defaultValue` or the controlled `value`.
+ */
+export declare const Tabs: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) => import("react").JSX.Element;
+type TabsListProps = ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>;
+/**
+ * Lays out the triggers and hands its `variant` down to them.
+ */
+export declare const TabsList: ({ className, variant, ...props }: TabsListProps) => import("react").JSX.Element;
+interface TabsTriggerProps extends ComponentProps<typeof TabsPrimitive.Trigger> {
+    count?: number | string;
+}
+/**
+ * Activates its panel; an optional `count` renders as a small tally after the label.
+ */
+export declare const TabsTrigger: ({ children, className, count, ...props }: TabsTriggerProps) => import("react").JSX.Element;
+export declare const TabsContent: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) => import("react").JSX.Element;
+export {};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Tabs } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, use } from "react";
+// src/components/tabs/tabs.tsx
+var tabsListVariants = cva(["inline-flex w-fit shrink-0 items-center text-muted-foreground"], {
+	variants: { variant: {
+		underline: "gap-6 border-b",
+		pill: "gap-1",
+		segmented: "gap-0.5 rounded-control bg-muted p-0.5"
+	} },
+	defaultVariants: { variant: "underline" }
+});
+var tabsTriggerVariants = cva([
+	"group/tab relative inline-flex shrink-0 items-center justify-center gap-2 text-body-sm font-medium whitespace-nowrap transition-[color,background-color,box-shadow] duration-150 focus-ring",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	"hover:text-foreground",
+	"disabled:pointer-events-none disabled:opacity-45"
+], {
+	variants: { variant: {
+		underline: [
+			"h-control-md rounded-t-control px-0.5",
+			"after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-full after:bg-transparent after:transition-colors",
+			"data-[state=active]:text-foreground data-[state=active]:after:bg-gem"
+		],
+		pill: [
+			"h-control-sm rounded-full px-3.5",
+			"hover:bg-hover",
+			"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+		],
+		segmented: ["h-[calc(var(--spacing-control-sm)-0.25rem)] flex-1 rounded-inner px-3", "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-soft"]
+	} },
+	defaultVariants: { variant: "underline" }
+});
+var TabsVariantContext = createContext("underline");
+/**
+* Holds the active tab; reads `defaultValue` or the controlled `value`.
+*/
+var Tabs$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		className: cn("flex flex-col gap-4", className),
+		"data-slot": "tabs",
+		...props
+	});
+};
+/**
+* Lays out the triggers and hands its `variant` down to them.
+*/
+var TabsList = ({ className, variant = "underline", ...props }) => {
+	return /* @__PURE__ */ jsx(TabsVariantContext, {
+		value: variant ?? "underline",
+		children: /* @__PURE__ */ jsx(Tabs.List, {
+			className: cn(tabsListVariants({ variant }), className),
+			"data-slot": "tabs-list",
+			"data-variant": variant,
+			...props
+		})
+	});
+};
+/**
+* Activates its panel; an optional `count` renders as a small tally after the label.
+*/
+var TabsTrigger = ({ children, className, count, ...props }) => {
+	const variant = use(TabsVariantContext);
+	return /* @__PURE__ */ jsxs(Tabs.Trigger, {
+		className: cn(tabsTriggerVariants({ variant }), className),
+		"data-slot": "tabs-trigger",
+		...props,
+		children: [children, count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: cn("min-w-5 rounded-full bg-muted px-1.5 text-center font-mono text-caption tabular-nums text-muted-foreground transition-colors", {
+				"group-data-[state=active]/tab:bg-gem-soft group-data-[state=active]/tab:text-gem-ink": variant !== "pill",
+				"group-data-[state=active]/tab:bg-primary-foreground/15 group-data-[state=active]/tab:text-primary-foreground": variant === "pill"
+			}),
+			children: count
+		})]
+	});
+};
+var TabsContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Tabs.Content, {
+		className: cn("flex-1 outline-none focus-ring", className),
+		"data-slot": "tabs-content",
+		...props
+	});
+};
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Tabs as TabsPrimitive } from 'radix-ui';\nimport { type ComponentProps, createContext, use } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ntype TabsVariant = NonNullable<VariantProps<typeof tabsListVariants>['variant']>;\n\nconst tabsListVariants = cva(\n  [\n    // base\n    'inline-flex w-fit shrink-0 items-center text-muted-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        underline: 'gap-6 border-b',\n        pill: 'gap-1',\n        segmented: 'gap-0.5 rounded-control bg-muted p-0.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'underline',\n    },\n  },\n);\n\nconst tabsTriggerVariants = cva(\n  [\n    // base\n    'group/tab relative inline-flex shrink-0 items-center justify-center gap-2 text-body-sm font-medium whitespace-nowrap transition-[color,background-color,box-shadow] duration-150 focus-ring',\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    // hover\n    'hover:text-foreground',\n    // disabled\n    'disabled:pointer-events-none disabled:opacity-45',\n  ],\n  {\n    variants: {\n      variant: {\n        underline: [\n          'h-control-md rounded-t-control px-0.5',\n          'after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-full after:bg-transparent after:transition-colors',\n          'data-[state=active]:text-foreground data-[state=active]:after:bg-gem',\n        ],\n        pill: [\n          'h-control-sm rounded-full px-3.5',\n          'hover:bg-hover',\n          'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground',\n        ],\n        segmented: [\n          'h-[calc(var(--spacing-control-sm)-0.25rem)] flex-1 rounded-inner px-3',\n          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-soft',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: 'underline',\n    },\n  },\n);\n\nconst TabsVariantContext = createContext<TabsVariant>('underline');\n\n/**\n * Holds the active tab; reads `defaultValue` or the controlled `value`.\n */\nexport const Tabs = ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) => {\n  return <TabsPrimitive.Root className={cn('flex flex-col gap-4', className)} data-slot=\"tabs\" {...props} />;\n};\n\ntype TabsListProps = ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>;\n\n/**\n * Lays out the triggers and hands its `variant` down to them.\n */\nexport const TabsList = ({ className, variant = 'underline', ...props }: TabsListProps) => {\n  return (\n    <TabsVariantContext value={variant ?? 'underline'}>\n      <TabsPrimitive.List\n        className={cn(tabsListVariants({ variant }), className)}\n        data-slot=\"tabs-list\"\n        data-variant={variant}\n        {...props}\n      />\n    </TabsVariantContext>\n  );\n};\n\ninterface TabsTriggerProps extends ComponentProps<typeof TabsPrimitive.Trigger> {\n  count?: number | string;\n}\n\n/**\n * Activates its panel; an optional `count` renders as a small tally after the label.\n */\nexport const TabsTrigger = ({ children, className, count, ...props }: TabsTriggerProps) => {\n  const variant = use(TabsVariantContext);\n\n  return (\n    <TabsPrimitive.Trigger\n      className={cn(tabsTriggerVariants({ variant }), className)}\n      data-slot=\"tabs-trigger\"\n      {...props}\n    >\n      {children}\n      {count !== undefined && (\n        <span\n          className={cn(\n            'min-w-5 rounded-full bg-muted px-1.5 text-center font-mono text-caption tabular-nums text-muted-foreground transition-colors',\n            {\n              'group-data-[state=active]/tab:bg-gem-soft group-data-[state=active]/tab:text-gem-ink': variant !== 'pill',\n              'group-data-[state=active]/tab:bg-primary-foreground/15 group-data-[state=active]/tab:text-primary-foreground':\n                variant === 'pill',\n            },\n          )}\n        >\n          {count}\n        </span>\n      )}\n    </TabsPrimitive.Trigger>\n  );\n};\n\nexport const TabsContent = ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) => {\n  return (\n    <TabsPrimitive.Content\n      className={cn('flex-1 outline-none focus-ring', className)}\n      data-slot=\"tabs-content\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAM,mBAAmB,IACvB,CAEE,+DACF,GACA;CACE,UAAU,EACR,SAAS;EACP,WAAW;EACX,MAAM;EACN,WAAW;CACb,EACF;CACA,iBAAiB,EACf,SAAS,YACX;AACF,CACF;AAEA,IAAM,sBAAsB,IAC1B;CAEE;CACA;CAEA;CAEA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,WAAW;GACT;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;EACF;EACA,WAAW,CACT,yEACA,uGACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,YACX;AACF,CACF;AAEA,IAAM,qBAAqB,cAA2B,WAAW;;;;AAKjE,IAAaA,UAAQ,EAAE,WAAW,GAAG,YAAuD;CAC1F,OAAO,oBAACC,KAAc,MAAf;EAAoB,WAAW,GAAG,uBAAuB,SAAS;EAAG,aAAU;EAAO,GAAI;CAAQ,CAAA;AAC3G;;;;AAOA,IAAa,YAAY,EAAE,WAAW,UAAU,aAAa,GAAG,YAA2B;CACzF,OACE,oBAAC,oBAAD;EAAoB,OAAO,WAAW;EACpC,UAAA,oBAACA,KAAc,MAAf;GACE,WAAW,GAAG,iBAAiB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACtD,aAAU;GACV,gBAAc;GACd,GAAI;EACL,CAAA;CACiB,CAAA;AAExB;;;;AASA,IAAa,eAAe,EAAE,UAAU,WAAW,OAAO,GAAG,YAA8B;CACzF,MAAM,UAAU,IAAI,kBAAkB;CAEtC,OACE,qBAACA,KAAc,SAAf;EACE,WAAW,GAAG,oBAAoB,EAAE,QAAQ,CAAC,GAAG,SAAS;EACzD,aAAU;EACV,GAAI;EAHN,UAAA,CAKG,UACA,UAAU,KAAA,KACT,oBAAC,QAAD;GACE,WAAW,GACT,gIACA;IACE,wFAAwF,YAAY;IACpG,gHACE,YAAY;GAChB,CACF;GAEC,UAAA;EACG,CAAA,CAEa;;AAE3B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,KAAc,SAAf;EACE,WAAW,GAAG,kCAAkC,SAAS;EACzD,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+/**
+ * Renders a multi-line input that grows with its content up to `max-h-64`, then scrolls.
+ */
+export declare const Textarea: ({ className, rows, ...props }: ComponentProps<"textarea">) => import("react").JSX.Element;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,20 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../field/field.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/textarea/textarea.tsx
+/**
+* Renders a multi-line input that grows with its content up to `max-h-64`, then scrolls.
+*/
+var Textarea = ({ className, rows = 3, ...props }) => {
+	const controlProps = useFieldControl(props);
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cn("field-sizing-content max-h-64 min-h-20 w-full resize-y rounded-control border border-input bg-background px-3 py-2 text-body-sm text-foreground outline-none placeholder:text-subtle", "transition-[border-color,box-shadow] duration-150 ease-out-expo", "hover:border-foreground/25", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20", "aria-invalid:border-danger aria-invalid:focus-visible:ring-danger/20", "disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 disabled:hover:border-input", "read-only:bg-muted", className),
+		"data-slot": "textarea",
+		rows,
+		...controlProps
+	});
+};
+export { Textarea };
+
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","names":[],"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\n\n/**\n * Renders a multi-line input that grows with its content up to `max-h-64`, then scrolls.\n */\nexport const Textarea = ({ className, rows = 3, ...props }: ComponentProps<'textarea'>) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <textarea\n      className={cn(\n        // base\n        'field-sizing-content max-h-64 min-h-20 w-full resize-y rounded-control border border-input bg-background px-3 py-2 text-body-sm text-foreground outline-none placeholder:text-subtle',\n        'transition-[border-color,box-shadow] duration-150 ease-out-expo',\n        // hover\n        'hover:border-foreground/25',\n        // focus\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',\n        // invalid\n        'aria-invalid:border-danger aria-invalid:focus-visible:ring-danger/20',\n        // disabled\n        'disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 disabled:hover:border-input',\n        // read-only\n        'read-only:bg-muted',\n        className,\n      )}\n      data-slot=\"textarea\"\n      rows={rows}\n      {...controlProps}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,YAAY,EAAE,WAAW,OAAO,GAAG,GAAG,YAAwC;CACzF,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,oBAAC,YAAD;EACE,WAAW,GAET,wLACA,mEAEA,8BAEA,6EAEA,wEAEA,iGAEA,sBACA,SACF;EACA,aAAU;EACJ;EACN,GAAI;CACL,CAAA;AAEL"}

package/dist/components/theme-switcher/theme-switcher.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+type ThemeSwitcherProps = Omit<ComponentProps<'div'>, 'defaultValue' | 'dir'>;
+/**
+ * Lets a person pick light, dark or system mode; the choice writes through `useTheme`, so it applies app-wide and persists.
+ */
+export declare const ThemeSwitcher: ({ className, ...props }: ThemeSwitcherProps) => import("react").JSX.Element;
+export {};

package/dist/components/theme-switcher/theme-switcher.js

@@ -0,0 +1,57 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useTheme } from "../../theme/theme-provider.js";
+import { Monitor, Moon, Sun } from "lucide-react";
+import { ToggleGroup } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/theme-switcher/theme-switcher.tsx
+var MODE_OPTIONS = [
+	{
+		icon: Sun,
+		label: "Light",
+		value: "light"
+	},
+	{
+		icon: Moon,
+		label: "Dark",
+		value: "dark"
+	},
+	{
+		icon: Monitor,
+		label: "System",
+		value: "system"
+	}
+];
+/**
+* Lets a person pick light, dark or system mode; the choice writes through `useTheme`, so it applies app-wide and persists.
+*/
+var ThemeSwitcher = ({ className, ...props }) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
+		className: cn("inline-flex items-center gap-0.5 rounded-control border border-border bg-muted p-0.5", className),
+		"data-slot": "theme-switcher",
+		onValueChange: (value) => {
+			if (value) theme.setTheme({ mode: value });
+		},
+		type: "single",
+		value: theme.mode,
+		...props,
+		children: MODE_OPTIONS.map(({ icon: Icon, label, value }) => {
+			return /* @__PURE__ */ jsxs(ToggleGroup.Item, {
+				className: cn("inline-flex size-control-xs items-center justify-center rounded-inner text-muted-foreground transition-colors focus-ring", "hover:text-foreground", "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-soft"),
+				title: label,
+				value,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": true,
+					className: "size-3.5"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: label
+				})]
+			}, value);
+		})
+	});
+};
+export { ThemeSwitcher };
+
+//# sourceMappingURL=theme-switcher.js.map

package/dist/components/theme-switcher/theme-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-switcher.js","names":["ToggleGroupPrimitive"],"sources":["../../../src/components/theme-switcher/theme-switcher.tsx"],"sourcesContent":["'use client';\n\nimport { Monitor, Moon, Sun } from 'lucide-react';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport type { Mode } from '../../theme/theme';\nimport { useTheme } from '../../theme/theme-provider';\n\nconst MODE_OPTIONS = [\n  {\n    icon: Sun,\n    label: 'Light',\n    value: 'light',\n  },\n  {\n    icon: Moon,\n    label: 'Dark',\n    value: 'dark',\n  },\n  {\n    icon: Monitor,\n    label: 'System',\n    value: 'system',\n  },\n] satisfies {\n  icon: typeof Sun;\n  label: string;\n  value: Mode;\n}[];\n\ntype ThemeSwitcherProps = Omit<ComponentProps<'div'>, 'defaultValue' | 'dir'>;\n\n/**\n * Lets a person pick light, dark or system mode; the choice writes through `useTheme`, so it applies app-wide and persists.\n */\nexport const ThemeSwitcher = ({ className, ...props }: ThemeSwitcherProps) => {\n  const theme = useTheme();\n\n  return (\n    <ToggleGroupPrimitive.Root\n      className={cn('inline-flex items-center gap-0.5 rounded-control border border-border bg-muted p-0.5', className)}\n      data-slot=\"theme-switcher\"\n      onValueChange={(value) => {\n        if (value) theme.setTheme({ mode: value as Mode });\n      }}\n      type=\"single\"\n      value={theme.mode}\n      {...props}\n    >\n      {MODE_OPTIONS.map(({ icon: Icon, label, value }) => {\n        return (\n          <ToggleGroupPrimitive.Item\n            className={cn(\n              // base\n              'inline-flex size-control-xs items-center justify-center rounded-inner text-muted-foreground transition-colors focus-ring',\n              // hover\n              'hover:text-foreground',\n              // active\n              'data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-soft',\n            )}\n            key={value}\n            title={label}\n            value={value}\n          >\n            <Icon aria-hidden className=\"size-3.5\" />\n            <span className=\"sr-only\">{label}</span>\n          </ToggleGroupPrimitive.Item>\n        );\n      })}\n    </ToggleGroupPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAM,eAAe;CACnB;EACE,MAAM;EACN,OAAO;EACP,OAAO;CACT;CACA;EACE,MAAM;EACN,OAAO;EACP,OAAO;CACT;CACA;EACE,MAAM;EACN,OAAO;EACP,OAAO;CACT;AACF;;;;AAWA,IAAa,iBAAiB,EAAE,WAAW,GAAG,YAAgC;CAC5E,MAAM,QAAQ,SAAS;CAEvB,OACE,oBAACA,YAAqB,MAAtB;EACE,WAAW,GAAG,wFAAwF,SAAS;EAC/G,aAAU;EACV,gBAAgB,UAAU;GACxB,IAAI,OAAO,MAAM,SAAS,EAAE,MAAM,MAAc,CAAC;EACnD;EACA,MAAK;EACL,OAAO,MAAM;EACb,GAAI;EAEH,UAAA,aAAa,KAAK,EAAE,MAAM,MAAM,OAAO,YAAY;GAClD,OACE,qBAACA,YAAqB,MAAtB;IACE,WAAW,GAET,4HAEA,yBAEA,2FACF;IAEA,OAAO;IACA;IAXT,UAAA,CAaE,oBAAC,MAAD;KAAM,eAAA;KAAY,WAAU;IAAY,CAAA,GACxC,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAY,CAAA,CACd;GANpB,GAAA,KAMoB;EAE/B,CAAC;CACwB,CAAA;AAE/B"}

package/dist/components/toaster/toaster.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+import { Toaster as SonnerToaster } from 'sonner';
+export { toast } from 'sonner';
+/**
+ * Mounts the toast stack once per app, styled as Refine popover cards with status-coloured icons.
+ */
+export declare const Toaster: ({ className, toastOptions, ...props }: ComponentProps<typeof SonnerToaster>) => import("react").JSX.Element;

package/dist/components/toaster/toaster.js

@@ -0,0 +1,43 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Spinner } from "../spinner/spinner.js";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { Toaster, toast } from "sonner";
+// src/components/toaster/toaster.tsx
+/**
+* Mounts the toast stack once per app, styled as Refine popover cards with status-coloured icons.
+*/
+var Toaster$1 = ({ className, toastOptions, ...props }) => {
+	return /* @__PURE__ */ jsx(Toaster, {
+		className: cn("toaster group", className),
+		gap: 10,
+		icons: {
+			error: /* @__PURE__ */ jsx(CircleAlert, { className: "size-4 text-danger-ink" }),
+			info: /* @__PURE__ */ jsx(Info, { className: "size-4 text-info-ink" }),
+			loading: /* @__PURE__ */ jsx(Spinner, { className: "text-gem-ink" }),
+			success: /* @__PURE__ */ jsx(CircleCheck, { className: "size-4 text-success-ink" }),
+			warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4 text-warning-ink" })
+		},
+		position: "bottom-right",
+		toastOptions: {
+			...toastOptions,
+			classNames: {
+				actionButton: "ml-auto inline-flex h-control-xs shrink-0 items-center rounded-control bg-primary px-2.5 text-caption font-medium text-primary-foreground transition-colors hover:bg-primary/85 focus-ring",
+				cancelButton: "inline-flex h-control-xs shrink-0 items-center rounded-control bg-secondary px-2.5 text-caption font-medium text-secondary-foreground transition-colors hover:bg-pressed focus-ring",
+				closeButton: "absolute -top-2 -left-2 flex size-5 items-center justify-center rounded-full border bg-popover text-muted-foreground transition-colors hover:text-foreground focus-ring [&_svg]:size-3",
+				content: "flex min-w-0 flex-col gap-0.5",
+				description: "text-body-sm text-muted-foreground",
+				icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center self-start",
+				title: "text-body-sm font-semibold text-foreground",
+				toast: "flex w-full items-center gap-3 rounded-card border bg-popover p-4 font-sans text-popover-foreground shadow-float sm:w-(--width)",
+				...toastOptions?.classNames
+			},
+			unstyled: true
+		},
+		...props
+	});
+};
+export { Toaster$1 as Toaster, toast };
+
+//# sourceMappingURL=toaster.js.map

package/dist/components/toaster/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","names":["Toaster","SonnerToaster"],"sources":["../../../src/components/toaster/toaster.tsx"],"sourcesContent":["'use client';\n\nimport { CircleAlert, CircleCheck, Info, TriangleAlert } from 'lucide-react';\nimport type { ComponentProps } from 'react';\nimport { Toaster as SonnerToaster } from 'sonner';\n\nimport { cn } from '../../lib/cn';\nimport { Spinner } from '../spinner/spinner';\n\nexport { toast } from 'sonner';\n\n/**\n * Mounts the toast stack once per app, styled as Refine popover cards with status-coloured icons.\n */\nexport const Toaster = ({ className, toastOptions, ...props }: ComponentProps<typeof SonnerToaster>) => {\n  return (\n    <SonnerToaster\n      className={cn('toaster group', className)}\n      gap={10}\n      icons={{\n        error: <CircleAlert className=\"size-4 text-danger-ink\" />,\n        info: <Info className=\"size-4 text-info-ink\" />,\n        loading: <Spinner className=\"text-gem-ink\" />,\n        success: <CircleCheck className=\"size-4 text-success-ink\" />,\n        warning: <TriangleAlert className=\"size-4 text-warning-ink\" />,\n      }}\n      position=\"bottom-right\"\n      toastOptions={{\n        ...toastOptions,\n        classNames: {\n          actionButton:\n            'ml-auto inline-flex h-control-xs shrink-0 items-center rounded-control bg-primary px-2.5 text-caption font-medium text-primary-foreground transition-colors hover:bg-primary/85 focus-ring',\n          cancelButton:\n            'inline-flex h-control-xs shrink-0 items-center rounded-control bg-secondary px-2.5 text-caption font-medium text-secondary-foreground transition-colors hover:bg-pressed focus-ring',\n          closeButton:\n            'absolute -top-2 -left-2 flex size-5 items-center justify-center rounded-full border bg-popover text-muted-foreground transition-colors hover:text-foreground focus-ring [&_svg]:size-3',\n          content: 'flex min-w-0 flex-col gap-0.5',\n          description: 'text-body-sm text-muted-foreground',\n          icon: 'mt-0.5 flex size-4 shrink-0 items-center justify-center self-start',\n          title: 'text-body-sm font-semibold text-foreground',\n          toast:\n            'flex w-full items-center gap-3 rounded-card border bg-popover p-4 font-sans text-popover-foreground shadow-float sm:w-(--width)',\n          ...toastOptions?.classNames,\n        },\n        unstyled: true,\n      }}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAcA,IAAaA,aAAW,EAAE,WAAW,cAAc,GAAG,YAAkD;CACtG,OACE,oBAACC,SAAD;EACE,WAAW,GAAG,iBAAiB,SAAS;EACxC,KAAK;EACL,OAAO;GACL,OAAO,oBAAC,aAAD,EAAa,WAAU,yBAA0B,CAAA;GACxD,MAAM,oBAAC,MAAD,EAAM,WAAU,uBAAwB,CAAA;GAC9C,SAAS,oBAAC,SAAD,EAAS,WAAU,eAAgB,CAAA;GAC5C,SAAS,oBAAC,aAAD,EAAa,WAAU,0BAA2B,CAAA;GAC3D,SAAS,oBAAC,eAAD,EAAe,WAAU,0BAA2B,CAAA;EAC/D;EACA,UAAS;EACT,cAAc;GACZ,GAAG;GACH,YAAY;IACV,cACE;IACF,cACE;IACF,aACE;IACF,SAAS;IACT,aAAa;IACb,MAAM;IACN,OAAO;IACP,OACE;IACF,GAAG,cAAc;GACnB;GACA,UAAU;EACZ;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+import { type ComponentProps } from 'react';
+export declare const toggleVariants: (props?: ({
+    variant?: "outline" | "ghost" | "segmented" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ToggleVariantProps = VariantProps<typeof toggleVariants>;
+interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariantProps {
+}
+/**
+ * Renders a two-state button that stays pressed while on, such as "Billable only".
+ */
+export declare const Toggle: ({ className, size, variant, ...props }: ToggleProps) => import("react").JSX.Element;
+type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleVariantProps;
+/**
+ * Groups toggles; the default `segmented` variant sits the items in a muted track, as a view switcher.
+ */
+export declare const ToggleGroup: ({ className, size, variant, ...props }: ToggleGroupProps) => import("react").JSX.Element;
+/**
+ * Renders one option of a `ToggleGroup`, inheriting the group's size and variant.
+ */
+export declare const ToggleGroupItem: ({ className, size, variant, ...props }: ComponentProps<typeof ToggleGroupPrimitive.Item> & ToggleVariantProps) => import("react").JSX.Element;
+export {};

package/dist/components/toggle-group/toggle-group.js

@@ -0,0 +1,84 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Toggle, ToggleGroup } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, use } from "react";
+// src/components/toggle-group/toggle-group.tsx
+var toggleVariants = cva([
+	"inline-flex shrink-0 items-center justify-center gap-1.5 rounded-control font-medium whitespace-nowrap text-muted-foreground select-none",
+	"transition-[background-color,color,box-shadow] duration-150 ease-out-expo",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.1em]",
+	"focus-ring",
+	"hover:bg-hover hover:text-foreground",
+	"active:scale-[0.98]",
+	"disabled:pointer-events-none disabled:opacity-45"
+], {
+	variants: {
+		variant: {
+			ghost: "data-[state=on]:bg-pressed data-[state=on]:text-foreground",
+			outline: "border border-input data-[state=on]:border-foreground/30 data-[state=on]:bg-pressed data-[state=on]:text-foreground",
+			segmented: "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm data-[state=on]:hover:bg-background"
+		},
+		size: {
+			sm: "h-control-xs px-2 text-caption",
+			md: "h-control-sm px-3 text-body-sm",
+			lg: "h-control-md px-4 text-body-sm"
+		}
+	},
+	defaultVariants: {
+		variant: "ghost",
+		size: "md"
+	}
+});
+/**
+* Renders a two-state button that stays pressed while on, such as "Billable only".
+*/
+var Toggle$1 = ({ className, size, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(Toggle.Root, {
+		className: cn(toggleVariants({
+			size,
+			variant
+		}), className),
+		"data-slot": "toggle",
+		...props
+	});
+};
+var ToggleGroupContext = createContext({
+	size: "md",
+	variant: "segmented"
+});
+/**
+* Groups toggles; the default `segmented` variant sits the items in a muted track, as a view switcher.
+*/
+var ToggleGroup$1 = ({ className, size = "md", variant = "segmented", ...props }) => {
+	return /* @__PURE__ */ jsx(ToggleGroupContext, {
+		value: {
+			size,
+			variant
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup.Root, {
+			className: cn("inline-flex w-fit items-center gap-1", { "rounded-control bg-muted p-1": variant === "segmented" }, className),
+			"data-slot": "toggle-group",
+			"data-variant": variant,
+			...props
+		})
+	});
+};
+/**
+* Renders one option of a `ToggleGroup`, inheriting the group's size and variant.
+*/
+var ToggleGroupItem = ({ className, size, variant, ...props }) => {
+	const group = use(ToggleGroupContext);
+	return /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		className: cn(toggleVariants({
+			size: size ?? group.size,
+			variant: variant ?? group.variant
+		}), className),
+		"data-slot": "toggle-group-item",
+		...props
+	});
+};
+export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup, ToggleGroupItem, toggleVariants };
+
+//# sourceMappingURL=toggle-group.js.map