@viax.io/uxm 4.36.0

package/dist/ui/loader/loader-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 loader_preview_exports = {};
+__export(loader_preview_exports, {
+  LoaderPreview: () => LoaderPreview
+});
+module.exports = __toCommonJS(loader_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+function LoaderPreview({ styles, variants }) {
+  const size = styles.size;
+  const color = styles.color;
+  const trackColor = styles.trackColor;
+  const speed = styles.speed;
+  const barWidth = styles.barWidth;
+  const messageRaw = styles.message;
+  const messageInterval = styles.messageInterval;
+  const messageSize = styles.messageSize;
+  const messageColor = styles.messageColor;
+  const gap = styles.gap;
+  const variant = variants.variant ?? "spinner";
+  const layout = variants.layout ?? "stacked";
+  const inline = layout === "inline";
+  const messages = (0, import_react.useMemo)(
+    () => messageRaw.split("|").map((s) => s.trim()).filter(Boolean),
+    [messageRaw]
+  );
+  const [idx, setIdx] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (messages.length < 2) return;
+    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);
+    return () => clearInterval(id);
+  }, [messages, messageInterval]);
+  const currentMessage = messages.length === 0 ? "" : messages[idx % messages.length];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        // Inline layout: animation on the LEFT, message on the RIGHT.
+        flexDirection: inline ? "row" : "column",
+        alignItems: "center",
+        justifyContent: "center",
+        ["--uxm-loader-gap"]: gap,
+        gap: "var(--uxm-loader-gap)",
+        padding: 12
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        @keyframes uxm-loader-spin { to { transform: rotate(360deg); } }
+        @keyframes uxm-loader-dot {
+          0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
+          40% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes uxm-loader-bar {
+          0%   { transform: translateX(-60%); }
+          100% { transform: translateX(220%); }
+        }
+        @keyframes uxm-loader-msg {
+          0%   { opacity: 0; transform: translateY(4px); }
+          12%  { opacity: 1; transform: translateY(0); }
+          88%  { opacity: 1; transform: translateY(0); }
+          100% { opacity: 0; transform: translateY(-4px); }
+        }
+      ` }),
+        variant === "spinner" && // Border is fully decomposed into longhands rather than mixing
+        // `border` shorthand with `borderTopColor`. React applies inline
+        // styles property-by-property on re-render and a shorthand can
+        // clobber a longhand set in the same object (or vice versa),
+        // which is what the "conflicting property" warning catches.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            role: "status",
+            "aria-label": currentMessage || "Loading",
+            style: {
+              width: size,
+              height: size,
+              borderRadius: "50%",
+              borderWidth: Math.max(2, Math.round(size / 10)),
+              borderStyle: "solid",
+              borderTopColor: color,
+              borderRightColor: trackColor,
+              borderBottomColor: trackColor,
+              borderLeftColor: trackColor,
+              animation: `uxm-loader-spin ${speed}ms linear infinite`
+            }
+          }
+        ),
+        variant === "dots" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "status", "aria-label": currentMessage || "Loading", style: { display: "inline-flex", gap: Math.max(4, Math.round(size / 4)) }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              width: Math.max(4, Math.round(size / 3)),
+              height: Math.max(4, Math.round(size / 3)),
+              borderRadius: "50%",
+              backgroundColor: color,
+              animation: `uxm-loader-dot ${speed * 1.6}ms ease-in-out ${i * (speed / 6)}ms infinite both`
+            }
+          },
+          i
+        )) }),
+        variant === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            role: "status",
+            "aria-label": currentMessage || "Loading",
+            style: {
+              position: "relative",
+              width: barWidth,
+              height: Math.max(3, Math.round(size / 5)),
+              borderRadius: 999,
+              backgroundColor: trackColor,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  height: "100%",
+                  width: "40%",
+                  borderRadius: 999,
+                  backgroundColor: color,
+                  animation: `uxm-loader-bar ${speed * 2}ms cubic-bezier(0.65, 0.05, 0.36, 1) infinite`
+                }
+              }
+            )
+          }
+        ),
+        currentMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: messageSize,
+              color: messageColor,
+              fontWeight: 500,
+              display: "inline-block",
+              minHeight: messageSize * 1.2
+            },
+            children: messages.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  animation: `uxm-loader-msg ${messageInterval}ms ease-in-out`
+                },
+                children: currentMessage
+              },
+              idx
+            ) : currentMessage
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoaderPreview
+});
+//# sourceMappingURL=loader-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/loader/loader-preview.tsx"],"sourcesContent":["import { useEffect, useState, useMemo } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\n\nexport function LoaderPreview({ styles, variants }: PreviewProps) {\n  const size = styles.size as number;\n  const color = styles.color as string;\n  const trackColor = styles.trackColor as string;\n  const speed = styles.speed as number;\n  const barWidth = styles.barWidth as number;\n  const messageRaw = styles.message as string;\n  const messageInterval = styles.messageInterval as number;\n  const messageSize = styles.messageSize as number;\n  const messageColor = styles.messageColor as string;\n  const gap = styles.gap as number;\n  const variant = (variants.variant as string) ?? 'spinner';\n  const layout = (variants.layout as string) ?? 'stacked';\n\n  const inline = layout === 'inline';\n\n  // Split on `|` for cycling messages. Empty / single message → no cycle.\n  const messages = useMemo(\n    () => messageRaw.split('|').map((s) => s.trim()).filter(Boolean),\n    [messageRaw],\n  );\n  const [idx, setIdx] = useState(0);\n  useEffect(() => {\n    if (messages.length < 2) return;\n    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);\n    return () => clearInterval(id);\n  }, [messages, messageInterval]);\n\n  const currentMessage = messages.length === 0 ? '' : messages[idx % messages.length];\n\n  return (\n    <div\n      style={{\n        display: 'inline-flex',\n        // Inline layout: animation on the LEFT, message on the RIGHT.\n        flexDirection: inline ? 'row' : 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        ['--uxm-loader-gap' as string]: gap,\n        gap: 'var(--uxm-loader-gap)',\n        padding: 12,\n      }}\n    >\n      <style>{`\n        @keyframes uxm-loader-spin { to { transform: rotate(360deg); } }\n        @keyframes uxm-loader-dot {\n          0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }\n          40% { transform: scale(1); opacity: 1; }\n        }\n        @keyframes uxm-loader-bar {\n          0%   { transform: translateX(-60%); }\n          100% { transform: translateX(220%); }\n        }\n        @keyframes uxm-loader-msg {\n          0%   { opacity: 0; transform: translateY(4px); }\n          12%  { opacity: 1; transform: translateY(0); }\n          88%  { opacity: 1; transform: translateY(0); }\n          100% { opacity: 0; transform: translateY(-4px); }\n        }\n      `}</style>\n\n      {variant === 'spinner' && (\n        // Border is fully decomposed into longhands rather than mixing\n        // `border` shorthand with `borderTopColor`. React applies inline\n        // styles property-by-property on re-render and a shorthand can\n        // clobber a longhand set in the same object (or vice versa),\n        // which is what the \"conflicting property\" warning catches.\n        <div\n          role=\"status\"\n          aria-label={currentMessage || 'Loading'}\n          style={{\n            width: size,\n            height: size,\n            borderRadius: '50%',\n            borderWidth: Math.max(2, Math.round(size / 10)),\n            borderStyle: 'solid',\n            borderTopColor: color,\n            borderRightColor: trackColor,\n            borderBottomColor: trackColor,\n            borderLeftColor: trackColor,\n            animation: `uxm-loader-spin ${speed}ms linear infinite`,\n          }}\n        />\n      )}\n\n      {variant === 'dots' && (\n        <div role=\"status\" aria-label={currentMessage || 'Loading'} style={{ display: 'inline-flex', gap: Math.max(4, Math.round(size / 4)) }}>\n          {[0, 1, 2].map((i) => (\n            <span\n              key={i}\n              style={{\n                display: 'inline-block',\n                width: Math.max(4, Math.round(size / 3)),\n                height: Math.max(4, Math.round(size / 3)),\n                borderRadius: '50%',\n                backgroundColor: color,\n                animation: `uxm-loader-dot ${speed * 1.6}ms ease-in-out ${i * (speed / 6)}ms infinite both`,\n              }}\n            />\n          ))}\n        </div>\n      )}\n\n      {variant === 'bar' && (\n        <div\n          role=\"status\"\n          aria-label={currentMessage || 'Loading'}\n          style={{\n            position: 'relative',\n            width: barWidth,\n            height: Math.max(3, Math.round(size / 5)),\n            borderRadius: 999,\n            backgroundColor: trackColor,\n            overflow: 'hidden',\n          }}\n        >\n          <span\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              height: '100%',\n              width: '40%',\n              borderRadius: 999,\n              backgroundColor: color,\n              animation: `uxm-loader-bar ${speed * 2}ms cubic-bezier(0.65, 0.05, 0.36, 1) infinite`,\n            }}\n          />\n        </div>\n      )}\n\n      {currentMessage && (\n        <span\n          style={{\n            fontSize: messageSize,\n            color: messageColor,\n            fontWeight: 500,\n            display: 'inline-block',\n            minHeight: messageSize * 1.2,\n          }}\n        >\n          {messages.length > 1 ? (\n            <span\n              key={idx}\n              style={{\n                display: 'inline-block',\n                animation: `uxm-loader-msg ${messageInterval}ms ease-in-out`,\n              }}\n            >\n              {currentMessage}\n            </span>\n          ) : (\n            currentMessage\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/loader/loader-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA8J/D"}

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

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from "react";
+function LoaderPreview({ styles, variants }) {
+  const size = styles.size;
+  const color = styles.color;
+  const trackColor = styles.trackColor;
+  const speed = styles.speed;
+  const barWidth = styles.barWidth;
+  const messageRaw = styles.message;
+  const messageInterval = styles.messageInterval;
+  const messageSize = styles.messageSize;
+  const messageColor = styles.messageColor;
+  const gap = styles.gap;
+  const variant = variants.variant ?? "spinner";
+  const layout = variants.layout ?? "stacked";
+  const inline = layout === "inline";
+  const messages = useMemo(
+    () => messageRaw.split("|").map((s) => s.trim()).filter(Boolean),
+    [messageRaw]
+  );
+  const [idx, setIdx] = useState(0);
+  useEffect(() => {
+    if (messages.length < 2) return;
+    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);
+    return () => clearInterval(id);
+  }, [messages, messageInterval]);
+  const currentMessage = messages.length === 0 ? "" : messages[idx % messages.length];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        // Inline layout: animation on the LEFT, message on the RIGHT.
+        flexDirection: inline ? "row" : "column",
+        alignItems: "center",
+        justifyContent: "center",
+        ["--uxm-loader-gap"]: gap,
+        gap: "var(--uxm-loader-gap)",
+        padding: 12
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes uxm-loader-spin { to { transform: rotate(360deg); } }
+        @keyframes uxm-loader-dot {
+          0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }
+          40% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes uxm-loader-bar {
+          0%   { transform: translateX(-60%); }
+          100% { transform: translateX(220%); }
+        }
+        @keyframes uxm-loader-msg {
+          0%   { opacity: 0; transform: translateY(4px); }
+          12%  { opacity: 1; transform: translateY(0); }
+          88%  { opacity: 1; transform: translateY(0); }
+          100% { opacity: 0; transform: translateY(-4px); }
+        }
+      ` }),
+        variant === "spinner" && // Border is fully decomposed into longhands rather than mixing
+        // `border` shorthand with `borderTopColor`. React applies inline
+        // styles property-by-property on re-render and a shorthand can
+        // clobber a longhand set in the same object (or vice versa),
+        // which is what the "conflicting property" warning catches.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-label": currentMessage || "Loading",
+            style: {
+              width: size,
+              height: size,
+              borderRadius: "50%",
+              borderWidth: Math.max(2, Math.round(size / 10)),
+              borderStyle: "solid",
+              borderTopColor: color,
+              borderRightColor: trackColor,
+              borderBottomColor: trackColor,
+              borderLeftColor: trackColor,
+              animation: `uxm-loader-spin ${speed}ms linear infinite`
+            }
+          }
+        ),
+        variant === "dots" && /* @__PURE__ */ jsx("div", { role: "status", "aria-label": currentMessage || "Loading", style: { display: "inline-flex", gap: Math.max(4, Math.round(size / 4)) }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              display: "inline-block",
+              width: Math.max(4, Math.round(size / 3)),
+              height: Math.max(4, Math.round(size / 3)),
+              borderRadius: "50%",
+              backgroundColor: color,
+              animation: `uxm-loader-dot ${speed * 1.6}ms ease-in-out ${i * (speed / 6)}ms infinite both`
+            }
+          },
+          i
+        )) }),
+        variant === "bar" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-label": currentMessage || "Loading",
+            style: {
+              position: "relative",
+              width: barWidth,
+              height: Math.max(3, Math.round(size / 5)),
+              borderRadius: 999,
+              backgroundColor: trackColor,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  height: "100%",
+                  width: "40%",
+                  borderRadius: 999,
+                  backgroundColor: color,
+                  animation: `uxm-loader-bar ${speed * 2}ms cubic-bezier(0.65, 0.05, 0.36, 1) infinite`
+                }
+              }
+            )
+          }
+        ),
+        currentMessage && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: messageSize,
+              color: messageColor,
+              fontWeight: 500,
+              display: "inline-block",
+              minHeight: messageSize * 1.2
+            },
+            children: messages.length > 1 ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  display: "inline-block",
+                  animation: `uxm-loader-msg ${messageInterval}ms ease-in-out`
+                },
+                children: currentMessage
+              },
+              idx
+            ) : currentMessage
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LoaderPreview
+};
+//# sourceMappingURL=loader-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/loader/loader-preview.tsx"],"sourcesContent":["import { useEffect, useState, useMemo } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\n\nexport function LoaderPreview({ styles, variants }: PreviewProps) {\n  const size = styles.size as number;\n  const color = styles.color as string;\n  const trackColor = styles.trackColor as string;\n  const speed = styles.speed as number;\n  const barWidth = styles.barWidth as number;\n  const messageRaw = styles.message as string;\n  const messageInterval = styles.messageInterval as number;\n  const messageSize = styles.messageSize as number;\n  const messageColor = styles.messageColor as string;\n  const gap = styles.gap as number;\n  const variant = (variants.variant as string) ?? 'spinner';\n  const layout = (variants.layout as string) ?? 'stacked';\n\n  const inline = layout === 'inline';\n\n  // Split on `|` for cycling messages. Empty / single message → no cycle.\n  const messages = useMemo(\n    () => messageRaw.split('|').map((s) => s.trim()).filter(Boolean),\n    [messageRaw],\n  );\n  const [idx, setIdx] = useState(0);\n  useEffect(() => {\n    if (messages.length < 2) return;\n    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);\n    return () => clearInterval(id);\n  }, [messages, messageInterval]);\n\n  const currentMessage = messages.length === 0 ? '' : messages[idx % messages.length];\n\n  return (\n    <div\n      style={{\n        display: 'inline-flex',\n        // Inline layout: animation on the LEFT, message on the RIGHT.\n        flexDirection: inline ? 'row' : 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        ['--uxm-loader-gap' as string]: gap,\n        gap: 'var(--uxm-loader-gap)',\n        padding: 12,\n      }}\n    >\n      <style>{`\n        @keyframes uxm-loader-spin { to { transform: rotate(360deg); } }\n        @keyframes uxm-loader-dot {\n          0%, 80%, 100% { transform: scale(0.5); opacity: 0.5; }\n          40% { transform: scale(1); opacity: 1; }\n        }\n        @keyframes uxm-loader-bar {\n          0%   { transform: translateX(-60%); }\n          100% { transform: translateX(220%); }\n        }\n        @keyframes uxm-loader-msg {\n          0%   { opacity: 0; transform: translateY(4px); }\n          12%  { opacity: 1; transform: translateY(0); }\n          88%  { opacity: 1; transform: translateY(0); }\n          100% { opacity: 0; transform: translateY(-4px); }\n        }\n      `}</style>\n\n      {variant === 'spinner' && (\n        // Border is fully decomposed into longhands rather than mixing\n        // `border` shorthand with `borderTopColor`. React applies inline\n        // styles property-by-property on re-render and a shorthand can\n        // clobber a longhand set in the same object (or vice versa),\n        // which is what the \"conflicting property\" warning catches.\n        <div\n          role=\"status\"\n          aria-label={currentMessage || 'Loading'}\n          style={{\n            width: size,\n            height: size,\n            borderRadius: '50%',\n            borderWidth: Math.max(2, Math.round(size / 10)),\n            borderStyle: 'solid',\n            borderTopColor: color,\n            borderRightColor: trackColor,\n            borderBottomColor: trackColor,\n            borderLeftColor: trackColor,\n            animation: `uxm-loader-spin ${speed}ms linear infinite`,\n          }}\n        />\n      )}\n\n      {variant === 'dots' && (\n        <div role=\"status\" aria-label={currentMessage || 'Loading'} style={{ display: 'inline-flex', gap: Math.max(4, Math.round(size / 4)) }}>\n          {[0, 1, 2].map((i) => (\n            <span\n              key={i}\n              style={{\n                display: 'inline-block',\n                width: Math.max(4, Math.round(size / 3)),\n                height: Math.max(4, Math.round(size / 3)),\n                borderRadius: '50%',\n                backgroundColor: color,\n                animation: `uxm-loader-dot ${speed * 1.6}ms ease-in-out ${i * (speed / 6)}ms infinite both`,\n              }}\n            />\n          ))}\n        </div>\n      )}\n\n      {variant === 'bar' && (\n        <div\n          role=\"status\"\n          aria-label={currentMessage || 'Loading'}\n          style={{\n            position: 'relative',\n            width: barWidth,\n            height: Math.max(3, Math.round(size / 5)),\n            borderRadius: 999,\n            backgroundColor: trackColor,\n            overflow: 'hidden',\n          }}\n        >\n          <span\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              height: '100%',\n              width: '40%',\n              borderRadius: 999,\n              backgroundColor: color,\n              animation: `uxm-loader-bar ${speed * 2}ms cubic-bezier(0.65, 0.05, 0.36, 1) infinite`,\n            }}\n          />\n        </div>\n      )}\n\n      {currentMessage && (\n        <span\n          style={{\n            fontSize: messageSize,\n            color: messageColor,\n            fontWeight: 500,\n            display: 'inline-block',\n            minHeight: messageSize * 1.2,\n          }}\n        >\n          {messages.length > 1 ? (\n            <span\n              key={idx}\n              style={{\n                display: 'inline-block',\n                animation: `uxm-loader-msg ${messageInterval}ms ease-in-out`,\n              }}\n            >\n              {currentMessage}\n            </span>\n          ) : (\n            currentMessage\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/loader/loader.cjs

