@refine-studio/ui 0.0.0 → 0.1.0

package/dist/components/pagination/pagination.js

@@ -0,0 +1,95 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/button.js";
+import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/pagination/pagination.tsx
+/**
+* Marks up the page links as a navigation landmark.
+*/
+var Pagination = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "Pagination",
+		className: cn("flex w-full justify-center", className),
+		"data-slot": "pagination",
+		...props
+	});
+};
+var PaginationContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("flex items-center gap-1", className),
+		"data-slot": "pagination-content",
+		...props
+	});
+};
+var PaginationItem = (props) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		...props
+	});
+};
+/**
+* Links to one page; the active page is outlined and announced as current.
+*/
+var PaginationLink = ({ className, isActive = false, size = "icon", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		asChild: true,
+		className: cn("font-mono tabular-nums", className),
+		size,
+		variant: isActive ? "outline" : "ghost",
+		children: /* @__PURE__ */ jsx("a", {
+			"aria-current": isActive ? "page" : void 0,
+			"data-active": isActive,
+			"data-slot": "pagination-link",
+			...props
+		})
+	});
+};
+/**
+* Links to the previous page.
+*/
+var PaginationPrevious = ({ children = "Previous", className, ...props }) => {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		className: cn("gap-1 pl-2.5 font-sans", className),
+		size: "md",
+		...props,
+		children: [/* @__PURE__ */ jsx(ChevronLeft, {}), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:inline",
+			children
+		})]
+	});
+};
+/**
+* Links to the next page.
+*/
+var PaginationNext = ({ children = "Next", className, ...props }) => {
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		className: cn("gap-1 pr-2.5 font-sans", className),
+		size: "md",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:inline",
+			children
+		}), /* @__PURE__ */ jsx(ChevronRight, {})]
+	});
+};
+/**
+* Stands in for the pages between the visible ones.
+*/
+var PaginationEllipsis = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex size-control-md items-center justify-center text-subtle", className),
+		"data-slot": "pagination-ellipsis",
+		...props,
+		children: [/* @__PURE__ */ jsx(Ellipsis, {
+			"aria-hidden": true,
+			className: "size-4",
+			role: "presentation"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+};
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Button } from '../button/button';\n\n/**\n * Marks up the page links as a navigation landmark.\n */\nexport const Pagination = ({ className, ...props }: ComponentProps<'nav'>) => {\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      className={cn('flex w-full justify-center', className)}\n      data-slot=\"pagination\"\n      {...props}\n    />\n  );\n};\n\nexport const PaginationContent = ({ className, ...props }: ComponentProps<'ul'>) => {\n  return <ul className={cn('flex items-center gap-1', className)} data-slot=\"pagination-content\" {...props} />;\n};\n\nexport const PaginationItem = (props: ComponentProps<'li'>) => {\n  return <li data-slot=\"pagination-item\" {...props} />;\n};\n\ninterface PaginationLinkProps extends ComponentProps<'a'> {\n  isActive?: boolean;\n  size?: 'icon' | 'md';\n}\n\n/**\n * Links to one page; the active page is outlined and announced as current.\n */\nexport const PaginationLink = ({ className, isActive = false, size = 'icon', ...props }: PaginationLinkProps) => {\n  return (\n    <Button\n      asChild\n      className={cn('font-mono tabular-nums', className)}\n      size={size}\n      variant={isActive ? 'outline' : 'ghost'}\n    >\n      <a aria-current={isActive ? 'page' : undefined} data-active={isActive} data-slot=\"pagination-link\" {...props} />\n    </Button>\n  );\n};\n\n/**\n * Links to the previous page.\n */\nexport const PaginationPrevious = ({ children = 'Previous', className, ...props }: ComponentProps<'a'>) => {\n  return (\n    <PaginationLink className={cn('gap-1 pl-2.5 font-sans', className)} size=\"md\" {...props}>\n      <ChevronLeft />\n      <span className=\"hidden sm:inline\">{children}</span>\n    </PaginationLink>\n  );\n};\n\n/**\n * Links to the next page.\n */\nexport const PaginationNext = ({ children = 'Next', className, ...props }: ComponentProps<'a'>) => {\n  return (\n    <PaginationLink className={cn('gap-1 pr-2.5 font-sans', className)} size=\"md\" {...props}>\n      <span className=\"hidden sm:inline\">{children}</span>\n      <ChevronRight />\n    </PaginationLink>\n  );\n};\n\n/**\n * Stands in for the pages between the visible ones.\n */\nexport const PaginationEllipsis = ({ className, ...props }: ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn('flex size-control-md items-center justify-center text-subtle', className)}\n      data-slot=\"pagination-ellipsis\"\n      {...props}\n    >\n      <Ellipsis aria-hidden className=\"size-4\" role=\"presentation\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AASA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAmC;CAC5E,OACE,oBAAC,OAAD;EACE,cAAW;EACX,WAAW,GAAG,8BAA8B,SAAS;EACrD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,qBAAqB,EAAE,WAAW,GAAG,YAAkC;CAClF,OAAO,oBAAC,MAAD;EAAI,WAAW,GAAG,2BAA2B,SAAS;EAAG,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAC7G;AAEA,IAAa,kBAAkB,UAAgC;CAC7D,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAkB,GAAI;CAAQ,CAAA;AACrD;;;;AAUA,IAAa,kBAAkB,EAAE,WAAW,WAAW,OAAO,OAAO,QAAQ,GAAG,YAAiC;CAC/G,OACE,oBAAC,QAAD;EACE,SAAA;EACA,WAAW,GAAG,0BAA0B,SAAS;EAC3C;EACN,SAAS,WAAW,YAAY;EAEhC,UAAA,oBAAC,KAAD;GAAG,gBAAc,WAAW,SAAS,KAAA;GAAW,eAAa;GAAU,aAAU;GAAkB,GAAI;EAAQ,CAAA;CACzG,CAAA;AAEZ;;;;AAKA,IAAa,sBAAsB,EAAE,WAAW,YAAY,WAAW,GAAG,YAAiC;CACzG,OACE,qBAAC,gBAAD;EAAgB,WAAW,GAAG,0BAA0B,SAAS;EAAG,MAAK;EAAK,GAAI;EAAlF,UAAA,CACE,oBAAC,aAAD,CAAc,CAAA,GACd,oBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,CACrC;;AAEpB;;;;AAKA,IAAa,kBAAkB,EAAE,WAAW,QAAQ,WAAW,GAAG,YAAiC;CACjG,OACE,qBAAC,gBAAD;EAAgB,WAAW,GAAG,0BAA0B,SAAS;EAAG,MAAK;EAAK,GAAI;EAAlF,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAAoB;EAAe,CAAA,GACnD,oBAAC,cAAD,CAAe,CAAA,CACD;;AAEpB;;;;AAKA,IAAa,sBAAsB,EAAE,WAAW,GAAG,YAAoC;CACrF,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,gEAAgE,SAAS;EACvF,aAAU;EACV,GAAI;EAHN,UAAA,CAKE,oBAAC,UAAD;GAAU,eAAA;GAAY,WAAU;GAAS,MAAK;EAAgB,CAAA,GAC9D,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAgB,CAAA,CACtC;;AAEV"}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,14 @@
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const FLOATING_ANIMATION_CLASS_NAME: string;
+/**
+ * Holds the open state of a non-modal floating panel anchored to its trigger.
+ */
+export declare const Popover: (props: ComponentProps<typeof PopoverPrimitive.Root>) => import("react").JSX.Element;
+export declare const PopoverTrigger: (props: ComponentProps<typeof PopoverPrimitive.Trigger>) => import("react").JSX.Element;
+export declare const PopoverAnchor: (props: ComponentProps<typeof PopoverPrimitive.Anchor>) => import("react").JSX.Element;
+export declare const PopoverClose: (props: ComponentProps<typeof PopoverPrimitive.Close>) => import("react").JSX.Element;
+/**
+ * Portals the floating panel next to its trigger, flipping sides when space runs out.
+ */
+export declare const PopoverContent: ({ align, className, sideOffset, ...props }: ComponentProps<typeof PopoverPrimitive.Content>) => import("react").JSX.Element;

package/dist/components/popover/popover.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Popover } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+// src/components/popover/popover.tsx
+var FLOATING_ANIMATION_CLASS_NAME = cn("data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2");
+/**
+* Holds the open state of a non-modal floating panel anchored to its trigger.
+*/
+var Popover$1 = (props) => {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		"data-slot": "popover",
+		...props
+	});
+};
+var PopoverTrigger = (props) => {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		...props
+	});
+};
+var PopoverAnchor = (props) => {
+	return /* @__PURE__ */ jsx(Popover.Anchor, {
+		"data-slot": "popover-anchor",
+		...props
+	});
+};
+var PopoverClose = (props) => {
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		"data-slot": "popover-close",
+		...props
+	});
+};
+/**
+* Portals the floating panel next to its trigger, flipping sides when space runs out.
+*/
+var PopoverContent = ({ align = "center", className, sideOffset = 8, ...props }) => {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+		align,
+		className: cn("z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-card border bg-popover p-4 text-popover-foreground shadow-float outline-none", FLOATING_ANIMATION_CLASS_NAME, className),
+		"data-slot": "popover-content",
+		sideOffset,
+		...props
+	}) });
+};
+export { FLOATING_ANIMATION_CLASS_NAME, Popover$1 as Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
+
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":["Popover","PopoverPrimitive"],"sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as PopoverPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nexport const FLOATING_ANIMATION_CLASS_NAME = cn(\n  'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n  'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n);\n\n/**\n * Holds the open state of a non-modal floating panel anchored to its trigger.\n */\nexport const Popover = (props: ComponentProps<typeof PopoverPrimitive.Root>) => {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n};\n\nexport const PopoverTrigger = (props: ComponentProps<typeof PopoverPrimitive.Trigger>) => {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n};\n\nexport const PopoverAnchor = (props: ComponentProps<typeof PopoverPrimitive.Anchor>) => {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n};\n\nexport const PopoverClose = (props: ComponentProps<typeof PopoverPrimitive.Close>) => {\n  return <PopoverPrimitive.Close data-slot=\"popover-close\" {...props} />;\n};\n\n/**\n * Portals the floating panel next to its trigger, flipping sides when space runs out.\n */\nexport const PopoverContent = ({\n  align = 'center',\n  className,\n  sideOffset = 8,\n  ...props\n}: ComponentProps<typeof PopoverPrimitive.Content>) => {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        align={align}\n        className={cn(\n          // base\n          'z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-card border bg-popover p-4 text-popover-foreground shadow-float outline-none',\n          // animation\n          FLOATING_ANIMATION_CLASS_NAME,\n          className,\n        )}\n        data-slot=\"popover-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n};\n"],"mappings":";;;;;AAOA,IAAa,gCAAgC,GAC3C,kGACA,yFACA,6JACF;;;;AAKA,IAAaA,aAAW,UAAwD;CAC9E,OAAO,oBAACC,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,IAAa,kBAAkB,UAA2D;CACxF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,IAAa,iBAAiB,UAA0D;CACtF,OAAO,oBAACA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,IAAa,gBAAgB,UAAyD;CACpF,OAAO,oBAACA,QAAiB,OAAlB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;;;;AAKA,IAAa,kBAAkB,EAC7B,QAAQ,UACR,WACA,aAAa,GACb,GAAG,YACkD;CACrD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACS;EACP,WAAW,GAET,oJAEA,+BACA,SACF;EACA,aAAU;EACE;EACZ,GAAI;CACL,CAAA,EACsB,CAAA;AAE7B"}

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Progress as ProgressPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const progressVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'children'>, VariantProps<typeof progressVariants> {
+    tone?: 'danger' | 'gem' | 'success' | 'warning';
+}
+/**
+ * Shows how far a task has come; a `null` value sweeps a short bar across the track instead of filling it.
+ */
+export declare const Progress: ({ className, max, size, tone, value, ...props }: ProgressProps) => import("react").JSX.Element;
+export {};

