@viax.io/uxm 4.36.0

package/dist/ui/thumbnail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/thumbnail/index.ts"],"sourcesContent":["export * from './thumbnail';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/thumbnail/thumbnail-preview.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var thumbnail_preview_exports = {};
+__export(thumbnail_preview_exports, {
+  ThumbnailPreview: () => ThumbnailPreview
+});
+module.exports = __toCommonJS(thumbnail_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function stylesToCssVars(styles) {
+  const out = {};
+  for (const [key, value] of Object.entries(styles)) {
+    const cssVar = "--uxm-thumbnail-" + key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    if (typeof value === "boolean") {
+      out[cssVar] = value ? "1" : "0";
+    } else if (typeof value === "number") {
+      out[cssVar] = `${value}px`;
+    } else {
+      out[cssVar] = String(value);
+    }
+  }
+  return out;
+}
+const SAMPLE_SRC = "data:image/svg+xml;utf8," + encodeURIComponent(
+  `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'>
+      <rect width='320' height='200' fill='#e5e7eb'/>
+      <circle cx='240' cy='60' r='22' fill='#9ca3af'/>
+      <polygon points='0,140 80,80 140,120 200,70 260,110 320,80 320,200 0,200' fill='#9ca3af' opacity='0.75'/>
+      <polygon points='40,170 110,115 160,150 220,105 260,135 320,115 320,200 0,200' fill='#6b7280'/>
+    </svg>`
+);
+function ThumbnailPreview({ styles, variants }) {
+  const fit = variants.fit ?? "cover";
+  const state = variants.state ?? "image";
+  const thumbStyle = stylesToCssVars(styles);
+  if (state === "placeholder") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Thumbnail, { style: thumbStyle });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Thumbnail, { src: SAMPLE_SRC, alt: "Sample", fit, style: thumbStyle });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThumbnailPreview
+});
+//# sourceMappingURL=thumbnail-preview.cjs.map

