@refine-studio/ui 0.0.0 → 0.2.0

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,137 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RefineIconCheck, RefineIconChevronRight, RefineIconCircleFilled } from "../../icons/refine-icons.js";
+import { MENU_CONTENT_CLASS_NAME, MENU_INDICATOR_CLASS_NAME, MENU_INDICATOR_ITEM_CLASS_NAME, MENU_LABEL_CLASS_NAME, MENU_SEPARATOR_CLASS_NAME, MENU_SHORTCUT_CLASS_NAME, menuItemVariants } from "./menu-styles.js";
+import { DropdownMenu } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/dropdown-menu/dropdown-menu.tsx
+/**
+* Holds the open state of a menu of actions opened from a trigger.
+*/
+var DropdownMenu$1 = (props) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+};
+var DropdownMenuTrigger = (props) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+};
+var DropdownMenuGroup = (props) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+};
+var DropdownMenuRadioGroup = (props) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+};
+var DropdownMenuSub = (props) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Sub, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+};
+/**
+* Portals the menu panel next to its trigger.
+*/
+var DropdownMenuContent = ({ className, sideOffset = 6, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		className: cn(MENU_CONTENT_CLASS_NAME, "origin-(--radix-dropdown-menu-content-transform-origin)", className),
+		"data-slot": "dropdown-menu-content",
+		sideOffset,
+		...props
+	}) });
+};
+/**
+* Runs an action; the `danger` variant marks destructive ones.
+*/
+var DropdownMenuItem = ({ className, inset, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		className: cn(menuItemVariants({
+			inset,
+			variant
+		}), className),
+		"data-slot": "dropdown-menu-item",
+		...props
+	});
+};
+/**
+* Toggles a setting and shows a check while it is on.
+*/
+var DropdownMenuCheckboxItem = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsxs(DropdownMenu.CheckboxItem, {
+		className: cn(MENU_INDICATOR_ITEM_CLASS_NAME, className),
+		"data-slot": "dropdown-menu-checkbox-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: MENU_INDICATOR_CLASS_NAME,
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(RefineIconCheck, { className: "size-4 text-gem-ink" }) })
+		}), children]
+	});
+};
+/**
+* Picks one option of its radio group and marks it with a dot.
+*/
+var DropdownMenuRadioItem = ({ children, className, ...props }) => {
+	return /* @__PURE__ */ jsxs(DropdownMenu.RadioItem, {
+		className: cn(MENU_INDICATOR_ITEM_CLASS_NAME, className),
+		"data-slot": "dropdown-menu-radio-item",
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: MENU_INDICATOR_CLASS_NAME,
+			children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(RefineIconCircleFilled, { className: "size-2 text-gem-ink" }) })
+		}), children]
+	});
+};
+var DropdownMenuLabel = ({ className, inset, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
+		className: cn(MENU_LABEL_CLASS_NAME, { "pl-8": inset }, className),
+		"data-slot": "dropdown-menu-label",
+		...props
+	});
+};
+var DropdownMenuSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+		className: cn(MENU_SEPARATOR_CLASS_NAME, className),
+		"data-slot": "dropdown-menu-separator",
+		...props
+	});
+};
+/**
+* Right-aligns a keyboard shortcut hint inside an item.
+*/
+var DropdownMenuShortcut = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(MENU_SHORTCUT_CLASS_NAME, className),
+		"data-slot": "dropdown-menu-shortcut",
+		...props
+	});
+};
+/**
+* Opens a nested menu and points at it with a chevron.
+*/
+var DropdownMenuSubTrigger = ({ children, className, inset, ...props }) => {
+	return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
+		className: cn(menuItemVariants({ inset }), className),
+		"data-slot": "dropdown-menu-sub-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(RefineIconChevronRight, { className: "ml-auto size-4" })]
+	});
+};
+var DropdownMenuSubContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
+		className: cn(MENU_CONTENT_CLASS_NAME, "origin-(--radix-dropdown-menu-content-transform-origin)", className),
+		"data-slot": "dropdown-menu-sub-content",
+		...props
+	}) });
+};
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/dropdown-menu/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","DropdownMenuPrimitive"],"sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["'use client';\n\nimport type { VariantProps } from 'class-variance-authority';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport {\n  MENU_CONTENT_CLASS_NAME,\n  MENU_INDICATOR_CLASS_NAME,\n  MENU_INDICATOR_ITEM_CLASS_NAME,\n  MENU_LABEL_CLASS_NAME,\n  MENU_SEPARATOR_CLASS_NAME,\n  MENU_SHORTCUT_CLASS_NAME,\n  menuItemVariants,\n} from './menu-styles';\nimport { RefineIconCheck, RefineIconChevronRight, RefineIconCircleFilled } from '../../icons/refine-icons';\n\n/**\n * Holds the open state of a menu of actions opened from a trigger.\n */\nexport const DropdownMenu = (props: ComponentProps<typeof DropdownMenuPrimitive.Root>) => {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n};\n\nexport const DropdownMenuTrigger = (props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) => {\n  return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n};\n\nexport const DropdownMenuGroup = (props: ComponentProps<typeof DropdownMenuPrimitive.Group>) => {\n  return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n};\n\nexport const DropdownMenuRadioGroup = (props: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) => {\n  return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n};\n\nexport const DropdownMenuSub = (props: ComponentProps<typeof DropdownMenuPrimitive.Sub>) => {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n};\n\n/**\n * Portals the menu panel next to its trigger.\n */\nexport const DropdownMenuContent = ({\n  className,\n  sideOffset = 6,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.Content>) => {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-dropdown-menu-content-transform-origin)', className)}\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n\ntype DropdownMenuItemProps = ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof menuItemVariants>;\n\n/**\n * Runs an action; the `danger` variant marks destructive ones.\n */\nexport const DropdownMenuItem = ({ className, inset, variant, ...props }: DropdownMenuItemProps) => {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(menuItemVariants({ inset, variant }), className)}\n      data-slot=\"dropdown-menu-item\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Toggles a setting and shows a check while it is on.\n */\nexport const DropdownMenuCheckboxItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"dropdown-menu-checkbox-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <DropdownMenuPrimitive.ItemIndicator>\n          <RefineIconCheck className=\"size-4 text-gem-ink\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n};\n\n/**\n * Picks one option of its radio group and marks it with a dot.\n */\nexport const DropdownMenuRadioItem = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      className={cn(MENU_INDICATOR_ITEM_CLASS_NAME, className)}\n      data-slot=\"dropdown-menu-radio-item\"\n      {...props}\n    >\n      <span className={MENU_INDICATOR_CLASS_NAME}>\n        <DropdownMenuPrimitive.ItemIndicator>\n          <RefineIconCircleFilled className=\"size-2 text-gem-ink\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n};\n\nexport const DropdownMenuLabel = ({\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) => {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn(MENU_LABEL_CLASS_NAME, { 'pl-8': inset }, className)}\n      data-slot=\"dropdown-menu-label\"\n      {...props}\n    />\n  );\n};\n\nexport const DropdownMenuSeparator = ({\n  className,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) => {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn(MENU_SEPARATOR_CLASS_NAME, className)}\n      data-slot=\"dropdown-menu-separator\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Right-aligns a keyboard shortcut hint inside an item.\n */\nexport const DropdownMenuShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return <span className={cn(MENU_SHORTCUT_CLASS_NAME, className)} data-slot=\"dropdown-menu-shortcut\" {...props} />;\n};\n\n/**\n * Opens a nested menu and points at it with a chevron.\n */\nexport const DropdownMenuSubTrigger = ({\n  children,\n  className,\n  inset,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) => {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      className={cn(menuItemVariants({ inset }), className)}\n      data-slot=\"dropdown-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <RefineIconChevronRight className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n};\n\nexport const DropdownMenuSubContent = ({\n  className,\n  ...props\n}: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.SubContent\n        className={cn(MENU_CONTENT_CLASS_NAME, 'origin-(--radix-dropdown-menu-content-transform-origin)', className)}\n        data-slot=\"dropdown-menu-sub-content\"\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  );\n};\n"],"mappings":"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"}

