@phcdevworks/spectre-ui 1.5.0 → 1.6.0

package/dist/components.css

@@ -2,7 +2,7 @@
   --sp-surface-page: #f7f8fb;
   --sp-surface-card: #ffffff;
   --sp-surface-input: #ffffff;
-  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-overlay: rgba(0, 0, 0, 0.6);
   --sp-surface-alternate: #eef1f6;
   --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
   --sp-text-on-page-default: #141b24;
@@ -498,6 +498,8 @@
     --sp-component-badge-ghost-text: var(--sp-button-ghost-text);
     --sp-component-badge-accent-bg: var(--sp-button-accent-bg);
     --sp-component-badge-accent-text: var(--sp-button-accent-text);
+    --sp-component-badge-cta-bg: var(--sp-button-cta-bg);
+    --sp-component-badge-cta-text: var(--sp-button-cta-text);
 
     /* badge hover states derived from Spectre token semantics */
     --sp-component-badge-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -509,6 +511,7 @@
     --sp-component-badge-info-bg-hover: var(--sp-color-info-200);
     --sp-component-badge-ghost-bg-hover: var(--sp-button-ghost-bghover);
     --sp-component-badge-accent-bg-hover: var(--sp-button-accent-bghover);
+    --sp-component-badge-cta-bg-hover: var(--sp-button-cta-bghover);
 
     --sp-component-badge-padding-x-sm: var(--sp-space-8);
     --sp-component-badge-padding-x-md: var(--sp-space-12);
@@ -541,15 +544,27 @@
     --sp-component-iconbox-ghost-text: var(--sp-button-ghost-text);
     --sp-component-iconbox-accent-bg: var(--sp-button-accent-bg);
     --sp-component-iconbox-accent-text: var(--sp-button-accent-text);
+    --sp-component-iconbox-cta-bg: var(--sp-button-cta-bg);
+    --sp-component-iconbox-cta-text: var(--sp-button-cta-text);
 
     /* testimonial roles */
     --sp-component-testimonial-bg: var(--sp-surface-card);
     --sp-component-testimonial-bg-hover: var(--sp-color-neutral-50);
     --sp-component-testimonial-border: var(--sp-color-neutral-200);
+    --sp-component-testimonial-border-base: var(--sp-component-testimonial-ghost-border);
     --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-600);
     --sp-component-testimonial-quote-mark: var(--sp-color-neutral-600);
+    --sp-component-testimonial-shadow: var(--sp-shadow-none);
+    --sp-component-testimonial-shadow-elevated: var(--sp-shadow-lg);
+    --sp-component-testimonial-shadow-flat: var(--sp-shadow-none);
+    --sp-component-testimonial-shadow-outline: var(--sp-shadow-none);
+    --sp-component-testimonial-shadow-ghost: var(--sp-shadow-none);
+    --sp-component-testimonial-outline-bg: var(--sp-component-testimonial-bg);
+    --sp-component-testimonial-outline-border: var(--sp-component-testimonial-border);
+    --sp-component-testimonial-ghost-bg: var(--sp-button-ghost-bg);
+    --sp-component-testimonial-ghost-border: var(--sp-component-testimonial-ghost-bg);
 
     /* pricing card roles */
     --sp-component-pricing-card-bg: var(--sp-surface-card);
@@ -576,7 +591,7 @@
   :where(:root[data-spectre-theme="dark"]) {
     /* badge hover states remain manual as they are not currently exported as tokens */
     --sp-component-badge-success-bg-hover: var(--sp-color-success-700);
-    --sp-component-badge-warning-bg-hover: var(--sp-color-warning-800);
+    --sp-component-badge-warning-bg-hover: var(--sp-color-warning-700);
     --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);
@@ -879,12 +894,20 @@
     line-height: var(--sp-font-sm-line-height);
   }
 
+  .sp-label--disabled {
+    color: var(--sp-component-input-role-text-disabled);
+  }
+
   .sp-helper-text {
     color: var(--sp-text-on-surface-meta);
     font-size: var(--sp-font-xs-size);
     line-height: var(--sp-font-xs-line-height);
   }
 
