@phcdevworks/spectre-ui 0.1.0 → 0.2.1

package/README.md

@@ -57,7 +57,33 @@ export default {
 
 Works with Tailwind 3.x and 4.x through the classic config API.
 
-Need a plain theme object without presets? Generate it from the first-party tokens.
+**Custom preset:** Need to customize the preset or provide your own tokens?
+
+```ts
+// tailwind.config.ts
+import {
+  createSpectreTailwindPreset,
+  spectreTokens,
+} from "@phcdevworks/spectre-ui";
+
+const customPreset = createSpectreTailwindPreset({
+  tokens: spectreTokens,
+  themeOverrides: {
+    colors: {
+      brand: {
+        500: "#ff6b6b",
+      },
+    },
+  },
+});
+
+export default {
+  content: ["./src/**/*.{js,ts,jsx,tsx,astro}"],
+  presets: [customPreset],
+};
+```
+
+**Plain theme object:** Need a plain theme object without presets? Generate it from the first-party tokens.
 
 ```ts
 // tailwind.config.ts
@@ -91,6 +117,8 @@ import {
   getButtonClasses,
   getCardClasses,
   getInputClasses,
+  getBadgeClasses,
+  getIconBoxClasses,
 } from "@phcdevworks/spectre-ui";
 
 const buttonClasses = getButtonClasses({
@@ -109,6 +137,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 +196,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 +348,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

@@ -18,49 +18,77 @@ var spectreStyles = {
   utilities: spectreUtilitiesStylesPath
 };
 
-// src/tailwind/theme.ts
-function createSpectreTailwindTheme(options) {
-  const mergedTokens = {
-    ...options.tokens ?? {},
-    ...options.overrides ?? {}
-  };
-  const t = mergedTokens;
-  const colors = t.colors ?? t.color ?? t.palette ?? {};
-  const spacing = t.spacing ?? t.space ?? {};
-  const borderRadius = t.radii ?? t.radius ?? {};
-  const boxShadow = t.shadows ?? t.shadow ?? {};
-  const fontFamily = t.typography?.families ?? t.fonts ?? {};
-  const fontSize = t.typography?.scale ?? t.fontSize ?? {};
-  const theme2 = {
-    colors,
-    spacing,
-    borderRadius,
-    boxShadow,
-    fontFamily,
-    fontSize
-  };
-  return { theme: theme2 };
+// 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/tailwind/preset.ts
-var { theme } = createSpectreTailwindTheme({ tokens: spectreTokens__default.default });
-var spectrePreset = {
-  content: [],
-  theme
-  // theme is guaranteed non-undefined now
-};
+// 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,70 +96,200 @@ 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", {
   enumerable: true,
   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;
-exports.spectrePreset = spectrePreset;
 exports.spectreStyles = spectreStyles;
 exports.spectreUtilitiesStylesPath = spectreUtilitiesStylesPath;
 //# sourceMappingURL=index.cjs.map