package/dist/components/dropdown-menu/menu-styles.d.ts

@@ -0,0 +1,10 @@
+export declare const MENU_CONTENT_CLASS_NAME: string;
+export declare const menuItemVariants: (props?: ({
+    variant?: "danger" | "default" | null | undefined;
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const MENU_INDICATOR_ITEM_CLASS_NAME: string;
+export declare const MENU_INDICATOR_CLASS_NAME = "absolute left-2 flex size-4 items-center justify-center";
+export declare const MENU_LABEL_CLASS_NAME = "px-2 pt-2 pb-1 eyebrow text-subtle";
+export declare const MENU_SEPARATOR_CLASS_NAME = "-mx-1 my-1 h-px bg-border";
+export declare const MENU_SHORTCUT_CLASS_NAME = "ml-auto pl-4 font-mono text-caption tracking-wide text-subtle";

package/dist/components/dropdown-menu/menu-styles.js

@@ -0,0 +1,34 @@
+import { cn } from "../../lib/cn.js";
+import { FLOATING_ANIMATION_CLASS_NAME } from "../popover/popover.js";
+import { cva } from "class-variance-authority";
+// src/components/dropdown-menu/menu-styles.ts
+var MENU_CONTENT_CLASS_NAME = cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-card border bg-popover p-1 text-popover-foreground shadow-float outline-none", FLOATING_ANIMATION_CLASS_NAME);
+var menuItemVariants = cva([
+	"relative flex cursor-default items-center gap-2.5 rounded-control px-2 py-1.5 text-body-sm outline-none select-none",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+	"focus:bg-hover data-[state=open]:bg-hover",
+	"data-disabled:pointer-events-none data-disabled:opacity-45"
+], {
+	variants: {
+		variant: {
+			default: "",
+			danger: "text-danger-ink focus:bg-danger-soft [&_svg:not([class*=\"text-\"])]:text-danger-ink"
+		},
+		inset: {
+			true: "pl-8",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		inset: false
+	}
+});
+var MENU_INDICATOR_ITEM_CLASS_NAME = cn(menuItemVariants(), "pl-8");
+var MENU_INDICATOR_CLASS_NAME = "absolute left-2 flex size-4 items-center justify-center";
+var MENU_LABEL_CLASS_NAME = "px-2 pt-2 pb-1 eyebrow text-subtle";
+var MENU_SEPARATOR_CLASS_NAME = "-mx-1 my-1 h-px bg-border";
+var MENU_SHORTCUT_CLASS_NAME = "ml-auto pl-4 font-mono text-caption tracking-wide text-subtle";
+export { MENU_CONTENT_CLASS_NAME, MENU_INDICATOR_CLASS_NAME, MENU_INDICATOR_ITEM_CLASS_NAME, MENU_LABEL_CLASS_NAME, MENU_SEPARATOR_CLASS_NAME, MENU_SHORTCUT_CLASS_NAME, menuItemVariants };
+
+//# sourceMappingURL=menu-styles.js.map

package/dist/components/dropdown-menu/menu-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-styles.js","names":[],"sources":["../../../src/components/dropdown-menu/menu-styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { cn } from '../../lib/cn';\nimport { FLOATING_ANIMATION_CLASS_NAME } from '../popover/popover';\n\nexport const MENU_CONTENT_CLASS_NAME = cn(\n  // base\n  'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-card border bg-popover p-1 text-popover-foreground shadow-float outline-none',\n  // animation\n  FLOATING_ANIMATION_CLASS_NAME,\n);\n\nexport const menuItemVariants = cva(\n  [\n    // base\n    'relative flex cursor-default items-center gap-2.5 rounded-control px-2 py-1.5 text-body-sm outline-none select-none',\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n    // hover\n    'focus:bg-hover data-[state=open]:bg-hover',\n    // disabled\n    'data-disabled:pointer-events-none data-disabled:opacity-45',\n  ],\n  {\n    variants: {\n      variant: {\n        default: '',\n        danger: 'text-danger-ink focus:bg-danger-soft [&_svg:not([class*=\"text-\"])]:text-danger-ink',\n      },\n      inset: {\n        true: 'pl-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      inset: false,\n    },\n  },\n);\n\nexport const MENU_INDICATOR_ITEM_CLASS_NAME = cn(menuItemVariants(), 'pl-8');\n\nexport const MENU_INDICATOR_CLASS_NAME = 'absolute left-2 flex size-4 items-center justify-center';\n\nexport const MENU_LABEL_CLASS_NAME = 'px-2 pt-2 pb-1 eyebrow text-subtle';\n\nexport const MENU_SEPARATOR_CLASS_NAME = '-mx-1 my-1 h-px bg-border';\n\nexport const MENU_SHORTCUT_CLASS_NAME = 'ml-auto pl-4 font-mono text-caption tracking-wide text-subtle';\n"],"mappings":";;;;AAKA,IAAa,0BAA0B,GAErC,+LAEA,6BACF;AAEA,IAAa,mBAAmB,IAC9B;CAEE;CACA;CAEA;CAEA;AACF,GACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,QAAQ;EACV;EACA,OAAO;GACL,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;CACT;AACF,CACF;AAEA,IAAa,iCAAiC,GAAG,iBAAiB,GAAG,MAAM;AAE3E,IAAa,4BAA4B;AAEzC,IAAa,wBAAwB;AAErC,IAAa,4BAA4B;AAEzC,IAAa,2BAA2B"}

package/dist/components/empty-state/empty-state.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ReactNode } from 'react';
+interface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {
+    actions?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    title: ReactNode;
+}
+/**
+ * Explains why a view has nothing to show and what to do next, over a faint hex field from the refine.studio backdrop.
+ */
+export declare const EmptyState: ({ actions, className, description, icon, title, ...props }: EmptyStateProps) => import("react").JSX.Element;
+export {};

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,46 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/empty-state/empty-state.tsx
+/**
+* Explains why a view has nothing to show and what to do next, over a faint hex field from the refine.studio backdrop.
+*/
+var EmptyState = ({ actions, className, description, icon, title, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative isolate flex flex-col items-center justify-center gap-4 overflow-hidden rounded-card border border-dashed px-6 py-12 text-center", className),
+		"data-slot": "empty-state",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "absolute inset-0 -z-10 pattern-hex text-foreground/6",
+				role: "presentation"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "absolute inset-0 -z-10 bg-radial from-transparent from-30% to-background to-75%",
+				role: "presentation"
+			}),
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "flex size-12 items-center justify-center rounded-card border bg-card text-gem-ink shadow-soft [&_svg:not([class*='size-'])]:size-6",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex max-w-sm flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-headline-sm",
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "text-body-sm text-pretty text-muted-foreground",
+					children: description
+				})]
+			}),
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center justify-center gap-3",
+				children: actions
+			})
+		]
+	});
+};
+export { EmptyState };
+
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface EmptyStateProps extends Omit<ComponentProps<'div'>, 'title'> {\n  actions?: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  title: ReactNode;\n}\n\n/**\n * Explains why a view has nothing to show and what to do next, over a faint hex field from the refine.studio backdrop.\n */\nexport const EmptyState = ({ actions, className, description, icon, title, ...props }: EmptyStateProps) => {\n  return (\n    <div\n      className={cn(\n        'relative isolate flex flex-col items-center justify-center gap-4 overflow-hidden rounded-card border border-dashed px-6 py-12 text-center',\n        className,\n      )}\n      data-slot=\"empty-state\"\n      {...props}\n    >\n      <div\n        aria-hidden\n        className=\"absolute inset-0 -z-10 pattern-hex text-foreground/6\"\n        role=\"presentation\"\n      />\n      <div\n        aria-hidden\n        className=\"absolute inset-0 -z-10 bg-radial from-transparent from-30% to-background to-75%\"\n        role=\"presentation\"\n      />\n      {icon && (\n        <div className=\"flex size-12 items-center justify-center rounded-card border bg-card text-gem-ink shadow-soft [&_svg:not([class*='size-'])]:size-6\">\n          {icon}\n        </div>\n      )}\n      <div className=\"flex max-w-sm flex-col gap-1.5\">\n        <h3 className=\"text-headline-sm\">{title}</h3>\n        {description && <p className=\"text-body-sm text-pretty text-muted-foreground\">{description}</p>}\n      </div>\n      {actions && <div className=\"flex flex-wrap items-center justify-center gap-3\">{actions}</div>}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAcA,IAAa,cAAc,EAAE,SAAS,WAAW,aAAa,MAAM,OAAO,GAAG,YAA6B;CACzG,OACE,qBAAC,OAAD;EACE,WAAW,GACT,6IACA,SACF;EACA,aAAU;EACV,GAAI;EANN,UAAA;GAQE,oBAAC,OAAD;IACE,eAAA;IACA,WAAU;IACV,MAAK;GACN,CAAA;GACD,oBAAC,OAAD;IACE,eAAA;IACA,WAAU;IACV,MAAK;GACN,CAAA;GACA,QACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA;GAEP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,MAAD;KAAI,WAAU;KAAoB,UAAA;IAAU,CAAA,GAC3C,eAAe,oBAAC,KAAD;KAAG,WAAU;KAAkD,UAAA;IAAe,CAAA,CAC3F;;GACJ,WAAW,oBAAC,OAAD;IAAK,WAAU;IAAoD,UAAA;GAAa,CAAA;EACzF;;AAET"}

package/dist/components/eyebrow/eyebrow.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface EyebrowProps extends ComponentProps<'p'> {
+    number?: number | string;
+}
+/**
+ * Renders the website's mono label, prefixing a zero-padded `number` and a dash when one is given ("01 — Services").
+ */
+export declare const Eyebrow: ({ children, className, number, ...props }: EyebrowProps) => import("react").JSX.Element;
+export {};

package/dist/components/eyebrow/eyebrow.js

@@ -0,0 +1,25 @@
+import { cn } from "../../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/eyebrow/eyebrow.tsx
+/**
+* Renders the website's mono label, prefixing a zero-padded `number` and a dash when one is given ("01 — Services").
+*/
+var Eyebrow = ({ children, className, number, ...props }) => {
+	const formattedNumber = typeof number === "number" ? number.toString().padStart(2, "0") : number;
+	return /* @__PURE__ */ jsxs("p", {
+		className: cn("eyebrow inline-flex items-center gap-2 text-muted-foreground", className),
+		"data-slot": "eyebrow",
+		...props,
+		children: [formattedNumber !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-gem-ink tabular-nums",
+			children: formattedNumber
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "h-px w-5 bg-current opacity-40",
+			role: "presentation"
+		})] }), children]
+	});
+};
+export { Eyebrow };
+
+//# sourceMappingURL=eyebrow.js.map

