@phcdevworks/spectre-ui 0.1.0 → 0.2.1

package/dist/tailwind/index.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+// src/tailwind/theme.ts
+function createSpectreTailwindTheme(options) {
+  const mergedTokens = {
+    ...options.tokens ?? {},
+    ...options.overrides ?? {}
+  };
+  const t = mergedTokens;
+  const colors = t.colors ?? t.color ?? t.palette ?? {};
+  const spacing = t.spacing ?? t.space ?? {};
+  const borderRadius = t.radii ?? t.radius ?? {};
+  const boxShadow = t.shadows ?? t.shadow ?? {};
+  const fontFamily = t.typography?.families ?? t.fonts ?? {};
+  const fontSize = t.typography?.scale ?? t.fontSize ?? {};
+  const theme = {
+    colors,
+    spacing,
+    borderRadius,
+    boxShadow,
+    fontFamily,
+    fontSize
+  };
+  return { theme };
+}
+
+// src/tailwind/preset.ts
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var deepMerge = (base, overrides) => {
+  if (!overrides) return base;
+  const result = { ...base };
+  for (const [key, overrideValue] of Object.entries(overrides)) {
+    const baseValue = result[key];
+    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
+};
+var cachedTokens = null;
+var getRequire = () => {
+  try {
+    return Function("return typeof require !== 'undefined' ? require : null")();
+  } catch {
+    return null;
+  }
+};
+var resolveTokens = (tokens) => {
+  if (tokens) return tokens;
+  if (cachedTokens) return cachedTokens;
+  const req = getRequire();
+  if (!req) {
+    throw new Error(
+      "[spectre-ui] Unable to load spectre tokens; pass tokens to createSpectreTailwindPreset."
+    );
+  }
+  const mod = req("../tokens");
+  cachedTokens = mod.spectreTokens;
+  return cachedTokens;
+};
+var createSpectreTailwindPreset = (options = {}) => {
+  const tokens = resolveTokens(options.tokens);
+  const { theme } = createSpectreTailwindTheme({ tokens });
+  const mergedTheme = deepMerge(
+    theme,
+    options.themeOverrides
+  );
+  const basePreset = {
+    content: [],
+    theme: mergedTheme
+    // theme is guaranteed non-undefined now
+  };
+  return deepMerge(
+    basePreset,
+    options.presetOverrides
+  );
+};
+
+exports.createSpectreTailwindPreset = createSpectreTailwindPreset;
+exports.createSpectreTailwindTheme = createSpectreTailwindTheme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/tailwind/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tailwind/theme.ts","../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"index.cjs","sourcesContent":["import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindTheme;\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\n/**\n * Minimal, type-safe theme mapper.\n * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).\n */\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions\n): SpectreTailwindTheme {\n  const mergedTokens = {\n    ...(options.tokens ?? ({} as SpectreTokens)),\n    ...(options.overrides ?? {}),\n  } as SpectreTokens;\n\n  // We keep mapping shallow + permissive because token shapes will evolve.\n  // Tailwind accepts nested objects of strings for colors.\n  const t: any = mergedTokens;\n\n  const colors = (t.colors ?? t.color ?? t.palette ?? {}) as Record<string, any>;\n  const spacing = (t.spacing ?? t.space ?? {}) as Record<string, any>;\n  const borderRadius = (t.radii ?? t.radius ?? {}) as Record<string, any>;\n  const boxShadow = (t.shadows ?? t.shadow ?? {}) as Record<string, any>;\n  const fontFamily = (t.typography?.families ?? t.fonts ?? {}) as Record<string, any>;\n  const fontSize = (t.typography?.scale ?? t.fontSize ?? {}) as Record<string, any>;\n\n  const theme: TailwindTheme = {\n    colors: colors as any,\n    spacing: spacing as any,\n    borderRadius: borderRadius as any,\n    boxShadow: boxShadow as any,\n    fontFamily: fontFamily as any,\n    fontSize: fontSize as any,\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface CreateSpectreTailwindPresetOptions {\n  tokens?: SpectreTokens;\n  themeOverrides?: TailwindTheme;\n  presetOverrides?: TailwindConfig;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\n// Deep-merge plain objects only; arrays and primitives replace by override.\nconst deepMerge = <T extends Record<string, unknown>>(\n  base: T,\n  overrides?: Record<string, unknown>\n): T => {\n  if (!overrides) return base;\n\n  const result: Record<string, unknown> = { ...base };\n\n  for (const [key, overrideValue] of Object.entries(overrides)) {\n    const baseValue = result[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n\n  return result as T;\n};\n\nlet cachedTokens: SpectreTokens | null = null;\n\nconst getRequire = (): ((id: string) => unknown) | null => {\n  try {\n    // eslint-disable-next-line no-new-func\n    return Function(\"return typeof require !== 'undefined' ? require : null\")() as\n      | ((id: string) => unknown)\n      | null;\n  } catch {\n    return null;\n  }\n};\n\nconst resolveTokens = (tokens?: SpectreTokens): SpectreTokens => {\n  if (tokens) return tokens;\n  if (cachedTokens) return cachedTokens;\n\n  const req = getRequire();\n  if (!req) {\n    throw new Error(\n      \"[spectre-ui] Unable to load spectre tokens; pass tokens to createSpectreTailwindPreset.\"\n    );\n  }\n\n  const mod = req(\"../tokens\") as { spectreTokens: SpectreTokens };\n  cachedTokens = mod.spectreTokens;\n  return cachedTokens;\n};\n\nexport const createSpectreTailwindPreset = (\n  options: CreateSpectreTailwindPresetOptions = {}\n): TailwindConfig => {\n  const tokens = resolveTokens(options.tokens);\n  const { theme } = createSpectreTailwindTheme({ tokens });\n  const mergedTheme = deepMerge(\n    theme as Record<string, unknown>,\n    options.themeOverrides as Record<string, unknown> | undefined\n  );\n\n  const basePreset: TailwindConfig = {\n    content: [],\n    theme: mergedTheme, // theme is guaranteed non-undefined now\n  };\n\n  return deepMerge(\n    basePreset as Record<string, unknown>,\n    options.presetOverrides as Record<string, unknown> | undefined\n  ) as TailwindConfig;\n};\n"]}

