@refine-studio/ui 0.0.0 → 0.1.0

package/dist/components/hex-field/hex-field.js

@@ -0,0 +1,86 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/hex-field/hex-field.tsx
+var CELL_RADIUS = 20;
+var GAP_FACTOR = .92;
+var COLUMN_SPACING = CELL_RADIUS * Math.sqrt(3);
+var ROW_SPACING = CELL_RADIUS * 1.5;
+var TONE_OPACITIES = [
+	.03,
+	.07,
+	.12
+];
+var BAND_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]",
+	"[animation-delay:-4s]",
+	"[animation-delay:-4.5s]",
+	"[animation-delay:-5s]",
+	"[animation-delay:-5.5s]"
+];
+/**
+* Returns the polygon points of a pointy-top hexagon of `radius` centred on the origin.
+*/
+var hexagonPoints = (radius) => {
+	return Array.from({ length: 6 }, (_, corner) => {
+		const angle = Math.PI / 180 * (60 * corner - 90);
+		return `${(radius * Math.cos(angle)).toFixed(2)},${(radius * Math.sin(angle)).toFixed(2)}`;
+	}).join(" ");
+};
+var HEXAGON_POINTS = hexagonPoints(CELL_RADIUS * GAP_FACTOR);
+/**
+* Lays out an odd-row-offset grid and gives each cell one of three tones, so no two neighbours share a tone.
+*/
+var buildCells = (columnCount, rowCount) => {
+	return Array.from({ length: columnCount * rowCount }, (_, index) => {
+		const row = Math.floor(index / columnCount);
+		const column = index % columnCount;
+		const axialQ = column - (row - (row & 1)) / 2;
+		return {
+			band: (column + row) % BAND_DELAY_CLASSES.length,
+			tone: ((axialQ - row) % 3 + 3) % 3,
+			x: column * COLUMN_SPACING + (row % 2 === 1 ? COLUMN_SPACING / 2 : 0),
+			y: row * ROW_SPACING
+		};
+	});
+};
+/**
+* Draws refine.studio's hex grid as light SVG in `currentColor`, three-toned and swept by a slow diagonal wave.
+*/
+var HexField = ({ animated = true, className, columns = 32, fade = "radial", rows = 16, ...props }) => {
+	const cells = buildCells(columns, rows);
+	const width = (columns + .5) * COLUMN_SPACING;
+	const height = (rows - 1) * ROW_SPACING + 40;
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		className: cn("pointer-events-none size-full text-foreground", {
+			"[mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_72%)]": fade === "radial",
+			"mask-fade-b": fade === "bottom"
+		}, className),
+		"data-slot": "hex-field",
+		preserveAspectRatio: "xMidYMid slice",
+		role: "presentation",
+		viewBox: `${-COLUMN_SPACING / 2} -20 ${width} ${height}`,
+		...props,
+		children: cells.map((cell) => {
+			return /* @__PURE__ */ jsx("polygon", {
+				className: cn({ [`opacity-60 motion-safe:animate-hex-wave ${BAND_DELAY_CLASSES[cell.band]}`]: animated }),
+				fill: "currentColor",
+				fillOpacity: TONE_OPACITIES[cell.tone],
+				points: HEXAGON_POINTS,
+				stroke: "currentColor",
+				strokeOpacity: .08,
+				transform: `translate(${cell.x.toFixed(2)} ${cell.y.toFixed(2)})`
+			}, `${cell.x}-${cell.y}`);
+		})
+	});
+};
+export { HexField };
+
+//# sourceMappingURL=hex-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hex-field.js","names":[],"sources":["../../../src/components/hex-field/hex-field.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nconst CELL_RADIUS = 20;\nconst GAP_FACTOR = 0.92;\nconst COLUMN_SPACING = CELL_RADIUS * Math.sqrt(3);\nconst ROW_SPACING = CELL_RADIUS * 1.5;\nconst TONE_OPACITIES = [0.03, 0.07, 0.12];\n\n// Twelve diagonal bands, each half a second behind the last, turn the 6s keyframe into a travelling wave.\nconst BAND_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  '[animation-delay:-4s]',\n  '[animation-delay:-4.5s]',\n  '[animation-delay:-5s]',\n  '[animation-delay:-5.5s]',\n];\n\n/**\n * Returns the polygon points of a pointy-top hexagon of `radius` centred on the origin.\n */\nconst hexagonPoints = (radius: number) => {\n  return Array.from(\n    {\n      length: 6,\n    },\n    (_, corner) => {\n      const angle = (Math.PI / 180) * (60 * corner - 90);\n\n      return `${(radius * Math.cos(angle)).toFixed(2)},${(radius * Math.sin(angle)).toFixed(2)}`;\n    },\n  ).join(' ');\n};\n\nconst HEXAGON_POINTS = hexagonPoints(CELL_RADIUS * GAP_FACTOR);\n\n/**\n * Lays out an odd-row-offset grid and gives each cell one of three tones, so no two neighbours share a tone.\n */\nconst buildCells = (columnCount: number, rowCount: number) => {\n  return Array.from(\n    {\n      length: columnCount * rowCount,\n    },\n    (_, index) => {\n      const row = Math.floor(index / columnCount);\n      const column = index % columnCount;\n      // Odd-r offset to axial coordinates: (q - r) mod 3 changes across every hex edge, which is a proper 3-colouring.\n      const axialQ = column - (row - (row & 1)) / 2;\n\n      return {\n        band: (column + row) % BAND_DELAY_CLASSES.length,\n        tone: (((axialQ - row) % 3) + 3) % 3,\n        x: column * COLUMN_SPACING + (row % 2 === 1 ? COLUMN_SPACING / 2 : 0),\n        y: row * ROW_SPACING,\n      };\n    },\n  );\n};\n\ninterface HexFieldProps extends Omit<ComponentProps<'svg'>, 'children'> {\n  animated?: boolean;\n  columns?: number;\n  fade?: 'bottom' | 'none' | 'radial';\n  rows?: number;\n}\n\n/**\n * Draws refine.studio's hex grid as light SVG in `currentColor`, three-toned and swept by a slow diagonal wave.\n */\nexport const HexField = ({\n  animated = true,\n  className,\n  columns = 32,\n  fade = 'radial',\n  rows = 16,\n  ...props\n}: HexFieldProps) => {\n  const cells = buildCells(columns, rows);\n  const width = (columns + 0.5) * COLUMN_SPACING;\n  const height = (rows - 1) * ROW_SPACING + CELL_RADIUS * 2;\n\n  return (\n    <svg\n      aria-hidden\n      className={cn(\n        'pointer-events-none size-full text-foreground',\n        {\n          '[mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_72%)]': fade === 'radial',\n          'mask-fade-b': fade === 'bottom',\n        },\n        className,\n      )}\n      data-slot=\"hex-field\"\n      preserveAspectRatio=\"xMidYMid slice\"\n      role=\"presentation\"\n      viewBox={`${-COLUMN_SPACING / 2} ${-CELL_RADIUS} ${width} ${height}`}\n    {...props}\n    >\n      {cells.map((cell) => {\n        return (\n          <polygon\n            className={cn({\n              [`opacity-60 motion-safe:animate-hex-wave ${BAND_DELAY_CLASSES[cell.band]}`]: animated,\n            })}\n            fill=\"currentColor\"\n            fillOpacity={TONE_OPACITIES[cell.tone]}\n            key={`${cell.x}-${cell.y}`}\n            points={HEXAGON_POINTS}\n            stroke=\"currentColor\"\n            strokeOpacity={0.08}\n            transform={`translate(${cell.x.toFixed(2)} ${cell.y.toFixed(2)})`}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],"mappings":";;;AAIA,IAAM,cAAc;AACpB,IAAM,aAAa;AACnB,IAAM,iBAAiB,cAAc,KAAK,KAAK,CAAC;AAChD,IAAM,cAAc,cAAc;AAClC,IAAM,iBAAiB;CAAC;CAAM;CAAM;AAAI;AAGxC,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;;;AAKA,IAAM,iBAAiB,WAAmB;CACxC,OAAO,MAAM,KACX,EACE,QAAQ,EACV,IACC,GAAG,WAAW;EACb,MAAM,QAAS,KAAK,KAAK,OAAQ,KAAK,SAAS;EAE/C,OAAO,IAAI,SAAS,KAAK,IAAI,KAAK,EAAA,CAAG,QAAQ,CAAC,EAAE,IAAI,SAAS,KAAK,IAAI,KAAK,EAAA,CAAG,QAAQ,CAAC;CACzF,CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,IAAM,iBAAiB,cAAc,cAAc,UAAU;;;;AAK7D,IAAM,cAAc,aAAqB,aAAqB;CAC5D,OAAO,MAAM,KACX,EACE,QAAQ,cAAc,SACxB,IACC,GAAG,UAAU;EACZ,MAAM,MAAM,KAAK,MAAM,QAAQ,WAAW;EAC1C,MAAM,SAAS,QAAQ;EAEvB,MAAM,SAAS,UAAU,OAAO,MAAM,MAAM;EAE5C,OAAO;GACL,OAAO,SAAS,OAAO,mBAAmB;GAC1C,QAAS,SAAS,OAAO,IAAK,KAAK;GACnC,GAAG,SAAS,kBAAkB,MAAM,MAAM,IAAI,iBAAiB,IAAI;GACnE,GAAG,MAAM;EACX;CACF,CACF;AACF;;;;AAYA,IAAa,YAAY,EACvB,WAAW,MACX,WACA,UAAU,IACV,OAAO,UACP,OAAO,IACP,GAAG,YACgB;CACnB,MAAM,QAAQ,WAAW,SAAS,IAAI;CACtC,MAAM,SAAS,UAAU,MAAO;CAChC,MAAM,UAAU,OAAO,KAAK,cAAc;CAE1C,OACE,oBAAC,OAAD;EACE,eAAA;EACA,WAAW,GACT,iDACA;GACE,6EAA6E,SAAS;GACtF,eAAe,SAAS;EAC1B,GACA,SACF;EACA,aAAU;EACV,qBAAoB;EACpB,MAAK;EACL,SAAS,GAAG,CAAC,iBAAiB,EAAE,OAAmB,MAAM,GAAG;EAC9D,GAAI;EAED,UAAA,MAAM,KAAK,SAAS;GACnB,OACE,oBAAC,WAAD;IACE,WAAW,GAAG,GACX,2CAA2C,mBAAmB,KAAK,UAAU,SAChF,CAAC;IACD,MAAK;IACL,aAAa,eAAe,KAAK;IAEjC,QAAQ;IACR,QAAO;IACP,eAAe;IACf,WAAW,aAAa,KAAK,EAAE,QAAQ,CAAC,EAAE,GAAG,KAAK,EAAE,QAAQ,CAAC,EAAE;GAChE,GALM,GAAG,KAAK,EAAE,GAAG,KAAK,GAKxB;EAEL,CAAC;CACE,CAAA;AAET"}

