@mars-stack/ui 1.0.1 → 1.0.2

package/dist/chunk-RMD6D5ZT.js

@@ -0,0 +1,100 @@
+"use client";
+// src/utils/brand-scale.ts
+var TAILWIND_COLOR_HEX = {
+  "blue-600": "#2563eb",
+  "indigo-600": "#4f46e5",
+  "violet-600": "#7c3aed",
+  "emerald-600": "#059669",
+  "rose-600": "#e11d48",
+  "amber-600": "#d97706",
+  "cyan-600": "#0891b2",
+  "slate-600": "#475569"
+};
+var DEFAULT_COLOR = "blue-600";
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function linearRgbToOklab(r, g, b) {
+  const l_ = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m_ = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s_ = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l = Math.cbrt(l_);
+  const m = Math.cbrt(m_);
+  const s = Math.cbrt(s_);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function hexToOklch(hex) {
+  const cleaned = hex.replace("#", "");
+  const r = parseInt(cleaned.slice(0, 2), 16) / 255;
+  const g = parseInt(cleaned.slice(2, 4), 16) / 255;
+  const b = parseInt(cleaned.slice(4, 6), 16) / 255;
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const [L, a, bLab] = linearRgbToOklab(lr, lg, lb);
+  const c = Math.sqrt(a * a + bLab * bLab);
+  let h = Math.atan2(bLab, a) * 180 / Math.PI;
+  if (h < 0) h += 360;
+  return { l: L, c, h };
+}
+function formatOklch(color) {
+  return `oklch(${color.l.toFixed(3)} ${color.c.toFixed(3)} ${color.h.toFixed(0)})`;
+}
+var SCALE_STEPS = [
+  { name: "50", l: 0.97, cScale: 0.07 },
+  { name: "100", l: 0.93, cScale: 0.15 },
+  { name: "200", l: 0.88, cScale: 0.28 },
+  { name: "300", l: 0.81, cScale: 0.5 },
+  { name: "400", l: 0.71, cScale: 0.72 },
+  { name: "500", l: 0.62, cScale: 1 },
+  { name: "600", l: 0.55, cScale: 1 },
+  { name: "700", l: 0.49, cScale: 0.95 },
+  { name: "800", l: 0.42, cScale: 0.82 },
+  { name: "900", l: 0.38, cScale: 0.6 },
+  { name: "950", l: 0.28, cScale: 0.46 }
+];
+function resolveColorPreset(primaryColor) {
+  if (primaryColor in TAILWIND_COLOR_HEX) return primaryColor;
+  const withShade = `${primaryColor}-600`;
+  if (withShade in TAILWIND_COLOR_HEX) return withShade;
+  return DEFAULT_COLOR;
+}
+function resolveColorHex(primaryColor) {
+  return TAILWIND_COLOR_HEX[resolveColorPreset(primaryColor)];
+}
+function generateBrandScale(primaryColor) {
+  const hex = resolveColorHex(primaryColor);
+  const base = hexToOklch(hex);
+  const maxChroma = Math.max(base.c, 0.05);
+  const scale = {};
+  for (const step of SCALE_STEPS) {
+    const chroma = maxChroma * step.cScale;
+    scale[step.name] = formatOklch({ l: step.l, c: chroma, h: base.h });
+  }
+  return scale;
+}
+function effectiveColorLabel(primaryColor) {
+  const preset = resolveColorPreset(primaryColor);
+  const usedFallback = preset === DEFAULT_COLOR && primaryColor !== DEFAULT_COLOR && primaryColor !== "blue";
+  if (usedFallback) {
+    return `${primaryColor} (unrecognized, using default ${DEFAULT_COLOR})`;
+  }
+  return primaryColor;
+}
+function generateBrandCss(primaryColor) {
+  const scale = generateBrandScale(primaryColor);
+  const lines = Object.entries(scale).map(([step, value]) => `  --brand-${step}: ${value};`).join("\n");
+  const label = effectiveColorLabel(primaryColor);
+  return `/* Generated by Mars \u2014 brand palette derived from ${label} */
+
+:root {
+${lines}
+}
+`;
+}
+
+export { generateBrandCss, generateBrandScale, resolveColorHex };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+export { generateBrandCss } from './utils/index.js';
 
 type ButtonVariant = 'primary' | 'secondary' | 'subtle' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg';

package/dist/index.js

@@ -1,4 +1,5 @@
 "use client";
+export { generateBrandCss } from './chunk-RMD6D5ZT.js';
 import { __export } from './chunk-MLKGABMK.js';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import clsx11 from 'clsx';

package/dist/utils/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * OKLCH brand scale generator.
+ *
+ * Maps Tailwind color preset names (e.g. "indigo-600") to a full 11-stop
+ * OKLCH brand palette used in brand.css. Ported from the playground's
+ * color-utils.ts; kept dependency-free so the CLI can bundle it.
+ */
+interface OklchColor {
+    l: number;
+    c: number;
+    h: number;
+}
+/**
+ * Resolve a color preset string to a hex value. Handles both the new
+ * format (`"indigo-600"`) and legacy shorthand (`"indigo"`).
+ */
+declare function resolveColorHex(primaryColor: string): string;
+/**
+ * Generate an 11-stop OKLCH brand scale from a Tailwind color preset name.
+ * Keeps the hue fixed and fans out lightness/chroma.
+ *
+ * @returns Record mapping step names ("50"–"950") to `oklch(...)` CSS values.
+ */
+declare function generateBrandScale(primaryColor: string): Record<string, string>;
+/**
+ * Generate the full `brand.css` file content for a given primary color.
+ *
+ * @param primaryColor - A Tailwind color preset (e.g. "indigo-600" or "indigo").
+ * @returns CSS string with `:root` block defining `--brand-50` through `--brand-950`.
+ */
+declare function generateBrandCss(primaryColor: string): string;
+
+export { type OklchColor, generateBrandCss, generateBrandScale, resolveColorHex };

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { generateBrandCss, generateBrandScale, resolveColorHex } from '../chunk-RMD6D5ZT.js';
+import '../chunk-MLKGABMK.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mars-stack/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -19,17 +19,24 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
-      "import": "./dist/hooks/index.js"
+      "import": "./dist/hooks/index.js",
+      "default": "./dist/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js",
+      "default": "./dist/utils/index.js"
     },
     "./styles/*": "./styles/*"
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "files": [
     "dist",
@@ -43,7 +50,7 @@
     "prepublishOnly": "yarn build"
   },
   "peerDependencies": {
-    "@mars-stack/core": ">=0.4.1",
+    "@mars-stack/core": ">=1.0.2",
     "clsx": ">=2",
     "next": ">=14",
     "react": ">=18"

package/styles/meta-creative.css

@@ -0,0 +1,50 @@
+/* MARS Meta-Theme: Creative
+ * Layer 2 — structural overrides. Does NOT touch --color-* or --brand-*.
+ * Large radii, bold shadows, looser spacing, expressive typography scale. */
+
+:root {
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.875rem;
+  --radius-xl: 1.25rem;
+  --radius-2xl: 1.5rem;
+
+  --space-1: 0.3125rem;
+  --space-2: 0.625rem;
+  --space-3: 0.9375rem;
+  --space-4: 1.25rem;
+  --space-5: 1.5rem;
+  --space-6: 1.875rem;
+  --space-8: 2.5rem;
+  --space-10: 3rem;
+  --space-12: 3.75rem;
+  --space-16: 5rem;
+
+  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.08);
+  --shadow-sm: 0 2px 6px 0 rgb(0 0 0 / 0.1), 0 1px 3px -1px rgb(0 0 0 / 0.08);
+  --shadow-md: 0 6px 12px -2px rgb(0 0 0 / 0.12), 0 3px 6px -3px rgb(0 0 0 / 0.08);
+  --shadow-lg: 0 14px 24px -4px rgb(0 0 0 / 0.14), 0 6px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 24px 40px -8px rgb(0 0 0 / 0.16), 0 10px 16px -8px rgb(0 0 0 / 0.1);
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1.0625rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 1.875rem;
+  --text-3xl: 2.25rem;
+  --text-4xl: 3rem;
+
+  --leading-tight: 1.2;
+  --leading-normal: 1.55;
+  --leading-relaxed: 1.7;
+
+  --tracking-tight: -0.03em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 650;
+  --font-weight-bold: 800;
+}