package/dist/components/eyebrow/eyebrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eyebrow.js","names":["_Fragment"],"sources":["../../../src/components/eyebrow/eyebrow.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface EyebrowProps extends ComponentProps<'p'> {\n  number?: number | string;\n}\n\n/**\n * Renders the website's mono label, prefixing a zero-padded `number` and a dash when one is given (\"01 — Services\").\n */\nexport const Eyebrow = ({ children, className, number, ...props }: EyebrowProps) => {\n  const formattedNumber = typeof number === 'number' ? number.toString().padStart(2, '0') : number;\n\n  return (\n    <p className={cn('eyebrow inline-flex items-center gap-2 text-muted-foreground', className)} data-slot=\"eyebrow\" {...props}>\n      {formattedNumber !== undefined && (\n        <>\n          <span className=\"text-gem-ink tabular-nums\">{formattedNumber}</span>\n          <span aria-hidden className=\"h-px w-5 bg-current opacity-40\" role=\"presentation\" />\n        </>\n      )}\n      {children}\n    </p>\n  );\n};\n"],"mappings":";;;;;;AAWA,IAAa,WAAW,EAAE,UAAU,WAAW,QAAQ,GAAG,YAA0B;CAClF,MAAM,kBAAkB,OAAO,WAAW,WAAW,OAAO,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI;CAE1F,OACE,qBAAC,KAAD;EAAG,WAAW,GAAG,gEAAgE,SAAS;EAAG,aAAU;EAAU,GAAI;EAArH,UAAA,CACG,oBAAoB,KAAA,KACnB,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GAA6B,UAAA;EAAsB,CAAA,GACnE,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAU;GAAiC,MAAK;EAAgB,CAAA,CAClF,EAAA,CAAA,GAEH,QACA;;AAEP"}

