@epilot/spark-ui 0.10.0

package/dist/components/theme.js

@@ -0,0 +1,118 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import { CURATED_ACCENTS, accentSparkVars, generateAccentScale, getMatchingNeutral } from "../lib/accent-theme.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/theme.tsx
+const ThemeContext = React$1.createContext({});
+/** Merged theme values from enclosing `<Theme>` providers. */
+function useTheme() {
+	return React$1.useContext(ThemeContext);
+}
+/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */
+const Theme = React$1.forwardRef(function Theme({ accentColor, neutralColor, radius, scaling, spacing, styleVariant, highContrast, labelPosition, inputStyle, inputColor, cardVariant, cardColor, appearance, render, className, style, children, ...rest }, ref) {
+	const parent = useTheme();
+	const value = React$1.useMemo(() => ({
+		accentColor: accentColor ?? parent.accentColor,
+		neutralColor: neutralColor ?? parent.neutralColor,
+		radius: radius ?? parent.radius,
+		scaling: scaling ?? parent.scaling,
+		spacing: spacing ?? parent.spacing,
+		styleVariant: styleVariant ?? parent.styleVariant,
+		highContrast: highContrast ?? parent.highContrast,
+		labelPosition: labelPosition ?? parent.labelPosition,
+		inputStyle: inputStyle ?? parent.inputStyle,
+		inputColor: inputColor ?? parent.inputColor,
+		cardVariant: cardVariant ?? parent.cardVariant,
+		cardColor: cardColor ?? parent.cardColor,
+		appearance: appearance ?? parent.appearance
+	}), [
+		accentColor,
+		neutralColor,
+		radius,
+		scaling,
+		spacing,
+		styleVariant,
+		highContrast,
+		labelPosition,
+		inputStyle,
+		inputColor,
+		cardVariant,
+		cardColor,
+		appearance,
+		parent
+	]);
+	const scopeId = React$1.useId();
+	const accent = React$1.useMemo(() => {
+		const empty = {
+			inlineVars: {},
+			css: "",
+			scoped: false
+		};
+		if (!accentColor) return empty;
+		const toVars = (decls) => Object.fromEntries(decls.filter((decl) => decl.includes(":")).map((decl) => {
+			const i = decl.indexOf(":");
+			return [decl.slice(0, i).trim(), decl.slice(i + 1).replace(/;$/, "").trim()];
+		}));
+		try {
+			const hex = CURATED_ACCENTS[accentColor] ?? accentColor;
+			if (value.appearance) return {
+				inlineVars: toVars(accentSparkVars(generateAccentScale(hex, value.appearance))),
+				css: "",
+				scoped: false
+			};
+			const light = accentSparkVars(generateAccentScale(hex, "light"));
+			const dark = accentSparkVars(generateAccentScale(hex, "dark"));
+			const sel = `[data-spark-scope="${scopeId}"]`;
+			return {
+				inlineVars: {},
+				css: `${sel}{${light.join("")}}:is(.dark,.dark-theme) ${sel}{${dark.join("")}}`,
+				scoped: true
+			};
+		} catch (error) {
+			console.warn(`[Theme] Ignoring invalid accentColor "${accentColor}".`, error);
+			return empty;
+		}
+	}, [
+		accentColor,
+		value.appearance,
+		scopeId
+	]);
+	const resolvedNeutralColor = neutralColor === "auto" ? getMatchingNeutral(value.accentColor ?? "#005EB4") : neutralColor;
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: mergeProps({
+			className: cn("spark-theme", appearance, className),
+			"data-neutral-color": resolvedNeutralColor,
+			"data-radius": radius,
+			"data-scaling": scaling,
+			"data-spacing": spacing,
+			"data-style": styleVariant,
+			"data-high-contrast": highContrast ? "" : void 0,
+			"data-label-position": labelPosition,
+			"data-input-style": inputStyle,
+			"data-input-color": inputColor,
+			"data-card-variant": cardVariant,
+			"data-card-color": cardColor === "accent" ? "accent" : void 0,
+			"data-spark-scope": accent.scoped ? scopeId : void 0,
+			style: {
+				...accent.inlineVars,
+				...style
+			},
+			children
+		}, rest)
+	});
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value,
+		children: [accent.css ? /* @__PURE__ */ jsx("style", { children: accent.css }) : null, element]
+	});
+});
+//#endregion
+export { Theme, useTheme };
+
+//# sourceMappingURL=theme.js.map