package/dist/components/progress/progress.js

@@ -0,0 +1,41 @@
+import { cn } from "../../lib/cn.js";
+import { Progress } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/progress/progress.tsx
+var progressVariants = cva(["relative w-full overflow-hidden rounded-full bg-muted"], {
+	variants: { size: {
+		xs: "h-1",
+		sm: "h-1.5",
+		md: "h-2.5",
+		lg: "h-4"
+	} },
+	defaultVariants: { size: "md" }
+});
+var INDICATOR_CLASS_BY_TONE = {
+	danger: "bg-danger",
+	gem: "bg-gem-gradient",
+	success: "bg-success",
+	warning: "bg-warning"
+};
+/**
+* Shows how far a task has come; a `null` value sweeps a short bar across the track instead of filling it.
+*/
+var Progress$1 = ({ className, max = 100, size, tone = "gem", value = null, ...props }) => {
+	const isIndeterminate = value === null;
+	const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / max * 100));
+	return /* @__PURE__ */ jsx(Progress.Root, {
+		className: cn(progressVariants({ size }), className),
+		"data-slot": "progress",
+		max,
+		value,
+		...props,
+		children: /* @__PURE__ */ jsx(Progress.Indicator, {
+			className: cn("h-full rounded-full transition-transform duration-500 ease-out-expo", INDICATOR_CLASS_BY_TONE[tone], { "w-full origin-left animate-indeterminate": isIndeterminate }),
+			style: isIndeterminate ? void 0 : { transform: `translateX(-${100 - percentage}%)` }
+		})
+	});
+};
+export { Progress$1 as Progress, progressVariants };
+
+//# sourceMappingURL=progress.js.map

