@lukeashford/aurelius 1.0.1 → 2.0.0

package/dist/index.js

@@ -47,280 +47,10 @@ __export(index_exports, {
   Switch: () => Switch,
   Textarea: () => Textarea,
   Tooltip: () => Tooltip,
-  colors: () => colors,
-  duration: () => duration,
-  easing: () => easing,
-  radii: () => radii,
-  shadows: () => shadows,
-  spacing: () => spacing,
-  tailwindPreset: () => tailwind_preset_default,
-  typography: () => typography,
   version: () => version
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/tokens/colors.ts
-var colors = {
-  // Black spectrum
-  void: "#000000",
-  obsidian: "#0a0a0a",
-  charcoal: "#141414",
-  graphite: "#1f1f1f",
-  slate: "#2a2a2a",
-  ash: "#3d3d3d",
-  // Gold spectrum
-  gold: "#c9a227",
-  goldLight: "#d4b84a",
-  goldBright: "#e5c84d",
-  goldMuted: "#8b7355",
-  goldPale: "#d4c4a8",
-  goldGlow: "rgba(201, 162, 39, 0.15)",
-  // Neutrals
-  white: "#ffffff",
-  silver: "#a3a3a3",
-  zinc: "#71717a",
-  dim: "#52525b",
-  // Semantic
-  success: "#22c55e",
-  successMuted: "#166534",
-  error: "#dc2626",
-  errorMuted: "#991b1b",
-  warning: "#d97706",
-  warningMuted: "#92400e",
-  info: "#0ea5e9",
-  infoMuted: "#0369a1"
-};
-
-// src/tokens/typography.ts
-var typography = {
-  // Headings use Marcellus, a classic serif
-  fontHeading: ["Marcellus", "serif"],
-  // Body and UI use Raleway
-  fontBody: ["Raleway", "system-ui", "sans-serif"],
-  fontMono: ["JetBrains Mono", "Fira Code", "SF Mono", "monospace"],
-  fontSize: {
-    xs: ["0.75rem", { lineHeight: "1rem" }],
-    sm: ["0.875rem", { lineHeight: "1.25rem" }],
-    base: ["1rem", { lineHeight: "1.5rem" }],
-    lg: ["1.125rem", { lineHeight: "1.75rem" }],
-    xl: ["1.25rem", { lineHeight: "1.75rem" }],
-    "2xl": ["1.5rem", { lineHeight: "2rem" }],
-    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
-    "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
-    "5xl": ["3rem", { lineHeight: "1" }],
-    "6xl": ["3.75rem", { lineHeight: "1" }]
-  },
-  fontWeight: {
-    normal: "400",
-    medium: "500",
-    semibold: "600",
-    bold: "700"
-  },
-  lineHeight: {
-    none: "1",
-    tight: "1.25",
-    snug: "1.375",
-    normal: "1.5",
-    relaxed: "1.625",
-    loose: "2"
-  },
-  letterSpacing: {
-    tighter: "-0.05em",
-    tight: "-0.025em",
-    normal: "0",
-    wide: "0.025em",
-    wider: "0.05em",
-    widest: "0.1em"
-  }
-};
-
-// src/tokens/spacing.ts
-var spacing = {
-  px: "1px",
-  0: "0",
-  0.5: "0.125rem",
-  1: "0.25rem",
-  1.5: "0.375rem",
-  2: "0.5rem",
-  2.5: "0.625rem",
-  3: "0.75rem",
-  3.5: "0.875rem",
-  4: "1rem",
-  5: "1.25rem",
-  6: "1.5rem",
-  7: "1.75rem",
-  8: "2rem",
-  9: "2.25rem",
-  10: "2.5rem",
-  11: "2.75rem",
-  12: "3rem",
-  14: "3.5rem",
-  16: "4rem",
-  20: "5rem",
-  24: "6rem",
-  28: "7rem",
-  32: "8rem"
-};
-
-// src/tokens/shadows.ts
-var shadows = {
-  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
-  md: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
-  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
-  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
-  "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
-  glow: "0 0 20px rgba(201, 162, 39, 0.3)",
-  "glow-sm": "0 0 10px rgba(201, 162, 39, 0.2)",
-  "glow-lg": "0 0 40px rgba(201, 162, 39, 0.4)",
-  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.3)"
-};
-
-// src/tokens/transitions.ts
-var duration = {
-  instant: "75ms",
-  fast: "150ms",
-  normal: "200ms",
-  slow: "300ms",
-  slower: "500ms"
-};
-var easing = {
-  smooth: "cubic-bezier(0.16, 1, 0.3, 1)",
-  snap: "cubic-bezier(0.5, 0, 0.1, 1)"
-};
-
-// src/tokens/radii.ts
-var radii = {
-  sm: "0.125rem",
-  md: "0.25rem",
-  lg: "0.375rem",
-  xl: "0.5rem",
-  "2xl": "0.75rem",
-  "3xl": "1rem",
-  full: "9999px"
-};
-
-// src/tailwind.preset.ts
-var preset = {
-  // Safelist color utilities used dynamically in the demo so Tailwind doesn't purge them
-  safelist: [
-    // Black spectrum
-    "bg-void",
-    "bg-obsidian",
-    "bg-charcoal",
-    "bg-graphite",
-    "bg-slate",
-    "bg-ash",
-    // Gold spectrum
-    "bg-gold",
-    "bg-gold-light",
-    "bg-gold-bright",
-    "bg-gold-muted",
-    "bg-gold-pale",
-    // Neutrals
-    "bg-white",
-    "bg-silver",
-    "bg-zinc",
-    "bg-dim",
-    // Semantic
-    "bg-success",
-    "bg-success-muted",
-    "bg-error",
-    "bg-error-muted",
-    "bg-warning",
-    "bg-warning-muted",
-    "bg-info",
-    "bg-info-muted"
-  ],
-  theme: {
-    extend: {
-      colors: {
-        // Black spectrum
-        void: colors.void,
-        obsidian: colors.obsidian,
-        charcoal: colors.charcoal,
-        graphite: colors.graphite,
-        slate: colors.slate,
-        ash: colors.ash,
-        // Gold spectrum
-        gold: {
-          DEFAULT: colors.gold,
-          light: colors.goldLight,
-          bright: colors.goldBright,
-          muted: colors.goldMuted,
-          pale: colors.goldPale,
-          glow: colors.goldGlow
-        },
-        // Neutrals
-        white: colors.white,
-        silver: colors.silver,
-        zinc: colors.zinc,
-        dim: colors.dim,
-        // Semantic
-        success: {
-          DEFAULT: colors.success,
-          muted: colors.successMuted
-        },
-        error: {
-          DEFAULT: colors.error,
-          muted: colors.errorMuted
-        },
-        warning: {
-          DEFAULT: colors.warning,
-          muted: colors.warningMuted
-        },
-        info: {
-          DEFAULT: colors.info,
-          muted: colors.infoMuted
-        }
-      },
-      fontFamily: {
-        heading: typography.fontHeading,
-        body: typography.fontBody,
-        mono: typography.fontMono
-      },
-      fontSize: typography.fontSize,
-      fontWeight: typography.fontWeight,
-      lineHeight: typography.lineHeight,
-      letterSpacing: typography.letterSpacing,
-      spacing,
-      borderRadius: radii,
-      boxShadow: shadows,
-      transitionDuration: duration,
-      transitionTimingFunction: easing,
-      animation: {
-        "fade-in": "fade-in 200ms ease-out",
-        "fade-out": "fade-out 150ms ease-in",
-        "slide-in-right": `slide-in-right 300ms ${easing.smooth}`,
-        "slide-out-right": "slide-out-right 200ms ease-in",
-        "pulse-glow": "pulse-glow 2s ease-in-out infinite"
-      },
-      keyframes: {
-        "fade-in": {
-          "0%": { opacity: "0" },
-          "100%": { opacity: "1" }
-        },
-        "fade-out": {
-          "0%": { opacity: "1" },
-          "100%": { opacity: "0" }
-        },
-        "slide-in-right": {
-          "0%": { transform: "translateX(100%)", opacity: "0" },
-          "100%": { transform: "translateX(0)", opacity: "1" }
-        },
-        "slide-out-right": {
-          "0%": { transform: "translateX(0)", opacity: "1" },
-          "100%": { transform: "translateX(100%)", opacity: "0" }
-        },
-        "pulse-glow": {
-          "0%, 100%": { boxShadow: "0 0 20px rgba(201, 162, 39, 0.3)" },
-          "50%": { boxShadow: "0 0 30px rgba(201, 162, 39, 0.5)" }
-        }
-      }
-    }
-  }
-};
-var tailwind_preset_default = preset;
-
 // src/components/Button.tsx
 var import_react = __toESM(require("react"));
 function cx(...classes) {
@@ -329,13 +59,29 @@ function cx(...classes) {
 var Button = import_react.default.forwardRef(
   ({ variant = "primary", size = "md", loading = false, className, disabled, children, ...rest }, ref) => {
     const isDisabled = disabled || loading;
-    const variantClass = variant === "primary" ? "btn-primary" : variant === "important" ? "btn-important" : variant === "elevated" ? "btn-elevated" : variant === "outlined" ? "btn-outlined" : variant === "featured" ? "btn-featured" : variant === "ghost" ? "btn-ghost" : "btn-danger";
-    const sizeClass = `btn-${size}`;
+    const base = "inline-flex items-center justify-center font-semibold tracking-wide transition-all duration-fast rounded-none disabled:opacity-50 disabled:cursor-not-allowed";
+    const variantClasses = {
+      primary: "bg-charcoal text-white border border-gold/30 hover:border-gold hover:shadow-glow hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      important: "bg-gold text-obsidian border border-gold hover:bg-gold-light hover:text-obsidian active:bg-gold-bright focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      elevated: "bg-charcoal text-white border-0 shadow-lg hover:shadow-xl hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      outlined: "bg-transparent text-white border border-ash hover:border-white hover:text-white active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      featured: "bg-charcoal text-white border border-gold shadow-[0_0_10px_rgba(201,162,39,0.2)] hover:shadow-[0_0_15px_rgba(201,162,39,0.4)] hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      ghost: "bg-transparent text-gold border-0 hover:text-gold-light active:text-gold-bright focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      danger: "bg-error text-white border-0 hover:bg-error/90 active:bg-error/80 focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian"
+    };
+    const sizeClasses = {
+      sm: "h-8 px-3 text-sm",
+      md: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base",
+      xl: "h-14 px-8 text-lg"
+    };
+    const variantClass = variantClasses[variant];
+    const sizeClass = sizeClasses[size];
     return /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         ref,
-        className: cx("btn", variantClass, sizeClass, loading && "opacity-80", className),
+        className: cx(base, variantClass, sizeClass, loading && "opacity-80", className),
         disabled: isDisabled,
         ...rest
       },
@@ -359,8 +105,8 @@ function cx2(...classes) {
 }
 var Input = import_react2.default.forwardRef(
   ({ error = false, className, leadingIcon, trailingIcon, disabled, ...rest }, ref) => {
-    const base = "input";
-    const errorCls = error ? "input-error" : "";
+    const base = "w-full h-10 px-3 bg-graphite border border-ash rounded-none text-white placeholder:text-zinc transition-all duration-fast focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none disabled:bg-slate disabled:text-dim disabled:cursor-not-allowed";
+    const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
     return /* @__PURE__ */ import_react2.default.createElement("div", { className: cx2("relative", disabled && "opacity-90") }, leadingIcon && /* @__PURE__ */ import_react2.default.createElement("span", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-silver" }, leadingIcon), /* @__PURE__ */ import_react2.default.createElement(
       "input",
       {
@@ -368,7 +114,7 @@ var Input = import_react2.default.forwardRef(
         className: cx2(
           base,
           errorCls,
-          (leadingIcon || trailingIcon) && "pl-9 pr-9",
+          leadingIcon || trailingIcon ? "pl-9 pr-9" : false,
           className
         ),
         disabled,
@@ -386,9 +132,16 @@ function cx3(...classes) {
 }
 var Card = import_react3.default.forwardRef(
   ({ variant = "default", interactive = false, className, ...rest }, ref) => {
-    const base = "card";
-    const variantClass = variant === "elevated" ? "card-elevated" : variant === "outlined" ? "card-outlined" : variant === "ghost" ? "bg-transparent shadow-none border-0" : variant === "featured" ? "card-featured" : "";
-    const interactiveClass = interactive ? "card-interactive" : "";
+    const base = "rounded-none p-6";
+    const variantClasses = {
+      default: "bg-charcoal shadow-sm border border-gold/30",
+      elevated: "bg-charcoal shadow-lg border-0",
+      outlined: "bg-charcoal shadow-none border border-ash",
+      ghost: "bg-transparent shadow-none border-0",
+      featured: "bg-charcoal border border-gold shadow-[0_0_10px_rgba(201,162,39,0.2)]"
+    };
+    const interactiveClass = interactive ? "transition-all duration-200 hover:border-gold hover:shadow-glow cursor-pointer" : "";
+    const variantClass = variantClasses[variant];
     return /* @__PURE__ */ import_react3.default.createElement(
       "div",
       {
@@ -460,8 +213,17 @@ function cx5(...classes) {
 }
 var Badge = import_react5.default.forwardRef(
   ({ variant = "default", className, ...rest }, ref) => {
-    const variantClass = variant === "gold" ? "badge-gold" : variant === "success" ? "badge-success" : variant === "error" ? "badge-error" : variant === "warning" ? "bg-warning/20 text-warning border-warning/30" : variant === "info" ? "bg-info/20 text-info border-info/30" : "badge-default";
-    return /* @__PURE__ */ import_react5.default.createElement("span", { ref, className: cx5("badge", variantClass, className), ...rest });
+    const base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border";
+    const variantClasses = {
+      default: "bg-slate text-silver border-slate",
+      gold: "bg-gold/20 text-gold border-gold/30",
+      success: "bg-success/20 text-success border-success/30",
+      error: "bg-error/20 text-error border-error/30",
+      warning: "bg-warning/20 text-warning border-warning/30",
+      info: "bg-info/20 text-info border-info/30"
+    };
+    const variantClass = variantClasses[variant];
+    return /* @__PURE__ */ import_react5.default.createElement("span", { ref, className: cx5(base, variantClass, className), ...rest });
   }
 );
 Badge.displayName = "Badge";
@@ -500,10 +262,11 @@ var Label = import_react7.default.forwardRef(
       "label",
       {
         ref,
-        className: cx7("label", required && "label-required", className),
+        className: cx7("block text-sm font-medium text-silver mb-1.5", className),
         ...rest
       },
-      children
+      children,
+      required && /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-error ml-1" }, "*")
     );
   }
 );
@@ -536,7 +299,7 @@ function cx9(...classes) {
 }
 var Textarea = import_react9.default.forwardRef(
   ({ error = false, className, disabled, ...rest }, ref) => {
-    const base = "textarea";
+    const base = "w-full px-3 py-2 bg-graphite border border-ash rounded-none text-white placeholder:text-zinc min-h-[80px] transition-all duration-fast focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none disabled:bg-slate disabled:text-dim disabled:cursor-not-allowed";
     const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
     return /* @__PURE__ */ import_react9.default.createElement(
       "textarea",
@@ -556,15 +319,26 @@ var import_react10 = __toESM(require("react"));
 function cx10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var selectBgImage = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C9A227' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`;
 var Select = import_react10.default.forwardRef(
   ({ error = false, className, disabled, options, children, ...rest }, ref) => {
-    const base = "select";
-    const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
     return /* @__PURE__ */ import_react10.default.createElement(
       "select",
       {
         ref,
-        className: cx10(base, errorCls, disabled && "opacity-90", className),
+        className: cx10(
+          "appearance-none bg-graphite border border-ash rounded-none text-white px-3 py-2 pr-8",
+          "focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          error && "border-error focus:border-error focus:ring-error",
+          className
+        ),
+        style: {
+          backgroundImage: selectBgImage,
+          backgroundPosition: "right 0.5rem center",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "1.5em 1.5em"
+        },
         disabled,
         ...rest
       },
@@ -579,16 +353,50 @@ var import_react11 = __toESM(require("react"));
 function cx11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var checkmarkSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`;
 var Checkbox = import_react11.default.forwardRef(
   ({ className, label, id, ...rest }, ref) => {
     const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
+    const setRef = (0, import_react11.useCallback)((node) => {
+      if (node) {
+        if (node.checked) {
+          node.style.backgroundImage = checkmarkSvg;
+        }
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
     return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react11.default.createElement(
       "input",
       {
         type: "checkbox",
         id: inputId,
-        ref,
-        className: cx11("checkbox", className),
+        ref: setRef,
+        className: cx11(
+          "appearance-none h-4 w-4 border border-ash rounded-sm bg-graphite",
+          "checked:bg-gold checked:border-gold",
+          "focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
+          "transition duration-200 ease-in-out cursor-pointer",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          className
+        ),
+        style: {
+          backgroundPosition: "center",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat"
+        },
+        onChange: (e) => {
+          const input = e.currentTarget;
+          if (input.checked) {
+            input.style.backgroundImage = checkmarkSvg;
+          } else {
+            input.style.backgroundImage = "none";
+          }
+          rest.onChange?.(e);
+        },
         ...rest
       }
     ), label && /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
@@ -601,16 +409,58 @@ var import_react12 = __toESM(require("react"));
 function cx12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var radioDotSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")`;
 var Radio = import_react12.default.forwardRef(
   ({ className, label, id, ...rest }, ref) => {
     const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
+    const setRef = (0, import_react12.useCallback)((node) => {
+      if (node) {
+        if (node.checked) {
+          node.style.backgroundImage = radioDotSvg;
+        }
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
     return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         type: "radio",
         id: inputId,
-        ref,
-        className: cx12("radio", className),
+        ref: setRef,
+        className: cx12(
+          "appearance-none h-4 w-4 border border-ash rounded-full bg-graphite",
+          "checked:bg-gold checked:border-gold",
+          "focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
+          "transition duration-200 ease-in-out cursor-pointer",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          className
+        ),
+        style: {
+          backgroundPosition: "center",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat"
+        },
+        onChange: (e) => {
+          const input = e.currentTarget;
+          if (input.checked) {
+            input.style.backgroundImage = radioDotSvg;
+            if (input.name) {
+              const radios = document.querySelectorAll(`input[type="radio"][name="${input.name}"]`);
+              radios.forEach((radio) => {
+                if (radio !== input) {
+                  radio.style.backgroundImage = "none";
+                }
+              });
+            }
+          } else {
+            input.style.backgroundImage = "none";
+          }
+          rest.onChange?.(e);
+        },
         ...rest
       }
     ), label && /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
@@ -628,6 +478,18 @@ var Switch = import_react13.default.forwardRef(
     const [internalChecked, setInternalChecked] = (0, import_react13.useState)(defaultChecked);
     const isControlled = controlledChecked !== void 0;
     const checked = isControlled ? controlledChecked : internalChecked;
+    const buttonRef = (0, import_react13.useRef)(null);
+    const setRefs = (0, import_react13.useCallback)(
+      (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
     const handleClick = (e) => {
       if (disabled) return;
       const newChecked = !checked;
@@ -645,13 +507,39 @@ var Switch = import_react13.default.forwardRef(
         "aria-checked": checked,
         "data-state": checked ? "checked" : "unchecked",
         disabled,
-        ref,
+        ref: setRefs,
         onClick: handleClick,
-        className: cx13("switch", className),
+        className: cx13(
+          "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent",
+          "transition-colors duration-200 ease-in-out",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          checked ? "bg-gold" : "bg-charcoal",
+          className
+        ),
         ...rest
       },
-      /* @__PURE__ */ import_react13.default.createElement("span", { className: "switch-thumb" })
-    ), label && /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-sm text-silver cursor-pointer", onClick: () => !disabled && handleClick({}) }, label));
+      /* @__PURE__ */ import_react13.default.createElement(
+        "span",
+        {
+          className: cx13(
+            "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0",
+            "transition duration-200 ease-in-out",
+            checked ? "translate-x-5" : "translate-x-0"
+          )
+        }
+      )
+    ), label && /* @__PURE__ */ import_react13.default.createElement(
+      "span",
+      {
+        className: "text-sm text-silver cursor-pointer",
+        onClick: () => {
+          if (disabled) return;
+          buttonRef.current?.click();
+        }
+      },
+      label
+    ));
   }
 );
 Switch.displayName = "Switch";
@@ -668,16 +556,25 @@ var icons = {
   warning: import_lucide_react.AlertTriangle,
   error: import_lucide_react.XCircle
 };
+var variantStyles = {
+  info: "bg-info/10 border-info text-info",
+  success: "bg-success/10 border-success text-success",
+  warning: "bg-warning/10 border-warning text-warning",
+  error: "bg-error/10 border-error text-error"
+};
 var Alert = import_react14.default.forwardRef(
   ({ variant = "info", title, children, className, ...rest }, ref) => {
     const Icon = icons[variant];
-    const variantClass = `alert-${variant}`;
     return /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
         ref,
         role: "alert",
-        className: cx14("alert", variantClass, "flex gap-3", className),
+        className: cx14(
+          "relative w-full p-4 rounded-none border border-l-4 flex gap-3",
+          variantStyles[variant],
+          className
+        ),
         ...rest
       },
       /* @__PURE__ */ import_react14.default.createElement(Icon, { className: "h-5 w-5 shrink-0" }),
@@ -766,12 +663,15 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
   }, [onClose]);
   if (!mounted) return null;
   if (!isOpen) return null;
-  const content = /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6", onClick: onClose }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "modal-backdrop", "aria-hidden": "true" }), /* @__PURE__ */ import_react17.default.createElement(
+  const content = /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6", onClick: onClose }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-40 bg-obsidian/80 backdrop-blur-sm", "aria-hidden": "true" }), /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       role: "dialog",
       "aria-modal": "true",
-      className: cx17("modal-content relative", className),
+      className: cx17(
+        "bg-charcoal border border-gold/30 shadow-2xl z-50 w-full max-w-lg p-6 rounded-none relative",
+        className
+      ),
       "data-state": "open",
       onClick: (e) => e.stopPropagation()
     },
@@ -783,7 +683,7 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
 Modal.displayName = "Modal";
 
 // src/index.ts
-var version = "1.0.0";
+var version = "2.0.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -803,14 +703,6 @@ var version = "1.0.0";
   Switch,
   Textarea,
   Tooltip,
-  colors,
-  duration,
-  easing,
-  radii,
-  shadows,
-  spacing,
-  tailwindPreset,
-  typography,
   version
 });
 //# sourceMappingURL=index.js.map