@phcdevworks/spectre-ui 1.1.1 → 1.2.0

package/dist/index.css

@@ -17,9 +17,9 @@
   --sp-text-on-surface-subtle: #657287;
   --sp-text-on-surface-meta: #657287;
   --sp-component-card-text: #141b24;
-  --sp-component-card-text-muted: #657287;
+  --sp-component-card-text-muted: #4b576a;
   --sp-component-input-text: #141b24;
-  --sp-component-input-placeholder: #8a96ad;
+  --sp-component-input-placeholder: #657287;
   --sp-button-text-default: #141b24;
   --sp-button-text-on-primary: #ffffff;
   --sp-badge-neutral-bg: #eef1f6;
@@ -176,13 +176,25 @@
   --sp-font-md-weight: 500;
   --sp-font-lg-size: 1.25rem;
   --sp-font-lg-line-height: 2rem;
-  --sp-font-lg-weight: 500;
+  --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: 600;
+  --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;
@@ -254,6 +266,7 @@
   --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;
@@ -263,6 +276,7 @@
   --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;
@@ -270,6 +284,7 @@
   --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;
@@ -299,13 +314,16 @@
   --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: #8a96ad;
+  --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;
@@ -347,22 +365,22 @@
   --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: #d9dfeb;
-  --sp-text-on-page-subtle: #b7c1d4;
-  --sp-text-on-page-meta: #b7c1d4;
+  --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: #d9dfeb;
-  --sp-text-on-surface-subtle: #b7c1d4;
-  --sp-text-on-surface-meta: #b7c1d4;
+  --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: #d9dfeb;
+  --sp-component-card-text-muted: #b7c1d4;
   --sp-component-input-text: #eef1f6;
-  --sp-component-input-placeholder: #8a96ad;
+  --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: #082f49;
+  --sp-badge-info-bg: #0c4a6e;
   --sp-badge-info-text: #e0f2fe;
   --sp-badge-success-bg: #166534;
   --sp-badge-success-text: #dcfce7;
@@ -372,7 +390,7 @@
   --sp-badge-danger-text: #fee2e2;
   --sp-icon-box-bg: #222b38;
   --sp-icon-box-border: #374253;
-  --sp-icon-box-icon-default: #7dd3fc;
+  --sp-icon-box-icon-default: #38bdf8;
   --sp-icon-box-icon-success: #4ade80;
   --sp-icon-box-icon-warning: #ffc21a;
   --sp-icon-box-icon-danger: #f87171;
@@ -483,15 +501,14 @@
     --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);
-    --sp-component-button-cta-bg-disabled: var(--sp-color-accent-200);
-    --sp-component-button-cta-text: var(--sp-color-neutral-50);
-    --sp-component-button-cta-text-disabled: var(--sp-color-neutral-400);
-    --sp-component-button-cta-shadow: 0 4px 14px 0 var(--sp-color-accent-500) / 0.39;
+    /* CTA button alignment restored to official tokens as they now use the brand palette (Blue). */
+    --sp-component-button-cta-bg: var(--sp-button-cta-bg);
+    --sp-component-button-cta-bg-hover: var(--sp-button-cta-bghover);
+    --sp-component-button-cta-bg-active: var(--sp-button-cta-bgactive);
+    --sp-component-button-cta-bg-disabled: var(--sp-button-cta-bgdisabled);
+    --sp-component-button-cta-text: var(--sp-button-cta-text);
+    --sp-component-button-cta-text-disabled: var(--sp-button-cta-textdisabled);
+    --sp-component-button-cta-shadow: var(--sp-button-cta-shadow);
     --sp-component-button-accent-bg: var(--sp-button-accent-bg);
     --sp-component-button-accent-bg-hover: var(--sp-button-accent-bghover);
     --sp-component-button-accent-bg-active: var(--sp-button-accent-bgactive);
@@ -520,6 +537,7 @@
     --sp-component-input-role-bg: var(--sp-form-default-bg);
     --sp-component-input-role-text: var(--sp-form-default-text);
     --sp-component-input-role-placeholder: var(--sp-form-default-placeholder);