package/dist/components/field/field.d.ts

@@ -0,0 +1,56 @@
+import { Label as LabelPrimitive } from 'radix-ui';
+import { type ComponentProps } from 'react';
+interface FieldContextValue {
+    controlId: string;
+    descriptionId: string;
+    disabled: boolean;
+    errorId: string;
+    hasDescription: boolean;
+    hasError: boolean;
+    invalid: boolean;
+    labelId: string;
+    required: boolean;
+    setHasDescription: (hasDescription: boolean) => void;
+    setHasError: (hasError: boolean) => void;
+}
+interface FieldProps extends ComponentProps<'div'> {
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}
+/**
+ * Groups a label, a control, a description and an error, and wires their ids and ARIA state together through context.
+ */
+export declare const Field: ({ className, disabled, invalid, required, ...props }: FieldProps) => import("react").JSX.Element;
+/**
+ * Returns the surrounding field's state, or null outside a `Field`.
+ */
+export declare const useField: () => FieldContextValue | null;
+interface FieldControlProps {
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling';
+    disabled?: boolean;
+    id?: string;
+    required?: boolean;
+}
+/**
+ * Merges a control's own props with the surrounding field's id, description, error and disabled state; explicit props win.
+ */
+export declare const useFieldControl: <TProps extends FieldControlProps>(props: TProps) => TProps;
+interface FieldLabelProps extends ComponentProps<typeof LabelPrimitive.Root> {
+    optional?: boolean;
+}
+/**
+ * Labels the field's control and marks it as required or optional.
+ */
+export declare const FieldLabel: ({ children, className, optional, ...props }: FieldLabelProps) => import("react").JSX.Element;
+/**
+ * Adds help text under the control and links it through `aria-describedby`.
+ */
+export declare const FieldDescription: ({ className, ...props }: ComponentProps<"p">) => import("react").JSX.Element;
+/**
+ * Shows the validation message, marks the field invalid and links the message through `aria-errormessage`; renders nothing when empty.
+ */
+export declare const FieldError: ({ children, className, ...props }: ComponentProps<"p">) => import("react").JSX.Element | null;
+export {};

