@phcdevworks/spectre-ui 0.1.0 → 0.2.0

package/README.md

@@ -91,6 +91,8 @@ import {
   getButtonClasses,
   getCardClasses,
   getInputClasses,
+  getBadgeClasses,
+  getIconBoxClasses,
 } from "@phcdevworks/spectre-ui";
 
 const buttonClasses = getButtonClasses({
@@ -109,6 +111,12 @@ const inputClasses = getInputClasses({
   fullWidth: true,
 });
 // "sp-input sp-input--error sp-input--sm sp-input--full"
+
+const badgeClasses = getBadgeClasses({ variant: "success", size: "sm" });
+// "sp-badge sp-badge--success sp-badge--sm"
+
+const iconBoxClasses = getIconBoxClasses({ variant: "info", size: "lg" });
+// "sp-iconbox sp-iconbox--info sp-iconbox--lg"
 ```
 
 ## Component Surfaces
@@ -162,6 +170,39 @@ getCardClasses({ variant: "outline" }); // Bordered
 getCardClasses({ variant: "ghost" }); // Transparent
 ```
 
+### Badge variants
+
+```ts
+getBadgeClasses({ variant: "primary" }); // Primary/default
+getBadgeClasses({ variant: "success" }); // Success state
+getBadgeClasses({ variant: "warning" }); // Warning state
+getBadgeClasses({ variant: "danger" }); // Danger/error state
+```
+
+Available sizes: `sm`, `md`, `lg`
+
+```ts
+getBadgeClasses({ variant: "success", size: "sm" });
+// "sp-badge sp-badge--success sp-badge--sm"
+```
+
+### Icon Box variants
+
+```ts
+getIconBoxClasses({ variant: "primary" }); // Primary/default
+getIconBoxClasses({ variant: "success" }); // Success state
+getIconBoxClasses({ variant: "warning" }); // Warning state
+getIconBoxClasses({ variant: "danger" }); // Danger/error state
+getIconBoxClasses({ variant: "info" }); // Info state
+```
+
+Available sizes: `sm`, `md`, `lg`
+
+```ts
+getIconBoxClasses({ variant: "info", size: "lg" });
+// "sp-iconbox sp-iconbox--info sp-iconbox--lg"
+```
+
 ## Surface & Typography Roles
 
 Spectre exposes semantic layers that decouple structural styles from raw palette values. Override these roles at any scope (root, layout, or component wrapper) to restyle whole experiences without editing CSS.
@@ -281,9 +322,15 @@ import type {
   InputState,
   InputSize,
   CardVariant,
+  BadgeVariant,
+  BadgeSize,
+  IconBoxVariant,
+  IconBoxSize,
   ButtonRecipeOptions,
   CardRecipeOptions,
   InputRecipeOptions,
+  BadgeRecipeOptions,
+  IconBoxRecipeOptions,
 } from "@phcdevworks/spectre-ui";
 ```
 

package/dist/components.css

@@ -84,6 +84,50 @@
         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)));
+
+    /* badge roles */
+    --sp-component-badge-font: var(--sp-font-family-sans, system-ui);
+    --sp-component-badge-weight: var(--sp-font-sm-weight, 500);
+    --sp-component-badge-gap: var(--sp-space-4xs, 0.125rem);
+    --sp-component-badge-radius: var(--sp-radius-pill, 999px);
+    --sp-component-badge-primary-bg: var(--sp-badge-primary-bg,
+        var(--sp-color-brand-500, #8652ff));
+    --sp-component-badge-primary-text: var(--sp-badge-primary-text,
+        var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
+    --sp-component-badge-success-bg: var(--sp-badge-success-bg,
+        var(--sp-color-success-500, #22c55e));
+    --sp-component-badge-success-text: var(--sp-badge-success-text,
+        var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
+    --sp-component-badge-warning-bg: var(--sp-badge-warning-bg,
+        var(--sp-color-warning-500, #f59e0b));
+    --sp-component-badge-warning-text: var(--sp-badge-warning-text,
+        var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
+    --sp-component-badge-danger-bg: var(--sp-badge-danger-bg,
+        var(--sp-color-error-500, #ef4444));
+    --sp-component-badge-danger-text: var(--sp-badge-danger-text,
+        var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
+    --sp-component-badge-padding-x-sm: var(--sp-space-xs, 0.5rem);
+    --sp-component-badge-padding-x-md: var(--sp-space-sm, 0.75rem);
+    --sp-component-badge-padding-x-lg: var(--sp-space-md, 1rem);
+    --sp-component-badge-padding-y-sm: var(--sp-space-4xs, 0.125rem);
+    --sp-component-badge-padding-y-md: var(--sp-space-3xs, 0.1875rem);
+    --sp-component-badge-padding-y-lg: var(--sp-space-2xs, 0.25rem);
+
+    /* icon box roles */
+    --sp-component-iconbox-radius: var(--sp-radius-lg, 8px);
+    --sp-component-iconbox-size-sm: var(--sp-space-xl, 2rem);
+    --sp-component-iconbox-size-md: var(--sp-space-2xl, 3rem);
+    --sp-component-iconbox-size-lg: var(--sp-space-3xl, 4rem);
+    --sp-component-iconbox-primary-bg: var(--sp-color-brand-50, #f5f0ff);
+    --sp-component-iconbox-primary-text: var(--sp-color-brand-700, #5626b4);
+    --sp-component-iconbox-success-bg: var(--sp-color-success-50, #f0fdf4);
+    --sp-component-iconbox-success-text: var(--sp-color-success-700, #15803d);
+    --sp-component-iconbox-warning-bg: var(--sp-color-warning-50, #fffbeb);
+    --sp-component-iconbox-warning-text: var(--sp-color-warning-700, #b45309);
+    --sp-component-iconbox-danger-bg: var(--sp-color-error-50, #fef2f2);
+    --sp-component-iconbox-danger-text: var(--sp-color-error-700, #b91c1c);
+    --sp-component-iconbox-info-bg: var(--sp-color-info-50, #eff6ff);
+    --sp-component-iconbox-info-text: var(--sp-color-info-700, #1d4ed8);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -433,4 +477,125 @@
     transform: translateY(-1px);
     box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
   }
+
+  /* BADGES --------------------------------------------------------------- */
+
+  .sp-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sp-component-badge-gap, var(--sp-space-4xs, 0.125rem));
+    border-radius: var(--sp-component-badge-radius, var(--sp-radius-pill, 999px));
+    font-family: var(--sp-component-badge-font, var(--sp-font-family-sans, system-ui));
+    font-weight: var(--sp-component-badge-weight, var(--sp-font-sm-weight, 500));
+    padding: var(--sp-component-badge-padding-y-md, var(--sp-space-3xs, 0.1875rem))
+      var(--sp-component-badge-padding-x-md, var(--sp-space-sm, 0.75rem));
+    font-size: var(--sp-font-sm-size, 0.875rem);
+    line-height: var(--sp-font-sm-line-height, 1.5rem);
+    border: 1px solid transparent;
+    white-space: nowrap;
+  }
+
+  .sp-badge--sm {
+    padding: var(--sp-component-badge-padding-y-sm, var(--sp-space-4xs, 0.125rem))
+      var(--sp-component-badge-padding-x-sm, var(--sp-space-xs, 0.5rem));
+    font-size: var(--sp-font-xs-size, 0.75rem);
+    line-height: var(--sp-font-xs-line-height, 1.25rem);
+  }
+
+  .sp-badge--md {
+    padding: var(--sp-component-badge-padding-y-md, var(--sp-space-3xs, 0.1875rem))
+      var(--sp-component-badge-padding-x-md, var(--sp-space-sm, 0.75rem));
+    font-size: var(--sp-font-sm-size, 0.875rem);
+    line-height: var(--sp-font-sm-line-height, 1.5rem);
+  }
+
+  .sp-badge--lg {
+    padding: var(--sp-component-badge-padding-y-lg, var(--sp-space-2xs, 0.25rem))
+      var(--sp-component-badge-padding-x-lg, var(--sp-space-md, 1rem));
+    font-size: var(--sp-font-md-size, 1rem);
+    line-height: var(--sp-font-md-line-height, 1.75rem);
+  }
+
+  .sp-badge--primary {
+    background-color: var(--sp-component-badge-primary-bg);
+    color: var(--sp-component-badge-primary-text);
+  }
+
+  .sp-badge--success {
+    background-color: var(--sp-component-badge-success-bg);
+    color: var(--sp-component-badge-success-text);
+  }
+
+  .sp-badge--warning {
+    background-color: var(--sp-component-badge-warning-bg);
+    color: var(--sp-component-badge-warning-text);
+  }
+
+  .sp-badge--danger {
+    background-color: var(--sp-component-badge-danger-bg);
+    color: var(--sp-component-badge-danger-text);
+  }
+
+  /* ICON BOXES ----------------------------------------------------------- */
+
+  .sp-iconbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--sp-component-iconbox-radius, var(--sp-radius-lg, 8px));
+    color: var(--sp-component-iconbox-primary-text);
+    background-color: var(--sp-component-iconbox-primary-bg);
+    font-family: var(--sp-font-family-sans, system-ui);
+    font-weight: var(--sp-font-md-weight, 500);
+  }
+
+  .sp-iconbox--sm {
+    width: var(--sp-component-iconbox-size-sm, var(--sp-space-xl, 2rem));
+    height: var(--sp-component-iconbox-size-sm, var(--sp-space-xl, 2rem));
+    font-size: var(--sp-font-sm-size, 0.875rem);
+  }
+
+  .sp-iconbox--md {
+    width: var(--sp-component-iconbox-size-md, var(--sp-space-2xl, 3rem));
+    height: var(--sp-component-iconbox-size-md, var(--sp-space-2xl, 3rem));
+    font-size: var(--sp-font-md-size, 1rem);
+  }
+
+  .sp-iconbox--lg {
+    width: var(--sp-component-iconbox-size-lg, var(--sp-space-3xl, 4rem));
+    height: var(--sp-component-iconbox-size-lg, var(--sp-space-3xl, 4rem));
+    font-size: var(--sp-font-lg-size, 1.125rem);
+  }
+
+  .sp-iconbox > svg,
+  .sp-iconbox > i {
+    width: 1em;
+    height: 1em;
+  }
+
+  .sp-iconbox--primary {
+    background-color: var(--sp-component-iconbox-primary-bg);
+    color: var(--sp-component-iconbox-primary-text);
+  }
+
+  .sp-iconbox--success {
+    background-color: var(--sp-component-iconbox-success-bg);
+    color: var(--sp-component-iconbox-success-text);
+  }
+
+  .sp-iconbox--warning {
+    background-color: var(--sp-component-iconbox-warning-bg);
+    color: var(--sp-component-iconbox-warning-text);
+  }
+
+  .sp-iconbox--danger {
+    background-color: var(--sp-component-iconbox-danger-bg);
+    color: var(--sp-component-iconbox-danger-text);
+  }
+
+  .sp-iconbox--info {
+    background-color: var(--sp-component-iconbox-info-bg);
+    color: var(--sp-component-iconbox-info-text);
+  }
 }

package/dist/index.cjs

@@ -31,7 +31,7 @@ function createSpectreTailwindTheme(options) {
   const boxShadow = t.shadows ?? t.shadow ?? {};
   const fontFamily = t.typography?.families ?? t.fonts ?? {};
   const fontSize = t.typography?.scale ?? t.fontSize ?? {};
-  const theme2 = {
+  const theme = {
     colors,
     spacing,
     borderRadius,
@@ -39,28 +39,135 @@ function createSpectreTailwindTheme(options) {
     fontFamily,
     fontSize
   };
-  return { theme: theme2 };
+  return { theme };
 }
 
 // src/tailwind/preset.ts
-var { theme } = createSpectreTailwindTheme({ tokens: spectreTokens__default.default });
-var spectrePreset = {
-  content: [],
-  theme
-  // theme is guaranteed non-undefined now
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var deepMerge = (base, overrides) => {
+  if (!overrides) return base;
+  const result = { ...base };
+  for (const [key, overrideValue] of Object.entries(overrides)) {
+    const baseValue = result[key];
+    if (isPlainObject(baseValue) && isPlainObject(overrideValue)) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
 };
+var cachedTokens = null;
+var getRequire = () => {
+  try {
+    return Function("return typeof require !== 'undefined' ? require : null")();
+  } catch {
+    return null;
+  }
+};
+var resolveTokens = (tokens) => {
+  if (tokens) return tokens;
+  if (cachedTokens) return cachedTokens;
+  const req = getRequire();
+  if (!req) {
+    throw new Error(
+      "[spectre-ui] Unable to load spectre tokens; pass tokens to createSpectreTailwindPreset."
+    );
+  }
+  const mod = req("../tokens");
+  cachedTokens = mod.spectreTokens;
+  return cachedTokens;
+};
+var createSpectreTailwindPreset = (options = {}) => {
+  const tokens = resolveTokens(options.tokens);
+  const { theme } = createSpectreTailwindTheme({ tokens });
+  const mergedTheme = deepMerge(
+    theme,
+    options.themeOverrides
+  );
+  const basePreset = {
+    content: [],
+    theme: mergedTheme
+    // theme is guaranteed non-undefined now
+  };
+  return deepMerge(
+    basePreset,
+    options.presetOverrides
+  );
+};
+var spectrePreset = createSpectreTailwindPreset();
+
+// src/internal/cx.ts
+function cx(...parts) {
+  const seen = /* @__PURE__ */ new Set();
+  const classes = [];
+  for (const part of parts) {
+    if (!part) continue;
+    const trimmed = part.trim();
+    if (!trimmed) continue;
+    if (!/\s/.test(trimmed)) {
+      if (!seen.has(trimmed)) {
+        seen.add(trimmed);
+        classes.push(trimmed);
+      }
+      continue;
+    }
+    for (const token of trimmed.split(/\s+/)) {
+      if (!token || seen.has(token)) continue;
+      seen.add(token);
+      classes.push(token);
+    }
+  }
+  return classes.join(" ");
+}
+
+// src/internal/resolve-option.ts
+var hasOwn = (value, key) => Object.prototype.hasOwnProperty.call(value, key);
+var isAllowedValue = (value, allowed) => Array.isArray(allowed) ? allowed.includes(value) : hasOwn(allowed, value);
+function resolveOption(config) {
+  const { name, value, allowed, fallback } = config;
+  if (value === void 0) return fallback;
+  if (isAllowedValue(value, allowed)) return value;
+  if (process.env.NODE_ENV !== "production") {
+    throw new Error(`[spectre-ui] Unknown ${name}: ${value}`);
+  }
+  return fallback;
+}
 
 // src/recipes/button.ts
+var BUTTON_VARIANTS = {
+  primary: true,
+  secondary: true,
+  ghost: true,
+  danger: true,
+  success: true
+};
+var BUTTON_SIZES = {
+  sm: true,
+  md: true,
+  lg: true
+};
 function getButtonClasses(opts = {}) {
   const {
-    variant = "primary",
-    size = "md",
+    variant: variantInput,
+    size: sizeInput,
     fullWidth = false,
     loading = false,
     disabled = false,
     iconOnly = false
   } = opts;
-  const classes = ["sp-btn"];
+  const variant = resolveOption({
+    name: "button variant",
+    value: variantInput,
+    allowed: BUTTON_VARIANTS,
+    fallback: "primary"
+  });
+  const size = resolveOption({
+    name: "button size",
+    value: sizeInput,
+    allowed: BUTTON_SIZES,
+    fallback: "md"
+  });
   const variantMap = {
     primary: "sp-btn--primary",
     secondary: "sp-btn--secondary",
@@ -68,57 +175,187 @@ function getButtonClasses(opts = {}) {
     danger: "sp-btn--danger",
     success: "sp-btn--success"
   };
-  classes.push(variantMap[variant]);
+  const variantClass = variantMap[variant];
   const sizeMap = {
     sm: "sp-btn--sm",
     md: "sp-btn--md",
     lg: "sp-btn--lg"
   };
-  classes.push(sizeMap[size]);
-  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.join(" ").trim();
+  const sizeClass = sizeMap[size];
+  return cx(
+    "sp-btn",
+    variantClass,
+    sizeClass,
+    fullWidth && "sp-btn--full",
+    loading && "sp-btn--loading",
+    disabled && "sp-btn--disabled",
+    iconOnly && "sp-btn--icon"
+  );
 }
 
 // src/recipes/card.ts
+var CARD_VARIANTS = {
+  elevated: true,
+  flat: true,
+  outline: true,
+  ghost: true
+};
 function getCardClasses(opts = {}) {
   const {
-    variant = "elevated",
+    variant: variantInput,
     interactive = false,
     padded = false,
     fullHeight = false
   } = opts;
-  const classes = ["sp-card"];
+  const variant = resolveOption({
+    name: "card variant",
+    value: variantInput,
+    allowed: CARD_VARIANTS,
+    fallback: "elevated"
+  });
   const variantMap = {
     elevated: "sp-card--elevated",
     flat: "sp-card--flat",
     outline: "sp-card--outline",
     ghost: "sp-card--ghost"
   };
-  classes.push(variantMap[variant]);
-  if (interactive) classes.push("sp-card--interactive");
-  if (padded) classes.push("sp-card--padded");
-  if (fullHeight) classes.push("sp-card--full");
-  return classes.join(" ").trim();
+  const variantClass = variantMap[variant];
+  return cx(
+    "sp-card",
+    variantClass,
+    interactive && "sp-card--interactive",
+    padded && "sp-card--padded",
+    fullHeight && "sp-card--full"
+  );
 }
 
 // src/recipes/input.ts
+var INPUT_STATES = {
+  default: true,
+  error: true,
+  success: true,
+  disabled: true
+};
+var INPUT_SIZES = {
+  sm: true,
+  md: true,
+  lg: true
+};
 function getInputClasses(opts = {}) {
-  const { state = "default", size = "md", fullWidth = false } = opts;
-  const classes = ["sp-input"];
+  const { state: stateInput, size: sizeInput, fullWidth = false } = opts;
+  const state = resolveOption({
+    name: "input state",
+    value: stateInput,
+    allowed: INPUT_STATES,
+    fallback: "default"
+  });
+  const size = resolveOption({
+    name: "input size",
+    value: sizeInput,
+    allowed: INPUT_SIZES,
+    fallback: "md"
+  });
   const sizeMap = {
     sm: "sp-input--sm",
     md: "sp-input--md",
     lg: "sp-input--lg"
   };
-  classes.push(sizeMap[size]);
-  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();
+  const sizeClass = sizeMap[size];
+  return cx(
+    "sp-input",
+    sizeClass,
+    state === "error" && "sp-input--error",
+    state === "success" && "sp-input--success",
+    // Visual state only; actual disabled attribute is handled by adapters.
+    state === "disabled" && "sp-input--disabled",
+    fullWidth && "sp-input--full"
+  );
+}
+
+// src/recipes/badge.ts
+var BADGE_VARIANTS = {
+  primary: true,
+  success: true,
+  warning: true,
+  danger: true
+};
+var BADGE_SIZES = {
+  sm: true,
+  md: true,
+  lg: true
+};
+function getBadgeClasses(opts = {}) {
+  const { variant: variantInput, size: sizeInput } = opts;
+  const variant = resolveOption({
+    name: "badge variant",
+    value: variantInput,
+    allowed: BADGE_VARIANTS,
+    fallback: "primary"
+  });
+  const size = resolveOption({
+    name: "badge size",
+    value: sizeInput,
+    allowed: BADGE_SIZES,
+    fallback: "md"
+  });
+  const variantMap = {
+    primary: "sp-badge--primary",
+    success: "sp-badge--success",
+    warning: "sp-badge--warning",
+    danger: "sp-badge--danger"
+  };
+  const variantClass = variantMap[variant];
+  const sizeMap = {
+    sm: "sp-badge--sm",
+    md: "sp-badge--md",
+    lg: "sp-badge--lg"
+  };
+  const sizeClass = sizeMap[size];
+  return cx("sp-badge", variantClass, sizeClass);
+}
+
+// src/recipes/iconbox.ts
+var ICONBOX_VARIANTS = {
+  primary: true,
+  success: true,
+  warning: true,
+  danger: true,
+  info: true
+};
+var ICONBOX_SIZES = {
+  sm: true,
+  md: true,
+  lg: true
+};
+function getIconBoxClasses(opts = {}) {
+  const { variant: variantInput, size: sizeInput } = opts;
+  const variant = resolveOption({
+    name: "icon box variant",
+    value: variantInput,
+    allowed: ICONBOX_VARIANTS,
+    fallback: "primary"
+  });
+  const size = resolveOption({
+    name: "icon box size",
+    value: sizeInput,
+    allowed: ICONBOX_SIZES,
+    fallback: "md"
+  });
+  const variantMap = {
+    primary: "sp-iconbox--primary",
+    success: "sp-iconbox--success",
+    warning: "sp-iconbox--warning",
+    danger: "sp-iconbox--danger",
+    info: "sp-iconbox--info"
+  };
+  const variantClass = variantMap[variant];
+  const sizeMap = {
+    sm: "sp-iconbox--sm",
+    md: "sp-iconbox--md",
+    lg: "sp-iconbox--lg"
+  };
+  const sizeClass = sizeMap[size];
+  return cx("sp-iconbox", variantClass, sizeClass);
 }
 
 Object.defineProperty(exports, "spectreTokens", {
@@ -126,8 +363,10 @@ Object.defineProperty(exports, "spectreTokens", {
   get: function () { return spectreTokens__default.default; }
 });
 exports.createSpectreTailwindTheme = createSpectreTailwindTheme;
+exports.getBadgeClasses = getBadgeClasses;
 exports.getButtonClasses = getButtonClasses;
 exports.getCardClasses = getCardClasses;
+exports.getIconBoxClasses = getIconBoxClasses;
 exports.getInputClasses = getInputClasses;
 exports.spectreBaseStylesPath = spectreBaseStylesPath;
 exports.spectreComponentsStylesPath = spectreComponentsStylesPath;