@phcdevworks/spectre-ui 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -1,69 +1,103 @@
-import { Tokens, TailwindTheme, AccessibilityTokens, AnimationEntry, ButtonStateTokens, FormStateTokens, TokenScale, TransitionTokens, TypographyTokens } from '@phcdevworks/spectre-tokens';
 import { Config } from 'tailwindcss';
+import { SpectreTokens } from '@phcdevworks/spectre-tokens';
+export { SpectreTokens, tokens as spectreTokens } from '@phcdevworks/spectre-tokens';
 
-declare const spectreTokens: Tokens;
-declare const spectreTailwindTheme: TailwindTheme;
-declare const spectreTailwindPreset: {
-    theme: TailwindTheme;
+declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
+declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
+declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
+declare const spectreStyles: {
+    base: string;
+    components: string;
+    utilities: string;
 };
-type SpectreTokens = Tokens;
-type SpectreTailwindTheme = TailwindTheme;
-type SpectreTokenScale = TokenScale;
-type SpectreTransitionTokens = TransitionTokens;
-type SpectreTypographyTokens = TypographyTokens;
-type SpectreAccessibilityTokens = AccessibilityTokens;
-type SpectreAnimationEntry = AnimationEntry;
-type SpectreButtonStateTokens = ButtonStateTokens;
-type SpectreFormStateTokens = FormStateTokens;
-interface SpectreCssVariableOptions {
-    selector?: string;
-    prefix?: string;
-}
-type SpectreCssVariableMap = Record<string, string>;
-declare const createSpectreTailwindTheme: (source?: SpectreTokens) => SpectreTailwindTheme;
-declare const createSpectreCssVariableMap: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => SpectreCssVariableMap;
-declare const generateSpectreCssVariables: (source?: SpectreTokens, options?: SpectreCssVariableOptions) => string;
 
 declare const spectrePreset: Config;
 
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';
-type ButtonSize = 'sm' | 'md' | 'lg';
-type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
+interface SpectreTailwindTheme {
+    theme: Config['theme'];
+}
+interface CreateSpectreTailwindThemeOptions {
+    tokens: SpectreTokens;
+    overrides?: Partial<SpectreTokens>;
+}
+declare function createSpectreTailwindTheme(options: CreateSpectreTailwindThemeOptions): SpectreTailwindTheme;
 
-interface GetButtonClassesOptions {
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonTone = 'default' | 'success' | 'warning' | 'danger';
+interface ButtonRecipeOptions {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    state?: ButtonState;
-    extraClasses?: string;
-}
-declare const getButtonClasses: ({ variant, size, state, extraClasses, }?: GetButtonClassesOptions) => string;
-
-type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';
-
-interface GetInputClassesOptions {
-    state?: InputState;
-    extraClasses?: string;
+    tone?: ButtonTone;
+    fullWidth?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    iconOnly?: boolean;
 }
-declare const getInputClasses: ({ state, extraClasses, }?: GetInputClassesOptions) => string;
-
-type CardVariant = 'base' | 'elevated' | 'flat';
+/**
+ * Generate Spectre button classes.
+ *
+ * Rules:
+ * - Base: "sp-btn"
+ * - Variant: "sp-btn--primary" / "sp-btn--secondary" / "sp-btn--ghost" / "sp-btn--danger"
+ *   - default variant is "primary"
+ * - Size: "sp-btn--sm" / "sp-btn--md" / "sp-btn--lg"
+ *   - default size is "md"
+ * - Tone: "sp-btn--tone-success" / "sp-btn--tone-warning" / "sp-btn--tone-danger"
+ *   - default tone is "default" (no tone class)
+ * - fullWidth: add "sp-btn--full"
+ * - loading: add "sp-btn--loading"
+ * - disabled: add "sp-btn--disabled"
+ * - iconOnly: add "sp-btn--icon"
+ *
+ * Must return a single space-joined, trimmed class string.
+ */
+declare function getButtonClasses(opts?: ButtonRecipeOptions): string;
 
-interface GetCardClassesOptions {
+type CardVariant = 'elevated' | 'outline' | 'ghost';
+interface CardRecipeOptions {
     variant?: CardVariant;
-    extraClasses?: string;
+    interactive?: boolean;
+    padded?: boolean;
+    fullHeight?: boolean;
 }
-declare const getCardClasses: ({ variant, extraClasses, }?: GetCardClassesOptions) => string;
+/**
+ * Generate Spectre card classes.
+ *
+ * Rules:
+ * - Base class: "sp-card"
+ * - Variant (default: elevated):
+ *   - "sp-card--elevated"
+ *   - "sp-card--outline"
+ *   - "sp-card--ghost"
+ * - interactive: add "sp-card--interactive"
+ * - padded: add "sp-card--padded"
+ * - fullHeight: add "sp-card--full"
+ */
+declare function getCardClasses(opts?: CardRecipeOptions): string;
 
-declare const spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
-declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
-declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
+type InputState = 'default' | 'error' | 'success';
+type InputSize = 'sm' | 'md' | 'lg';
+interface InputRecipeOptions {
+    state?: InputState;
+    size?: InputSize;
+    fullWidth?: boolean;
+}
 /**
- * Structured helper for consumers that prefer namespaced CSS entry points.
+ * Generate Spectre input classes.
+ *
+ * Rules:
+ * - Base class: "sp-input"
+ * - State:
+ *   - "default" => no state modifier
+ *   - "error"   => "sp-input--error"
+ *   - "success" => "sp-input--success"
+ * - Size (default: md):
+ *   - "sp-input--sm"
+ *   - "sp-input--md"
+ *   - "sp-input--lg"
+ * - fullWidth: add "sp-input--full"
  */
-declare const spectreStyles: {
-    readonly base: "@phcdevworks/spectre-ui/dist/base.css";
-    readonly components: "@phcdevworks/spectre-ui/dist/components.css";
-    readonly utilities: "@phcdevworks/spectre-ui/dist/utilities.css";
-};
+declare function getInputClasses(opts?: InputRecipeOptions): string;
 
-export { type ButtonSize, type ButtonState, type ButtonVariant, type CardVariant, type GetButtonClassesOptions, type GetCardClassesOptions, type GetInputClassesOptions, type InputState, type SpectreAccessibilityTokens, type SpectreAnimationEntry, type SpectreButtonStateTokens, type SpectreFormStateTokens, type SpectreTailwindTheme, type SpectreTokenScale, type SpectreTokens, type SpectreTransitionTokens, type SpectreTypographyTokens, createSpectreCssVariableMap, createSpectreTailwindTheme, generateSpectreCssVariables, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreTailwindPreset, spectreTailwindTheme, spectreTokens, spectreUtilitiesStylesPath };
+export { type ButtonRecipeOptions, type ButtonSize, type ButtonTone, type ButtonVariant, type CardRecipeOptions, type CardVariant, type CreateSpectreTailwindThemeOptions, type InputRecipeOptions, type InputSize, type InputState, type SpectreTailwindTheme, createSpectreTailwindTheme, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreUtilitiesStylesPath };

package/dist/index.js

@@ -1,163 +1,232 @@
-import tokens, { tailwindTheme, createCssVariableMap, createTailwindTheme, generateCssVariables, tailwindPreset } from '@phcdevworks/spectre-tokens';
+import plugin from 'tailwindcss/plugin';
+import { tokens } from '@phcdevworks/spectre-tokens';
+export { tokens as spectreTokens } from '@phcdevworks/spectre-tokens';
 
-// src/tokens.ts
-var spectreTokens = tokens;
-var spectreTailwindTheme = tailwindTheme;
-var spectreTailwindPreset = tailwindPreset;
-var createSpectreTailwindTheme = (source = spectreTokens) => createTailwindTheme(source);
-var createSpectreCssVariableMap = (source = spectreTokens, options) => createCssVariableMap(source, options);
-var generateSpectreCssVariables = (source = spectreTokens, options) => generateCssVariables(source, options);
+// src/css-constants.ts
+var spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
+var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
+var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
+var spectreStyles = {
+  base: spectreBaseStylesPath,
+  components: spectreComponentsStylesPath,
+  utilities: spectreUtilitiesStylesPath
+};
 
-// src/tailwind/preset.ts
-var readScaleValue = (scale, key) => {
-  const value = scale[key];
-  if (value == null) {
-    throw new Error(`Missing Spectre token for key: ${String(key)}`);
+// src/tailwind/theme.ts
+function createSpectreTailwindTheme(options) {
+  const { tokens, overrides } = options;
+  const mergedTokens = {
+    ...tokens,
+    ...overrides ?? {}
+  };
+  const mergedColors = mergedTokens.colors ?? {};
+  const attachSemanticColors = (existing, semantic) => {
+    if (!semantic || Object.keys(semantic).length === 0) {
+      return Object.keys(existing).length > 0 ? existing : void 0;
+    }
+    return {
+      ...existing,
+      ...semantic
+    };
+  };
+  const themeColors = {
+    ...mergedColors
+  };
+  const surfaceColors = attachSemanticColors(
+    mergedColors.surface ?? {},
+    mergedTokens.surface
+  );
+  if (surfaceColors) {
+    themeColors.surface = surfaceColors;
   }
-  return value;
-};
-var readColorValue = (scale, shade) => {
-  const scaleValue = spectreTokens.colors[scale];
-  if (!scaleValue) {
-    throw new Error(`Missing Spectre color scale: ${scale}`);
+  const textColors = attachSemanticColors(
+    mergedColors.text ?? {},
+    mergedTokens.text
+  );
+  if (textColors) {
+    themeColors.text = textColors;
   }
-  const value = scaleValue[shade];
-  if (!value) {
-    throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);
+  const componentColors = attachSemanticColors(
+    mergedColors.component ?? {},
+    mergedTokens.component
+  );
+  if (componentColors) {
+    themeColors.component = componentColors;
   }
-  return value;
-};
-var componentRadii = {
-  btn: readScaleValue(spectreTokens.radii, "md"),
-  input: readScaleValue(spectreTokens.radii, "md"),
-  card: readScaleValue(spectreTokens.radii, "lg"),
-  pill: readScaleValue(spectreTokens.radii, "pill")
-};
-var componentShadows = {
-  soft: readScaleValue(spectreTokens.shadows, "md"),
-  card: readScaleValue(spectreTokens.shadows, "lg")
-};
-var spacingShortcuts = {
-  gutter: readScaleValue(spectreTokens.spacing, "lg"),
-  section: readScaleValue(spectreTokens.spacing, "2xl"),
-  stack: readScaleValue(spectreTokens.spacing, "md")
-};
-var componentColors = {
-  surface: {
-    DEFAULT: readColorValue("neutral", "50"),
-    muted: readColorValue("neutral", "100"),
-    strong: readColorValue("neutral", "900")
-  },
-  intent: {
-    info: readColorValue("info", "500"),
-    success: readColorValue("success", "500"),
-    warning: readColorValue("warning", "500"),
-    danger: readColorValue("error", "500")
+  const theme2 = {
+    // Safely map core token groups into Tailwind theme fields.
+    // Use `as any` where necessary to avoid overfitting types right now.
+    colors: themeColors,
+    spacing: mergedTokens.spacing ?? {},
+    borderRadius: mergedTokens.radii ?? {},
+    boxShadow: mergedTokens.shadows ?? {},
+    fontFamily: mergedTokens.typography?.families ?? {}
+  };
+  return { theme: theme2 };
+}
+
+// src/tailwind/preset.ts
+var { theme } = createSpectreTailwindTheme({
+  tokens: tokens
+});
+var resolveTokenValue = (value, fallback) => {
+  if (typeof value === "string") {
+    return value;
   }
-};
-var spectrePreset = {
-  content: [],
-  theme: {
-    ...spectreTailwindTheme,
-    extend: {
-      borderRadius: componentRadii,
-      boxShadow: componentShadows,
-      spacing: spacingShortcuts,
-      colors: componentColors
+  if (value && typeof value === "object") {
+    const maybeDefault = value.default;
+    if (typeof maybeDefault === "string") {
+      return maybeDefault;
+    }
+    const firstEntry = Object.values(value).find(
+      (entry) => typeof entry === "string"
+    );
+    if (typeof firstEntry === "string") {
+      return firstEntry;
     }
   }
+  return fallback;
 };
-
-// src/components/button.config.ts
-var buttonConfig = {
-  baseClass: "sp-btn",
-  variants: {
-    primary: "sp-btn-primary",
-    secondary: "sp-btn-secondary",
-    ghost: "sp-btn-ghost",
-    success: "sp-btn-success",
-    danger: "sp-btn-danger"
-  },
-  sizes: {
-    sm: "sp-btn-sm",
-    md: "sp-btn-md",
-    lg: "sp-btn-lg"
-  },
-  states: {
-    default: "",
-    hover: "sp-btn-hover",
-    active: "sp-btn-active",
-    disabled: "sp-btn-disabled"
+var semanticUtilities = plugin(({ addUtilities }) => {
+  const tokens$1 = tokens;
+  const neutralScale = tokens$1?.colors?.neutral ?? {};
+  const formDefault = tokens$1?.forms?.default ?? {};
+  const surfaceTokens = tokens$1?.surface ?? {};
+  const textTokens = tokens$1?.text ?? {};
+  const surfacePage = resolveTokenValue(
+    surfaceTokens.page,
+    neutralScale["50"]
+  );
+  const surfaceCard = resolveTokenValue(
+    surfaceTokens.card,
+    formDefault.bg ?? surfacePage ?? neutralScale["50"]
+  );
+  const surfaceInput = resolveTokenValue(
+    surfaceTokens.input,
+    formDefault.bg ?? surfaceCard ?? surfacePage
+  );
+  const textOnPage = resolveTokenValue(
+    textTokens?.on?.page ?? textTokens?.onPage,
+    neutralScale["900"] ?? formDefault.text
+  );
+  const textOnSurface = resolveTokenValue(
+    textTokens?.on?.surface ?? textTokens?.onSurface,
+    formDefault.text ?? textOnPage ?? neutralScale["900"]
+  );
+  const utilities = {};
+  if (surfacePage) {
+    utilities[".bg-surface-page"] = { backgroundColor: surfacePage };
   }
-};
-
-// src/recipes/button.ts
-var getButtonClasses = ({
-  variant = "primary",
-  size = "md",
-  state = "default",
-  extraClasses = ""
-} = {}) => {
-  const classes = [
-    buttonConfig.baseClass,
-    buttonConfig.variants[variant],
-    buttonConfig.sizes[size],
-    buttonConfig.states[state],
-    extraClasses
-  ].filter(Boolean);
-  return classes.join(" ").trim();
-};
-
-// src/components/input.config.ts
-var inputConfig = {
-  baseClass: "sp-input",
-  states: {
-    default: "",
-    focus: "sp-input-focus",
-    invalid: "sp-input-error",
-    valid: "sp-input-success",
-    disabled: "sp-input-disabled"
+  if (surfaceCard) {
+    utilities[".bg-surface-card"] = { backgroundColor: surfaceCard };
   }
+  if (surfaceInput) {
+    utilities[".bg-surface-input"] = { backgroundColor: surfaceInput };
+  }
+  if (textOnPage) {
+    utilities[".text-on-page"] = { color: textOnPage };
+  }
+  if (textOnSurface) {
+    utilities[".text-on-surface"] = { color: textOnSurface };
+  }
+  addUtilities(utilities);
+});
+var spectrePreset = {
+  // Required for Tailwind's Config type with exactOptionalPropertyTypes
+  content: [],
+  theme: theme ?? {},
+  plugins: [semanticUtilities]
 };
 
-// src/recipes/input.ts
-var getInputClasses = ({
-  state = "default",
-  extraClasses = ""
-} = {}) => {
-  const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);
-  return classes.join(" ").trim();
-};
-
-// src/components/card.config.ts
-var cardConfig = {
-  baseClass: "sp-card",
-  variants: {
-    base: "",
-    elevated: "sp-card-elevated",
-    flat: "sp-card-flat"
+// src/recipes/button.ts
+function getButtonClasses(opts = {}) {
+  const {
+    variant = "primary",
+    size = "md",
+    tone = "default",
+    fullWidth = false,
+    loading = false,
+    disabled = false,
+    iconOnly = false
+  } = opts;
+  const classes = [];
+  classes.push("sp-btn");
+  const variantMap = {
+    primary: "sp-btn--primary",
+    secondary: "sp-btn--secondary",
+    ghost: "sp-btn--ghost",
+    danger: "sp-btn--danger"
+  };
+  classes.push(variantMap[variant]);
+  const sizeMap = {
+    sm: "sp-btn--sm",
+    md: "sp-btn--md",
+    lg: "sp-btn--lg"
+  };
+  classes.push(sizeMap[size]);
+  if (tone !== "default") {
+    const toneMap = {
+      success: "sp-btn--tone-success",
+      warning: "sp-btn--tone-warning",
+      danger: "sp-btn--tone-danger"
+    };
+    classes.push(toneMap[tone]);
   }
-};
+  if (fullWidth) classes.push("sp-btn--full");
+  if (loading) classes.push("sp-btn--loading");
+  if (disabled) classes.push("sp-btn--disabled");
+  if (iconOnly) classes.push("sp-btn--icon");
+  return classes.filter(Boolean).join(" ").trim();
+}
 
 // src/recipes/card.ts
-var getCardClasses = ({
-  variant = "base",
-  extraClasses = ""
-} = {}) => {
-  const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);
-  return classes.join(" ").trim();
-};
+function getCardClasses(opts = {}) {
+  const {
+    variant = "elevated",
+    interactive = false,
+    padded = false,
+    fullHeight = false
+  } = opts;
+  const classes = [];
+  classes.push("sp-card");
+  const variantMap = {
+    elevated: "sp-card--elevated",
+    outline: "sp-card--outline",
+    ghost: "sp-card--ghost"
+  };
+  classes.push(variantMap[variant]);
+  if (interactive) classes.push("sp-card--interactive");
+  if (padded) classes.push("sp-card--padded");
+  if (fullHeight) classes.push("sp-card--full");
+  return classes.filter(Boolean).join(" ").trim();
+}
 
-// src/index.ts
-var spectreBaseStylesPath = "@phcdevworks/spectre-ui/dist/base.css";
-var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/dist/components.css";
-var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/dist/utilities.css";
-var spectreStyles = {
-  base: spectreBaseStylesPath,
-  components: spectreComponentsStylesPath,
-  utilities: spectreUtilitiesStylesPath
-};
+// src/recipes/input.ts
+function getInputClasses(opts = {}) {
+  const {
+    state = "default",
+    size = "md",
+    fullWidth = false
+  } = opts;
+  const classes = [];
+  classes.push("sp-input");
+  if (state === "error") {
+    classes.push("sp-input--error");
+  } else if (state === "success") {
+    classes.push("sp-input--success");
+  }
+  const sizeMap = {
+    sm: "sp-input--sm",
+    md: "sp-input--md",
+    lg: "sp-input--lg"
+  };
+  classes.push(sizeMap[size]);
+  if (fullWidth) {
+    classes.push("sp-input--full");
+  }
+  return classes.filter(Boolean).join(" ").trim();
+}
 
-export { createSpectreCssVariableMap, createSpectreTailwindTheme, generateSpectreCssVariables, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreTailwindPreset, spectreTailwindTheme, spectreTokens, spectreUtilitiesStylesPath };
+export { createSpectreTailwindTheme, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreUtilitiesStylesPath };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tokens.ts","../src/tailwind/preset.ts","../src/components/button.config.ts","../src/recipes/button.ts","../src/components/input.config.ts","../src/recipes/input.ts","../src/components/card.config.ts","../src/recipes/card.ts","../src/index.ts"],"names":["baseCreateTailwindTheme","baseCreateCssVariableMap","baseGenerateCssVariables"],"mappings":"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","file":"index.js","sourcesContent":["import tokens, {\n  createCssVariableMap as baseCreateCssVariableMap,\n  createTailwindTheme as baseCreateTailwindTheme,\n  generateCssVariables as baseGenerateCssVariables,\n  tailwindPreset,\n  tailwindTheme,\n  type AccessibilityTokens,\n  type AnimationEntry,\n  type ButtonStateTokens,\n  type FormStateTokens,\n  type TailwindTheme,\n  type TokenScale,\n  type Tokens,\n  type TransitionTokens,\n  type TypographyTokens,\n} from '@phcdevworks/spectre-tokens';\n\nexport const spectreTokens = tokens;\nexport const spectreTailwindTheme = tailwindTheme;\nexport const spectreTailwindPreset = tailwindPreset;\n\nexport type SpectreTokens = Tokens;\nexport type SpectreTailwindTheme = TailwindTheme;\nexport type SpectreTokenScale = TokenScale;\nexport type SpectreTransitionTokens = TransitionTokens;\nexport type SpectreTypographyTokens = TypographyTokens;\nexport type SpectreAccessibilityTokens = AccessibilityTokens;\nexport type SpectreAnimationEntry = AnimationEntry;\nexport type SpectreButtonStateTokens = ButtonStateTokens;\nexport type SpectreFormStateTokens = FormStateTokens;\n\nexport interface SpectreCssVariableOptions {\n  selector?: string;\n  prefix?: string;\n}\n\nexport type SpectreCssVariableMap = Record<string, string>;\n\nexport const createSpectreTailwindTheme = (\n  source: SpectreTokens = spectreTokens,\n): SpectreTailwindTheme => baseCreateTailwindTheme(source);\n\nexport const createSpectreCssVariableMap = (\n  source: SpectreTokens = spectreTokens,\n  options?: SpectreCssVariableOptions,\n): SpectreCssVariableMap => baseCreateCssVariableMap(source, options);\n\nexport const generateSpectreCssVariables = (\n  source: SpectreTokens = spectreTokens,\n  options?: SpectreCssVariableOptions,\n): string => baseGenerateCssVariables(source, options);\n","import type { Config } from 'tailwindcss';\nimport { spectreTailwindTheme, spectreTokens } from '../tokens';\n\nconst readScaleValue = <T extends Record<string, string>>(scale: T, key: keyof T): string => {\n  const value = scale[key];\n  if (value == null) {\n    throw new Error(`Missing Spectre token for key: ${String(key)}`);\n  }\n\n  return value;\n};\n\nconst readColorValue = (scale: keyof typeof spectreTokens.colors, shade: keyof Record<string, string>): string => {\n  const scaleValue = spectreTokens.colors[scale];\n  if (!scaleValue) {\n    throw new Error(`Missing Spectre color scale: ${scale as string}`);\n  }\n\n  const value = scaleValue[shade as string];\n  if (!value) {\n    throw new Error(`Missing shade ${String(shade)} for ${String(scale)}`);\n  }\n\n  return value;\n};\n\nconst componentRadii = {\n  btn: readScaleValue(spectreTokens.radii, 'md'),\n  input: readScaleValue(spectreTokens.radii, 'md'),\n  card: readScaleValue(spectreTokens.radii, 'lg'),\n  pill: readScaleValue(spectreTokens.radii, 'pill'),\n};\n\nconst componentShadows = {\n  soft: readScaleValue(spectreTokens.shadows, 'md'),\n  card: readScaleValue(spectreTokens.shadows, 'lg'),\n};\n\nconst spacingShortcuts = {\n  gutter: readScaleValue(spectreTokens.spacing, 'lg'),\n  section: readScaleValue(spectreTokens.spacing, '2xl'),\n  stack: readScaleValue(spectreTokens.spacing, 'md'),\n};\n\nconst componentColors = {\n  surface: {\n    DEFAULT: readColorValue('neutral', '50'),\n    muted: readColorValue('neutral', '100'),\n    strong: readColorValue('neutral', '900'),\n  },\n  intent: {\n    info: readColorValue('info', '500'),\n    success: readColorValue('success', '500'),\n    warning: readColorValue('warning', '500'),\n    danger: readColorValue('error', '500'),\n  },\n};\n\nexport const spectrePreset: Config = {\n  content: [],\n  theme: {\n    ...spectreTailwindTheme,\n    extend: {\n      borderRadius: componentRadii,\n      boxShadow: componentShadows,\n      spacing: spacingShortcuts,\n      colors: componentColors,\n    },\n  },\n};\n","export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'success' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonState = 'default' | 'hover' | 'active' | 'disabled';\n\nexport interface ButtonClassConfig {\n  baseClass: string;\n  variants: Record<ButtonVariant, string>;\n  sizes: Record<ButtonSize, string>;\n  states: Record<ButtonState, string>;\n}\n\nexport const buttonConfig: ButtonClassConfig = {\n  baseClass: 'sp-btn',\n  variants: {\n    primary: 'sp-btn-primary',\n    secondary: 'sp-btn-secondary',\n    ghost: 'sp-btn-ghost',\n    success: 'sp-btn-success',\n    danger: 'sp-btn-danger',\n  },\n  sizes: {\n    sm: 'sp-btn-sm',\n    md: 'sp-btn-md',\n    lg: 'sp-btn-lg',\n  },\n  states: {\n    default: '',\n    hover: 'sp-btn-hover',\n    active: 'sp-btn-active',\n    disabled: 'sp-btn-disabled',\n  },\n};\n","import { buttonConfig, type ButtonSize, type ButtonState, type ButtonVariant } from '../components/button.config';\n\nexport interface GetButtonClassesOptions {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  state?: ButtonState;\n  extraClasses?: string;\n}\n\nexport const getButtonClasses = ({\n  variant = 'primary',\n  size = 'md',\n  state = 'default',\n  extraClasses = '',\n}: GetButtonClassesOptions = {}): string => {\n  const classes = [\n    buttonConfig.baseClass,\n    buttonConfig.variants[variant],\n    buttonConfig.sizes[size],\n    buttonConfig.states[state],\n    extraClasses,\n  ].filter(Boolean);\n\n  return classes.join(' ').trim();\n};\n","export type InputState = 'default' | 'focus' | 'invalid' | 'valid' | 'disabled';\n\nexport interface InputClassConfig {\n  baseClass: string;\n  states: Record<InputState, string>;\n}\n\nexport const inputConfig: InputClassConfig = {\n  baseClass: 'sp-input',\n  states: {\n    default: '',\n    focus: 'sp-input-focus',\n    invalid: 'sp-input-error',\n    valid: 'sp-input-success',\n    disabled: 'sp-input-disabled',\n  },\n};\n","import { inputConfig, type InputState } from '../components/input.config';\n\nexport interface GetInputClassesOptions {\n  state?: InputState;\n  extraClasses?: string;\n}\n\nexport const getInputClasses = ({\n  state = 'default',\n  extraClasses = '',\n}: GetInputClassesOptions = {}): string => {\n  const classes = [inputConfig.baseClass, inputConfig.states[state], extraClasses].filter(Boolean);\n  return classes.join(' ').trim();\n};\n","export type CardVariant = 'base' | 'elevated' | 'flat';\n\nexport interface CardClassConfig {\n  baseClass: string;\n  variants: Record<CardVariant, string>;\n}\n\nexport const cardConfig: CardClassConfig = {\n  baseClass: 'sp-card',\n  variants: {\n    base: '',\n    elevated: 'sp-card-elevated',\n    flat: 'sp-card-flat',\n  },\n};\n","import { cardConfig, type CardVariant } from '../components/card.config';\n\nexport interface GetCardClassesOptions {\n  variant?: CardVariant;\n  extraClasses?: string;\n}\n\nexport const getCardClasses = ({\n  variant = 'base',\n  extraClasses = '',\n}: GetCardClassesOptions = {}): string => {\n  const classes = [cardConfig.baseClass, cardConfig.variants[variant], extraClasses].filter(Boolean);\n  return classes.join(' ').trim();\n};\n","export {\n  spectreTokens,\n  spectreTailwindPreset,\n  spectreTailwindTheme,\n  createSpectreCssVariableMap,\n  createSpectreTailwindTheme,\n  generateSpectreCssVariables,\n} from './tokens';\n\nexport type {\n  SpectreAccessibilityTokens,\n  SpectreAnimationEntry,\n  SpectreButtonStateTokens,\n  SpectreFormStateTokens,\n  SpectreTailwindTheme,\n  SpectreTokenScale,\n  SpectreTokens,\n  SpectreTransitionTokens,\n  SpectreTypographyTokens,\n} from './tokens';\n\nexport { spectrePreset } from './tailwind';\n\nexport {\n  getButtonClasses,\n  type GetButtonClassesOptions,\n} from './recipes/button';\nexport { getInputClasses, type GetInputClassesOptions } from './recipes/input';\nexport { getCardClasses, type GetCardClassesOptions } from './recipes/card';\n\nexport type {\n  ButtonSize,\n  ButtonState,\n  ButtonVariant,\n} from './components/button.config';\nexport type { InputState } from './components/input.config';\nexport type { CardVariant } from './components/card.config';\n\nexport const spectreBaseStylesPath = '@phcdevworks/spectre-ui/dist/base.css';\nexport const spectreComponentsStylesPath = '@phcdevworks/spectre-ui/dist/components.css';\nexport const spectreUtilitiesStylesPath = '@phcdevworks/spectre-ui/dist/utilities.css';\n\n/**\n * Structured helper for consumers that prefer namespaced CSS entry points.\n */\nexport const spectreStyles = {\n  base: spectreBaseStylesPath,\n  components: spectreComponentsStylesPath,\n  utilities: spectreUtilitiesStylesPath,\n} as const;\n"]}
+{"version":3,"sources":["../src/css-constants.ts","../src/tailwind/theme.ts","../src/tailwind/preset.ts","../src/recipes/button.ts","../src/recipes/card.ts","../src/recipes/input.ts"],"names":["theme","spectreTokens","tokens"],"mappings":"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","file":"index.js","sourcesContent":["export const spectreBaseStylesPath = \"@phcdevworks/spectre-ui/dist/base.css\";\nexport const spectreComponentsStylesPath = \"@phcdevworks/spectre-ui/dist/components.css\";\nexport const spectreUtilitiesStylesPath = \"@phcdevworks/spectre-ui/dist/utilities.css\";\n\nexport const spectreStyles = {\n  base: spectreBaseStylesPath,\n  components: spectreComponentsStylesPath,\n  utilities: spectreUtilitiesStylesPath,\n};\n","import type { Config as TailwindConfig } from 'tailwindcss';\nimport type { SpectreTokens } from '../tokens';\n\nexport interface SpectreTailwindTheme {\n  theme: TailwindConfig['theme'];\n}\n\nexport interface CreateSpectreTailwindThemeOptions {\n  tokens: SpectreTokens;\n  overrides?: Partial<SpectreTokens>;\n}\n\nexport function createSpectreTailwindTheme(\n  options: CreateSpectreTailwindThemeOptions,\n): SpectreTailwindTheme {\n  const { tokens, overrides } = options;\n\n  // Shallow merge overrides into tokens\n  const mergedTokens: SpectreTokens = {\n    ...tokens,\n    ...(overrides ?? {}),\n  };\n\n  const mergedColors = (mergedTokens as any).colors ?? {};\n\n  const attachSemanticColors = (\n    existing: Record<string, any>,\n    semantic: Record<string, any> | undefined,\n  ) => {\n    if (!semantic || Object.keys(semantic).length === 0) {\n      return Object.keys(existing).length > 0 ? existing : undefined;\n    }\n\n    return {\n      ...existing,\n      ...semantic,\n    };\n  };\n\n  const themeColors: Record<string, any> = {\n    ...mergedColors,\n  };\n\n  const surfaceColors = attachSemanticColors(\n    mergedColors.surface ?? {},\n    (mergedTokens as any).surface,\n  );\n  if (surfaceColors) {\n    themeColors.surface = surfaceColors;\n  }\n\n  const textColors = attachSemanticColors(\n    mergedColors.text ?? {},\n    (mergedTokens as any).text,\n  );\n  if (textColors) {\n    themeColors.text = textColors;\n  }\n\n  const componentColors = attachSemanticColors(\n    mergedColors.component ?? {},\n    (mergedTokens as any).component,\n  );\n  if (componentColors) {\n    themeColors.component = componentColors;\n  }\n\n  const theme: TailwindConfig['theme'] = {\n    // Safely map core token groups into Tailwind theme fields.\n    // Use `as any` where necessary to avoid overfitting types right now.\n    colors: themeColors,\n    spacing: (mergedTokens as any).spacing ?? {},\n    borderRadius: (mergedTokens as any).radii ?? {},\n    boxShadow: (mergedTokens as any).shadows ?? {},\n    fontFamily: (mergedTokens as any).typography?.families ?? {},\n  };\n\n  return { theme };\n}\n","import type { Config as TailwindConfig } from 'tailwindcss';\nimport plugin from 'tailwindcss/plugin';\nimport { spectreTokens } from '../tokens';\nimport { createSpectreTailwindTheme } from './theme';\n\nconst { theme } = createSpectreTailwindTheme({\n  tokens: spectreTokens,\n});\n\nconst resolveTokenValue = (value: unknown, fallback?: string): string | undefined => {\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (value && typeof value === 'object') {\n    const maybeDefault = (value as Record<string, unknown>).default;\n    if (typeof maybeDefault === 'string') {\n      return maybeDefault;\n    }\n\n    const firstEntry = Object.values(value as Record<string, unknown>).find(\n      (entry) => typeof entry === 'string',\n    );\n    if (typeof firstEntry === 'string') {\n      return firstEntry;\n    }\n  }\n\n  return fallback;\n};\n\nconst semanticUtilities = plugin(({ addUtilities }) => {\n  const tokens = spectreTokens as any;\n  const neutralScale = tokens?.colors?.neutral ?? {};\n  const formDefault = tokens?.forms?.default ?? {};\n\n  const surfaceTokens = tokens?.surface ?? {};\n  const textTokens = tokens?.text ?? {};\n\n  const surfacePage = resolveTokenValue(\n    surfaceTokens.page,\n    neutralScale['50'],\n  );\n  const surfaceCard = resolveTokenValue(\n    surfaceTokens.card,\n    formDefault.bg ?? surfacePage ?? neutralScale['50'],\n  );\n  const surfaceInput = resolveTokenValue(\n    surfaceTokens.input,\n    formDefault.bg ?? surfaceCard ?? surfacePage,\n  );\n\n  const textOnPage = resolveTokenValue(\n    textTokens?.on?.page ?? textTokens?.onPage,\n    neutralScale['900'] ?? formDefault.text,\n  );\n  const textOnSurface = resolveTokenValue(\n    textTokens?.on?.surface ?? textTokens?.onSurface,\n    formDefault.text ?? textOnPage ?? neutralScale['900'],\n  );\n\n  const utilities: Record<string, Record<string, string>> = {};\n\n  if (surfacePage) {\n    utilities['.bg-surface-page'] = { backgroundColor: surfacePage };\n  }\n\n  if (surfaceCard) {\n    utilities['.bg-surface-card'] = { backgroundColor: surfaceCard };\n  }\n\n  if (surfaceInput) {\n    utilities['.bg-surface-input'] = { backgroundColor: surfaceInput };\n  }\n\n  if (textOnPage) {\n    utilities['.text-on-page'] = { color: textOnPage };\n  }\n\n  if (textOnSurface) {\n    utilities['.text-on-surface'] = { color: textOnSurface };\n  }\n\n  addUtilities(utilities);\n});\n\nexport const spectrePreset: TailwindConfig = {\n  // Required for Tailwind's Config type with exactOptionalPropertyTypes\n  content: [],\n  theme: theme ?? {},\n  plugins: [semanticUtilities],\n};\n\nexport const spectreTailwindPreset: TailwindConfig = spectrePreset;\n","export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonTone = 'default' | 'success' | 'warning' | 'danger';\n\nexport interface ButtonRecipeOptions {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  tone?: ButtonTone;\n  fullWidth?: boolean;\n  loading?: boolean;\n  disabled?: boolean;\n  iconOnly?: boolean;\n}\n\n/**\n * Generate Spectre button classes.\n *\n * Rules:\n * - Base: \"sp-btn\"\n * - Variant: \"sp-btn--primary\" / \"sp-btn--secondary\" / \"sp-btn--ghost\" / \"sp-btn--danger\"\n *   - default variant is \"primary\"\n * - Size: \"sp-btn--sm\" / \"sp-btn--md\" / \"sp-btn--lg\"\n *   - default size is \"md\"\n * - Tone: \"sp-btn--tone-success\" / \"sp-btn--tone-warning\" / \"sp-btn--tone-danger\"\n *   - default tone is \"default\" (no tone class)\n * - fullWidth: add \"sp-btn--full\"\n * - loading: add \"sp-btn--loading\"\n * - disabled: add \"sp-btn--disabled\"\n * - iconOnly: add \"sp-btn--icon\"\n *\n * Must return a single space-joined, trimmed class string.\n */\nexport function getButtonClasses(opts: ButtonRecipeOptions = {}): string {\n  const {\n    variant = 'primary',\n    size = 'md',\n    tone = 'default',\n    fullWidth = false,\n    loading = false,\n    disabled = false,\n    iconOnly = false,\n  } = opts;\n\n  const classes: string[] = [];\n\n  // Base\n  classes.push('sp-btn');\n\n  // Variant\n  const variantMap: Record<ButtonVariant, string> = {\n    primary: 'sp-btn--primary',\n    secondary: 'sp-btn--secondary',\n    ghost: 'sp-btn--ghost',\n    danger: 'sp-btn--danger',\n  };\n  classes.push(variantMap[variant]);\n\n  // Size\n  const sizeMap: Record<ButtonSize, string> = {\n    sm: 'sp-btn--sm',\n    md: 'sp-btn--md',\n    lg: 'sp-btn--lg',\n  };\n  classes.push(sizeMap[size]);\n\n  // Tone (optional)\n  if (tone !== 'default') {\n    const toneMap: Record<Exclude<ButtonTone, 'default'>, string> = {\n      success: 'sp-btn--tone-success',\n      warning: 'sp-btn--tone-warning',\n      danger: 'sp-btn--tone-danger',\n    };\n    classes.push(toneMap[tone as Exclude<ButtonTone, 'default'>]);\n  }\n\n  // Flags\n  if (fullWidth) classes.push('sp-btn--full');\n  if (loading) classes.push('sp-btn--loading');\n  if (disabled) classes.push('sp-btn--disabled');\n  if (iconOnly) classes.push('sp-btn--icon');\n\n  // Final class string\n  return classes.filter(Boolean).join(' ').trim();\n}\n","export type CardVariant = 'elevated' | 'outline' | 'ghost';\n\nexport interface CardRecipeOptions {\n  variant?: CardVariant;\n  interactive?: boolean; // hover/focus styles\n  padded?: boolean; // apply default padding\n  fullHeight?: boolean;\n}\n\n/**\n * Generate Spectre card classes.\n *\n * Rules:\n * - Base class: \"sp-card\"\n * - Variant (default: elevated):\n *   - \"sp-card--elevated\"\n *   - \"sp-card--outline\"\n *   - \"sp-card--ghost\"\n * - interactive: add \"sp-card--interactive\"\n * - padded: add \"sp-card--padded\"\n * - fullHeight: add \"sp-card--full\"\n */\nexport function getCardClasses(opts: CardRecipeOptions = {}): string {\n  const {\n    variant = 'elevated',\n    interactive = false,\n    padded = false,\n    fullHeight = false,\n  } = opts;\n\n  const classes: string[] = [];\n\n  // Base\n  classes.push('sp-card');\n\n  // Variant\n  const variantMap: Record<CardVariant, string> = {\n    elevated: 'sp-card--elevated',\n    outline: 'sp-card--outline',\n    ghost: 'sp-card--ghost',\n  };\n  classes.push(variantMap[variant]);\n\n  // Flags\n  if (interactive) classes.push('sp-card--interactive');\n  if (padded) classes.push('sp-card--padded');\n  if (fullHeight) classes.push('sp-card--full');\n\n  return classes.filter(Boolean).join(' ').trim();\n}\n","export type InputState = 'default' | 'error' | 'success';\nexport type InputSize = 'sm' | 'md' | 'lg';\n\nexport interface InputRecipeOptions {\n  state?: InputState;\n  size?: InputSize;\n  fullWidth?: boolean;\n}\n\n/**\n * Generate Spectre input classes.\n *\n * Rules:\n * - Base class: \"sp-input\"\n * - State:\n *   - \"default\" => no state modifier\n *   - \"error\"   => \"sp-input--error\"\n *   - \"success\" => \"sp-input--success\"\n * - Size (default: md):\n *   - \"sp-input--sm\"\n *   - \"sp-input--md\"\n *   - \"sp-input--lg\"\n * - fullWidth: add \"sp-input--full\"\n */\nexport function getInputClasses(opts: InputRecipeOptions = {}): string {\n  const {\n    state = 'default',\n    size = 'md',\n    fullWidth = false,\n  } = opts;\n\n  const classes: string[] = [];\n\n  // Base\n  classes.push('sp-input');\n\n  // State\n  if (state === 'error') {\n    classes.push('sp-input--error');\n  } else if (state === 'success') {\n    classes.push('sp-input--success');\n  }\n\n  // Size\n  const sizeMap: Record<InputSize, string> = {\n    sm: 'sp-input--sm',\n    md: 'sp-input--md',\n    lg: 'sp-input--lg',\n  };\n  classes.push(sizeMap[size]);\n\n  // Flags\n  if (fullWidth) {\n    classes.push('sp-input--full');\n  }\n\n  return classes.filter(Boolean).join(' ').trim();\n}\n"]}

package/dist/utilities.css

@@ -14,11 +14,11 @@
 
   .sp-container {
     width: 100%;
-    max-width: var(--sp-breakpoint-xl, 1280px);
     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, 72rem);
   }
 
   .sp-section {
@@ -27,10 +27,10 @@
   }
 
   .sp-shadow-soft {
-    box-shadow: var(--sp-shadow-md, 0 3px 8px rgba(15, 23, 42, 0.1));
+    box-shadow: var(--sp-shadow-md, 0 4px 10px rgba(15, 23, 42, 0.1));
   }
 
   .sp-shadow-strong {
-    box-shadow: var(--sp-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
+    box-shadow: var(--sp-shadow-lg, 0 10px 25px rgba(15, 23, 42, 0.18));
   }
 }