@yomologic/react-ui 0.5.0 → 0.5.1

package/dist/index.js

@@ -103,10 +103,9 @@ var Button = import_react.default.forwardRef(
     leftIcon,
     rightIcon,
     children,
-    disabled,
     ...props
   }, ref) => {
-    const baseStyles = "inline-flex items-center justify-center cursor-pointer transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:brightness-100";
+    const baseStyles = "inline-flex items-center justify-center cursor-pointer transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:brightness-100 no-underline";
     const variants = {
       primary: "bg-[var(--color-primary)] text-[var(--button-primary-text)] hover:brightness-90 active:brightness-75",
       secondary: "bg-[var(--color-secondary)] text-[var(--button-secondary-text)] hover:brightness-90 active:brightness-75",
@@ -126,81 +125,105 @@ var Button = import_react.default.forwardRef(
     };
     const radiusStyle = "[border-radius:var(--button-radius)]";
     const fontWeightStyle = "[font-weight:var(--button-font-weight)]";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    const classNames = cn(
+      baseStyles,
+      variants[variant],
+      sizes[size],
+      radiusStyle,
+      fontWeightStyle,
+      className
+    );
+    const handleMouseEnter = (e) => {
+      if (variant === "ghost") {
+        e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.08)";
+      } else if (variant === "outline") {
+        e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.12)";
+      }
+    };
+    const handleMouseLeave = (e) => {
+      if (variant === "ghost" || variant === "outline") {
+        e.currentTarget.style.backgroundColor = "";
+      }
+    };
+    const handleMouseDown = (e) => {
+      if (variant === "ghost") {
+        e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.16)";
+      } else if (variant === "outline") {
+        e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.24)";
+      }
+    };
+    const handleMouseUp = (e) => {
+      if (variant === "ghost") {
+        e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.08)";
+      } else if (variant === "outline") {
+        e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.12)";
+      }
+    };
+    const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          className: "animate-spin h-4 w-4",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      ),
+      !isLoading && leftIcon && leftIcon,
+      children,
+      !isLoading && rightIcon && rightIcon
+    ] });
+    if ("href" in props && props.href) {
+      const { href, ...rest2 } = props;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "a",
+        {
+          ref,
+          href,
+          className: classNames,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onMouseDown: handleMouseDown,
+          onMouseUp: handleMouseUp,
+          ...rest2,
+          children: content
+        }
+      );
+    }
+    const { disabled, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
         ref,
-        className: cn(
-          baseStyles,
-          variants[variant],
-          sizes[size],
-          radiusStyle,
-          fontWeightStyle,
-          className
-        ),
-        onMouseEnter: (e) => {
-          if (variant === "ghost") {
-            e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.08)";
-          } else if (variant === "outline") {
-            e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.12)";
-          }
-        },
-        onMouseLeave: (e) => {
-          if (variant === "ghost" || variant === "outline") {
-            e.currentTarget.style.backgroundColor = "";
-          }
-        },
-        onMouseDown: (e) => {
-          if (variant === "ghost") {
-            e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.16)";
-          } else if (variant === "outline") {
-            e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.24)";
-          }
-        },
-        onMouseUp: (e) => {
-          if (variant === "ghost") {
-            e.currentTarget.style.backgroundColor = "rgba(99, 102, 241, 0.08)";
-          } else if (variant === "outline") {
-            e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.12)";
-          }
-        },
+        className: classNames,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
         disabled: disabled || isLoading,
-        ...props,
-        children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "svg",
-            {
-              className: "animate-spin h-4 w-4",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "circle",
-                  {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  "path",
-                  {
-                    className: "opacity-75",
-                    fill: "currentColor",
-                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  }
-                )
-              ]
-            }
-          ),
-          !isLoading && leftIcon && leftIcon,
-          children,
-          !isLoading && rightIcon && rightIcon
-        ]
+        ...rest,
+        children: content
       }
     );
   }