+  .sp-helper-text--disabled {
+    opacity: var(--sp-opacity-disabled);
+  }
+
   .sp-error-message {
     color: var(--sp-component-input-role-text-error);
     font-size: var(--sp-font-xs-size);
@@ -1046,11 +1069,15 @@
     height: 100%;
   }
 
+  .sp-card:disabled,
+  .sp-card[aria-disabled="true"],
   .sp-card--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
+  .sp-card[aria-busy="true"],
   .sp-card--loading {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
@@ -1065,14 +1092,20 @@
   }
 
   .sp-card--interactive:hover,
-  .sp-card--interactive:focus-visible,
   .sp-card--interactive:focus-within,
   .sp-card--interactive.sp-card--hover,
-  .sp-card--interactive.is-hover,
+  .sp-card--interactive.is-hover {
+    outline: none;
+    transform: translateY(calc(var(--sp-component-border-width) * -1));
+    box-shadow: var(--sp-component-card-shadow-elevated);
+  }
+
+  .sp-card--interactive:focus-visible,
   .sp-card--interactive.sp-card--focus,
   .sp-card--interactive.is-focus {
+    outline: none;
     transform: translateY(calc(var(--sp-component-border-width) * -1));
-    box-shadow: var(--sp-component-card-shadow-elevated);
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);
   }
 
   .sp-card--interactive:active,
@@ -1127,8 +1160,8 @@
   }
 
   .sp-badge--primary.sp-badge--interactive:hover,
-  .sp-badge--primary.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--primary.sp-badge--interactive.is-hover {
+  .sp-badge--primary.sp-badge--hover,
+  .sp-badge--primary.is-hover {
     background-color: var(--sp-component-badge-primary-bg-hover);
   }
 
@@ -1139,8 +1172,8 @@
   }
 
   .sp-badge--secondary.sp-badge--interactive:hover,
-  .sp-badge--secondary.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--secondary.sp-badge--interactive.is-hover {
+  .sp-badge--secondary.sp-badge--hover,
+  .sp-badge--secondary.is-hover {
     background-color: var(--sp-component-badge-secondary-bg-hover);
   }
 
@@ -1150,8 +1183,8 @@
   }
 
   .sp-badge--success.sp-badge--interactive:hover,
-  .sp-badge--success.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--success.sp-badge--interactive.is-hover {
+  .sp-badge--success.sp-badge--hover,
+  .sp-badge--success.is-hover {
     background-color: var(--sp-component-badge-success-bg-hover);
   }
 
@@ -1161,8 +1194,8 @@
   }
 
   .sp-badge--warning.sp-badge--interactive:hover,
-  .sp-badge--warning.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--warning.sp-badge--interactive.is-hover {
+  .sp-badge--warning.sp-badge--hover,
+  .sp-badge--warning.is-hover {
     background-color: var(--sp-component-badge-warning-bg-hover);
   }
 
@@ -1172,8 +1205,8 @@
   }
 
   .sp-badge--danger.sp-badge--interactive:hover,
-  .sp-badge--danger.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--danger.sp-badge--interactive.is-hover {
+  .sp-badge--danger.sp-badge--hover,
+  .sp-badge--danger.is-hover {
     background-color: var(--sp-component-badge-danger-bg-hover);
   }
 
@@ -1183,8 +1216,8 @@
   }
 
   .sp-badge--neutral.sp-badge--interactive:hover,
-  .sp-badge--neutral.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--neutral.sp-badge--interactive.is-hover {
+  .sp-badge--neutral.sp-badge--hover,
+  .sp-badge--neutral.is-hover {
     background-color: var(--sp-component-badge-neutral-bg-hover);
   }
 
@@ -1194,8 +1227,8 @@
   }
 
   .sp-badge--info.sp-badge--interactive:hover,