@@ -0,0 +1,67 @@
+"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 loader_exports = {};
+__export(loader_exports, {
+  Loader: () => Loader
+});
+module.exports = __toCommonJS(loader_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+function Loader({
+  variant = "spinner",
+  layout = "stacked",
+  message = "",
+  messageInterval = 1500,
+  loadingLabel = "Loading",
+  className,
+  ...rest
+}) {
+  const messages = (0, import_react.useMemo)(
+    () => message.split("|").map((s) => s.trim()).filter(Boolean),
+    [message]
+  );
+  const [idx, setIdx] = (0, import_react.useState)(0);
+  const [prevMessage, setPrevMessage] = (0, import_react.useState)(message);
+  if (prevMessage !== message) {
+    setPrevMessage(message);
+    setIdx(0);
+  }
+  (0, import_react.useEffect)(() => {
+    if (messages.length < 2) return;
+    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);
+    return () => clearInterval(id);
+  }, [messages, messageInterval]);
+  const currentMessage = messages.length === 0 ? "" : messages[idx % messages.length];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-loader", `uxm-loader--${layout}`, className), ...rest, children: [
+    variant === "spinner" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-loader__spinner", role: "status", "aria-label": currentMessage || loadingLabel }),
+    variant === "dots" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-loader__dots", role: "status", "aria-label": currentMessage || loadingLabel, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {})
+    ] }),
+    variant === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-loader__bar", role: "status", "aria-label": currentMessage || loadingLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}) }),
+    currentMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-loader__message", children: messages.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-loader__message-fade", children: currentMessage }, idx) : currentMessage })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Loader
+});
+//# sourceMappingURL=loader.cjs.map

