@yomologic/react-ui 0.4.1 → 0.5.1

package/dist/index.mjs

@@ -10,7 +10,7 @@ function cn(...inputs) {
 }
 
 // src/ui/button.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Button = React.forwardRef(
   ({
     className,
@@ -20,10 +20,9 @@ var Button = React.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",
@@ -43,81 +42,105 @@ var Button = React.forwardRef(
     };
     const radiusStyle = "[border-radius:var(--button-radius)]";
     const fontWeightStyle = "[font-weight:var(--button-font-weight)]";
-    return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+      isLoading && /* @__PURE__ */ 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__ */ jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(
+        "a",
+        {
+          ref,
+          href,
+          className: classNames,
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          onMouseDown: handleMouseDown,
+          onMouseUp: handleMouseUp,
+          ...rest2,
+          children: content
+        }
+      );
+    }
+    const { disabled, ...rest } = props;
+    return /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                  "circle",
-                  {
-                    className: "opacity-25",
-                    cx: "12",
-                    cy: "12",
-                    r: "10",
-                    stroke: "currentColor",
-                    strokeWidth: "4"
-                  }
-                ),
-                /* @__PURE__ */ 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
       }
     );
   }
@@ -391,7 +414,7 @@ function FormControl({
   asChild = false
 }) {
   const autoId = useId();
-  const stableFieldId = useRef();
+  const stableFieldId = useRef(void 0);
   if (!stableFieldId.current) {
     stableFieldId.current = name ? `field-${name}` : `field-${autoId}`;
   }
@@ -535,17 +558,18 @@ function FormControl({
     if (asChild) {
       const child = Children.only(children);
       if (isValidElement(child)) {
+        const childProps = child.props;
         return 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?.();
           }
         });
       }
@@ -579,8 +603,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,
@@ -651,8 +675,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,
@@ -690,7 +714,7 @@ var Input = React2.forwardRef(
     const formControl = useFormControl();
     const internalRef = useRef2(null);
     const [validationError, setValidationError] = useState3();
-    const stableId = useRef2();
+    const stableId = useRef2(void 0);
     if (!stableId.current) {
       stableId.current = id || formControl?.fieldId || `input-${autoId}`;
     }
@@ -904,7 +928,7 @@ var Input = React2.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
@@ -927,7 +951,7 @@ var Input = React2.forwardRef(
             shouldRenderError && inputError && /* @__PURE__ */ jsx4(
               "p",
               {
-                className: "text-caption text-red-600",
+                className: "text-small text-error",
                 id: `${inputId}-error`,
                 role: "alert",
                 suppressHydrationWarning: true,
@@ -937,7 +961,7 @@ var Input = React2.forwardRef(
             helperText && !inputError && !formControl && /* @__PURE__ */ jsx4(
               "p",
               {
-                className: "text-caption text-(--color-muted-foreground)",
+                className: "text-small text-(--color-muted-foreground)",
                 id: `${inputId}-helper`,
                 suppressHydrationWarning: true,
                 children: helperText
@@ -953,13 +977,14 @@ Input.displayName = "Input";
 
 // src/ui/card.tsx
 import React3 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Card = React3.forwardRef(
   ({
     className,
     variant = "default",
     padding = "md",
     hoverable = false,
+    accentColor,
     children,
     ...props
   }, ref) => {
@@ -967,7 +992,8 @@ var Card = React3.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: "",
@@ -976,7 +1002,7 @@ var Card = React3.forwardRef(
       lg: "p-6"
     };
     const hoverStyles = hoverable ? "hover:shadow-lg transition-shadow cursor-pointer" : "";
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -987,8 +1013,20 @@ var Card = React3.forwardRef(
           hoverStyles,
           className
         ),
+        style: variant === "accent" && accentColor ? {
+          "--card-accent-color": accentColor
+        } : void 0,
         ...props,
-        children
+        children: [
+          variant === "accent" && /* @__PURE__ */ jsx5(
+            "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
+        ]
       }
     );
   }
@@ -1043,6 +1081,7 @@ var CardMedia = React3.forwardRef(
     component = "div",
     aspectRatio = "16/9",
     alt = "",
+    objectFit = "cover",
     style,
     ...props
   }, ref) => {
@@ -1050,6 +1089,7 @@ var CardMedia = React3.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__ */ jsx5(
         "img",
@@ -1057,7 +1097,7 @@ var CardMedia = React3.forwardRef(
           ref,
           src: image,
           alt,
-          className: cn("w-full object-cover", className),
+          className: cn("w-full h-full", objectFitClass, className),
           style: aspectRatioStyle,
           ...props
         }
@@ -1069,7 +1109,7 @@ var CardMedia = React3.forwardRef(
         {
           ref,
           src: video,
-          className: cn("w-full object-cover", className),
+          className: cn("w-full", objectFitClass, className),
           style: aspectRatioStyle,
           ...props
         }
@@ -1093,18 +1133,31 @@ var CardMedia = React3.forwardRef(
 );
 CardMedia.displayName = "CardMedia";
 var CardActions = React3.forwardRef(
-  ({ className, disableSpacing = false, ...props }, ref) => /* @__PURE__ */ jsx5(
-    "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__ */ jsx5(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center",
+          justifyContent,
+          !disableSpacing && `gap-2 ${padding}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 CardActions.displayName = "CardActions";
 var CardActionArea = React3.forwardRef(
@@ -1131,7 +1184,7 @@ CardActionArea.displayName = "CardActionArea";
 
 // src/ui/badge.tsx
 import React4 from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var Badge = React4.forwardRef(
   ({
     className,
@@ -1179,7 +1232,7 @@ var Badge = React4.forwardRef(
       lg: "w-4 h-4",
       xl: "w-5 h-5"
     };
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "span",
       {
         ref,
@@ -1217,7 +1270,7 @@ Badge.displayName = "Badge";
 
 // src/ui/checkbox.tsx
 import React5, { useId as useId3, useState as useState4, useRef as useRef3, useEffect as useEffect2 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function Checkbox({
   label,
   name,
@@ -1234,7 +1287,7 @@ function Checkbox({
 }) {
   const form = useForm();
   const autoId = useId3();
-  const stableId = useRef3();
+  const stableId = useRef3(void 0);
   if (!stableId.current) {
     stableId.current = id || `checkbox-${autoId}`;
   }
@@ -1304,75 +1357,68 @@ function Checkbox({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      className: cn("flex flex-col", className),
-      style: { marginBottom: "var(--form-control-spacing)" },
-      children: [
-        /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
-          /* @__PURE__ */ jsxs5("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
-            /* @__PURE__ */ jsx7("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx7(
-              "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__ */ jsx7(
-              "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__ */ jsxs5(
-            "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__ */ jsx7("span", { className: "ml-1", children: "*" })
-              ]
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center", containerGapStyles[size]), children: [
+      /* @__PURE__ */ jsxs6("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+        /* @__PURE__ */ jsx7("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx7(
+          "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__ */ jsx7("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ jsx7("p", { className: "text-caption text-red-600", role: "alert", children: displayError }) })
-      ]
-    }
-  );
+          }
+        ) }),
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsxs6(
+        "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__ */ jsx7("span", { className: "ml-1", children: "*" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "h-5 mt-1.5", children: displayError && /* @__PURE__ */ jsx7("p", { className: "text-small text-error", role: "alert", children: displayError }) })
+  ] });
 }
 function CheckboxGroup({
   label,
@@ -1421,13 +1467,13 @@ function CheckboxGroup({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ jsxs5(
+        label && /* @__PURE__ */ jsxs6(
           "label",
           {
             className: "block text-small font-semibold mb-1",
@@ -1446,7 +1492,7 @@ function CheckboxGroup({
             ),
             children: options.map((option) => {
               const isDisabled = disabled || option.disabled;
-              return /* @__PURE__ */ jsxs5(
+              return /* @__PURE__ */ jsxs6(
                 "div",
                 {
                   className: cn(
@@ -1454,7 +1500,7 @@ function CheckboxGroup({
                     containerGapStyles[size]
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs5("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
+                    /* @__PURE__ */ jsxs6("div", { className: "relative group/checkbox flex items-center shrink-0", children: [
                       /* @__PURE__ */ jsx7("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx7(
                         "div",
                         {
@@ -1521,7 +1567,7 @@ function CheckboxGroup({
         /* @__PURE__ */ jsx7("div", { className: "h-5 mt-1.5", children: (error || helperText) && /* @__PURE__ */ jsx7(
           "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
           }
@@ -1533,7 +1579,7 @@ function CheckboxGroup({
 
 // src/ui/radio.tsx
 import { useState as useState5, useEffect as useEffect3 } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function RadioGroup({
   label,
   name,
@@ -1602,13 +1648,13 @@ function RadioGroup({
     lg: "gap-2",
     xl: "gap-2"
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ jsxs6(
+        label && /* @__PURE__ */ jsxs7(
           "label",
           {
             className: "block text-small font-semibold mb-1",
@@ -1628,7 +1674,7 @@ function RadioGroup({
             ),
             children: options.map((option) => {
               const isDisabled = disabled || option.disabled;
-              return /* @__PURE__ */ jsxs6(
+              return /* @__PURE__ */ jsxs7(
                 "div",
                 {
                   className: cn(
@@ -1636,7 +1682,7 @@ function RadioGroup({
                     containerGapStyles[size]
                   ),
                   children: [
-                    /* @__PURE__ */ jsxs6("div", { className: "relative group/radio flex items-center shrink-0", children: [
+                    /* @__PURE__ */ jsxs7("div", { className: "relative group/radio flex items-center shrink-0", children: [
                       /* @__PURE__ */ jsx8("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx8(
                         "div",
                         {
@@ -1700,7 +1746,7 @@ function RadioGroup({
         /* @__PURE__ */ jsx8("div", { className: "h-5 mt-1.5", children: (displayError || helperText) && /* @__PURE__ */ jsx8(
           "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
           }
@@ -1713,7 +1759,7 @@ function RadioGroup({
 // src/ui/select.tsx
 import { ChevronDown, X } from "lucide-react";
 import { useState as useState6, useRef as useRef4, useEffect as useEffect4 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function Select({
   name,
   label,
@@ -1825,13 +1871,13 @@ function Select({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: `w-full ${className}`,
       style: { marginBottom: "var(--form-control-spacing)" },
       children: [
-        label && /* @__PURE__ */ jsxs7(
+        label && /* @__PURE__ */ jsxs8(
           "label",
           {
             className: "block text-small font-semibold mb-1",
@@ -1842,8 +1888,8 @@ function Select({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { ref: dropdownRef, className: "relative", children: [
-          /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsxs8("div", { ref: dropdownRef, className: "relative", children: [
+          /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
@@ -1854,13 +1900,13 @@ 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)"}
           `,
               children: [
                 /* @__PURE__ */ jsx9("span", { className: "truncate", children: getSelectedLabel() }),
-                /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 ml-2", children: [
+                /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 ml-2", children: [
                   value && /* @__PURE__ */ jsx9(
                     "div",
                     {
@@ -1897,7 +1943,7 @@ function Select({
                 /* @__PURE__ */ jsx9("div", { onClick: () => setIsOpen(false), children })
               ) : (
                 // Standard options
-                /* @__PURE__ */ jsxs7("ul", { children: [
+                /* @__PURE__ */ jsxs8("ul", { children: [
                   /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(
                     "button",
                     {
@@ -1938,7 +1984,7 @@ function Select({
         /* @__PURE__ */ jsx9("div", { className: "h-5 mt-1.5", children: (helperText || displayError) && /* @__PURE__ */ jsx9(
           "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
           }
         ) })
@@ -1949,7 +1995,7 @@ function Select({
 
 // src/ui/spinner.tsx
 import React6 from "react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var Spinner = React6.forwardRef(
   ({ className, size = "md", color = "primary", label, ...props }, ref) => {
     const sizes = {
@@ -1963,7 +2009,7 @@ var Spinner = React6.forwardRef(
       secondary: "text-(--color-muted-foreground)",
       white: "text-white"
     };
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         ref,
@@ -1973,7 +2019,7 @@ var Spinner = React6.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsxs9(
             "svg",
             {
               className: cn("animate-spin", sizes[size], colors[color]),
@@ -2012,10 +2058,9 @@ var Spinner = React6.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/ui/code-snippet.tsx
+import { Highlight, themes } from "prism-react-renderer";
 import { useState as useState7 } from "react";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function CodeSnippet({
   code,
   language = "tsx",
@@ -2038,8 +2083,8 @@ function CodeSnippet({
       console.error("Failed to copy:", err);
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "relative group w-full", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "relative group w-full", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "absolute right-3 top-3 [z-index:var(--z-index-code-button)]", children: [
       /* @__PURE__ */ jsx11(
         "button",
         {
@@ -2091,11 +2136,11 @@ function CodeSnippet({
           )
         }
       ),
-      showTooltip && !copied && /* @__PURE__ */ jsxs9("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-[#1f2937] text-white text-caption rounded shadow-lg whitespace-nowrap border border-[#374151]", children: [
+      showTooltip && !copied && /* @__PURE__ */ jsxs10("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-[#1f2937] text-white text-caption rounded shadow-lg whitespace-nowrap border border-[#374151]", children: [
         "Copy code",
         /* @__PURE__ */ jsx11("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-[#1f2937] border-l border-t border-[#374151] transform rotate-45" })
       ] }),
-      copied && /* @__PURE__ */ jsxs9("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-green-600 text-white text-caption rounded shadow-lg whitespace-nowrap", children: [
+      copied && /* @__PURE__ */ jsxs10("div", { className: "absolute right-0 top-full mt-2 px-2 py-1 bg-green-600 text-white text-caption rounded shadow-lg whitespace-nowrap", children: [
         "Copied!",
         /* @__PURE__ */ jsx11("div", { className: "absolute -top-1 right-3 w-2 h-2 bg-green-600 transform rotate-45" })
       ] })
@@ -2105,20 +2150,32 @@ function CodeSnippet({
       {
         className: `rounded-lg overflow-x-auto border border-[#1f2937] ${fontSizeClassMap[fontSize]} code-snippet-${fontSize}`,
         children: /* @__PURE__ */ jsx11(
-          SyntaxHighlighter,
+          Highlight,
           {
+            theme: themes.vsDark,
+            code,
             language,
-            style: 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__ */ jsx11(
+              "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__ */ jsx11("div", { ...getLineProps({ line }), children: line.map((token, key) => /* @__PURE__ */ jsx11(
+                  "span",
+                  {
+                    ...getTokenProps({ token })
+                  },
+                  key
+                )) }, i))
+              }
+            )
           }
         )
       }
@@ -2129,7 +2186,7 @@ function CodeSnippet({
 // src/ui/rating.tsx
 import { Star } from "lucide-react";
 import React7, { useId as useId4 } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var Rating = ({
   value,
   max = 5,
@@ -2171,7 +2228,7 @@ var Rating = ({
     const isHalf = displayValue >= i - 0.5 && displayValue < i;
     const isEmpty = displayValue < i - 0.5;
     stars.push(
-      /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(
         "span",
         {
           onClick: () => handleStarClick(i),
@@ -2222,7 +2279,7 @@ var Rating = ({
                 style: { position: "absolute", left: 0, top: 0 }
               }
             ),
-            isHalf && /* @__PURE__ */ jsxs10(
+            isHalf && /* @__PURE__ */ jsxs11(
               "svg",
               {
                 width: displaySize,
@@ -2230,7 +2287,7 @@ var Rating = ({
                 viewBox: `0 0 ${displaySize} ${displaySize}`,
                 style: { position: "absolute", left: 0, top: 0 },
                 children: [
-                  /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsxs10(
+                  /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsxs11(
                     "linearGradient",
                     {
                       id: `half-${uniqueId}-${i}`,
@@ -2263,7 +2320,7 @@ var Rating = ({
   }
   const valueText = valueFormat === "fraction" ? `${value.toFixed(1)}/${max}` : value.toFixed(1);
   if (showValue && valuePosition === "bottom") {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className,
@@ -2300,7 +2357,7 @@ var Rating = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className,
@@ -2331,7 +2388,7 @@ var Rating = ({
 };
 
 // src/ui/divider.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var Divider = ({
   variant = "fullWidth",
   orientation = "horizontal",
@@ -2355,13 +2412,13 @@ 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) {
     const leftLineClasses = textAlign === "left" ? `${baseClasses} ${orientationClasses}` : `flex-1 ${baseClasses} ${orientationClasses}`;
     const rightLineClasses = textAlign === "right" ? `${baseClasses} ${orientationClasses}` : `flex-1 ${baseClasses} ${orientationClasses}`;
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         role: "presentation",
@@ -2408,7 +2465,7 @@ var Divider = ({
 
 // src/ui/slider.tsx
 import { useState as useState8, useRef as useRef5, useEffect as useEffect5 } from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
   defaultValue = 0,
@@ -2646,7 +2703,7 @@ var Slider = ({
       const showLabelAlways = valueLabelDisplay === "on";
       const showLabelOnActiveOrHover = valueLabelDisplay === "auto";
       const thumbStyle = isVertical ? { bottom: `${percent}%` } : { left: `${percent}%` };
-      return /* @__PURE__ */ jsxs12(
+      return /* @__PURE__ */ jsxs13(
         "div",
         {
           className: `absolute ${isVertical ? "left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2"} cursor-pointer ${disabled ? "cursor-not-allowed opacity-50" : ""} group/thumb z-20`,
@@ -2660,7 +2717,7 @@ var Slider = ({
                 className: `absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 ${isActive ? currentSizeStyles.thumbActive : currentSizeStyles.thumb} ${currentColorStyles.thumb} ${!isActive && currentColorStyles.thumbHover} rounded-full shadow-md transition-all ${isActive ? `${currentSizeStyles.ringActive} ${currentColorStyles.thumbRing}` : `group-hover/thumb:shadow-lg ${currentSizeStyles.ringHover} ${currentColorStyles.thumbRingHover}`} ${disabled ? "pointer-events-none" : ""}`
               }
             ),
-            showLabelAlways && /* @__PURE__ */ jsxs12(
+            showLabelAlways && /* @__PURE__ */ jsxs13(
               "div",
               {
                 className: `absolute ${isVertical ? "left-6" : "-top-10"} ${isVertical ? "top-1/2 -translate-y-1/2" : "left-1/2 -translate-x-1/2"} px-2 py-1 text-caption font-semibold text-white ${color === "primary" ? "bg-(--color-primary)" : "bg-purple-500"} rounded shadow-lg whitespace-nowrap z-(--z-index-tooltip)`,
@@ -2675,7 +2732,7 @@ var Slider = ({
                 ]
               }
             ),
-            showLabelOnActiveOrHover && /* @__PURE__ */ jsxs12(
+            showLabelOnActiveOrHover && /* @__PURE__ */ jsxs13(
               "div",
               {
                 className: `absolute ${isVertical ? "left-6" : "-top-10"} ${isVertical ? "top-1/2 -translate-y-1/2" : "left-1/2 -translate-x-1/2"} px-2 py-1 text-caption font-semibold text-white ${color === "primary" ? "bg-(--color-primary)" : "bg-purple-500"} rounded shadow-lg whitespace-nowrap opacity-0 scale-90 ${isActive ? "opacity-100 scale-100" : "group-hover/thumb:opacity-100 group-hover/thumb:scale-100"} transition-all duration-300 ease-out pointer-events-none z-(--z-index-tooltip)`,
@@ -2699,13 +2756,13 @@ var Slider = ({
   const hasMarkLabels = marksList.some((mark) => mark.label);
   const containerClasses = isVertical ? "flex flex-col items-center py-4" : `flex items-center w-full px-2 ${hasMarkLabels ? "pb-6" : ""}`;
   const railClasses = isVertical ? `${currentSizeStyles.rail} relative overflow-visible` : `w-full ${currentSizeStyles.rail} relative overflow-visible`;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: `${containerClasses} ${className}`,
       style: isVertical ? { minHeight: "200px", height: "200px" } : void 0,
       children: [
-        /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsxs13(
           "div",
           {
             ref: sliderRef,
@@ -2752,7 +2809,7 @@ var Slider = ({
                 }
                 const markColor = isInSelectedRange ? "bg-(--color-background) shadow-sm group-hover/mark:bg-(--color-background) group-hover/mark:shadow-md" : "bg-[#4b5563] group-hover/mark:bg-[#1f2937]";
                 const labelColor = isInSelectedRange ? currentColorStyles.labelSelected : currentColorStyles.labelUnselected;
-                return /* @__PURE__ */ jsxs12(
+                return /* @__PURE__ */ jsxs13(
                   "div",
                   {
                     className: `group/mark absolute ${isVertical ? "left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2"} z-30`,
@@ -2771,7 +2828,7 @@ var Slider = ({
                           children: mark.label
                         }
                       ),
-                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ jsxs12(
+                      showMarkLabelsOnHover && !mark.label && /* @__PURE__ */ jsxs13(
                         "div",
                         {
                           className: `absolute ${isVertical ? "left-6 top-1/2 -translate-y-1/2" : "-top-8 left-1/2 -translate-x-1/2"} px-2 py-1 text-caption font-semibold text-white ${color === "primary" ? "bg-(--color-primary)" : "bg-purple-500"} rounded shadow-lg whitespace-nowrap opacity-0 scale-90 group-hover/mark:opacity-100 group-hover/mark:scale-100 transition-all duration-300 ease-out pointer-events-none z-(--z-index-tooltip)`,
@@ -2811,7 +2868,7 @@ var Slider = ({
 
 // src/ui/switch.tsx
 import { useState as useState9, useEffect as useEffect6 } from "react";
-import { Fragment, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function Switch({
   checked: controlledChecked,
   onChange,
@@ -2938,7 +2995,7 @@ function Switch({
       )
     }
   );
-  const content = !label ? /* @__PURE__ */ jsxs13(Fragment, { children: [
+  const content = !label ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
     switchElement,
     name && /* @__PURE__ */ jsx15(
       "input",
@@ -2952,7 +3009,7 @@ function Switch({
         required
       }
     )
-  ] }) : /* @__PURE__ */ jsxs13(
+  ] }) : /* @__PURE__ */ jsxs14(
     "label",
     {
       className: cn(
@@ -2963,7 +3020,7 @@ function Switch({
       ),
       children: [
         switchElement,
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "span",
           {
             className: cn(
@@ -3006,7 +3063,7 @@ function Switch({
 
 // src/ui/dialog.tsx
 import React9, { useEffect as useEffect7 } from "react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 var Dialog = ({
   open,
   onClose,
@@ -3064,7 +3121,7 @@ var Dialog = ({
       onClick: handleBackdropClick,
       role: "dialog",
       "aria-modal": "true",
-      children: /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs15(
         "div",
         {
           className: cn(
@@ -3224,7 +3281,7 @@ DialogFooter.displayName = "DialogFooter";
 
 // src/feedback/alert.tsx
 import React10 from "react";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var Alert = React10.forwardRef(
   ({
     className,
@@ -3306,9 +3363,9 @@ var Alert = React10.forwardRef(
         className: cn("relative border rounded-lg p-4", className),
         role: "alert",
         ...props,
-        children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3", children: [
+        children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3", children: [
           /* @__PURE__ */ jsx17("div", { className: "shrink-0", style: iconStyles[variant], children: icon || defaultIcons[variant] }),
-          /* @__PURE__ */ jsxs15("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxs16("div", { className: "flex-1", children: [
             title && /* @__PURE__ */ jsx17("h5", { className: "font-semibold mb-1", children: title }),
             /* @__PURE__ */ jsx17("div", { className: "text-sm", children })
           ] }),
@@ -3404,13 +3461,13 @@ Container.displayName = "Container";
 
 // src/layout/section-layout.tsx
 import React12 from "react";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function SectionLayout({
   children,
   hasStickyPreview = false
 }) {
   if (!hasStickyPreview) {
-    return /* @__PURE__ */ jsx19(Fragment2, { children });
+    return /* @__PURE__ */ jsx19(Fragment3, { children });
   }
   const childArray = React12.Children.toArray(children);
   if (childArray.length === 0) {
@@ -3418,7 +3475,7 @@ function SectionLayout({
   }
   const stickyPreview = childArray[0];
   const scrollableContent = childArray.slice(1);
-  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
     stickyPreview,
     scrollableContent.length > 0 && /* @__PURE__ */ jsx19("div", { className: "space-y-8", children: scrollableContent })
   ] });
@@ -3427,7 +3484,7 @@ function SectionLayout({
 // src/layout/nav.tsx
 import { Menu, X as X2, ChevronDown as ChevronDown2 } from "lucide-react";
 import React13, { useState as useState10, useEffect as useEffect8, useRef as useRef6 } from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var Nav = React13.forwardRef(
   ({
     className,
@@ -3506,12 +3563,12 @@ var Nav = React13.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",
@@ -3566,7 +3623,7 @@ var Nav = React13.forwardRef(
         orientation === "vertical" && "w-full",
         item.disabled && "opacity-50 cursor-not-allowed"
       );
-      const content = /* @__PURE__ */ jsxs17(Fragment3, { children: [
+      const content = /* @__PURE__ */ jsxs18(Fragment4, { children: [
         item.icon && /* @__PURE__ */ jsx20("span", { className: "flex-shrink-0", children: item.icon }),
         /* @__PURE__ */ jsx20("span", { children: item.label }),
         item.badge && /* @__PURE__ */ jsx20("span", { className: "ml-auto inline-flex items-center rounded-full bg-(--color-primary) px-2 py-0.5 text-caption font-medium text-white", children: item.badge }),
@@ -3581,7 +3638,7 @@ var Nav = React13.forwardRef(
         )
       ] });
       if (hasChildren) {
-        return /* @__PURE__ */ jsxs17("div", { className: "relative", ref: dropdownRef, children: [
+        return /* @__PURE__ */ jsxs18("div", { className: "relative", ref: dropdownRef, children: [
           /* @__PURE__ */ jsx20(
             "button",
             {
@@ -3598,7 +3655,7 @@ var Nav = React13.forwardRef(
                 "absolute left-0 mt-[var(--nav-gap)] min-w-[200px] bg-(--color-background) border border-(--color-border) rounded-[var(--nav-border-radius)] shadow-xl [z-index:var(--z-index-dropdown)] animate-in fade-in-0 zoom-in-95 duration-200",
                 orientation === "vertical" && "left-full top-0 ml-2 mt-0"
               ),
-              children: /* @__PURE__ */ jsx20("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ jsxs17(
+              children: /* @__PURE__ */ jsx20("div", { className: "py-1", children: item.children.map((child) => /* @__PURE__ */ jsxs18(
                 "button",
                 {
                   onClick: () => handleItemClick(child),
@@ -3666,7 +3723,7 @@ var Nav = React13.forwardRef(
       },
       [ref]
     );
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       "nav",
       {
         ref: setRefs,
@@ -3677,7 +3734,7 @@ var Nav = React13.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs17("div", { className: containerStyles, children: [
+          /* @__PURE__ */ jsxs18("div", { className: containerStyles, children: [
             logo && /* @__PURE__ */ jsx20("div", { className: "shrink-0", children: logo }),
             desktopNav,
             actions && /* @__PURE__ */ jsx20("div", { className: "shrink-0 flex items-center gap-2", children: actions }),
@@ -3706,7 +3763,7 @@ var Nav = React13.forwardRef(
               children: /* @__PURE__ */ jsx20("div", { className: "space-y-1 px-2 py-2", children: items.map((item) => renderNavItem(item, true)) })
             }
           ),
-          mobileMenuDirection !== "top" && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+          mobileMenuDirection !== "top" && /* @__PURE__ */ jsxs18(Fragment4, { children: [
             isMobileMenuOpen && /* @__PURE__ */ jsx20(
               "div",
               {
@@ -3748,7 +3805,7 @@ Nav.displayName = "Nav";
 // src/layout/drawer.tsx
 import { Menu as Menu2, X as X3 } from "lucide-react";
 import { useState as useState11, useEffect as useEffect9 } from "react";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function Drawer({
   title,
   subtitle,
@@ -3790,7 +3847,7 @@ function Drawer({
     window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, [lastScrollY, autoHideOnScroll]);
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
     /* @__PURE__ */ jsx21(
       "div",
       {
@@ -3799,12 +3856,12 @@ function Drawer({
           background: "var(--color-background)",
           borderBottom: "1px solid var(--color-border)"
         },
-        children: /* @__PURE__ */ jsxs18(
+        children: /* @__PURE__ */ jsxs19(
           "div",
           {
             className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
             children: [
-              /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
                 homeUrl && /* @__PURE__ */ jsx21(
                   "a",
                   {
@@ -3848,14 +3905,13 @@ function Drawer({
                 )
               ] }),
               headerActions && /* @__PURE__ */ jsx21("div", { className: "flex items-center", children: headerActions }),
-              /* @__PURE__ */ jsxs18("div", { children: [
+              /* @__PURE__ */ jsxs19("div", { children: [
                 /* @__PURE__ */ jsx21(
                   "h1",
                   {
-                    className: "font-bold",
+                    className: "font-bold text-h5",
                     style: {
-                      color: "var(--color-foreground)",
-                      fontSize: "var(--typography-h5)"
+                      color: "var(--color-foreground)"
                     },
                     children: title
                   }
@@ -3863,9 +3919,9 @@ function Drawer({
                 subtitle && /* @__PURE__ */ jsx21(
                   "p",
                   {
+                    className: "text-caption",
                     style: {
-                      color: "var(--color-muted-foreground)",
-                      fontSize: "var(--typography-caption)"
+                      color: "var(--color-muted-foreground)"
                     },
                     children: subtitle
                   }
@@ -3884,7 +3940,7 @@ function Drawer({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsxs19(
       "aside",
       {
         className: `
@@ -3901,22 +3957,21 @@ function Drawer({
           ...mobileMenuOpen && typeof window !== "undefined" && window.innerWidth < 1024 ? { zIndex: 9999 } : {}
         },
         children: [
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "div",
             {
               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__ */ jsx21(
                   "h1",
                   {
-                    className: "font-bold",
+                    className: "font-bold text-h5",
                     style: {
-                      color: "var(--color-foreground)",
-                      fontSize: "var(--typography-h5)"
+                      color: "var(--color-foreground)"
                     },
                     children: title
                   }
@@ -3924,10 +3979,9 @@ function Drawer({
                 subtitle && /* @__PURE__ */ jsx21(
                   "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
                   }
@@ -3935,20 +3989,19 @@ function Drawer({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsxs19(
             "div",
             {
               className: "lg:hidden p-4 flex items-center justify-between",
               style: { borderBottom: "1px solid var(--color-border)" },
               children: [
-                /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsxs19("div", { children: [
                   /* @__PURE__ */ jsx21(
                     "h1",
                     {
-                      className: "font-bold",
+                      className: "font-bold text-h5",
                       style: {
-                        color: "var(--color-foreground)",
-                        fontSize: "var(--typography-h5)"
+                        color: "var(--color-foreground)"
                       },
                       children: title
                     }
@@ -3956,10 +4009,9 @@ function Drawer({
                   subtitle && /* @__PURE__ */ jsx21(
                     "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
                     }
@@ -3980,7 +4032,7 @@ function Drawer({
               ]
             }
           ),
-          /* @__PURE__ */ jsx21("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs18(
+          /* @__PURE__ */ jsx21("nav", { className: "px-3 py-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs19(
             "div",
             {
               style: {
@@ -3990,11 +4042,10 @@ function Drawer({
                 section.title && /* @__PURE__ */ jsx21(
                   "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
@@ -4008,11 +4059,11 @@ function Drawer({
                       flexDirection: "column",
                       gap: "var(--drawer-item-spacing)"
                     },
-                    children: section.items.map((item) => /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsxs18(
+                    children: section.items.map((item) => /* @__PURE__ */ jsx21("li", { children: /* @__PURE__ */ jsxs19(
                       "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)";
@@ -4030,7 +4081,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)",
@@ -4106,7 +4156,7 @@ function Header({
 // src/layout/sidebar-nav.tsx
 import { Menu as Menu3, X as X4 } from "lucide-react";
 import { useState as useState13 } from "react";
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 function SidebarNav({
   title,
   subtitle,
@@ -4124,8 +4174,8 @@ function SidebarNav({
     setMobileMenuOpen(false);
   };
   const useSections = sections || (items ? [{ title: "", items }] : []);
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx23("div", { className: "lg:hidden fixed top-0 left-0 right-0 [z-index:var(--z-index-nav)] bg-(--color-background) border-b border-(--color-border) px-4 py-3", children: /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsx23("div", { className: "lg:hidden fixed top-0 left-0 right-0 [z-index:var(--z-index-nav)] bg-(--color-background) border-b border-(--color-border) px-4 py-3", children: /* @__PURE__ */ jsxs20(
       "div",
       {
         className: `flex items-center ${isLeft ? "justify-between" : "justify-between flex-row-reverse"}`,
@@ -4139,7 +4189,7 @@ function SidebarNav({
               children: mobileMenuOpen ? /* @__PURE__ */ jsx23(X4, { className: "w-6 h-6 text-(--color-muted-foreground)" }) : /* @__PURE__ */ jsx23(Menu3, { className: "w-6 h-6 text-(--color-muted-foreground)" })
             }
           ),
-          /* @__PURE__ */ jsxs19("div", { children: [
+          /* @__PURE__ */ jsxs20("div", { children: [
             /* @__PURE__ */ jsx23("h1", { className: "text-h4 font-bold text-(--color-foreground)", children: title }),
             subtitle && /* @__PURE__ */ jsx23("p", { className: "text-caption text-(--color-muted-foreground)", children: subtitle })
           ] })
@@ -4154,7 +4204,7 @@ function SidebarNav({
         onClick: () => setMobileMenuOpen(false)
       }
     ),
-    /* @__PURE__ */ jsxs19(
+    /* @__PURE__ */ jsxs20(
       "aside",
       {
         className: `
@@ -4165,18 +4215,18 @@ function SidebarNav({
           ${mobileMenuOpen ? "translate-x-0" : `${isLeft ? "-translate-x-full" : "translate-x-full"} lg:translate-x-0`}
         `,
         children: [
-          /* @__PURE__ */ jsxs19("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "hidden lg:block p-6 border-b border-(--color-border)", children: [
             /* @__PURE__ */ jsx23("h1", { className: "text-h3 font-bold text-(--color-foreground)", children: title }),
             subtitle && /* @__PURE__ */ jsx23("p", { className: "text-caption text-(--color-muted-foreground) mt-1", children: subtitle })
           ] }),
           /* @__PURE__ */ jsx23("div", { className: "lg:hidden h-[57px]", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx23("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs19(
+          /* @__PURE__ */ jsx23("nav", { className: "p-4", children: useSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs20(
             "div",
             {
               className: sectionIndex > 0 ? "mt-6" : "",
               children: [
                 section.title && /* @__PURE__ */ jsx23("h3", { className: "px-4 mb-2 text-caption font-semibold text-(--color-muted-foreground) uppercase tracking-wider", children: section.title }),
-                /* @__PURE__ */ jsx23("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsxs19(
+                /* @__PURE__ */ jsx23("ul", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsx23("li", { children: /* @__PURE__ */ jsxs20(
                   "button",
                   {
                     onClick: () => handleItemClick(item.id),
@@ -4203,10 +4253,10 @@ function SidebarNav({
 
 // src/shared/empty-state.tsx
 import React17 from "react";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 var EmptyState = React17.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         ref,
@@ -4448,11 +4498,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
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -4494,6 +4544,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) {