package/dist/components/input/input.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps, ReactNode } from 'react';
+export declare const inputShellVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface InputProps extends Omit<ComponentProps<'input'>, 'size'>, VariantProps<typeof inputShellVariants> {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}
+/**
+ * Renders a text input inside a bordered shell with optional `leading` and `trailing` adornments such as an icon, a unit or a shortcut.
+ */
+export declare const Input: ({ className, leading, size, trailing, type, ...props }: InputProps) => import("react").JSX.Element;
+export {};

package/dist/components/input/input.js

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../../lib/cn.js";
+import { useFieldControl } from "../field/field.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/input/input.tsx
+var inputShellVariants = cva([
+	"group/input relative flex w-full items-center gap-2 rounded-control border border-input bg-background text-foreground",
+	"transition-[border-color,box-shadow,background-color] duration-150 ease-out-expo",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.1em]",
+	"hover:border-foreground/25",
+	"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20",
+	"has-aria-invalid:border-danger has-aria-invalid:focus-within:ring-danger/20",
+	"has-disabled:cursor-not-allowed has-disabled:bg-muted has-disabled:opacity-60 has-disabled:hover:border-input"
+], {
+	variants: { size: {
+		sm: "h-control-sm px-2.5 text-body-sm",
+		md: "h-control-md px-3 text-body-sm",
+		lg: "h-control-lg px-4 text-body"
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* Renders a text input inside a bordered shell with optional `leading` and `trailing` adornments such as an icon, a unit or a shortcut.
+*/
+var Input = ({ className, leading, size, trailing, type = "text", ...props }) => {
+	const controlProps = useFieldControl(props);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(inputShellVariants({ size }), { "bg-muted": controlProps.readOnly }, className),
+		"data-slot": "input",
+		children: [
+			leading && /* @__PURE__ */ jsx("span", {
+				className: "flex items-center text-muted-foreground",
+				"data-slot": "input-leading",
+				children: leading
+			}),
+			/* @__PURE__ */ jsx("input", {
+				className: cn("h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-subtle disabled:cursor-not-allowed", "file:mr-3 file:border-0 file:bg-transparent file:font-medium file:text-foreground"),
+				type,
+				...controlProps
+			}),
+			trailing && /* @__PURE__ */ jsx("span", {
+				className: "flex items-center text-muted-foreground",
+				"data-slot": "input-trailing",
+				children: trailing
+			})
+		]
+	});
+};
+export { Input, inputShellVariants };
+
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input/input.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { useFieldControl } from '../field/field';\n\nexport const inputShellVariants = cva(\n  [\n    // base\n    'group/input relative flex w-full items-center gap-2 rounded-control border border-input bg-background text-foreground',\n    'transition-[border-color,box-shadow,background-color] duration-150 ease-out-expo',\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1.1em]\",\n    // hover\n    'hover:border-foreground/25',\n    // focus\n    'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20',\n    // invalid\n    'has-aria-invalid:border-danger has-aria-invalid:focus-within:ring-danger/20',\n    // disabled\n    'has-disabled:cursor-not-allowed has-disabled:bg-muted has-disabled:opacity-60 has-disabled:hover:border-input',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-control-sm px-2.5 text-body-sm',\n        md: 'h-control-md px-3 text-body-sm',\n        lg: 'h-control-lg px-4 text-body',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n);\n\ninterface InputProps extends Omit<ComponentProps<'input'>, 'size'>, VariantProps<typeof inputShellVariants> {\n  leading?: ReactNode;\n  trailing?: ReactNode;\n}\n\n/**\n * Renders a text input inside a bordered shell with optional `leading` and `trailing` adornments such as an icon, a unit or a shortcut.\n */\nexport const Input = ({ className, leading, size, trailing, type = 'text', ...props }: InputProps) => {\n  const controlProps = useFieldControl(props);\n\n  return (\n    <div\n      className={cn(inputShellVariants({ size }), { 'bg-muted': controlProps.readOnly }, className)}\n      data-slot=\"input\"\n    >\n      {leading && (\n        <span className=\"flex items-center text-muted-foreground\" data-slot=\"input-leading\">\n          {leading}\n        </span>\n      )}\n      <input\n        className={cn(\n          'h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-subtle disabled:cursor-not-allowed',\n          'file:mr-3 file:border-0 file:bg-transparent file:font-medium file:text-foreground',\n        )}\n        type={type}\n        {...controlProps}\n      />\n      {trailing && (\n        <span className=\"flex items-center text-muted-foreground\" data-slot=\"input-trailing\">\n          {trailing}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAQA,IAAa,qBAAqB,IAChC;CAEE;CACA;CACA;CAEA;CAEA;CAEA;CAEA;AACF,GACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CACF;;;;AAUA,IAAa,SAAS,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,QAAQ,GAAG,YAAwB;CACpG,MAAM,eAAe,gBAAgB,KAAK;CAE1C,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,mBAAmB,EAAE,KAAK,CAAC,GAAG,EAAE,YAAY,aAAa,SAAS,GAAG,SAAS;EAC5F,aAAU;EAFZ,UAAA;GAIG,WACC,oBAAC,QAAD;IAAM,WAAU;IAA0C,aAAU;IACjE,UAAA;GACG,CAAA;GAER,oBAAC,SAAD;IACE,WAAW,GACT,yGACA,mFACF;IACM;IACN,GAAI;GACL,CAAA;GACA,YACC,oBAAC,QAAD;IAAM,WAAU;IAA0C,aAAU;IACjE,UAAA;GACG,CAAA;EAEL;;AAET"}

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+/**
+ * Renders a single keyboard key.
+ */
+export declare const Kbd: ({ className, ...props }: ComponentProps<"kbd">) => import("react").JSX.Element;
+/**
+ * Groups keys that are pressed together, such as a shortcut.
+ */
+export declare const KbdGroup: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;

package/dist/components/kbd/kbd.js

@@ -0,0 +1,26 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/kbd/kbd.tsx
+/**
+* Renders a single keyboard key.
+*/
+var Kbd = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-b-2 border-input bg-muted px-1 font-mono text-caption font-medium text-muted-foreground select-none", "[&_svg:not([class*='size-'])]:size-3", className),
+		"data-slot": "kbd",
+		...props
+	});
+};
+/**
+* Groups keys that are pressed together, such as a shortcut.
+*/
+var KbdGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center gap-1", className),
+		"data-slot": "kbd-group",
+		...props
+	});
+};
+export { Kbd, KbdGroup };
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../src/components/kbd/kbd.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * Renders a single keyboard key.\n */\nexport const Kbd = ({ className, ...props }: ComponentProps<'kbd'>) => {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex h-5 min-w-5 items-center justify-center rounded-sm border border-b-2 border-input bg-muted px-1 font-mono text-caption font-medium text-muted-foreground select-none',\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      data-slot=\"kbd\"\n      {...props}\n    />\n  );\n};\n\n/**\n * Groups keys that are pressed together, such as a shortcut.\n */\nexport const KbdGroup = ({ className, ...props }: ComponentProps<'span'>) => {\n  return <span className={cn('inline-flex items-center gap-1', className)} data-slot=\"kbd-group\" {...props} />;\n};\n"],"mappings":";;;;;;AAOA,IAAa,OAAO,EAAE,WAAW,GAAG,YAAmC;CACrE,OACE,oBAAC,OAAD;EACE,WAAW,GACT,oLACA,wCACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL;;;;AAKA,IAAa,YAAY,EAAE,WAAW,GAAG,YAAoC;CAC3E,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,kCAAkC,SAAS;EAAG,aAAU;EAAY,GAAI;CAAQ,CAAA;AAC7G"}

package/dist/components/label/label.d.ts

@@ -0,0 +1,6 @@
+import { Label as LabelPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+/**
+ * Names a form control; dims itself when its peer control is disabled.
+ */
+export declare const Label: ({ className, ...props }: ComponentProps<typeof LabelPrimitive.Root>) => import("react").JSX.Element;

package/dist/components/label/label.js

@@ -0,0 +1,17 @@
+import { cn } from "../../lib/cn.js";
+import { Label } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+// src/components/label/label.tsx
+/**
+* Names a form control; dims itself when its peer control is disabled.
+*/
+var Label$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Label.Root, {
+		className: cn("inline-flex items-center gap-2 text-body-sm font-medium text-foreground select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		"data-slot": "label",
+		...props
+	});
+};
+export { Label$1 as Label };
+
+//# sourceMappingURL=label.js.map

package/dist/components/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","names":["Label","LabelPrimitive"],"sources":["../../../src/components/label/label.tsx"],"sourcesContent":["import { Label as LabelPrimitive } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\n/**\n * Names a form control; dims itself when its peer control is disabled.\n */\nexport const Label = ({ className, ...props }: ComponentProps<typeof LabelPrimitive.Root>) => {\n  return (\n    <LabelPrimitive.Root\n      className={cn(\n        'inline-flex items-center gap-2 text-body-sm font-medium text-foreground select-none',\n        'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n        className,\n      )}\n      data-slot=\"label\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAQA,IAAaA,WAAS,EAAE,WAAW,GAAG,YAAwD;CAC5F,OACE,oBAACC,MAAe,MAAhB;EACE,WAAW,GACT,uFACA,6DACA,SACF;EACA,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/components/logo/logo-paths.d.ts

@@ -0,0 +1,5 @@
+export declare const MARK_PATHS: string[];
+export declare const REFINE_PATHS: string[];
+/**
+ * Drawn to the measurements of the Studio glyphs: a 0.965 stem, cap height 14.75 to the 25.79 baseline.
+ */

package/dist/components/logo/logo-paths.js

@@ -0,0 +1,20 @@
+// src/components/logo/logo-paths.ts
+var MARK_PATHS = [
+	"M27.9868 20.795C28.2255 20.4548 28.3449 20.2847 28.3444 20.0913C28.344 19.8979 28.2238 19.7284 27.9835 19.3893L26.2738 16.9773C25.8939 16.4414 25.704 16.1734 25.4261 16.1468C25.1483 16.1201 24.9109 16.3471 24.4361 16.8011L20.1072 20.9407C19.5284 21.4942 19.239 21.7709 19.2893 22.0866C19.3396 22.4022 19.7006 22.5754 20.4226 22.9216L24.0339 24.6535C24.479 24.867 24.7015 24.9737 24.9178 24.9171C25.1342 24.8605 25.276 24.6585 25.5595 24.2544L27.9868 20.795Z",
+	"M23.0282 27.8761L20.851 30.9807C20.403 31.6195 20.179 31.9389 19.8647 31.9412C19.5505 31.9435 19.3218 31.6275 18.8645 30.9953L14.2999 24.6852C13.1832 23.1415 12.6249 22.3697 12.9278 22.0059C13.2307 21.642 14.091 22.051 15.8116 22.8691L22.5534 26.0746C23.1584 26.3622 23.4608 26.506 23.533 26.7798C23.6051 27.0535 23.4128 27.3277 23.0282 27.8761Z",
+	"M23.5654 14.9507C23.9255 14.6042 24.1056 14.4309 24.127 14.206C24.1484 13.9811 24.0043 13.7769 23.716 13.3686L20.6431 9.01661C20.1928 8.3789 19.9677 8.06004 19.6533 8.05884C19.3389 8.05764 19.1113 8.37476 18.6562 9.00901L12.533 17.5417C12.1402 18.0892 11.9437 18.363 12.0141 18.6384C12.0844 18.9138 12.3881 19.0598 12.9954 19.3518L16.2304 20.907C16.5997 21.0845 16.7843 21.1733 16.9729 21.143C17.1615 21.1128 17.3091 20.9708 17.6043 20.6867L23.5654 14.9507Z"
+];
+var REFINE_PATHS = [
+	"M79.1523 25.9424C78.2863 25.9424 77.5389 25.7717 76.9101 25.4304C76.2849 25.0854 75.8034 24.5949 75.4656 23.9589C75.1314 23.3193 74.9644 22.5594 74.9644 21.679C74.9644 20.8238 75.1332 20.0764 75.471 19.4368C75.8088 18.7936 76.2849 18.2941 76.8993 17.9384C77.5138 17.5791 78.2378 17.3994 79.0715 17.3994C79.6608 17.3994 80.1998 17.491 80.6884 17.6743C81.1771 17.8576 81.5993 18.1288 81.9551 18.4882C82.3108 18.8475 82.5875 19.2913 82.7851 19.8195C82.9828 20.3441 83.0816 20.946 83.0816 21.6251V22.2827H75.886V20.7519H80.6292C80.6256 20.4717 80.5591 20.2219 80.4297 20.0027C80.3004 19.7836 80.1225 19.6129 79.8961 19.4907C79.6733 19.3649 79.4164 19.3021 79.1254 19.3021C78.8307 19.3021 78.5666 19.3685 78.3331 19.5015C78.0995 19.6308 77.9144 19.8087 77.7779 20.0351C77.6413 20.2579 77.5695 20.5112 77.5623 20.7951V22.3527C77.5623 22.6905 77.6288 22.987 77.7617 23.2421C77.8947 23.4936 78.0833 23.6894 78.3277 23.8296C78.572 23.9697 78.8631 24.0398 79.2008 24.0398C79.4344 24.0398 79.6464 24.0074 79.8368 23.9428C80.0273 23.8781 80.1908 23.7829 80.3273 23.6571C80.4639 23.5313 80.5663 23.3768 80.6345 23.1936L83.0546 23.2636C82.954 23.8062 82.733 24.2787 82.3917 24.6812C82.0539 25.08 81.6101 25.3909 81.0603 25.6136C80.5106 25.8328 79.8746 25.9424 79.1523 25.9424Z",
+	"M68.2983 21.0646V25.7861H65.6626V17.5072H68.1689V19.0272H68.2605C68.4438 18.5205 68.7564 18.1235 69.1984 17.836C69.6404 17.5449 70.1668 17.3994 70.7776 17.3994C71.3597 17.3994 71.8646 17.5306 72.2922 17.7929C72.7234 18.0516 73.0576 18.4145 73.2947 18.8816C73.5355 19.3452 73.654 19.8878 73.6505 20.5094V25.7861H71.0148V21.0268C71.0184 20.5669 70.9016 20.2076 70.6644 19.9488C70.4309 19.6901 70.1057 19.5608 69.6889 19.5608C69.4122 19.5608 69.1678 19.6219 68.9558 19.744C68.7474 19.8626 68.5857 20.0333 68.4707 20.2561C68.3594 20.4789 68.3019 20.7483 68.2983 21.0646Z",
+	"M61.3495 25.7861V17.5072H63.9851V25.7861H61.3495ZM62.67 16.5424C62.2999 16.5424 61.9819 16.4202 61.716 16.1758C61.4501 15.9279 61.3171 15.6297 61.3171 15.2811C61.3171 14.9362 61.4501 14.6415 61.716 14.3972C61.9819 14.1492 62.2999 14.0253 62.67 14.0253C63.0437 14.0253 63.3617 14.1492 63.624 14.3972C63.8899 14.6415 64.0229 14.9362 64.0229 15.2811C64.0229 15.6297 63.8899 15.9279 63.624 16.1758C63.3617 16.4202 63.0437 16.5424 62.67 16.5424Z",
+	"M60.0813 17.5072V19.4475H54.7561V17.5072H60.0813ZM55.8664 25.7861V17.0868C55.8664 16.4472 55.9868 15.9171 56.2275 15.4967C56.4683 15.0727 56.8025 14.7565 57.2301 14.5481C57.6577 14.3361 58.1517 14.2301 58.7123 14.2301C59.0788 14.2301 59.4238 14.2588 59.7472 14.3163C60.0742 14.3702 60.3167 14.4187 60.4748 14.4619L60.0544 16.3915C59.9574 16.3591 59.8388 16.3322 59.6987 16.3106C59.5621 16.289 59.4327 16.2783 59.3106 16.2783C59.0016 16.2783 58.7896 16.3465 58.6746 16.4831C58.5596 16.6196 58.5021 16.8065 58.5021 17.0436V25.7861H55.8664Z",
+	"M50.1006 25.9424C49.2346 25.9424 48.4872 25.7717 47.8584 25.4304C47.2331 25.0854 46.7516 24.5949 46.4139 23.9589C46.0797 23.3193 45.9126 22.5594 45.9126 21.679C45.9126 20.8238 46.0815 20.0764 46.4192 19.4368C46.757 18.7936 47.2331 18.2941 47.8476 17.9384C48.462 17.5791 49.1861 17.3994 50.0197 17.3994C50.609 17.3994 51.148 17.491 51.6367 17.6743C52.1254 17.8576 52.5476 18.1288 52.9033 18.4882C53.2591 18.8475 53.5357 19.2913 53.7334 19.8195C53.931 20.3441 54.0298 20.946 54.0298 21.6251V22.2827H46.8343V20.7519H51.5774C51.5738 20.4717 51.5073 20.2219 51.378 20.0027C51.2486 19.7836 51.0707 19.6129 50.8444 19.4907C50.6216 19.3649 50.3647 19.3021 50.0736 19.3021C49.779 19.3021 49.5149 19.3685 49.2813 19.5015C49.0477 19.6308 48.8627 19.8087 48.7261 20.0351C48.5896 20.2579 48.5177 20.5112 48.5105 20.7951V22.3527C48.5105 22.6905 48.577 22.987 48.71 23.2421C48.8429 23.4936 49.0316 23.6894 49.2759 23.8296C49.5202 23.9697 49.8113 24.0398 50.1491 24.0398C50.3826 24.0398 50.5946 24.0074 50.7851 23.9428C50.9755 23.8781 51.139 23.7829 51.2756 23.6571C51.4121 23.5313 51.5145 23.3768 51.5828 23.1936L54.0029 23.2636C53.9022 23.8062 53.6813 24.2787 53.3399 24.6812C53.0021 25.08 52.5584 25.3909 52.0086 25.6136C51.4588 25.8328 50.8228 25.9424 50.1006 25.9424Z",
+	"M36.3442 25.7861V14.7476H40.9041C41.7306 14.7476 42.4438 14.8967 43.0439 15.1949C43.6476 15.4896 44.1129 15.9136 44.4399 16.4669C44.7669 17.0167 44.9304 17.6689 44.9304 18.4235C44.9304 19.1888 44.7633 19.8392 44.4291 20.3746C44.0949 20.9064 43.6206 21.3125 43.0062 21.5927C42.3917 21.8694 41.6641 22.0078 40.8233 22.0078H37.9397V19.9057H40.3274C40.7298 19.9057 41.0658 19.8536 41.3353 19.7494C41.6084 19.6416 41.815 19.4799 41.9551 19.2643C42.0953 19.0451 42.1653 18.7648 42.1653 18.4235C42.1653 18.0821 42.0953 17.8 41.9551 17.5773C41.815 17.3509 41.6084 17.182 41.3353 17.0706C41.0622 16.9556 40.7262 16.8981 40.3274 16.8981H39.0122V25.7861H36.3442ZM42.5588 20.7411L45.3077 25.7861H42.3971L39.7022 20.7411H42.5588Z"
+];
+/**
+* Drawn to the measurements of the Studio glyphs: a 0.965 stem, cap height 14.75 to the 25.79 baseline.
+*/
+export { MARK_PATHS, REFINE_PATHS };
+
+//# sourceMappingURL=logo-paths.js.map

package/dist/components/logo/logo-paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-paths.js","names":[],"sources":["../../../src/components/logo/logo-paths.ts"],"sourcesContent":["export const MARK_PATHS = [\n  'M27.9868 20.795C28.2255 20.4548 28.3449 20.2847 28.3444 20.0913C28.344 19.8979 28.2238 19.7284 27.9835 19.3893L26.2738 16.9773C25.8939 16.4414 25.704 16.1734 25.4261 16.1468C25.1483 16.1201 24.9109 16.3471 24.4361 16.8011L20.1072 20.9407C19.5284 21.4942 19.239 21.7709 19.2893 22.0866C19.3396 22.4022 19.7006 22.5754 20.4226 22.9216L24.0339 24.6535C24.479 24.867 24.7015 24.9737 24.9178 24.9171C25.1342 24.8605 25.276 24.6585 25.5595 24.2544L27.9868 20.795Z',\n  'M23.0282 27.8761L20.851 30.9807C20.403 31.6195 20.179 31.9389 19.8647 31.9412C19.5505 31.9435 19.3218 31.6275 18.8645 30.9953L14.2999 24.6852C13.1832 23.1415 12.6249 22.3697 12.9278 22.0059C13.2307 21.642 14.091 22.051 15.8116 22.8691L22.5534 26.0746C23.1584 26.3622 23.4608 26.506 23.533 26.7798C23.6051 27.0535 23.4128 27.3277 23.0282 27.8761Z',\n  'M23.5654 14.9507C23.9255 14.6042 24.1056 14.4309 24.127 14.206C24.1484 13.9811 24.0043 13.7769 23.716 13.3686L20.6431 9.01661C20.1928 8.3789 19.9677 8.06004 19.6533 8.05884C19.3389 8.05764 19.1113 8.37476 18.6562 9.00901L12.533 17.5417C12.1402 18.0892 11.9437 18.363 12.0141 18.6384C12.0844 18.9138 12.3881 19.0598 12.9954 19.3518L16.2304 20.907C16.5997 21.0845 16.7843 21.1733 16.9729 21.143C17.1615 21.1128 17.3091 20.9708 17.6043 20.6867L23.5654 14.9507Z',\n];\n\nexport const REFINE_PATHS = [\n  'M79.1523 25.9424C78.2863 25.9424 77.5389 25.7717 76.9101 25.4304C76.2849 25.0854 75.8034 24.5949 75.4656 23.9589C75.1314 23.3193 74.9644 22.5594 74.9644 21.679C74.9644 20.8238 75.1332 20.0764 75.471 19.4368C75.8088 18.7936 76.2849 18.2941 76.8993 17.9384C77.5138 17.5791 78.2378 17.3994 79.0715 17.3994C79.6608 17.3994 80.1998 17.491 80.6884 17.6743C81.1771 17.8576 81.5993 18.1288 81.9551 18.4882C82.3108 18.8475 82.5875 19.2913 82.7851 19.8195C82.9828 20.3441 83.0816 20.946 83.0816 21.6251V22.2827H75.886V20.7519H80.6292C80.6256 20.4717 80.5591 20.2219 80.4297 20.0027C80.3004 19.7836 80.1225 19.6129 79.8961 19.4907C79.6733 19.3649 79.4164 19.3021 79.1254 19.3021C78.8307 19.3021 78.5666 19.3685 78.3331 19.5015C78.0995 19.6308 77.9144 19.8087 77.7779 20.0351C77.6413 20.2579 77.5695 20.5112 77.5623 20.7951V22.3527C77.5623 22.6905 77.6288 22.987 77.7617 23.2421C77.8947 23.4936 78.0833 23.6894 78.3277 23.8296C78.572 23.9697 78.8631 24.0398 79.2008 24.0398C79.4344 24.0398 79.6464 24.0074 79.8368 23.9428C80.0273 23.8781 80.1908 23.7829 80.3273 23.6571C80.4639 23.5313 80.5663 23.3768 80.6345 23.1936L83.0546 23.2636C82.954 23.8062 82.733 24.2787 82.3917 24.6812C82.0539 25.08 81.6101 25.3909 81.0603 25.6136C80.5106 25.8328 79.8746 25.9424 79.1523 25.9424Z',\n  'M68.2983 21.0646V25.7861H65.6626V17.5072H68.1689V19.0272H68.2605C68.4438 18.5205 68.7564 18.1235 69.1984 17.836C69.6404 17.5449 70.1668 17.3994 70.7776 17.3994C71.3597 17.3994 71.8646 17.5306 72.2922 17.7929C72.7234 18.0516 73.0576 18.4145 73.2947 18.8816C73.5355 19.3452 73.654 19.8878 73.6505 20.5094V25.7861H71.0148V21.0268C71.0184 20.5669 70.9016 20.2076 70.6644 19.9488C70.4309 19.6901 70.1057 19.5608 69.6889 19.5608C69.4122 19.5608 69.1678 19.6219 68.9558 19.744C68.7474 19.8626 68.5857 20.0333 68.4707 20.2561C68.3594 20.4789 68.3019 20.7483 68.2983 21.0646Z',\n  'M61.3495 25.7861V17.5072H63.9851V25.7861H61.3495ZM62.67 16.5424C62.2999 16.5424 61.9819 16.4202 61.716 16.1758C61.4501 15.9279 61.3171 15.6297 61.3171 15.2811C61.3171 14.9362 61.4501 14.6415 61.716 14.3972C61.9819 14.1492 62.2999 14.0253 62.67 14.0253C63.0437 14.0253 63.3617 14.1492 63.624 14.3972C63.8899 14.6415 64.0229 14.9362 64.0229 15.2811C64.0229 15.6297 63.8899 15.9279 63.624 16.1758C63.3617 16.4202 63.0437 16.5424 62.67 16.5424Z',\n  'M60.0813 17.5072V19.4475H54.7561V17.5072H60.0813ZM55.8664 25.7861V17.0868C55.8664 16.4472 55.9868 15.9171 56.2275 15.4967C56.4683 15.0727 56.8025 14.7565 57.2301 14.5481C57.6577 14.3361 58.1517 14.2301 58.7123 14.2301C59.0788 14.2301 59.4238 14.2588 59.7472 14.3163C60.0742 14.3702 60.3167 14.4187 60.4748 14.4619L60.0544 16.3915C59.9574 16.3591 59.8388 16.3322 59.6987 16.3106C59.5621 16.289 59.4327 16.2783 59.3106 16.2783C59.0016 16.2783 58.7896 16.3465 58.6746 16.4831C58.5596 16.6196 58.5021 16.8065 58.5021 17.0436V25.7861H55.8664Z',\n  'M50.1006 25.9424C49.2346 25.9424 48.4872 25.7717 47.8584 25.4304C47.2331 25.0854 46.7516 24.5949 46.4139 23.9589C46.0797 23.3193 45.9126 22.5594 45.9126 21.679C45.9126 20.8238 46.0815 20.0764 46.4192 19.4368C46.757 18.7936 47.2331 18.2941 47.8476 17.9384C48.462 17.5791 49.1861 17.3994 50.0197 17.3994C50.609 17.3994 51.148 17.491 51.6367 17.6743C52.1254 17.8576 52.5476 18.1288 52.9033 18.4882C53.2591 18.8475 53.5357 19.2913 53.7334 19.8195C53.931 20.3441 54.0298 20.946 54.0298 21.6251V22.2827H46.8343V20.7519H51.5774C51.5738 20.4717 51.5073 20.2219 51.378 20.0027C51.2486 19.7836 51.0707 19.6129 50.8444 19.4907C50.6216 19.3649 50.3647 19.3021 50.0736 19.3021C49.779 19.3021 49.5149 19.3685 49.2813 19.5015C49.0477 19.6308 48.8627 19.8087 48.7261 20.0351C48.5896 20.2579 48.5177 20.5112 48.5105 20.7951V22.3527C48.5105 22.6905 48.577 22.987 48.71 23.2421C48.8429 23.4936 49.0316 23.6894 49.2759 23.8296C49.5202 23.9697 49.8113 24.0398 50.1491 24.0398C50.3826 24.0398 50.5946 24.0074 50.7851 23.9428C50.9755 23.8781 51.139 23.7829 51.2756 23.6571C51.4121 23.5313 51.5145 23.3768 51.5828 23.1936L54.0029 23.2636C53.9022 23.8062 53.6813 24.2787 53.3399 24.6812C53.0021 25.08 52.5584 25.3909 52.0086 25.6136C51.4588 25.8328 50.8228 25.9424 50.1006 25.9424Z',\n  'M36.3442 25.7861V14.7476H40.9041C41.7306 14.7476 42.4438 14.8967 43.0439 15.1949C43.6476 15.4896 44.1129 15.9136 44.4399 16.4669C44.7669 17.0167 44.9304 17.6689 44.9304 18.4235C44.9304 19.1888 44.7633 19.8392 44.4291 20.3746C44.0949 20.9064 43.6206 21.3125 43.0062 21.5927C42.3917 21.8694 41.6641 22.0078 40.8233 22.0078H37.9397V19.9057H40.3274C40.7298 19.9057 41.0658 19.8536 41.3353 19.7494C41.6084 19.6416 41.815 19.4799 41.9551 19.2643C42.0953 19.0451 42.1653 18.7648 42.1653 18.4235C42.1653 18.0821 42.0953 17.8 41.9551 17.5773C41.815 17.3509 41.6084 17.182 41.3353 17.0706C41.0622 16.9556 40.7262 16.8981 40.3274 16.8981H39.0122V25.7861H36.3442ZM42.5588 20.7411L45.3077 25.7861H42.3971L39.7022 20.7411H42.5588Z',\n];\n\n/**\n * Drawn to the measurements of the Studio glyphs: a 0.965 stem, cap height 14.75 to the 25.79 baseline.\n */\n"],"mappings":";AAAA,IAAa,aAAa;CACxB;CACA;CACA;AACF;AAEA,IAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;AACF"}

package/dist/components/logo/logo.d.ts

@@ -0,0 +1,18 @@
+import type { ComponentProps } from 'react';
+interface LogoProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    plate?: boolean;
+    segment?: string;
+    title?: string;
+}
+/**
+ * Draws the Refine logo: the diamond, "Refine", and a segment name such as Studio, Tick or UI. `plate` sets it on the ink plate of the website badge.
+ */
+export declare const Logo: ({ className, plate, segment, title, ...props }: LogoProps) => import("react").JSX.Element;
+interface LogoMarkProps extends Omit<ComponentProps<'svg'>, 'children'> {
+    title?: string;
+}
+/**
+ * Draws the diamond alone, for tight spaces such as app shells, favicons and avatars.
+ */
+export declare const LogoMark: ({ className, title, ...props }: LogoMarkProps) => import("react").JSX.Element;
+export {};

package/dist/components/logo/logo.js

@@ -0,0 +1,94 @@
+import { cn } from "../../lib/cn.js";
+import { MARK_PATHS, REFINE_PATHS } from "./logo-paths.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+// src/components/logo/logo.tsx
+var SEGMENT_FONT_SIZE = 15.34;
+var SEGMENT_X = 87.23;
+var SEGMENT_BASELINE = 25.73;
+var SEGMENT_CHARACTER_ESTIMATE = .58;
+var PLATE_PADDING_RIGHT = 12;
+var PLATE_HEIGHT = 40;
+/**
+* Returns the right edge of the segment text, measured once the font has loaded.
+*/
+var useSegmentRight = (segment) => {
+	const textRef = useRef(null);
+	const [right, setRight] = useState(SEGMENT_X + segment.length * SEGMENT_FONT_SIZE * SEGMENT_CHARACTER_ESTIMATE);
+	useLayoutEffect(() => {
+		let isCurrent = true;
+		const measure = () => {
+			const text = textRef.current;
+			if (!isCurrent || !text || typeof text.getBBox !== "function") return;
+			const box = text.getBBox();
+			setRight(box.x + box.width);
+		};
+		measure();
+		document.fonts?.ready.then(measure);
+		return () => {
+			isCurrent = false;
+		};
+	}, [segment]);
+	return {
+		right,
+		textRef
+	};
+};
+/**
+* Draws the Refine logo: the diamond, "Refine", and a segment name such as Studio, Tick or UI. `plate` sets it on the ink plate of the website badge.
+*/
+var Logo = ({ className, plate = false, segment = "Studio", title, ...props }) => {
+	const { right, textRef } = useSegmentRight(segment);
+	const width = Math.ceil(right + PLATE_PADDING_RIGHT);
+	const viewBox = plate ? `0 0 ${width} ${PLATE_HEIGHT}` : `10 6 ${Math.ceil(right) - 10 + 1} 28`;
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cn("h-8 inline-block w-auto", className),
+		"data-slot": "logo",
+		fill: "currentColor",
+		role: "img",
+		viewBox,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("title", { children: title ?? `Refine ${segment}` }),
+			plate && /* @__PURE__ */ jsx("rect", {
+				className: "fill-primary",
+				height: PLATE_HEIGHT,
+				rx: "12",
+				width
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				className: cn({ "fill-primary-foreground": plate }),
+				children: [[...MARK_PATHS, ...REFINE_PATHS].map((path) => {
+					return /* @__PURE__ */ jsx("path", { d: path }, path);
+				}), /* @__PURE__ */ jsx("text", {
+					className: "font-sans",
+					fontSize: SEGMENT_FONT_SIZE,
+					fontWeight: 400,
+					ref: textRef,
+					x: SEGMENT_X,
+					y: SEGMENT_BASELINE,
+					children: segment
+				})]
+			})
+		]
+	});
+};
+/**
+* Draws the diamond alone, for tight spaces such as app shells, favicons and avatars.
+*/
+var LogoMark = ({ className, title = "Refine Studio", ...props }) => {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cn("h-8 inline-block w-auto", className),
+		"data-slot": "logo",
+		fill: "currentColor",
+		role: "img",
+		viewBox: "10 6 21 28",
+		...props,
+		children: [/* @__PURE__ */ jsx("title", { children: title }), MARK_PATHS.map((path) => {
+			return /* @__PURE__ */ jsx("path", { d: path }, path);
+		})]
+	});
+};
+export { Logo, LogoMark };
+
+//# sourceMappingURL=logo.js.map