-  .sp-badge--info.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--info.sp-badge--interactive.is-hover {
+  .sp-badge--info.sp-badge--hover,
+  .sp-badge--info.is-hover {
     background-color: var(--sp-component-badge-info-bg-hover);
   }
 
@@ -1205,8 +1238,8 @@
   }
 
   .sp-badge--ghost.sp-badge--interactive:hover,
-  .sp-badge--ghost.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--ghost.sp-badge--interactive.is-hover {
+  .sp-badge--ghost.sp-badge--hover,
+  .sp-badge--ghost.is-hover {
     background-color: var(--sp-component-badge-ghost-bg-hover);
   }
 
@@ -1216,11 +1249,22 @@
   }
 
   .sp-badge--accent.sp-badge--interactive:hover,
-  .sp-badge--accent.sp-badge--interactive.sp-badge--hover,
-  .sp-badge--accent.sp-badge--interactive.is-hover {
+  .sp-badge--accent.sp-badge--hover,
+  .sp-badge--accent.is-hover {
     background-color: var(--sp-component-badge-accent-bg-hover);
   }
 
+  .sp-badge--cta {
+    background-color: var(--sp-component-badge-cta-bg);
+    color: var(--sp-component-badge-cta-text);
+  }
+
+  .sp-badge--cta.sp-badge--interactive:hover,
+  .sp-badge--cta.sp-badge--hover,
+  .sp-badge--cta.is-hover {
+    background-color: var(--sp-component-badge-cta-bg-hover);
+  }
+
   .sp-badge--interactive {
     cursor: pointer;
     transition:
@@ -1232,24 +1276,27 @@
   }
 
   .sp-badge--interactive:active,
-  .sp-badge--interactive.sp-badge--active,
-  .sp-badge--interactive.is-active {
+  .sp-badge--active,
+  .sp-badge.is-active {
     opacity: var(--sp-opacity-active);
   }
 
   .sp-badge--interactive:focus-visible,
-  .sp-badge--interactive.sp-badge--focus,
-  .sp-badge--interactive.is-focus {
+  .sp-badge--focus,
+  .sp-badge.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,
+  .sp-badge[aria-disabled="true"],
   .sp-badge--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
   }
 
-  .sp-badge--loading {
+  .sp-badge--loading,
+  .sp-badge[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1334,6 +1381,10 @@
     font-size: var(--sp-font-lg-size);
   }
 
+  .sp-iconbox--full {
+    width: 100%;
+  }
+
   .sp-iconbox--pill {
     border-radius: var(--sp-radius-pill);
   }
@@ -1384,25 +1435,30 @@
     color: var(--sp-component-iconbox-accent-text);
   }
 
+  .sp-iconbox--cta {
+    background-color: var(--sp-component-iconbox-cta-bg);
+    color: var(--sp-component-iconbox-cta-text);
+  }
+
   .sp-iconbox--interactive {
     cursor: pointer;
   }
 
   .sp-iconbox--interactive:hover,
-  .sp-iconbox--interactive.sp-iconbox--hover,
-  .sp-iconbox--interactive.is-hover {
+  .sp-iconbox--hover,
+  .sp-iconbox.is-hover {
     opacity: var(--sp-opacity-hover);
   }
 
   .sp-iconbox--interactive:active,
-  .sp-iconbox--interactive.sp-iconbox--active,
-  .sp-iconbox--interactive.is-active {
+  .sp-iconbox--active,
+  .sp-iconbox.is-active {
     opacity: var(--sp-opacity-active);
   }
 
   .sp-iconbox--interactive:focus-visible,
-  .sp-iconbox--interactive.sp-iconbox--focus,
-  .sp-iconbox--interactive.is-focus {
+  .sp-iconbox--focus,
+  .sp-iconbox.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);
   }
@@ -1415,7 +1471,8 @@
     cursor: not-allowed;
   }
 
-  .sp-iconbox--loading {
+  .sp-iconbox--loading,
+  .sp-iconbox[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1424,20 +1481,46 @@
 
   .sp-testimonial {
     background-color: var(--sp-component-testimonial-bg);
-    border: var(--sp-component-border-width) solid var(--sp-component-testimonial-border);
+    border: var(--sp-component-border-width) solid var(--sp-component-testimonial-border-base);
     border-radius: var(--sp-radius-lg);
     padding: var(--sp-space-32);
     display: flex;
     flex-direction: column;
     gap: var(--sp-space-24);
+    box-shadow: var(--sp-component-testimonial-shadow);
+  }
+
+  .sp-testimonial--elevated {
+    box-shadow: var(--sp-component-testimonial-shadow-elevated);
+  }
+
+  .sp-testimonial--flat {
+    box-shadow: var(--sp-component-testimonial-shadow-flat);
+    border-color: var(--sp-component-testimonial-border);
+  }
+
+  .sp-testimonial--outline {
+    background-color: var(--sp-component-testimonial-outline-bg);
+    border-color: var(--sp-component-testimonial-outline-border);
+    box-shadow: var(--sp-component-testimonial-shadow-outline);
   }
 
+  .sp-testimonial--ghost {
+    background-color: var(--sp-component-testimonial-ghost-bg);
+    border-color: var(--sp-component-testimonial-ghost-border);
+    box-shadow: var(--sp-component-testimonial-shadow-ghost);
+  }
+
+  .sp-testimonial:disabled,
+  .sp-testimonial[aria-disabled="true"],
   .sp-testimonial--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
+    cursor: not-allowed;
   }
 
-  .sp-testimonial--loading {
+  .sp-testimonial--loading,
+  .sp-testimonial[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1459,7 +1542,7 @@
   .sp-testimonial--interactive.sp-testimonial--hover,
   .sp-testimonial--interactive.is-hover {
     transform: translateY(calc(var(--sp-component-border-width) * -1));
-    box-shadow: var(--sp-shadow-lg);
+    box-shadow: var(--sp-component-testimonial-shadow-elevated);
     background-color: var(--sp-component-testimonial-bg-hover);
   }
 
@@ -1543,12 +1626,15 @@
     border: none;
   }
 
+  .sp-pricing-card:disabled,
+  .sp-pricing-card[aria-disabled="true"],
   .sp-pricing-card--disabled {
     opacity: var(--sp-opacity-disabled);
     pointer-events: none;
   }
 
-  .sp-pricing-card--loading {
+  .sp-pricing-card--loading,
+  .sp-pricing-card[aria-busy="true"] {
     opacity: var(--sp-opacity-active);
     pointer-events: none;
   }
@@ -1564,7 +1650,7 @@
   .sp-pricing-card--interactive:hover,
   .sp-pricing-card--interactive:focus-within,
   .sp-pricing-card--interactive.sp-pricing-card--hover,
-  .sp-pricing-card--interactive.is-hover {
+  .sp-pricing-card.is-hover {
     transform: translateY(calc(var(--sp-component-border-width) * -1));
     box-shadow: var(--sp-shadow-lg);
     background-color: var(--sp-component-pricing-card-bg-hover);
@@ -1574,28 +1660,28 @@
   .sp-pricing-card--featured.sp-pricing-card--interactive:focus-visible,
   .sp-pricing-card--featured.sp-pricing-card--interactive:focus-within,
   .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--hover,
-  .sp-pricing-card--featured.sp-pricing-card--interactive.is-hover,
+  .sp-pricing-card--featured.is-hover,
   .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--focus,
-  .sp-pricing-card--featured.sp-pricing-card--interactive.is-focus {
+  .sp-pricing-card--featured.is-focus {
     transform: scale(1.05) translateY(calc(var(--sp-component-border-width) * -1));
   }
 
   .sp-pricing-card--interactive:active,
   .sp-pricing-card--interactive.sp-pricing-card--active,
-  .sp-pricing-card--interactive.is-active {
+  .sp-pricing-card.is-active {
     opacity: var(--sp-opacity-active);
     transform: translateY(0);
   }
 
   .sp-pricing-card--featured.sp-pricing-card--interactive:active,
   .sp-pricing-card--featured.sp-pricing-card--interactive.sp-pricing-card--active,
-  .sp-pricing-card--featured.sp-pricing-card--interactive.is-active {
+  .sp-pricing-card--featured.is-active {
     transform: scale(1.05) translateY(0);
   }
 
   .sp-pricing-card--interactive:focus-visible,
   .sp-pricing-card--interactive.sp-pricing-card--focus,
-  .sp-pricing-card--interactive.is-focus {
+  .sp-pricing-card.is-focus {
     outline: none;
     transform: translateY(calc(var(--sp-component-border-width) * -1));
     box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-color-focus-primary);

package/dist/index.cjs

@@ -160,9 +160,9 @@ function getCardClasses(opts = {}) {
     fullHeight && "sp-card--full",
     disabled && "sp-card--disabled",
     loading && "sp-card--loading",
-    hovered && "sp-card--hover",
-    focused && "sp-card--focus",
-    active && "sp-card--active"
+    hovered && "sp-card--hover is-hover",
+    focused && "sp-card--focus is-focus",
+    active && "sp-card--active is-active"
   );
 }
 
@@ -224,6 +224,26 @@ function getInputClasses(opts = {}) {
     pill && "sp-input--pill"
   );
 }
+function getInputWrapperClasses() {
+  return cx("sp-input-wrapper");
+}
+function getInputLabelClasses(opts = {}) {
+  const { disabled = false } = opts;
+  return cx(
+    "sp-label",
+    disabled && "sp-label--disabled"
+  );
+}
+function getInputHelperTextClasses(opts = {}) {
+  const { disabled = false } = opts;
+  return cx(
+    "sp-helper-text",
+    disabled && "sp-helper-text--disabled"
+  );
+}
+function getInputErrorMessageClasses() {
+  return cx("sp-error-message");
+}
 
 // src/recipes/badge.ts
 var BADGE_VARIANTS = {
@@ -235,7 +255,8 @@ var BADGE_VARIANTS = {
   neutral: true,
   info: true,
   ghost: true,
-  accent: true
+  accent: true,
+  cta: true
 };
 var BADGE_SIZES = {
   sm: true,
@@ -246,12 +267,12 @@ function getBadgeClasses(opts = {}) {
   const {
     variant: variantInput,
     size: sizeInput,
-    interactive,
-    hovered,
-    focused,
-    active,
-    disabled,
-    loading,
+    interactive = false,
+    hovered = false,
+    focused = false,
+    active = false,
+    disabled = false,
+    loading = false,
     fullWidth = false
   } = opts;
   const variant = resolveOption({
@@ -275,7 +296,8 @@ function getBadgeClasses(opts = {}) {
     neutral: "sp-badge--neutral",
     info: "sp-badge--info",
     ghost: "sp-badge--ghost",
-    accent: "sp-badge--accent"
+    accent: "sp-badge--accent",
+    cta: "sp-badge--cta"
   };
   const variantClass = variantMap[variant];
   const sizeMap = {
@@ -289,9 +311,9 @@ function getBadgeClasses(opts = {}) {
     variantClass,
     sizeClass,
     interactive && "sp-badge--interactive",
-    hovered && "sp-badge--hover",
-    focused && "sp-badge--focus",
-    active && "sp-badge--active",
+    hovered && "sp-badge--hover is-hover",
+    focused && "sp-badge--focus is-focus",
+    active && "sp-badge--active is-active",
     disabled && "sp-badge--disabled",
     loading && "sp-badge--loading",
     fullWidth && "sp-badge--full"
@@ -308,7 +330,8 @@ var ICONBOX_VARIANTS = {
   info: true,
   neutral: true,
   ghost: true,
-  accent: true
+  accent: true,
+  cta: true
 };
 var ICONBOX_SIZES = {
   sm: true,
@@ -325,7 +348,8 @@ function getIconBoxClasses(opts = {}) {
     hovered = false,
     focused = false,
     active = false,
-    pill = false
+    pill = false,
+    fullWidth = false
   } = opts;
   const variant = resolveOption({
     name: "icon box variant",
@@ -348,7 +372,8 @@ function getIconBoxClasses(opts = {}) {
     info: "sp-iconbox--info",
     neutral: "sp-iconbox--neutral",
     ghost: "sp-iconbox--ghost",
-    accent: "sp-iconbox--accent"
+    accent: "sp-iconbox--accent",
+    cta: "sp-iconbox--cta"
   };
   const variantClass = variantMap[variant];
   const sizeMap = {
@@ -364,16 +389,24 @@ function getIconBoxClasses(opts = {}) {
     disabled && "sp-iconbox--disabled",
     loading && "sp-iconbox--loading",
     interactive && "sp-iconbox--interactive",
-    hovered && "sp-iconbox--hover",
-    focused && "sp-iconbox--focus",
-    active && "sp-iconbox--active",
-    pill && "sp-iconbox--pill"
+    hovered && "sp-iconbox--hover is-hover",
+    focused && "sp-iconbox--focus is-focus",
+    active && "sp-iconbox--active is-active",
+    pill && "sp-iconbox--pill",
+    fullWidth && "sp-iconbox--full"
   );
 }
 
 // src/recipes/testimonial.ts
+var TESTIMONIAL_VARIANTS = {
+  elevated: true,
+  flat: true,
+  outline: true,
+  ghost: true
+};
 function getTestimonialClasses(opts = {}) {
   const {
+    variant: variantInput,
     disabled = false,
     loading = false,
     interactive = false,
@@ -382,14 +415,28 @@ function getTestimonialClasses(opts = {}) {
     active = false,
     fullHeight = false
   } = opts;
+  const variant = resolveOption({
+    name: "testimonial variant",
+    value: variantInput,
+    allowed: TESTIMONIAL_VARIANTS,
+    fallback: "outline"
+  });
+  const variantMap = {
+    elevated: "sp-testimonial--elevated",
+    flat: "sp-testimonial--flat",
+    outline: "sp-testimonial--outline",
+    ghost: "sp-testimonial--ghost"
+  };
+  const variantClass = variantMap[variant];
   return cx(
     "sp-testimonial",
+    variantClass,
     disabled && "sp-testimonial--disabled",
     loading && "sp-testimonial--loading",
     interactive && "sp-testimonial--interactive",
-    hovered && "sp-testimonial--hover",
-    focused && "sp-testimonial--focus",
-    active && "sp-testimonial--active",
+    hovered && "sp-testimonial--hover is-hover",
+    focused && "sp-testimonial--focus is-focus",
+    active && "sp-testimonial--active is-active",
     fullHeight && "sp-testimonial--full"
   );
 }
@@ -427,9 +474,9 @@ function getPricingCardClasses(opts = {}) {
     disabled && "sp-pricing-card--disabled",
     loading && "sp-pricing-card--loading",
     interactive && "sp-pricing-card--interactive",
-    hovered && "sp-pricing-card--hover",
-    focused && "sp-pricing-card--focus",
-    active && "sp-pricing-card--active",
+    hovered && "sp-pricing-card--hover is-hover",
+    focused && "sp-pricing-card--focus is-focus",
+    active && "sp-pricing-card--active is-active",
     fullHeight && "sp-pricing-card--full"
   );
 }
@@ -507,6 +554,10 @@ exports.getButtonClasses = getButtonClasses;
 exports.getCardClasses = getCardClasses;
 exports.getIconBoxClasses = getIconBoxClasses;
 exports.getInputClasses = getInputClasses;
+exports.getInputErrorMessageClasses = getInputErrorMessageClasses;
+exports.getInputHelperTextClasses = getInputHelperTextClasses;
+exports.getInputLabelClasses = getInputLabelClasses;
+exports.getInputWrapperClasses = getInputWrapperClasses;
 exports.getPricingCardBadgeClasses = getPricingCardBadgeClasses;
 exports.getPricingCardClasses = getPricingCardClasses;
 exports.getPricingCardDescriptionClasses = getPricingCardDescriptionClasses;