+    --sp-component-input-role-border-hover: var(--sp-form-hover-border);
     --sp-component-input-role-border-focus: var(--sp-form-focus-border);
     --sp-component-input-role-ring: var(--sp-form-focus-ring);
     --sp-component-input-role-border-error: var(--sp-form-invalid-border);
@@ -553,7 +571,7 @@
     --sp-component-badge-info-bg: var(--sp-badge-info-bg);
     --sp-component-badge-info-text: var(--sp-badge-info-text);
 
-    /* badge hover states — missing from core token exports, mapped to semantic logic */
+    /* badge hover states derived from Spectre token semantics */
     --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
     --sp-component-badge-secondary-bg-hover: var(--sp-button-secondary-bghover);
     --sp-component-badge-success-bg-hover: var(--sp-color-success-200);
@@ -596,10 +614,8 @@
     /* 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-bg: var(--sp-color-info-600);
+    --sp-component-pricing-card-featured-text: var(--sp-button-text-on-primary);
     --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-color-neutral-900);
@@ -610,22 +626,26 @@
     --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-color-neutral-500);
+    --sp-component-rating-size-sm: var(--sp-font-sm-size);
+    --sp-component-rating-size-md: var(--sp-font-md-size);
+    --sp-component-rating-size-lg: var(--sp-font-lg-size);
   }
 
-  /* dark mode overrides for complex component tokens not yet exported by spectre-tokens v2.x */
+  /* dark mode overrides mapped from Spectre token mode definitions */
   :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-text: var(--sp-color-neutral-200);
     --sp-component-testimonial-author-name: var(--sp-color-neutral-100);
-    --sp-component-testimonial-author-title: var(--sp-color-neutral-400);
+    --sp-component-testimonial-author-title: var(--sp-color-neutral-300);
     --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-pricing-card-price-description: var(--sp-color-neutral-300);
 
+    --sp-component-rating-star-filled: var(--sp-color-warning-400);
     --sp-component-rating-star-empty: var(--sp-color-neutral-700);
     --sp-component-rating-text: var(--sp-color-neutral-400);
 
@@ -637,14 +657,20 @@
     --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-bg: var(--sp-color-info-900);
     --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);
+    --sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
     --sp-component-badge-danger-bg-hover: var(--sp-color-error-700);
     --sp-component-badge-neutral-bg-hover: var(--sp-color-neutral-600);
     --sp-component-badge-info-bg-hover: var(--sp-color-info-700);
+
+    --sp-component-iconbox-primary-bg: var(--sp-color-brand-900);
+    --sp-component-iconbox-success-bg: var(--sp-color-success-900);
+    --sp-component-iconbox-warning-bg: var(--sp-color-warning-900);
+    --sp-component-iconbox-danger-bg: var(--sp-color-error-900);
+    --sp-component-iconbox-info-bg: var(--sp-color-info-900);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -684,6 +710,13 @@
     opacity: var(--sp-opacity-active);
   }
 
+  .sp-btn:focus-visible,
+  .sp-btn--focus,
+  .sp-btn.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
   .sp-btn--full {
     width: 100%;
   }
@@ -968,8 +1001,14 @@
     border-radius: var(--sp-radius-pill);
   }
 
+  .sp-input:hover,
+  .sp-input--hover {
+    border-color: var(--sp-component-input-role-border-hover);
+  }
+
   .sp-input:focus,
-  .sp-input--focus {
+  .sp-input--focus,
+  .sp-input.is-focus {
     border-color: var(--sp-component-input-role-border-focus);
     box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-input-role-ring);
     outline: none;
@@ -988,11 +1027,14 @@
     color: var(--sp-component-input-role-text);
   }
 
+  .sp-input:disabled,
+  .sp-input[aria-disabled="true"],
   .sp-input--disabled {
     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;
+    pointer-events: none;
   }
 
   .sp-input--disabled::placeholder {
@@ -1063,6 +1105,11 @@
     pointer-events: none;
   }
 