package/dist/ui/thumbnail/thumbnail-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/thumbnail/thumbnail-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Thumbnail, type ThumbnailFit } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nfunction stylesToCssVars(styles: PreviewProps['styles']): CSSProperties {\n  const out: Record<string, string> = {};\n  for (const [key, value] of Object.entries(styles)) {\n    const cssVar = '--uxm-thumbnail-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();\n    if (typeof value === 'boolean') {\n      out[cssVar] = value ? '1' : '0';\n    } else if (typeof value === 'number') {\n      out[cssVar] = `${value}px`;\n    } else {\n      out[cssVar] = String(value);\n    }\n  }\n  return out as CSSProperties;\n}\n\n// Neutral grey landscape, 16:10 — wider than a square frame so `cover` (crop)\n// and `contain` (letterbox) render visibly different against the frame's bg.\n// `encodeURIComponent` handles `#` escaping; don't pre-escape in the source.\nconst SAMPLE_SRC =\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'>\n      <rect width='320' height='200' fill='#e5e7eb'/>\n      <circle cx='240' cy='60' r='22' fill='#9ca3af'/>\n      <polygon points='0,140 80,80 140,120 200,70 260,110 320,80 320,200 0,200' fill='#9ca3af' opacity='0.75'/>\n      <polygon points='40,170 110,115 160,150 220,105 260,135 320,115 320,200 0,200' fill='#6b7280'/>\n    </svg>`,\n  );\n\nexport function ThumbnailPreview({ styles, variants }: PreviewProps) {\n  const fit = ((variants.fit as string) ?? 'cover') as ThumbnailFit;\n  const state = (variants.state as string) ?? 'image';\n  const thumbStyle = stylesToCssVars(styles);\n\n  if (state === 'placeholder') {\n    return <Thumbnail style={thumbStyle} />;\n  }\n\n  return <Thumbnail src={SAMPLE_SRC} alt=\"Sample\" fit={fit} style={thumbStyle} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCW;AAvCX,gBAA6C;AAI7C,SAAS,gBAAgB,QAA+C;AACtE,QAAM,MAA8B,CAAC;AACrC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,UAAM,SAAS,qBAAqB,IAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;AAC/E,QAAI,OAAO,UAAU,WAAW;AAC9B,UAAI,MAAM,IAAI,QAAQ,MAAM;AAAA,IAC9B,WAAW,OAAO,UAAU,UAAU;AACpC,UAAI,MAAM,IAAI,GAAG,KAAK;AAAA,IACxB,OAAO;AACL,UAAI,MAAM,IAAI,OAAO,KAAK;AAAA,IAC5B;AAAA,EACF;AACA,SAAO;AACT;AAKA,MAAM,aACJ,6BACA;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AAEK,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAAiB;AACnE,QAAM,MAAQ,SAAS,OAAkB;AACzC,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,aAAa,gBAAgB,MAAM;AAEzC,MAAI,UAAU,eAAe;AAC3B,WAAO,4CAAC,uBAAU,OAAO,YAAY;AAAA,EACvC;AAEA,SAAO,4CAAC,uBAAU,KAAK,YAAY,KAAI,UAAS,KAAU,OAAO,YAAY;AAC/E;","names":[]}

package/dist/ui/thumbnail/thumbnail-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function ThumbnailPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=thumbnail-preview.d.ts.map

package/dist/ui/thumbnail/thumbnail-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/thumbnail/thumbnail-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkCrD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAUlE"}

package/dist/ui/thumbnail/thumbnail-preview.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Thumbnail } from "../../ui/index.js";
+function stylesToCssVars(styles) {
+  const out = {};
+  for (const [key, value] of Object.entries(styles)) {
+    const cssVar = "--uxm-thumbnail-" + key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    if (typeof value === "boolean") {
+      out[cssVar] = value ? "1" : "0";
+    } else if (typeof value === "number") {
+      out[cssVar] = `${value}px`;
+    } else {
+      out[cssVar] = String(value);
+    }
+  }
+  return out;
+}
+const SAMPLE_SRC = "data:image/svg+xml;utf8," + encodeURIComponent(
+  `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'>
+      <rect width='320' height='200' fill='#e5e7eb'/>
+      <circle cx='240' cy='60' r='22' fill='#9ca3af'/>
+      <polygon points='0,140 80,80 140,120 200,70 260,110 320,80 320,200 0,200' fill='#9ca3af' opacity='0.75'/>
+      <polygon points='40,170 110,115 160,150 220,105 260,135 320,115 320,200 0,200' fill='#6b7280'/>
+    </svg>`
+);
+function ThumbnailPreview({ styles, variants }) {
+  const fit = variants.fit ?? "cover";
+  const state = variants.state ?? "image";
+  const thumbStyle = stylesToCssVars(styles);
+  if (state === "placeholder") {
+    return /* @__PURE__ */ jsx(Thumbnail, { style: thumbStyle });
+  }
+  return /* @__PURE__ */ jsx(Thumbnail, { src: SAMPLE_SRC, alt: "Sample", fit, style: thumbStyle });
+}
+export {
+  ThumbnailPreview
+};
+//# sourceMappingURL=thumbnail-preview.js.map

package/dist/ui/thumbnail/thumbnail-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/thumbnail/thumbnail-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Thumbnail, type ThumbnailFit } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nfunction stylesToCssVars(styles: PreviewProps['styles']): CSSProperties {\n  const out: Record<string, string> = {};\n  for (const [key, value] of Object.entries(styles)) {\n    const cssVar = '--uxm-thumbnail-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();\n    if (typeof value === 'boolean') {\n      out[cssVar] = value ? '1' : '0';\n    } else if (typeof value === 'number') {\n      out[cssVar] = `${value}px`;\n    } else {\n      out[cssVar] = String(value);\n    }\n  }\n  return out as CSSProperties;\n}\n\n// Neutral grey landscape, 16:10 — wider than a square frame so `cover` (crop)\n// and `contain` (letterbox) render visibly different against the frame's bg.\n// `encodeURIComponent` handles `#` escaping; don't pre-escape in the source.\nconst SAMPLE_SRC =\n  'data:image/svg+xml;utf8,' +\n  encodeURIComponent(\n    `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 200'>\n      <rect width='320' height='200' fill='#e5e7eb'/>\n      <circle cx='240' cy='60' r='22' fill='#9ca3af'/>\n      <polygon points='0,140 80,80 140,120 200,70 260,110 320,80 320,200 0,200' fill='#9ca3af' opacity='0.75'/>\n      <polygon points='40,170 110,115 160,150 220,105 260,135 320,115 320,200 0,200' fill='#6b7280'/>\n    </svg>`,\n  );\n\nexport function ThumbnailPreview({ styles, variants }: PreviewProps) {\n  const fit = ((variants.fit as string) ?? 'cover') as ThumbnailFit;\n  const state = (variants.state as string) ?? 'image';\n  const thumbStyle = stylesToCssVars(styles);\n\n  if (state === 'placeholder') {\n    return <Thumbnail style={thumbStyle} />;\n  }\n\n  return <Thumbnail src={SAMPLE_SRC} alt=\"Sample\" fit={fit} style={thumbStyle} />;\n}\n"],"mappings":"AAwCW;AAvCX,SAAS,iBAAoC;AAI7C,SAAS,gBAAgB,QAA+C;AACtE,QAAM,MAA8B,CAAC;AACrC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,GAAG;AACjD,UAAM,SAAS,qBAAqB,IAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;AAC/E,QAAI,OAAO,UAAU,WAAW;AAC9B,UAAI,MAAM,IAAI,QAAQ,MAAM;AAAA,IAC9B,WAAW,OAAO,UAAU,UAAU;AACpC,UAAI,MAAM,IAAI,GAAG,KAAK;AAAA,IACxB,OAAO;AACL,UAAI,MAAM,IAAI,OAAO,KAAK;AAAA,IAC5B;AAAA,EACF;AACA,SAAO;AACT;AAKA,MAAM,aACJ,6BACA;AAAA,EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAMF;AAEK,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAAiB;AACnE,QAAM,MAAQ,SAAS,OAAkB;AACzC,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,aAAa,gBAAgB,MAAM;AAEzC,MAAI,UAAU,eAAe;AAC3B,WAAO,oBAAC,aAAU,OAAO,YAAY;AAAA,EACvC;AAEA,SAAO,oBAAC,aAAU,KAAK,YAAY,KAAI,UAAS,KAAU,OAAO,YAAY;AAC/E;","names":[]}

package/dist/ui/thumbnail/thumbnail.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var thumbnail_exports = {};
+__export(thumbnail_exports, {
+  Thumbnail: () => Thumbnail
+});
+module.exports = __toCommonJS(thumbnail_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+function Thumbnail({
+  src,
+  alt,
+  fit = "cover",
+  fallback,
+  className,
+  ...rest
+}) {
+  const [errored, setErrored] = (0, import_react.useState)(false);
+  const showImage = Boolean(src) && !errored;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_helpers.cn)("uxm-thumbnail", `uxm-thumbnail--${fit}`, className),
+      ...rest,
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          className: "uxm-thumbnail__image",
+          src,
+          alt: alt ?? "",
+          onError: () => setErrored(true)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-thumbnail__placeholder", "aria-hidden": true, children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "image" }) })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Thumbnail
+});
+//# sourceMappingURL=thumbnail.cjs.map

package/dist/ui/thumbnail/thumbnail.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type ThumbnailFit = 'cover' | 'contain';\n\nexport interface ThumbnailProps extends HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  fit?: ThumbnailFit;\n  fallback?: ReactNode;\n}\n\nexport function Thumbnail({\n  src,\n  alt,\n  fit = 'cover',\n  fallback,\n  className,\n  ...rest\n}: ThumbnailProps) {\n  const [errored, setErrored] = useState(false);\n  const showImage = Boolean(src) && !errored;\n\n  return (\n    <div\n      className={cn('uxm-thumbnail', `uxm-thumbnail--${fit}`, className)}\n      {...rest}\n    >\n      {showImage ? (\n        <img\n          className=\"uxm-thumbnail__image\"\n          src={src}\n          alt={alt ?? ''}\n          onError={() => setErrored(true)}\n        />\n      ) : (\n        <span className=\"uxm-thumbnail__placeholder\" aria-hidden>\n          {fallback ?? <Icon glyph=\"image\" />}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCQ;AAjCR,mBAAyB;AAEzB,qBAAmB;AACnB,kBAAqB;AAad,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,YAAY,QAAQ,GAAG,KAAK,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,mBAAG,iBAAiB,kBAAkB,GAAG,IAAI,SAAS;AAAA,MAChE,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,SAAS,MAAM,WAAW,IAAI;AAAA;AAAA,MAChC,IAEA,4CAAC,UAAK,WAAU,8BAA6B,eAAW,MACrD,sBAAY,4CAAC,oBAAK,OAAM,SAAQ,GACnC;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/thumbnail/thumbnail.css

@@ -0,0 +1,42 @@
+@charset "UTF-8";
+/* ── thumbnail ── */
+/* Thumbnail — bounded image frame. Root IS the visible frame: bg / border /
+   radius / size land directly. `--uxm-thumbnail-size` drives both width and
+   height (square frame). Image fills via object-fit; placeholder centers a
+   fallback icon when no src is provided. */
+.uxm-thumbnail {
+  align-items: center;
+  background-color: var(--uxm-thumbnail-background-color, var(--color-card));
+  border: var(--uxm-thumbnail-border-width, 2px) solid var(--uxm-thumbnail-border-color, var(--color-border));
+  border-radius: var(--uxm-thumbnail-border-radius, 12px);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--uxm-thumbnail-size, 48px);
+  justify-content: center;
+  overflow: hidden;
+  width: var(--uxm-thumbnail-size, 48px);
+  /* CSS sizing wins over the SVG width/height attrs the Icon component sets,
+     so the placeholder glyph scales with the thumbnail's `--uxm-thumbnail-size`. */
+}
+.uxm-thumbnail__image {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.uxm-thumbnail--cover .uxm-thumbnail__image {
+  object-fit: cover;
+}
+.uxm-thumbnail--contain .uxm-thumbnail__image {
+  object-fit: contain;
+}
+.uxm-thumbnail__placeholder {
+  align-items: center;
+  color: var(--uxm-thumbnail-placeholder-color, var(--color-text-subtle));
+  display: inline-flex;
+  justify-content: center;
+}
+.uxm-thumbnail__placeholder > svg {
+  height: calc(var(--uxm-thumbnail-size, 48px) * 0.45);
+  width: calc(var(--uxm-thumbnail-size, 48px) * 0.45);
+}

package/dist/ui/thumbnail/thumbnail.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type ThumbnailFit = 'cover' | 'contain';
+export interface ThumbnailProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    fit?: ThumbnailFit;
+    fallback?: ReactNode;
+}
+export declare function Thumbnail({ src, alt, fit, fallback, className, ...rest }: ThumbnailProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=thumbnail.d.ts.map

package/dist/ui/thumbnail/thumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.d.ts","sourceRoot":"","sources":["../../../src/ui/thumbnail/thumbnail.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,GAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,cAAc,2CAuBhB"}

package/dist/ui/thumbnail/thumbnail.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/icon/index.js";
+function Thumbnail({
+  src,
+  alt,
+  fit = "cover",
+  fallback,
+  className,
+  ...rest
+}) {
+  const [errored, setErrored] = useState(false);
+  const showImage = Boolean(src) && !errored;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("uxm-thumbnail", `uxm-thumbnail--${fit}`, className),
+      ...rest,
+      children: showImage ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "uxm-thumbnail__image",
+          src,
+          alt: alt ?? "",
+          onError: () => setErrored(true)
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "uxm-thumbnail__placeholder", "aria-hidden": true, children: fallback ?? /* @__PURE__ */ jsx(Icon, { glyph: "image" }) })
+    }
+  );
+}
+export {
+  Thumbnail
+};
+//# sourceMappingURL=thumbnail.js.map