package/dist/components/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["React"],"sources":["../../src/components/theme.tsx"],"sourcesContent":["'use client'\n\nimport { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport {\n  CURATED_ACCENTS,\n  accentSparkVars,\n  generateAccentScale,\n  getMatchingNeutral,\n  type Appearance,\n} from '../lib/accent-theme'\nimport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type {\n  SparkCardColor,\n  SparkCardVariant,\n  SparkInputColor,\n  SparkInputStyle,\n  SparkLabelPosition,\n  SparkNeutral,\n  SparkRadius,\n  SparkScaling,\n  SparkSpacing,\n  SparkStyle,\n} from '../lib/theme-types'\n\nexport interface ThemeValue {\n  /** Curated accent name or a custom hex. */\n  accentColor?: string\n  /** A neutral name, or `'auto'` to pair one with the accent (Radix's `grayColor=\"auto\"`). */\n  neutralColor?: SparkNeutral\n  radius?: SparkRadius\n  scaling?: SparkScaling\n  spacing?: SparkSpacing\n  styleVariant?: SparkStyle\n  /** Orthogonal to `styleVariant`: shifts any style toward higher-contrast steps. */\n  highContrast?: boolean\n  labelPosition?: SparkLabelPosition\n  inputStyle?: SparkInputStyle\n  inputColor?: SparkInputColor\n  /** App-level default `<Card>` chrome; a per-card `variant` prop overrides it. */\n  cardVariant?: SparkCardVariant\n  /** App-level default `<Card>` palette; a per-card `color` prop overrides it. */\n  cardColor?: SparkCardColor\n  appearance?: Appearance\n}\n\nconst ThemeContext = React.createContext<ThemeValue>({})\n\n/** Merged theme values from enclosing `<Theme>` providers. */\nexport function useTheme(): ThemeValue {\n  return React.useContext(ThemeContext)\n}\n\nexport interface ThemeProps\n  extends useRender.ComponentProps<'div'>, ThemeValue {}\n\n/** Optional sugar: writes the theming `data-*` attrs + accent `--spark-*` vars onto a wrapper. */\nexport const Theme = React.forwardRef<HTMLDivElement, ThemeProps>(\n  function Theme(\n    {\n      accentColor,\n      neutralColor,\n      radius,\n      scaling,\n      spacing,\n      styleVariant,\n      highContrast,\n      labelPosition,\n      inputStyle,\n      inputColor,\n      cardVariant,\n      cardColor,\n      appearance,\n      render,\n      className,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const parent = useTheme()\n\n    const value = React.useMemo<ThemeValue>(\n      () => ({\n        accentColor: accentColor ?? parent.accentColor,\n        neutralColor: neutralColor ?? parent.neutralColor,\n        radius: radius ?? parent.radius,\n        scaling: scaling ?? parent.scaling,\n        spacing: spacing ?? parent.spacing,\n        styleVariant: styleVariant ?? parent.styleVariant,\n        highContrast: highContrast ?? parent.highContrast,\n        labelPosition: labelPosition ?? parent.labelPosition,\n        inputStyle: inputStyle ?? parent.inputStyle,\n        inputColor: inputColor ?? parent.inputColor,\n        cardVariant: cardVariant ?? parent.cardVariant,\n        cardColor: cardColor ?? parent.cardColor,\n        appearance: appearance ?? parent.appearance,\n      }),\n      [\n        accentColor,\n        neutralColor,\n        radius,\n        scaling,\n        spacing,\n        styleVariant,\n        highContrast,\n        labelPosition,\n        inputStyle,\n        inputColor,\n        cardVariant,\n        cardColor,\n        appearance,\n        parent,\n      ],\n    )\n\n    // Scope id for the ambient-appearance case (both scales emitted in a <style>).\n    const scopeId = React.useId()\n\n    const accent = React.useMemo(() => {\n      const empty = {\n        inlineVars: {} as React.CSSProperties,\n        css: '',\n        scoped: false,\n      }\n      if (!accentColor) return empty\n\n      const toVars = (decls: string[]) =>\n        Object.fromEntries(\n          decls\n            .filter((decl) => decl.includes(':'))\n            .map((decl) => {\n              const i = decl.indexOf(':')\n              return [\n                decl.slice(0, i).trim(),\n                decl\n                  .slice(i + 1)\n                  .replace(/;$/, '')\n                  .trim(),\n              ]\n            }),\n        ) as React.CSSProperties\n\n      try {\n        const hex = CURATED_ACCENTS[accentColor] ?? accentColor\n\n        // Explicit appearance → single-scale inline vars. Correct for a light\n        // island inside a dark page (which must NOT pick up the dark scale).\n        if (value.appearance) {\n          return {\n            inlineVars: toVars(\n              accentSparkVars(generateAccentScale(hex, value.appearance)),\n            ),\n            css: '',\n            scoped: false,\n          }\n        }\n\n        // Ambient appearance → emit BOTH scales in a scoped <style> so the\n        // `.dark` class selects the right one. Without this, a single-appearance\n        // inline scale (default light) breaks components in dark mode.\n        const light = accentSparkVars(generateAccentScale(hex, 'light'))\n        const dark = accentSparkVars(generateAccentScale(hex, 'dark'))\n        const sel = `[data-spark-scope=\"${scopeId}\"]`\n        const css = `${sel}{${light.join('')}}:is(.dark,.dark-theme) ${sel}{${dark.join('')}}`\n        return { inlineVars: {} as React.CSSProperties, css, scoped: true }\n      } catch (error) {\n        // A bad accentColor must not throw through render — fall back to the default theme.\n        console.warn(\n          `[Theme] Ignoring invalid accentColor \"${accentColor}\".`,\n          error,\n        )\n        return empty\n      }\n    }, [accentColor, value.appearance, scopeId])\n\n    // 'auto' pairs a neutral with the effective accent (Radix's grayColor=\"auto\").\n    const resolvedNeutralColor =\n      neutralColor === 'auto'\n        ? getMatchingNeutral(value.accentColor ?? '#005EB4')\n        : neutralColor\n\n    const element = useRender({\n      defaultTagName: 'div',\n      render,\n      ref,\n      props: mergeProps<'div'>(\n        {\n          className: cn('spark-theme', appearance, className),\n          'data-neutral-color': resolvedNeutralColor,\n          'data-radius': radius,\n          'data-scaling': scaling,\n          'data-spacing': spacing,\n          'data-style': styleVariant,\n          'data-high-contrast': highContrast ? '' : undefined,\n          'data-label-position': labelPosition,\n          'data-input-style': inputStyle,\n          'data-input-color': inputColor,\n          'data-card-variant': cardVariant,\n          'data-card-color': cardColor === 'accent' ? 'accent' : undefined,\n          'data-spark-scope': accent.scoped ? scopeId : undefined,\n          style: { ...accent.inlineVars, ...style },\n          children,\n        } as React.ComponentProps<'div'>,\n        rest,\n      ),\n    })\n\n    return (\n      <ThemeContext.Provider value={value}>\n        {accent.css ? <style>{accent.css}</style> : null}\n        {element}\n      </ThemeContext.Provider>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/components/thumbnail.cjs

@@ -0,0 +1,54 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/thumbnail.tsx
+const ratioClasses = {
+	"1:1": "aspect-square",
+	"3:2": "aspect-[3/2]",
+	"4:3": "aspect-[4/3]",
+	"16:9": "aspect-[16/9]",
+	"3:4": "aspect-[3/4]",
+	"2:3": "aspect-[2/3]"
+};
+const radiusClasses = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	full: "rounded-full"
+};
+function Thumbnail({ className, src, alt = "", ratio = "1:1", fit = "cover", radius = "md", imgProps, children, ...props }) {
+	const [errored, setErrored] = react.useState(false);
+	const imgRef = react.useRef(null);
+	react.useEffect(() => {
+		setErrored(false);
+		const node = imgRef.current;
+		if (node?.complete && node.naturalWidth === 0) setErrored(true);
+	}, [src]);
+	const showImage = !!src && !errored;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "thumbnail",
+		className: (0, cnfast.cn)("relative flex items-center justify-center overflow-hidden bg-base-gray-soft", ratioClasses[ratio], radiusClasses[radius], className),
+		...props,
+		children: showImage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			...imgProps,
+			ref: imgRef,
+			src,
+			alt,
+			onError: (e) => {
+				setErrored(true);
+				imgProps?.onError?.(e);
+			},
+			className: (0, cnfast.cn)("size-full", fit === "contain" ? "object-contain" : "object-cover", imgProps?.className)
+		}) : children
+	});
+}
+Thumbnail.displayName = "Thumbnail";
+//#endregion
+exports.Thumbnail = Thumbnail;
+
+//# sourceMappingURL=thumbnail.cjs.map

