npm - @phcdevworks/spectre-ui - Versions diffs - 0.0.4 → 0.1.0 - Mend

@phcdevworks/spectre-ui 0.0.4 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 Framework-agnostic styling layer that powers Spectre Blocks, Spectre Astro, Spectre 11ty, and every Spectre integration.
-> 📋 **[View Roadmap](https://github.com/phcdevworks/spectre-ui/blob/main/ROADMAP.md)** | 🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
+> 🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
 ## Overview
@@ -24,7 +24,16 @@ npm install @phcdevworks/spectre-ui
 ### 1. Import Spectre CSS
-Import the CSS bundles anywhere in your app, layout, or build pipeline.
+Import the canonical bundle anywhere in your app, layout, or build pipeline.
+```ts
+// Recommended: one-line Spectre UI bundle (tokens + base + components + utilities)
+import "@phcdevworks/spectre-ui/index.css";
+```
+`index.css` automatically loads the Spectre Tokens CSS, so you don't need to import `@phcdevworks/spectre-tokens` separately in most apps.
+**Advanced layer control:** If you prefer to manage the layers individually, you can still import each file directly.
 ```css
 @import "@phcdevworks/spectre-ui/base.css";
@@ -48,6 +57,31 @@ export default {
 Works with Tailwind 3.x and 4.x through the classic config API.
+Need a plain theme object without presets? Generate it from the first-party tokens.
+```ts
+// tailwind.config.ts
+import {
+  createSpectreTailwindTheme,
+  spectreTokens,
+} from "@phcdevworks/spectre-ui";
+const { theme } = createSpectreTailwindTheme({
+  tokens: spectreTokens,
+  overrides: {
+    spacing: {
+      ...spectreTokens.spacing,
+      gutter: "1.125rem",
+    },
+  },
+});
+export default {
+  content: ["./src/**/*.{js,ts,jsx,tsx,astro}"],
+  theme,
+};
+```
 ### 3. Use Spectre recipes
 Recipes wrap Spectre's class combinations so every framework composes styles consistently.
@@ -86,9 +120,10 @@ getButtonClasses({ variant: "primary" }); // CTA baseline
 getButtonClasses({ variant: "secondary" }); // Outlined
 getButtonClasses({ variant: "ghost" }); // Low-emphasis
 getButtonClasses({ variant: "danger" }); // Destructive
+getButtonClasses({ variant: "success" }); // Positive actions
 ```
-Each variant ships with full state coverage: `default`, `hover`, `active`, `disabled`, and tone modifiers (`success`, `warning`, `danger`).
+Each variant ships with full state coverage: `default`, `hover`, `active`, `disabled`.
 ```css
 .cta-button {
@@ -111,8 +146,7 @@ getInputClasses({ state: "success" });
 ```css
 .input:focus {
   border-color: var(--sp-component-input-border-focus);
-  outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style)
-    var(--sp-component-input-ring-focus);
+  outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style) var(--sp-component-input-ring-focus);
 }
 .input.error {
   border-color: var(--sp-component-input-border-error);
@@ -208,10 +242,10 @@ import {
 ## Repository Layout
-| Folder        | Responsibility                                                                                                |
-| ------------- | ------------------------------------------------------------------------------------------------------------- |
-| `src/`        | TypeScript source: recipes, Tailwind preset, token re-exports, CSS constants.                                |
-| `src/styles/` | Raw CSS files (`base.css`, `components.css`, `utilities.css`) copied to `dist/` during build.                |
+| Folder        | Responsibility                                                                                              |
+| ------------- | ----------------------------------------------------------------------------------------------------------- |
+| `src/`        | TypeScript source: recipes, Tailwind preset, token re-exports, CSS constants.                               |
+| `src/styles/` | Raw CSS files (`base.css`, `components.css`, `utilities.css`) copied to `dist/` during build.               |
 | `dist/`       | Generated artifacts: `index.js`, `index.cjs`, `index.d.ts`, and CSS files. Regenerated via `npm run build`. |
 Designers update tokens in `@phcdevworks/spectre-tokens`. Engineering evolves recipes, presets, and CSS in this package.
@@ -243,7 +277,9 @@ import type {
   SpectreTokens,
   SpectreTailwindTheme,
   ButtonVariant,
+  ButtonSize,
   InputState,
+  InputSize,
   CardVariant,
   ButtonRecipeOptions,
   CardRecipeOptions,
@@ -259,8 +295,6 @@ import type {
 - **Spectre Astro** – Astro integration
 - **Spectre 11ty** – Eleventy integration
-For the project's future direction, see the **[Roadmap](https://github.com/phcdevworks/spectre-ui/blob/main/ROADMAP.md)**.
 ## Contributing
 Issues and pull requests are welcome. If you are proposing style or recipe changes, update `src/` and include regenerated builds.

package/dist/base.css CHANGED Viewed

@@ -1,12 +1,5 @@
 @layer base {
-  :root {
-    --sp-surface-page: var(--sp-color-neutral-50, #f8fafc);
-    --sp-surface-card: #ffffff;
-    --sp-surface-input: var(--sp-form-default-bg, #ffffff);
-    --sp-surface-overlay: rgba(15, 23, 42, var(--sp-opacity-overlay, 0.5));
-  }
   *,
   *::before,
   *::after {
@@ -52,7 +45,7 @@
   }
   a {
-    color: var(--sp-color-primary, inherit);
+    color: var(--sp-color-brand-600, inherit);
     text-decoration: none;
   }
@@ -61,12 +54,13 @@
   }
   :focus-visible {
-    outline: 2px solid var(--sp-color-primary, currentColor);
-    outline-offset: 2px;
+    outline: var(--sp-focus-ring-width, 2px) solid var(--sp-color-focus-primary,
+        var(--sp-color-brand-600, currentColor));
+    outline-offset: var(--sp-focus-ring-offset, 2px);
   }
   ::selection {
-    background-color: var(--sp-color-primary-soft, rgba(79, 70, 229, 0.15));
+    background-color: var(--sp-color-brand-100, #ebe2ff);
     color: inherit;
   }
 }

package/dist/components.css CHANGED Viewed

@@ -54,21 +54,36 @@
     --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
     /* input roles */
-    --sp-component-input-border: var(--sp-form-default-border);
-    --sp-component-input-bg: var(--sp-surface-input, var(--sp-form-default-bg));
-    --sp-component-input-text: var(--sp-text-on-surface-default, var(--sp-form-default-text));
-    --sp-component-input-placeholder: var(--sp-text-on-surface-muted, var(--sp-form-default-placeholder));
-    --sp-component-input-border-focus: var(--sp-form-focus-border);
-    --sp-component-input-ring: var(--sp-form-focus-ring, var(--sp-color-focus-primary));
-    --sp-component-input-border-invalid: var(--sp-form-invalid-border);
-    --sp-component-input-bg-invalid: var(--sp-form-invalid-bg);
-    --sp-component-input-text-invalid: var(--sp-form-invalid-text);
-    --sp-component-input-border-valid: var(--sp-form-valid-border);
-    --sp-component-input-bg-valid: var(--sp-form-valid-bg);
-    --sp-component-input-text-valid: var(--sp-form-valid-text);
-    --sp-component-input-bg-disabled: var(--sp-form-disabled-bg);
-    --sp-component-input-text-disabled: var(--sp-form-disabled-text);
-    --sp-component-input-border-disabled: var(--sp-form-disabled-border);
+    --sp-component-input-role-border: var(--sp-component-input-border,
+        var(--sp-surface-input, var(--sp-color-neutral-200, #e2e8f0)));
+    --sp-component-input-role-bg: var(--sp-component-input-bg,
+        var(--sp-surface-input, var(--sp-color-neutral-50, #f8fafc)));
+    --sp-component-input-role-text: var(--sp-component-input-text,
+        var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
+    --sp-component-input-role-placeholder: var(--sp-component-input-placeholder,
+        var(--sp-text-on-surface-muted, var(--sp-color-neutral-500, #64748b)));
+    --sp-component-input-role-border-focus: var(--sp-component-input-border-focus,
+        var(--sp-color-brand-500, #8652ff));
+    --sp-component-input-role-ring: var(--sp-component-input-ring,
+        var(--sp-color-brand-500, #8652ff));
+    --sp-component-input-role-border-error: var(--sp-component-input-border-error,
+        var(--sp-color-error-500, #ef4444));
+    --sp-component-input-role-bg-error: var(--sp-component-input-bg-error,
+        var(--sp-color-error-50, #fef2f2));
+    --sp-component-input-role-text-error: var(--sp-component-input-text-error,
+        var(--sp-color-error-700, #b91c1c));
+    --sp-component-input-role-border-success: var(--sp-component-input-border-success,
+        var(--sp-color-success-500, #22c55e));
+    --sp-component-input-role-bg-success: var(--sp-component-input-bg-success,
+        var(--sp-color-success-50, #f0fdf4));
+    --sp-component-input-role-text-success: var(--sp-component-input-text-success,
+        var(--sp-color-success-700, #15803d));
+    --sp-component-input-role-bg-disabled: var(--sp-component-input-bg-disabled,
+        var(--sp-surface-input, var(--sp-color-neutral-50, #f8fafc)));
+    --sp-component-input-role-text-disabled: var(--sp-component-input-text-disabled,
+        var(--sp-text-on-surface-muted, var(--sp-color-neutral-400, #94a3b8)));
+    --sp-component-input-role-border-disabled: var(--sp-component-input-border-disabled,
+        var(--sp-surface-input, var(--sp-color-neutral-200, #e2e8f0)));
   }
   /* BUTTONS -------------------------------------------------------------- */
@@ -79,10 +94,8 @@
     gap: var(--sp-space-2xs, 0.25rem);
     padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
     border-radius: var(--sp-radius-md, 4px);
-    border: 1px solid var(
-      --sp-component-button-border-base,
-      var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg))
-    );
+    border: 1px solid var(--sp-component-button-border-base,
+        var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg)));
     font-family: var(--sp-font-family-sans, system-ui);
     font-size: var(--sp-font-md-size, 1rem);
     line-height: 1;
@@ -143,10 +156,8 @@
   .sp-btn--primary {
     background-color: var(--sp-component-button-primary-bg);
     color: var(--sp-component-button-primary-text);
-    box-shadow: var(
-      --sp-component-button-shadow,
-      var(--sp-shadow-sm)
-    );
+    box-shadow: var(--sp-component-button-shadow,
+        var(--sp-shadow-sm));
   }
   .sp-btn--primary.sp-btn--hover,
@@ -265,7 +276,7 @@
   }
   .sp-label {
-    color: var(--sp-component-input-text, var(--sp-text-on-surface-default, var(--sp-form-default-text)));
+    color: var(--sp-component-input-role-text);
     font-size: var(--sp-font-sm-size, 0.875rem);
     font-weight: var(--sp-font-sm-weight, 500);
     line-height: var(--sp-font-sm-line-height, 1.25rem);
@@ -278,7 +289,7 @@
   }
   .sp-error-message {
-    color: var(--sp-color-danger, #dc2626);
+    color: var(--sp-color-error-600, #dc2626);
     font-size: var(--sp-font-xs-size, 0.75rem);
     line-height: var(--sp-font-xs-line-height, 1rem);
   }
@@ -289,9 +300,9 @@
     appearance: none;
     padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
     border-radius: var(--sp-radius-md, 4px);
-    border: 1px solid var(--sp-component-input-border, var(--sp-form-default-border));
-    background-color: var(--sp-component-input-bg, var(--sp-surface-input, var(--sp-form-default-bg)));
-    color: var(--sp-component-input-text, var(--sp-text-on-surface-default, var(--sp-form-default-text)));
+    border: 1px solid var(--sp-component-input-role-border);
+    background-color: var(--sp-component-input-role-bg);
+    color: var(--sp-component-input-role-text);
     font-family: var(--sp-font-family-sans, system-ui);
     font-size: var(--sp-font-md-size, 1rem);
     line-height: var(--sp-font-md-line-height, 1.5rem);
@@ -302,7 +313,7 @@
   }
   .sp-input::placeholder {
-    color: var(--sp-component-input-placeholder, var(--sp-text-on-surface-muted, var(--sp-form-default-placeholder)));
+    color: var(--sp-component-input-role-placeholder);
   }
   .sp-input--sm {
@@ -329,33 +340,27 @@
   .sp-input:focus,
   .sp-input--focus {
-    border-color: var(
-      --sp-component-input-border-focus,
-      var(--sp-component-input-border, var(--sp-form-focus-border))
-    );
-    box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(
-      --sp-component-input-ring,
-      var(--sp-form-focus-ring, var(--sp-color-focus-primary))
-    );
+    border-color: var(--sp-component-input-role-border-focus);
+    box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-component-input-role-ring);
     outline: none;
   }
   .sp-input--error {
-    border-color: var(--sp-component-input-border-invalid, var(--sp-form-invalid-border));
-    background-color: var(--sp-component-input-bg-invalid, var(--sp-form-invalid-bg));
-    color: var(--sp-component-input-text-invalid, var(--sp-form-invalid-text));
+    border-color: var(--sp-component-input-role-border-error);
+    background-color: var(--sp-component-input-role-bg-error);
+    color: var(--sp-component-input-role-text-error);
   }
   .sp-input--success {
-    border-color: var(--sp-component-input-border-valid, var(--sp-form-valid-border));
-    background-color: var(--sp-component-input-bg-valid, var(--sp-form-valid-bg));
-    color: var(--sp-component-input-text-valid, var(--sp-form-valid-text));
+    border-color: var(--sp-component-input-role-border-success);
+    background-color: var(--sp-component-input-role-bg-success);
+    color: var(--sp-component-input-role-text-success);
   }
   .sp-input--disabled {
-    background-color: var(--sp-component-input-bg-disabled, var(--sp-form-disabled-bg));
-    color: var(--sp-component-input-text-disabled, var(--sp-form-disabled-text));
-    border-color: var(--sp-component-input-border-disabled, var(--sp-form-disabled-border));
+    background-color: var(--sp-component-input-role-bg-disabled);
+    color: var(--sp-component-input-role-text-disabled);
+    border-color: var(--sp-component-input-role-border-disabled);
     cursor: not-allowed;
   }
@@ -372,10 +377,8 @@
     border-radius: var(--sp-radius-lg, 8px);
     padding: var(--sp-space-lg, 1.5rem);
     box-shadow: var(--sp-component-card-shadow, var(--sp-shadow-sm));
-    border: 1px solid var(
-      --sp-component-card-border-base,
-      var(--sp-component-card-ghost-border, var(--sp-component-card-bg))
-    );
+    border: 1px solid var(--sp-component-card-border-base,
+        var(--sp-component-card-ghost-border, var(--sp-component-card-bg)));
   }
   .sp-card p,

package/dist/index.cjs CHANGED Viewed

@@ -2,11 +2,17 @@
 var spectreTokens = require('@phcdevworks/spectre-tokens');
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var spectreTokens__default = /*#__PURE__*/_interopDefault(spectreTokens);
 // 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 spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
+var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
+var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
+var spectreIndexStylesPath = "@phcdevworks/spectre-ui/index.css";
 var spectreStyles = {
+  index: spectreIndexStylesPath,
   base: spectreBaseStylesPath,
   components: spectreComponentsStylesPath,
   utilities: spectreUtilitiesStylesPath
@@ -14,43 +20,34 @@ var spectreStyles = {
 // src/tailwind/theme.ts
 function createSpectreTailwindTheme(options) {
-  const { tokens, overrides } = options;
   const mergedTokens = {
-    ...tokens,
-    ...overrides
-  };
-  const colors = {
-    page: mergedTokens.surface?.page,
-    card: mergedTokens.surface?.card,
-    input: mergedTokens.surface?.input,
-    text: {
-      page: mergedTokens.text?.onPage?.default,
-      "page-muted": mergedTokens.text?.onPage?.muted,
-      surface: mergedTokens.text?.onSurface?.default,
-      "surface-muted": mergedTokens.text?.onSurface?.muted
-    },
-    primary: mergedTokens.buttons?.primary?.bg ?? mergedTokens.colors?.primary
+    ...options.tokens ?? {},
+    ...options.overrides ?? {}
   };
-  const spacing = mergedTokens.spacing ?? {};
-  const borderRadius = mergedTokens.radii ?? {};
-  const boxShadow = mergedTokens.shadows ?? {};
-  const fontFamily = mergedTokens.typography?.families ?? {};
+  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 theme2 = {
     colors,
     spacing,
     borderRadius,
     boxShadow,
-    fontFamily
+    fontFamily,
+    fontSize
   };
   return { theme: theme2 };
 }
 // src/tailwind/preset.ts
-var { theme } = createSpectreTailwindTheme({ tokens: spectreTokens.tokens });
+var { theme } = createSpectreTailwindTheme({ tokens: spectreTokens__default.default });
 var spectrePreset = {
   content: [],
-  theme: theme ?? {}
-  // ensure theme is never undefined
+  theme
+  // theme is guaranteed non-undefined now
 };
 // src/recipes/button.ts
@@ -58,19 +55,18 @@ 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 classes = ["sp-btn"];
   const variantMap = {
     primary: "sp-btn--primary",
     secondary: "sp-btn--secondary",
     ghost: "sp-btn--ghost",
-    danger: "sp-btn--danger"
+    danger: "sp-btn--danger",
+    success: "sp-btn--success"
   };
   classes.push(variantMap[variant]);
   const sizeMap = {
@@ -79,19 +75,11 @@ function getButtonClasses(opts = {}) {
     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();
+  return classes.join(" ").trim();
 }
 // src/recipes/card.ts
@@ -102,10 +90,10 @@ function getCardClasses(opts = {}) {
     padded = false,
     fullHeight = false
   } = opts;
-  const classes = [];
-  classes.push("sp-card");
+  const classes = ["sp-card"];
   const variantMap = {
     elevated: "sp-card--elevated",
+    flat: "sp-card--flat",
     outline: "sp-card--outline",
     ghost: "sp-card--ghost"
   };
@@ -113,38 +101,29 @@ function getCardClasses(opts = {}) {
   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();
+  return classes.join(" ").trim();
 }
 // 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 { state = "default", size = "md", fullWidth = false } = opts;
+  const classes = ["sp-input"];
   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();
+  if (state === "error") classes.push("sp-input--error");
+  if (state === "success") classes.push("sp-input--success");
+  if (state === "disabled") classes.push("sp-input--disabled");
+  if (fullWidth) classes.push("sp-input--full");
+  return classes.join(" ").trim();
 }
 Object.defineProperty(exports, "spectreTokens", {
   enumerable: true,
-  get: function () { return spectreTokens.tokens; }
+  get: function () { return spectreTokens__default.default; }
 });
 exports.createSpectreTailwindTheme = createSpectreTailwindTheme;
 exports.getButtonClasses = getButtonClasses;

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"],"mappings":"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","file":"index.cjs","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 as SpectreTokens),\n ...(overrides as Partial<SpectreTokens> \| undefined),\n };\n\n // Minimal, semantic color mapping\n const colors: Record<string, unknown> = {\n page: mergedTokens.surface?.page,\n card: mergedTokens.surface?.card,\n input: mergedTokens.surface?.input,\n text: {\n page: mergedTokens.text?.onPage?.default,\n \"page-muted\": mergedTokens.text?.onPage?.muted,\n surface: mergedTokens.text?.onSurface?.default,\n \"surface-muted\": mergedTokens.text?.onSurface?.muted,\n },\n primary:\n (mergedTokens as any).buttons?.primary?.bg ??\n (mergedTokens as any).colors?.primary,\n };\n\n const spacing: Record<string, unknown> =\n (mergedTokens as any).spacing ?? {};\n\n const borderRadius: Record<string, unknown> =\n (mergedTokens as any).radii ?? {};\n\n const boxShadow: Record<string, unknown> =\n (mergedTokens as any).shadows ?? {};\n\n const fontFamily: Record<string, unknown> =\n (mergedTokens as any).typography?.families ?? {};\n\n const theme: TailwindConfig[\"theme\"] = {\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 };\n\n return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport { spectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\nconst { theme } = createSpectreTailwindTheme({ tokens: spectreTokens });\n\nexport const spectrePreset: TailwindConfig = {\n content: [],\n theme: theme ?? {}, // ensure theme is never undefined\n};\n\nexport default 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"]}
1	+ {"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"],"mappings":"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","file":"index.cjs","sourcesContent":["export const spectreBaseStylesPath = \"@phcdevworks/spectre-ui/base.css\";\nexport const spectreComponentsStylesPath = \"@phcdevworks/spectre-ui/components.css\";\nexport const spectreUtilitiesStylesPath = \"@phcdevworks/spectre-ui/utilities.css\";\nexport const spectreIndexStylesPath = \"@phcdevworks/spectre-ui/index.css\";\n\nexport const spectreStyles = {\n index: spectreIndexStylesPath,\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n};\n","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 { spectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\nconst { theme } = createSpectreTailwindTheme({ tokens: spectreTokens });\n\nexport const spectrePreset: TailwindConfig = {\n content: [],\n theme, // theme is guaranteed non-undefined now\n};\n\nexport const spectreTailwindPreset: TailwindConfig = spectrePreset;\n","export type ButtonVariant = \"primary\" \| \"secondary\" \| \"ghost\" \| \"danger\" \| \"success\";\nexport type ButtonSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface ButtonRecipeOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n fullWidth?: boolean;\n loading?: boolean;\n disabled?: boolean;\n iconOnly?: boolean;\n}\n\nexport function getButtonClasses(opts: ButtonRecipeOptions = {}): string {\n const {\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n disabled = false,\n iconOnly = false,\n } = opts;\n\n const classes: string[] = [\"sp-btn\"];\n\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 success: \"sp-btn--success\",\n };\n classes.push(variantMap[variant]);\n\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 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 return classes.join(\" \").trim();\n}\n","export type CardVariant = \"elevated\" \| \"flat\" \| \"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\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[] = [\"sp-card\"];\n\n const variantMap: Record<CardVariant, string> = {\n elevated: \"sp-card--elevated\",\n flat: \"sp-card--flat\",\n outline: \"sp-card--outline\",\n ghost: \"sp-card--ghost\",\n };\n classes.push(variantMap[variant]);\n\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.join(\" \").trim();\n}\n","export type InputState = \"default\" \| \"error\" \| \"success\" \| \"disabled\";\nexport type InputSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface InputRecipeOptions {\n state?: InputState;\n size?: InputSize;\n fullWidth?: boolean;\n}\n\nexport function getInputClasses(opts: InputRecipeOptions = {}): string {\n const { state = \"default\", size = \"md\", fullWidth = false } = opts;\n\n const classes: string[] = [\"sp-input\"];\n\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 // State\n if (state === \"error\") classes.push(\"sp-input--error\");\n if (state === \"success\") classes.push(\"sp-input--success\");\n if (state === \"disabled\") classes.push(\"sp-input--disabled\");\n\n if (fullWidth) classes.push(\"sp-input--full\");\n\n return classes.join(\" \").trim();\n}\n"]}

package/dist/index.css ADDED Viewed

@@ -0,0 +1,8 @@
+/* Spectre UI canonical bundle:
+   - Tokens first (defines --sp-* vars)
+   - Then UI base, components, utilities
+*/
+@import "@phcdevworks/spectre-tokens/index.css";
+@import "./base.css";
+@import "./components.css";
+@import "./utilities.css";

package/dist/index.d.cts CHANGED Viewed

@@ -1,103 +1,61 @@
 import { Config } from 'tailwindcss';
 import { SpectreTokens } from '@phcdevworks/spectre-tokens';
-export { SpectreTokens, tokens as spectreTokens } from '@phcdevworks/spectre-tokens';
+export { SpectreTokens, default as spectreTokens } from '@phcdevworks/spectre-tokens';
-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 spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
+declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
+declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
 declare const spectreStyles: {
+    index: string;
     base: string;
     components: string;
     utilities: string;
 };
-declare const spectrePreset: Config;
+type TailwindTheme = NonNullable<Config["theme"]>;
 interface SpectreTailwindTheme {
-    theme: Config["theme"];
+    theme: TailwindTheme;
 }
 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 ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'sm' | 'md' | 'lg';
-type ButtonTone = 'default' | 'success' | 'warning' | 'danger';
+declare const spectrePreset: Config;
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonRecipeOptions {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    tone?: ButtonTone;
     fullWidth?: boolean;
     loading?: boolean;
     disabled?: boolean;
     iconOnly?: boolean;
 }
-/**
- * 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;
-type CardVariant = 'elevated' | 'outline' | 'ghost';
+type CardVariant = "elevated" | "flat" | "outline" | "ghost";
 interface CardRecipeOptions {
     variant?: CardVariant;
     interactive?: boolean;
     padded?: boolean;
     fullHeight?: boolean;
 }
-/**
- * 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;
-type InputState = 'default' | 'error' | 'success';
-type InputSize = 'sm' | 'md' | 'lg';
+type InputState = "default" | "error" | "success" | "disabled";
+type InputSize = "sm" | "md" | "lg";
 interface InputRecipeOptions {
     state?: InputState;
     size?: InputSize;
     fullWidth?: boolean;
 }
-/**
- * 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 function getInputClasses(opts?: InputRecipeOptions): string;
-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 };
+export { type ButtonRecipeOptions, type ButtonSize, 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.d.ts CHANGED Viewed

@@ -1,103 +1,61 @@
 import { Config } from 'tailwindcss';
 import { SpectreTokens } from '@phcdevworks/spectre-tokens';
-export { SpectreTokens, tokens as spectreTokens } from '@phcdevworks/spectre-tokens';
+export { SpectreTokens, default as spectreTokens } from '@phcdevworks/spectre-tokens';
-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 spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
+declare const spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
+declare const spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
 declare const spectreStyles: {
+    index: string;
     base: string;
     components: string;
     utilities: string;
 };
-declare const spectrePreset: Config;
+type TailwindTheme = NonNullable<Config["theme"]>;
 interface SpectreTailwindTheme {
-    theme: Config["theme"];
+    theme: TailwindTheme;
 }
 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 ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'sm' | 'md' | 'lg';
-type ButtonTone = 'default' | 'success' | 'warning' | 'danger';
+declare const spectrePreset: Config;
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success";
+type ButtonSize = "sm" | "md" | "lg";
 interface ButtonRecipeOptions {
     variant?: ButtonVariant;
     size?: ButtonSize;
-    tone?: ButtonTone;
     fullWidth?: boolean;
     loading?: boolean;
     disabled?: boolean;
     iconOnly?: boolean;
 }
-/**
- * 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;
-type CardVariant = 'elevated' | 'outline' | 'ghost';
+type CardVariant = "elevated" | "flat" | "outline" | "ghost";
 interface CardRecipeOptions {
     variant?: CardVariant;
     interactive?: boolean;
     padded?: boolean;
     fullHeight?: boolean;
 }
-/**
- * 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;
-type InputState = 'default' | 'error' | 'success';
-type InputSize = 'sm' | 'md' | 'lg';
+type InputState = "default" | "error" | "success" | "disabled";
+type InputSize = "sm" | "md" | "lg";
 interface InputRecipeOptions {
     state?: InputState;
     size?: InputSize;
     fullWidth?: boolean;
 }
-/**
- * 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 function getInputClasses(opts?: InputRecipeOptions): string;
-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 };
+export { type ButtonRecipeOptions, type ButtonSize, 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 CHANGED Viewed

@@ -1,11 +1,13 @@
-import { tokens } from '@phcdevworks/spectre-tokens';
-export { tokens as spectreTokens } from '@phcdevworks/spectre-tokens';
+import spectreTokens from '@phcdevworks/spectre-tokens';
+export { default as spectreTokens } from '@phcdevworks/spectre-tokens';
 // 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 spectreBaseStylesPath = "@phcdevworks/spectre-ui/base.css";
+var spectreComponentsStylesPath = "@phcdevworks/spectre-ui/components.css";
+var spectreUtilitiesStylesPath = "@phcdevworks/spectre-ui/utilities.css";
+var spectreIndexStylesPath = "@phcdevworks/spectre-ui/index.css";
 var spectreStyles = {
+  index: spectreIndexStylesPath,
   base: spectreBaseStylesPath,
   components: spectreComponentsStylesPath,
   utilities: spectreUtilitiesStylesPath
@@ -13,43 +15,34 @@ var spectreStyles = {
 // src/tailwind/theme.ts
 function createSpectreTailwindTheme(options) {
-  const { tokens, overrides } = options;
   const mergedTokens = {
-    ...tokens,
-    ...overrides
+    ...options.tokens ?? {},
+    ...options.overrides ?? {}
   };
-  const colors = {
-    page: mergedTokens.surface?.page,
-    card: mergedTokens.surface?.card,
-    input: mergedTokens.surface?.input,
-    text: {
-      page: mergedTokens.text?.onPage?.default,
-      "page-muted": mergedTokens.text?.onPage?.muted,
-      surface: mergedTokens.text?.onSurface?.default,
-      "surface-muted": mergedTokens.text?.onSurface?.muted
-    },
-    primary: mergedTokens.buttons?.primary?.bg ?? mergedTokens.colors?.primary
-  };
-  const spacing = mergedTokens.spacing ?? {};
-  const borderRadius = mergedTokens.radii ?? {};
-  const boxShadow = mergedTokens.shadows ?? {};
-  const fontFamily = mergedTokens.typography?.families ?? {};
+  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 theme2 = {
     colors,
     spacing,
     borderRadius,
     boxShadow,
-    fontFamily
+    fontFamily,
+    fontSize
   };
   return { theme: theme2 };
 }
 // src/tailwind/preset.ts
-var { theme } = createSpectreTailwindTheme({ tokens: tokens });
+var { theme } = createSpectreTailwindTheme({ tokens: spectreTokens });
 var spectrePreset = {
   content: [],
-  theme: theme ?? {}
-  // ensure theme is never undefined
+  theme
+  // theme is guaranteed non-undefined now
 };
 // src/recipes/button.ts
@@ -57,19 +50,18 @@ 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 classes = ["sp-btn"];
   const variantMap = {
     primary: "sp-btn--primary",
     secondary: "sp-btn--secondary",
     ghost: "sp-btn--ghost",
-    danger: "sp-btn--danger"
+    danger: "sp-btn--danger",
+    success: "sp-btn--success"
   };
   classes.push(variantMap[variant]);
   const sizeMap = {
@@ -78,19 +70,11 @@ function getButtonClasses(opts = {}) {
     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();
+  return classes.join(" ").trim();
 }
 // src/recipes/card.ts
@@ -101,10 +85,10 @@ function getCardClasses(opts = {}) {
     padded = false,
     fullHeight = false
   } = opts;
-  const classes = [];
-  classes.push("sp-card");
+  const classes = ["sp-card"];
   const variantMap = {
     elevated: "sp-card--elevated",
+    flat: "sp-card--flat",
     outline: "sp-card--outline",
     ghost: "sp-card--ghost"
   };
@@ -112,33 +96,24 @@ function getCardClasses(opts = {}) {
   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();
+  return classes.join(" ").trim();
 }
 // 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 { state = "default", size = "md", fullWidth = false } = opts;
+  const classes = ["sp-input"];
   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();
+  if (state === "error") classes.push("sp-input--error");
+  if (state === "success") classes.push("sp-input--success");
+  if (state === "disabled") classes.push("sp-input--disabled");
+  if (fullWidth) classes.push("sp-input--full");
+  return classes.join(" ").trim();
 }
 export { createSpectreTailwindTheme, getButtonClasses, getCardClasses, getInputClasses, spectreBaseStylesPath, spectreComponentsStylesPath, spectrePreset, spectreStyles, spectreUtilitiesStylesPath };

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"],"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 as SpectreTokens),\n ...(overrides as Partial<SpectreTokens> \| undefined),\n };\n\n // Minimal, semantic color mapping\n const colors: Record<string, unknown> = {\n page: mergedTokens.surface?.page,\n card: mergedTokens.surface?.card,\n input: mergedTokens.surface?.input,\n text: {\n page: mergedTokens.text?.onPage?.default,\n \"page-muted\": mergedTokens.text?.onPage?.muted,\n surface: mergedTokens.text?.onSurface?.default,\n \"surface-muted\": mergedTokens.text?.onSurface?.muted,\n },\n primary:\n (mergedTokens as any).buttons?.primary?.bg ??\n (mergedTokens as any).colors?.primary,\n };\n\n const spacing: Record<string, unknown> =\n (mergedTokens as any).spacing ?? {};\n\n const borderRadius: Record<string, unknown> =\n (mergedTokens as any).radii ?? {};\n\n const boxShadow: Record<string, unknown> =\n (mergedTokens as any).shadows ?? {};\n\n const fontFamily: Record<string, unknown> =\n (mergedTokens as any).typography?.families ?? {};\n\n const theme: TailwindConfig[\"theme\"] = {\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 };\n\n return { theme };\n}\n","import type { Config as TailwindConfig } from \"tailwindcss\";\nimport { spectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\nconst { theme } = createSpectreTailwindTheme({ tokens: spectreTokens });\n\nexport const spectrePreset: TailwindConfig = {\n content: [],\n theme: theme ?? {}, // ensure theme is never undefined\n};\n\nexport default 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"]}
1	+ {"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"],"mappings":"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","file":"index.js","sourcesContent":["export const spectreBaseStylesPath = \"@phcdevworks/spectre-ui/base.css\";\nexport const spectreComponentsStylesPath = \"@phcdevworks/spectre-ui/components.css\";\nexport const spectreUtilitiesStylesPath = \"@phcdevworks/spectre-ui/utilities.css\";\nexport const spectreIndexStylesPath = \"@phcdevworks/spectre-ui/index.css\";\n\nexport const spectreStyles = {\n index: spectreIndexStylesPath,\n base: spectreBaseStylesPath,\n components: spectreComponentsStylesPath,\n utilities: spectreUtilitiesStylesPath,\n};\n","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 { spectreTokens } from \"../tokens\";\nimport { createSpectreTailwindTheme } from \"./theme\";\n\nconst { theme } = createSpectreTailwindTheme({ tokens: spectreTokens });\n\nexport const spectrePreset: TailwindConfig = {\n content: [],\n theme, // theme is guaranteed non-undefined now\n};\n\nexport const spectreTailwindPreset: TailwindConfig = spectrePreset;\n","export type ButtonVariant = \"primary\" \| \"secondary\" \| \"ghost\" \| \"danger\" \| \"success\";\nexport type ButtonSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface ButtonRecipeOptions {\n variant?: ButtonVariant;\n size?: ButtonSize;\n fullWidth?: boolean;\n loading?: boolean;\n disabled?: boolean;\n iconOnly?: boolean;\n}\n\nexport function getButtonClasses(opts: ButtonRecipeOptions = {}): string {\n const {\n variant = \"primary\",\n size = \"md\",\n fullWidth = false,\n loading = false,\n disabled = false,\n iconOnly = false,\n } = opts;\n\n const classes: string[] = [\"sp-btn\"];\n\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 success: \"sp-btn--success\",\n };\n classes.push(variantMap[variant]);\n\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 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 return classes.join(\" \").trim();\n}\n","export type CardVariant = \"elevated\" \| \"flat\" \| \"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\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[] = [\"sp-card\"];\n\n const variantMap: Record<CardVariant, string> = {\n elevated: \"sp-card--elevated\",\n flat: \"sp-card--flat\",\n outline: \"sp-card--outline\",\n ghost: \"sp-card--ghost\",\n };\n classes.push(variantMap[variant]);\n\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.join(\" \").trim();\n}\n","export type InputState = \"default\" \| \"error\" \| \"success\" \| \"disabled\";\nexport type InputSize = \"sm\" \| \"md\" \| \"lg\";\n\nexport interface InputRecipeOptions {\n state?: InputState;\n size?: InputSize;\n fullWidth?: boolean;\n}\n\nexport function getInputClasses(opts: InputRecipeOptions = {}): string {\n const { state = \"default\", size = \"md\", fullWidth = false } = opts;\n\n const classes: string[] = [\"sp-input\"];\n\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 // State\n if (state === \"error\") classes.push(\"sp-input--error\");\n if (state === \"success\") classes.push(\"sp-input--success\");\n if (state === \"disabled\") classes.push(\"sp-input--disabled\");\n\n if (fullWidth) classes.push(\"sp-input--full\");\n\n return classes.join(\" \").trim();\n}\n"]}

package/dist/utilities.css CHANGED Viewed

@@ -18,7 +18,8 @@
     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);
+    max-width: var(--sp-container-max-width,
+        var(--sp-breakpoint-2xl, 72rem));
   }
   .sp-section {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@phcdevworks/spectre-ui",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "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,7 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./index.css": "./dist/index.css",
     "./base.css": "./dist/base.css",
     "./components.css": "./dist/components.css",
     "./utilities.css": "./dist/utilities.css"
@@ -70,7 +71,7 @@
     "tailwindcss": "^3.4.0 || ^4.0.0"
   },
   "dependencies": {
-    "@phcdevworks/spectre-tokens": "^0.0.4"
+    "@phcdevworks/spectre-tokens": "^0.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",
@@ -78,6 +79,6 @@
     "tailwindcss": "^3.4.15",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "vitest": "^2.1.4"
+    "vitest": "^4.0.15"
   }
 }