package/dist/ui/thumbnail/thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type ThumbnailFit = 'cover' | 'contain';\n\nexport interface ThumbnailProps extends HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  alt?: string;\n  fit?: ThumbnailFit;\n  fallback?: ReactNode;\n}\n\nexport function Thumbnail({\n  src,\n  alt,\n  fit = 'cover',\n  fallback,\n  className,\n  ...rest\n}: ThumbnailProps) {\n  const [errored, setErrored] = useState(false);\n  const showImage = Boolean(src) && !errored;\n\n  return (\n    <div\n      className={cn('uxm-thumbnail', `uxm-thumbnail--${fit}`, className)}\n      {...rest}\n    >\n      {showImage ? (\n        <img\n          className=\"uxm-thumbnail__image\"\n          src={src}\n          alt={alt ?? ''}\n          onError={() => setErrored(true)}\n        />\n      ) : (\n        <span className=\"uxm-thumbnail__placeholder\" aria-hidden>\n          {fallback ?? <Icon glyph=\"image\" />}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAiCQ;AAjCR,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,YAAY;AAad,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,YAAY,QAAQ,GAAG,KAAK,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,iBAAiB,kBAAkB,GAAG,IAAI,SAAS;AAAA,MAChE,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,SAAS,MAAM,WAAW,IAAI;AAAA;AAAA,MAChC,IAEA,oBAAC,UAAK,WAAU,8BAA6B,eAAW,MACrD,sBAAY,oBAAC,QAAK,OAAM,SAAQ,GACnC;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/time-input/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var time_input_exports = {};
+module.exports = __toCommonJS(time_input_exports);
+__reExport(time_input_exports, require("./time-input.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./time-input.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/time-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/time-input/index.ts"],"sourcesContent":["export * from './time-input';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,yBAAd;","names":[]}

package/dist/ui/time-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './time-input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/time-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/time-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/ui/time-input/index.js

@@ -0,0 +1,2 @@
+export * from "./time-input.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/time-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/time-input/index.ts"],"sourcesContent":["export * from './time-input';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/time-input/time-input-preview.cjs

@@ -0,0 +1,101 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var time_input_preview_exports = {};
+__export(time_input_preview_exports, {
+  TimeInputPreview: () => TimeInputPreview
+});
+module.exports = __toCommonJS(time_input_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-time-input-background-color": styles.backgroundColor,
+    "--uxm-time-input-border-color": styles.borderColor,
+    "--uxm-time-input-color": styles.color,
+    "--uxm-time-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-time-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-time-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-time-input-font-size": `${styles.fontSize}px`,
+    "--uxm-time-input-icon-color": styles.iconColor,
+    "--uxm-time-input-icon-size": `${styles.iconSize}px`,
+    "--uxm-time-input-icon-offset": `${styles.iconOffset}px`,
+    "--uxm-time-input-icon-hover-color": styles.iconHoverColor,
+    "--uxm-time-input-hover-bg": styles.hoverBg,
+    "--uxm-time-input-hover-border": styles.hoverBorder,
+    "--uxm-time-input-focus-border": styles.focusBorder,
+    "--uxm-time-input-focus-ring": styles.focusRing,
+    "--uxm-time-input-disabled-bg": styles.disabledBg,
+    "--uxm-time-input-disabled-border": styles.disabledBorder,
+    "--uxm-time-input-disabled-color": styles.disabledColor,
+    "--uxm-time-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-time-input-error-bg": styles.errorBg,
+    "--uxm-time-input-error-border": styles.errorBorder,
+    "--uxm-time-input-error-color": styles.errorColor,
+    "--uxm-time-input-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    "--uxm-time-input-meridiem-color": styles.meridiemColor,
+    "--uxm-time-input-popover-bg": styles.popoverBg,
+    "--uxm-time-input-popover-border": styles.popoverBorder,
+    "--uxm-time-input-popover-radius": `${styles.popoverRadius}px`,
+    "--uxm-time-input-popover-head-bg": styles.popoverHeadBg,
+    "--uxm-time-input-popover-row-hover-bg": styles.popoverRowHoverBg,
+    "--uxm-time-input-popover-row-selected-bg": styles.popoverRowSelectedBg,
+    "--uxm-time-input-popover-row-selected-color": styles.popoverRowSelectedColor
+  };
+}
+function TimeInputPreview({ styles, variants }) {
+  const format = variants.format ?? "24h";
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimeInputDemo, { state, format, styles }, `${state}-${format}`);
+}
+function TimeInputDemo({
+  state,
+  format,
+  styles
+}) {
+  const isError = state === "error";
+  const buildSeed = (errored, fmt) => {
+    if (!errored) return "";
+    return fmt === "12h" ? "03:00 AM" : "03:00";
+  };
+  const [value, setValue] = (0, import_react.useState)(buildSeed(isError, format));
+  const cssVars = buildVars(styles);
+  const width = format === "12h" ? 260 : 200;
+  const forcedClass = (0, import_helpers.cn)(
+    state === "hover" && "uxm-time-input--state-hover",
+    state === "focus" && "uxm-time-input--state-focus"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width, ...cssVars }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.TimeInput,
+    {
+      format,
+      value,
+      onChange: setValue,
+      disabled: state === "disabled",
+      className: forcedClass || void 0,
+      error: isError ? "Pick a time between 09:00 and 17:00." : void 0
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimeInputPreview
+});
+//# sourceMappingURL=time-input-preview.cjs.map

package/dist/ui/time-input/time-input-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/time-input/time-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { TimeInput, type TimeInputFormat } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob as a `--uxm-time-input-*` custom prop on the\n * wrapper. The wrapper cascade reaches the inner <input> (where the\n * field's :hover / :focus / :disabled rules apply), the clock icon\n * (which reads --uxm-time-input-icon-color), and the AM/PM selector in\n * 12h mode (which reads --uxm-time-input-meridiem-* and re-tones via the\n * `--error` modifier on the wrapper).\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-time-input-background-color': styles.backgroundColor as string,\n    '--uxm-time-input-border-color': styles.borderColor as string,\n    '--uxm-time-input-color': styles.color as string,\n    '--uxm-time-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-time-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-time-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-time-input-font-size': `${styles.fontSize}px`,\n    '--uxm-time-input-icon-color': styles.iconColor as string,\n    '--uxm-time-input-icon-size': `${styles.iconSize}px`,\n    '--uxm-time-input-icon-offset': `${styles.iconOffset}px`,\n    '--uxm-time-input-icon-hover-color': styles.iconHoverColor as string,\n    '--uxm-time-input-hover-bg': styles.hoverBg as string,\n    '--uxm-time-input-hover-border': styles.hoverBorder as string,\n    '--uxm-time-input-focus-border': styles.focusBorder as string,\n    '--uxm-time-input-focus-ring': styles.focusRing as string,\n    '--uxm-time-input-disabled-bg': styles.disabledBg as string,\n    '--uxm-time-input-disabled-border': styles.disabledBorder as string,\n    '--uxm-time-input-disabled-color': styles.disabledColor as string,\n    '--uxm-time-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-time-input-error-bg': styles.errorBg as string,\n    '--uxm-time-input-error-border': styles.errorBorder as string,\n    '--uxm-time-input-error-color': styles.errorColor as string,\n    '--uxm-time-input-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-time-input-meridiem-color': styles.meridiemColor as string,\n    '--uxm-time-input-popover-bg': styles.popoverBg as string,\n    '--uxm-time-input-popover-border': styles.popoverBorder as string,\n    '--uxm-time-input-popover-radius': `${styles.popoverRadius}px`,\n    '--uxm-time-input-popover-head-bg': styles.popoverHeadBg as string,\n    '--uxm-time-input-popover-row-hover-bg': styles.popoverRowHoverBg as string,\n    '--uxm-time-input-popover-row-selected-bg': styles.popoverRowSelectedBg as string,\n    '--uxm-time-input-popover-row-selected-color': styles.popoverRowSelectedColor as string,\n  } as CSSProperties;\n}\n\nexport function TimeInputPreview({ styles, variants }: PreviewProps) {\n  const format = ((variants.format as string) ?? '24h') as TimeInputFormat;\n  const state = (variants.state as string) ?? 'default';\n  return (\n    <TimeInputDemo key={`${state}-${format}`} state={state} format={format} styles={styles} />\n  );\n}\n\n// Keyed by state+format in the parent so changing either knob remounts\n// and re-seeds `value` — no effect needed to sync.\nfunction TimeInputDemo({\n  state,\n  format,\n  styles,\n}: {\n  state: string;\n  format: TimeInputFormat;\n  styles: Styles;\n}) {\n  const isError = state === 'error';\n\n  // Default state starts empty so the `HH:MM` placeholder is visible —\n  // that's the canonical \"fresh field\" look designers need to theme.\n  // Error mode pre-fills with a value that violates a hypothetical\n  // \"business hours only\" rule (03:00 is too early), so the error UX\n  // reads as a realistic failure rather than just an empty red border.\n  const buildSeed = (errored: boolean, fmt: TimeInputFormat): string => {\n    if (!errored) return '';\n    return fmt === '12h' ? '03:00 AM' : '03:00';\n  };\n\n  const [value, setValue] = useState(buildSeed(isError, format));\n\n  const cssVars = buildVars(styles);\n  const width = format === '12h' ? 260 : 200;\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-time-input--state-hover',\n    state === 'focus' && 'uxm-time-input--state-focus',\n  );\n\n  return (\n    <div style={{ width, ...cssVars } as CSSProperties}>\n      {/* `--error` is driven by the real `error` prop (not a forced-state\n          class), so the atom renders its production error message — icon\n          + text via the shared FieldError — instead of a preview-only mock. */}\n      <TimeInput\n        format={format}\n        value={value}\n        onChange={setValue}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        error={isError ? 'Pick a time between 09:00 and 17:00.' : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DI;AA1DJ,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAAgD;AAYhD,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,qCAAqC,OAAO;AAAA,IAC5C,iCAAiC,OAAO;AAAA,IACxC,0BAA0B,OAAO;AAAA,IACjC,kCAAkC,GAAG,OAAO,YAAY;AAAA,IACxD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,+BAA+B,OAAO;AAAA,IACtC,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,gCAAgC,GAAG,OAAO,UAAU;AAAA,IACpD,qCAAqC,OAAO;AAAA,IAC5C,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,iCAAiC,OAAO;AAAA,IACxC,+BAA+B,OAAO;AAAA,IACtC,gCAAgC,OAAO;AAAA,IACvC,oCAAoC,OAAO;AAAA,IAC3C,mCAAmC,OAAO;AAAA,IAC1C,qCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,OAAO;AAAA,IACvC,uCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,IACrE,mCAAmC,OAAO;AAAA,IAC1C,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,GAAG,OAAO,aAAa;AAAA,IAC1D,oCAAoC,OAAO;AAAA,IAC3C,yCAAyC,OAAO;AAAA,IAChD,4CAA4C,OAAO;AAAA,IACnD,+CAA+C,OAAO;AAAA,EACxD;AACF;AAEO,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAAiB;AACnE,QAAM,SAAW,SAAS,UAAqB;AAC/C,QAAM,QAAS,SAAS,SAAoB;AAC5C,SACE,4CAAC,iBAAyC,OAAc,QAAgB,UAApD,GAAG,KAAK,IAAI,MAAM,EAAkD;AAE5F;AAIA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,UAAU,UAAU;AAO1B,QAAM,YAAY,CAAC,SAAkB,QAAiC;AACpE,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,QAAQ,QAAQ,aAAa;AAAA,EACtC;AAEA,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,MAAM,CAAC;AAE7D,QAAM,UAAU,UAAU,MAAM;AAChC,QAAM,QAAQ,WAAW,QAAQ,MAAM;AAEvC,QAAM,kBAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,GAAG,QAAQ,GAI9B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,UAAU;AAAA,MACpB,WAAW,eAAe;AAAA,MAC1B,OAAO,UAAU,yCAAyC;AAAA;AAAA,EAC5D,GACF;AAEJ;","names":[]}

package/dist/ui/time-input/time-input-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function TimeInputPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=time-input-preview.d.ts.map

package/dist/ui/time-input/time-input-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/time-input/time-input-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAmDrD,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAMlE"}

package/dist/ui/time-input/time-input-preview.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { TimeInput } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    "--uxm-time-input-background-color": styles.backgroundColor,
+    "--uxm-time-input-border-color": styles.borderColor,
+    "--uxm-time-input-color": styles.color,
+    "--uxm-time-input-border-radius": `${styles.borderRadius}px`,
+    "--uxm-time-input-padding-x": `${styles.paddingX}px`,
+    "--uxm-time-input-padding-y": `${styles.paddingY}px`,
+    "--uxm-time-input-font-size": `${styles.fontSize}px`,
+    "--uxm-time-input-icon-color": styles.iconColor,
+    "--uxm-time-input-icon-size": `${styles.iconSize}px`,
+    "--uxm-time-input-icon-offset": `${styles.iconOffset}px`,
+    "--uxm-time-input-icon-hover-color": styles.iconHoverColor,
+    "--uxm-time-input-hover-bg": styles.hoverBg,
+    "--uxm-time-input-hover-border": styles.hoverBorder,
+    "--uxm-time-input-focus-border": styles.focusBorder,
+    "--uxm-time-input-focus-ring": styles.focusRing,
+    "--uxm-time-input-disabled-bg": styles.disabledBg,
+    "--uxm-time-input-disabled-border": styles.disabledBorder,
+    "--uxm-time-input-disabled-color": styles.disabledColor,
+    "--uxm-time-input-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-time-input-error-bg": styles.errorBg,
+    "--uxm-time-input-error-border": styles.errorBorder,
+    "--uxm-time-input-error-color": styles.errorColor,
+    "--uxm-time-input-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    "--uxm-time-input-meridiem-color": styles.meridiemColor,
+    "--uxm-time-input-popover-bg": styles.popoverBg,
+    "--uxm-time-input-popover-border": styles.popoverBorder,
+    "--uxm-time-input-popover-radius": `${styles.popoverRadius}px`,
+    "--uxm-time-input-popover-head-bg": styles.popoverHeadBg,
+    "--uxm-time-input-popover-row-hover-bg": styles.popoverRowHoverBg,
+    "--uxm-time-input-popover-row-selected-bg": styles.popoverRowSelectedBg,
+    "--uxm-time-input-popover-row-selected-color": styles.popoverRowSelectedColor
+  };
+}
+function TimeInputPreview({ styles, variants }) {
+  const format = variants.format ?? "24h";
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(TimeInputDemo, { state, format, styles }, `${state}-${format}`);
+}
+function TimeInputDemo({
+  state,
+  format,
+  styles
+}) {
+  const isError = state === "error";
+  const buildSeed = (errored, fmt) => {
+    if (!errored) return "";
+    return fmt === "12h" ? "03:00 AM" : "03:00";
+  };
+  const [value, setValue] = useState(buildSeed(isError, format));
+  const cssVars = buildVars(styles);
+  const width = format === "12h" ? 260 : 200;
+  const forcedClass = cn(
+    state === "hover" && "uxm-time-input--state-hover",
+    state === "focus" && "uxm-time-input--state-focus"
+  );
+  return /* @__PURE__ */ jsx("div", { style: { width, ...cssVars }, children: /* @__PURE__ */ jsx(
+    TimeInput,
+    {
+      format,
+      value,
+      onChange: setValue,
+      disabled: state === "disabled",
+      className: forcedClass || void 0,
+      error: isError ? "Pick a time between 09:00 and 17:00." : void 0
+    }
+  ) });
+}
+export {
+  TimeInputPreview
+};
+//# sourceMappingURL=time-input-preview.js.map

