@refine-studio/ui 0.0.0 → 0.2.0

package/dist/components/sheet/sheet.js

@@ -0,0 +1,130 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { RefineIconCloseMD } from "../../icons/refine-icons.js";
+import { DIALOG_CLOSE_CLASS_NAME, DIALOG_OVERLAY_CLASS_NAME } from "../dialog/dialog.js";
+import { Dialog } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/sheet/sheet.tsx
+var sheetContentVariants = cva(["fixed z-50 flex flex-col bg-popover text-popover-foreground shadow-float outline-none", "ease-out-expo data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300"], {
+	variants: {
+		side: {
+			right: "inset-y-0 right-0 h-full w-[calc(100vw-2rem)] border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+			left: "inset-y-0 left-0 h-full w-[calc(100vw-2rem)] border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+			top: "inset-x-0 top-0 max-h-[85dvh] border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+			bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-panel border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			side: ["left", "right"],
+			size: "sm",
+			className: "max-w-sm"
+		},
+		{
+			side: ["left", "right"],
+			size: "md",
+			className: "max-w-lg"
+		},
+		{
+			side: ["left", "right"],
+			size: "lg",
+			className: "max-w-3xl"
+		}
+	],
+	defaultVariants: {
+		side: "right",
+		size: "md"
+	}
+});
+/**
+* Holds the open state of a panel that slides in from an edge of the screen.
+*/
+var Sheet = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+};
+var SheetTrigger = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+};
+var SheetClose = (props) => {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+};
+/**
+* Portals the sliding panel above a blurred scrim, from the given `side`.
+*/
+var SheetContent = ({ children, className, showClose = true, side, size, ...props }) => {
+	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+		className: DIALOG_OVERLAY_CLASS_NAME,
+		"data-slot": "sheet-overlay"
+	}), /* @__PURE__ */ jsxs(Dialog.Content, {
+		className: cn(sheetContentVariants({
+			side,
+			size
+		}), className),
+		"data-slot": "sheet-content",
+		...props,
+		children: [children, showClose && /* @__PURE__ */ jsxs(Dialog.Close, {
+			className: DIALOG_CLOSE_CLASS_NAME,
+			title: "Close",
+			children: [/* @__PURE__ */ jsx(RefineIconCloseMD, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+var SheetHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-1.5 border-b p-6 pr-14", className),
+		"data-slot": "sheet-header",
+		...props
+	});
+};
+/**
+* Scrolls the sheet's main content between its header and footer.
+*/
+var SheetBody = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("min-h-0 flex-1 overflow-y-auto p-6", className),
+		"data-slot": "sheet-body",
+		...props
+	});
+};
+var SheetFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mt-auto flex flex-col-reverse gap-2 border-t p-6 sm:flex-row sm:justify-end", className),
+		"data-slot": "sheet-footer",
+		...props
+	});
+};
+var SheetTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		className: cn("text-headline-sm text-foreground", className),
+		"data-slot": "sheet-title",
+		...props
+	});
+};
+var SheetDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		className: cn("text-body-sm text-muted-foreground", className),
+		"data-slot": "sheet-description",
+		...props
+	});
+};
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+
+//# sourceMappingURL=sheet.js.map

