@hyddenlabs/hydn-ui 0.3.0-alpha.104 → 0.3.0-alpha.151

package/dist/index.js

@@ -1,151 +1,191 @@
+import React6, { createContext, useId, useState, useRef, useEffect, createElement, isValidElement, cloneElement, useCallback, useLayoutEffect, useContext, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React5, { createContext, useId, useState, useRef, useEffect, isValidElement, cloneElement, useCallback, useLayoutEffect, useContext, useMemo, createElement } from 'react';
+import * as TablerIcons from '@tabler/icons-react';
 import { IconX, IconChevronDown, IconCheck, IconCalendar, IconMenu2, IconLayoutSidebarRightExpand, IconLayoutSidebarRightCollapse, IconTrash, IconChevronRight, IconChevronLeft, IconSelector, IconChevronUp } from '@tabler/icons-react';
 import { Link, NavLink } from 'react-router-dom';
 import { createPortal } from 'react-dom';
 
 // src/components/forms/button/button.tsx
-function Button({
-  children,
-  onClick,
-  ariaLabel,
-  disabled = false,
-  type = "button",
-  className = "",
-  icon,
-  iconPosition = "left",
-  variant = "neutral",
-  style = "solid",
-  size = "md",
-  rounded = "default",
-  loading = false,
-  fullWidth = false,
-  wide = false,
-  active = false
-}) {
-  const isIconOnly = icon && !children;
-  if (isIconOnly && !ariaLabel) {
-    console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
-  }
-  const solidVariantClasses = {
-    neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
-    primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
-    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
-    accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
-    info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
-    success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
-    warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
-    error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
-  };
-  const outlineVariantClasses = {
-    neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
-    primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
-    secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
-    accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
-    info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
-    success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
-    warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
-    error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
-  };
-  const ghostVariantClasses = {
-    neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
-    primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
-    secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
-    accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
-    info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
-    success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
-    warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
-    error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
-  };
-  const softVariantClasses = {
-    neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
-    primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
-    secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
-    accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
-    info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
-    success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
-    warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
-    error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
-  };
-  const linkVariantClasses = {
-    neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
-    primary: "bg-transparent text-primary underline-offset-4 hover:underline",
-    secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
-    accent: "bg-transparent text-accent underline-offset-4 hover:underline",
-    info: "bg-transparent text-info underline-offset-4 hover:underline",
-    success: "bg-transparent text-success underline-offset-4 hover:underline",
-    warning: "bg-transparent text-warning underline-offset-4 hover:underline",
-    error: "bg-transparent text-destructive underline-offset-4 hover:underline"
-  };
-  const getStyleClasses = () => {
-    const variantKey = variant;
-    switch (style) {
-      case "outline":
-        return `${outlineVariantClasses[variantKey]} active:scale-95`;
-      case "ghost":
-        return ghostVariantClasses[variantKey];
-      case "link":
-        return linkVariantClasses[variantKey];
-      case "soft":
-        return softVariantClasses[variantKey];
-      case "solid":
-      default:
-        return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
+var Button = React6.forwardRef(
+  ({
+    children,
+    onClick,
+    ariaLabel,
+    disabled = false,
+    type = "button",
+    className = "",
+    icon,
+    iconPosition = "left",
+    variant = "neutral",
+    style = "solid",
+    size = "md",
+    rounded = "default",
+    loading = false,
+    fullWidth = false,
+    wide = false,
+    active = false
+  }, ref) => {
+    const isIconOnly = icon && !children;
+    if (isIconOnly && !ariaLabel) {
+      console.warn("Button: Icon-only buttons require an ariaLabel for accessibility");
     }
-  };
-  const sizeClasses2 = {
-    xs: "h-8 sm:h-6 px-3 sm:px-2 text-sm sm:text-xs min-h-8 sm:min-h-6",
-    sm: "h-10 sm:h-8 px-4 sm:px-3 text-base sm:text-sm min-h-10 sm:min-h-8",
-    md: "h-12 sm:h-10 px-5 sm:px-4 text-base min-h-12 sm:min-h-10",
-    lg: "h-14 sm:h-12 px-7 sm:px-6 text-lg min-h-14 sm:min-h-12",
-    xl: "h-16 sm:h-14 px-9 sm:px-8 text-xl min-h-16 sm:min-h-14"
-  };
-  const roundedClasses = {
-    default: "rounded-md",
-    pill: "rounded-full",
-    square: "rounded-none aspect-square",
-    circle: "rounded-full aspect-square"
-  };
-  const displayIcon = loading ? /* @__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",
+    const solidVariantClasses = {
+      neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90 active:bg-neutral/80",
+      primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 active:bg-secondary/80",
+      accent: "bg-accent text-accent-foreground hover:bg-accent/90 active:bg-accent/80",
+      info: "bg-info text-info-foreground hover:bg-info/90 active:bg-info/80",
+      success: "bg-success text-success-foreground hover:bg-success/90 active:bg-success/80",
+      warning: "bg-warning text-warning-foreground hover:bg-warning/90 active:bg-warning/80",
+      error: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80"
+    };
+    const outlineVariantClasses = {
+      neutral: "border-2 border-neutral text-neutral bg-transparent hover:bg-neutral hover:text-neutral-foreground",
+      primary: "border-2 border-primary text-primary bg-transparent hover:bg-primary hover:text-primary-foreground",
+      secondary: "border-2 border-secondary text-secondary bg-transparent hover:bg-secondary hover:text-secondary-foreground",
+      accent: "border-2 border-accent text-accent bg-transparent hover:bg-accent hover:text-accent-foreground",
+      info: "border-2 border-info text-info bg-transparent hover:bg-info hover:text-info-foreground",
+      success: "border-2 border-success text-success bg-transparent hover:bg-success hover:text-success-foreground",
+      warning: "border-2 border-warning text-warning bg-transparent hover:bg-warning hover:text-warning-foreground",
+      error: "border-2 border-destructive text-destructive bg-transparent hover:bg-destructive hover:text-destructive-foreground"
+    };
+    const ghostVariantClasses = {
+      neutral: "bg-transparent text-foreground hover:bg-neutral/10 active:bg-neutral/20",
+      primary: "bg-transparent text-primary hover:bg-primary/10 active:bg-primary/20",
+      secondary: "bg-transparent text-secondary hover:bg-secondary/10 active:bg-secondary/20",
+      accent: "bg-transparent text-accent hover:bg-accent/10 active:bg-accent/20",
+      info: "bg-transparent text-info hover:bg-info/10 active:bg-info/20",
+      success: "bg-transparent text-success hover:bg-success/10 active:bg-success/20",
+      warning: "bg-transparent text-warning hover:bg-warning/10 active:bg-warning/20",
+      error: "bg-transparent text-destructive hover:bg-destructive/10 active:bg-destructive/20"
+    };
+    const softVariantClasses = {
+      neutral: "bg-neutral/20 text-foreground hover:bg-neutral/30 active:bg-neutral/40",
+      primary: "bg-primary/20 text-primary hover:bg-primary/30 active:bg-primary/40",
+      secondary: "bg-secondary/20 text-secondary hover:bg-secondary/30 active:bg-secondary/40",
+      accent: "bg-accent/20 text-accent hover:bg-accent/30 active:bg-accent/40",
+      info: "bg-info/20 text-info hover:bg-info/30 active:bg-info/40",
+      success: "bg-success/20 text-success hover:bg-success/30 active:bg-success/40",
+      warning: "bg-warning/20 text-warning hover:bg-warning/30 active:bg-warning/40",
+      error: "bg-destructive/20 text-destructive hover:bg-destructive/30 active:bg-destructive/40"
+    };
+    const linkVariantClasses = {
+      neutral: "bg-transparent text-foreground underline-offset-4 hover:underline",
+      primary: "bg-transparent text-primary underline-offset-4 hover:underline",
+      secondary: "bg-transparent text-secondary underline-offset-4 hover:underline",
+      accent: "bg-transparent text-accent underline-offset-4 hover:underline",
+      info: "bg-transparent text-info underline-offset-4 hover:underline",
+      success: "bg-transparent text-success underline-offset-4 hover:underline",
+      warning: "bg-transparent text-warning underline-offset-4 hover:underline",
+      error: "bg-transparent text-destructive underline-offset-4 hover:underline"
+    };
+    const getStyleClasses = () => {
+      const variantKey = variant;
+      switch (style) {
+        case "outline":
+          return `${outlineVariantClasses[variantKey]} active:scale-95`;
+        case "ghost":
+          return ghostVariantClasses[variantKey];
+        case "link":
+          return linkVariantClasses[variantKey];
+        case "soft":
+          return softVariantClasses[variantKey];
+        case "solid":
+        default:
+          return `${solidVariantClasses[variantKey]} shadow-sm hover:shadow-md`;
+      }
+    };
+    const sizeClasses2 = {
+      xs: "h-8 sm:h-6 px-3 sm:px-2 text-sm sm:text-xs min-h-8 sm:min-h-6",
+      sm: "h-10 sm:h-8 px-4 sm:px-3 text-base sm:text-sm min-h-10 sm:min-h-8",
+      md: "h-12 sm:h-10 px-5 sm:px-4 text-base min-h-12 sm:min-h-10",
+      lg: "h-14 sm:h-12 px-7 sm:px-6 text-lg min-h-14 sm:min-h-12",
+      xl: "h-16 sm:h-14 px-9 sm:px-8 text-xl min-h-16 sm:min-h-14"
+    };
+    const roundedClasses = {
+      default: "rounded-md",
+      pill: "rounded-full",
+      square: "rounded-none aspect-square",
+      circle: "rounded-full aspect-square"
+    };
+    const displayIcon = loading ? /* @__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"
+        }
+      )
+    ] }) : icon;
+    const styleClasses = getStyleClasses();
+    const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
+    const activeClasses = active ? "active:scale-95" : "";
+    return /* @__PURE__ */ jsxs(
+      "button",
       {
-        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"
+        ref,
+        type,
+        onClick,
+        "aria-label": ariaLabel,
+        disabled: disabled || loading,
+        className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses2[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
+        children: [
+          displayIcon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
+          children,
+          displayIcon && iconPosition === "right" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
+        ]
       }
-    )
-  ] }) : icon;
-  const styleClasses = getStyleClasses();
-  const widthClasses = fullWidth ? "w-full" : wide ? "px-8" : "";
-  const activeClasses = active ? "active:scale-95" : "";
-  return /* @__PURE__ */ jsxs(
-    "button",
+    );
+  }
+);
+Button.displayName = "Button";
+var button_default = Button;
+var sizeMap = {
+  xs: 16,
+  sm: 18,
+  md: 22,
+  lg: 26,
+  xl: 30,
+  "2xl": 36
+};
+var Icon = ({
+  name,
+  size = "md",
+  color = "currentColor",
+  strokeWidth = 2,
+  className = "",
+  onClick
+}) => {
+  const pascalName = name.split(/[-_]/).filter((s) => s).map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  const componentName = pascalName.startsWith("Icon") ? pascalName : "Icon" + pascalName;
+  const IconComponent = TablerIcons[componentName];
+  if (!IconComponent) return null;
+  const pixelSize = typeof size === "number" ? size : sizeMap[size] || sizeMap.md;
+  return /* @__PURE__ */ jsx(
+    IconComponent,
     {
-      type,
+      size: pixelSize,
+      color,
+      strokeWidth,
+      className,
       onClick,
-      "aria-label": ariaLabel,
-      disabled: disabled || loading,
-      className: `inline-flex items-center justify-center ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses2[size]} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
-      children: [
-        displayIcon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "mr-2" : ""}`, children: displayIcon }),
-        children,
-        displayIcon && iconPosition === "right" && /* @__PURE__ */ jsx("span", { className: `inline-flex ${children ? "ml-2" : ""}`, children: displayIcon })
-      ]
+      "aria-hidden": "true"
     }
   );
