@judarn/ui 0.0.0-stage → 0.7.2

package/dist/sdui/index.mjs

@@ -0,0 +1,540 @@
+// src/sdui/serializer.js
+import * as React2 from "react";
+
+// src/internal/cx.js
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/Button/Button.jsx
+import { jsx } from "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__ */ jsx("button", { ...rest, className: cls, type, disabled, onClick, children });
+}
+
+// src/Badge/Badge.jsx
+import { jsx as jsx2 } from "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__ */ jsx2("span", { ...rest, className: cls, style: Object.keys(inlineStyle).length > 0 ? inlineStyle : void 0, children });
+}
+function Tag({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx2("span", { ...rest, className: cx("tag", className), children });
+}
+
+// src/Card/Card.jsx
+import { jsx as jsx3, jsxs } from "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__ */ jsxs("div", { ...rest, className: cls, children: [
+    media ? /* @__PURE__ */ jsx3("div", { className: "card__media", children: media }) : null,
+    eyebrow ? /* @__PURE__ */ jsx3("span", { className: cx("card__eyebrow", "t-label", eyebrowCasing === "asWritten" && "t-as-written"), children: eyebrow }) : null,
+    title ? /* @__PURE__ */ jsx3("div", { className: "card__title", children: title }) : null,
+    children ? /* @__PURE__ */ jsx3("div", { className: "card__body", children }) : null,
+    actions ? /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: "var(--gap-tight)" }, children: actions }) : null
+  ] });
+}
+
+// src/DataMatrix/DataMatrix.jsx
+import { jsx as jsx4, jsxs as jsxs2 } from "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__ */ jsxs2(
+    "table",
+    {
+      ...rest,
+      className: cx("matrix", className),
+      role: "table",
+      "aria-label": label,
+      "aria-colcount": totalColumns,
+      "aria-rowcount": totalRows + 1,
+      children: [
+        /* @__PURE__ */ jsx4("thead", { role: "rowgroup", children: /* @__PURE__ */ jsx4("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__ */ jsx4(
+            "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__ */ jsx4("tbody", { role: "rowgroup", children: rows2.map((row, rowIndex) => {
+          const rowNum = rowIndex + 2;
+          return /* @__PURE__ */ jsx4(
+            "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__ */ jsx4(
+                  "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
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/DataTable/DataTable.jsx
+import { jsx as jsx5, jsxs as jsxs3 } from "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__ */ jsxs3("table", { ...rest, className: cx("table", className), children: [
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: cols.map((c) => /* @__PURE__ */ jsx5("th", { className: headerClass(c), children: c.label }, c.key)) }) }),
+    /* @__PURE__ */ jsx5("tbody", { children: rows2.map((row, i) => /* @__PURE__ */ jsx5("tr", { children: cols.map((c) => /* @__PURE__ */ jsx5("td", { className: c.numeric ? "num" : void 0, children: row[c.key] }, c.key)) }, i)) })
+  ] });
+}
+
+// src/TextField/TextField.jsx
+import * as React from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "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__ */ jsx6("textarea", { ...common });
+  else if (as === "select") control = /* @__PURE__ */ jsx6("select", { ...common, children });
+  else control = /* @__PURE__ */ jsx6("input", { ...common });
+  return /* @__PURE__ */ jsxs4("div", { className: "field", children: [
+    label ? /* @__PURE__ */ jsx6("label", { className: cx("field__label", labelCasing === "asWritten" && "t-as-written"), htmlFor: fid, children: label }) : null,
+    control,
+    hint ? /* @__PURE__ */ jsx6("span", { className: "field__hint", id: hintId, children: hint }) : null,
+    error ? /* @__PURE__ */ jsx6("span", { className: "field__hint is-error", id: errorId, children: error }) : null
+  ] });
+}
+
+// src/sdui/serializer.js
+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}`);
+  }
+}
+export {
+  SDUI_PROP_ALLOWLIST,
+  VALID_NODE_TYPES,
+  VALID_TOKEN_NAMES,
+  deserializeComponent,
+  serializeComponent,
+  serializeTokens,
+  validateSDUINode
+};