package/dist/components/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../../src/components/sheet/sheet.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Dialog as SheetPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { DIALOG_CLOSE_CLASS_NAME, DIALOG_OVERLAY_CLASS_NAME } from '../dialog/dialog';\nimport { RefineIconCloseMD } from '../../icons/refine-icons';\n\nconst sheetContentVariants = cva(\n  [\n    // base\n    'fixed z-50 flex flex-col bg-popover text-popover-foreground shadow-float outline-none',\n    // animation\n    'ease-out-expo data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300',\n  ],\n  {\n    variants: {\n      side: {\n        right:\n          'inset-y-0 right-0 h-full w-[calc(100vw-2rem)] border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n        left: 'inset-y-0 left-0 h-full w-[calc(100vw-2rem)] border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',\n        top: 'inset-x-0 top-0 max-h-[85dvh] border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-panel border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n      },\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n      },\n    },\n    compoundVariants: [\n      {\n        side: ['left', 'right'],\n        size: 'sm',\n        className: 'max-w-sm',\n      },\n      {\n        side: ['left', 'right'],\n        size: 'md',\n        className: 'max-w-lg',\n      },\n      {\n        side: ['left', 'right'],\n        size: 'lg',\n        className: 'max-w-3xl',\n      },\n    ],\n    defaultVariants: {\n      side: 'right',\n      size: 'md',\n    },\n  },\n);\n\n/**\n * Holds the open state of a panel that slides in from an edge of the screen.\n */\nexport const Sheet = (props: ComponentProps<typeof SheetPrimitive.Root>) => {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n};\n\nexport const SheetTrigger = (props: ComponentProps<typeof SheetPrimitive.Trigger>) => {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n};\n\nexport const SheetClose = (props: ComponentProps<typeof SheetPrimitive.Close>) => {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n};\n\ninterface SheetContentProps\n  extends ComponentProps<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetContentVariants> {\n  showClose?: boolean;\n}\n\n/**\n * Portals the sliding panel above a blurred scrim, from the given `side`.\n */\nexport const SheetContent = ({ children, className, showClose = true, side, size, ...props }: SheetContentProps) => {\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay className={DIALOG_OVERLAY_CLASS_NAME} data-slot=\"sheet-overlay\" />\n      <SheetPrimitive.Content\n        className={cn(sheetContentVariants({ side, size }), className)}\n        data-slot=\"sheet-content\"\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <SheetPrimitive.Close className={DIALOG_CLOSE_CLASS_NAME} title=\"Close\">\n            <RefineIconCloseMD className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  );\n};\n\nexport const SheetHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div className={cn('flex flex-col gap-1.5 border-b p-6 pr-14', className)} data-slot=\"sheet-header\" {...props} />\n  );\n};\n\n/**\n * Scrolls the sheet's main content between its header and footer.\n */\nexport const SheetBody = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('min-h-0 flex-1 overflow-y-auto p-6', className)} data-slot=\"sheet-body\" {...props} />;\n};\n\nexport const SheetFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('mt-auto flex flex-col-reverse gap-2 border-t p-6 sm:flex-row sm:justify-end', className)}\n      data-slot=\"sheet-footer\"\n      {...props}\n    />\n  );\n};\n\nexport const SheetTitle = ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) => {\n  return (\n    <SheetPrimitive.Title\n      className={cn('text-headline-sm text-foreground', className)}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n};\n\nexport const SheetDescription = ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>) => {\n  return (\n    <SheetPrimitive.Description\n      className={cn('text-body-sm text-muted-foreground', className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAUA,IAAM,uBAAuB,IAC3B,CAEE,yFAEA,4IACF,GACA;CACE,UAAU;EACR,MAAM;GACJ,OACE;GACF,MAAM;GACN,KAAK;GACL,QACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,kBAAkB;EAChB;GACE,MAAM,CAAC,QAAQ,OAAO;GACtB,MAAM;GACN,WAAW;EACb;EACA;GACE,MAAM,CAAC,QAAQ,OAAO;GACtB,MAAM;GACN,WAAW;EACb;EACA;GACE,MAAM,CAAC,QAAQ,OAAO;GACtB,MAAM;GACN,WAAW;EACb;CACF;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;CACR;AACF,CACF;;;;AAKA,IAAa,SAAS,UAAsD;CAC1E,OAAO,oBAACA,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,UAAyD;CACpF,OAAO,oBAACA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,cAAc,UAAuD;CAChF,OAAO,oBAACA,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;;;;AAWA,IAAa,gBAAgB,EAAE,UAAU,WAAW,YAAY,MAAM,MAAM,MAAM,GAAG,YAA+B;CAClH,OACE,qBAACA,OAAe,QAAhB,EAAA,UAAA,CACE,oBAACA,OAAe,SAAhB;EAAwB,WAAW;EAA2B,aAAU;CAAiB,CAAA,GACzF,qBAACA,OAAe,SAAhB;EACE,WAAW,GAAG,qBAAqB;GAAE;GAAM;EAAK,CAAC,GAAG,SAAS;EAC7D,aAAU;EACV,GAAI;EAHN,UAAA,CAKG,UACA,aACC,qBAACA,OAAe,OAAhB;GAAsB,WAAW;GAAyB,OAAM;GAAhE,UAAA,CACE,oBAAC,mBAAD,EAAmB,WAAU,SAAU,CAAA,GACvC,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EAEF,CAAA,CAAA;CACH,CAAA,CAAA,EAAA,CAAA;AAE3B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAmC;CAC7E,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,4CAA4C,SAAS;EAAG,aAAU;EAAe,GAAI;CAAQ,CAAA;AAEpH;;;;AAKA,IAAa,aAAa,EAAE,WAAW,GAAG,YAAmC;CAC3E,OAAO,oBAAC,OAAD;EAAK,WAAW,GAAG,sCAAsC,SAAS;EAAG,aAAU;EAAa,GAAI;CAAQ,CAAA;AACjH;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAmC;CAC7E,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,+EAA+E,SAAS;EACtG,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAyD;CAClG,OACE,oBAACA,OAAe,OAAhB;EACE,WAAW,GAAG,oCAAoC,SAAS;EAC3D,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA+D;CAC9G,OACE,oBAACA,OAAe,aAAhB;EACE,WAAW,GAAG,sCAAsC,SAAS;EAC7D,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react';
+/**
+ * A shimmering placeholder block; size and shape it with classes to mirror the content that is loading.
+ */
+export declare const Skeleton: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,18 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/skeleton/skeleton.tsx
+/**
+* A shimmering placeholder block; size and shape it with classes to mirror the content that is loading.
+*/
+var Skeleton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		className: cn("animate-shimmer rounded-control skeleton-shimmer", className),
+		"data-slot": "skeleton",
+		role: "presentation",
+		...props
+	});
+};
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * A shimmering placeholder block; size and shape it with classes to mirror the content that is loading.\n */\nexport const Skeleton = ({ className, ...props }: ComponentProps<'div'>) => {\n  return (\n    <div\n      aria-hidden\n      className={cn('animate-shimmer rounded-control skeleton-shimmer', className)}\n      data-slot=\"skeleton\"\n      role=\"presentation\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,YAAY,EAAE,WAAW,GAAG,YAAmC;CAC1E,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,GAAG,oDAAoD,SAAS;EAC3E,aAAU;EACV,MAAK;EACL,GAAI;CACL,CAAA;AAEL"}

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,10 @@
+import { Slider as SliderPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
+    thumbLabelIds?: string[];
+}
+/**
+ * Picks one value, or a range when given two values, along a gem-filled track; `thumbLabelIds` name each thumb through `aria-labelledby`.
+ */
+export declare const Slider: ({ className, defaultValue, max, min, thumbLabelIds, value, ...props }: SliderProps) => import("react").JSX.Element;
+export {};

package/dist/components/slider/slider.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useField, useFieldControl } from "../field/field.js";
+import { Slider } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/slider/slider.tsx
+/**
+* Picks one value, or a range when given two values, along a gem-filled track; `thumbLabelIds` name each thumb through `aria-labelledby`.
+*/
+var Slider$1 = ({ className, defaultValue, max = 100, min = 0, thumbLabelIds, value, ...props }) => {
+	const field = useField();
+	const { id, ...controlProps } = useFieldControl(props);
+	const thumbCount = (value ?? defaultValue ?? [min]).length;
+	return /* @__PURE__ */ jsxs(Slider.Root, {
+		className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-45", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
+		"data-slot": "slider",
+		defaultValue,
+		max,
+		min,
+		value,
+		...controlProps,
+		children: [/* @__PURE__ */ jsx(Slider.Track, {
+			className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+			children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute bg-gem-gradient data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" })
+		}), Array.from({ length: thumbCount }, (_, index) => {
+			return /* @__PURE__ */ jsx(Slider.Thumb, {
+				"aria-labelledby": thumbLabelIds?.[index] ?? (thumbCount === 1 ? field?.labelId : void 0),
+				className: cn("block size-4.5 rounded-full border-2 border-gem bg-background shadow-float", "transition-[transform,box-shadow] duration-150 ease-spring", "focus-ring", "hover:scale-110 hover:shadow-glow", "active:scale-95", "data-disabled:pointer-events-none"),
+				id: index === 0 ? id : void 0
+			}, index);
+		})]
+	});
+};
+export { Slider$1 as Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["Slider","SliderPrimitive"],"sources":["../../../src/components/slider/slider.tsx"],"sourcesContent":["'use client';\n\nimport { Slider as SliderPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useField, useFieldControl } from '../field/field';\n\ninterface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {\n  thumbLabelIds?: string[];\n}\n\n/**\n * Picks one value, or a range when given two values, along a gem-filled track; `thumbLabelIds` name each thumb through `aria-labelledby`.\n */\nexport const Slider = ({ className, defaultValue, max = 100, min = 0, thumbLabelIds, value, ...props }: SliderProps) => {\n  const field = useField();\n  const { id, ...controlProps } = useFieldControl(props);\n  const thumbCount = (value ?? defaultValue ?? [min]).length;\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\n        'relative flex w-full touch-none items-center select-none data-disabled:opacity-45',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',\n        className,\n      )}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      max={max}\n      min={min}\n      value={value}\n      {...controlProps}\n    >\n      <SliderPrimitive.Track className=\"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5\">\n        <SliderPrimitive.Range className=\"absolute bg-gem-gradient data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\" />\n      </SliderPrimitive.Track>\n      {Array.from(\n        {\n          length: thumbCount,\n        },\n        (_, index) => {\n          return (\n            <SliderPrimitive.Thumb\n              aria-labelledby={thumbLabelIds?.[index] ?? (thumbCount === 1 ? field?.labelId : undefined)}\n              className={cn(\n                // base\n                'block size-4.5 rounded-full border-2 border-gem bg-background shadow-float',\n                'transition-[transform,box-shadow] duration-150 ease-spring',\n                'focus-ring',\n                // hover\n                'hover:scale-110 hover:shadow-glow',\n                // active\n                'active:scale-95',\n                // disabled\n                'data-disabled:pointer-events-none',\n              )}\n              id={index === 0 ? id : undefined}\n              key={index}\n            />\n          );\n        },\n      )}\n    </SliderPrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;;AAeA,IAAaA,YAAU,EAAE,WAAW,cAAc,MAAM,KAAK,MAAM,GAAG,eAAe,OAAO,GAAG,YAAyB;CACtH,MAAM,QAAQ,SAAS;CACvB,MAAM,EAAE,IAAI,GAAG,iBAAiB,gBAAgB,KAAK;CACrD,MAAM,cAAc,SAAS,gBAAgB,CAAC,GAAG,EAAA,CAAG;CAEpD,OACE,qBAACC,OAAgB,MAAjB;EACE,WAAW,GACT,qFACA,mJACA,SACF;EACA,aAAU;EACI;EACT;EACA;EACE;EACP,GAAI;EAXN,UAAA,CAaE,oBAACA,OAAgB,OAAjB;GAAuB,WAAU;GAC/B,UAAA,oBAACA,OAAgB,OAAjB,EAAuB,WAAU,mGAAoG,CAAA;EAChH,CAAA,GACtB,MAAM,KACL,EACE,QAAQ,WACV,IACC,GAAG,UAAU;GACZ,OACE,oBAACA,OAAgB,OAAjB;IACE,mBAAiB,gBAAgB,WAAW,eAAe,IAAI,OAAO,UAAU,KAAA;IAChF,WAAW,GAET,8EACA,8DACA,cAEA,qCAEA,mBAEA,mCACF;IACA,IAAI,UAAU,IAAI,KAAK,KAAA;GAExB,GADM,KACN;EAEL,CACF,CACoB;;AAE1B"}

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface SpinnerProps extends ComponentProps<'span'> {
+    label?: string;
+}
+/**
+ * A spinning diamond facet that announces `label` to assistive technology while work is pending.
+ */
+export declare const Spinner: ({ className, label, ...props }: SpinnerProps) => import("react").JSX.Element;
+export {};

package/dist/components/spinner/spinner.js

@@ -0,0 +1,40 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/spinner/spinner.tsx
+/**
+* A spinning diamond facet that announces `label` to assistive technology while work is pending.
+*/
+var Spinner = ({ className, label = "Loading", ...props }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex size-[1em] items-center justify-center", className),
+		"data-slot": "spinner",
+		role: "status",
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": true,
+			className: "size-full animate-facet-spin",
+			fill: "none",
+			role: "presentation",
+			viewBox: "0 0 24 24",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M12 2 21 9.5 12 22 3 9.5Z",
+				opacity: "0.3",
+				stroke: "currentColor",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M12 2 21 9.5 12 22",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+};
+export { Spinner };
+
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface SpinnerProps extends ComponentProps<'span'> {\n  label?: string;\n}\n\n/**\n * A spinning diamond facet that announces `label` to assistive technology while work is pending.\n */\nexport const Spinner = ({ className, label = 'Loading', ...props }: SpinnerProps) => {\n  return (\n    <span className={cn('inline-flex size-[1em] items-center justify-center', className)} data-slot=\"spinner\" role=\"status\" {...props}>\n      <svg aria-hidden className=\"size-full animate-facet-spin\" fill=\"none\" role=\"presentation\" viewBox=\"0 0 24 24\">\n        <path d=\"M12 2 21 9.5 12 22 3 9.5Z\" opacity=\"0.3\" stroke=\"currentColor\" strokeLinejoin=\"round\" strokeWidth=\"2\" />\n        <path d=\"M12 2 21 9.5 12 22\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" />\n      </svg>\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAWA,IAAa,WAAW,EAAE,WAAW,QAAQ,WAAW,GAAG,YAA0B;CACnF,OACE,qBAAC,QAAD;EAAM,WAAW,GAAG,sDAAsD,SAAS;EAAG,aAAU;EAAU,MAAK;EAAS,GAAI;EAA5H,UAAA,CACE,qBAAC,OAAD;GAAK,eAAA;GAAY,WAAU;GAA+B,MAAK;GAAO,MAAK;GAAe,SAAQ;GAAlG,UAAA,CACE,oBAAC,QAAD;IAAM,GAAE;IAA4B,SAAQ;IAAM,QAAO;IAAe,gBAAe;IAAQ,aAAY;GAAK,CAAA,GAChH,oBAAC,QAAD;IAAM,GAAE;IAAqB,QAAO;IAAe,eAAc;IAAQ,gBAAe;IAAQ,aAAY;GAAK,CAAA,CAC9G;EACL,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,CACnC;;AAEV"}

package/dist/components/spotlight/spotlight.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+interface SpotlightProps extends ComponentProps<'div'> {
+    surface?: boolean;
+}
+/**
+ * Wraps content in a surface whose gem glow follows the pointer, without re-rendering on every move.
+ */
+export declare const Spotlight: ({ children, className, onPointerMove, surface, ...props }: SpotlightProps) => import("react").JSX.Element;
+export {};

package/dist/components/spotlight/spotlight.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/spotlight/spotlight.tsx
+/**
+* Wraps content in a surface whose gem glow follows the pointer, without re-rendering on every move.
+*/
+var Spotlight = ({ children, className, onPointerMove, surface = true, ...props }) => {
+	/**
+	* Writes the pointer position relative to the element into its `--spot-x` and `--spot-y` custom properties.
+	*/
+	const handlePointerMove = (event) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		event.currentTarget.style.setProperty("--spot-x", `${event.clientX - rect.left}px`);
+		event.currentTarget.style.setProperty("--spot-y", `${event.clientY - rect.top}px`);
+		onPointerMove?.(event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/spotlight relative isolate overflow-hidden", { "card-surface": surface }, className),
+		"data-slot": "spotlight",
+		onPointerMove: handlePointerMove,
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: cn("pointer-events-none absolute inset-0 -z-10 opacity-0", "bg-[radial-gradient(420px_circle_at_var(--spot-x,50%)_var(--spot-y,0%),oklch(var(--gem-l)_var(--gem-c)_var(--gem-h)/0.22),transparent_65%)]", "group-hover/spotlight:opacity-100", "transition-opacity duration-300"),
+			role: "presentation"
+		}), children]
+	});
+};
+export { Spotlight };
+
+//# sourceMappingURL=spotlight.js.map