-}
-Button.displayName = "Button";
-var button_default = Button;
+};
+Icon.displayName = "Icon";
 function Input({
   value,
   onChange,
+  onFocus,
   placeholder,
   disabled = false,
   type = "text",
   className = "",
   ariaLabel,
+  ref,
   id,
   name,
   required = false,
@@ -168,7 +208,9 @@ function Input({
     {
       type,
       value,
+      ref,
       onChange,
+      onFocus,
       placeholder,
       disabled,
       "aria-label": ariaLabel,
@@ -774,48 +816,153 @@ ButtonGroup.displayName = "ButtonGroup";
 var button_group_default = ButtonGroup;
 function Text({
   children,
+  as = "p",
   variant = "body",
   size,
   weight = "semibold",
-  // elevated default weight
+  align,
+  leading,
+  tracking,
+  transform,
+  decoration,
+  italic = false,
+  truncate = false,
+  lineClamp,
+  wrap,
+  wordBreak,
+  opacity,
+  hasMargin = false,
+  selectable,
   className = "",
-  noMargin = false
+  id,
+  htmlFor
 }) {
   const variantClasses = {
     body: "text-foreground",
     muted: "text-muted-foreground",
-    small: "text-muted-foreground"
+    small: "text-muted-foreground",
+    primary: "text-primary",
+    secondary: "text-secondary-foreground",
+    success: "text-success",
+    warning: "text-warning",
+    error: "text-destructive",
+    inherit: "text-inherit"
   };
   const sizeClasses2 = {
     xs: "text-sm sm:text-xs",
     sm: "text-base sm:text-sm",
     base: "text-base",
     lg: "text-lg",
-    xl: "text-xl"
+    xl: "text-xl",
+    "2xl": "text-2xl"
   };
   const weightClasses = {
+    light: "font-light",
     normal: "font-normal",
     medium: "font-medium",
     semibold: "font-semibold",
-    bold: "font-bold"
+    bold: "font-bold",
+    extrabold: "font-extrabold"
+  };
+  const alignClasses = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify"
+  };
+  const leadingClasses = {
+    none: "leading-none",
+    tight: "leading-tight",
+    snug: "leading-snug",
+    normal: "leading-normal",
+    relaxed: "leading-relaxed",
+    loose: "leading-loose"
+  };
+  const trackingClasses = {
+    tighter: "tracking-tighter",
+    tight: "tracking-tight",
+    normal: "tracking-normal",
+    wide: "tracking-wide",
+    wider: "tracking-wider",
+    widest: "tracking-widest"
+  };
+  const transformClasses = {
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    normal: "normal-case"
+  };
+  const decorationClasses = {
+    underline: "underline",
+    "line-through": "line-through",
+    none: "no-underline"
+  };
+  const wrapClasses = {
+    wrap: "text-wrap",
+    nowrap: "text-nowrap",
+    balance: "text-balance",
+    pretty: "text-pretty"
+  };
+  const wordBreakClasses = {
+    normal: "break-normal",
+    words: "break-words",
+    all: "break-all",
+    keep: "break-keep"
+  };
+  const opacityClasses = {
+    0: "opacity-0",
+    25: "opacity-25",
+    50: "opacity-50",
+    75: "opacity-75",
+    100: "opacity-100"
+  };
+  const lineClampClasses = {
+    1: "line-clamp-1",
+    2: "line-clamp-2",
+    3: "line-clamp-3",
+    4: "line-clamp-4",
+    5: "line-clamp-5",
+    6: "line-clamp-6"
   };
   const defaultSizes = {
     body: "lg",
-    // bigger default body text
     muted: "base",
-    // muted still readable
-    small: "sm"
-    // small bumped up slightly
+    small: "sm",
+    primary: "base",
+    secondary: "base",
+    success: "base",
+    warning: "base",
+    error: "base",
+    inherit: "base"
   };
   const finalSize = size || defaultSizes[variant];
-  const margin = noMargin ? "" : "mb-4";
-  return /* @__PURE__ */ jsx(
-    "p",
-    {
-      className: `${variantClasses[variant]} ${sizeClasses2[finalSize]} ${weightClasses[weight]} ${margin} ${className}`,
-      children
-    }
-  );
+  const margin = hasMargin ? "mb-3 sm:mb-4" : "";
+  const classes = [
+    variantClasses[variant],
+    sizeClasses2[finalSize],
+    weightClasses[weight],
+    margin,
+    align && alignClasses[align],
+    leading && leadingClasses[leading],
+    tracking && trackingClasses[tracking],
+    transform && transformClasses[transform],
+    decoration && decorationClasses[decoration],
+    italic && "italic",
+    truncate && "truncate",
+    lineClamp && lineClampClasses[lineClamp],
+    wrap && wrapClasses[wrap],
+    wordBreak && wordBreakClasses[wordBreak],
+    opacity !== void 0 && opacityClasses[opacity],
+    selectable === true && "select-all",
+    selectable === false && "select-none",
+    className
+  ].filter(Boolean).join(" ");
+  const elementProps = {
+    className: classes,
+    ...id && { id },
+    ...htmlFor && as === "label" && { htmlFor }
+  };
+  return createElement(as, elementProps, children);
 }
 Text.displayName = "Text";
 var text_default = Text;
@@ -853,7 +1000,7 @@ function Stack({
     "div",
     {
       "data-component": "Stack",
-      className: `flex ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
+      className: `flex flex-wrap ${directionClass} ${spacingClasses[spacing]} ${alignClasses[align]} ${justifyClass} ${className}`,
       children
     }
   );
@@ -875,13 +1022,13 @@ function FormField({
     validationState: effectiveValidationState
   }) : children;
   return /* @__PURE__ */ jsxs(stack_default, { direction: "vertical", spacing: "sm", className, children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor, children: /* @__PURE__ */ jsxs(text_default, { variant: "body", size: "sm", noMargin: true, className: "font-medium", children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor, children: /* @__PURE__ */ jsxs(text_default, { variant: "body", size: "sm", className: "font-medium", children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
     ] }) }),
     childWithValidation,
-    error && /* @__PURE__ */ jsx(text_default, { variant: "body", size: "sm", noMargin: true, className: "text-destructive", children: error }),
-    !error && helperText && /* @__PURE__ */ jsx(text_default, { variant: "muted", size: "sm", noMargin: true, children: helperText })
+    error && /* @__PURE__ */ jsx(text_default, { variant: "body", size: "sm", className: "text-destructive", children: error }),
+    !error && helperText && /* @__PURE__ */ jsx(text_default, { variant: "muted", size: "sm", children: helperText })
   ] });
 }
 FormField.displayName = "FormField";
@@ -1434,8 +1581,8 @@ var PageTransition = ({
   type = "fade",
   className = ""
 }) => {
-  const [isVisible, setIsVisible] = React5.useState(false);
-  React5.useEffect(() => {
+  const [isVisible, setIsVisible] = React6.useState(false);
+  React6.useEffect(() => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         setIsVisible(true);
@@ -1504,12 +1651,15 @@ function Dropdown({
   align = "start",
   autoClose = true,
   size = "md",
+  variant = "neutral",
+  buttonStyle = "solid",
   minWidth,
   maxWidth,
   menuClassName = ""
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
   const menuRef = useRef(null);
   const itemsRef = useRef([]);
   const [activeIndex, setActiveIndex] = useState(-1);
@@ -1535,7 +1685,7 @@ function Dropdown({
       if (e.key === "Escape") {
         e.preventDefault();
         close();
-        dropdownRef.current?.querySelector('button[data-trigger="true"]')?.focus();
+        triggerRef.current?.focus();
       }
       if (e.key === "Tab") {
         e.preventDefault();
@@ -1588,18 +1738,35 @@ function Dropdown({
     }
     if (!itemsRef.current.includes(el)) itemsRef.current.push(el);
   }, []);
+  const { title, subtitle, icon, hideChevron } = trigger;
+  const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, color: "currentColor" }) : null;
   return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: `relative ${className}`, children: [
-    /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsxs(
+      button_default,
       {
-        "data-trigger": "true",
+        ref: triggerRef,
+        variant,
+        style: buttonStyle,
         onClick: () => isOpen ? close() : open(),
-        className: "bg-transparent border-0 p-0 cursor-pointer outline-none",
-        type: "button",
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         "aria-controls": isOpen ? "dropdown-menu" : void 0,
-        children: trigger
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            iconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: iconNode }),
+            /* @__PURE__ */ jsxs("span", { className: subtitle ? "text-left" : "", children: [
+              /* @__PURE__ */ jsx("span", { className: subtitle ? "block font-semibold" : "", children: title }),
+              subtitle && /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground font-normal", children: subtitle })
+            ] })
+          ] }),
+          !hideChevron && /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 14,
+              className: `ml-1 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ]
       }
     ),
     isOpen && /* @__PURE__ */ jsx(DropdownContext.Provider, { value: { requestClose: close, autoClose, registerItem, minWidth }, children: /* @__PURE__ */ jsx(
@@ -1607,7 +1774,7 @@ function Dropdown({
       {
         id: "dropdown-menu",
         ref: menuRef,
-        className: `absolute mt-2 bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === "sm" ? "min-w-[140px] text-xs py-1" : "min-w-[180px]"} max-h-[320px] overflow-y-auto origin-top animate-scaleIn focus:outline-none ${align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2"} ${menuClassName}`,
+        className: `absolute mt-2 bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === "sm" ? "min-w-[140px] text-xs py-1" : "min-w-[180px]"} max-h-80 overflow-y-auto origin-top animate-scaleIn focus:outline-none ${align === "start" ? "left-0" : align === "end" ? "right-0" : "left-1/2 -translate-x-1/2"} ${menuClassName}`,
         style: {
           minWidth: minWidth || void 0,
           maxWidth: maxWidth || void 0
@@ -1649,6 +1816,8 @@ function DropdownItem({
   };
   const variantClasses = palette[variant] || palette.default;
   const hasIcons = icon || endIcon;
+  const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, color: "currentColor" }) : null;
+  const endIconNode = endIcon ? /* @__PURE__ */ jsx(Icon, { name: endIcon, size: 16, color: "currentColor" }) : null;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -1663,12 +1832,12 @@ function DropdownItem({
       },
       className: `${base} ${focus} ${variantClasses} ${hasIcons ? "flex flex-row items-center gap-2.5" : "flex flex-col"} ${className}`,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: `flex-shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: icon }),
+        iconNode && /* @__PURE__ */ jsx("span", { className: `shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: iconNode }),
         /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx("span", { className: `block ${size === "sm" ? "font-medium" : "font-medium"} leading-snug`, children }),
           description && /* @__PURE__ */ jsx("span", { className: `block ${size === "sm" ? "text-[10px]" : "text-xs"} text-foreground/60 mt-0.5 line-clamp-2`, children: description })
         ] }),
-        endIcon && /* @__PURE__ */ jsx("span", { className: `flex-shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: endIcon })
+        endIconNode && /* @__PURE__ */ jsx("span", { className: `shrink-0 ${size === "sm" ? "text-[14px]" : "text-[16px]"}`, children: endIconNode })
       ]
     }
   );
@@ -1762,8 +1931,8 @@ Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
 function Sidebar({ children, className = "", width = "16rem" }) {
   const widthClass = width === "16rem" ? "w-64" : width === "4rem" ? "w-16" : "";
-  const enhancedChildren = React5.Children.map(children, (child) => {
-    if (!React5.isValidElement(child)) return child;
+  const enhancedChildren = React6.Children.map(children, (child) => {
+    if (!React6.isValidElement(child)) return child;
     const childProps = child.props || {};
     if ("href" in childProps) {
       const existing = typeof childProps.className === "string" ? childProps.className : "";
@@ -1774,7 +1943,7 @@ function Sidebar({ children, className = "", width = "16rem" }) {
         ...child.props,
         className: `${existing} ${sidebarItemClasses}`.trim()
       };
-      return React5.cloneElement(child, newProps, wrappedChildren);
+      return React6.cloneElement(child, newProps, wrappedChildren);
     }
     return child;
   });
@@ -2263,7 +2432,7 @@ function Modal({
     animationFrames: 2,
     restoreFocus: true
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -2571,13 +2740,7 @@ function Spinner({ size = "md", variant = "primary", className = "", speed, ...p
 }
 Spinner.displayName = "Spinner";
 var spinner_default = Spinner;
-function ProgressBar({
-  value,
-  max = 100,
-  showLabel = false,
-  variant = "default",
-  className = ""
-}) {
+function ProgressBar({ value, max = 100, showLabel, variant = "default", className = "" }) {
   const percentage = Math.min(value / max * 100, 100);
   const variantClasses = {
     default: "bg-primary",
@@ -2585,8 +2748,8 @@ function ProgressBar({
     warning: "bg-warning",
     error: "bg-destructive"
   };
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx("div", { className: "w-full bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 bg-muted/30 rounded-full h-2.5 overflow-hidden shadow-inner", children: /* @__PURE__ */ jsx(
       "div",
       {
         role: "progressbar",
@@ -2597,7 +2760,7 @@ function ProgressBar({
         style: { width: `${percentage}%` }
       }
     ) }),
-    showLabel && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground mt-2 text-right font-medium", children: [
+    showLabel && /* @__PURE__ */ jsxs(text_default, { variant: "muted", weight: "medium", size: "sm", children: [
       Math.round(percentage),
       "%"
     ] })
@@ -3393,7 +3556,7 @@ function Grid({
 }
 Grid.displayName = "Grid";
 var grid_default = Grid;
-function Heading({ children, level = 1, className = "", noMargin = false }) {
+function Heading({ children, level = 1, className = "", hasMargin = false }) {
   const levelClasses = {
     1: "text-3xl sm:text-4xl lg:text-5xl font-bold",
     2: "text-2xl sm:text-3xl lg:text-4xl font-bold",
@@ -3403,14 +3566,14 @@ function Heading({ children, level = 1, className = "", noMargin = false }) {
     6: "text-sm sm:text-base font-medium"
   };
   const marginClasses = {
-    1: "mb-4",
-    2: "mb-3",
-    3: "mb-3",
-    4: "mb-2",
-    5: "mb-2",
-    6: "mb-2"
-  };
-  const margin = noMargin ? "" : marginClasses[level];
+    1: "mb-3 sm:mb-4",
+    2: "mb-2 sm:mb-3",
+    3: "mb-2 sm:mb-3",
+    4: "mb-1 sm:mb-2",
+    5: "mb-1 sm:mb-2",
+    6: "mb-1 sm:mb-2"
+  };
+  const margin = hasMargin ? marginClasses[level] : "";
   return createElement(
     `h${level}`,
     {
@@ -3424,8 +3587,8 @@ var heading_default = Heading;
 function PricingTable({ title, description, children, columns = 3, className = "" }) {
   return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { size: "xl", children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 md:mb-16 max-w-3xl mx-auto", children: [
-      title && /* @__PURE__ */ jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
-      description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl text-muted", children: description })
+      title && /* @__PURE__ */ jsx(heading_default, { level: 2, hasMargin: true, className: "text-3xl md:text-4xl font-bold", children: title }),
+      description && /* @__PURE__ */ jsx(text_default, { hasMargin: true, className: "text-lg md:text-xl text-muted", children: description })
     ] }),
     /* @__PURE__ */ jsx(grid_default, { itemSize: "lg", maxCols: columns, gap: "lg", className: "items-stretch", children })
   ] }) });
@@ -3451,18 +3614,18 @@ function Card({
     filled: "bg-muted text-foreground"
   };
   const sizeClasses2 = {
-    xs: "w-full sm:w-36",
-    sm: "w-full sm:w-64",
-    md: "w-full sm:w-96",
-    lg: "w-full sm:w-[28rem]",
-    xl: "w-full sm:w-[32rem]"
+    xs: "w-full sm:max-w-36",
+    sm: "w-full sm:max-w-64",
+    md: "w-full sm:max-w-96",
+    lg: "w-full sm:max-w-[28rem]",
+    xl: "w-full sm:max-w-[32rem]"
   };
   const widthClasses = {
-    auto: size !== "md" ? sizeClasses2[size] : "max-w-full",
+    auto: size ? sizeClasses2[size] : "max-w-full",
     full: "w-full",
     fit: "w-fit"
   };
-  const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer" : "transition-shadow duration-200";
+  const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1" : "transition-shadow duration-200";
   const imagePositionClasses = {
     top: "flex-col",
     bottom: "flex-col-reverse",
@@ -3569,8 +3732,10 @@ function PricingTier({
       children: [
         /* @__PURE__ */ jsxs(card_header_default, { className: `relative text-center border-none bg-transparent px-6 pt-12 pb-0`, children: [
           badge && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(badge_default, { variant: "primary", className: "px-4 py-1 shadow-md", children: badge }) }),
-          /* @__PURE__ */ jsx(heading_default, { level: 3, className: "text-2xl font-bold mb-3 text-foreground", children: name }),
-          description && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm mb-1", children: description })
+          /* @__PURE__ */ jsxs(stack_default, { direction: "horizontal", spacing: "sm", justify: "between", align: "center", className: "w-full", children: [
+            /* @__PURE__ */ jsx(text_default, { size: "2xl", weight: "extrabold", variant: "body", children: name }),
+            description && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm", children: description })
+          ] })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "pt-3 pb-8 text-center px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-center gap-1", children: [
           /* @__PURE__ */ jsx("span", { className: "text-5xl font-bold text-foreground", children: price }),
@@ -3922,9 +4087,9 @@ function Hero({
     variant === "gradient" && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/20 to-transparent" }),
     /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent pointer-events-none" }),
     /* @__PURE__ */ jsx(container_default, { size: "lg", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
-      subtitle && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl font-semibold text-primary mb-4", weight: "semibold", children: subtitle }),
+      subtitle && /* @__PURE__ */ jsx(text_default, { hasMargin: true, className: "text-lg md:text-xl font-semibold text-primary", weight: "semibold", children: subtitle }),
       /* @__PURE__ */ jsx(heading_default, { level: 1, className: `${titleSizes[size]} font-extrabold mb-6 tracking-tight`, children: title }),
-      description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
+      description && /* @__PURE__ */ jsx(text_default, { hasMargin: true, className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
       (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(stack_default, { direction: "horizontal", spacing: "md", className: `flex-wrap ${centered ? "justify-center" : ""}`, children: [
         primaryAction && /* @__PURE__ */ jsx(
           button_default,
@@ -3968,16 +4133,10 @@ function FeatureSection({
   className = ""
 }) {
   return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(container_default, { size: "xl", children: [
-    (title || description) && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `mb-12 md:mb-16 ${centered ? "text-center" : ""} ${centered ? "max-w-3xl mx-auto" : "max-w-3xl"}`,
-        children: [
-          title && /* @__PURE__ */ jsx(heading_default, { level: 2, className: "text-3xl md:text-4xl font-bold mb-4", children: title }),
-          description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl", children: description })
-        ]
-      }
-    ),
+    (title || description) && /* @__PURE__ */ jsxs(stack_default, { spacing: "md", className: `mb-12 md:mb-16 ${centered ? "text-center max-w-3xl mx-auto" : "max-w-3xl"}`, children: [
+      title && /* @__PURE__ */ jsx(heading_default, { level: 2, hasMargin: true, children: title }),
+      description && /* @__PURE__ */ jsx(text_default, { className: "text-lg md:text-xl", children: description })
+    ] }),
     /* @__PURE__ */ jsx(grid_default, { itemSize: "md", maxCols: columns, gap: "lg", children: features.map((feature, index) => /* @__PURE__ */ jsxs("article", { className: centered ? "text-center" : "", children: [
       /* @__PURE__ */ jsx(
         "span",
@@ -4078,7 +4237,7 @@ function Footer({ sections, copyright, social, className = "" }) {
       {
         className: `${sections && sections.length > 0 ? "border-t border-border" : ""} py-6 flex flex-col md:flex-row items-center justify-between gap-4`,
         children: [
-          copyright && /* @__PURE__ */ jsx(text_default, { variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
+          copyright && /* @__PURE__ */ jsx(text_default, { hasMargin: true, variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
           social && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-4", children: social })
         ]
       }
@@ -4097,6 +4256,23 @@ function useScrollReset(deps, container) {
     };
     const setAllScrollTop = () => {
       if (cancelled) return;
+      try {
+        const hash = typeof window !== "undefined" ? window.location.hash : "";
+        if (hash && hash.startsWith("#")) {
+          const id = decodeURIComponent(hash.slice(1));
+          const resolved2 = isRef(container) ? container.current : container;
+          const root = resolved2 ?? document;
+          const target = root.querySelector ? root.querySelector(`#${CSS.escape(id)}`) : null;
+          if (target) {
+            try {
+              target.scrollIntoView({ block: "start" });
+            } catch (e) {
+            }
+            return;
+          }
+        }
+      } catch (e) {
+      }
       window.scrollTo(0, 0);
       const resolved = isRef(container) ? container.current : container;
       if (resolved) resolved.scrollTop = 0;