+  .sp-card--loading {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   .sp-card--interactive {
     cursor: pointer;
     transition:
@@ -1072,7 +1119,11 @@
 
   .sp-card--interactive:hover,
   .sp-card--interactive:focus-visible,
-  .sp-card--interactive:focus-within {
+  .sp-card--interactive:focus-within,
+  .sp-card--interactive.sp-card--hover,
+  .sp-card--interactive.is-hover,
+  .sp-card--interactive.sp-card--focus,
+  .sp-card--interactive.is-focus {
     transform: translateY(calc(var(--sp-component-border-width) * -1));
     box-shadow: var(--sp-component-card-shadow-elevated);
   }
@@ -1117,7 +1168,9 @@
     color: var(--sp-component-badge-primary-text);
   }
 
-  .sp-badge--primary.sp-badge--interactive:hover {
+  .sp-badge--primary.sp-badge--interactive:hover,
+  .sp-badge--primary.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--primary.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-primary-bg-hover);
   }
 
@@ -1127,7 +1180,9 @@
     border-color: var(--sp-component-badge-secondary-border);
   }
 
-  .sp-badge--secondary.sp-badge--interactive:hover {
+  .sp-badge--secondary.sp-badge--interactive:hover,
+  .sp-badge--secondary.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--secondary.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-secondary-bg-hover);
   }
 
@@ -1136,7 +1191,9 @@
     color: var(--sp-component-badge-success-text);
   }
 
-  .sp-badge--success.sp-badge--interactive:hover {
+  .sp-badge--success.sp-badge--interactive:hover,
+  .sp-badge--success.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--success.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-success-bg-hover);
   }
 
@@ -1145,7 +1202,9 @@
     color: var(--sp-component-badge-warning-text);
   }
 
-  .sp-badge--warning.sp-badge--interactive:hover {
+  .sp-badge--warning.sp-badge--interactive:hover,
+  .sp-badge--warning.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--warning.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-warning-bg-hover);
   }
 
@@ -1154,7 +1213,9 @@
     color: var(--sp-component-badge-danger-text);
   }
 
-  .sp-badge--danger.sp-badge--interactive:hover {
+  .sp-badge--danger.sp-badge--interactive:hover,
+  .sp-badge--danger.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--danger.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-danger-bg-hover);
   }
 
@@ -1163,7 +1224,9 @@
     color: var(--sp-component-badge-neutral-text);
   }
 
-  .sp-badge--neutral.sp-badge--interactive:hover {
+  .sp-badge--neutral.sp-badge--interactive:hover,
+  .sp-badge--neutral.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--neutral.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-neutral-bg-hover);
   }
 
@@ -1172,13 +1235,33 @@
     color: var(--sp-component-badge-info-text);
   }
 