package/dist/components/spotlight/spotlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spotlight.js","names":[],"sources":["../../../src/components/spotlight/spotlight.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, PointerEvent } from 'react';\n\nimport { cn } from '../../lib/cn';\n\ninterface SpotlightProps extends ComponentProps<'div'> {\n  surface?: boolean;\n}\n\n/**\n * Wraps content in a surface whose gem glow follows the pointer, without re-rendering on every move.\n */\nexport const Spotlight = ({ children, className, onPointerMove, surface = true, ...props }: SpotlightProps) => {\n  /**\n   * Writes the pointer position relative to the element into its `--spot-x` and `--spot-y` custom properties.\n   */\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    // Writing custom properties straight to the element keeps a 60fps pointer stream out of React state; it is the one sanctioned inline style.\n    event.currentTarget.style.setProperty('--spot-x', `${event.clientX - rect.left}px`);\n    event.currentTarget.style.setProperty('--spot-y', `${event.clientY - rect.top}px`);\n    onPointerMove?.(event);\n  };\n\n  return (\n    <div\n      className={cn('group/spotlight relative isolate overflow-hidden', { 'card-surface': surface }, className)}\n      data-slot=\"spotlight\"\n      onPointerMove={handlePointerMove}\n      {...props}\n    >\n      <div\n        aria-hidden\n        className={cn(\n          // base\n          'pointer-events-none absolute inset-0 -z-10 opacity-0',\n          'bg-[radial-gradient(420px_circle_at_var(--spot-x,50%)_var(--spot-y,0%),oklch(var(--gem-l)_var(--gem-c)_var(--gem-h)/0.22),transparent_65%)]',\n          // hover\n          'group-hover/spotlight:opacity-100',\n          // animation\n          'transition-opacity duration-300',\n        )}\n        role=\"presentation\"\n      />\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAaA,IAAa,aAAa,EAAE,UAAU,WAAW,eAAe,UAAU,MAAM,GAAG,YAA4B;;;;CAI7G,MAAM,qBAAqB,UAAwC;EACjE,MAAM,OAAO,MAAM,cAAc,sBAAsB;EAEvD,MAAM,cAAc,MAAM,YAAY,YAAY,GAAG,MAAM,UAAU,KAAK,KAAK,GAAG;EAClF,MAAM,cAAc,MAAM,YAAY,YAAY,GAAG,MAAM,UAAU,KAAK,IAAI,GAAG;EACjF,gBAAgB,KAAK;CACvB;CAEA,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,oDAAoD,EAAE,gBAAgB,QAAQ,GAAG,SAAS;EACxG,aAAU;EACV,eAAe;EACf,GAAI;EAJN,UAAA,CAME,oBAAC,OAAD;GACE,eAAA;GACA,WAAW,GAET,wDACA,+IAEA,qCAEA,iCACF;GACA,MAAK;EACN,CAAA,GACA,QACE;;AAET"}

package/dist/components/starfield/starfield.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'react';
+interface StarfieldProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    density?: number;
+    seed?: number;
+    twinkleEvery?: number;
+}
+/**
+ * Draws a procedural star field in `currentColor` that covers its parent; set the colour with a text utility.
+ */
+export declare const Starfield: ({ className, density, seed, twinkleEvery, ...props }: StarfieldProps) => import("react").JSX.Element;
+export {};