package/dist/components/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":["Progress","ProgressPrimitive"],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Progress as ProgressPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nexport const progressVariants = cva(\n  [\n    // base\n    'relative w-full overflow-hidden rounded-full bg-muted',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-1',\n        sm: 'h-1.5',\n        md: 'h-2.5',\n        lg: 'h-4',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\ninterface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'children'>, VariantProps<typeof progressVariants> {\n  tone?: 'danger' | 'gem' | 'success' | 'warning';\n}\n\nconst INDICATOR_CLASS_BY_TONE = {\n  danger: 'bg-danger',\n  gem: 'bg-gem-gradient',\n  success: 'bg-success',\n  warning: 'bg-warning',\n} satisfies Record<NonNullable<ProgressProps['tone']>, string>;\n\n/**\n * Shows how far a task has come; a `null` value sweeps a short bar across the track instead of filling it.\n */\nexport const Progress = ({ className, max = 100, size, tone = 'gem', value = null, ...props }: ProgressProps) => {\n  const isIndeterminate = value === null;\n  const percentage = isIndeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\n  return (\n    <ProgressPrimitive.Root\n      className={cn(progressVariants({ size }), className)}\n      data-slot=\"progress\"\n      max={max}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn('h-full rounded-full transition-transform duration-500 ease-out-expo', INDICATOR_CLASS_BY_TONE[tone], {\n          'w-full origin-left animate-indeterminate': isIndeterminate,\n        })}\n        style={isIndeterminate ? undefined : { transform: `translateX(-${100 - percentage}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,mBAAmB,IAC9B,CAEE,uDACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAOA,IAAM,0BAA0B;CAC9B,QAAQ;CACR,KAAK;CACL,SAAS;CACT,SAAS;AACX;;;;AAKA,IAAaA,cAAY,EAAE,WAAW,MAAM,KAAK,MAAM,OAAO,OAAO,QAAQ,MAAM,GAAG,YAA2B;CAC/G,MAAM,kBAAkB,UAAU;CAClC,MAAM,aAAa,kBAAkB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;CAEvF,OACE,oBAACC,SAAkB,MAAnB;EACE,WAAW,GAAG,iBAAiB,EAAE,KAAK,CAAC,GAAG,SAAS;EACnD,aAAU;EACL;EACE;EACP,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,WAAW,GAAG,uEAAuE,wBAAwB,OAAO,EAClH,4CAA4C,gBAC9C,CAAC;GACD,OAAO,kBAAkB,KAAA,IAAY,EAAE,WAAW,eAAe,MAAM,WAAW,IAAI;EACvF,CAAA;CACqB,CAAA;AAE5B"}

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

