@phcdevworks/spectre-ui 1.0.0 → 1.1.1

package/LICENSE

@@ -1,21 +1,20 @@
 MIT License
 
-Copyright (c) 2025 PHCDevworks
+Copyright (c) 2026 PHCDevworks
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,121 +1,186 @@
 # @phcdevworks/spectre-ui
 
-### **The Blueprint (Layer 2 of the Spectre 8-Layer Arsenal)**
+[![GitHub issues](https://img.shields.io/github/issues/phcdevworks/spectre-ui)](https://github.com/phcdevworks/spectre-ui/issues)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/phcdevworks/spectre-ui)](https://github.com/phcdevworks/spectre-ui/pulls)
+[![License](https://img.shields.io/github/license/phcdevworks/spectre-ui)](LICENSE)
 
-`@phcdevworks/spectre-ui` is the structural engine of the Spectre design system. It consumes the raw "DNA" from `@phcdevworks/spectre-tokens` and translates it into standard CSS, a localized Tailwind preset, and type-safe class recipes.
+`@phcdevworks/spectre-ui` is the implementation layer between
+[`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens)
+and downstream adapters or apps.
 
-🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)** | 🏛️ **[Spectre Arsenal](https://github.com/phcdevworks)**
+Maintained by PHCDevworks, it turns Spectre tokens into reusable CSS bundles,
+Tailwind tooling, and type-safe class recipes. It is framework-agnostic,
+token-driven, and follows a strict zero-hex policy so visual values do not drift
+locally.
 
----
+[Contributing](CONTRIBUTING.md) | [Changelog](CHANGELOG.md) |
+[Security Policy](SECURITY.md)
 
-## 🏗️ Core Architecture
+## Key capabilities
 
-This package operates as a pure structural layer. It follows a strict **Zero-Hex Enforcement** policy—visual values are imported via `--sp-*` variables, ensuring that if tokens change, the entire UI layer updates automatically.
+- Ships precompiled CSS: `index.css`, `base.css`, `components.css`, and
+  `utilities.css`
+- Provides Tailwind theme and preset helpers built from Spectre tokens
+- Exports type-safe class recipes for shared UI patterns
+- Keeps CSS classes and recipe APIs aligned
+- Gives adapters and apps a stable styling contract instead of re-implementing
+  classes
+- Enforces a zero-hex approach so visual values stay tied to
+  `@phcdevworks/spectre-tokens`
 
-- 💎 **Token-Driven**: Fully compatible with `@phcdevworks/spectre-tokens` v2.0.0.
-- 📦 **Precompiled CSS**: Ships `base`, `components`, and `utilities` bundles.
-- 🧪 **Type-Safe Recipes**: Pure JS/TS functions for generating framework-agnostic class strings.
-- 🌪️ **Tailwind Preset**: Mirrors the design scale into the Tailwind utility engine.
+## Installation
 
----
+```bash
+npm install @phcdevworks/spectre-ui
+```
 
-## 🚀 Quick Start
+## Quick start
 
-### Installation
+### CSS import
 
-```bash
-npm install @phcdevworks/spectre-ui
+Import the full stylesheet:
+
+```ts
+import '@phcdevworks/spectre-ui/index.css'
 ```
 
-### 1. Import CSS
-For most applications, importing the unified `index.css` is recommended.
+Or import the bundles separately:
 
 ```ts
-import "@phcdevworks/spectre-ui/index.css";
+import '@phcdevworks/spectre-ui/base.css'
+import '@phcdevworks/spectre-ui/components.css'
+import '@phcdevworks/spectre-ui/utilities.css'
 ```
 
-### 2. Tailwind Integration
-Synchronize your Tailwind theme with the Spectre token scale.
+### Tailwind preset usage
+
+Use Spectre tokens as the source of truth for your Tailwind theme:
 
 ```ts
 // tailwind.config.ts
-import { createSpectreTailwindPreset } from "@phcdevworks/spectre-ui/tailwind";
-import { spectreTokens } from "@phcdevworks/spectre-tokens";
+import type { Config } from 'tailwindcss'
+import { createSpectreTailwindPreset } from '@phcdevworks/spectre-ui/tailwind'
+import { spectreTokens } from '@phcdevworks/spectre-tokens'
 
-const spectrePreset = createSpectreTailwindPreset({ tokens: spectreTokens });
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx,js,jsx,html}'],
+  presets: [createSpectreTailwindPreset({ tokens: spectreTokens })]
+}
 
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  presets: [spectrePreset],
-};
+export default config
 ```
 
----
+### Class recipe usage
 
-## 🧩 Class Recipes
+Class recipes are the stable styling API for adapters and apps. They return
+predictable class strings and keep behavior consistent across frameworks.
 
-Recipes are the API contract for all Spectre framework adapters. They ensure `.sp-btn--primary` always behaves identical whether used in React, Astro, or WordPress.
+```ts
+import {
+  getBadgeClasses,
+  getButtonClasses,
+  getPricingCardClasses
+} from '@phcdevworks/spectre-ui'
+
+const cta = getButtonClasses({ variant: 'primary', size: 'lg' })
+const badge = getBadgeClasses({ variant: 'success', size: 'sm' })
+const pricingCard = getPricingCardClasses({ featured: true })
+```
 
-### Core Components
-| Recipe | Primary Variants | Sizes |
-| :--- | :--- | :--- |
-| `getButtonClasses` | `primary`, `secondary`, `ghost`, `danger`, `success` | `sm`, `md`, `lg` |
-| `getBadgeClasses` | `primary`, `success`, `warning`, `danger` | `sm`, `md`, `lg` |
-| `getCardClasses` | `elevated`, `outline`, `ghost` | `padded` |
-| `getInputClasses` | `default`, `error`, `success` | `sm`, `md`, `lg` |
-| `getIconBoxClasses` | `primary`, `success`, `warning`, `danger`, `info` | `sm`, `md`, `lg` |
+## What this package owns
 
-### Specialized Components
-| Recipe | Description |
-| :--- | :--- |
-| `getPricingCardClasses` | Semantic structure for pricing tables and plans. |
-| `getTestimonialClasses` | Compound classes for quotes, authors, and roles. |
-| `getRatingClasses` | Layout recipes for star ratings and count labels. |
+- Token-driven CSS implementation
+- Precompiled CSS bundles and utility classes
+- Tailwind helpers and preset generation
+- Type-safe class recipes for shared UI contracts
+- Stable styling behavior consumed by downstream adapters and apps
 
-```ts
-import { getButtonClasses, getPricingCardClasses } from "@phcdevworks/spectre-ui";
+Golden rule: consume tokens, do not redefine them.
 
-// Generate a primary CTA class string
-const cta = getButtonClasses({ variant: "primary", size: "lg" });
-// Result: "sp-btn sp-btn--primary sp-btn--lg"
+## What this package does not own
 
-// Generate pricing card layout
-const pricing = getPricingCardClasses({ featured: true });
-```
+- Design values or semantic meaning That belongs to
+  `@phcdevworks/spectre-tokens`.
+- Framework-specific component delivery Adapters and apps consume
+  `@phcdevworks/spectre-ui`; they do not recreate its styling logic.
+- Local visual values outside the token contract Hardcoded hex, spacing, or
+  shadow values are drift unless clearly intentional and documented.
 
----
+## Package exports / API surface
 
-## 🏛️ The Spectre Suite Hierarchy
+### Root package
 
-Spectre is built on a non-negotiable hierarchy to prevent style leakage and duplication:
+Exports CSS path constants and class recipes, including:
 
-1.  **Layer 1: Tokens** ([@phcdevworks/spectre-tokens](https://github.com/phcdevworks/spectre-tokens)) – The source of truth for all design values.
-2.  **Layer 2: UI (This Package)** – Translates tokens into CSS structure and recipes.
-3.  **Layer 3: Adapters** (WordPress, Astro, etc.) – Thin bridges that map Layer 2 to specific frameworks.
+- `spectreStyles`
+- `getButtonClasses`
+- `getBadgeClasses`
+- `getCardClasses`
+- `getInputClasses`
+- `getIconBoxClasses`
+- `getPricingCardClasses`
+- `getTestimonialClasses`
+- `getRatingClasses`
 
-> **The Golden Rule**: Tokens define *meaning*. UI defines *structure*. Adapters define *delivery*.
+Recipes also export their related TypeScript option and variant types.
 
----
+### Tailwind entry point
 
-## 🛠️ Development
+`@phcdevworks/spectre-ui/tailwind` exports:
 
-### Build Pipeline
-Compiles TypeScript, processes PostCSS, and bundles artifacts into `dist/`.
+- `createSpectreTailwindPreset`
+- `createSpectreTailwindTheme`
 
-```bash
-npm run build
-```
+### CSS entry points
+
+- `@phcdevworks/spectre-ui/index.css`
+- `@phcdevworks/spectre-ui/base.css`
+- `@phcdevworks/spectre-ui/components.css`
+- `@phcdevworks/spectre-ui/utilities.css`
+
+## Relationship to the rest of Spectre
+
+Spectre keeps responsibilities separate:
+
+- [`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens)
+  defines design values and semantic meaning
+- `@phcdevworks/spectre-ui` turns those tokens into reusable CSS, Tailwind
+  tooling, and type-safe class recipes
+- Adapters and apps consume `@phcdevworks/spectre-ui` instead of re-implementing
+  its styling layer
+
+That separation keeps recipe behavior consistent across frameworks and reduces
+implementation drift.
+
+## Development
 
-### Testing
-Run the Vitest suite to verify recipe outputs and token-first compliance.
+Install dependencies, then run the package checks:
 
 ```bash
+npm run build
 npm test
 ```
 
----
+Key source areas:
+
+- `src/styles/` for source CSS
+- `src/recipes/` for class recipes
+- `src/tailwind/` for Tailwind helpers
+- `tests/` for contract and regression coverage
+
+## Contributing
+
+PHCDevworks maintains this package as part of the Spectre suite.
+
+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
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for the full workflow.
 
-## ❤️ Support & Community
+## License
 
-- **Sponsor**: [GitHub Sponsors](https://github.com/sponsors/phcdevworks) | [Buy Me a Coffee](https://buymeacoffee.com/phcdevworks)
-- **License**: MIT © [PHCDevworks](https://phcdevworks.com)
+MIT © PHCDevworks. See [LICENSE](LICENSE).

package/dist/base.css

@@ -54,7 +54,7 @@
   }
 
   :focus-visible {
-    outline: var(--sp-focus-ring-width) solid var(--sp-color-focus-primary);
+    outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style) var(--sp-color-focus-primary);
     outline-offset: var(--sp-focus-ring-offset);
   }
 

package/dist/components.css

@@ -1,8 +1,8 @@
 @layer components {
 
   :root {
-    /* structural border width — swap to token when spectre-tokens ships sp-border-width-base */
-    --sp-component-border-width: 1px;
+    /* structural border width */
+    --sp-component-border-width: var(--sp-border-width-base);
 
     /* button roles */
     --sp-component-button-border-base: var(--sp-component-button-ghost-bg);
@@ -39,6 +39,8 @@
     --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
     --sp-component-button-success-text: var(--sp-button-success-text);
     --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
+    /* FLAG: buttons.cta tokens in spectre-tokens v2.x use warning.500 (Gold),
+       which violates the Aesthetic Audit guardrails. Remaining on accent palette. */
     --sp-component-button-cta-bg: var(--sp-color-accent-600);
     --sp-component-button-cta-bg-hover: var(--sp-color-accent-700);
     --sp-component-button-cta-bg-active: var(--sp-color-accent-800);
@@ -142,34 +144,57 @@
     /* testimonial roles */
     --sp-component-testimonial-bg: var(--sp-surface-card);
     --sp-component-testimonial-border: var(--sp-color-neutral-200);
-    --sp-component-testimonial-text: var(--sp-text-on-surface-muted);
-    --sp-component-testimonial-author-name: var(--sp-text-on-surface-default);
-    --sp-component-testimonial-author-title: var(--sp-text-on-surface-subtle);
+    --sp-component-testimonial-text: var(--sp-color-neutral-700);
+    --sp-component-testimonial-author-name: var(--sp-color-neutral-900);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-500);
     --sp-component-testimonial-quote-mark: var(--sp-color-neutral-300);
 
     /* pricing card roles */
     --sp-component-pricing-card-bg: var(--sp-surface-card);
     --sp-component-pricing-card-border: var(--sp-color-neutral-200);
+    /* FLAG: component.pricingCard.featuredBg in tokens is info.600 (Blue), which clashing
+       with the warning.500 (Gold) badge. Remaining on neutral-900 to pass Aesthetic Audit. */
     --sp-component-pricing-card-featured-bg: var(--sp-color-neutral-900);
     --sp-component-pricing-card-featured-text: var(--sp-color-neutral-50);
     --sp-component-pricing-card-featured-badge-bg: var(--sp-color-warning-500);
     --sp-component-pricing-card-featured-badge-text: var(--sp-color-neutral-900);
-    --sp-component-pricing-card-price: var(--sp-text-on-surface-default);
+    --sp-component-pricing-card-price: var(--sp-color-neutral-900);
     --sp-component-pricing-card-featured-price: var(--sp-color-neutral-50);
-    --sp-component-pricing-card-price-description: var(--sp-text-on-surface-subtle);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-500);
 
     /* rating roles */
     --sp-component-rating-star-filled: var(--sp-color-warning-500);
     --sp-component-rating-star-empty: var(--sp-color-neutral-200);
-    --sp-component-rating-text: var(--sp-text-on-surface-subtle);
+    --sp-component-rating-text: var(--sp-color-neutral-500);
   }
 
   /* dark mode overrides for complex component tokens not yet exported by spectre-tokens v2.x */
   :root[data-spectre-theme="dark"] {
+    --sp-component-testimonial-bg: var(--sp-color-neutral-800);
     --sp-component-testimonial-border: var(--sp-color-neutral-700);
+    --sp-component-testimonial-text: var(--sp-color-neutral-300);
+    --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
     --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
+
+    --sp-component-pricing-card-bg: var(--sp-color-neutral-800);
     --sp-component-pricing-card-border: var(--sp-color-neutral-700);
+    --sp-component-pricing-card-price: var(--sp-color-neutral-100);
+    --sp-component-pricing-card-price-description: var(--sp-color-neutral-400);
+
     --sp-component-rating-star-empty: var(--sp-color-neutral-700);
+    --sp-component-rating-text: var(--sp-color-neutral-400);
+
+    --sp-component-badge-success-bg: var(--sp-color-success-800);
+    --sp-component-badge-success-text: var(--sp-color-success-100);
+    --sp-component-badge-warning-bg: var(--sp-color-warning-800);
+    --sp-component-badge-warning-text: var(--sp-color-warning-100);
+    --sp-component-badge-danger-bg: var(--sp-color-error-800);
+    --sp-component-badge-danger-text: var(--sp-color-error-100);
+    --sp-component-badge-neutral-bg: var(--sp-color-neutral-700);
+    --sp-component-badge-neutral-text: var(--sp-color-neutral-100);
+    --sp-component-badge-info-bg: var(--sp-color-info-800);
+    --sp-component-badge-info-text: var(--sp-color-info-100);
 
     --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
     --sp-component-badge-warning-bg-hover: var(--sp-color-warning-700);
@@ -495,6 +520,10 @@
     width: 100%;
   }
 
+  .sp-input--pill {
+    border-radius: var(--sp-radius-pill);
+  }
+
   .sp-input:focus,
   .sp-input--focus {
     border-color: var(--sp-component-input-role-border-focus);
@@ -531,6 +560,11 @@
     box-shadow: none;
   }
 
+  .sp-input--loading {
+    pointer-events: none;
+    opacity: var(--sp-opacity-active);
+  }
+
   /* CARDS ---------------------------------------------------------------- */
 
   .sp-card {
@@ -580,6 +614,11 @@
     height: 100%;
   }
 
+  .sp-card--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
   .sp-card--interactive {
     cursor: pointer;
     transition:
@@ -698,6 +737,16 @@
     transition: background-color var(--sp-duration-fast) var(--sp-easing-out);
   }
 
+  .sp-badge--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .sp-badge--loading {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   /* ICON BOXES ----------------------------------------------------------- */
 
   .sp-iconbox {
@@ -803,6 +852,16 @@
     color: var(--sp-component-iconbox-info-text);
   }
 
+  .sp-iconbox--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .sp-iconbox--loading {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   /* TESTIMONIALS --------------------------------------------------------- */
 
   .sp-testimonial {
@@ -815,6 +874,16 @@
     gap: var(--sp-space-24);
   }
 
+  .sp-testimonial--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .sp-testimonial--loading {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   .sp-testimonial-quote {
     color: var(--sp-component-testimonial-text);
     font-size: var(--sp-font-lg-size);
@@ -877,6 +946,11 @@
     border: none;
   }
 
+  .sp-pricing-card--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
   .sp-pricing-card-badge {
     position: absolute;
     top: var(--sp-space-16);
@@ -923,6 +997,16 @@
     gap: var(--sp-space-8);
   }
 
+  .sp-rating--disabled {
+    opacity: var(--sp-opacity-disabled);
+    pointer-events: none;
+  }
+
+  .sp-rating--loading {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   .sp-rating-stars {
     display: flex;
     gap: var(--sp-space-4);
@@ -934,7 +1018,7 @@
     align-items: center;
     justify-content: center;
   }
-  
+
   .sp-rating-star--filled {
     color: var(--sp-component-rating-star-filled);
   }

package/dist/index.cjs

@@ -126,7 +126,8 @@ function getCardClasses(opts = {}) {
     variant: variantInput,
     interactive = false,
     padded = false,
-    fullHeight = false
+    fullHeight = false,
+    disabled = false
   } = opts;
   const variant = resolveOption({
     name: "card variant",
@@ -146,7 +147,8 @@ function getCardClasses(opts = {}) {
     variantClass,
     interactive && "sp-card--interactive",
     padded && "sp-card--padded",
-    fullHeight && "sp-card--full"
+    fullHeight && "sp-card--full",
+    disabled && "sp-card--disabled"
   );
 }
 
@@ -155,7 +157,8 @@ var INPUT_STATES = {
   default: true,
   error: true,
   success: true,
-  disabled: true
+  disabled: true,
+  loading: true
 };
 var INPUT_SIZES = {
   sm: true,
@@ -163,7 +166,7 @@ var INPUT_SIZES = {
   lg: true
 };
 function getInputClasses(opts = {}) {
-  const { state: stateInput, size: sizeInput, fullWidth = false } = opts;
+  const { state: stateInput, size: sizeInput, fullWidth = false, pill = false } = opts;
   const state = resolveOption({
     name: "input state",
     value: stateInput,
@@ -189,7 +192,9 @@ function getInputClasses(opts = {}) {
     state === "success" && "sp-input--success",
     // Visual state only; actual disabled attribute is handled by adapters.
     state === "disabled" && "sp-input--disabled",
-    fullWidth && "sp-input--full"
+    state === "loading" && "sp-input--loading",
+    fullWidth && "sp-input--full",
+    pill && "sp-input--pill"
   );
 }
 
@@ -209,7 +214,7 @@ var BADGE_SIZES = {
   lg: true
 };
 function getBadgeClasses(opts = {}) {
-  const { variant: variantInput, size: sizeInput, interactive } = opts;
+  const { variant: variantInput, size: sizeInput, interactive, disabled, loading } = opts;
   const variant = resolveOption({
     name: "badge variant",
     value: variantInput,
@@ -242,7 +247,9 @@ function getBadgeClasses(opts = {}) {
     "sp-badge",
     variantClass,
     sizeClass,
-    interactive && "sp-badge--interactive"
+    interactive && "sp-badge--interactive",
+    disabled && "sp-badge--disabled",
+    loading && "sp-badge--loading"
   );
 }
 
@@ -260,7 +267,7 @@ var ICONBOX_SIZES = {
   lg: true
 };
 function getIconBoxClasses(opts = {}) {
-  const { variant: variantInput, size: sizeInput } = opts;
+  const { variant: variantInput, size: sizeInput, disabled = false, loading = false } = opts;
   const variant = resolveOption({
     name: "icon box variant",
     value: variantInput,
@@ -287,12 +294,23 @@ function getIconBoxClasses(opts = {}) {
     lg: "sp-iconbox--lg"
   };
   const sizeClass = sizeMap[size];
-  return cx("sp-iconbox", variantClass, sizeClass);
+  return cx(
+    "sp-iconbox",
+    variantClass,
+    sizeClass,
+    disabled && "sp-iconbox--disabled",
+    loading && "sp-iconbox--loading"
+  );
 }
 
 // src/recipes/testimonial.ts
-function getTestimonialClasses(_opts = {}) {
-  return cx("sp-testimonial");
+function getTestimonialClasses(opts = {}) {
+  const { disabled = false, loading = false } = opts;
+  return cx(
+    "sp-testimonial",
+    disabled && "sp-testimonial--disabled",
+    loading && "sp-testimonial--loading"
+  );
 }
 function getTestimonialQuoteClasses() {
   return cx("sp-testimonial-quote");
@@ -312,10 +330,11 @@ function getTestimonialAuthorTitleClasses() {
 
 // src/recipes/pricing-card.ts
 function getPricingCardClasses(opts = {}) {
-  const { featured = false } = opts;
+  const { featured = false, disabled = false } = opts;
   return cx(
     "sp-pricing-card",
-    featured && "sp-pricing-card--featured"
+    featured && "sp-pricing-card--featured",
+    disabled && "sp-pricing-card--disabled"
   );
 }
 function getPricingCardBadgeClasses() {
@@ -332,8 +351,13 @@ function getPricingCardDescriptionClasses() {
 }
 
 // src/recipes/rating.ts
-function getRatingClasses(_opts = {}) {
-  return cx("sp-rating");
+function getRatingClasses(opts = {}) {
+  const { disabled = false, loading = false } = opts;
+  return cx(
+    "sp-rating",
+    disabled && "sp-rating--disabled",
+    loading && "sp-rating--loading"
+  );
 }
 function getRatingStarsClasses() {
   return cx("sp-rating-stars");