package/dist/components/starfield/starfield.js

@@ -0,0 +1,76 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/starfield/starfield.tsx
+var VIEW_WIDTH = 1920;
+var VIEW_HEIGHT = 480;
+/**
+* Returns a deterministic pseudo-random generator, so a given seed always draws the same sky on server and client.
+*/
+var createRandom = (seed) => {
+	let state = seed;
+	return () => {
+		state = (state * 1664525 + 1013904223) % 4294967296;
+		return state / 4294967296;
+	};
+};
+/**
+* Maps a 0–1 brightness roll to a star radius: mostly specks, some mid stars and a rare bright one.
+*/
+var radiusFor = (brightness) => {
+	if (brightness > .96) return 2.2;
+	if (brightness > .8) return 1.4;
+	return .8;
+};
+/**
+* Scatters `starCount` stars across the view box, mostly tiny, a few bright, and roughly one in `twinkleEvery` twinkling.
+*/
+var buildStars = (seed, starCount, twinkleEvery) => {
+	const random = createRandom(seed);
+	return Array.from({ length: starCount }, (_, index) => {
+		const brightness = random();
+		return {
+			delayIndex: index % 8,
+			radius: radiusFor(brightness),
+			twinkles: twinkleEvery > 0 && index % twinkleEvery === 0,
+			x: random() * VIEW_WIDTH,
+			y: random() * VIEW_HEIGHT
+		};
+	});
+};
+var DELAY_CLASSES = [
+	"[animation-delay:0s]",
+	"[animation-delay:-0.5s]",
+	"[animation-delay:-1s]",
+	"[animation-delay:-1.5s]",
+	"[animation-delay:-2s]",
+	"[animation-delay:-2.5s]",
+	"[animation-delay:-3s]",
+	"[animation-delay:-3.5s]"
+];
+/**
+* Draws a procedural star field in `currentColor` that covers its parent; set the colour with a text utility.
+*/
+var Starfield = ({ className, density = 260, seed = 1688, twinkleEvery = 7, ...props }) => {
+	const stars = buildStars(seed, density, twinkleEvery);
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		className: cn("pointer-events-none size-full text-foreground/40", className),
+		"data-slot": "starfield",
+		fill: "currentColor",
+		preserveAspectRatio: "xMidYMid slice",
+		role: "presentation",
+		viewBox: `0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`,
+		...props,
+		children: stars.map((star) => {
+			return /* @__PURE__ */ jsx("circle", {
+				className: cn({ [`motion-safe:animate-twinkle ${DELAY_CLASSES[star.delayIndex]}`]: star.twinkles }),
+				cx: star.x.toFixed(1),
+				cy: star.y.toFixed(1),
+				r: star.radius
+			}, `${star.x}-${star.y}`);
+		})
+	});
+};
+export { Starfield };
+
+//# sourceMappingURL=starfield.js.map