@@ -0,0 +1,10 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+/**
+ * Lays out a set of mutually exclusive `RadioGroupItem`s with roving arrow-key focus.
+ */
+export declare const RadioGroup: ({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>) => import("react").JSX.Element;
+/**
+ * Renders one option of a `RadioGroup` as a ring that fills with a dot when selected.
+ */
+export declare const RadioGroupItem: ({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>) => import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useField, useFieldControl } from "../field/field.js";
+import { RadioGroup } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+// src/components/radio-group/radio-group.tsx
+/**
+* Lays out a set of mutually exclusive `RadioGroupItem`s with roving arrow-key focus.
+*/
+var RadioGroup$1 = ({ className, ...props }) => {
+	const field = useField();
+	const controlProps = useFieldControl(props);
+	return /* @__PURE__ */ jsx(RadioGroup.Root, {
+		"aria-labelledby": field?.labelId,
+		className: cn("grid gap-3", className),
+		"data-slot": "radio-group",
+		...controlProps
+	});
+};
+/**
+* Renders one option of a `RadioGroup` as a ring that fills with a dot when selected.
+*/
+var RadioGroupItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(RadioGroup.Item, {
+		className: cn("peer inline-flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-background", "transition-[border-color,background-color] duration-150 ease-out-expo", "focus-ring", "hover:border-foreground/40", "data-[state=checked]:border-primary data-[state=checked]:bg-primary", "aria-invalid:border-danger", "active:scale-90", "disabled:cursor-not-allowed disabled:opacity-45", className),
+		"data-slot": "radio-group-item",
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: "size-2 rounded-full bg-primary-foreground animate-in zoom-in-0 duration-150" })
+	});
+};
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":["RadioGroup","RadioGroupPrimitive"],"sources":["../../../src/components/radio-group/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useField, useFieldControl } from '../field/field';\n\n/**\n * Lays out a set of mutually exclusive `RadioGroupItem`s with roving arrow-key focus.\n */\nexport const RadioGroup = ({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>) => {\n  const field = useField();\n  const controlProps = useFieldControl(props);\n\n  return (\n    <RadioGroupPrimitive.Root\n      aria-labelledby={field?.labelId}\n      className={cn('grid gap-3', className)}\n      data-slot=\"radio-group\"\n      {...controlProps}\n    />\n  );\n};\n\n/**\n * Renders one option of a `RadioGroup` as a ring that fills with a dot when selected.\n */\nexport const RadioGroupItem = ({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>) => {\n  return (\n    <RadioGroupPrimitive.Item\n      className={cn(\n        // base\n        'peer inline-flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-background',\n        'transition-[border-color,background-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',\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=\"radio-group-item\"\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"size-2 rounded-full bg-primary-foreground animate-in zoom-in-0 duration-150\" />\n    </RadioGroupPrimitive.Item>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,IAAaA,gBAAc,EAAE,WAAW,GAAG,YAA6D;CACtG,MAAM,QAAQ,SAAS;CACvB,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,oBAACC,WAAoB,MAArB;EACE,mBAAiB,OAAO;EACxB,WAAW,GAAG,cAAc,SAAS;EACrC,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,kBAAkB,EAAE,WAAW,GAAG,YAA6D;CAC1G,OACE,oBAACA,WAAoB,MAArB;EACE,WAAW,GAET,iHACA,yEACA,cAEA,8BAEA,uEAEA,8BAEA,mBAEA,mDACA,SACF;EACA,aAAU;EACV,GAAI;EAEJ,UAAA,oBAACA,WAAoB,WAArB,EAA+B,WAAU,8EAA+E,CAAA;CAChG,CAAA;AAE9B"}

package/dist/components/section-heading/section-heading.d.ts

@@ -0,0 +1,18 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+declare const sectionHeadingTitleVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SectionHeadingProps extends Omit<ComponentProps<'div'>, 'title'>, VariantProps<typeof sectionHeadingTitleVariants> {
+    align?: 'center' | 'start';
+    as?: 'h1' | 'h2' | 'h3';
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    number?: number | string;
+    title: ReactNode;
+}
+/**
+ * Sets a black-weight display headline over a giant faded section number, the way refine.studio numbers its sections.
+ */
+export declare const SectionHeading: ({ align, as: Heading, className, description, eyebrow, number, size, title, ...props }: SectionHeadingProps) => import("react").JSX.Element;
+export {};

package/dist/components/section-heading/section-heading.js

@@ -0,0 +1,57 @@
+import { cn } from "../../lib/cn.js";
+import { Eyebrow } from "../eyebrow/eyebrow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/section-heading/section-heading.tsx
+var sectionHeadingTitleVariants = cva(["relative font-display text-balance text-foreground"], {
+	variants: { size: {
+		sm: "font-black text-headline-lg",
+		md: "text-display-sm",
+		lg: "md:text-display-lg text-display-md",
+		xl: "md:text-display-xl text-display-lg"
+	} },
+	defaultVariants: { size: "lg" }
+});
+var sectionHeadingNumberVariants = cva(["font-black tracking-tighter pointer-events-none absolute font-display leading-none text-muted-foreground/15 tabular-nums select-none dark:text-muted-foreground/25"], {
+	variants: { size: {
+		sm: "-top-8 left-0 text-6xl",
+		md: "-top-12 left-0 text-8xl",
+		lg: "-top-16 left-0 text-9xl",
+		xl: "-top-16 left-0 text-9xl"
+	} },
+	defaultVariants: { size: "lg" }
+});
+/**
+* Sets a black-weight display headline over a giant faded section number, the way refine.studio numbers its sections.
+*/
+var SectionHeading = ({ align = "start", as: Heading = "h2", className, description, eyebrow, number, size, title, ...props }) => {
+	const formattedNumber = typeof number === "number" ? number.toString().padStart(2, "0") : number;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("gap-4 relative flex flex-col", { "items-center text-center": align === "center" }, className),
+		"data-slot": "section-heading",
+		...props,
+		children: [
+			formattedNumber !== void 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: cn(sectionHeadingNumberVariants({ size }), { "xl:left-1/2 left-1/2 -translate-x-1/2": align === "center" }),
+				role: "presentation",
+				children: formattedNumber
+			}),
+			eyebrow && /* @__PURE__ */ jsx(Eyebrow, {
+				number: formattedNumber,
+				children: eyebrow
+			}),
+			/* @__PURE__ */ jsx(Heading, {
+				className: sectionHeadingTitleVariants({ size }),
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "relative max-w-[65ch] text-body-lg text-muted-foreground",
+				children: description
+			})
+		]
+	});
+};
+export { SectionHeading };
+
+//# sourceMappingURL=section-heading.js.map