package/dist/components/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","names":[],"sources":["../../../src/components/logo/logo.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { useLayoutEffect, useRef, useState } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { MARK_PATHS, REFINE_PATHS } from './logo-paths';\n\ninterface LogoProps extends Omit<ComponentProps<'svg'>, 'children'> {\n  plate?: boolean;\n  segment?: string;\n  title?: string;\n}\n\n// The segment sits in Geist Regular at the size and baseline of the drawn \"Refine\", which is Geist Bold.\nconst SEGMENT_FONT_SIZE = 15.34;\nconst SEGMENT_X = 87.23;\nconst SEGMENT_BASELINE = 25.73;\n// A segment's width before the font has loaded, as a share of the font size per character.\nconst SEGMENT_CHARACTER_ESTIMATE = 0.58;\n// The plate keeps 10 units of air left of the diamond and 12 right of the segment, as the website badge does.\nconst PLATE_PADDING_RIGHT = 12;\nconst PLATE_HEIGHT = 40;\n\n/**\n * Returns the right edge of the segment text, measured once the font has loaded.\n */\nconst useSegmentRight = (segment: string) => {\n  const textRef = useRef<SVGTextElement>(null);\n  const [right, setRight] = useState(SEGMENT_X + segment.length * SEGMENT_FONT_SIZE * SEGMENT_CHARACTER_ESTIMATE);\n\n  useLayoutEffect(() => {\n    let isCurrent = true;\n    const measure = () => {\n      const text = textRef.current;\n\n      if (!isCurrent || !text || typeof text.getBBox !== 'function') {\n        return;\n      }\n\n      const box = text.getBBox();\n      setRight(box.x + box.width);\n    };\n\n    measure();\n    void document.fonts?.ready.then(measure);\n\n    return () => {\n      isCurrent = false;\n    };\n  }, [segment]);\n\n  return { right, textRef };\n};\n\n/**\n * Draws the Refine logo: the diamond, \"Refine\", and a segment name such as Studio, Tick or UI. `plate` sets it on the ink plate of the website badge.\n */\nexport const Logo = ({ className, plate = false, segment = 'Studio', title, ...props }: LogoProps) => {\n  const { right, textRef } = useSegmentRight(segment);\n  const width = Math.ceil(right + PLATE_PADDING_RIGHT);\n  const viewBox = plate ? `0 0 ${width} ${PLATE_HEIGHT}` : `10 6 ${Math.ceil(right) - 10 + 1} 28`;\n\n  return (\n    <svg\n      className={cn('h-8 inline-block w-auto', className)}\n      data-slot=\"logo\"\n      fill=\"currentColor\"\n      role=\"img\"\n      viewBox={viewBox}\n      {...props}\n    >\n      <title>{title ?? `Refine ${segment}`}</title>\n      {plate && <rect className=\"fill-primary\" height={PLATE_HEIGHT} rx=\"12\" width={width} />}\n      <g className={cn({ 'fill-primary-foreground': plate })}>\n        {[...MARK_PATHS, ...REFINE_PATHS].map((path) => {\n          return <path d={path} key={path} />;\n        })}\n        <text\n          className=\"font-sans\"\n          fontSize={SEGMENT_FONT_SIZE}\n          fontWeight={400}\n          ref={textRef}\n          x={SEGMENT_X}\n          y={SEGMENT_BASELINE}\n        >\n          {segment}\n        </text>\n      </g>\n    </svg>\n  );\n};\n\ninterface LogoMarkProps extends Omit<ComponentProps<'svg'>, 'children'> {\n  title?: string;\n}\n\n/**\n * Draws the diamond alone, for tight spaces such as app shells, favicons and avatars.\n */\nexport const LogoMark = ({ className, title = 'Refine Studio', ...props }: LogoMarkProps) => {\n  return (\n    <svg\n      className={cn('h-8 inline-block w-auto', className)}\n      data-slot=\"logo\"\n      fill=\"currentColor\"\n      role=\"img\"\n      viewBox=\"10 6 21 28\"\n      {...props}\n    >\n      <title>{title}</title>\n      {MARK_PATHS.map((path) => {\n        return <path d={path} key={path} />;\n      })}\n    </svg>\n  );\n};\n"],"mappings":";;;;;AAcA,IAAM,oBAAoB;AAC1B,IAAM,YAAY;AAClB,IAAM,mBAAmB;AAEzB,IAAM,6BAA6B;AAEnC,IAAM,sBAAsB;AAC5B,IAAM,eAAe;;;;AAKrB,IAAM,mBAAmB,YAAoB;CAC3C,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY,QAAQ,SAAS,oBAAoB,0BAA0B;CAE9G,sBAAsB;EACpB,IAAI,YAAY;EAChB,MAAM,gBAAgB;GACpB,MAAM,OAAO,QAAQ;GAErB,IAAI,CAAC,aAAa,CAAC,QAAQ,OAAO,KAAK,YAAY,YACjD;GAGF,MAAM,MAAM,KAAK,QAAQ;GACzB,SAAS,IAAI,IAAI,IAAI,KAAK;EAC5B;EAEA,QAAQ;EACR,SAAc,OAAO,MAAM,KAAK,OAAO;EAEvC,aAAa;GACX,YAAY;EACd;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OAAO;EAAE;EAAO;CAAQ;AAC1B;;;;AAKA,IAAa,QAAQ,EAAE,WAAW,QAAQ,OAAO,UAAU,UAAU,OAAO,GAAG,YAAuB;CACpG,MAAM,EAAE,OAAO,YAAY,gBAAgB,OAAO;CAClD,MAAM,QAAQ,KAAK,KAAK,QAAQ,mBAAmB;CACnD,MAAM,UAAU,QAAQ,OAAO,MAAM,GAAG,iBAAiB,QAAQ,KAAK,KAAK,KAAK,IAAI,KAAK,EAAE;CAE3F,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,SAAS;EAClD,aAAU;EACV,MAAK;EACL,MAAK;EACI;EACT,GAAI;EANN,UAAA;GAQE,oBAAC,SAAD,EAAA,UAAQ,SAAS,UAAU,UAAiB,CAAA;GAC3C,SAAS,oBAAC,QAAD;IAAM,WAAU;IAAe,QAAQ;IAAc,IAAG;IAAY;GAAQ,CAAA;GACtF,qBAAC,KAAD;IAAG,WAAW,GAAG,EAAE,2BAA2B,MAAM,CAAC;IAArD,UAAA,CACG,CAAC,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC,KAAK,SAAS;KAC9C,OAAO,oBAAC,QAAD,EAAM,GAAG,KAAkB,GAAP,IAAO;IACpC,CAAC,GACD,oBAAC,QAAD;KACE,WAAU;KACV,UAAU;KACV,YAAY;KACZ,KAAK;KACL,GAAG;KACH,GAAG;KAEF,UAAA;IACG,CAAA,CACL;;EACA;;AAET;;;;AASA,IAAa,YAAY,EAAE,WAAW,QAAQ,iBAAiB,GAAG,YAA2B;CAC3F,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,SAAS;EAClD,aAAU;EACV,MAAK;EACL,MAAK;EACL,SAAQ;EACR,GAAI;EANN,UAAA,CAQE,oBAAC,SAAD,EAAA,UAAQ,MAAa,CAAA,GACpB,WAAW,KAAK,SAAS;GACxB,OAAO,oBAAC,QAAD,EAAM,GAAG,KAAkB,GAAP,IAAO;EACpC,CAAC,CACE;;AAET"}