package/dist/ui/loader/loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/loader/loader.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport type { HTMLAttributes } from 'react';\n\nexport type LoaderVariant = 'spinner' | 'dots' | 'bar';\nexport type LoaderLayout = 'stacked' | 'inline';\n\nexport interface LoaderProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: LoaderVariant;\n  layout?: LoaderLayout;\n  /** Single message, or `|`-separated to cycle. */\n  message?: string;\n  /** Cycle interval in ms. */\n  messageInterval?: number;\n  /**\n   * Accessible name for the `role=\"status\"` element when no `message` is\n   * showing. Default `\"Loading\"`. With a message, the message IS the name.\n   */\n  loadingLabel?: string;\n}\n\nexport function Loader({\n  variant = 'spinner',\n  layout = 'stacked',\n  message = '',\n  messageInterval = 1500,\n  loadingLabel = 'Loading',\n  className,\n  ...rest\n}: LoaderProps) {\n  const messages = useMemo(\n    () => message.split('|').map((s) => s.trim()).filter(Boolean),\n    [message],\n  );\n  const [idx, setIdx] = useState(0);\n  // Restart the cycle from the first message whenever the `message` prop\n  // changes — otherwise a swap mid-rotation would show some interior\n  // message first. Render-phase reset (React's \"storing information from\n  // previous renders\" pattern) instead of an effect so there's no extra\n  // render after the swap.\n  const [prevMessage, setPrevMessage] = useState(message);\n  if (prevMessage !== message) {\n    setPrevMessage(message);\n    setIdx(0);\n  }\n  useEffect(() => {\n    if (messages.length < 2) return;\n    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);\n    return () => clearInterval(id);\n  }, [messages, messageInterval]);\n\n  const currentMessage = messages.length === 0 ? '' : messages[idx % messages.length];\n\n  return (\n    <div className={cn('uxm-loader', `uxm-loader--${layout}`, className)} {...rest}>\n      {variant === 'spinner' && (\n        <div className=\"uxm-loader__spinner\" role=\"status\" aria-label={currentMessage || loadingLabel} />\n      )}\n      {variant === 'dots' && (\n        <div className=\"uxm-loader__dots\" role=\"status\" aria-label={currentMessage || loadingLabel}>\n          <span />\n          <span />\n          <span />\n        </div>\n      )}\n      {variant === 'bar' && (\n        <div className=\"uxm-loader__bar\" role=\"status\" aria-label={currentMessage || loadingLabel}>\n          <span />\n        </div>\n      )}\n      {currentMessage && (\n        <span className=\"uxm-loader__message\">\n          {messages.length > 1 ? (\n            <span key={idx} className=\"uxm-loader__message-fade\">\n              {currentMessage}\n            </span>\n          ) : (\n            currentMessage\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0DQ;AA1DR,mBAA6C;AAE7C,qBAAmB;AAqBZ,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,eAAW;AAAA,IACf,MAAM,QAAQ,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,OAAO;AAAA,IAC5D,CAAC,OAAO;AAAA,EACV;AACA,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,CAAC;AAMhC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,OAAO;AACtD,MAAI,gBAAgB,SAAS;AAC3B,mBAAe,OAAO;AACtB,WAAO,CAAC;AAAA,EACV;AACA,8BAAU,MAAM;AACd,QAAI,SAAS,SAAS,EAAG;AACzB,UAAM,KAAK,YAAY,MAAM,OAAO,CAAC,OAAO,IAAI,KAAK,SAAS,MAAM,GAAG,eAAe;AACtF,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,QAAM,iBAAiB,SAAS,WAAW,IAAI,KAAK,SAAS,MAAM,SAAS,MAAM;AAElF,SACE,6CAAC,SAAI,eAAW,mBAAG,cAAc,eAAe,MAAM,IAAI,SAAS,GAAI,GAAG,MACvE;AAAA,gBAAY,aACX,4CAAC,SAAI,WAAU,uBAAsB,MAAK,UAAS,cAAY,kBAAkB,cAAc;AAAA,IAEhG,YAAY,UACX,6CAAC,SAAI,WAAU,oBAAmB,MAAK,UAAS,cAAY,kBAAkB,cAC5E;AAAA,kDAAC,UAAK;AAAA,MACN,4CAAC,UAAK;AAAA,MACN,4CAAC,UAAK;AAAA,OACR;AAAA,IAED,YAAY,SACX,4CAAC,SAAI,WAAU,mBAAkB,MAAK,UAAS,cAAY,kBAAkB,cAC3E,sDAAC,UAAK,GACR;AAAA,IAED,kBACC,4CAAC,UAAK,WAAU,uBACb,mBAAS,SAAS,IACjB,4CAAC,UAAe,WAAU,4BACvB,4BADQ,GAEX,IAEA,gBAEJ;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/loader/loader.css

@@ -0,0 +1,118 @@
+@charset "UTF-8";
+/* ── loader ── */
+@keyframes uxm-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes uxm-loader-dot {
+  0%, 80%, 100% {
+    opacity: 0.5;
+    transform: scale(0.5);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes uxm-loader-bar {
+  0% {
+    transform: translateX(-60%);
+  }
+  100% {
+    transform: translateX(220%);
+  }
+}
+@keyframes uxm-loader-msg {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  12% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  88% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+/* Loader — three variants share a single root. Saves on `.uxm-loader`
+   set `--uxm-loader-*` vars that cascade into __spinner / __dots / __bar
+   children. The dots and bar derive their dot/bar diameter from `size`
+   (size / ratio) so a single Size knob keeps proportions. Note: animation
+   durations (`speed`, `messageInterval`) aren't wired — the save layer's
+   formatValue currently emits unitless numbers as `Xpx`, which is wrong
+   for animation timing. Tracked as a separate formatValue concern. */
+.uxm-loader {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--uxm-loader-gap, 12px);
+  justify-content: center;
+  padding: 12px;
+}
+.uxm-loader--stacked {
+  flex-direction: column;
+}
+.uxm-loader--inline {
+  flex-direction: row;
+}
+.uxm-loader__spinner {
+  animation: uxm-loader-spin 800ms linear infinite;
+  border: 3px solid var(--uxm-loader-track-color, color-mix(in srgb, var(--color-accent-bold) 18%, transparent));
+  border-radius: 50%;
+  border-top-color: var(--uxm-loader-color, var(--color-accent-bold));
+  height: var(--uxm-loader-size, 24px);
+  width: var(--uxm-loader-size, 24px);
+}
+.uxm-loader__dots {
+  display: inline-flex;
+  gap: 6px;
+}
+.uxm-loader__dots > span {
+  animation: uxm-loader-dot 1280ms ease-in-out infinite both;
+  background-color: var(--uxm-loader-color, var(--color-accent-bold));
+  border-radius: 50%;
+  display: inline-block;
+  height: calc(var(--uxm-loader-size, 24px) / 3);
+  width: calc(var(--uxm-loader-size, 24px) / 3);
+}
+.uxm-loader__dots > span:nth-child(2) {
+  animation-delay: 130ms;
+}
+.uxm-loader__dots > span:nth-child(3) {
+  animation-delay: 260ms;
+}
+.uxm-loader__bar {
+  background-color: var(--uxm-loader-track-color, color-mix(in srgb, var(--color-accent-bold) 18%, transparent));
+  border-radius: 999px;
+  height: 6px;
+  overflow: hidden;
+  position: relative;
+  width: var(--uxm-loader-bar-width, 200px);
+}
+.uxm-loader__bar > span {
+  animation: uxm-loader-bar 1600ms cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
+  background-color: var(--uxm-loader-color, var(--color-accent-bold));
+  border-radius: 999px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 40%;
+}
+.uxm-loader__message {
+  color: var(--uxm-loader-message-color, var(--color-text-muted));
+  display: inline-block;
+  font-size: calc(var(--uxm-loader-message-size, 13px) * var(--type-scale, 1));
+  font-weight: 500;
+  min-height: 1.2em;
+}
+.uxm-loader__message-fade {
+  animation: uxm-loader-msg 1500ms ease-in-out;
+  display: inline-block;
+}

package/dist/ui/loader/loader.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+export type LoaderVariant = 'spinner' | 'dots' | 'bar';
+export type LoaderLayout = 'stacked' | 'inline';
+export interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: LoaderVariant;
+    layout?: LoaderLayout;
+    /** Single message, or `|`-separated to cycle. */
+    message?: string;
+    /** Cycle interval in ms. */
+    messageInterval?: number;
+    /**
+     * Accessible name for the `role="status"` element when no `message` is
+     * showing. Default `"Loading"`. With a message, the message IS the name.
+     */
+    loadingLabel?: string;
+}
+export declare function Loader({ variant, layout, message, messageInterval, loadingLabel, className, ...rest }: LoaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../src/ui/loader/loader.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,MAAkB,EAClB,OAAY,EACZ,eAAsB,EACtB,YAAwB,EACxB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,2CAsDb"}

package/dist/ui/loader/loader.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { cn } from "../../helpers/index.js";
+function Loader({
+  variant = "spinner",
+  layout = "stacked",
+  message = "",
+  messageInterval = 1500,
+  loadingLabel = "Loading",
+  className,
+  ...rest
+}) {
+  const messages = useMemo(
+    () => message.split("|").map((s) => s.trim()).filter(Boolean),
+    [message]
+  );
+  const [idx, setIdx] = useState(0);
+  const [prevMessage, setPrevMessage] = useState(message);
+  if (prevMessage !== message) {
+    setPrevMessage(message);
+    setIdx(0);
+  }
+  useEffect(() => {
+    if (messages.length < 2) return;
+    const id = setInterval(() => setIdx((i) => (i + 1) % messages.length), messageInterval);
+    return () => clearInterval(id);
+  }, [messages, messageInterval]);
+  const currentMessage = messages.length === 0 ? "" : messages[idx % messages.length];
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-loader", `uxm-loader--${layout}`, className), ...rest, children: [
+    variant === "spinner" && /* @__PURE__ */ jsx("div", { className: "uxm-loader__spinner", role: "status", "aria-label": currentMessage || loadingLabel }),
+    variant === "dots" && /* @__PURE__ */ jsxs("div", { className: "uxm-loader__dots", role: "status", "aria-label": currentMessage || loadingLabel, children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {})
+    ] }),
+    variant === "bar" && /* @__PURE__ */ jsx("div", { className: "uxm-loader__bar", role: "status", "aria-label": currentMessage || loadingLabel, children: /* @__PURE__ */ jsx("span", {}) }),
+    currentMessage && /* @__PURE__ */ jsx("span", { className: "uxm-loader__message", children: messages.length > 1 ? /* @__PURE__ */ jsx("span", { className: "uxm-loader__message-fade", children: currentMessage }, idx) : currentMessage })
+  ] });
+}
+export {
+  Loader
+};
+//# sourceMappingURL=loader.js.map