@sableui/react 0.0.0-stage → 0.1.0

package/dist/presets/index.d.ts

@@ -0,0 +1,37 @@
+import { T as ThemeManifest } from '../_contract-CYScOdf5.js';
+
+/** The public theme vocabulary. Presets never need component overrides. */
+declare const PRESET_TOKEN_NAMES: readonly string[];
+interface SablePreset {
+    schemaVersion: 1;
+    id: string;
+    label: string;
+    revision: number;
+    sableVersion: string;
+    defaultMode: "light" | "dark";
+    fonts: {
+        sans: string;
+        mono: string;
+        display?: string;
+    };
+    /** Apply alongside tokens: composition, imagery, interaction and motion guidance. */
+    direction: string;
+    references?: {
+        source: string;
+        observation: string;
+        method: "measured" | "estimated" | "derived" | "user-edited";
+    }[];
+    tokens: {
+        shared: Record<string, string>;
+        light: Record<string, string>;
+        dark: Record<string, string>;
+    };
+}
+/** Structural/contract validation; visual contrast and brief fit still need review. */
+declare function validatePreset(input: unknown): string[];
+declare function parsePreset(input: unknown): SablePreset;
+declare function presetManifest(input: SablePreset): ThemeManifest;
+/** Scoped CSS can coexist with built-in presets. Never changes :root globally. */
+declare function presetCss(input: SablePreset): string;
+
+export { PRESET_TOKEN_NAMES, type SablePreset, parsePreset, presetCss, presetManifest, validatePreset };

package/dist/presets/index.js