package/dist/components/starfield/starfield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"starfield.js","names":[],"sources":["../../../src/components/starfield/starfield.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nconst VIEW_WIDTH = 1920;\nconst VIEW_HEIGHT = 480;\n\ninterface Star {\n  delayIndex: number;\n  radius: number;\n  twinkles: boolean;\n  x: number;\n  y: number;\n}\n\n/**\n * Returns a deterministic pseudo-random generator, so a given seed always draws the same sky on server and client.\n */\nconst createRandom = (seed: number) => {\n  let state = seed;\n\n  return () => {\n    state = (state * 1_664_525 + 1_013_904_223) % 4_294_967_296;\n\n    return state / 4_294_967_296;\n  };\n};\n\n/**\n * Maps a 0–1 brightness roll to a star radius: mostly specks, some mid stars and a rare bright one.\n */\nconst radiusFor = (brightness: number) => {\n  if (brightness > 0.96) return 2.2;\n  if (brightness > 0.8) return 1.4;\n\n  return 0.8;\n};\n\n/**\n * Scatters `starCount` stars across the view box, mostly tiny, a few bright, and roughly one in `twinkleEvery` twinkling.\n */\nconst buildStars = (seed: number, starCount: number, twinkleEvery: number) => {\n  const random = createRandom(seed);\n\n  return Array.from(\n    {\n      length: starCount,\n    },\n    (_, index): Star => {\n      const brightness = random();\n\n      return {\n        delayIndex: index % 8,\n        radius: radiusFor(brightness),\n        twinkles: twinkleEvery > 0 && index % twinkleEvery === 0,\n        x: random() * VIEW_WIDTH,\n        y: random() * VIEW_HEIGHT,\n      };\n    },\n  );\n};\n\nconst DELAY_CLASSES = [\n  '[animation-delay:0s]',\n  '[animation-delay:-0.5s]',\n  '[animation-delay:-1s]',\n  '[animation-delay:-1.5s]',\n  '[animation-delay:-2s]',\n  '[animation-delay:-2.5s]',\n  '[animation-delay:-3s]',\n  '[animation-delay:-3.5s]',\n];\n\ninterface StarfieldProps extends Omit<ComponentProps<'svg'>, 'children'> {\n  density?: number;\n  seed?: number;\n  twinkleEvery?: number;\n}\n\n/**\n * Draws a procedural star field in `currentColor` that covers its parent; set the colour with a text utility.\n */\nexport const Starfield = ({ className, density = 260, seed = 1688, twinkleEvery = 7, ...props }: StarfieldProps) => {\n  const stars = buildStars(seed, density, twinkleEvery);\n\n  return (\n    <svg\n      aria-hidden\n      className={cn('pointer-events-none size-full text-foreground/40', className)}\n      data-slot=\"starfield\"\n      fill=\"currentColor\"\n      preserveAspectRatio=\"xMidYMid slice\"\n      role=\"presentation\"\n      viewBox={`0 0 ${VIEW_WIDTH} ${VIEW_HEIGHT}`}\n      {...props}\n    >\n      {stars.map((star) => {\n        return (\n          <circle\n            className={cn({\n              [`motion-safe:animate-twinkle ${DELAY_CLASSES[star.delayIndex]}`]: star.twinkles,\n            })}\n            cx={star.x.toFixed(1)}\n            cy={star.y.toFixed(1)}\n            key={`${star.x}-${star.y}`}\n            r={star.radius}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],"mappings":";;;AAIA,IAAM,aAAa;AACnB,IAAM,cAAc;;;;AAapB,IAAM,gBAAgB,SAAiB;CACrC,IAAI,QAAQ;CAEZ,aAAa;EACX,SAAS,QAAQ,UAAY,cAAiB;EAE9C,OAAO,QAAQ;CACjB;AACF;;;;AAKA,IAAM,aAAa,eAAuB;CACxC,IAAI,aAAa,KAAM,OAAO;CAC9B,IAAI,aAAa,IAAK,OAAO;CAE7B,OAAO;AACT;;;;AAKA,IAAM,cAAc,MAAc,WAAmB,iBAAyB;CAC5E,MAAM,SAAS,aAAa,IAAI;CAEhC,OAAO,MAAM,KACX,EACE,QAAQ,UACV,IACC,GAAG,UAAgB;EAClB,MAAM,aAAa,OAAO;EAE1B,OAAO;GACL,YAAY,QAAQ;GACpB,QAAQ,UAAU,UAAU;GAC5B,UAAU,eAAe,KAAK,QAAQ,iBAAiB;GACvD,GAAG,OAAO,IAAI;GACd,GAAG,OAAO,IAAI;EAChB;CACF,CACF;AACF;AAEA,IAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;AAWA,IAAa,aAAa,EAAE,WAAW,UAAU,KAAK,OAAO,MAAM,eAAe,GAAG,GAAG,YAA4B;CAClH,MAAM,QAAQ,WAAW,MAAM,SAAS,YAAY;CAEpD,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,GAAG,oDAAoD,SAAS;EAC3E,aAAU;EACV,MAAK;EACL,qBAAoB;EACpB,MAAK;EACL,SAAS,OAAO,WAAW,GAAG;EAC9B,GAAI;EAEH,UAAA,MAAM,KAAK,SAAS;GACnB,OACE,oBAAC,UAAD;IACE,WAAW,GAAG,GACX,+BAA+B,cAAc,KAAK,gBAAgB,KAAK,SAC1E,CAAC;IACD,IAAI,KAAK,EAAE,QAAQ,CAAC;IACpB,IAAI,KAAK,EAAE,QAAQ,CAAC;IAEpB,GAAG,KAAK;GACT,GAFM,GAAG,KAAK,EAAE,GAAG,KAAK,GAExB;EAEL,CAAC;CACE,CAAA;AAET"}

package/dist/components/stat/stat.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps, ReactNode } from 'react';
+declare const TREND_CLASS_BY_TREND: {
+    down: string;
+    flat: string;
+    up: string;
+};
+interface StatProps extends Omit<ComponentProps<'div'>, 'children'> {
+    delta?: ReactNode;
+    index?: string;
+    label: ReactNode;
+    size?: 'lg' | 'md' | 'sm' | 'xs';
+    sparkline?: ReactNode;
+    trend?: keyof typeof TREND_CLASS_BY_TREND;
+    unit?: ReactNode;
+    value: ReactNode;
+}
+/**
+ * An editorial figure: a mono index and label above a heavy tabular number, with an optional trend delta on a tinted pill and sparkline.
+ */
+export declare const Stat: ({ className, delta, index, label, size, sparkline, trend, unit, value, ...props }: StatProps) => import("react").JSX.Element;
+interface SparklineProps extends Omit<ComponentProps<'svg'>, 'values'> {
+    values: number[];
+}
+/**
+ * Draws a minimal line-and-area chart of `values` in the current text colour, scaled to fill its box.
+ */
+export declare const Sparkline: ({ className, values, ...props }: SparklineProps) => import("react").JSX.Element;
+export {};

