@phcdevworks/spectre-ui 1.1.1 → 1.2.0

package/README.md

@@ -60,11 +60,11 @@ Use Spectre tokens as the source of truth for your Tailwind theme:
 // tailwind.config.ts
 import type { Config } from 'tailwindcss'
 import { createSpectreTailwindPreset } from '@phcdevworks/spectre-ui/tailwind'
-import { spectreTokens } from '@phcdevworks/spectre-tokens'
+import tokens from '@phcdevworks/spectre-tokens'
 
 const config: Config = {
   content: ['./src/**/*.{ts,tsx,js,jsx,html}'],
-  presets: [createSpectreTailwindPreset({ tokens: spectreTokens })]
+  presets: [createSpectreTailwindPreset({ tokens })]
 }
 
 export default config
@@ -110,19 +110,44 @@ Golden rule: consume tokens, do not redefine them.
 
 ### Root package
 
-Exports CSS path constants and class recipes, including:
+The root package exports CSS path constants plus the recipe functions re-exported
+from `src/recipes/index.ts`.
+
+Root constants:
 
 - `spectreStyles`
-- `getButtonClasses`
+- `spectreBaseStylesPath`
+- `spectreComponentsStylesPath`
+- `spectreUtilitiesStylesPath`
+
+Root recipe functions:
+
 - `getBadgeClasses`
+- `getButtonClasses`
 - `getCardClasses`
-- `getInputClasses`
 - `getIconBoxClasses`
+- `getInputClasses`
 - `getPricingCardClasses`
-- `getTestimonialClasses`
 - `getRatingClasses`
+- `getTestimonialClasses`
 
-Recipes also export their related TypeScript option and variant types.
+Root recipe helper functions:
+
+- `getPricingCardBadgeClasses`
+- `getPricingCardDescriptionClasses`
+- `getPricingCardPriceClasses`
+- `getPricingCardPriceContainerClasses`
+- `getRatingStarClasses`
+- `getRatingStarsClasses`
+- `getRatingTextClasses`
+- `getTestimonialAuthorClasses`
+- `getTestimonialAuthorInfoClasses`
+- `getTestimonialAuthorNameClasses`
+- `getTestimonialAuthorTitleClasses`
+- `getTestimonialQuoteClasses`
+
+The root package also re-exports the related recipe option, variant, size, and
+state TypeScript types defined by those recipes.
 
 ### Tailwind entry point
 
@@ -154,12 +179,9 @@ implementation drift.
 
 ## Development
 
-Install dependencies, then run the package checks:
+Install dependencies, then run the package verification flow:
 
-```bash
-npm run build
-npm test
-```
+    npm run ci:verify
 
 Key source areas:
 
@@ -167,6 +189,18 @@ Key source areas:
 - `src/recipes/` for class recipes
 - `src/tailwind/` for Tailwind helpers
 - `tests/` for contract and regression coverage
+- `examples/` for visual demos and verification fixtures
+
+## Examples
+
+Use [`examples/examples.html`](examples/examples.html) as the visual index for
+the package demos.
+
+Available examples include:
+
+- `vanilla.html` for the broad component showcase
+- `showroom.html` for a richer marketing-style composition
+- `verification.html` and focused verification fixtures for regression checks
 
 ## Contributing
 
@@ -177,7 +211,7 @@ When contributing:
 - keep styling token-driven
 - keep recipe APIs and CSS classes in sync
 - avoid local visual values unless clearly intentional
-- run `npm run build` and `npm test` before opening a pull request
+- run npm run ci:verify before opening a pull request
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for the full workflow.
 

package/dist/base.css

