@viax.io/uxm 4.36.0

package/dist/ui/button-with-icon/index.js.map

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

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

@@ -0,0 +1,181 @@
+"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 calendar_preview_exports = {};
+__export(calendar_preview_exports, {
+  CalendarPreview: () => CalendarPreview
+});
+module.exports = __toCommonJS(calendar_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 stylesToCssVars(styles) {
+  const out = {};
+  for (const [key, value] of Object.entries(styles)) {
+    const cssVar = "--uxm-calendar-" + 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 PREVIEW_INITIAL_MONTH = new Date(2024, 9, 1);
+const PREVIEW_TODAY = new Date(2024, 9, 13);
+const DAY_STATE_MODIFIERS = {
+  default: "",
+  today: "uxm-calendar__day--today",
+  selected: "uxm-calendar__day--selected",
+  "in-range": "uxm-calendar__day--in-range",
+  "range-start": "uxm-calendar__day--range-start",
+  "range-end": "uxm-calendar__day--range-end",
+  outside: "uxm-calendar__day--outside",
+  disabled: "uxm-calendar__day--disabled",
+  hover: "uxm-calendar__day--hover"
+};
+const SHARED_STATES = /* @__PURE__ */ new Set(["default", "today", "selected", "hover"]);
+const MONTH_STATE_MODIFIERS = {
+  default: "",
+  today: "uxm-calendar__month--today",
+  selected: "uxm-calendar__month--selected",
+  hover: "uxm-calendar__month--hover"
+};
+const YEAR_STATE_MODIFIERS = {
+  default: "",
+  today: "uxm-calendar__year--today",
+  selected: "uxm-calendar__year--selected",
+  hover: "uxm-calendar__year--hover"
+};
+const captionStyle = {
+  fontSize: 10,
+  color: "var(--color-text-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em"
+};
+const stateLabelStyle = {
+  fontSize: 11,
+  color: "var(--color-text-muted)"
+};
+const stateLabels = {
+  default: "Default",
+  today: "Today",
+  selected: "Selected",
+  "in-range": "In Range",
+  "range-start": "Range Start",
+  "range-end": "Range End",
+  outside: "Outside Month",
+  disabled: "Disabled",
+  hover: "Hover"
+};
+function CalendarPreview({ styles, variants }) {
+  const cellState = variants.cellState ?? "default";
+  const calStyle = stylesToCssVars(styles);
+  const [month, setMonth] = (0, import_react.useState)(PREVIEW_INITIAL_MONTH);
+  const dayMod = DAY_STATE_MODIFIERS[cellState] ?? "";
+  const monthMod = MONTH_STATE_MODIFIERS[cellState] ?? "";
+  const yearMod = YEAR_STATE_MODIFIERS[cellState] ?? "";
+  const stateLabel = stateLabels[cellState] ?? "Default";
+  const isDisabled = cellState === "disabled";
+  const monthYearOpacity = SHARED_STATES.has(cellState) ? 1 : 0.4;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 32, alignItems: "flex-start", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.Calendar,
+      {
+        month,
+        onMonthChange: setMonth,
+        today: PREVIEW_TODAY,
+        style: calStyle
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...calStyle, display: "flex", flexDirection: "column", gap: 16, minWidth: 140 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: captionStyle, children: "Cell samples" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: "var(--color-text)", fontWeight: 500 }, children: stateLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: stateLabelStyle, children: "Date Cell" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabled,
+            className: (0, import_helpers.cn)("uxm-calendar__day", dayMod),
+            children: "15"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 6,
+            opacity: monthYearOpacity,
+            transition: "opacity 0.18s"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: stateLabelStyle, children: "Month Cell" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: (0, import_helpers.cn)("uxm-calendar__month", monthMod),
+                children: "Oct"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 6,
+            opacity: monthYearOpacity,
+            transition: "opacity 0.18s"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: stateLabelStyle, children: "Year Cell" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: (0, import_helpers.cn)("uxm-calendar__year", yearMod),
+                children: "2024"
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarPreview
+});
+//# sourceMappingURL=calendar-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/calendar/calendar-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Calendar } 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-calendar-' + 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// Pinned so today's outline always lands on a visible cell in the demo —\n// real \"today\" would drift past the preview as the calendar ages.\nconst PREVIEW_INITIAL_MONTH = new Date(2024, 9, 1); // October 2024\nconst PREVIEW_TODAY = new Date(2024, 9, 13);\n\n// Per-cell-type state → modifier class. Day cells support every state\n// (in-range / range edges / outside / hover). Month and Year cells only\n// support a subset — for the inapplicable states they render default.\nconst DAY_STATE_MODIFIERS: Record<string, string> = {\n  default: '',\n  today: 'uxm-calendar__day--today',\n  selected: 'uxm-calendar__day--selected',\n  'in-range': 'uxm-calendar__day--in-range',\n  'range-start': 'uxm-calendar__day--range-start',\n  'range-end': 'uxm-calendar__day--range-end',\n  outside: 'uxm-calendar__day--outside',\n  disabled: 'uxm-calendar__day--disabled',\n  hover: 'uxm-calendar__day--hover',\n};\n\n// Month/Year cells support the four shared states (default, today, selected,\n// hover). Day-only states (in-range, range edges, outside, disabled) don't\n// apply — when one of those is active, the month/year samples dim to signal\n// \"this state doesn't reach me\" without removing them from the layout.\nconst SHARED_STATES = new Set(['default', 'today', 'selected', 'hover']);\n\nconst MONTH_STATE_MODIFIERS: Record<string, string> = {\n  default: '',\n  today: 'uxm-calendar__month--today',\n  selected: 'uxm-calendar__month--selected',\n  hover: 'uxm-calendar__month--hover',\n};\n\nconst YEAR_STATE_MODIFIERS: Record<string, string> = {\n  default: '',\n  today: 'uxm-calendar__year--today',\n  selected: 'uxm-calendar__year--selected',\n  hover: 'uxm-calendar__year--hover',\n};\n\nconst captionStyle: CSSProperties = {\n  fontSize: 10,\n  color: 'var(--color-text-muted)',\n  textTransform: 'uppercase',\n  letterSpacing: '0.04em',\n};\n\nconst stateLabelStyle: CSSProperties = {\n  fontSize: 11,\n  color: 'var(--color-text-muted)',\n};\n\nconst stateLabels: Record<string, string> = {\n  default: 'Default',\n  today: 'Today',\n  selected: 'Selected',\n  'in-range': 'In Range',\n  'range-start': 'Range Start',\n  'range-end': 'Range End',\n  outside: 'Outside Month',\n  disabled: 'Disabled',\n  hover: 'Hover',\n};\n\nexport function CalendarPreview({ styles, variants }: PreviewProps) {\n  const cellState = (variants.cellState as string) ?? 'default';\n  const calStyle = stylesToCssVars(styles);\n\n  // Month is held in preview state so prev/next nav + outside-month clicks\n  // actually move the displayed month in the live Calendar.\n  const [month, setMonth] = useState<Date>(PREVIEW_INITIAL_MONTH);\n\n  const dayMod = DAY_STATE_MODIFIERS[cellState] ?? '';\n  const monthMod = MONTH_STATE_MODIFIERS[cellState] ?? '';\n  const yearMod = YEAR_STATE_MODIFIERS[cellState] ?? '';\n  const stateLabel = stateLabels[cellState] ?? 'Default';\n  const isDisabled = cellState === 'disabled';\n  // Dim month/year samples when the active state is day-only — visual cue\n  // that the state doesn't apply to those cell types. Layout stays put so\n  // designers can see the dimming \"happen\" as they toggle.\n  const monthYearOpacity = SHARED_STATES.has(cellState) ? 1 : 0.4;\n\n  return (\n    <div style={{ display: 'flex', gap: 32, alignItems: 'flex-start', flexWrap: 'wrap' }}>\n      {/* Live Calendar — fully interactive. Click the title to drill day → month\n          → year. Atom owns selection state internally; starts clean. */}\n      <Calendar\n        month={month}\n        onMonthChange={setMonth}\n        today={PREVIEW_TODAY}\n        style={calStyle}\n      />\n\n      {/* Three labeled cell samples — each reflects the active `cellState`\n          variant in its own cell type. Column has a min-width so the centered\n          canvas content stays put when the active state's name changes. The\n          state label is on its own line below the static \"Cell samples\"\n          caption so it never widens the column footprint. */}\n      <div style={{ ...calStyle, display: 'flex', flexDirection: 'column', gap: 16, minWidth: 140 }}>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n          <div style={captionStyle}>Cell samples</div>\n          <div style={{ fontSize: 11, color: 'var(--color-text)', fontWeight: 500 }}>{stateLabel}</div>\n        </div>\n\n        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6 }}>\n          <span style={stateLabelStyle}>Date Cell</span>\n          <button\n            type=\"button\"\n            disabled={isDisabled}\n            className={cn('uxm-calendar__day', dayMod)}\n          >\n            15\n          </button>\n        </div>\n\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            gap: 6,\n            opacity: monthYearOpacity,\n            transition: 'opacity 0.18s',\n          }}\n        >\n          <span style={stateLabelStyle}>Month Cell</span>\n          <button\n            type=\"button\"\n            className={cn('uxm-calendar__month', monthMod)}\n          >\n            Oct\n          </button>\n        </div>\n\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            gap: 6,\n            opacity: monthYearOpacity,\n            transition: 'opacity 0.18s',\n          }}\n        >\n          <span style={stateLabelStyle}>Year Cell</span>\n          <button\n            type=\"button\"\n            className={cn('uxm-calendar__year', yearMod)}\n          >\n            2024\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

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

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

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

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

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Calendar } from "../../ui/index.js";
+function stylesToCssVars(styles) {
+  const out = {};
+  for (const [key, value] of Object.entries(styles)) {
+    const cssVar = "--uxm-calendar-" + 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 PREVIEW_INITIAL_MONTH = new Date(2024, 9, 1);
+const PREVIEW_TODAY = new Date(2024, 9, 13);
+const DAY_STATE_MODIFIERS = {
+  default: "",
+  today: "uxm-calendar__day--today",
+  selected: "uxm-calendar__day--selected",
+  "in-range": "uxm-calendar__day--in-range",
+  "range-start": "uxm-calendar__day--range-start",
+  "range-end": "uxm-calendar__day--range-end",
+  outside: "uxm-calendar__day--outside",
+  disabled: "uxm-calendar__day--disabled",
+  hover: "uxm-calendar__day--hover"
+};
+const SHARED_STATES = /* @__PURE__ */ new Set(["default", "today", "selected", "hover"]);
+const MONTH_STATE_MODIFIERS = {
+  default: "",
+  today: "uxm-calendar__month--today",
+  selected: "uxm-calendar__month--selected",
+  hover: "uxm-calendar__month--hover"
+};
+const YEAR_STATE_MODIFIERS = {
+  default: "",
+  today: "uxm-calendar__year--today",
+  selected: "uxm-calendar__year--selected",
+  hover: "uxm-calendar__year--hover"
+};
+const captionStyle = {
+  fontSize: 10,
+  color: "var(--color-text-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em"
+};
+const stateLabelStyle = {
+  fontSize: 11,
+  color: "var(--color-text-muted)"
+};
+const stateLabels = {
+  default: "Default",
+  today: "Today",
+  selected: "Selected",
+  "in-range": "In Range",
+  "range-start": "Range Start",
+  "range-end": "Range End",
+  outside: "Outside Month",
+  disabled: "Disabled",
+  hover: "Hover"
+};
+function CalendarPreview({ styles, variants }) {
+  const cellState = variants.cellState ?? "default";
+  const calStyle = stylesToCssVars(styles);
+  const [month, setMonth] = useState(PREVIEW_INITIAL_MONTH);
+  const dayMod = DAY_STATE_MODIFIERS[cellState] ?? "";
+  const monthMod = MONTH_STATE_MODIFIERS[cellState] ?? "";
+  const yearMod = YEAR_STATE_MODIFIERS[cellState] ?? "";
+  const stateLabel = stateLabels[cellState] ?? "Default";
+  const isDisabled = cellState === "disabled";
+  const monthYearOpacity = SHARED_STATES.has(cellState) ? 1 : 0.4;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 32, alignItems: "flex-start", flexWrap: "wrap" }, children: [
+    /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        month,
+        onMonthChange: setMonth,
+        today: PREVIEW_TODAY,
+        style: calStyle
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { ...calStyle, display: "flex", flexDirection: "column", gap: 16, minWidth: 140 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+        /* @__PURE__ */ jsx("div", { style: captionStyle, children: "Cell samples" }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--color-text)", fontWeight: 500 }, children: stateLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6 }, children: [
+        /* @__PURE__ */ jsx("span", { style: stateLabelStyle, children: "Date Cell" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: isDisabled,
+            className: cn("uxm-calendar__day", dayMod),
+            children: "15"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 6,
+            opacity: monthYearOpacity,
+            transition: "opacity 0.18s"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: stateLabelStyle, children: "Month Cell" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn("uxm-calendar__month", monthMod),
+                children: "Oct"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: 6,
+            opacity: monthYearOpacity,
+            transition: "opacity 0.18s"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: stateLabelStyle, children: "Year Cell" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cn("uxm-calendar__year", yearMod),
+                children: "2024"
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CalendarPreview
+};
+//# sourceMappingURL=calendar-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/calendar/calendar-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Calendar } 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-calendar-' + 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// Pinned so today's outline always lands on a visible cell in the demo —\n// real \"today\" would drift past the preview as the calendar ages.\nconst PREVIEW_INITIAL_MONTH = new Date(2024, 9, 1); // October 2024\nconst PREVIEW_TODAY = new Date(2024, 9, 13);\n\n// Per-cell-type state → modifier class. Day cells support every state\n// (in-range / range edges / outside / hover). Month and Year cells only\n// support a subset — for the inapplicable states they render default.\nconst DAY_STATE_MODIFIERS: Record<string, string> = {\n  default: '',\n  today: 'uxm-calendar__day--today',\n  selected: 'uxm-calendar__day--selected',\n  'in-range': 'uxm-calendar__day--in-range',\n  'range-start': 'uxm-calendar__day--range-start',\n  'range-end': 'uxm-calendar__day--range-end',\n  outside: 'uxm-calendar__day--outside',\n  disabled: 'uxm-calendar__day--disabled',\n  hover: 'uxm-calendar__day--hover',\n};\n\n// Month/Year cells support the four shared states (default, today, selected,\n// hover). Day-only states (in-range, range edges, outside, disabled) don't\n// apply — when one of those is active, the month/year samples dim to signal\n// \"this state doesn't reach me\" without removing them from the layout.\nconst SHARED_STATES = new Set(['default', 'today', 'selected', 'hover']);\n\nconst MONTH_STATE_MODIFIERS: Record<string, string> = {\n  default: '',\n  today: 'uxm-calendar__month--today',\n  selected: 'uxm-calendar__month--selected',\n  hover: 'uxm-calendar__month--hover',\n};\n\nconst YEAR_STATE_MODIFIERS: Record<string, string> = {\n  default: '',\n  today: 'uxm-calendar__year--today',\n  selected: 'uxm-calendar__year--selected',\n  hover: 'uxm-calendar__year--hover',\n};\n\nconst captionStyle: CSSProperties = {\n  fontSize: 10,\n  color: 'var(--color-text-muted)',\n  textTransform: 'uppercase',\n  letterSpacing: '0.04em',\n};\n\nconst stateLabelStyle: CSSProperties = {\n  fontSize: 11,\n  color: 'var(--color-text-muted)',\n};\n\nconst stateLabels: Record<string, string> = {\n  default: 'Default',\n  today: 'Today',\n  selected: 'Selected',\n  'in-range': 'In Range',\n  'range-start': 'Range Start',\n  'range-end': 'Range End',\n  outside: 'Outside Month',\n  disabled: 'Disabled',\n  hover: 'Hover',\n};\n\nexport function CalendarPreview({ styles, variants }: PreviewProps) {\n  const cellState = (variants.cellState as string) ?? 'default';\n  const calStyle = stylesToCssVars(styles);\n\n  // Month is held in preview state so prev/next nav + outside-month clicks\n  // actually move the displayed month in the live Calendar.\n  const [month, setMonth] = useState<Date>(PREVIEW_INITIAL_MONTH);\n\n  const dayMod = DAY_STATE_MODIFIERS[cellState] ?? '';\n  const monthMod = MONTH_STATE_MODIFIERS[cellState] ?? '';\n  const yearMod = YEAR_STATE_MODIFIERS[cellState] ?? '';\n  const stateLabel = stateLabels[cellState] ?? 'Default';\n  const isDisabled = cellState === 'disabled';\n  // Dim month/year samples when the active state is day-only — visual cue\n  // that the state doesn't apply to those cell types. Layout stays put so\n  // designers can see the dimming \"happen\" as they toggle.\n  const monthYearOpacity = SHARED_STATES.has(cellState) ? 1 : 0.4;\n\n  return (\n    <div style={{ display: 'flex', gap: 32, alignItems: 'flex-start', flexWrap: 'wrap' }}>\n      {/* Live Calendar — fully interactive. Click the title to drill day → month\n          → year. Atom owns selection state internally; starts clean. */}\n      <Calendar\n        month={month}\n        onMonthChange={setMonth}\n        today={PREVIEW_TODAY}\n        style={calStyle}\n      />\n\n      {/* Three labeled cell samples — each reflects the active `cellState`\n          variant in its own cell type. Column has a min-width so the centered\n          canvas content stays put when the active state's name changes. The\n          state label is on its own line below the static \"Cell samples\"\n          caption so it never widens the column footprint. */}\n      <div style={{ ...calStyle, display: 'flex', flexDirection: 'column', gap: 16, minWidth: 140 }}>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n          <div style={captionStyle}>Cell samples</div>\n          <div style={{ fontSize: 11, color: 'var(--color-text)', fontWeight: 500 }}>{stateLabel}</div>\n        </div>\n\n        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6 }}>\n          <span style={stateLabelStyle}>Date Cell</span>\n          <button\n            type=\"button\"\n            disabled={isDisabled}\n            className={cn('uxm-calendar__day', dayMod)}\n          >\n            15\n          </button>\n        </div>\n\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            gap: 6,\n            opacity: monthYearOpacity,\n            transition: 'opacity 0.18s',\n          }}\n        >\n          <span style={stateLabelStyle}>Month Cell</span>\n          <button\n            type=\"button\"\n            className={cn('uxm-calendar__month', monthMod)}\n          >\n            Oct\n          </button>\n        </div>\n\n        <div\n          style={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'flex-start',\n            gap: 6,\n            opacity: monthYearOpacity,\n            transition: 'opacity 0.18s',\n          }}\n        >\n          <span style={stateLabelStyle}>Year Cell</span>\n          <button\n            type=\"button\"\n            className={cn('uxm-calendar__year', yearMod)}\n          >\n            2024\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}