-  .sp-badge--info.sp-badge--interactive:hover {
+  .sp-badge--info.sp-badge--interactive:hover,
+  .sp-badge--info.sp-badge--interactive.sp-badge--hover,
+  .sp-badge--info.sp-badge--interactive.is-hover {
     background-color: var(--sp-component-badge-info-bg-hover);
   }
 
   .sp-badge--interactive {
     cursor: pointer;
-    transition: background-color var(--sp-duration-fast) var(--sp-easing-out);
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-badge--interactive:active,
+  .sp-badge--interactive.sp-badge--active,
+  .sp-badge--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-badge--interactive:focus-visible,
+  .sp-badge--interactive.sp-badge--focus,
+  .sp-badge--interactive.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
   }
 
   .sp-badge--disabled {
@@ -1203,6 +1286,12 @@
     font-family: var(--sp-font-family-sans);
     font-weight: var(--sp-font-md-weight);
     line-height: 0;
+    transition:
+      background-color var(--sp-duration-fast) var(--sp-easing-out),
+      color var(--sp-duration-fast) var(--sp-easing-out),
+      box-shadow var(--sp-duration-fast) var(--sp-easing-out),
+      border-color var(--sp-duration-fast) var(--sp-easing-out),
+      opacity var(--sp-duration-fast) var(--sp-easing-out);
   }
 
   /* Harden icon rendering:
@@ -1296,9 +1385,35 @@
     color: var(--sp-component-iconbox-info-text);
   }
 
+  .sp-iconbox--interactive {
+    cursor: pointer;
+  }
+
+  .sp-iconbox--interactive:hover,
+  .sp-iconbox--interactive.sp-iconbox--hover,
+  .sp-iconbox--interactive.is-hover {
+    opacity: var(--sp-opacity-hover);
+  }
+
+  .sp-iconbox--interactive:active,
+  .sp-iconbox--interactive.sp-iconbox--active,
+  .sp-iconbox--interactive.is-active {
+    opacity: var(--sp-opacity-active);
+  }
+
+  .sp-iconbox--interactive:focus-visible,
+  .sp-iconbox--interactive.sp-iconbox--focus,
+  .sp-iconbox--interactive.is-focus {
+    outline: none;
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
+  }
+
+  .sp-iconbox:disabled,
+  .sp-iconbox[aria-disabled="true"],
   .sp-iconbox--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
   .sp-iconbox--loading {
@@ -1395,6 +1510,11 @@
     pointer-events: none;
   }
 
+  .sp-pricing-card--loading {
+    opacity: var(--sp-opacity-active);
+    pointer-events: none;
+  }
+
   .sp-pricing-card-badge {
     position: absolute;
     top: var(--sp-space-16);
@@ -1439,6 +1559,19 @@
     display: inline-flex;
     align-items: center;
     gap: var(--sp-space-8);
+    font-size: var(--sp-component-rating-size-md);
+  }
+
+  .sp-rating--sm {
+    font-size: var(--sp-component-rating-size-sm);
+  }
+
+  .sp-rating--md {
+    font-size: var(--sp-component-rating-size-md);
+  }
+
+  .sp-rating--lg {
+    font-size: var(--sp-component-rating-size-lg);
   }
 
   .sp-rating--disabled {

package/dist/index.d.cts

@@ -8,10 +8,22 @@ declare const spectreStyles: {
     utilities: string;
 };
 
-declare const buttonVariants: readonly ["primary", "secondary", "ghost", "danger", "success", "cta", "accent"];
-declare const buttonSizes: readonly ["sm", "md", "lg"];
-type ButtonVariant = (typeof buttonVariants)[number];
-type ButtonSize = (typeof buttonSizes)[number];
+declare const BUTTON_VARIANTS: {
+    readonly primary: true;
+    readonly secondary: true;
+    readonly ghost: true;
+    readonly danger: true;
+    readonly success: true;
+    readonly cta: true;
+    readonly accent: true;
+};
+declare const BUTTON_SIZES: {
+    readonly sm: true;
+    readonly md: true;
+    readonly lg: true;
+};
+type ButtonVariant = keyof typeof BUTTON_VARIANTS;
+type ButtonSize = keyof typeof BUTTON_SIZES;
 /**
  * Generate classes for the Button component.
  * @sync v2.x - Synced with latest design tokens, including CTA variants.
@@ -22,38 +34,73 @@ interface ButtonRecipeOptions {
     fullWidth?: boolean;
     loading?: boolean;
     disabled?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
     iconOnly?: boolean;
     pill?: boolean;
 }
 declare function getButtonClasses(opts?: ButtonRecipeOptions): string;
 
-declare const cardVariants: readonly ["elevated", "flat", "outline", "ghost"];
-type CardVariant = (typeof cardVariants)[number];
+declare const CARD_VARIANTS: {
+    readonly elevated: true;
+    readonly flat: true;
+    readonly outline: true;
+    readonly ghost: true;
+};
+type CardVariant = keyof typeof CARD_VARIANTS;
 interface CardRecipeOptions {
     variant?: CardVariant;
     interactive?: boolean;
     padded?: boolean;
     fullHeight?: boolean;
     disabled?: boolean;
+    loading?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
 }
 declare function getCardClasses(opts?: CardRecipeOptions): string;
 
-declare const inputStates: readonly ["default", "error", "success", "disabled", "loading"];
-declare const inputSizes: readonly ["sm", "md", "lg"];
-type InputState = (typeof inputStates)[number];
-type InputSize = (typeof inputSizes)[number];
+declare const INPUT_STATES: {
+    readonly default: true;
+    readonly error: true;
+    readonly success: true;
+    readonly disabled: true;
+    readonly loading: true;
+};
+declare const INPUT_SIZES: {
+    readonly sm: true;
+    readonly md: true;
+    readonly lg: true;
+};
+type InputState = keyof typeof INPUT_STATES;
+type InputSize = keyof typeof INPUT_SIZES;
 interface InputRecipeOptions {
     state?: InputState;
     size?: InputSize;
     fullWidth?: boolean;
     pill?: boolean;
+    focused?: boolean;
+    hovered?: boolean;
 }
 declare function getInputClasses(opts?: InputRecipeOptions): string;
 
-declare const badgeVariants: readonly ["primary", "secondary", "success", "warning", "danger", "neutral", "info"];
-declare const badgeSizes: readonly ["sm", "md", "lg"];
-type BadgeVariant = (typeof badgeVariants)[number];
-type BadgeSize = (typeof badgeSizes)[number];
+declare const BADGE_VARIANTS: {
+    readonly primary: true;
+    readonly secondary: true;
+    readonly success: true;
+    readonly warning: true;
+    readonly danger: true;
+    readonly neutral: true;
+    readonly info: true;
+};
+declare const BADGE_SIZES: {
+    readonly sm: true;
+    readonly md: true;
+    readonly lg: true;
+};
+type BadgeVariant = keyof typeof BADGE_VARIANTS;
+type BadgeSize = keyof typeof BADGE_SIZES;
 /**
  * Generate classes for the Badge component.
  * @sync v2.x - Synced with latest design tokens, including hover states.
@@ -62,20 +109,37 @@ interface BadgeRecipeOptions {
     variant?: BadgeVariant;
     size?: BadgeSize;
     interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
     disabled?: boolean;
     loading?: boolean;
 }
 declare function getBadgeClasses(opts?: BadgeRecipeOptions): string;
 
-declare const iconBoxVariants: readonly ["primary", "success", "warning", "danger", "info"];
-declare const iconBoxSizes: readonly ["sm", "md", "lg"];
-type IconBoxVariant = (typeof iconBoxVariants)[number];
-type IconBoxSize = (typeof iconBoxSizes)[number];
+declare const ICONBOX_VARIANTS: {
+    readonly primary: true;
+    readonly success: true;
+    readonly warning: true;
+    readonly danger: true;
+    readonly info: true;
+};
+declare const ICONBOX_SIZES: {
+    readonly sm: true;
+    readonly md: true;
+    readonly lg: true;
+};
+type IconBoxVariant = keyof typeof ICONBOX_VARIANTS;
+type IconBoxSize = keyof typeof ICONBOX_SIZES;
 interface IconBoxRecipeOptions {
     variant?: IconBoxVariant;
     size?: IconBoxSize;
     disabled?: boolean;
     loading?: boolean;
+    interactive?: boolean;
+    hovered?: boolean;
+    focused?: boolean;
+    active?: boolean;
 }
 declare function getIconBoxClasses(opts?: IconBoxRecipeOptions): string;
 
@@ -101,6 +165,7 @@ declare function getTestimonialAuthorTitleClasses(): string;
 interface PricingCardRecipeOptions {
     featured?: boolean;
     disabled?: boolean;
+    loading?: boolean;
 }
 declare function getPricingCardClasses(opts?: PricingCardRecipeOptions): string;
 declare function getPricingCardBadgeClasses(): string;
@@ -108,11 +173,18 @@ declare function getPricingCardPriceContainerClasses(): string;
 declare function getPricingCardPriceClasses(): string;
 declare function getPricingCardDescriptionClasses(): string;
 
+declare const RATING_SIZES: {
+    readonly sm: true;
+    readonly md: true;
+    readonly lg: true;
+};
+type RatingSize = keyof typeof RATING_SIZES;
 /**
  * Generate classes for the Rating component.
  * @sync v2.x - Synced with latest design tokens.
  */
 interface RatingRecipeOptions {
+    size?: RatingSize;
     disabled?: boolean;
     loading?: boolean;
 }