package/dist/tailwind/index.d.cts

@@ -0,0 +1,26 @@
+import { Config } from 'tailwindcss';
+import { SpectreTokens } from '@phcdevworks/spectre-tokens';
+
+type TailwindTheme$1 = NonNullable<Config["theme"]>;
+interface SpectreTailwindTheme {
+    theme: TailwindTheme$1;
+}
+interface CreateSpectreTailwindThemeOptions {
+    tokens: SpectreTokens;
+    overrides?: Partial<SpectreTokens>;
+}
+/**
+ * Minimal, type-safe theme mapper.
+ * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).
+ */
+declare function createSpectreTailwindTheme(options: CreateSpectreTailwindThemeOptions): SpectreTailwindTheme;
+
+type TailwindTheme = NonNullable<Config["theme"]>;
+interface CreateSpectreTailwindPresetOptions {
+    tokens?: SpectreTokens;
+    themeOverrides?: TailwindTheme;
+    presetOverrides?: Config;
+}
+declare const createSpectreTailwindPreset: (options?: CreateSpectreTailwindPresetOptions) => Config;
+
+export { type CreateSpectreTailwindThemeOptions, type SpectreTailwindTheme, createSpectreTailwindPreset, createSpectreTailwindTheme };

package/dist/tailwind/index.d.ts

@@ -0,0 +1,26 @@
+import { Config } from 'tailwindcss';
+import { SpectreTokens } from '@phcdevworks/spectre-tokens';
+
+type TailwindTheme$1 = NonNullable<Config["theme"]>;
+interface SpectreTailwindTheme {
+    theme: TailwindTheme$1;
+}
+interface CreateSpectreTailwindThemeOptions {
+    tokens: SpectreTokens;
+    overrides?: Partial<SpectreTokens>;
+}
+/**
+ * Minimal, type-safe theme mapper.
+ * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).
+ */
+declare function createSpectreTailwindTheme(options: CreateSpectreTailwindThemeOptions): SpectreTailwindTheme;
+
+type TailwindTheme = NonNullable<Config["theme"]>;
+interface CreateSpectreTailwindPresetOptions {
+    tokens?: SpectreTokens;
+    themeOverrides?: TailwindTheme;
+    presetOverrides?: Config;
+}
+declare const createSpectreTailwindPreset: (options?: CreateSpectreTailwindPresetOptions) => Config;
+
+export { type CreateSpectreTailwindThemeOptions, type SpectreTailwindTheme, createSpectreTailwindPreset, createSpectreTailwindTheme };