package/dist/components/thumbnail.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.cjs","names":["React"],"sources":["../../src/components/thumbnail.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype ThumbnailRatio = '1:1' | '3:2' | '4:3' | '16:9' | '3:4' | '2:3'\ntype ThumbnailFit = 'cover' | 'contain'\ntype ThumbnailRadius = 'none' | 'sm' | 'md' | 'lg' | 'full'\n\nconst ratioClasses = {\n  '1:1': 'aspect-square',\n  '3:2': 'aspect-[3/2]',\n  '4:3': 'aspect-[4/3]',\n  '16:9': 'aspect-[16/9]',\n  '3:4': 'aspect-[3/4]',\n  '2:3': 'aspect-[2/3]',\n}\n\nconst radiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  full: 'rounded-full',\n}\n\ninterface ThumbnailProps extends React.ComponentProps<'div'> {\n  src?: string\n  alt?: string\n  ratio?: ThumbnailRatio\n  fit?: ThumbnailFit\n  radius?: ThumbnailRadius\n  imgProps?: React.ComponentProps<'img'>\n}\n\nfunction Thumbnail({\n  className,\n  src,\n  alt = '',\n  ratio = '1:1',\n  fit = 'cover',\n  radius = 'md',\n  imgProps,\n  children,\n  ...props\n}: ThumbnailProps) {\n  const [errored, setErrored] = React.useState(false)\n  const imgRef = React.useRef<HTMLImageElement>(null)\n\n  React.useEffect(() => {\n    // A new src must clear a prior error, or a fixed src would stay stuck on the\n    // fallback. An image that already failed before React attached onError (SSR\n    // hydration, or a cached 404) never fires the event, so also detect that failure\n    // straight from the DOM node here.\n    setErrored(false)\n    const node = imgRef.current\n    if (node?.complete && node.naturalWidth === 0) setErrored(true)\n  }, [src])\n\n  const showImage = !!src && !errored\n\n  return (\n    <div\n      data-slot=\"thumbnail\"\n      className={cn(\n        'relative flex items-center justify-center overflow-hidden bg-base-gray-soft',\n        ratioClasses[ratio],\n        radiusClasses[radius],\n        className,\n      )}\n      {...props}\n    >\n      {showImage ? (\n        <img\n          {...imgProps}\n          ref={imgRef}\n          src={src}\n          alt={alt}\n          onError={(e) => {\n            setErrored(true)\n            imgProps?.onError?.(e)\n          }}\n          className={cn(\n            'size-full',\n            fit === 'contain' ? 'object-contain' : 'object-cover',\n            imgProps?.className,\n          )}\n        />\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n\nThumbnail.displayName = 'Thumbnail'\n\nexport { Thumbnail }\nexport type { ThumbnailProps, ThumbnailRatio, ThumbnailFit, ThumbnailRadius }\n"],"mappings":";;;;;;;;AAOA,MAAM,eAAe;CACnB,OAAO;CACP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,OAAO;CACP,OAAO;AACT;AAEA,MAAM,gBAAgB;CACpB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAWA,SAAS,UAAU,EACjB,WACA,KACA,MAAM,IACN,QAAQ,OACR,MAAM,SACN,SAAS,MACT,UACA,UACA,GAAG,SACc;CACjB,MAAM,CAAC,SAAS,cAAcA,MAAM,SAAS,KAAK;CAClD,MAAM,SAASA,MAAM,OAAyB,IAAI;CAElD,MAAM,gBAAgB;EAKpB,WAAW,KAAK;EAChB,MAAM,OAAO,OAAO;EACpB,IAAI,MAAM,YAAY,KAAK,iBAAiB,GAAG,WAAW,IAAI;CAChE,GAAG,CAAC,GAAG,CAAC;CAER,MAAM,YAAY,CAAC,CAAC,OAAO,CAAC;CAE5B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,+EACA,aAAa,QACb,cAAc,SACd,SACF;EACA,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACA;GACA;GACL,UAAU,MAAM;IACd,WAAW,IAAI;IACf,UAAU,UAAU,CAAC;GACvB;GACA,YAAA,GAAA,OAAA,IACE,aACA,QAAQ,YAAY,mBAAmB,gBACvC,UAAU,SACZ;EACD,CAAA,IAED;CAEC,CAAA;AAET;AAEA,UAAU,cAAc"}

package/dist/components/thumbnail.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/thumbnail.d.ts
+type ThumbnailRatio = '1:1' | '3:2' | '4:3' | '16:9' | '3:4' | '2:3';
+type ThumbnailFit = 'cover' | 'contain';
+type ThumbnailRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface ThumbnailProps extends React$1.ComponentProps<'div'> {
+  src?: string;
+  alt?: string;
+  ratio?: ThumbnailRatio;
+  fit?: ThumbnailFit;
+  radius?: ThumbnailRadius;
+  imgProps?: React$1.ComponentProps<'img'>;
+}
+declare function Thumbnail({
+  className,
+  src,
+  alt,
+  ratio,
+  fit,
+  radius,
+  imgProps,
+  children,
+  ...props
+}: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Thumbnail {
+  var displayName: string;
+}
+//#endregion
+export { Thumbnail, type ThumbnailFit, type ThumbnailProps, type ThumbnailRadius, type ThumbnailRatio };
+//# sourceMappingURL=thumbnail.d.cts.map

package/dist/components/thumbnail.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/thumbnail.d.ts
+type ThumbnailRatio = '1:1' | '3:2' | '4:3' | '16:9' | '3:4' | '2:3';
+type ThumbnailFit = 'cover' | 'contain';
+type ThumbnailRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface ThumbnailProps extends React$1.ComponentProps<'div'> {
+  src?: string;
+  alt?: string;
+  ratio?: ThumbnailRatio;
+  fit?: ThumbnailFit;
+  radius?: ThumbnailRadius;
+  imgProps?: React$1.ComponentProps<'img'>;
+}
+declare function Thumbnail({
+  className,
+  src,
+  alt,
+  ratio,
+  fit,
+  radius,
+  imgProps,
+  children,
+  ...props
+}: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Thumbnail {
+  var displayName: string;
+}
+//#endregion
+export { Thumbnail, type ThumbnailFit, type ThumbnailProps, type ThumbnailRadius, type ThumbnailRatio };
+//# sourceMappingURL=thumbnail.d.ts.map

package/dist/components/thumbnail.js

@@ -0,0 +1,51 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/thumbnail.tsx
+const ratioClasses = {
+	"1:1": "aspect-square",
+	"3:2": "aspect-[3/2]",
+	"4:3": "aspect-[4/3]",
+	"16:9": "aspect-[16/9]",
+	"3:4": "aspect-[3/4]",
+	"2:3": "aspect-[2/3]"
+};
+const radiusClasses = {
+	none: "rounded-none",
+	sm: "rounded-sm",
+	md: "rounded-md",
+	lg: "rounded-lg",
+	full: "rounded-full"
+};
+function Thumbnail({ className, src, alt = "", ratio = "1:1", fit = "cover", radius = "md", imgProps, children, ...props }) {
+	const [errored, setErrored] = React$1.useState(false);
+	const imgRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		setErrored(false);
+		const node = imgRef.current;
+		if (node?.complete && node.naturalWidth === 0) setErrored(true);
+	}, [src]);
+	const showImage = !!src && !errored;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "thumbnail",
+		className: cn("relative flex items-center justify-center overflow-hidden bg-base-gray-soft", ratioClasses[ratio], radiusClasses[radius], className),
+		...props,
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			...imgProps,
+			ref: imgRef,
+			src,
+			alt,
+			onError: (e) => {
+				setErrored(true);
+				imgProps?.onError?.(e);
+			},
+			className: cn("size-full", fit === "contain" ? "object-contain" : "object-cover", imgProps?.className)
+		}) : children
+	});
+}
+Thumbnail.displayName = "Thumbnail";
+//#endregion
+export { Thumbnail };
+
+//# sourceMappingURL=thumbnail.js.map