package/dist/components/section-heading/section-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-heading.js","names":[],"sources":["../../../src/components/section-heading/section-heading.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Eyebrow } from '../eyebrow/eyebrow';\n\nconst sectionHeadingTitleVariants = cva(\n  [\n    // base\n    'relative font-display text-balance text-foreground',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'font-black text-headline-lg',\n        md: 'text-display-sm',\n        lg: 'md:text-display-lg text-display-md',\n        xl: 'md:text-display-xl text-display-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n    },\n  },\n);\n\nconst sectionHeadingNumberVariants = cva(\n  [\n    // base\n    'font-black tracking-tighter pointer-events-none absolute font-display leading-none text-muted-foreground/15 tabular-nums select-none dark:text-muted-foreground/25',\n  ],\n  {\n    variants: {\n      size: {\n        sm: '-top-8 left-0 text-6xl',\n        md: '-top-12 left-0 text-8xl',\n        lg: '-top-16 left-0 text-9xl',\n        xl: '-top-16 left-0 text-9xl',\n      },\n    },\n    defaultVariants: {\n      size: 'lg',\n    },\n  },\n);\n\ninterface SectionHeadingProps\n  extends Omit<ComponentProps<'div'>, 'title'>, VariantProps<typeof sectionHeadingTitleVariants> {\n  align?: 'center' | 'start';\n  as?: 'h1' | 'h2' | 'h3';\n  description?: ReactNode;\n  eyebrow?: ReactNode;\n  number?: number | string;\n  title: ReactNode;\n}\n\n/**\n * Sets a black-weight display headline over a giant faded section number, the way refine.studio numbers its sections.\n */\nexport const SectionHeading = ({\n  align = 'start',\n  as: Heading = 'h2',\n  className,\n  description,\n  eyebrow,\n  number,\n  size,\n  title,\n  ...props\n}: SectionHeadingProps) => {\n  const formattedNumber = typeof number === 'number' ? number.toString().padStart(2, '0') : number;\n\n  return (\n    <div\n      className={cn('gap-4 relative flex flex-col', { 'items-center text-center': align === 'center' }, className)}\n      data-slot=\"section-heading\"\n      {...props}\n    >\n      {formattedNumber !== undefined && (\n        <span\n          aria-hidden\n          className={cn(sectionHeadingNumberVariants({ size }), {\n            'xl:left-1/2 left-1/2 -translate-x-1/2': align === 'center',\n          })}\n          role=\"presentation\"\n        >\n          {formattedNumber}\n        </span>\n      )}\n      {eyebrow && <Eyebrow number={formattedNumber}>{eyebrow}</Eyebrow>}\n      <Heading className={sectionHeadingTitleVariants({ size })}>{title}</Heading>\n      {description && <p className=\"relative max-w-[65ch] text-body-lg text-muted-foreground\">{description}</p>}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAMA,IAAM,8BAA8B,IAClC,CAEE,oDACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;AAEA,IAAM,+BAA+B,IACnC,CAEE,oKACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;AAeA,IAAa,kBAAkB,EAC7B,QAAQ,SACR,IAAI,UAAU,MACd,WACA,aACA,SACA,QACA,MACA,OACA,GAAG,YACsB;CACzB,MAAM,kBAAkB,OAAO,WAAW,WAAW,OAAO,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI;CAE1F,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,gCAAgC,EAAE,4BAA4B,UAAU,SAAS,GAAG,SAAS;EAC3G,aAAU;EACV,GAAI;EAHN,UAAA;GAKG,oBAAoB,KAAA,KACnB,oBAAC,QAAD;IACE,eAAA;IACA,WAAW,GAAG,6BAA6B,EAAE,KAAK,CAAC,GAAG,EACpD,yCAAyC,UAAU,SACrD,CAAC;IACD,MAAK;IAEJ,UAAA;GACG,CAAA;GAEP,WAAW,oBAAC,SAAD;IAAS,QAAQ;IAAkB,UAAA;GAAiB,CAAA;GAChE,oBAAC,SAAD;IAAS,WAAW,4BAA4B,EAAE,KAAK,CAAC;IAAI,UAAA;GAAe,CAAA;GAC1E,eAAe,oBAAC,KAAD;IAAG,WAAU;IAA4D,UAAA;GAAe,CAAA;EACrG;;AAET"}

package/dist/components/select/select.d.ts

@@ -0,0 +1,32 @@
+import { Select as SelectPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Select: import("react").FC<SelectPrimitive.SelectProps>;
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Shows the selected option inside the trigger; Radix drops its className, so the item text styles its own row.
+ */
+export declare const SelectValue: (props: ComponentProps<typeof SelectPrimitive.Value>) => import("react").JSX.Element;
+interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
+    size?: 'lg' | 'md' | 'sm';
+}
+/**
+ * Renders the closed select as an input-shaped button that shows the current value and a chevron.
+ */
+export declare const SelectTrigger: ({ children, className, size, ...props }: SelectTriggerProps) => import("react").JSX.Element;
+/**
+ * Floats the option list in a portal, sized to the trigger, with scroll buttons for long lists.
+ */
+export declare const SelectContent: ({ children, className, position, sideOffset, ...props }: ComponentProps<typeof SelectPrimitive.Content>) => import("react").JSX.Element;
+/**
+ * Titles a `SelectGroup`.
+ */
+export declare const SelectLabel: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) => import("react").JSX.Element;
+/**
+ * Renders one option, with a check mark when it is the selected value.
+ */
+export declare const SelectItem: ({ children, className, ...props }: ComponentProps<typeof SelectPrimitive.Item>) => import("react").JSX.Element;
+/**
+ * Draws a hairline between groups of options.
+ */
+export declare const SelectSeparator: ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>) => import("react").JSX.Element;
+export {};