package/dist/tailwind/index.js

@@ -0,0 +1,81 @@
+// src/tailwind/theme.ts
+function createSpectreTailwindTheme(options) {
+  const mergedTokens = {
+    ...options.tokens ?? {},
+    ...options.overrides ?? {}
+  };
+  const t = mergedTokens;
+  const colors = t.colors ?? t.color ?? t.palette ?? {};
+  const spacing = t.spacing ?? t.space ?? {};
+  const borderRadius = t.radii ?? t.radius ?? {};
+  const boxShadow = t.shadows ?? t.shadow ?? {};
+  const fontFamily = t.typography?.families ?? t.fonts ?? {};
+  const fontSize = t.typography?.scale ?? t.fontSize ?? {};
+  const theme = {
+    colors,
+    spacing,
+    borderRadius,
+    boxShadow,
+    fontFamily,
+    fontSize
+  };
+  return { theme };
+}
+
+// src/tailwind/preset.ts
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var deepMerge = (base, overrides) => {
+  if (!overrides) return base;
+  const result = { ...base };
+  for (const [key, overrideValue] of Object.entries(overrides)) {
+    const baseValue = result[key];
+    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
+};
+var cachedTokens = null;
+var getRequire = () => {
+  try {
+    return Function("return typeof require !== 'undefined' ? require : null")();
+  } catch {
+    return null;
+  }
+};
+var resolveTokens = (tokens) => {
+  if (tokens) return tokens;
+  if (cachedTokens) return cachedTokens;
+  const req = getRequire();
+  if (!req) {
+    throw new Error(
+      "[spectre-ui] Unable to load spectre tokens; pass tokens to createSpectreTailwindPreset."
+    );
+  }
+  const mod = req("../tokens");
+  cachedTokens = mod.spectreTokens;
+  return cachedTokens;
+};
+var createSpectreTailwindPreset = (options = {}) => {
+  const tokens = resolveTokens(options.tokens);
+  const { theme } = createSpectreTailwindTheme({ tokens });
+  const mergedTheme = deepMerge(
+    theme,
+    options.themeOverrides
+  );
+  const basePreset = {
+    content: [],
+    theme: mergedTheme
+    // theme is guaranteed non-undefined now
+  };
+  return deepMerge(
+    basePreset,
+    options.presetOverrides
+  );
+};
+
+export { createSpectreTailwindPreset, createSpectreTailwindTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tailwind/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tailwind/theme.ts","../../src/tailwind/preset.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindTheme;\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\n/**\n * Minimal, type-safe theme mapper.\n * Important: theme is NEVER undefined (fixes exactOptionalPropertyTypes + DTS).\n */\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions\n): SpectreTailwindTheme {\n  const mergedTokens = {\n    ...(options.tokens ?? ({} as SpectreTokens)),\n    ...(options.overrides ?? {}),\n  } as SpectreTokens;\n\n  // We keep mapping shallow + permissive because token shapes will evolve.\n  // Tailwind accepts nested objects of strings for colors.\n  const t: any = mergedTokens;\n\n  const colors = (t.colors ?? t.color ?? t.palette ?? {}) as Record<string, any>;\n  const spacing = (t.spacing ?? t.space ?? {}) as Record<string, any>;\n  const borderRadius = (t.radii ?? t.radius ?? {}) as Record<string, any>;\n  const boxShadow = (t.shadows ?? t.shadow ?? {}) as Record<string, any>;\n  const fontFamily = (t.typography?.families ?? t.fonts ?? {}) as Record<string, any>;\n  const fontSize = (t.typography?.scale ?? t.fontSize ?? {}) as Record<string, any>;\n\n  const theme: TailwindTheme = {\n    colors: colors as any,\n    spacing: spacing as any,\n    borderRadius: borderRadius as any,\n    boxShadow: boxShadow as any,\n    fontFamily: fontFamily as any,\n    fontSize: fontSize as any,\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport type { SpectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\ntype TailwindTheme = NonNullable<TailwindConfig[\"theme\"]>;\n\nexport interface CreateSpectreTailwindPresetOptions {\n  tokens?: SpectreTokens;\n  themeOverrides?: TailwindTheme;\n  presetOverrides?: TailwindConfig;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> =>\n  typeof value === \"object\" && value !== null && !Array.isArray(value);\n\n// Deep-merge plain objects only; arrays and primitives replace by override.\nconst deepMerge = <T extends Record<string, unknown>>(\n  base: T,\n  overrides?: Record<string, unknown>\n): T => {\n  if (!overrides) return base;\n\n  const result: Record<string, unknown> = { ...base };\n\n  for (const [key, overrideValue] of Object.entries(overrides)) {\n    const baseValue = result[key];\n    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {\n      result[key] = deepMerge(baseValue, overrideValue);\n    } else {\n      result[key] = overrideValue;\n    }\n  }\n\n  return result as T;\n};\n\nlet cachedTokens: SpectreTokens | null = null;\n\nconst getRequire = (): ((id: string) => unknown) | null => {\n  try {\n    // eslint-disable-next-line no-new-func\n    return Function(\"return typeof require !== 'undefined' ? require : null\")() as\n      | ((id: string) => unknown)\n      | null;\n  } catch {\n    return null;\n  }\n};\n\nconst resolveTokens = (tokens?: SpectreTokens): SpectreTokens => {\n  if (tokens) return tokens;\n  if (cachedTokens) return cachedTokens;\n\n  const req = getRequire();\n  if (!req) {\n    throw new Error(\n      \"[spectre-ui] Unable to load spectre tokens; pass tokens to createSpectreTailwindPreset.\"\n    );\n  }\n\n  const mod = req(\"../tokens\") as { spectreTokens: SpectreTokens };\n  cachedTokens = mod.spectreTokens;\n  return cachedTokens;\n};\n\nexport const createSpectreTailwindPreset = (\n  options: CreateSpectreTailwindPresetOptions = {}\n): TailwindConfig => {\n  const tokens = resolveTokens(options.tokens);\n  const { theme } = createSpectreTailwindTheme({ tokens });\n  const mergedTheme = deepMerge(\n    theme as Record<string, unknown>,\n    options.themeOverrides as Record<string, unknown> | undefined\n  );\n\n  const basePreset: TailwindConfig = {\n    content: [],\n    theme: mergedTheme, // theme is guaranteed non-undefined now\n  };\n\n  return deepMerge(\n    basePreset as Record<string, unknown>,\n    options.presetOverrides as Record<string, unknown> | undefined\n  ) as TailwindConfig;\n};\n"]}

package/dist/utilities.css

@@ -2,29 +2,28 @@
   .sp-stack {
     display: flex;
     flex-direction: column;
-    gap: var(--sp-space-md, 1rem);
+    gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
   }
 
   .sp-hstack {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--sp-space-md, 1rem);
+    gap: var(--sp-layout-stack-gap-md, var(--sp-space-md, 1rem));
   }
 
   .sp-container {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
-    padding-left: var(--sp-space-md, 1rem);
-    padding-right: var(--sp-space-md, 1rem);
-    max-width: var(--sp-container-max-width,
-        var(--sp-breakpoint-2xl, 72rem));
+    padding-left: var(--sp-layout-container-padding-inline-md, var(--sp-space-md, 1rem));
+    padding-right: var(--sp-layout-container-padding-inline-md, var(--sp-space-md, 1rem));
+    max-width: var(--sp-container-max-width, 72rem);
   }
 
   .sp-section {
-    padding-top: var(--sp-space-2xl, 3rem);
-    padding-bottom: var(--sp-space-2xl, 3rem);
+    padding-top: var(--sp-layout-section-padding-md, var(--sp-space-2xl, 3rem));
+    padding-bottom: var(--sp-layout-section-padding-md, var(--sp-space-2xl, 3rem));
   }
 
   .sp-shadow-soft {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phcdevworks/spectre-ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Framework-agnostic UI layer for the Spectre design system. Provides base CSS, component classes, utilities, and a Tailwind preset powered by @phcdevworks/spectre-tokens.",
   "keywords": [
     "phcdevworks",
@@ -47,6 +47,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./tailwind": {
+      "types": "./dist/tailwind/index.d.ts",
+      "import": "./dist/tailwind/index.js",
+      "require": "./dist/tailwind/index.cjs"
+    },
     "./index.css": "./dist/index.css",
     "./base.css": "./dist/base.css",
     "./components.css": "./dist/components.css",
@@ -71,7 +76,7 @@
     "tailwindcss": "^3.4.0 || ^4.0.0"
   },
   "dependencies": {
-    "@phcdevworks/spectre-tokens": "^0.1.0"
+    "@phcdevworks/spectre-tokens": "^0.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",