package/dist/components/thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.js","names":["React"],"sources":["../../src/components/thumbnail.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype ThumbnailRatio = '1:1' | '3:2' | '4:3' | '16:9' | '3:4' | '2:3'\ntype ThumbnailFit = 'cover' | 'contain'\ntype ThumbnailRadius = 'none' | 'sm' | 'md' | 'lg' | 'full'\n\nconst ratioClasses = {\n  '1:1': 'aspect-square',\n  '3:2': 'aspect-[3/2]',\n  '4:3': 'aspect-[4/3]',\n  '16:9': 'aspect-[16/9]',\n  '3:4': 'aspect-[3/4]',\n  '2:3': 'aspect-[2/3]',\n}\n\nconst radiusClasses = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  full: 'rounded-full',\n}\n\ninterface ThumbnailProps extends React.ComponentProps<'div'> {\n  src?: string\n  alt?: string\n  ratio?: ThumbnailRatio\n  fit?: ThumbnailFit\n  radius?: ThumbnailRadius\n  imgProps?: React.ComponentProps<'img'>\n}\n\nfunction Thumbnail({\n  className,\n  src,\n  alt = '',\n  ratio = '1:1',\n  fit = 'cover',\n  radius = 'md',\n  imgProps,\n  children,\n  ...props\n}: ThumbnailProps) {\n  const [errored, setErrored] = React.useState(false)\n  const imgRef = React.useRef<HTMLImageElement>(null)\n\n  React.useEffect(() => {\n    // A new src must clear a prior error, or a fixed src would stay stuck on the\n    // fallback. An image that already failed before React attached onError (SSR\n    // hydration, or a cached 404) never fires the event, so also detect that failure\n    // straight from the DOM node here.\n    setErrored(false)\n    const node = imgRef.current\n    if (node?.complete && node.naturalWidth === 0) setErrored(true)\n  }, [src])\n\n  const showImage = !!src && !errored\n\n  return (\n    <div\n      data-slot=\"thumbnail\"\n      className={cn(\n        'relative flex items-center justify-center overflow-hidden bg-base-gray-soft',\n        ratioClasses[ratio],\n        radiusClasses[radius],\n        className,\n      )}\n      {...props}\n    >\n      {showImage ? (\n        <img\n          {...imgProps}\n          ref={imgRef}\n          src={src}\n          alt={alt}\n          onError={(e) => {\n            setErrored(true)\n            imgProps?.onError?.(e)\n          }}\n          className={cn(\n            'size-full',\n            fit === 'contain' ? 'object-contain' : 'object-cover',\n            imgProps?.className,\n          )}\n        />\n      ) : (\n        children\n      )}\n    </div>\n  )\n}\n\nThumbnail.displayName = 'Thumbnail'\n\nexport { Thumbnail }\nexport type { ThumbnailProps, ThumbnailRatio, ThumbnailFit, ThumbnailRadius }\n"],"mappings":";;;;;AAOA,MAAM,eAAe;CACnB,OAAO;CACP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,OAAO;CACP,OAAO;AACT;AAEA,MAAM,gBAAgB;CACpB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAWA,SAAS,UAAU,EACjB,WACA,KACA,MAAM,IACN,QAAQ,OACR,MAAM,SACN,SAAS,MACT,UACA,UACA,GAAG,SACc;CACjB,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,KAAK;CAClD,MAAM,SAASA,QAAM,OAAyB,IAAI;CAElD,QAAM,gBAAgB;EAKpB,WAAW,KAAK;EAChB,MAAM,OAAO,OAAO;EACpB,IAAI,MAAM,YAAY,KAAK,iBAAiB,GAAG,WAAW,IAAI;CAChE,GAAG,CAAC,GAAG,CAAC;CAER,MAAM,YAAY,CAAC,CAAC,OAAO,CAAC;CAE5B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,aAAa,QACb,cAAc,SACd,SACF;EACA,GAAI;YAEH,YACC,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACA;GACA;GACL,UAAU,MAAM;IACd,WAAW,IAAI;IACf,UAAU,UAAU,CAAC;GACvB;GACA,WAAW,GACT,aACA,QAAQ,YAAY,mBAAmB,gBACvC,UAAU,SACZ;EACD,CAAA,IAED;CAEC,CAAA;AAET;AAEA,UAAU,cAAc"}

package/dist/components/time-picker.cjs

@@ -0,0 +1,105 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/time-picker.tsx
+const MINUTES_PER_DAY = 1440;
+/**
+* Move `HH:mm` one grid step in `direction`, aligning to the `step` grid first.
+* A native `<input type="time">` steps each focused segment by one unit and
+* ignores `step`, so callers that want arrow keys to move by a coarse step
+* (e.g. 5 minutes) route the arrow keys through this instead. Clamped to
+* `00:00`–`23:55` (no wrap); an off-grid start lands on the next grid point in
+* the pressed direction.
+*/
+function stepGridValue(value, step, direction) {
+	const stepMinutes = Math.floor(step / 60);
+	if (stepMinutes <= 1) return value;
+	const match = /^(\d{1,2}):(\d{2})/.exec(value);
+	const base = match ? Number(match[1]) * 60 + Number(match[2]) : 0;
+	const next = direction === 1 ? Math.floor(base / stepMinutes) * stepMinutes + stepMinutes : Math.ceil(base / stepMinutes) * stepMinutes - stepMinutes;
+	const lastOnGrid = Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes;
+	const clamped = Math.max(0, Math.min(next, lastOnGrid));
+	return `${String(Math.floor(clamped / 60)).padStart(2, "0")}:${String(clamped % 60).padStart(2, "0")}`;
+}
+/**
+* Round `HH:mm` to the nearest multiple of `step` (used to autofix a typed
+* off-grid value on blur). Already-on-grid values pass through unchanged (so a
+* seconds suffix is preserved); anything that isn't `HH:mm(:ss)` passes through.
+*/
+function snapToNearestStep(value, step) {
+	const stepMinutes = Math.floor(step / 60);
+	if (stepMinutes <= 1) return value;
+	const match = /^(\d{1,2}):(\d{2})/.exec(value);
+	if (!match) return value;
+	const minutes = Number(match[2]);
+	if (minutes % stepMinutes === 0) return value;
+	const total = Number(match[1]) * 60 + minutes;
+	const lastOnGrid = Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes;
+	const snapped = Math.min(Math.round(total / stepMinutes) * stepMinutes, lastOnGrid);
+	return `${String(Math.floor(snapped / 60)).padStart(2, "0")}:${String(snapped % 60).padStart(2, "0")}`;
+}
+const TimePicker = react.forwardRef(({ "aria-label": ariaLabel, className, disabled, id, onValueChange, step = 60, value }, ref) => {
+	const stepMinutes = Math.floor(step / 60);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref,
+		id,
+		type: "time",
+		value,
+		step,
+		disabled,
+		onChange: (event) => onValueChange(event.target.value),
+		onKeyDown: (event) => {
+			if (stepMinutes <= 1) return;
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			event.preventDefault();
+			onValueChange(stepGridValue(value, step, event.key === "ArrowUp" ? 1 : -1));
+		},
+		onBlur: (event) => {
+			if (stepMinutes <= 1) return;
+			const snapped = snapToNearestStep(event.currentTarget.value, step);
+			if (snapped !== event.currentTarget.value) onValueChange(snapped);
+		},
+		"aria-label": ariaLabel,
+		className: (0, cnfast.cn)("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
+	});
+});
+TimePicker.displayName = "TimePicker";
+function TimeRangePicker({ className, disabled, end, endLabel = "End", onEndChange, onStartChange, start, startLabel = "Start", step }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("grid grid-cols-2 gap-2", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs font-medium text-gray-light",
+				children: startLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimePicker, {
+				value: start,
+				onValueChange: onStartChange,
+				disabled,
+				step,
+				"aria-label": startLabel
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs font-medium text-gray-light",
+				children: endLabel
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimePicker, {
+				value: end,
+				onValueChange: onEndChange,
+				disabled,
+				step,
+				"aria-label": endLabel
+			})]
+		})]
+	});
+}
+//#endregion
+exports.TimePicker = TimePicker;
+exports.TimeRangePicker = TimeRangePicker;
+
+//# sourceMappingURL=time-picker.cjs.map