package/styles/meta-dashboard.css

@@ -0,0 +1,50 @@
+/* MARS Meta-Theme: Dashboard
+ * Layer 2 — structural overrides. Does NOT touch --color-* or --brand-*.
+ * Medium radii, compact spacing for data density, subtle shadows, monospace-friendly sizing. */
+
+:root {
+  --radius-sm: 0.1875rem;
+  --radius-md: 0.3125rem;
+  --radius-lg: 0.4375rem;
+  --radius-xl: 0.625rem;
+  --radius-2xl: 0.75rem;
+
+  --space-1: 0.1875rem;
+  --space-2: 0.375rem;
+  --space-3: 0.5625rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
+  --space-8: 1.75rem;
+  --space-10: 2.25rem;
+  --space-12: 2.75rem;
+  --space-16: 3.5rem;
+
+  --shadow-xs: 0 1px 1px 0 rgb(0 0 0 / 0.03);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.03);
+  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.03);
+  --shadow-lg: 0 6px 10px -3px rgb(0 0 0 / 0.07), 0 3px 4px -3px rgb(0 0 0 / 0.04);
+  --shadow-xl: 0 12px 20px -5px rgb(0 0 0 / 0.08), 0 5px 8px -5px rgb(0 0 0 / 0.04);
+
+  --text-xs: 0.6875rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1rem;
+  --text-xl: 1.125rem;
+  --text-2xl: 1.3125rem;
+  --text-3xl: 1.625rem;
+  --text-4xl: 2rem;
+
+  --leading-tight: 1.2;
+  --leading-normal: 1.4;
+  --leading-relaxed: 1.55;
+
+  --tracking-tight: -0.015em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}