package/dist/components/marquee/marquee.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+declare const marqueeTrackVariants: (props?: ({
+    speed?: "slow" | "normal" | "fast" | null | undefined;
+    direction?: "left" | "right" | null | undefined;
+    pauseOnHover?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface MarqueeProps extends ComponentProps<'div'>, VariantProps<typeof marqueeTrackVariants> {
+    fade?: boolean;
+}
+/**
+ * Scrolls its children in an endless strip by rendering them twice; with reduced motion it becomes a plain scrollable row.
+ */
+export declare const Marquee: ({ children, className, direction, fade, pauseOnHover, speed, ...props }: MarqueeProps) => import("react").JSX.Element;
+export {};

package/dist/components/marquee/marquee.js

@@ -0,0 +1,54 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/marquee/marquee.tsx
+var marqueeTrackVariants = cva(["flex w-max", "motion-safe:animate-marquee"], {
+	variants: {
+		speed: {
+			slow: "[--marquee-duration:60s]",
+			normal: "[--marquee-duration:35s]",
+			fast: "[--marquee-duration:18s]"
+		},
+		direction: {
+			left: "",
+			right: "[animation-direction:reverse]"
+		},
+		pauseOnHover: {
+			true: "group-hover/marquee:[animation-play-state:paused]",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		direction: "left",
+		pauseOnHover: true,
+		speed: "normal"
+	}
+});
+/**
+* Scrolls its children in an endless strip by rendering them twice; with reduced motion it becomes a plain scrollable row.
+*/
+var Marquee = ({ children, className, direction, fade = true, pauseOnHover, speed, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("group/marquee relative flex overflow-hidden motion-reduce:overflow-x-auto", { "mask-fade-x": fade }, className),
+		"data-slot": "marquee",
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: marqueeTrackVariants({
+				direction,
+				pauseOnHover,
+				speed
+			}),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-12 pr-12",
+				children
+			}), /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: "flex shrink-0 items-center gap-12 pr-12 motion-reduce:hidden",
+				children
+			})]
+		})
+	});
+};
+export { Marquee };
+
+//# sourceMappingURL=marquee.js.map