package/dist/components/stat/stat.js

@@ -0,0 +1,100 @@
+import { cn } from "../../lib/cn.js";
+import { RefineIconArrowDownRightSM, RefineIconArrowUpRightSM, RefineIconRemoveMinus } from "../../icons/refine-icons.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/stat/stat.tsx
+var TREND_CLASS_BY_TREND = {
+	down: "bg-danger-soft text-danger-ink",
+	flat: "bg-muted text-muted-foreground",
+	up: "bg-success-soft text-success-ink"
+};
+var TREND_ICON_BY_TREND = {
+	down: RefineIconArrowDownRightSM,
+	flat: RefineIconRemoveMinus,
+	up: RefineIconArrowUpRightSM
+};
+var VALUE_CLASS_BY_SIZE = {
+	lg: "text-display-md",
+	md: "text-display-sm",
+	sm: "text-headline-lg",
+	xs: "text-headline-md"
+};
+/**
+* An editorial figure: a mono index and label above a heavy tabular number, with an optional trend delta on a tinted pill and sparkline.
+*/
+var Stat = ({ className, delta, index, label, size = "md", sparkline, trend = "flat", unit, value, ...props }) => {
+	const TrendIcon = TREND_ICON_BY_TREND[trend];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-3", className),
+		"data-slot": "stat",
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-2 text-muted-foreground",
+				children: [index && /* @__PURE__ */ jsx("span", {
+					className: "eyebrow text-gem-ink",
+					children: index
+				}), /* @__PURE__ */ jsx("span", {
+					className: "eyebrow truncate",
+					children: label
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-end justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: cn("font-display font-black tracking-tight tabular-nums", VALUE_CLASS_BY_SIZE[size]),
+					children: [value, unit && /* @__PURE__ */ jsx("span", {
+						className: "ml-1 text-body font-semibold tracking-normal text-muted-foreground",
+						children: unit
+					})]
+				}), sparkline && /* @__PURE__ */ jsx("div", {
+					className: "h-10 w-24 shrink-0 text-gem",
+					children: sparkline
+				})]
+			}),
+			delta && /* @__PURE__ */ jsxs("p", {
+				className: cn("flex w-fit items-center gap-1 rounded-full ps-1.5 pe-2 text-body-sm font-semibold tabular-nums", TREND_CLASS_BY_TREND[trend]),
+				children: [/* @__PURE__ */ jsx(TrendIcon, {
+					"aria-hidden": true,
+					className: "size-4",
+					role: "presentation"
+				}), delta]
+			})
+		]
+	});
+};
+/**
+* Draws a minimal line-and-area chart of `values` in the current text colour, scaled to fill its box.
+*/
+var Sparkline = ({ className, values, ...props }) => {
+	const max = Math.max(...values);
+	const min = Math.min(...values);
+	const range = max - min || 1;
+	const points = values.map((value, index) => {
+		return `${index / Math.max(values.length - 1, 1) * 100},${36 - (value - min) / range * 32}`;
+	});
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
+		className: cn("size-full overflow-visible", className),
+		"data-slot": "sparkline",
+		preserveAspectRatio: "none",
+		role: "presentation",
+		viewBox: "0 0 100 40",
+		...props,
+		children: [/* @__PURE__ */ jsx("polygon", {
+			fill: "currentColor",
+			opacity: "0.12",
+			points: `0,40 ${points.join(" ")} 100,40`
+		}), /* @__PURE__ */ jsx("polyline", {
+			fill: "none",
+			points: points.join(" "),
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			vectorEffect: "non-scaling-stroke"
+		})]
+	});
+};
+export { Sparkline, Stat };
+
+//# sourceMappingURL=stat.js.map