package/dist/components/field/field.js

@@ -0,0 +1,135 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { Label } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useEffect, useId, useState } from "react";
+// src/components/field/field.tsx
+var FieldContext = createContext(null);
+/**
+* Groups a label, a control, a description and an error, and wires their ids and ARIA state together through context.
+*/
+var Field = ({ className, disabled = false, invalid = false, required = false, ...props }) => {
+	const id = useId();
+	const [hasDescription, setHasDescription] = useState(false);
+	const [hasError, setHasError] = useState(false);
+	return /* @__PURE__ */ jsx(FieldContext, {
+		value: {
+			controlId: `${id}-control`,
+			descriptionId: `${id}-description`,
+			disabled,
+			errorId: `${id}-error`,
+			hasDescription,
+			hasError,
+			invalid: invalid || hasError,
+			labelId: `${id}-label`,
+			required,
+			setHasDescription,
+			setHasError
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("group/field flex flex-col gap-1.5", className),
+			"data-disabled": disabled || void 0,
+			"data-invalid": invalid || hasError || void 0,
+			"data-slot": "field",
+			...props
+		})
+	});
+};
+/**
+* Returns the surrounding field's state, or null outside a `Field`.
+*/
+var useField = () => {
+	return use(FieldContext);
+};
+/**
+* Merges a control's own props with the surrounding field's id, description, error and disabled state; explicit props win.
+*/
+var useFieldControl = (props) => {
+	const field = useField();
+	if (!field) return props;
+	const describedBy = [
+		props["aria-describedby"],
+		field.hasDescription ? field.descriptionId : void 0,
+		field.hasError ? field.errorId : void 0
+	].filter(Boolean).join(" ");
+	return {
+		...props,
+		"aria-describedby": describedBy || void 0,
+		"aria-errormessage": props["aria-errormessage"] ?? (field.hasError ? field.errorId : void 0),
+		"aria-invalid": props["aria-invalid"] ?? (field.invalid || void 0),
+		disabled: props.disabled ?? (field.disabled || void 0),
+		id: props.id ?? field.controlId,
+		required: props.required ?? (field.required || void 0)
+	};
+};
+/**
+* Labels the field's control and marks it as required or optional.
+*/
+var FieldLabel = ({ children, className, optional = false, ...props }) => {
+	const field = useField();
+	return /* @__PURE__ */ jsxs(Label.Root, {
+		className: cn("inline-flex items-center gap-1 text-body-sm font-medium text-foreground select-none", "group-data-disabled/field:opacity-50", className),
+		"data-slot": "field-label",
+		htmlFor: field?.controlId,
+		id: field?.labelId,
+		...props,
+		children: [
+			children,
+			field?.required && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "text-danger-ink",
+				role: "presentation",
+				children: "*"
+			}),
+			optional && /* @__PURE__ */ jsx("span", {
+				className: "font-normal text-muted-foreground",
+				children: "(optional)"
+			})
+		]
+	});
+};
+/**
+* Registers a piece of field state on mount and clears it on unmount.
+*/
+var useRegister = (register, isPresent) => {
+	useEffect(() => {
+		if (!register) return;
+		register(isPresent);
+		return () => {
+			register(false);
+		};
+	}, [register, isPresent]);
+};
+/**
+* Adds help text under the control and links it through `aria-describedby`.
+*/
+var FieldDescription = ({ className, ...props }) => {
+	const field = useField();
+	useRegister(field?.setHasDescription, true);
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-body-sm text-muted-foreground", className),
+		"data-slot": "field-description",
+		id: field?.descriptionId,
+		...props
+	});
+};
+/**
+* Shows the validation message, marks the field invalid and links the message through `aria-errormessage`; renders nothing when empty.
+*/
+var FieldError = ({ children, className, ...props }) => {
+	const field = useField();
+	const hasMessage = Boolean(children);
+	useRegister(field?.setHasError, hasMessage);
+	if (!hasMessage) return null;
+	return /* @__PURE__ */ jsx("p", {
+		className: cn("text-body-sm font-medium text-danger-ink", className),
+		"data-slot": "field-error",
+		id: field?.errorId,
+		role: "alert",
+		...props,
+		children
+	});
+};
+export { Field, FieldDescription, FieldError, FieldLabel, useField, useFieldControl };
+
+//# sourceMappingURL=field.js.map