package/dist/components/marquee/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","names":[],"sources":["../../../src/components/marquee/marquee.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../lib/cn';\n\nconst marqueeTrackVariants = cva(\n  [\n    // base\n    'flex w-max',\n    // animation\n    'motion-safe:animate-marquee',\n  ],\n  {\n    variants: {\n      speed: {\n        slow: '[--marquee-duration:60s]',\n        normal: '[--marquee-duration:35s]',\n        fast: '[--marquee-duration:18s]',\n      },\n      direction: {\n        left: '',\n        right: '[animation-direction:reverse]',\n      },\n      pauseOnHover: {\n        true: 'group-hover/marquee:[animation-play-state:paused]',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      direction: 'left',\n      pauseOnHover: true,\n      speed: 'normal',\n    },\n  },\n);\n\ninterface MarqueeProps extends ComponentProps<'div'>, VariantProps<typeof marqueeTrackVariants> {\n  fade?: boolean;\n}\n\n/**\n * Scrolls its children in an endless strip by rendering them twice; with reduced motion it becomes a plain scrollable row.\n */\nexport const Marquee = ({\n  children,\n  className,\n  direction,\n  fade = true,\n  pauseOnHover,\n  speed,\n  ...props\n}: MarqueeProps) => {\n  return (\n    <div\n      className={cn(\n        'group/marquee relative flex overflow-hidden motion-reduce:overflow-x-auto',\n        {\n          'mask-fade-x': fade,\n        },\n        className,\n      )}\n      data-slot=\"marquee\"\n      {...props}\n    >\n      <div className={marqueeTrackVariants({ direction, pauseOnHover, speed })}>\n        <div className=\"flex shrink-0 items-center gap-12 pr-12\">{children}</div>\n        <div aria-hidden className=\"flex shrink-0 items-center gap-12 pr-12 motion-reduce:hidden\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAM,uBAAuB,IAC3B,CAEE,cAEA,6BACF,GACA;CACE,UAAU;EACR,OAAO;GACL,MAAM;GACN,QAAQ;GACR,MAAM;EACR;EACA,WAAW;GACT,MAAM;GACN,OAAO;EACT;EACA,cAAc;GACZ,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,WAAW;EACX,cAAc;EACd,OAAO;CACT;AACF,CACF;;;;AASA,IAAa,WAAW,EACtB,UACA,WACA,WACA,OAAO,MACP,cACA,OACA,GAAG,YACe;CAClB,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6EACA,EACE,eAAe,KACjB,GACA,SACF;EACA,aAAU;EACV,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,WAAW,qBAAqB;IAAE;IAAW;IAAc;GAAM,CAAC;GAAvE,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;IAA2C;GAAc,CAAA,GACxE,oBAAC,OAAD;IAAK,eAAA;IAAY,WAAU;IACxB;GACE,CAAA,CACF;;CACF,CAAA;AAET"}