package/dist/components/time-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.cjs","names":["React"],"sources":["../../src/components/time-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface TimePickerProps {\n  /** `HH:MM` 24-hour string. */\n  value: string\n  onValueChange: (next: string) => void\n  disabled?: boolean\n  /** Step in seconds (defaults to 60 — minute-resolution). */\n  step?: number\n  className?: string\n  id?: string\n  'aria-label'?: string\n}\n\nconst MINUTES_PER_DAY = 24 * 60\n\n/**\n * Move `HH:mm` one grid step in `direction`, aligning to the `step` grid first.\n * A native `<input type=\"time\">` steps each focused segment by one unit and\n * ignores `step`, so callers that want arrow keys to move by a coarse step\n * (e.g. 5 minutes) route the arrow keys through this instead. Clamped to\n * `00:00`–`23:55` (no wrap); an off-grid start lands on the next grid point in\n * the pressed direction.\n */\nfunction stepGridValue(value: string, step: number, direction: 1 | -1): string {\n  const stepMinutes = Math.floor(step / 60)\n  if (stepMinutes <= 1) return value\n  const match = /^(\\d{1,2}):(\\d{2})/.exec(value)\n  const base = match ? Number(match[1]) * 60 + Number(match[2]) : 0\n  const next =\n    direction === 1\n      ? Math.floor(base / stepMinutes) * stepMinutes + stepMinutes\n      : Math.ceil(base / stepMinutes) * stepMinutes - stepMinutes\n  const lastOnGrid =\n    Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes\n  const clamped = Math.max(0, Math.min(next, lastOnGrid))\n  const hh = String(Math.floor(clamped / 60)).padStart(2, '0')\n  const mm = String(clamped % 60).padStart(2, '0')\n  return `${hh}:${mm}`\n}\n\n/**\n * Round `HH:mm` to the nearest multiple of `step` (used to autofix a typed\n * off-grid value on blur). Already-on-grid values pass through unchanged (so a\n * seconds suffix is preserved); anything that isn't `HH:mm(:ss)` passes through.\n */\nfunction snapToNearestStep(value: string, step: number): string {\n  const stepMinutes = Math.floor(step / 60)\n  if (stepMinutes <= 1) return value\n  const match = /^(\\d{1,2}):(\\d{2})/.exec(value)\n  if (!match) return value\n  const minutes = Number(match[2])\n  if (minutes % stepMinutes === 0) return value\n  const total = Number(match[1]) * 60 + minutes\n  const lastOnGrid =\n    Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes\n  const snapped = Math.min(\n    Math.round(total / stepMinutes) * stepMinutes,\n    lastOnGrid,\n  )\n  const hh = String(Math.floor(snapped / 60)).padStart(2, '0')\n  const mm = String(snapped % 60).padStart(2, '0')\n  return `${hh}:${mm}`\n}\n\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      disabled,\n      id,\n      onValueChange,\n      step = 60,\n      value,\n    },\n    ref,\n  ) => {\n    const stepMinutes = Math.floor(step / 60)\n    return (\n      <input\n        ref={ref}\n        id={id}\n        type=\"time\"\n        value={value}\n        step={step}\n        disabled={disabled}\n        onChange={(event) => onValueChange(event.target.value)}\n        onKeyDown={(event) => {\n          // Native arrows step the focused segment by one unit and ignore step;\n          // for a coarse grid, drive up/down through the grid instead.\n          if (stepMinutes <= 1) return\n          if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return\n          event.preventDefault()\n          onValueChange(\n            stepGridValue(value, step, event.key === 'ArrowUp' ? 1 : -1),\n          )\n        }}\n        onBlur={(event) => {\n          // Autofix a typed off-grid value to the closest grid point on blur.\n          if (stepMinutes <= 1) return\n          const snapped = snapToNearestStep(event.currentTarget.value, step)\n          if (snapped !== event.currentTarget.value) onValueChange(snapped)\n        }}\n        aria-label={ariaLabel}\n        className={cn(\n          'h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nTimePicker.displayName = 'TimePicker'\n\ninterface TimeRangePickerProps {\n  start: string\n  end: string\n  onStartChange: (next: string) => void\n  onEndChange: (next: string) => void\n  disabled?: boolean\n  startLabel?: string\n  endLabel?: string\n  /** Step in seconds, forwarded to both inputs (defaults to 60). */\n  step?: number\n  className?: string\n}\n\nfunction TimeRangePicker({\n  className,\n  disabled,\n  end,\n  endLabel = 'End',\n  onEndChange,\n  onStartChange,\n  start,\n  startLabel = 'Start',\n  step,\n}: TimeRangePickerProps) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-2', className)}>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">\n          {startLabel}\n        </span>\n        <TimePicker\n          value={start}\n          onValueChange={onStartChange}\n          disabled={disabled}\n          step={step}\n          aria-label={startLabel}\n        />\n      </label>\n      <label className=\"flex flex-col gap-1.5\">\n        <span className=\"text-xs font-medium text-gray-light\">{endLabel}</span>\n        <TimePicker\n          value={end}\n          onValueChange={onEndChange}\n          disabled={disabled}\n          step={step}\n          aria-label={endLabel}\n        />\n      </label>\n    </div>\n  )\n}\n\nexport { TimePicker, TimeRangePicker }\n"],"mappings":"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"}