package/dist/components/select/select.js

@@ -0,0 +1,100 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../field/field.js";
+import { inputShellVariants } from "../input/input.js";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { Select } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/select/select.tsx
+var Select$1 = Select.Root;
+var SelectGroup = Select.Group;
+/**
+* Shows the selected option inside the trigger; Radix drops its className, so the item text styles its own row.
+*/
+var SelectValue = (props) => {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		...props
+	});
+};
+/**
+* Renders the closed select as an input-shaped button that shows the current value and a chevron.
+*/
+var SelectTrigger = ({ children, className, size, ...props }) => {
+	const controlProps = useFieldControl(props);
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		className: cn(inputShellVariants({ size }), "justify-between text-left outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20", "aria-invalid:border-danger data-placeholder:text-subtle", "disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60", "[&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		"data-slot": "select-trigger",
+		...controlProps,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground transition-transform duration-200 group-data-[state=open]/input:rotate-180" })
+		})]
+	});
+};
+/**
+* Floats the option list in a portal, sized to the trigger, with scroll buttons for long lists.
+*/
+var SelectContent = ({ children, className, position = "popper", sideOffset = 6, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
+		className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-card border bg-popover text-popover-foreground shadow-float", "origin-(--radix-select-content-transform-origin)", "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2", className),
+		"data-slot": "select-content",
+		position,
+		sideOffset,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Select.ScrollUpButton, {
+				className: "flex h-6 items-center justify-center text-muted-foreground",
+				children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx(Select.Viewport, {
+				className: "p-1",
+				children
+			}),
+			/* @__PURE__ */ jsx(Select.ScrollDownButton, {
+				className: "flex h-6 items-center justify-center text-muted-foreground",
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+			})
+		]
+	}) });
+};
+/**
+* Titles a `SelectGroup`.
+*/
+var SelectLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Label, {
+		className: cn("eyebrow px-2.5 pt-2.5 pb-1.5 text-muted-foreground", className),
+		"data-slot": "select-label",
+		...props
+	});
+};
+/**
+* Renders one option, with a check mark when it is the selected value.
+*/
+var SelectItem = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		className: cn("relative flex min-h-control-sm w-full cursor-default items-center gap-2 rounded-inner py-1.5 pr-8 pl-2.5 text-body-sm outline-none select-none", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", "data-highlighted:bg-hover", "data-[state=checked]:font-medium", "data-disabled:pointer-events-none data-disabled:opacity-45", className),
+		"data-slot": "select-item",
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, { children: /* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 items-center gap-2 truncate",
+			children
+		}) }), /* @__PURE__ */ jsx("span", {
+			className: "absolute right-2.5 flex items-center",
+			children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "text-gem-ink" }) })
+		})]
+	});
+};
+/**
+* Draws a hairline between groups of options.
+*/
+var SelectSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		"data-slot": "select-separator",
+		...props
+	});
+};
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["'use client';\n\nimport { Check, ChevronDown, ChevronUp } from 'lucide-react';\nimport { Select as SelectPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\nimport { inputShellVariants } from '../input/input';\n\nexport const Select = SelectPrimitive.Root;\n\nexport const SelectGroup = SelectPrimitive.Group;\n\n/**\n * Shows the selected option inside the trigger; Radix drops its className, so the item text styles its own row.\n */\nexport const SelectValue = (props: ComponentProps<typeof SelectPrimitive.Value>) => {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />;\n};\n\ninterface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {\n  size?: 'lg' | 'md' | 'sm';\n}\n\n/**\n * Renders the closed select as an input-shaped button that shows the current value and a chevron.\n */\nexport const SelectTrigger = ({ children, className, size, ...props }: SelectTriggerProps) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        inputShellVariants({ size }),\n        'justify-between text-left outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20',\n        'aria-invalid:border-danger data-placeholder:text-subtle',\n        'disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60',\n        \"[&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"select-trigger\"\n      {...controlProps}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"text-muted-foreground transition-transform duration-200 group-data-[state=open]/input:rotate-180\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\n/**\n * Floats the option list in a portal, sized to the trigger, with scroll buttons for long lists.\n */\nexport const SelectContent = ({\n  children,\n  className,\n  position = 'popper',\n  sideOffset = 6,\n  ...props\n}: ComponentProps<typeof SelectPrimitive.Content>) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          // base\n          'relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) overflow-hidden rounded-card border bg-popover text-popover-foreground shadow-float',\n          'origin-(--radix-select-content-transform-origin)',\n          // animation\n          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',\n          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n          'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',\n          className,\n        )}\n        data-slot=\"select-content\"\n        position={position}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <SelectPrimitive.ScrollUpButton className=\"flex h-6 items-center justify-center text-muted-foreground\">\n          <ChevronUp className=\"size-4\" />\n        </SelectPrimitive.ScrollUpButton>\n        <SelectPrimitive.Viewport className=\"p-1\">{children}</SelectPrimitive.Viewport>\n        <SelectPrimitive.ScrollDownButton className=\"flex h-6 items-center justify-center text-muted-foreground\">\n          <ChevronDown className=\"size-4\" />\n        </SelectPrimitive.ScrollDownButton>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\n/**\n * Titles a `SelectGroup`.\n */\nexport const SelectLabel = ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>) => {\n  return (\n    <SelectPrimitive.Label\n      className={cn('eyebrow px-2.5 pt-2.5 pb-1.5 text-muted-foreground', className)}\n      data-slot=\"select-label\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Renders one option, with a check mark when it is the selected value.\n */\nexport const SelectItem = ({ children, className, ...props }: ComponentProps<typeof SelectPrimitive.Item>) => {\n  return (\n    <SelectPrimitive.Item\n      className={cn(\n        // base\n        'relative flex min-h-control-sm w-full cursor-default items-center gap-2 rounded-inner py-1.5 pr-8 pl-2.5 text-body-sm outline-none select-none',\n        \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        // hover\n        'data-highlighted:bg-hover',\n        // selected\n        'data-[state=checked]:font-medium',\n        // disabled\n        'data-disabled:pointer-events-none data-disabled:opacity-45',\n        className,\n      )}\n      data-slot=\"select-item\"\n      {...props}\n    >\n      <SelectPrimitive.ItemText>\n        {/* Radix strips className from ItemText and portals this span into the trigger, keeping icon and text inline in both. */}\n        <span className=\"flex min-w-0 items-center gap-2 truncate\">{children}</span>\n      </SelectPrimitive.ItemText>\n      <span className=\"absolute right-2.5 flex items-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"text-gem-ink\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n};\n\n/**\n * Draws a hairline between groups of options.\n */\nexport const SelectSeparator = ({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>) => {\n  return (\n    <SelectPrimitive.Separator className={cn('-mx-1 my-1 h-px bg-border', className)} data-slot=\"select-separator\" {...props} />\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAaA,WAASC,OAAgB;AAEtC,IAAa,cAAcA,OAAgB;;;;AAK3C,IAAa,eAAe,UAAwD;CAClF,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;;;;AASA,IAAa,iBAAiB,EAAE,UAAU,WAAW,MAAM,GAAG,YAAgC;CAC5F,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,qBAACA,OAAgB,SAAjB;EACE,WAAW,GACT,mBAAmB,EAAE,KAAK,CAAC,GAC3B,0CACA,6EACA,2DACA,qEACA,uDACA,SACF;EACA,aAAU;EACV,GAAI;EAXN,UAAA,CAaG,UACD,oBAACA,OAAgB,MAAjB;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD,EAAa,WAAU,mGAAoG,CAAA;EACvG,CAAA,CACC;;AAE7B;;;;AAKA,IAAa,iBAAiB,EAC5B,UACA,WACA,WAAW,UACX,aAAa,GACb,GAAG,YACiD;CACpD,OACE,oBAACA,OAAgB,QAAjB,EAAA,UACE,qBAACA,OAAgB,SAAjB;EACE,WAAW,GAET,0LACA,oDAEA,yFACA,kGACA,iFACA,SACF;EACA,aAAU;EACA;EACE;EACZ,GAAI;EAdN,UAAA;GAgBE,oBAACA,OAAgB,gBAAjB;IAAgC,WAAU;IACxC,UAAA,oBAAC,WAAD,EAAW,WAAU,SAAU,CAAA;GACD,CAAA;GAChC,oBAACA,OAAgB,UAAjB;IAA0B,WAAU;IAAO;GAAmC,CAAA;GAC9E,oBAACA,OAAgB,kBAAjB;IAAkC,WAAU;IAC1C,UAAA,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACD,CAAA;EACX;CACH,CAAA,EAAA,CAAA;AAE5B;;;;AAKA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA0D;CACpG,OACE,oBAACA,OAAgB,OAAjB;EACE,WAAW,GAAG,sDAAsD,SAAS;EAC7E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YAAyD;CAC5G,OACE,qBAACA,OAAgB,MAAjB;EACE,WAAW,GAET,kJACA,6GAEA,6BAEA,oCAEA,8DACA,SACF;EACA,aAAU;EACV,GAAI;EAdN,UAAA,CAgBE,oBAACA,OAAgB,UAAjB,EAAA,UAEE,oBAAC,QAAD;GAAM,WAAU;GAA4C;EAAe,CAAA,EACnD,CAAA,GAC1B,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,OAAgB,eAAjB,EAAA,UACE,oBAAC,OAAD,EAAO,WAAU,eAAgB,CAAA,EACJ,CAAA;EAC3B,CAAA,CACc;;AAE1B;;;;AAKA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAA8D;CAC5G,OACE,oBAACA,OAAgB,WAAjB;EAA2B,WAAW,GAAG,6BAA6B,SAAS;EAAG,aAAU;EAAmB,GAAI;CAAQ,CAAA;AAE/H"}

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,10 @@
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import type { ComponentProps, ReactNode } from 'react';
+interface SeparatorProps extends Omit<ComponentProps<typeof SeparatorPrimitive.Root>, 'children'> {
+    label?: ReactNode;
+}
+/**
+ * A hairline divider; a horizontal one can carry a centred mono `label` such as "or" or a date.
+ */
+export declare const Separator: ({ className, decorative, label, orientation, ...props }: SeparatorProps) => import("react").JSX.Element;
+export {};

package/dist/components/separator/separator.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/cn.js";
+import { Separator } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/separator/separator.tsx
+/**
+* A hairline divider; a horizontal one can carry a centred mono `label` such as "or" or a date.
+*/
+var Separator$1 = ({ className, decorative = true, label, orientation = "horizontal", ...props }) => {
+	if (label && orientation === "horizontal") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-3", className),
+		"data-slot": "separator",
+		children: [
+			/* @__PURE__ */ jsx(Separator.Root, {
+				className: "h-px flex-1 bg-border",
+				decorative: true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "eyebrow text-muted-foreground",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Separator.Root, {
+				className: "h-px flex-1 bg-border",
+				decorative: true
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Separator.Root, {
+		className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+		"data-slot": "separator",
+		decorative,
+		orientation,
+		...props
+	});
+};
+export { Separator$1 as Separator };
+
+//# sourceMappingURL=separator.js.map

package/dist/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":["Separator","SeparatorPrimitive"],"sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from 'radix-ui';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface SeparatorProps extends Omit<ComponentProps<typeof SeparatorPrimitive.Root>, 'children'> {\n  label?: ReactNode;\n}\n\n/**\n * A hairline divider; a horizontal one can carry a centred mono `label` such as \"or\" or a date.\n */\nexport const Separator = ({\n  className,\n  decorative = true,\n  label,\n  orientation = 'horizontal',\n  ...props\n}: SeparatorProps) => {\n  if (label && orientation === 'horizontal') {\n    return (\n      <div className={cn('flex items-center gap-3', className)} data-slot=\"separator\">\n        <SeparatorPrimitive.Root className=\"h-px flex-1 bg-border\" decorative />\n        <span className=\"eyebrow text-muted-foreground\">{label}</span>\n        <SeparatorPrimitive.Root className=\"h-px flex-1 bg-border\" decorative />\n      </div>\n    );\n  }\n\n  return (\n    <SeparatorPrimitive.Root\n      className={cn(\n        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        className,\n      )}\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAaA,eAAa,EACxB,WACA,aAAa,MACb,OACA,cAAc,cACd,GAAG,YACiB;CACpB,IAAI,SAAS,gBAAgB,cAC3B,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,2BAA2B,SAAS;EAAG,aAAU;EAApE,UAAA;GACE,oBAACC,UAAmB,MAApB;IAAyB,WAAU;IAAwB,YAAA;GAAY,CAAA;GACvE,oBAAC,QAAD;IAAM,WAAU;IAAiC,UAAA;GAAY,CAAA;GAC7D,oBAACA,UAAmB,MAApB;IAAyB,WAAU;IAAwB,YAAA;GAAY,CAAA;EACpE;;CAIT,OACE,oBAACA,UAAmB,MAApB;EACE,WAAW,GACT,kKACA,SACF;EACA,aAAU;EACE;EACC;EACb,GAAI;CACL,CAAA;AAEL"}

package/dist/components/sheet/sheet.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+declare const sheetContentVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Holds the open state of a panel that slides in from an edge of the screen.
+ */
+export declare const Sheet: (props: ComponentProps<typeof SheetPrimitive.Root>) => import("react").JSX.Element;
+export declare const SheetTrigger: (props: ComponentProps<typeof SheetPrimitive.Trigger>) => import("react").JSX.Element;
+export declare const SheetClose: (props: ComponentProps<typeof SheetPrimitive.Close>) => import("react").JSX.Element;
+interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content>, VariantProps<typeof sheetContentVariants> {
+    showClose?: boolean;
+}
+/**
+ * Portals the sliding panel above a blurred scrim, from the given `side`.
+ */
+export declare const SheetContent: ({ children, className, showClose, side, size, ...props }: SheetContentProps) => import("react").JSX.Element;
+export declare const SheetHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Scrolls the sheet's main content between its header and footer.
+ */
+export declare const SheetBody: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const SheetFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+export declare const SheetTitle: ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) => import("react").JSX.Element;
+export declare const SheetDescription: ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>) => import("react").JSX.Element;
+export {};