package/dist/components/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","names":[],"sources":["../../../src/components/stat/stat.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { RefineIconArrowDownRightSM, RefineIconArrowUpRightSM, RefineIconRemoveMinus } from '../../icons/refine-icons';\n\nconst TREND_CLASS_BY_TREND = {\n  down: 'bg-danger-soft text-danger-ink',\n  flat: 'bg-muted text-muted-foreground',\n  up: 'bg-success-soft text-success-ink',\n} satisfies Record<string, string>;\n\nconst TREND_ICON_BY_TREND = {\n  down: RefineIconArrowDownRightSM,\n  flat: RefineIconRemoveMinus,\n  up: RefineIconArrowUpRightSM,\n} satisfies Record<keyof typeof TREND_CLASS_BY_TREND, typeof RefineIconRemoveMinus>;\n\ninterface StatProps extends Omit<ComponentProps<'div'>, 'children'> {\n  delta?: ReactNode;\n  index?: string;\n  label: ReactNode;\n  size?: 'lg' | 'md' | 'sm' | 'xs';\n  sparkline?: ReactNode;\n  trend?: keyof typeof TREND_CLASS_BY_TREND;\n  unit?: ReactNode;\n  value: ReactNode;\n}\n\nconst VALUE_CLASS_BY_SIZE = {\n  lg: 'text-display-md',\n  md: 'text-display-sm',\n  sm: 'text-headline-lg',\n  xs: 'text-headline-md',\n} satisfies Record<NonNullable<StatProps['size']>, string>;\n\n/**\n * An editorial figure: a mono index and label above a heavy tabular number, with an optional trend delta on a tinted pill and sparkline.\n */\nexport const Stat = ({\n  className,\n  delta,\n  index,\n  label,\n  size = 'md',\n  sparkline,\n  trend = 'flat',\n  unit,\n  value,\n  ...props\n}: StatProps) => {\n  const TrendIcon = TREND_ICON_BY_TREND[trend];\n\n  return (\n    <div className={cn('flex min-w-0 flex-col gap-3', className)} data-slot=\"stat\" {...props}>\n      <div className=\"flex items-baseline gap-2 text-muted-foreground\">\n        {index && <span className=\"eyebrow text-gem-ink\">{index}</span>}\n        <span className=\"eyebrow truncate\">{label}</span>\n      </div>\n      <div className=\"flex items-end justify-between gap-4\">\n        <p className={cn('font-display font-black tracking-tight tabular-nums', VALUE_CLASS_BY_SIZE[size])}>\n          {value}\n          {unit && <span className=\"ml-1 text-body font-semibold tracking-normal text-muted-foreground\">{unit}</span>}\n        </p>\n        {sparkline && <div className=\"h-10 w-24 shrink-0 text-gem\">{sparkline}</div>}\n      </div>\n      {delta && (\n        <p\n          className={cn(\n            'flex w-fit items-center gap-1 rounded-full ps-1.5 pe-2 text-body-sm font-semibold tabular-nums',\n            TREND_CLASS_BY_TREND[trend],\n          )}\n        >\n          <TrendIcon aria-hidden className=\"size-4\" role=\"presentation\" />\n          {delta}\n        </p>\n      )}\n    </div>\n  );\n};\n\ninterface SparklineProps extends Omit<ComponentProps<'svg'>, 'values'> {\n  values: number[];\n}\n\n/**\n * Draws a minimal line-and-area chart of `values` in the current text colour, scaled to fill its box.\n */\nexport const Sparkline = ({ className, values, ...props }: SparklineProps) => {\n  const max = Math.max(...values);\n  const min = Math.min(...values);\n  const range = max - min || 1;\n  const points = values.map((value, index) => {\n    return `${(index / Math.max(values.length - 1, 1)) * 100},${36 - ((value - min) / range) * 32}`;\n  });\n\n  return (\n    <svg\n      aria-hidden\n      className={cn('size-full overflow-visible', className)}\n      data-slot=\"sparkline\"\n      preserveAspectRatio=\"none\"\n      role=\"presentation\"\n      viewBox=\"0 0 100 40\"\n      {...props}\n    >\n      <polygon fill=\"currentColor\" opacity=\"0.12\" points={`0,40 ${points.join(' ')} 100,40`} />\n      <polyline\n        fill=\"none\"\n        points={points.join(' ')}\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n    </svg>\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,uBAAuB;CAC3B,MAAM;CACN,MAAM;CACN,IAAI;AACN;AAEA,IAAM,sBAAsB;CAC1B,MAAM;CACN,MAAM;CACN,IAAI;AACN;AAaA,IAAM,sBAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;AAKA,IAAa,QAAQ,EACnB,WACA,OACA,OACA,OACA,OAAO,MACP,WACA,QAAQ,QACR,MACA,OACA,GAAG,YACY;CACf,MAAM,YAAY,oBAAoB;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,+BAA+B,SAAS;EAAG,aAAU;EAAO,GAAI;EAAnF,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,oBAAC,QAAD;KAAM,WAAU;KAAwB,UAAA;IAAY,CAAA,GAC9D,oBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA;IAAY,CAAA,CAC7C;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,KAAD;KAAG,WAAW,GAAG,uDAAuD,oBAAoB,KAAK;KAAjG,UAAA,CACG,OACA,QAAQ,oBAAC,QAAD;MAAM,WAAU;MAAsE,UAAA;KAAW,CAAA,CACzG;IACF,CAAA,GAAA,aAAa,oBAAC,OAAD;KAAK,WAAU;KAA+B,UAAA;IAAe,CAAA,CACxE;;GACJ,SACC,qBAAC,KAAD;IACE,WAAW,GACT,kGACA,qBAAqB,MACvB;IAJF,UAAA,CAME,oBAAC,WAAD;KAAW,eAAA;KAAY,WAAU;KAAS,MAAK;IAAgB,CAAA,GAC9D,KACA;;EAEF;;AAET;;;;AASA,IAAa,aAAa,EAAE,WAAW,QAAQ,GAAG,YAA4B;CAC5E,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,MAAM,KAAK,IAAI,GAAG,MAAM;CAC9B,MAAM,QAAQ,MAAM,OAAO;CAC3B,MAAM,SAAS,OAAO,KAAK,OAAO,UAAU;EAC1C,OAAO,GAAI,QAAQ,KAAK,IAAI,OAAO,SAAS,GAAG,CAAC,IAAK,IAAI,GAAG,MAAO,QAAQ,OAAO,QAAS;CAC7F,CAAC;CAED,OACE,qBAAC,OAAD;EACE,eAAA;EACA,WAAW,GAAG,8BAA8B,SAAS;EACrD,aAAU;EACV,qBAAoB;EACpB,MAAK;EACL,SAAQ;EACR,GAAI;EAPN,UAAA,CASE,oBAAC,WAAD;GAAS,MAAK;GAAe,SAAQ;GAAO,QAAQ,QAAQ,OAAO,KAAK,GAAG,EAAE;EAAW,CAAA,GACxF,oBAAC,YAAD;GACE,MAAK;GACL,QAAQ,OAAO,KAAK,GAAG;GACvB,QAAO;GACP,eAAc;GACd,gBAAe;GACf,aAAY;GACZ,cAAa;EACd,CAAA,CACE;;AAET"}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SwitchProps extends ComponentProps<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {
+}
+/**
+ * Toggles a setting on or off immediately, filling with the current gem when on.
+ */
+export declare const Switch: ({ className, size, ...props }: SwitchProps) => import("react").JSX.Element;
+export {};