package/dist/ui/time-input/time-input-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/time-input/time-input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { TimeInput, type TimeInputFormat } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob as a `--uxm-time-input-*` custom prop on the\n * wrapper. The wrapper cascade reaches the inner <input> (where the\n * field's :hover / :focus / :disabled rules apply), the clock icon\n * (which reads --uxm-time-input-icon-color), and the AM/PM selector in\n * 12h mode (which reads --uxm-time-input-meridiem-* and re-tones via the\n * `--error` modifier on the wrapper).\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-time-input-background-color': styles.backgroundColor as string,\n    '--uxm-time-input-border-color': styles.borderColor as string,\n    '--uxm-time-input-color': styles.color as string,\n    '--uxm-time-input-border-radius': `${styles.borderRadius}px`,\n    '--uxm-time-input-padding-x': `${styles.paddingX}px`,\n    '--uxm-time-input-padding-y': `${styles.paddingY}px`,\n    '--uxm-time-input-font-size': `${styles.fontSize}px`,\n    '--uxm-time-input-icon-color': styles.iconColor as string,\n    '--uxm-time-input-icon-size': `${styles.iconSize}px`,\n    '--uxm-time-input-icon-offset': `${styles.iconOffset}px`,\n    '--uxm-time-input-icon-hover-color': styles.iconHoverColor as string,\n    '--uxm-time-input-hover-bg': styles.hoverBg as string,\n    '--uxm-time-input-hover-border': styles.hoverBorder as string,\n    '--uxm-time-input-focus-border': styles.focusBorder as string,\n    '--uxm-time-input-focus-ring': styles.focusRing as string,\n    '--uxm-time-input-disabled-bg': styles.disabledBg as string,\n    '--uxm-time-input-disabled-border': styles.disabledBorder as string,\n    '--uxm-time-input-disabled-color': styles.disabledColor as string,\n    '--uxm-time-input-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-time-input-error-bg': styles.errorBg as string,\n    '--uxm-time-input-error-border': styles.errorBorder as string,\n    '--uxm-time-input-error-color': styles.errorColor as string,\n    '--uxm-time-input-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    '--uxm-time-input-meridiem-color': styles.meridiemColor as string,\n    '--uxm-time-input-popover-bg': styles.popoverBg as string,\n    '--uxm-time-input-popover-border': styles.popoverBorder as string,\n    '--uxm-time-input-popover-radius': `${styles.popoverRadius}px`,\n    '--uxm-time-input-popover-head-bg': styles.popoverHeadBg as string,\n    '--uxm-time-input-popover-row-hover-bg': styles.popoverRowHoverBg as string,\n    '--uxm-time-input-popover-row-selected-bg': styles.popoverRowSelectedBg as string,\n    '--uxm-time-input-popover-row-selected-color': styles.popoverRowSelectedColor as string,\n  } as CSSProperties;\n}\n\nexport function TimeInputPreview({ styles, variants }: PreviewProps) {\n  const format = ((variants.format as string) ?? '24h') as TimeInputFormat;\n  const state = (variants.state as string) ?? 'default';\n  return (\n    <TimeInputDemo key={`${state}-${format}`} state={state} format={format} styles={styles} />\n  );\n}\n\n// Keyed by state+format in the parent so changing either knob remounts\n// and re-seeds `value` — no effect needed to sync.\nfunction TimeInputDemo({\n  state,\n  format,\n  styles,\n}: {\n  state: string;\n  format: TimeInputFormat;\n  styles: Styles;\n}) {\n  const isError = state === 'error';\n\n  // Default state starts empty so the `HH:MM` placeholder is visible —\n  // that's the canonical \"fresh field\" look designers need to theme.\n  // Error mode pre-fills with a value that violates a hypothetical\n  // \"business hours only\" rule (03:00 is too early), so the error UX\n  // reads as a realistic failure rather than just an empty red border.\n  const buildSeed = (errored: boolean, fmt: TimeInputFormat): string => {\n    if (!errored) return '';\n    return fmt === '12h' ? '03:00 AM' : '03:00';\n  };\n\n  const [value, setValue] = useState(buildSeed(isError, format));\n\n  const cssVars = buildVars(styles);\n  const width = format === '12h' ? 260 : 200;\n\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-time-input--state-hover',\n    state === 'focus' && 'uxm-time-input--state-focus',\n  );\n\n  return (\n    <div style={{ width, ...cssVars } as CSSProperties}>\n      {/* `--error` is driven by the real `error` prop (not a forced-state\n          class), so the atom renders its production error message — icon\n          + text via the shared FieldError — instead of a preview-only mock. */}\n      <TimeInput\n        format={format}\n        value={value}\n        onChange={setValue}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        error={isError ? 'Pick a time between 09:00 and 17:00.' : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"AA0DI;AA1DJ,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,iBAAuC;AAYhD,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,qCAAqC,OAAO;AAAA,IAC5C,iCAAiC,OAAO;AAAA,IACxC,0BAA0B,OAAO;AAAA,IACjC,kCAAkC,GAAG,OAAO,YAAY;AAAA,IACxD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,+BAA+B,OAAO;AAAA,IACtC,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,gCAAgC,GAAG,OAAO,UAAU;AAAA,IACpD,qCAAqC,OAAO;AAAA,IAC5C,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,iCAAiC,OAAO;AAAA,IACxC,+BAA+B,OAAO;AAAA,IACtC,gCAAgC,OAAO;AAAA,IACvC,oCAAoC,OAAO;AAAA,IAC3C,mCAAmC,OAAO;AAAA,IAC1C,qCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,OAAO;AAAA,IACvC,uCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,IACrE,mCAAmC,OAAO;AAAA,IAC1C,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,GAAG,OAAO,aAAa;AAAA,IAC1D,oCAAoC,OAAO;AAAA,IAC3C,yCAAyC,OAAO;AAAA,IAChD,4CAA4C,OAAO;AAAA,IACnD,+CAA+C,OAAO;AAAA,EACxD;AACF;AAEO,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAAiB;AACnE,QAAM,SAAW,SAAS,UAAqB;AAC/C,QAAM,QAAS,SAAS,SAAoB;AAC5C,SACE,oBAAC,iBAAyC,OAAc,QAAgB,UAApD,GAAG,KAAK,IAAI,MAAM,EAAkD;AAE5F;AAIA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,UAAU,UAAU;AAO1B,QAAM,YAAY,CAAC,SAAkB,QAAiC;AACpE,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,QAAQ,QAAQ,aAAa;AAAA,EACtC;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,MAAM,CAAC;AAE7D,QAAM,UAAU,UAAU,MAAM;AAChC,QAAM,QAAQ,WAAW,QAAQ,MAAM;AAEvC,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,GAAG,QAAQ,GAI9B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,UAAU,UAAU;AAAA,MACpB,WAAW,eAAe;AAAA,MAC1B,OAAO,UAAU,yCAAyC;AAAA;AAAA,EAC5D,GACF;AAEJ;","names":[]}