@@ -1,3 +1,396 @@
+:root {
+  --sp-surface-page: #f7f8fb;
+  --sp-surface-card: #ffffff;
+  --sp-surface-input: #ffffff;
+  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
+  --sp-text-on-page-default: #141b24;
+  --sp-text-on-page-muted: #4b576a;
+  --sp-text-on-page-subtle: #657287;
+  --sp-text-on-page-meta: #657287;
+  --sp-text-on-surface-default: #141b24;
+  --sp-text-on-surface-muted: #4b576a;
+  --sp-text-on-surface-subtle: #657287;
+  --sp-text-on-surface-meta: #657287;
+  --sp-component-card-text: #141b24;
+  --sp-component-card-text-muted: #4b576a;
+  --sp-component-input-text: #141b24;
+  --sp-component-input-placeholder: #657287;
+  --sp-button-text-default: #141b24;
+  --sp-button-text-on-primary: #ffffff;
+  --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-text: #374253;
+  --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-text: #075985;
+  --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-text: #15803d;
+  --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-text: #8f5200;
+  --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-text: #b91c1c;
+  --sp-icon-box-bg: #ffffff;
+  --sp-icon-box-border: #d9dfeb;
+  --sp-icon-box-icon-default: #0369a1;
+  --sp-icon-box-icon-success: #16a34a;
+  --sp-icon-box-icon-warning: #d48806;
+  --sp-icon-box-icon-danger: #dc2626;
+  --sp-color-brand-50: #eef4ff;
+  --sp-color-brand-100: #d9e7ff;
+  --sp-color-brand-200: #b9d2ff;
+  --sp-color-brand-300: #8ab6ff;
+  --sp-color-brand-400: #5a92ff;
+  --sp-color-brand-500: #336df4;
+  --sp-color-brand-600: #1f57db;
+  --sp-color-brand-700: #1946b4;
+  --sp-color-brand-800: #173b8f;
+  --sp-color-brand-900: #16336f;
+  --sp-color-neutral-50: #f7f8fb;
+  --sp-color-neutral-100: #eef1f6;
+  --sp-color-neutral-200: #d9dfeb;
+  --sp-color-neutral-300: #b7c1d4;
+  --sp-color-neutral-400: #8a96ad;
+  --sp-color-neutral-500: #657287;
+  --sp-color-neutral-600: #4b576a;
+  --sp-color-neutral-700: #374253;
+  --sp-color-neutral-800: #222b38;
+  --sp-color-neutral-900: #141b24;
+  --sp-color-accent-50: #f6f2ff;
+  --sp-color-accent-100: #eee5ff;
+  --sp-color-accent-200: #ddccff;
+  --sp-color-accent-300: #c3a7ff;
+  --sp-color-accent-400: #a279ff;
+  --sp-color-accent-500: #854ff7;
+  --sp-color-accent-600: #7135dd;
+  --sp-color-accent-700: #5d28b8;
+  --sp-color-accent-800: #4d2393;
+  --sp-color-accent-900: #401f75;
+  --sp-color-success-50: #f0fdf4;
+  --sp-color-success-100: #dcfce7;
+  --sp-color-success-200: #bbf7d0;
+  --sp-color-success-300: #86efac;
+  --sp-color-success-400: #4ade80;
+  --sp-color-success-500: #22c55e;
+  --sp-color-success-600: #16a34a;
+  --sp-color-success-700: #15803d;
+  --sp-color-success-800: #166534;
+  --sp-color-success-900: #14532d;
+  --sp-color-warning-50: #fffbea;
+  --sp-color-warning-100: #fff1c2;
+  --sp-color-warning-200: #ffe08a;
+  --sp-color-warning-300: #ffd24d;
+  --sp-color-warning-400: #ffc21a;
+  --sp-color-warning-500: #f5ad00;
+  --sp-color-warning-600: #d48806;
+  --sp-color-warning-700: #ad6800;
+  --sp-color-warning-800: #8f5200;
+  --sp-color-warning-900: #734000;
+  --sp-color-error-50: #fef2f2;
+  --sp-color-error-100: #fee2e2;
+  --sp-color-error-200: #fecaca;
+  --sp-color-error-300: #fca5a5;
+  --sp-color-error-400: #f87171;
+  --sp-color-error-500: #ef4444;
+  --sp-color-error-600: #dc2626;
+  --sp-color-error-700: #b91c1c;
+  --sp-color-error-800: #991b1b;
+  --sp-color-error-900: #7f1d1d;
+  --sp-color-info-50: #f0f9ff;
+  --sp-color-info-100: #e0f2fe;
+  --sp-color-info-200: #bae6fd;
+  --sp-color-info-300: #7dd3fc;
+  --sp-color-info-400: #38bdf8;
+  --sp-color-info-500: #0ea5e9;
+  --sp-color-info-600: #0369a1;
+  --sp-color-info-700: #075985;
+  --sp-color-info-800: #0c4a6e;
+  --sp-color-info-900: #082f49;
+  --sp-color-indigo-500: #5b6ee1;
+  --sp-color-indigo-600: #4d61db;
+  --sp-color-violet-600: #6f3fd7;
+  --sp-color-focus-primary: #336df4;
+  --sp-color-focus-error: #ef4444;
+  --sp-color-focus-info: #0369a1;
+  --sp-color-white-0: #;
+  --sp-color-white-1: f;
+  --sp-color-white-2: f;
+  --sp-color-white-3: f;
+  --sp-color-white-4: f;
+  --sp-color-white-5: f;
+  --sp-color-white-6: f;
+  --sp-color-black-0: #;
+  --sp-color-black-1: 0;
+  --sp-color-black-2: 0;
+  --sp-color-black-3: 0;
+  --sp-color-black-4: 0;
+  --sp-color-black-5: 0;
+  --sp-color-black-6: 0;
+  --sp-space-0: 0rem;
+  --sp-space-4: 0.25rem;
+  --sp-space-8: 0.5rem;
+  --sp-space-12: 0.75rem;
+  --sp-space-16: 1rem;
+  --sp-space-20: 1.25rem;
+  --sp-space-24: 1.5rem;
+  --sp-space-32: 2rem;
+  --sp-space-40: 2.5rem;
+  --sp-space-48: 3rem;
+  --sp-space-56: 3.5rem;
+  --sp-space-64: 4rem;
+  --sp-space-80: 5rem;
+  --sp-space-96: 6rem;
+  --sp-layout-section-padding-sm: 1.5rem;
+  --sp-layout-section-padding-md: 2rem;
+  --sp-layout-section-padding-lg: 3rem;
+  --sp-layout-section-gap-sm: 1rem;
+  --sp-layout-section-gap-md: 1.5rem;
+  --sp-layout-section-gap-lg: 2rem;
+  --sp-layout-stack-gap-sm: 0.5rem;
+  --sp-layout-stack-gap-md: 0.75rem;
+  --sp-layout-stack-gap-lg: 1rem;
+  --sp-layout-container-padding-inline-sm: 1rem;
+  --sp-layout-container-padding-inline-md: 1.5rem;
+  --sp-layout-container-padding-inline-lg: 2rem;
+  --sp-layout-container-max-width: 72rem;
+  --sp-border-width-base: 1px;
+  --sp-border-width-thick: 2px;
+  --sp-radius-none: 0;
+  --sp-radius-sm: 2px;
+  --sp-radius-md: 4px;
+  --sp-radius-lg: 8px;
+  --sp-radius-pill: 999px;
+  --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  --sp-font-family-serif: 'Times New Roman', Times, serif;
+  --sp-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --sp-font-xs-size: 0.75rem;
+  --sp-font-xs-line-height: 1.25rem;
+  --sp-font-xs-weight: 400;
+  --sp-font-sm-size: 0.875rem;
+  --sp-font-sm-line-height: 1.5rem;
+  --sp-font-sm-weight: 400;
+  --sp-font-md-size: 1rem;
+  --sp-font-md-line-height: 1.75rem;
+  --sp-font-md-weight: 500;
+  --sp-font-lg-size: 1.25rem;
+  --sp-font-lg-line-height: 2rem;
+  --sp-font-lg-weight: 600;
+  --sp-font-xl-size: 1.5rem;
+  --sp-font-xl-line-height: 2.125rem;
+  --sp-font-xl-weight: 600;
+  --sp-font-2xl-size: 1.875rem;
+  --sp-font-2xl-line-height: 2.5rem;
+  --sp-font-2xl-weight: 700;
+  --sp-font-3xl-size: 2.25rem;
+  --sp-font-3xl-line-height: 2.75rem;
+  --sp-font-3xl-weight: 700;
+  --sp-font-4xl-size: 3rem;
+  --sp-font-4xl-line-height: 3.5rem;
+  --sp-font-4xl-weight: 800;
+  --sp-font-5xl-size: 3.75rem;
+  --sp-font-5xl-line-height: 4.25rem;
+  --sp-font-5xl-weight: 800;
+  --sp-font-6xl-size: 4.5rem;
+  --sp-font-6xl-line-height: 5rem;
+  --sp-font-6xl-weight: 900;
+  --sp-font-xs-letter-spacing: 0.02em;
+  --sp-text-on-page-default: #141b24;
+  --sp-text-on-page-muted: #4b576a;
+  --sp-text-on-page-subtle: #657287;
+  --sp-text-on-page-meta: #657287;
+  --sp-text-on-surface-default: #141b24;
+  --sp-text-on-surface-muted: #4b576a;
+  --sp-text-on-surface-subtle: #657287;
+  --sp-text-on-surface-meta: #657287;
+  --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-text: #374253;
+  --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-text: #075985;
+  --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-text: #166534;
+  --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-text: #8f5200;
+  --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-text: #991b1b;
+  --sp-icon-box-bg: #ffffff;
+  --sp-icon-box-border: #d9dfeb;
+  --sp-icon-box-icon-default: #0369a1;
+  --sp-icon-box-icon-success: #16a34a;
+  --sp-icon-box-icon-warning: #d48806;
+  --sp-icon-box-icon-danger: #dc2626;
+  --sp-shadow-none: none;
+  --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
+  --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
+  --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
+  --sp-breakpoint-sm: 640px;
+  --sp-breakpoint-md: 768px;
+  --sp-breakpoint-lg: 1024px;
+  --sp-breakpoint-xl: 1280px;
+  --sp-breakpoint-2xl: 1536px;
+  --sp-z-index-base: 0;
+  --sp-z-index-dropdown: 1000;
+  --sp-z-index-sticky: 1100;
+  --sp-z-index-fixed: 1200;
+  --sp-z-index-overlay: 1300;
+  --sp-z-index-modal: 1400;
+  --sp-z-index-popover: 1500;
+  --sp-z-index-tooltip: 1600;
+  --sp-duration-instant: 75ms;
+  --sp-duration-fast: 150ms;
+  --sp-duration-base: 200ms;
+  --sp-duration-moderate: 300ms;
+  --sp-duration-slow: 500ms;
+  --sp-duration-slower: 700ms;
+  --sp-easing-linear: linear;
+  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-opacity-disabled: 0.38;
+  --sp-opacity-hover: 0.92;
+  --sp-opacity-active: 0.84;
+  --sp-opacity-focus: 1;
+  --sp-opacity-overlay: 0.5;
+  --sp-opacity-tooltip: 0.95;
+  --sp-focus-ring-width: 2px;
+  --sp-focus-ring-offset: 2px;
+  --sp-focus-ring-style: solid;
+  --sp-min-touch-target: 44px;
+  --sp-min-text-size: 16px;
+  --sp-button-primary-bg: #0369a1;
+  --sp-button-primary-bghover: #075985;
+  --sp-button-primary-bgactive: #0c4a6e;
+  --sp-button-primary-bgdisabled: #d9dfeb;
+  --sp-button-primary-text: #ffffff;
+  --sp-button-primary-textdisabled: #8a96ad;
+  --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-primary-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-secondary-bg: #ffffff;
+  --sp-button-secondary-bghover: #f7f8fb;
+  --sp-button-secondary-bgactive: #eef1f6;
+  --sp-button-secondary-bgdisabled: #f7f8fb;
+  --sp-button-secondary-text: #075985;
+  --sp-button-secondary-textdisabled: #8a96ad;
+  --sp-button-secondary-border: #075985;
+  --sp-button-secondary-borderdisabled: #d9dfeb;
+  --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-secondary-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-ghost-bg: transparent;
+  --sp-button-ghost-bghover: #f0f9ff;
+  --sp-button-ghost-bgactive: #e0f2fe;
+  --sp-button-ghost-bgdisabled: transparent;
+  --sp-button-ghost-text: #075985;
+  --sp-button-ghost-textdisabled: #8a96ad;
+  --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-ghost-focusvisible: {colors.info.500} / 0.4;
+  --sp-button-danger-bg: #dc2626;
+  --sp-button-danger-bghover: #b91c1c;
+  --sp-button-danger-bgactive: #991b1b;
+  --sp-button-danger-bgdisabled: #fecaca;
+  --sp-button-danger-text: #ffffff;
+  --sp-button-danger-textdisabled: #8a96ad;
+  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-success-bg: #15803d;
+  --sp-button-success-bghover: #166534;
+  --sp-button-success-bgactive: #14532d;
+  --sp-button-success-bgdisabled: #bbf7d0;
+  --sp-button-success-text: #ffffff;
+  --sp-button-success-textdisabled: #8a96ad;
+  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-cta-bg: #1f57db;
+  --sp-button-cta-bghover: #1946b4;
+  --sp-button-cta-bgactive: #173b8f;
+  --sp-button-cta-bgdisabled: #b9d2ff;
+  --sp-button-cta-text: #ffffff;
+  --sp-button-cta-textdisabled: #8a96ad;
+  --sp-button-cta-shadow: 0 4px 14px 0 rgba(51, 109, 244, 0.39);
+  --sp-button-cta-focusring: rgba(51, 109, 244, 0.4);
+  --sp-button-accent-bg: #7135dd;
+  --sp-button-accent-bghover: #5d28b8;
+  --sp-button-accent-bgactive: #4d2393;
+  --sp-button-accent-bgdisabled: #ddccff;
+  --sp-button-accent-text: #ffffff;
+  --sp-button-accent-textdisabled: #8a96ad;
+  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
+  --sp-button-accent-focusvisible: {colors.accent.500} / 0.4;
+  --sp-form-default-bg: #ffffff;
+  --sp-form-default-border: #b7c1d4;
+  --sp-form-default-text: #141b24;
+  --sp-form-default-placeholder: #657287;
+  --sp-form-hover-border: #0ea5e9;
+  --sp-form-focus-border: #0ea5e9;
+  --sp-form-focus-ring: #0ea5e9;
+  --sp-form-focusvisible-border: {colors.info.500};
+  --sp-form-focusvisible-ring: {colors.info.500};
+  --sp-form-valid-border: #22c55e;
+  --sp-form-valid-bg: #f0fdf4;
+  --sp-form-valid-text: #15803d;
+  --sp-form-invalid-border: #ef4444;
+  --sp-form-invalid-bg: #fef2f2;
+  --sp-form-invalid-text: #b91c1c;
+  --sp-form-disabled-bg: #f7f8fb;
+  --sp-form-disabled-border: #d9dfeb;
+  --sp-form-disabled-text: #8a96ad;
+  --sp-animation-fadein-duration: 200ms;
+  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-fadein-keyframes: fade-in;
+  --sp-animation-fadeout-duration: 150ms;
+  --sp-animation-fadeout-easing: cubic-bezier(0.4, 0, 1, 1);
+  --sp-animation-fadeout-keyframes: fade-out;
+  --sp-animation-slideup-duration: 300ms;
+  --sp-animation-slideup-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-slideup-keyframes: slide-up;
+  --sp-animation-slidedown-duration: 300ms;
+  --sp-animation-slidedown-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-slidedown-keyframes: slide-down;
+  --sp-animation-scalein-duration: 200ms;
+  --sp-animation-scalein-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --sp-animation-scalein-keyframes: scale-in;
+  --sp-animation-bounce-duration: 300ms;
+  --sp-animation-bounce-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-bounce-keyframes: bounce;
+  --sp-animation-shake-duration: 250ms;
+  --sp-animation-shake-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-shake-keyframes: shake;
+  --sp-animation-pulse-duration: 1200ms;
+  --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-pulse-keyframes: pulse;
+}
+:root[data-spectre-theme="dark"] {
+  --sp-surface-page: #141b24;
+  --sp-surface-card: #222b38;
+  --sp-surface-input: #374253;
+  --sp-surface-overlay: #222b38;
+  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-text-on-page-default: #f7f8fb;
+  --sp-text-on-page-muted: #b7c1d4;
+  --sp-text-on-page-subtle: #8a96ad;
+  --sp-text-on-page-meta: #8a96ad;
+  --sp-text-on-surface-default: #eef1f6;
+  --sp-text-on-surface-muted: #b7c1d4;
+  --sp-text-on-surface-subtle: #8a96ad;
+  --sp-text-on-surface-meta: #8a96ad;
+  --sp-component-card-text: #eef1f6;
+  --sp-component-card-text-muted: #b7c1d4;
+  --sp-component-input-text: #eef1f6;
+  --sp-component-input-placeholder: #b7c1d4;
+  --sp-button-text-default: #eef1f6;
+  --sp-button-text-on-primary: #ffffff;
+  --sp-badge-neutral-bg: #374253;
+  --sp-badge-neutral-text: #eef1f6;
+  --sp-badge-info-bg: #0c4a6e;
+  --sp-badge-info-text: #e0f2fe;
+  --sp-badge-success-bg: #166534;
+  --sp-badge-success-text: #dcfce7;
+  --sp-badge-warning-bg: #8f5200;
+  --sp-badge-warning-text: #fff1c2;
+  --sp-badge-danger-bg: #991b1b;
+  --sp-badge-danger-text: #fee2e2;
+  --sp-icon-box-bg: #222b38;
+  --sp-icon-box-border: #374253;
+  --sp-icon-box-icon-default: #38bdf8;
+  --sp-icon-box-icon-success: #4ade80;
+  --sp-icon-box-icon-warning: #ffc21a;
+  --sp-icon-box-icon-danger: #f87171;
+}
 @layer base {
 
   *,