package/styles/meta-enterprise.css

@@ -0,0 +1,50 @@
+/* MARS Meta-Theme: Enterprise
+ * Layer 2 — structural overrides. Does NOT touch --color-* or --brand-*.
+ * Square/very small radii, dense spacing, conservative shadows, tabular-friendly typography. */
+
+:root {
+  --radius-sm: 0.125rem;
+  --radius-md: 0.1875rem;
+  --radius-lg: 0.25rem;
+  --radius-xl: 0.375rem;
+  --radius-2xl: 0.5rem;
+
+  --space-1: 0.1875rem;
+  --space-2: 0.375rem;
+  --space-3: 0.5rem;
+  --space-4: 0.75rem;
+  --space-5: 0.875rem;
+  --space-6: 1.125rem;
+  --space-8: 1.5rem;
+  --space-10: 2rem;
+  --space-12: 2.5rem;
+  --space-16: 3.25rem;
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06), 0 1px 1px -1px rgb(0 0 0 / 0.04);
+  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+  --shadow-lg: 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);
+  --shadow-xl: 0 8px 16px -4px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
+
+  --text-xs: 0.6875rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1.0625rem;
+  --text-xl: 1.1875rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.6875rem;
+  --text-4xl: 2rem;
+
+  --leading-tight: 1.2;
+  --leading-normal: 1.45;
+  --leading-relaxed: 1.55;
+
+  --tracking-tight: -0.015em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.02em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}

package/styles/meta-minimal.css

@@ -0,0 +1,50 @@
+/* MARS Meta-Theme: Minimal
+ * Layer 2 — structural overrides. Does NOT touch --color-* or --brand-*.
+ * Very small radii, no/minimal shadows, tighter spacing, reduced typography scale. */
+
+:root {
+  --radius-sm: 0.125rem;
+  --radius-md: 0.1875rem;
+  --radius-lg: 0.25rem;
+  --radius-xl: 0.375rem;
+  --radius-2xl: 0.5rem;
+
+  --space-1: 0.1875rem;
+  --space-2: 0.375rem;
+  --space-3: 0.5625rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
+  --space-8: 1.75rem;
+  --space-10: 2.25rem;
+  --space-12: 2.75rem;
+  --space-16: 3.5rem;
+
+  --shadow-xs: none;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
+  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 4px 8px -2px rgb(0 0 0 / 0.06);
+  --shadow-xl: 0 8px 16px -4px rgb(0 0 0 / 0.06);
+
+  --text-xs: 0.6875rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1.0625rem;
+  --text-xl: 1.1875rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.6875rem;
+  --text-4xl: 2rem;
+
+  --leading-tight: 1.3;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.6;
+
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.015em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 450;
+  --font-weight-semibold: 550;
+  --font-weight-bold: 650;
+}

package/styles/meta-modern-saas.css

@@ -0,0 +1,50 @@
+/* MARS Meta-Theme: Modern SaaS (baseline)
+ * Layer 2 — structural overrides. Does NOT touch --color-* or --brand-*.
+ * Slightly rounded corners, medium shadows, balanced spacing, standard typography. */
+
+:root {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.025em;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}