package/dist/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","names":["LabelPrimitive"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["'use client';\n\nimport { Label as LabelPrimitive } from 'radix-ui';\nimport { type ComponentProps, createContext, use, useEffect, useId, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface FieldContextValue {\n  controlId: string;\n  descriptionId: string;\n  disabled: boolean;\n  errorId: string;\n  hasDescription: boolean;\n  hasError: boolean;\n  invalid: boolean;\n  labelId: string;\n  required: boolean;\n  setHasDescription: (hasDescription: boolean) => void;\n  setHasError: (hasError: boolean) => void;\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null);\n\ninterface FieldProps extends ComponentProps<'div'> {\n  disabled?: boolean;\n  invalid?: boolean;\n  required?: boolean;\n}\n\n/**\n * Groups a label, a control, a description and an error, and wires their ids and ARIA state together through context.\n */\nexport const Field = ({ className, disabled = false, invalid = false, required = false, ...props }: FieldProps) => {\n  const id = useId();\n  const [hasDescription, setHasDescription] = useState(false);\n  const [hasError, setHasError] = useState(false);\n\n  return (\n    <FieldContext\n      value={{\n        controlId: `${id}-control`,\n        descriptionId: `${id}-description`,\n        disabled,\n        errorId: `${id}-error`,\n        hasDescription,\n        hasError,\n        invalid: invalid || hasError,\n        labelId: `${id}-label`,\n        required,\n        setHasDescription,\n        setHasError,\n      }}\n    >\n      <div\n        className={cn('group/field flex flex-col gap-1.5', className)}\n        data-disabled={disabled || undefined}\n        data-invalid={invalid || hasError || undefined}\n        data-slot=\"field\"\n        {...props}\n      />\n    </FieldContext>\n  );\n};\n\n/**\n * Returns the surrounding field's state, or null outside a `Field`.\n */\nexport const useField = () => {\n  return use(FieldContext);\n};\n\ninterface FieldControlProps {\n  'aria-describedby'?: string;\n  'aria-errormessage'?: string;\n  'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling';\n  disabled?: boolean;\n  id?: string;\n  required?: boolean;\n}\n\n/**\n * Merges a control's own props with the surrounding field's id, description, error and disabled state; explicit props win.\n */\nexport const useFieldControl = <TProps extends FieldControlProps>(props: TProps) => {\n  const field = useField();\n  if (!field) return props;\n\n  const describedBy = [\n    props['aria-describedby'],\n    field.hasDescription ? field.descriptionId : undefined,\n    field.hasError ? field.errorId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return {\n    ...props,\n    'aria-describedby': describedBy || undefined,\n    'aria-errormessage': props['aria-errormessage'] ?? (field.hasError ? field.errorId : undefined),\n    'aria-invalid': props['aria-invalid'] ?? (field.invalid || undefined),\n    disabled: props.disabled ?? (field.disabled || undefined),\n    id: props.id ?? field.controlId,\n    required: props.required ?? (field.required || undefined),\n  };\n};\n\ninterface FieldLabelProps extends ComponentProps<typeof LabelPrimitive.Root> {\n  optional?: boolean;\n}\n\n/**\n * Labels the field's control and marks it as required or optional.\n */\nexport const FieldLabel = ({ children, className, optional = false, ...props }: FieldLabelProps) => {\n  const field = useField();\n\n  return (\n    <LabelPrimitive.Root\n      className={cn(\n        'inline-flex items-center gap-1 text-body-sm font-medium text-foreground select-none',\n        'group-data-disabled/field:opacity-50',\n        className,\n      )}\n      data-slot=\"field-label\"\n      htmlFor={field?.controlId}\n      id={field?.labelId}\n      {...props}\n    >\n      {children}\n      {field?.required && (\n        <span aria-hidden className=\"text-danger-ink\" role=\"presentation\">\n          *\n        </span>\n      )}\n      {optional && <span className=\"font-normal text-muted-foreground\">(optional)</span>}\n    </LabelPrimitive.Root>\n  );\n};\n\n/**\n * Registers a piece of field state on mount and clears it on unmount.\n */\nconst useRegister = (register: ((isPresent: boolean) => void) | undefined, isPresent: boolean) => {\n  useEffect(() => {\n    if (!register) return;\n    register(isPresent);\n\n    return () => {\n      register(false);\n    };\n  }, [register, isPresent]);\n};\n\n/**\n * Adds help text under the control and links it through `aria-describedby`.\n */\nexport const FieldDescription = ({ className, ...props }: ComponentProps<'p'>) => {\n  const field = useField();\n  useRegister(field?.setHasDescription, true);\n\n  return (\n    <p\n      className={cn('text-body-sm text-muted-foreground', className)}\n      data-slot=\"field-description\"\n      id={field?.descriptionId}\n      {...props}\n    />\n  );\n};\n\n/**\n * Shows the validation message, marks the field invalid and links the message through `aria-errormessage`; renders nothing when empty.\n */\nexport const FieldError = ({ children, className, ...props }: ComponentProps<'p'>) => {\n  const field = useField();\n  const hasMessage = Boolean(children);\n  useRegister(field?.setHasError, hasMessage);\n\n  if (!hasMessage) return null;\n\n  return (\n    <p\n      className={cn('text-body-sm font-medium text-danger-ink', className)}\n      data-slot=\"field-error\"\n      id={field?.errorId}\n      role=\"alert\"\n      {...props}\n    >\n      {children}\n    </p>\n  );\n};\n"],"mappings":";;;;;;AAqBA,IAAM,eAAe,cAAwC,IAAI;;;;AAWjE,IAAa,SAAS,EAAE,WAAW,WAAW,OAAO,UAAU,OAAO,WAAW,OAAO,GAAG,YAAwB;CACjH,MAAM,KAAK,MAAM;CACjB,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,KAAK;CAC1D,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,OACE,oBAAC,cAAD;EACE,OAAO;GACL,WAAW,GAAG,GAAG;GACjB,eAAe,GAAG,GAAG;GACrB;GACA,SAAS,GAAG,GAAG;GACf;GACA;GACA,SAAS,WAAW;GACpB,SAAS,GAAG,GAAG;GACf;GACA;GACA;EACF;EAEA,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,qCAAqC,SAAS;GAC5D,iBAAe,YAAY,KAAA;GAC3B,gBAAc,WAAW,YAAY,KAAA;GACrC,aAAU;GACV,GAAI;EACL,CAAA;CACW,CAAA;AAElB;;;;AAKA,IAAa,iBAAiB;CAC5B,OAAO,IAAI,YAAY;AACzB;;;;AAcA,IAAa,mBAAqD,UAAkB;CAClF,MAAM,QAAQ,SAAS;CACvB,IAAI,CAAC,OAAO,OAAO;CAEnB,MAAM,cAAc;EAClB,MAAM;EACN,MAAM,iBAAiB,MAAM,gBAAgB,KAAA;EAC7C,MAAM,WAAW,MAAM,UAAU,KAAA;CACnC,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OAAO;EACL,GAAG;EACH,oBAAoB,eAAe,KAAA;EACnC,qBAAqB,MAAM,yBAAyB,MAAM,WAAW,MAAM,UAAU,KAAA;EACrF,gBAAgB,MAAM,oBAAoB,MAAM,WAAW,KAAA;EAC3D,UAAU,MAAM,aAAa,MAAM,YAAY,KAAA;EAC/C,IAAI,MAAM,MAAM,MAAM;EACtB,UAAU,MAAM,aAAa,MAAM,YAAY,KAAA;CACjD;AACF;;;;AASA,IAAa,cAAc,EAAE,UAAU,WAAW,WAAW,OAAO,GAAG,YAA6B;CAClG,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,MAAe,MAAhB;EACE,WAAW,GACT,uFACA,wCACA,SACF;EACA,aAAU;EACV,SAAS,OAAO;EAChB,IAAI,OAAO;EACX,GAAI;EATN,UAAA;GAWG;GACA,OAAO,YACN,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAU;IAAkB,MAAK;IAAe,UAAA;GAE5D,CAAA;GAEP,YAAY,oBAAC,QAAD;IAAM,WAAU;IAAoC,UAAA;GAAgB,CAAA;EAC9D;;AAEzB;;;;AAKA,IAAM,eAAe,UAAsD,cAAuB;CAChG,gBAAgB;EACd,IAAI,CAAC,UAAU;EACf,SAAS,SAAS;EAElB,aAAa;GACX,SAAS,KAAK;EAChB;CACF,GAAG,CAAC,UAAU,SAAS,CAAC;AAC1B;;;;AAKA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAAiC;CAChF,MAAM,QAAQ,SAAS;CACvB,YAAY,OAAO,mBAAmB,IAAI;CAE1C,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,sCAAsC,SAAS;EAC7D,aAAU;EACV,IAAI,OAAO;EACX,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,cAAc,EAAE,UAAU,WAAW,GAAG,YAAiC;CACpF,MAAM,QAAQ,SAAS;CACvB,MAAM,aAAa,QAAQ,QAAQ;CACnC,YAAY,OAAO,aAAa,UAAU;CAE1C,IAAI,CAAC,YAAY,OAAO;CAExB,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,4CAA4C,SAAS;EACnE,aAAU;EACV,IAAI,OAAO;EACX,MAAK;EACL,GAAI;EAEH;CACA,CAAA;AAEP"}

package/dist/components/glow-border/glow-border.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface GlowBorderProps extends ComponentProps<'div'> {
+    glow?: boolean;
+}
+/**
+ * Frames a "moment" surface with a rotating gem gradient border, optionally haloed; with reduced motion the border holds still.
+ */
+export declare const GlowBorder: ({ children, className, glow, ...props }: GlowBorderProps) => import("react").JSX.Element;
+export {};

package/dist/components/glow-border/glow-border.js

@@ -0,0 +1,39 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/glow-border/glow-border.tsx
+var CONIC_GRADIENT_CLASSES = [
+	"pointer-events-none absolute top-1/2 left-1/2 aspect-square w-[300%] -translate-x-1/2 -translate-y-1/2",
+	"bg-[conic-gradient(from_0deg,transparent_0deg,oklch(0.775_var(--gem-c)_var(--gem-h))_60deg,oklch(0.6_var(--gem-c)_calc(var(--gem-h)+40))_120deg,transparent_180deg,transparent_360deg)]",
+	"motion-safe:animate-spin motion-safe:[animation-duration:5s]"
+];
+/**
+* Frames a "moment" surface with a rotating gem gradient border, optionally haloed; with reduced motion the border holds still.
+*/
+var GlowBorder = ({ children, className, glow = true, ...props }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative isolate rounded-card", className),
+		"data-slot": "glow-border",
+		...props,
+		children: [
+			glow && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "absolute -inset-1 -z-10 overflow-hidden rounded-card opacity-60 blur-xl",
+				role: "presentation",
+				children: /* @__PURE__ */ jsx("div", { className: cn(CONIC_GRADIENT_CLASSES) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "absolute inset-0 overflow-hidden rounded-card bg-border",
+				role: "presentation",
+				children: /* @__PURE__ */ jsx("div", { className: cn(CONIC_GRADIENT_CLASSES) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative m-px rounded-[calc(var(--radius-card)-1px)] bg-card text-card-foreground",
+				children
+			})
+		]
+	});
+};
+export { GlowBorder };
+
+//# sourceMappingURL=glow-border.js.map

package/dist/components/glow-border/glow-border.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glow-border.js","names":[],"sources":["../../../src/components/glow-border/glow-border.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nconst CONIC_GRADIENT_CLASSES = [\n  'pointer-events-none absolute top-1/2 left-1/2 aspect-square w-[300%] -translate-x-1/2 -translate-y-1/2',\n  'bg-[conic-gradient(from_0deg,transparent_0deg,oklch(0.775_var(--gem-c)_var(--gem-h))_60deg,oklch(0.6_var(--gem-c)_calc(var(--gem-h)+40))_120deg,transparent_180deg,transparent_360deg)]',\n  'motion-safe:animate-spin motion-safe:[animation-duration:5s]',\n];\n\ninterface GlowBorderProps extends ComponentProps<'div'> {\n  glow?: boolean;\n}\n\n/**\n * Frames a \"moment\" surface with a rotating gem gradient border, optionally haloed; with reduced motion the border holds still.\n */\nexport const GlowBorder = ({ children, className, glow = true, ...props }: GlowBorderProps) => {\n  return (\n    <div className={cn('relative isolate rounded-card', className)} data-slot=\"glow-border\" {...props}>\n      {glow && (\n        <div aria-hidden className=\"absolute -inset-1 -z-10 overflow-hidden rounded-card opacity-60 blur-xl\" role=\"presentation\">\n          <div className={cn(CONIC_GRADIENT_CLASSES)} />\n        </div>\n      )}\n      <div aria-hidden className=\"absolute inset-0 overflow-hidden rounded-card bg-border\" role=\"presentation\">\n        <div className={cn(CONIC_GRADIENT_CLASSES)} />\n      </div>\n      <div className=\"relative m-px rounded-[calc(var(--radius-card)-1px)] bg-card text-card-foreground\">{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AAIA,IAAM,yBAAyB;CAC7B;CACA;CACA;AACF;;;;AASA,IAAa,cAAc,EAAE,UAAU,WAAW,OAAO,MAAM,GAAG,YAA6B;CAC7F,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,iCAAiC,SAAS;EAAG,aAAU;EAAc,GAAI;EAA5F,UAAA;GACG,QACC,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IAA0E,MAAK;IACxG,UAAA,oBAAC,OAAD,EAAK,WAAW,GAAG,sBAAsB,EAAI,CAAA;GAC1C,CAAA;GAEP,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IAA0D,MAAK;IACxF,UAAA,oBAAC,OAAD,EAAK,WAAW,GAAG,sBAAsB,EAAI,CAAA;GAC1C,CAAA;GACL,oBAAC,OAAD;IAAK,WAAU;IAAqF;GAAc,CAAA;EAC/G;;AAET"}

package/dist/components/hex-field/hex-field.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+interface HexFieldProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    animated?: boolean;
+    columns?: number;
+    fade?: 'bottom' | 'none' | 'radial';
+    rows?: number;
+}
+/**
+ * Draws refine.studio's hex grid as light SVG in `currentColor`, three-toned and swept by a slow diagonal wave.
+ */
+export declare const HexField: ({ animated, className, columns, fade, rows, ...props }: HexFieldProps) => import("react").JSX.Element;
+export {};