@@ -0,0 +1,117 @@
+import { SEMANTIC_TOKENS, WORKSPACE_SURFACE_TOKENS, DERIVED_EDGE_TOKENS, RADIUS_TOKENS, MOTION_TOKENS, TYPE_SCALE_TOKENS, TYPE_REFINEMENT_TOKENS, TYPE_OVERLINE_TOKENS, DENSITY_TOKENS, LAYERING_TOKENS, TYPE_UI_TOKENS } from '../chunk-JI7WJP2L.js';
+
+// src/presets/index.ts
+var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
+  ...SEMANTIC_TOKENS,
+  ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
+  ...DERIVED_EDGE_TOKENS.map((name) => `theme-${name}`),
+  ...WORKSPACE_SURFACE_TOKENS,
+  ...DERIVED_EDGE_TOKENS,
+  ...RADIUS_TOKENS,
+  ...MOTION_TOKENS,
+  ...TYPE_SCALE_TOKENS,
+  ...TYPE_REFINEMENT_TOKENS,
+  ...TYPE_OVERLINE_TOKENS,
+  ...DENSITY_TOKENS,
+  ...LAYERING_TOKENS,
+  ...TYPE_UI_TOKENS,
+  "font-sans",
+  "font-mono",
+  "font-display",
+  "spacing",
+  "theme-shadow-sm",
+  "theme-shadow",
+  "theme-shadow-md",
+  "theme-shadow-lg",
+  "theme-shadow-xl"
+])];
+var tokenNames = new Set(PRESET_TOKEN_NAMES);
+var record = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+var text = (value) => typeof value === "string" && value.trim().length > 0;
+var safeCss = (value) => value.length <= 2048 && !/[;{}<>\\@]|\/\*|\*\/|!important|url\s*\(|expression\s*\(|REPLACE/i.test(value);
+function validatePreset(input) {
+  if (!record(input)) return ["Preset must be a JSON object."];
+  const issues = [];
+  if (input.schemaVersion !== 1) issues.push("Unsupported preset schemaVersion; expected 1.");
+  if (typeof input.id !== "string" || !/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(input.id) || input.id.length > 64) issues.push("id must be a lowercase slug of at most 64 characters.");
+  if (!text(input.label) || input.label.length > 120) issues.push("label must contain 1\u2013120 characters.");
+  if (!Number.isSafeInteger(input.revision) || Number(input.revision) < 1) issues.push("revision must be a positive integer.");
+  if (typeof input.sableVersion !== "string" || !/^\d+\.\d+\.\d+(?:-[\w.-]+)?$/.test(input.sableVersion)) issues.push("sableVersion must record the package version used to author the preset.");
+  if (!["light", "dark"].includes(String(input.defaultMode))) issues.push("defaultMode must be light or dark.");
+  if (!text(input.direction) || input.direction.length > 16e3) issues.push("direction must contain design guidance, at most 16000 characters.");
+  if (!record(input.fonts) || !text(input.fonts.sans) || !text(input.fonts.mono)) issues.push("fonts must declare sans and mono stacks; the app loads their files.");
+  else for (const [role, stack] of Object.entries(input.fonts)) {
+    if (!["sans", "mono", "display"].includes(role) || !text(stack) || !safeCss(stack)) issues.push(`Invalid font stack: ${role}.`);
+  }
+  if (input.references !== void 0) {
+    if (!Array.isArray(input.references) || input.references.length > 50) issues.push("references must be an array of at most 50 observations.");
+    else input.references.forEach((item, index) => {
+      if (!record(item) || !text(item.source) || !text(item.observation) || !["measured", "estimated", "derived", "user-edited"].includes(String(item.method))) issues.push(`Invalid reference observation ${index + 1}.`);
+    });
+  }
+  if (!record(input.tokens)) return [...issues, "tokens must contain shared, light, and dark objects."];
+  const groups = input.tokens;
+  for (const group of ["shared", "light", "dark"]) {
+    const values = groups[group];
+    if (!record(values)) {
+      issues.push(`tokens.${group} must be an object.`);
+      continue;
+    }
+    for (const [name, value] of Object.entries(values)) {
+      if (!tokenNames.has(name)) issues.push(`Unknown Sable token in ${group}: ${name}. Use names without the -- prefix.`);
+      if (!text(value) || !safeCss(value)) issues.push(`Unsafe or empty CSS value for ${group}.${name}.`);
+    }
+  }
+  for (const mode of ["light", "dark"]) {
+    if (!record(groups[mode])) continue;
+    for (const name of SEMANTIC_TOKENS) {
+      if (!text(groups[mode][name])) issues.push(`Missing ${mode} semantic token: ${name}.`);
+    }
+    const values = { ...record(groups.shared) ? groups.shared : {}, ...groups[mode] };
+    for (const [name, value] of Object.entries(values)) {
+      if (typeof value !== "string") continue;
+      for (const match of value.matchAll(/var\(\s*--([\w-]+)/g)) {
+        if (!tokenNames.has(match[1])) issues.push(`${mode}.${name} depends on an unportable variable: --${match[1]}. Resolve palette values before saving.`);
+      }
+    }
+  }
+  if (record(input.fonts)) {
+    for (const [role, stack] of Object.entries(input.fonts)) for (const group of ["shared", "light", "dark"]) {
+      const values = groups[group];
+      if (record(values) && values[`font-${role}`] !== void 0 && values[`font-${role}`] !== stack) issues.push(`font-${role} differs from the declared font stack.`);
+    }
+  }
+  return issues;
+}
+function parsePreset(input) {
+  const issues = validatePreset(input);
+  if (issues.length) throw new Error(issues.join("\n"));
+  return input;
+}
+function presetManifest(input) {
+  const preset = parsePreset(input);
+  return { id: preset.id, label: preset.label, modes: ["light", "dark"], defaultMode: preset.defaultMode, fonts: preset.fonts };
+}
+function presetCss(input) {
+  const preset = parsePreset(input);
+  const selector = `[data-sable-theme="${preset.id}"]`;
+  const declarations = (values) => Object.entries(values).sort(([a], [b]) => a.localeCompare(b)).map(([name, value]) => {
+    const scaled = name.startsWith("motion-duration-") && !/var\(\s*--motion-(?:scale|duration-)/.test(value);
+    return `	--${name}: ${scaled ? `calc((${value}) * var(--motion-scale, 1))` : value};`;
+  }).join("\n");
+  const shared = { ...preset.tokens.shared, "font-sans": preset.fonts.sans, "font-mono": preset.fonts.mono, "font-display": preset.fonts.display ?? preset.fonts.sans };
+  return `${selector} {
+${declarations({ ...shared, ...preset.tokens.light })}
+}
+
+${selector}.dark, .dark ${selector}:not(.light) {
+${declarations(preset.tokens.dark)}
+}
+
+${selector}.light {
+${declarations(preset.tokens.light)}
+}
+`;
+}
+
+export { PRESET_TOKEN_NAMES, parsePreset, presetCss, presetManifest, validatePreset };

package/dist/registry-CyL28OzJ.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+/** Icon weight/style. Open-ended so any set can define its own variants. */
+type IconVariant = "regular" | "solid" | "brands" | (string & {});
+interface IconRenderProps {
+    /** Semantic icon name (e.g. "heart", "gear", "chevron-down"). */
+    name: string;
+    /** Resolved variant (the IconProvider's default is applied before this reaches the set). */
+    variant: IconVariant;
+    /** Spin animation. */
+    spin?: boolean;
+    /** Tailwind / size + color classes (e.g. "text-2xl text-muted-foreground"). */
+    className?: string;
+    /** Accessible label. When provided the set should expose the icon to AT; otherwise hide it. */
+    title?: string;
+}
+/**
+ * An icon set resolves a semantic name (+ variant) to a React node.
+ *
+ * Reicon supplies the default glyphs. A consuming app can override or extend
+ * the set through <IconProvider set={…}>.
+ *
+ * A set may render whatever it likes for a given name; it owns icon a11y
+ * (use `title` → role="img"/aria-label, else aria-hidden).
+ */
+type IconSet = (props: IconRenderProps) => ReactNode;
+
+export type { IconSet as I, IconRenderProps as a, IconVariant as b };