@judarn/ui 0.0.0-stage → 0.7.2

package/dist/index.cjs

@@ -0,0 +1,676 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var src_exports = {};
+__export(src_exports, {
+  Badge: () => Badge_default,
+  Button: () => Button_default,
+  Card: () => Card_default,
+  DataMatrix: () => DataMatrix_default,
+  DataTable: () => DataTable_default,
+  Footer: () => Footer_default,
+  LogoLockup: () => LogoLockup_default,
+  Navbar: () => Navbar_default,
+  Tag: () => Tag,
+  TextField: () => TextField_default,
+  getContrastingInk: () => getContrastingInk,
+  sdui: () => sdui_exports
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/internal/cx.js
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/Badge/Badge.jsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var linearize = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+function oklchToLinearSrgb(l, c, h, clip) {
+  const hr = h * Math.PI / 180;
+  const a = c * Math.cos(hr);
+  const b = c * Math.sin(hr);
+  const l_ = Math.pow(l + 0.3963377774 * a + 0.2158037573 * b, 3);
+  const m_ = Math.pow(l - 0.1055613458 * a - 0.0638541728 * b, 3);
+  const s_ = Math.pow(l - 0.0894841775 * a - 1.291485548 * b, 3);
+  const rgb = [
+    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
+  ];
+  return clip ? rgb.map((v) => Math.min(1, Math.max(0, v))) : rgb;
+}
+function oklchToLuminance(l, c, h) {
+  if (l <= 0) return 0;
+  if (l >= 1) return 1;
+  const inGamut = (rgb2) => rgb2.every((v) => v >= -1e-6 && v <= 1 + 1e-6);
+  let rgb = oklchToLinearSrgb(l, c, h, false);
+  if (!inGamut(rgb)) {
+    let low = 0;
+    let high = c;
+    for (let i = 0; i < 24; i++) {
+      const mid = 0.5 * (low + high);
+      if (inGamut(oklchToLinearSrgb(l, mid, h, false))) low = mid;
+      else high = mid;
+    }
+    rgb = oklchToLinearSrgb(l, low, h, false);
+  }
+  const [r, g, b] = rgb.map((v) => Math.min(1, Math.max(0, v)));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function parseLuminance(input) {
+  const value = input.trim().toLowerCase();
+  if (value.startsWith("#")) {
+    const hex = value.slice(1);
+    if (!/^([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/.test(hex)) return null;
+    const full = hex.length <= 4 ? [...hex].map((ch) => ch + ch).join("") : hex;
+    const [r, g, b] = [0, 2, 4].map((i) => linearize(parseInt(full.slice(i, i + 2), 16) / 255));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+  if (value.startsWith("rgb")) {
+    const nums = value.replace(/\/.*$/, "").match(/\d+(\.\d+)?/g);
+    if (!nums || nums.length < 3) return null;
+    const [r, g, b] = nums.slice(0, 3).map((n) => linearize(parseFloat(n) / 255));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+  if (value.startsWith("oklch(")) {
+    const m = value.match(/^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)(?:deg)?\s*(?:\/[^)]*)?\)$/);
+    if (!m) return null;
+    const l = parseFloat(m[1]) / (m[2] ? 100 : 1);
+    return oklchToLuminance(l, parseFloat(m[3]), parseFloat(m[4]));
+  }
+  return null;
+}
+function getContrastingInk(color) {
+  const lum = typeof color === "string" ? parseLuminance(color) : null;
+  if (lum === null) {
+    throw new TypeError(`getContrastingInk: unsupported colour "${String(color)}". Use #hex, rgb() or oklch().`);
+  }
+  const perceptualCrossover = 0.5;
+  return lum > perceptualCrossover ? "#000000" : "#ffffff";
+}
+function Badge({ children, variant = "outline", accentColor, style, className, ...rest }) {
+  const cls = cx(
+    "badge",
+    variant === "solid" && "badge--solid",
+    variant === "accent" && "badge--accent",
+    variant === "accent-outline" && "badge--accent-outline",
+    className
+  );
+  const inlineStyle = { ...style };
+  if (accentColor) {
+    if (variant === "accent") {
+      inlineStyle.backgroundColor = accentColor;
+      inlineStyle.borderColor = accentColor;
+      inlineStyle.color = getContrastingInk(accentColor);
+    } else if (variant === "accent-outline") {
+      inlineStyle.borderColor = accentColor;
+      inlineStyle.color = accentColor;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...rest, className: cls, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0, children });
+}
+function Tag({ children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...rest, className: cx("tag", className), children });
+}
+var Badge_default = Badge;
+
+// src/Button/Button.jsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  block = false,
+  disabled = false,
+  type = "button",
+  onClick,
+  className,
+  ...rest
+}) {
+  const cls = cx(
+    "btn",
+    variant === "outline" && "btn--outline",
+    variant === "secondary" && "btn--secondary",
+    variant === "ghost" && "btn--ghost",
+    variant === "accent" && "btn--accent",
+    size === "sm" && "btn--sm",
+    size === "lg" && "btn--lg",
+    block && "btn--block",
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { ...rest, className: cls, type, disabled, onClick, children });
+}
+var Button_default = Button;
+
+// src/Card/Card.jsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Card({
+  eyebrow,
+  eyebrowCasing = "uppercase",
+  title,
+  children,
+  media,
+  actions,
+  flat = false,
+  compact = false,
+  className,
+  ...rest
+}) {
+  const cls = cx("card", flat && "card--flat", compact && "card--compact", className);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...rest, className: cls, children: [
+    media ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__media", children: media }) : null,
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__title", children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "card__body", children }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "var(--gap-tight)" }, children: actions }) : null
+  ] });
+}
+var Card_default = Card;
+
+// src/DataMatrix/DataMatrix.jsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function DataMatrix({ columns: columns2 = [], rows: rows2 = [], label = "Data Matrix", className, ...rest }) {
+  const cols = columns2.map((c) => typeof c === "string" ? { key: c, label: c } : c);
+  const totalColumns = cols.length;
+  const totalRows = rows2.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "table",
+    {
+      ...rest,
+      className: cx("matrix", className),
+      role: "table",
+      "aria-label": label,
+      "aria-colcount": totalColumns,
+      "aria-rowcount": totalRows + 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { role: "rowgroup", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { role: "row", "aria-rowindex": 1, children: cols.map((c, colIndex) => {
+          const widthStyle = c.width != null ? {
+            width: typeof c.width === "number" ? `${c.width}px` : c.width,
+            minWidth: typeof c.width === "number" ? `${c.width}px` : c.width,
+            maxWidth: typeof c.width === "number" ? `${c.width}px` : c.width
+          } : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "th",
+            {
+              scope: "col",
+              role: "columnheader",
+              "aria-colindex": colIndex + 1,
+              "aria-label": c.label,
+              className: [c.numeric && "num", c.casing === "asWritten" && "t-as-written"].filter(Boolean).join(" ") || void 0,
+              style: widthStyle,
+              children: c.label
+            },
+            c.key
+          );
+        }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { role: "rowgroup", children: rows2.map((row, rowIndex) => {
+          const rowNum = rowIndex + 2;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "tr",
+            {
+              role: "row",
+              "aria-rowindex": rowNum,
+              "aria-label": `Row ${rowIndex + 1} of ${totalRows}`,
+              children: cols.map((c, colIndex) => {
+                const rawVal = row[c.key];
+                const isEmpty = rawVal == null || rawVal === "";
+                const displayVal = isEmpty ? "\u200B" : rawVal;
+                const widthStyle = c.width != null ? {
+                  width: typeof c.width === "number" ? `${c.width}px` : c.width,
+                  minWidth: typeof c.width === "number" ? `${c.width}px` : c.width,
+                  maxWidth: typeof c.width === "number" ? `${c.width}px` : c.width
+                } : void 0;
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "td",
+                  {
+                    role: "cell",
+                    "aria-colindex": colIndex + 1,
+                    "aria-label": isEmpty ? `${c.label}: Empty` : void 0,
+                    className: c.numeric ? "num" : void 0,
+                    style: widthStyle,
+                    children: displayVal
+                  },
+                  c.key
+                );
+              })
+            },
+            rowIndex
+          );
+        }) })
+      ]
+    }
+  );
+}
+var DataMatrix_default = DataMatrix;
+
+// src/DataTable/DataTable.jsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var headerClass = (c) => [c.numeric && "num", c.casing === "asWritten" && "t-as-written"].filter(Boolean).join(" ") || void 0;
+function DataTable({ columns: columns2 = [], rows: rows2 = [], className, ...rest }) {
+  const cols = columns2.map((c) => typeof c === "string" ? { key: c, label: c } : c);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { ...rest, className: cx("table", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: headerClass(c), children: c.label }, c.key)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: rows2.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: cols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { className: c.numeric ? "num" : void 0, children: row[c.key] }, c.key)) }, i)) })
+  ] });
+}
+var DataTable_default = DataTable;
+
+// src/Footer/Footer.jsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Footer({ brand = "JUDARN", tagline, columns: columns2 = [], headCasing = "uppercase", className, ...rest }) {
+  const headClass = headCasing === "asWritten" ? "footer__head t-label t-as-written" : "footer__head t-label";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("footer", { ...rest, className: cx("footer", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "footer__col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "navbar__brand", children: brand }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "footer__link", style: { marginTop: "8px" }, children: tagline }) : null
+    ] }),
+    columns2.map((col) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "footer__col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: headClass, children: col.head }),
+      (col.links || []).map((l) => {
+        const label = typeof l === "string" ? l : l.label;
+        const href = typeof l === "string" ? "#" : l.href || "#";
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("a", { className: "footer__link", href, children: label }, label);
+      })
+    ] }, col.head))
+  ] });
+}
+var Footer_default = Footer;
+
+// src/LogoLockup/LogoLockup.jsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function PlaceholderMark({ size = 48 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: size, height: size, viewBox: "0 0 48 48", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "0", y: "0", width: "48", height: "24", fill: "var(--black)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "0", y: "24", width: "24", height: "24", fill: "var(--ink-60)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: "24,24 48,24 48,48", fill: "var(--accent)" })
+  ] });
+}
+function LogoLockup({
+  name = "JUDARN",
+  tagline,
+  mark,
+  variant = "horizontal",
+  markSize,
+  taglineCasing = "uppercase"
+}) {
+  const isIcon = variant === "icon";
+  const cls = [
+    "lockup",
+    variant === "vertical" && "lockup--vertical",
+    variant === "reversed" && "lockup--reversed"
+  ].filter(Boolean).join(" ");
+  const theMark = mark || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlaceholderMark, { size: markSize || (variant === "vertical" ? 64 : 48) });
+  if (isIcon) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lockup__mark", role: "img", "aria-label": name, children: mark || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PlaceholderMark, { size: markSize || 64 }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cls, role: "img", "aria-label": tagline ? `${name} \u2013 ${tagline}` : name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lockup__mark", children: theMark }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "lockup__words", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "lockup__name", children: name }),
+      tagline ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: taglineCasing === "asWritten" ? "lockup__tag t-label t-as-written" : "lockup__tag t-label", children: tagline }) : null
+    ] })
+  ] });
+}
+var LogoLockup_default = LogoLockup;
+
+// src/Navbar/Navbar.jsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Navbar({ brand = "JUDARN", links = [], current, actions, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("nav", { ...rest, className: cx("navbar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "navbar__brand", children: brand }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("ul", { className: "navbar__links", children: [
+      links.map((l) => {
+        const label = typeof l === "string" ? l : l.label;
+        const href = typeof l === "string" ? "#" : l.href || "#";
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "a",
+          {
+            className: "navbar__link",
+            href,
+            "aria-current": label === current ? "page" : void 0,
+            children: label
+          }
+        ) }, label);
+      }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("li", { children: actions }) : null
+    ] })
+  ] });
+}
+var Navbar_default = Navbar;
+
+// src/TextField/TextField.jsx
+var React = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function TextField({
+  label,
+  hint,
+  error,
+  as = "input",
+  id,
+  invalid = false,
+  disabled = false,
+  labelCasing = "uppercase",
+  className,
+  children,
+  "aria-describedby": describedByProp,
+  ...rest
+}) {
+  const generated = React.useId();
+  const fid = id || generated;
+  const hintId = hint ? `${fid}-hint` : void 0;
+  const errorId = error ? `${fid}-error` : void 0;
+  const describedBy = [describedByProp, hintId, errorId].filter(Boolean).join(" ") || void 0;
+  const common = {
+    ...rest,
+    id: fid,
+    className: cx("field__input", className),
+    "aria-invalid": invalid || error ? true : void 0,
+    "aria-describedby": describedBy,
+    disabled
+  };
+  let control;
+  if (as === "textarea") control = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("textarea", { ...common });
+  else if (as === "select") control = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("select", { ...common, children });
+  else control = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ...common });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "field", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: cx("field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
+    control,
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "field__hint", id: hintId, children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "field__hint is-error", id: errorId, children: error }) : null
+  ] });
+}
+var TextField_default = TextField;
+
+// src/sdui/index.js
+var sdui_exports = {};
+__export(sdui_exports, {
+  SDUI_PROP_ALLOWLIST: () => SDUI_PROP_ALLOWLIST,
+  VALID_NODE_TYPES: () => VALID_NODE_TYPES,
+  VALID_TOKEN_NAMES: () => VALID_TOKEN_NAMES,
+  deserializeComponent: () => deserializeComponent,
+  serializeComponent: () => serializeComponent,
+  serializeTokens: () => serializeTokens,
+  validateSDUINode: () => validateSDUINode
+});
+
+// src/sdui/serializer.js
+var React2 = __toESM(require("react"));
+var VALID_NODE_TYPES = /* @__PURE__ */ new Set([
+  "button",
+  "badge",
+  "tag",
+  "card",
+  "data-matrix",
+  "data-table",
+  "text-field",
+  "container",
+  "text"
+]);
+var BUTTON_VARIANTS = ["primary", "outline", "secondary", "ghost", "accent"];
+var BADGE_VARIANTS = ["outline", "solid", "accent", "accent-outline"];
+var SIZES = ["sm", "md", "lg"];
+var CASINGS = ["uppercase", "asWritten"];
+var VALID_TOKEN_NAMES = /* @__PURE__ */ new Set([
+  // color
+  "substrate",
+  "surfaceElevated",
+  "surfaceRecessed",
+  "ink100",
+  "ink60",
+  "ink30",
+  "signalError",
+  // radius
+  "subtle",
+  "control",
+  "card",
+  "badge",
+  // space
+  "half",
+  "1",
+  "2",
+  "3",
+  "4",
+  "6",
+  "8",
+  "12",
+  "16",
+  "touch",
+  // measure
+  "body",
+  "compact",
+  "sidebar"
+]);
+var string = { kind: "string" };
+var boolean = { kind: "boolean" };
+var oneOf = (values) => ({ kind: "enum", values });
+var columns = { kind: "columns" };
+var rows = { kind: "rows" };
+var colorValue = { kind: "color" };
+var SDUI_PROP_ALLOWLIST = {
+  button: { variant: oneOf(BUTTON_VARIANTS), size: oneOf(SIZES), block: boolean, disabled: boolean, type: oneOf(["button", "submit", "reset"]), token: string },
+  badge: { variant: oneOf(BADGE_VARIANTS), accentColor: colorValue, token: string },
+  tag: { token: string },
+  card: { eyebrow: string, eyebrowCasing: oneOf(CASINGS), title: string, flat: boolean, compact: boolean, token: string },
+  "data-matrix": { columns, rows, label: string, token: string },
+  "data-table": { columns, rows, token: string },
+  "text-field": {
+    label: string,
+    hint: string,
+    error: string,
+    as: oneOf(["input", "textarea", "select"]),
+    invalid: boolean,
+    disabled: boolean,
+    labelCasing: oneOf(CASINGS),
+    placeholder: string,
+    name: string,
+    type: oneOf(["text", "email", "number", "password", "search", "tel", "url"]),
+    defaultValue: string,
+    token: string
+  },
+  container: { token: string },
+  text: { token: string }
+};
+var COLOR_PATTERN = /^(#[0-9a-f]{3,8}|rgba?\([\d\s.,%/]+\)|oklch\([\d\s.%/deg]+\))$/i;
+var COLUMN_KEYS = /* @__PURE__ */ new Set(["key", "label", "numeric", "width", "casing"]);
+var fail = (message) => {
+  throw new Error(message);
+};
+function validateColumns(value, where) {
+  if (!Array.isArray(value)) fail(`${where}: "columns" must be an array.`);
+  for (const col of value) {
+    if (typeof col === "string") continue;
+    if (!col || typeof col !== "object" || Array.isArray(col)) fail(`${where}: a column must be a string or an object.`);
+    for (const [k, v] of Object.entries(col)) {
+      if (!COLUMN_KEYS.has(k)) fail(`${where}: unsupported column key "${k}".`);
+      if ((k === "key" || k === "label") && typeof v !== "string") fail(`${where}: column "${k}" must be a string.`);
+      if (k === "numeric" && typeof v !== "boolean") fail(`${where}: column "numeric" must be a boolean.`);
+      if (k === "width" && typeof v !== "number" && typeof v !== "string") fail(`${where}: column "width" must be a number or string.`);
+      if (k === "casing" && !CASINGS.includes(v)) fail(`${where}: column "casing" must be one of ${CASINGS.join(", ")}.`);
+    }
+    if (typeof col.key !== "string" || typeof col.label !== "string") fail(`${where}: a column needs "key" and "label" strings.`);
+  }
+}
+function validateRows(value, where) {
+  if (!Array.isArray(value)) fail(`${where}: "rows" must be an array.`);
+  for (const row of value) {
+    if (!row || typeof row !== "object" || Array.isArray(row)) fail(`${where}: a row must be an object.`);
+    for (const cell of Object.values(row)) {
+      if (cell !== null && !["string", "number", "boolean"].includes(typeof cell)) fail(`${where}: row cells must be strings, numbers, booleans or null.`);
+    }
+  }
+}
+function validateProp(type, name, spec, value) {
+  const where = `SDUI ${type} prop "${name}"`;
+  switch (spec.kind) {
+    case "string":
+      if (typeof value !== "string") fail(`${where} must be a string.`);
+      break;
+    case "boolean":
+      if (typeof value !== "boolean") fail(`${where} must be a boolean.`);
+      break;
+    case "enum":
+      if (!spec.values.includes(value)) fail(`Unsupported ${where}: "${value}". Allowed: ${spec.values.join(", ")}`);
+      break;
+    case "color":
+      if (typeof value !== "string" || !COLOR_PATTERN.test(value)) fail(`${where} must be a #hex, rgb() or oklch() colour.`);
+      break;
+    case "columns":
+      validateColumns(value, where);
+      break;
+    case "rows":
+      validateRows(value, where);
+      break;
+    default:
+      fail(`${where} has an unknown spec.`);
+  }
+  if (name === "token" && !VALID_TOKEN_NAMES.has(value)) fail(`Unsupported SDUI token reference: "${value}".`);
+}
+function serializeTokens(tokens) {
+  if (!tokens || typeof tokens !== "object") {
+    throw new Error("Invalid tokens object provided for SDUI serialization.");
+  }
+  const sduiTokens = {
+    $schema: "https://judarn.design/schemas/sdui/tokens/v1.json",
+    space: {},
+    measure: {},
+    border: {},
+    radius: {},
+    color: {}
+  };
+  if (tokens.space) {
+    for (const [key, val] of Object.entries(tokens.space)) {
+      sduiTokens.space[key] = val.$value;
+    }
+  }
+  if (tokens.measure) {
+    for (const [key, val] of Object.entries(tokens.measure)) {
+      sduiTokens.measure[key] = val.$value;
+    }
+  }
+  if (tokens.border) {
+    for (const [key, val] of Object.entries(tokens.border)) {
+      sduiTokens.border[key] = val.$value;
+    }
+  }
+  if (tokens.radius) {
+    for (const [key, val] of Object.entries(tokens.radius)) {
+      sduiTokens.radius[key] = val.$value;
+    }
+  }
+  if (tokens.color) {
+    for (const [key, val] of Object.entries(tokens.color)) {
+      sduiTokens.color[key] = {
+        light: val.light?.$value,
+        dark: val.dark?.$value,
+        lightHighContrast: val.lightHighContrast?.$value,
+        darkHighContrast: val.darkHighContrast?.$value
+      };
+    }
+  }
+  return sduiTokens;
+}
+function validateSDUINode(node) {
+  if (!node || typeof node !== "object" || Array.isArray(node)) {
+    fail("SDUI Node must be a non-null object.");
+  }
+  if (!node.type || typeof node.type !== "string") {
+    fail('SDUI Node missing required "type" string property.');
+  }
+  if (!VALID_NODE_TYPES.has(node.type)) {
+    fail(`Unsupported SDUI node type: "${node.type}". Allowed: ${Array.from(VALID_NODE_TYPES).join(", ")}`);
+  }
+  if (node.props !== void 0) {
+    if (!node.props || typeof node.props !== "object" || Array.isArray(node.props)) fail("SDUI Node props must be an object.");
+    const allowed = SDUI_PROP_ALLOWLIST[node.type];
+    for (const [name, value] of Object.entries(node.props)) {
+      if (!Object.prototype.hasOwnProperty.call(allowed, name)) {
+        fail(`Unsupported SDUI prop "${name}" on "${node.type}". Allowed: ${Object.keys(allowed).join(", ") || "none"}`);
+      }
+      validateProp(node.type, name, allowed[name], value);
+    }
+  }
+  if (node.content !== void 0 && typeof node.content !== "string") {
+    fail("SDUI Node content must be a string.");
+  }
+  if (node.children !== void 0) {
+    if (!Array.isArray(node.children)) fail("SDUI Node children must be an array.");
+    for (const child of node.children) validateSDUINode(child);
+  }
+  return true;
+}
+function serializeComponent(type, props = {}, children = [], content = void 0) {
+  const node = { type, props: { ...props } };
+  if (content !== void 0) node.content = String(content);
+  if (Array.isArray(children) && children.length > 0) node.children = children;
+  validateSDUINode(node);
+  return node;
+}
+function deserializeComponent(node, customComponents = {}, reactInstance = React2) {
+  validateSDUINode(node);
+  const components = {
+    Button,
+    Badge,
+    Tag,
+    Card,
+    DataMatrix,
+    DataTable,
+    TextField,
+    ...customComponents
+  };
+  const h = (type, props2, children) => reactInstance.createElement(type, props2, ...children);
+  const childElements = node.children ? node.children.map((child, i) => {
+    const el = deserializeComponent(child, customComponents, reactInstance);
+    return reactInstance.isValidElement(el) ? reactInstance.cloneElement(el, { key: i }) : el;
+  }) : [];
+  const contentOrChildren = node.content !== void 0 ? [node.content] : childElements;
+  const { token: _token, ...props } = node.props || {};
+  switch (node.type) {
+    case "button":
+      return h(components.Button, props, contentOrChildren);
+    case "badge":
+      return h(components.Badge, props, contentOrChildren);
+    case "tag":
+      return h(components.Tag, props, contentOrChildren);
+    case "card":
+      return h(components.Card, props, contentOrChildren);
+    case "data-matrix":
+      return h(components.DataMatrix, props, []);
+    case "data-table":
+      return h(components.DataTable, props, []);
+    case "text-field":
+      return h(components.TextField, props, []);
+    case "container":
+      return h("div", props, contentOrChildren);
+    case "text":
+      return h("span", props, [node.content || ""]);
+    default:
+      return fail(`Unhandled SDUI node type: ${node.type}`);
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from './Badge/Badge';
+export * from './Button/Button';
+export * from './Card/Card';
+export * from './DataMatrix/DataMatrix';
+export * from './DataTable/DataTable';
+export * from './Footer/Footer';
+export * from './LogoLockup/LogoLockup';
+export * from './Navbar/Navbar';
+export * from './TextField/TextField';
+export * as sdui from './sdui/index';
+