package/dist/components/page-header/page-header.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from 'react';
+interface PageHeaderProps extends Omit<ComponentProps<'header'>, 'title'> {
+    actions?: ReactNode;
+    breadcrumb?: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    number?: number | string;
+    tabs?: ReactNode;
+    title: ReactNode;
+}
+/**
+ * Opens a page with breadcrumb, numbered eyebrow, title, description and actions, and docks optional tabs along its bottom edge.
+ */
+export declare const PageHeader: ({ actions, breadcrumb, className, description, eyebrow, number, tabs, title, ...props }: PageHeaderProps) => import("react").JSX.Element;
+export {};

package/dist/components/page-header/page-header.js

@@ -0,0 +1,50 @@
+import { cn } from "../../lib/cn.js";
+import { Eyebrow } from "../eyebrow/eyebrow.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/page-header/page-header.tsx
+/**
+* Opens a page with breadcrumb, numbered eyebrow, title, description and actions, and docks optional tabs along its bottom edge.
+*/
+var PageHeader = ({ actions, breadcrumb, className, description, eyebrow, number, tabs, title, ...props }) => {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cn("flex flex-col gap-5", { "border-b border-border": tabs }, className),
+		"data-slot": "page-header",
+		...props,
+		children: [
+			breadcrumb && /* @__PURE__ */ jsx("div", {
+				className: "text-body-sm text-muted-foreground",
+				children: breadcrumb
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-2",
+					children: [
+						eyebrow && /* @__PURE__ */ jsx(Eyebrow, {
+							number,
+							children: eyebrow
+						}),
+						/* @__PURE__ */ jsx("h1", {
+							className: "font-display text-headline-lg font-black text-balance md:text-display-sm",
+							children: title
+						}),
+						description && /* @__PURE__ */ jsx("p", {
+							className: "max-w-[65ch] text-body text-muted-foreground",
+							children: description
+						})
+					]
+				}), actions && /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 flex-wrap items-center gap-2",
+					children: actions
+				})]
+			}),
+			tabs && /* @__PURE__ */ jsx("div", {
+				className: "-mb-px",
+				children: tabs
+			})
+		]
+	});
+};
+export { PageHeader };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../../src/components/page-header/page-header.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../lib/cn';\nimport { Eyebrow } from '../eyebrow/eyebrow';\n\ninterface PageHeaderProps extends Omit<ComponentProps<'header'>, 'title'> {\n  actions?: ReactNode;\n  breadcrumb?: ReactNode;\n  description?: ReactNode;\n  eyebrow?: ReactNode;\n  number?: number | string;\n  tabs?: ReactNode;\n  title: ReactNode;\n}\n\n/**\n * Opens a page with breadcrumb, numbered eyebrow, title, description and actions, and docks optional tabs along its bottom edge.\n */\nexport const PageHeader = ({\n  actions,\n  breadcrumb,\n  className,\n  description,\n  eyebrow,\n  number,\n  tabs,\n  title,\n  ...props\n}: PageHeaderProps) => {\n  return (\n    <header className={cn('flex flex-col gap-5', { 'border-b border-border': tabs }, className)} data-slot=\"page-header\" {...props}>\n      {breadcrumb && <div className=\"text-body-sm text-muted-foreground\">{breadcrumb}</div>}\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-end md:justify-between\">\n        <div className=\"flex min-w-0 flex-col gap-2\">\n          {eyebrow && <Eyebrow number={number}>{eyebrow}</Eyebrow>}\n          <h1 className=\"font-display text-headline-lg font-black text-balance md:text-display-sm\">{title}</h1>\n          {description && <p className=\"max-w-[65ch] text-body text-muted-foreground\">{description}</p>}\n        </div>\n        {actions && <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div>}\n      </div>\n      {tabs && <div className=\"-mb-px\">{tabs}</div>}\n    </header>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAa,cAAc,EACzB,SACA,YACA,WACA,aACA,SACA,QACA,MACA,OACA,GAAG,YACkB;CACrB,OACE,qBAAC,UAAD;EAAQ,WAAW,GAAG,uBAAuB,EAAE,0BAA0B,KAAK,GAAG,SAAS;EAAG,aAAU;EAAc,GAAI;EAAzH,UAAA;GACG,cAAc,oBAAC,OAAD;IAAK,WAAU;IAAsC,UAAA;GAAgB,CAAA;GACpF,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACG,WAAW,oBAAC,SAAD;OAAiB;OAAS,UAAA;MAAiB,CAAA;MACvD,oBAAC,MAAD;OAAI,WAAU;OAA4E,UAAA;MAAU,CAAA;MACnG,eAAe,oBAAC,KAAD;OAAG,WAAU;OAAgD,UAAA;MAAe,CAAA;KACzF;IACJ,CAAA,GAAA,WAAW,oBAAC,OAAD;KAAK,WAAU;KAA8C,UAAA;IAAa,CAAA,CACnF;;GACJ,QAAQ,oBAAC,OAAD;IAAK,WAAU;IAAU,UAAA;GAAU,CAAA;EACtC;;AAEZ"}

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'react';
+/**
+ * Marks up the page links as a navigation landmark.
+ */
+export declare const Pagination: ({ className, ...props }: ComponentProps<"nav">) => import("react").JSX.Element;
+export declare const PaginationContent: ({ className, ...props }: ComponentProps<"ul">) => import("react").JSX.Element;
+export declare const PaginationItem: (props: ComponentProps<"li">) => import("react").JSX.Element;
+interface PaginationLinkProps extends ComponentProps<'a'> {
+    isActive?: boolean;
+    size?: 'icon' | 'md';
+}
+/**
+ * Links to one page; the active page is outlined and announced as current.
+ */
+export declare const PaginationLink: ({ className, isActive, size, ...props }: PaginationLinkProps) => import("react").JSX.Element;
+/**
+ * Links to the previous page.
+ */
+export declare const PaginationPrevious: ({ children, className, ...props }: ComponentProps<"a">) => import("react").JSX.Element;
+/**
+ * Links to the next page.
+ */
+export declare const PaginationNext: ({ children, className, ...props }: ComponentProps<"a">) => import("react").JSX.Element;
+/**
+ * Stands in for the pages between the visible ones.
+ */
+export declare const PaginationEllipsis: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
+export {};