@@ -459,7 +482,7 @@ function FormControl({
   asChild = false
 }) {
   const autoId = (0, import_react3.useId)();
-  const stableFieldId = (0, import_react3.useRef)();
+  const stableFieldId = (0, import_react3.useRef)(void 0);
   if (!stableFieldId.current) {
     stableFieldId.current = name ? `field-${name}` : `field-${autoId}`;
   }
@@ -603,17 +626,18 @@ function FormControl({
     if (asChild) {
       const child = import_react3.Children.only(children);
       if ((0, import_react3.isValidElement)(child)) {
+        const childProps = child.props;
         return (0, import_react3.cloneElement)(child, {
           ...fieldProps,
-          ...child.props,
+          ...childProps,
           // Merge onChange handlers
           onChange: (e) => {
             fieldProps.onChange(e);
-            child.props.onChange?.(e);
+            childProps.onChange?.(e);
           },
           onBlur: () => {
             fieldProps.onBlur();
-            child.props.onBlur?.();
+            childProps.onBlur?.();
           }
         });
       }
@@ -647,8 +671,8 @@ function FormControl({
           "p",
           {
             className: cn(
-              "text-xs",
-              currentError ? "text-red-600" : "text-(--color-muted-foreground)"
+              "text-small",
+              currentError ? "text-error" : "text-(--color-muted-foreground)"
             ),
             id: `${fieldId}-message`,
             role: currentError ? "alert" : void 0,
@@ -719,8 +743,8 @@ function FormHelperText({
     "p",
     {
       className: cn(
-        "text-xs",
-        isError ? "text-red-600" : "text-(--color-muted-foreground)",
+        "text-small",
+        isError ? "text-error" : "text-(--color-muted-foreground)",
         className
       ),
       role: isError ? "alert" : void 0,
@@ -758,7 +782,7 @@ var Input = import_react4.default.forwardRef(
     const formControl = useFormControl();
     const internalRef = (0, import_react4.useRef)(null);
     const [validationError, setValidationError] = (0, import_react4.useState)();
-    const stableId = (0, import_react4.useRef)();
+    const stableId = (0, import_react4.useRef)(void 0);
     if (!stableId.current) {
       stableId.current = id || formControl?.fieldId || `input-${autoId}`;
     }
@@ -972,7 +996,7 @@ var Input = import_react4.default.forwardRef(
                       "text-(--color-muted-foreground) placeholder-gray-400",
                       "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
                       "disabled:bg-(--color-muted) disabled:cursor-not-allowed disabled:text-(--color-muted-foreground)",
-                      inputError ? "border-red-500 focus:ring-red-500" : "border-(--color-border)",
+                      inputError ? "border-error focus:ring-error" : "border-(--color-border)",
                       leftIcon && "pl-10",
                       rightIcon && "pr-10",
                       className
@@ -995,7 +1019,7 @@ var Input = import_react4.default.forwardRef(
             shouldRenderError && inputError && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "p",
               {
-                className: "text-caption text-red-600",
+                className: "text-small text-error",
                 id: `${inputId}-error`,
                 role: "alert",
                 suppressHydrationWarning: true,
@@ -1005,7 +1029,7 @@ var Input = import_react4.default.forwardRef(
             helperText && !inputError && !formControl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "p",
               {
-                className: "text-caption text-(--color-muted-foreground)",
+                className: "text-small text-(--color-muted-foreground)",
                 id: `${inputId}-helper`,
                 suppressHydrationWarning: true,
                 children: helperText
@@ -1028,6 +1052,7 @@ var Card = import_react5.default.forwardRef(
     variant = "default",
     padding = "md",
     hoverable = false,
+    accentColor,
     children,
     ...props
   }, ref) => {
@@ -1035,7 +1060,8 @@ var Card = import_react5.default.forwardRef(
     const variants = {
       default: "border border-(--color-border)",
       bordered: "border-2 border-(--color-border)",
-      elevated: "shadow-md"
+      elevated: "shadow-md",
+      accent: "border border-(--color-border) hover:border-(--color-primary) active:border-(--color-primary) transition-all duration-300 relative overflow-hidden group"
     };
     const paddings = {
       none: "",
@@ -1044,7 +1070,7 @@ var Card = import_react5.default.forwardRef(
       lg: "p-6"
     };
     const hoverStyles = hoverable ? "hover:shadow-lg transition-shadow cursor-pointer" : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
         ref,
@@ -1055,8 +1081,20 @@ var Card = import_react5.default.forwardRef(
           hoverStyles,
           className
         ),
+        style: variant === "accent" && accentColor ? {
+          "--card-accent-color": accentColor
+        } : void 0,
         ...props,
-        children
+        children: [
+          variant === "accent" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              className: "absolute top-0 left-0 w-full h-1 bg-linear-to-r from-transparent via-current to-transparent opacity-0 group-hover:opacity-100 group-active:opacity-100 transition-opacity",
+              style: accentColor ? { color: accentColor } : { color: "var(--color-primary)" }
+            }
+          ),
+          children
+        ]
       }
     );
   }
@@ -1111,6 +1149,7 @@ var CardMedia = import_react5.default.forwardRef(
     component = "div",
     aspectRatio = "16/9",
     alt = "",
+    objectFit = "cover",
     style,
     ...props
   }, ref) => {
@@ -1118,6 +1157,7 @@ var CardMedia = import_react5.default.forwardRef(
       aspectRatio,
       ...style
     };
+    const objectFitClass = objectFit === "cover" ? "object-cover" : objectFit === "contain" ? "object-contain" : objectFit === "fill" ? "object-fill" : objectFit === "none" ? "object-none" : "object-scale-down";
     if (component === "img" && image) {
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "img",
@@ -1125,7 +1165,7 @@ var CardMedia = import_react5.default.forwardRef(
           ref,
           src: image,
           alt,
-          className: cn("w-full object-cover", className),
+          className: cn("w-full h-full", objectFitClass, className),
           style: aspectRatioStyle,
           ...props
         }
@@ -1137,7 +1177,7 @@ var CardMedia = import_react5.default.forwardRef(
         {
           ref,
           src: video,
-          className: cn("w-full object-cover", className),
+          className: cn("w-full", objectFitClass, className),
           style: aspectRatioStyle,
           ...props
         }
@@ -1161,18 +1201,31 @@ var CardMedia = import_react5.default.forwardRef(
 );
 CardMedia.displayName = "CardMedia";
 var CardActions = import_react5.default.forwardRef(
-  ({ className, disableSpacing = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      ref,
-      className: cn(
-        "flex items-center",
-        !disableSpacing && "gap-2 p-4",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, disableSpacing = false, position = "left", ...props }, ref) => {
+    const justifyContent = {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end"
+    }[position];
+    const padding = {
+      left: "pl-4 pr-4 py-4",
+      center: "px-4 py-4",
+      right: "pl-4 pr-4 py-4"
+    }[position];
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center",
+          justifyContent,
+          !disableSpacing && `gap-2 ${padding}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 CardActions.displayName = "CardActions";
 var CardActionArea = import_react5.default.forwardRef(
@@ -1302,7 +1355,7 @@ function Checkbox({
 }) {
   const form = useForm();
   const autoId = (0, import_react7.useId)();
-  const stableId = (0, import_react7.useRef)();
+  const stableId = (0, import_react7.useRef)(void 0);
   if (!stableId.current) {
     stableId.current = id || `checkbox-${autoId}`;
   }
@@ -1372,75 +1425,68 @@ function Checkbox({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    {
-      className: cn("flex flex-col", className),
-      style: { marginBottom: "var(--form-control-spacing)" },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "div",
-              {
-                className: "rounded-full scale-0 group-hover/checkbox:scale-100 group-active/checkbox:scale-100 transition-transform duration-200 ease-out",
-                style: {
-                  width: size === "xs" ? "1.75rem" : size === "sm" ? "2rem" : size === "lg" ? "2.5rem" : size === "xl" ? "3rem" : "2.25rem",
-                  height: size === "xs" ? "1.75rem" : size === "sm" ? "2rem" : size === "lg" ? "2.5rem" : size === "xl" ? "3rem" : "2.25rem",
-                  backgroundColor: "var(--checkbox-hover-bg)"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "input",
-              {
-                type: "checkbox",
-                id: checkboxId,
-                checked,
-                onChange: handleChange,
-                disabled,
-                suppressHydrationWarning: true,
-                className: cn(
-                  "rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 transition-all relative z-10",
-                  disabled && "cursor-not-allowed"
-                ),
-                style: {
-                  width: size === "xs" ? "var(--checkbox-size-xs)" : size === "sm" ? "var(--checkbox-size-sm)" : size === "lg" ? "var(--checkbox-size-lg)" : size === "xl" ? "var(--checkbox-size-xl)" : "var(--checkbox-size-md)",
-                  height: size === "xs" ? "var(--checkbox-size-xs)" : size === "sm" ? "var(--checkbox-size-sm)" : size === "lg" ? "var(--checkbox-size-lg)" : size === "xl" ? "var(--checkbox-size-xl)" : "var(--checkbox-size-md)",
-                  borderColor: "var(--color-border)",
-                  backgroundColor: "var(--color-muted)",
-                  accentColor: "var(--color-primary)",
-                  opacity: disabled ? "var(--checkbox-disabled-opacity)" : void 0
-                }
-              }
-            )
-          ] }),
-          label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-            "label",
-            {
-              htmlFor: checkboxId,
-              className: cn(
-                "font-medium",
-                disabled && "cursor-not-allowed",
-                !disabled && "cursor-pointer"
-              ),
-              suppressHydrationWarning: true,
-              style: {
-                fontSize: size === "xs" ? "var(--checkbox-label-font-size-xs)" : size === "sm" ? "var(--checkbox-label-font-size-sm)" : size === "lg" ? "var(--checkbox-label-font-size-lg)" : size === "xl" ? "var(--checkbox-label-font-size-xl)" : "var(--checkbox-label-font-size-md)",
-                color: "var(--color-muted-foreground)",
-                opacity: disabled ? "var(--checkbox-disabled-opacity)" : void 0
-              },
-              children: [
-                label,
-                required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1", children: "*" })
-              ]
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: "rounded-full scale-0 group-hover/checkbox:scale-100 group-active/checkbox:scale-100 transition-transform duration-200 ease-out",
+            style: {
+              width: size === "xs" ? "1.75rem" : size === "sm" ? "2rem" : size === "lg" ? "2.5rem" : size === "xl" ? "3rem" : "2.25rem",
+              height: size === "xs" ? "1.75rem" : size === "sm" ? "2rem" : size === "lg" ? "2.5rem" : size === "xl" ? "3rem" : "2.25rem",
+              backgroundColor: "var(--checkbox-hover-bg)"
             }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-caption text-red-600", role: "alert", children: displayError }) })
-      ]
-    }
-  );
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            id: checkboxId,
+            checked,
+            onChange: handleChange,
+            disabled,
+            suppressHydrationWarning: true,
+            className: cn(
+              "rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 transition-all relative z-10",
+              disabled && "cursor-not-allowed"
+            ),
+            style: {
+              width: size === "xs" ? "var(--checkbox-size-xs)" : size === "sm" ? "var(--checkbox-size-sm)" : size === "lg" ? "var(--checkbox-size-lg)" : size === "xl" ? "var(--checkbox-size-xl)" : "var(--checkbox-size-md)",
+              height: size === "xs" ? "var(--checkbox-size-xs)" : size === "sm" ? "var(--checkbox-size-sm)" : size === "lg" ? "var(--checkbox-size-lg)" : size === "xl" ? "var(--checkbox-size-xl)" : "var(--checkbox-size-md)",
+              borderColor: "var(--color-border)",
+              backgroundColor: "var(--color-muted)",
+              accentColor: "var(--color-primary)",
+              opacity: disabled ? "var(--checkbox-disabled-opacity)" : void 0
+            }
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "label",
+        {
+          htmlFor: checkboxId,
+          className: cn(
+            "font-medium",
+            disabled && "cursor-not-allowed",
+            !disabled && "cursor-pointer"
+          ),
+          suppressHydrationWarning: true,
+          style: {
+            fontSize: size === "xs" ? "var(--checkbox-label-font-size-xs)" : size === "sm" ? "var(--checkbox-label-font-size-sm)" : size === "lg" ? "var(--checkbox-label-font-size-lg)" : size === "xl" ? "var(--checkbox-label-font-size-xl)" : "var(--checkbox-label-font-size-md)",
+            color: "var(--color-muted-foreground)",
+            opacity: disabled ? "var(--checkbox-disabled-opacity)" : void 0
+          },
+          children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-1", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+  ] });
 }
 function CheckboxGroup({
   label,
@@ -1589,7 +1635,7 @@ function CheckboxGroup({
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "p",
           {
-            className: `text-caption ${error ? "text-red-600" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${error ? "text-error" : "text-(--color-muted-foreground)"}`,
             role: error ? "alert" : void 0,
             children: error || helperText
           }
@@ -1768,7 +1814,7 @@ function RadioGroup({
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "p",
           {
-            className: `text-caption ${displayError ? "text-red-600" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
             role: displayError ? "alert" : void 0,
             children: displayError || helperText
           }
@@ -1922,7 +1968,7 @@ function Select({
             w-full ${sizeStyles[size]} text-left bg-(--color-background) border rounded-(--dropdown-radius)
             flex items-center justify-between
             transition-all duration-200
-            ${displayError ? "border-red-500 focus:ring-2 focus:ring-red-200 focus:border-red-500" : "border-(--color-border) focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-primary)_30%,transparent)] focus:border-(--color-primary)"}
+            ${displayError ? "border-error focus:ring-2 focus:ring-error focus:border-error" : "border-(--color-border) focus:ring-2 focus:ring-[color-mix(in_srgb,var(--color-primary)_30%,transparent)] focus:border-(--color-primary)"}
             ${disabled ? "bg-(--color-muted) cursor-not-allowed opacity-60" : "hover:border-(--color-border)"}
             ${!value ? "text-(--color-placeholder)" : "text-(--color-foreground)"}
           `,
@@ -2006,7 +2052,7 @@ function Select({
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "p",
           {
-            className: `text-caption ${displayError ? "text-red-600" : "text-(--color-muted-foreground)"}`,
+            className: `text-small ${displayError ? "text-error" : "text-(--color-muted-foreground)"}`,
             children: displayError || helperText
           }
         ) })
@@ -2080,9 +2126,8 @@ var Spinner = import_react10.default.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/ui/code-snippet.tsx
+var import_prism_react_renderer = require("prism-react-renderer");
 var import_react11 = require("react");
-var import_react_syntax_highlighter = require("react-syntax-highlighter");
-var import_prism = require("react-syntax-highlighter/dist/esm/styles/prism");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function CodeSnippet({
   code,
@@ -2173,20 +2218,32 @@ function CodeSnippet({
       {
         className: `rounded-lg overflow-x-auto border border-[#1f2937] ${fontSizeClassMap[fontSize]} code-snippet-${fontSize}`,
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_syntax_highlighter.Prism,
+          import_prism_react_renderer.Highlight,
           {
+            theme: import_prism_react_renderer.themes.vsDark,
+            code,
             language,
-            style: import_prism.vscDarkPlus,
-            customStyle: {
-              margin: 0,
-              padding: "1rem 3.5rem 1rem 1rem",
-              lineHeight: "1.5",
-              background: "#1a1b26"
-            },
-            wrapLines: wrap,
-            wrapLongLines: wrap,
-            showLineNumbers: false,
-            children: code
+            children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "pre",
+              {
+                style: {
+                  ...style,
+                  margin: 0,
+                  padding: "1rem 3.5rem 1rem 1rem",
+                  lineHeight: "1.5",
+                  background: "#1a1b26",
+                  whiteSpace: wrap ? "pre-wrap" : "pre",
+                  wordBreak: wrap ? "break-word" : "normal"
+                },
+                children: tokens.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "span",
+                  {
+                    ...getTokenProps({ token })
+                  },
+                  key
+                )) }, i))
+              }
+            )
           }
         )
       }
@@ -2423,7 +2480,7 @@ var Divider = ({
   const orientationClasses = isVertical ? "inline-block min-h-[1rem]" : "block w-full";
   const flexClasses = flexItem && isVertical ? "self-stretch !h-auto" : "";
   const textStyles = {
-    fontSize: "var(--text-sm, 0.875rem)",
+    fontSize: "var(--typography-small, 0.75rem)",
     color: "var(--color-muted-foreground, #6b7280)"
   };
   if (children) {
@@ -3574,12 +3631,12 @@ var Nav = import_react19.default.forwardRef(
     const variantItemStyles = {
       primary: "rounded-md hover:bg-(--color-primary)/10 hover:text-(--color-primary) transition-colors duration-150",
       secondary: "rounded-md hover:bg-(--color-muted) transition-colors duration-150",
-      ghost: "rounded-md hover:bg-(--color-muted) transition-colors duration-150"
+      ghost: "rounded-md hover:bg-(--color-primary)/5 transition-colors duration-150"
     };
     const activeItemStyles = {
       primary: "bg-(--color-primary) text-white hover:bg-(--color-primary) hover:text-white",
       secondary: "bg-(--color-muted) text-(--color-foreground) font-semibold",
-      ghost: "bg-(--color-muted) text-(--color-foreground) font-semibold"
+      ghost: "text-(--color-primary) font-medium"
     };
     const breakpointClasses = {
       sm: "sm:hidden",
@@ -3920,10 +3977,9 @@ function Drawer({
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "h1",
                   {
-                    className: "font-bold",
+                    className: "font-bold text-h5",
                     style: {
-                      color: "var(--color-foreground)",
-                      fontSize: "var(--typography-h5)"
+                      color: "var(--color-foreground)"
                     },
                     children: title
                   }
@@ -3931,9 +3987,9 @@ function Drawer({
                 subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "p",
                   {
+                    className: "text-caption",
                     style: {
-                      color: "var(--color-muted-foreground)",
-                      fontSize: "var(--typography-caption)"
+                      color: "var(--color-muted-foreground)"
                     },
                     children: subtitle
                   }
@@ -3975,16 +4031,15 @@ function Drawer({
               className: "hidden lg:block px-6 py-5",
               style: {
                 borderBottom: "1px solid var(--color-border)",
-                background: "var(--color-muted)"
+                background: "var(--color-surface-elevated)"
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "h1",
                   {
-                    className: "font-bold",
+                    className: "font-bold text-h5",
                     style: {
-                      color: "var(--color-foreground)",
-                      fontSize: "var(--typography-h5)"
+                      color: "var(--color-foreground)"
                     },
                     children: title
                   }
@@ -3992,10 +4047,9 @@ function Drawer({
                 subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "p",
                   {
-                    className: "mt-0.5",
+                    className: "mt-0.5 text-caption",
                     style: {
-                      color: "var(--color-muted-foreground)",
-                      fontSize: "var(--typography-caption)"
+                      color: "var(--color-muted-foreground)"
                     },
                     children: subtitle
                   }
@@ -4013,10 +4067,9 @@ function Drawer({
                   /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "h1",
                     {
-                      className: "font-bold",
+                      className: "font-bold text-h5",
                       style: {
-                        color: "var(--color-foreground)",
-                        fontSize: "var(--typography-h5)"
+                        color: "var(--color-foreground)"
                       },
                       children: title
                     }
@@ -4024,10 +4077,9 @@ function Drawer({
                   subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "p",
                     {
-                      className: "mt-1",
+                      className: "mt-1 text-caption",
                       style: {
-                        color: "var(--color-muted-foreground)",
-                        fontSize: "var(--typography-caption)"
+                        color: "var(--color-muted-foreground)"
                       },
                       children: subtitle
                     }
@@ -4058,11 +4110,10 @@ function Drawer({
                 section.title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "h3",
                   {
-                    className: "font-semibold uppercase tracking-wide",
+                    className: "font-semibold uppercase tracking-wide text-caption",
                     style: {
                       marginBottom: "var(--drawer-title-margin-bottom)",
                       color: "var(--color-muted-foreground)",
-                      fontSize: "var(--typography-caption)",
                       padding: "0 0.75rem"
                     },
                     children: section.title
@@ -4080,7 +4131,7 @@ function Drawer({
                       "button",
                       {
                         onClick: () => handleItemClick(item.id),
-                        className: "w-full flex items-center gap-3 rounded-lg font-medium transition-all duration-200",
+                        className: "w-full flex items-center gap-3 rounded-lg font-medium transition-all duration-200 text-small",
                         onMouseOver: (e) => {
                           if (activeItem !== item.id) {
                             e.currentTarget.style.background = "var(--color-muted)";
@@ -4098,7 +4149,6 @@ function Drawer({
                           paddingRight: "var(--drawer-item-padding-x)",
                           paddingTop: "var(--drawer-item-padding-y)",
                           paddingBottom: "var(--drawer-item-padding-y)",
-                          fontSize: "var(--drawer-font-size)",
                           borderRadius: "var(--drawer-border-radius)",
                           background: activeItem === item.id ? "var(--color-primary)" : "transparent",
                           color: activeItem === item.id ? "var(--color-background)" : "var(--color-muted-foreground)",
@@ -4511,11 +4561,11 @@ var light_default = {
 };
 
 // src/themes/index.ts
-var themes = {
+var themes2 = {
   light: light_default,
   dark: dark_default
 };
-var themes_default = themes;
+var themes_default = themes2;
 
 // src/contexts/ThemeProvider.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -4557,6 +4607,9 @@ function ThemeProvider({
     if (theme.showcase) {
       Object.entries(theme.showcase).forEach(([key, value]) => {
         setCSSVariable(`--showcase-${key}`, value);
+        if (key === "surface" || key === "surface-elevated") {
+          setCSSVariable(`--color-${key}`, value);
+        }
       });
     }
     if (theme.semanticColors) {