package/dist/components/time-picker.d.cts

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/time-picker.d.ts
+interface TimePickerProps {
+  /** `HH:MM` 24-hour string. */
+  value: string;
+  onValueChange: (next: string) => void;
+  disabled?: boolean;
+  /** Step in seconds (defaults to 60 — minute-resolution). */
+  step?: number;
+  className?: string;
+  id?: string;
+  'aria-label'?: string;
+}
+declare const TimePicker: React$1.ForwardRefExoticComponent<TimePickerProps & React$1.RefAttributes<HTMLInputElement>>;
+interface TimeRangePickerProps {
+  start: string;
+  end: string;
+  onStartChange: (next: string) => void;
+  onEndChange: (next: string) => void;
+  disabled?: boolean;
+  startLabel?: string;
+  endLabel?: string;
+  /** Step in seconds, forwarded to both inputs (defaults to 60). */
+  step?: number;
+  className?: string;
+}
+declare function TimeRangePicker({
+  className,
+  disabled,
+  end,
+  endLabel,
+  onEndChange,
+  onStartChange,
+  start,
+  startLabel,
+  step
+}: TimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { TimePicker, TimeRangePicker };
+//# sourceMappingURL=time-picker.d.cts.map

package/dist/components/time-picker.d.ts

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/components/time-picker.d.ts
+interface TimePickerProps {
+  /** `HH:MM` 24-hour string. */
+  value: string;
+  onValueChange: (next: string) => void;
+  disabled?: boolean;
+  /** Step in seconds (defaults to 60 — minute-resolution). */
+  step?: number;
+  className?: string;
+  id?: string;
+  'aria-label'?: string;
+}
+declare const TimePicker: React$1.ForwardRefExoticComponent<TimePickerProps & React$1.RefAttributes<HTMLInputElement>>;
+interface TimeRangePickerProps {
+  start: string;
+  end: string;
+  onStartChange: (next: string) => void;
+  onEndChange: (next: string) => void;
+  disabled?: boolean;
+  startLabel?: string;
+  endLabel?: string;
+  /** Step in seconds, forwarded to both inputs (defaults to 60). */
+  step?: number;
+  className?: string;
+}
+declare function TimeRangePicker({
+  className,
+  disabled,
+  end,
+  endLabel,
+  onEndChange,
+  onStartChange,
+  start,
+  startLabel,
+  step
+}: TimeRangePickerProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { TimePicker, TimeRangePicker };
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/time-picker.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/time-picker.tsx
+const MINUTES_PER_DAY = 1440;
+/**
+* Move `HH:mm` one grid step in `direction`, aligning to the `step` grid first.
+* A native `<input type="time">` steps each focused segment by one unit and
+* ignores `step`, so callers that want arrow keys to move by a coarse step
+* (e.g. 5 minutes) route the arrow keys through this instead. Clamped to
+* `00:00`–`23:55` (no wrap); an off-grid start lands on the next grid point in
+* the pressed direction.
+*/
+function stepGridValue(value, step, direction) {
+	const stepMinutes = Math.floor(step / 60);
+	if (stepMinutes <= 1) return value;
+	const match = /^(\d{1,2}):(\d{2})/.exec(value);
+	const base = match ? Number(match[1]) * 60 + Number(match[2]) : 0;
+	const next = direction === 1 ? Math.floor(base / stepMinutes) * stepMinutes + stepMinutes : Math.ceil(base / stepMinutes) * stepMinutes - stepMinutes;
+	const lastOnGrid = Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes;
+	const clamped = Math.max(0, Math.min(next, lastOnGrid));
+	return `${String(Math.floor(clamped / 60)).padStart(2, "0")}:${String(clamped % 60).padStart(2, "0")}`;
+}
+/**
+* Round `HH:mm` to the nearest multiple of `step` (used to autofix a typed
+* off-grid value on blur). Already-on-grid values pass through unchanged (so a
+* seconds suffix is preserved); anything that isn't `HH:mm(:ss)` passes through.
+*/
+function snapToNearestStep(value, step) {
+	const stepMinutes = Math.floor(step / 60);
+	if (stepMinutes <= 1) return value;
+	const match = /^(\d{1,2}):(\d{2})/.exec(value);
+	if (!match) return value;
+	const minutes = Number(match[2]);
+	if (minutes % stepMinutes === 0) return value;
+	const total = Number(match[1]) * 60 + minutes;
+	const lastOnGrid = Math.floor((MINUTES_PER_DAY - 1) / stepMinutes) * stepMinutes;
+	const snapped = Math.min(Math.round(total / stepMinutes) * stepMinutes, lastOnGrid);
+	return `${String(Math.floor(snapped / 60)).padStart(2, "0")}:${String(snapped % 60).padStart(2, "0")}`;
+}
+const TimePicker = React$1.forwardRef(({ "aria-label": ariaLabel, className, disabled, id, onValueChange, step = 60, value }, ref) => {
+	const stepMinutes = Math.floor(step / 60);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		id,
+		type: "time",
+		value,
+		step,
+		disabled,
+		onChange: (event) => onValueChange(event.target.value),
+		onKeyDown: (event) => {
+			if (stepMinutes <= 1) return;
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			event.preventDefault();
+			onValueChange(stepGridValue(value, step, event.key === "ArrowUp" ? 1 : -1));
+		},
+		onBlur: (event) => {
+			if (stepMinutes <= 1) return;
+			const snapped = snapToNearestStep(event.currentTarget.value, step);
+			if (snapped !== event.currentTarget.value) onValueChange(snapped);
+		},
+		"aria-label": ariaLabel,
+		className: cn("h-10 w-full rounded-xl bg-base-gray-soft px-3 text-base font-medium text-gray tabular-nums transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className)
+	});
+});
+TimePicker.displayName = "TimePicker";
+function TimeRangePicker({ className, disabled, end, endLabel = "End", onEndChange, onStartChange, start, startLabel = "Start", step }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid grid-cols-2 gap-2", className),
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-gray-light",
+				children: startLabel
+			}), /* @__PURE__ */ jsx(TimePicker, {
+				value: start,
+				onValueChange: onStartChange,
+				disabled,
+				step,
+				"aria-label": startLabel
+			})]
+		}), /* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-gray-light",
+				children: endLabel
+			}), /* @__PURE__ */ jsx(TimePicker, {
+				value: end,
+				onValueChange: onEndChange,
+				disabled,
+				step,
+				"aria-label": endLabel
+			})]
+		})]
+	});
+}
+//#endregion
+export { TimePicker, TimeRangePicker };
+
+//# sourceMappingURL=time-picker.js.map