@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/chunk-ALCWXFUC.js

@@ -1,733 +0,0 @@
-import { Separator } from './chunk-XNLCVHBC.js';
-import { cn, isPresetColor, resolveColor } from './chunk-VU4CZ76T.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React from 'react';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva } from 'class-variance-authority';
-import { Slot } from '@radix-ui/react-slot';
-import { useInView } from 'motion/react';
-
-var SILVER_SHINE_OVERLAY_CLASS = cn(
-  "pointer-events-none absolute inset-0 -z-10 rounded-[inherit]",
-  "bg-[linear-gradient(135deg,rgba(255,255,255,0.10)_0%,rgba(255,255,255,0.02)_35%,rgba(0,0,0,0.04)_70%,rgba(255,255,255,0.06)_100%)]"
-);
-var SILVER_SHINE_OVERLAY_STYLE = {
-  boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.08)"
-};
-function SilverShineOverlay() {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: SILVER_SHINE_OVERLAY_CLASS,
-      style: SILVER_SHINE_OVERLAY_STYLE
-    }
-  );
-}
-var SILVER_SOLID_SURFACE_STYLE = {
-  backgroundImage: "linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 35%, rgba(0,0,0,0.12) 70%, rgba(255,255,255,0.14) 100%)",
-  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18)"
-};
-function SilverMetallicBorderOverlay() {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: cn(
-        "pointer-events-none absolute inset-0 rounded-[inherit] p-px",
-        "bg-[linear-gradient(135deg,rgba(230,230,230,0.95)_0%,rgba(190,190,190,0.70)_28%,rgba(248,248,248,0.95)_52%,rgba(175,175,175,0.70)_76%,rgba(225,225,225,0.95)_100%)]",
-        "dark:bg-[linear-gradient(135deg,rgba(255,255,255,0.05)_0%,rgba(110,110,110,0.28)_32%,rgba(255,255,255,0.07)_52%,rgba(70,70,70,0.24)_72%,rgba(180,180,180,0.09)_100%)]"
-      ),
-      style: {
-        WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-        WebkitMaskComposite: "xor",
-        mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
-        maskComposite: "exclude"
-      }
-    }
-  );
-}
-
-// src/utils/variant.ts
-var VARIANTS = ["outline", "solid", "soft", "gradient"];
-var VARIANT_GRADIENT_TRANSITION_DURATION_MS = 2e3;
-var VARIANT_GRADIENT_DURATION_CLASS = "duration-[2000ms]";
-var VARIANT_GRADIENT_BACKDROP_BASE = "pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-[length:100%_100%]";
-var VARIANT_GRADIENT_HOVER_OVERLAY_CLASS = cn(
-  "opacity-0 transition-opacity ease-in-out group-hover:opacity-100",
-  VARIANT_GRADIENT_DURATION_CLASS
-);
-var PRESET_GRADIENT_FRAME = {
-  primary: "border border-primary/20 bg-transparent text-primary [&>svg]:text-primary",
-  secondary: "border border-secondary/20 bg-transparent text-secondary [&>svg]:text-secondary",
-  info: "border border-info/20 bg-transparent text-info [&>svg]:text-info",
-  warning: "border border-warning/20 bg-transparent text-warning [&>svg]:text-warning",
-  error: "border border-error/20 bg-transparent text-error [&>svg]:text-error",
-  success: "border border-success/20 bg-transparent text-success [&>svg]:text-success",
-  disabled: "border border-disabled/20 bg-transparent text-disabled [&>svg]:text-disabled",
-  gray: "border border-gray/20 bg-transparent text-gray [&>svg]:text-gray",
-  mist: "border border-mist-border bg-transparent text-mist-foreground [&>svg]:text-mist-foreground"
-};
-var PRESET_GRADIENT_BACKDROP = {
-  primary: {
-    idle: "bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5",
-    hover: "bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10"
-  },
-  secondary: {
-    idle: "bg-gradient-to-r from-secondary/5 via-secondary/10 to-secondary/5",
-    hover: "bg-gradient-to-r from-secondary/10 via-secondary/5 to-secondary/10"
-  },
-  info: {
-    idle: "bg-gradient-to-r from-info/5 via-info/10 to-info/5",
-    hover: "bg-gradient-to-r from-info/10 via-info/5 to-info/10"
-  },
-  warning: {
-    idle: "bg-gradient-to-r from-warning/5 via-warning/10 to-warning/5",
-    hover: "bg-gradient-to-r from-warning/10 via-warning/5 to-warning/10"
-  },
-  error: {
-    idle: "bg-gradient-to-r from-error/5 via-error/10 to-error/5",
-    hover: "bg-gradient-to-r from-error/10 via-error/5 to-error/10"
-  },
-  success: {
-    idle: "bg-gradient-to-r from-success/5 via-success/10 to-success/5",
-    hover: "bg-gradient-to-r from-success/10 via-success/5 to-success/10"
-  },
-  disabled: {
-    idle: "bg-gradient-to-r from-disabled/5 via-disabled/10 to-disabled/5",
-    hover: "bg-gradient-to-r from-disabled/10 via-disabled/5 to-disabled/10"
-  },
-  gray: {
-    idle: "bg-gradient-to-r from-gray/5 via-gray/10 to-gray/5",
-    hover: "bg-gradient-to-r from-gray/10 via-gray/5 to-gray/10"
-  },
-  mist: {
-    idle: "bg-gradient-to-r from-mist via-mist-border to-mist",
-    hover: "bg-gradient-to-r from-mist-border via-mist to-mist-border"
-  }
-};
-var SILVER_GRADIENT_BACKDROP = {
-  idle: "bg-gradient-to-r from-gray/2 via-gray/5 to-gray/2",
-  hover: "bg-gradient-to-r from-gray/5 via-gray/2 to-gray/5"
-};
-function arbitraryGradientBackgroundImage(color, emphasis) {
-  const mix = (pct) => `color-mix(in srgb, ${color} ${pct}%, transparent)`;
-  const [a, b, c] = emphasis === "idle" ? [5, 10, 5] : [10, 5, 10];
-  return `linear-gradient(to right, ${mix(a)}, ${mix(b)}, ${mix(c)})`;
-}
-var PRESET_VARIANT_STYLES = {
-  primary: {
-    soft: {
-      container: "border border-primary/10 bg-primary/5 text-primary [&>svg]:text-primary",
-      foreground: "text-primary",
-      description: "text-primary/80"
-    },
-    outline: {
-      container: "bg-transparent border border-primary/50 dark:border-primary/30 text-primary [&>svg]:text-primary",
-      foreground: "text-primary",
-      description: "text-primary/80"
-    },
-    solid: {
-      container: "border border-transparent bg-primary text-primary-foreground [&>svg]:text-primary-foreground",
-      foreground: "text-primary-foreground",
-      description: "text-primary-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-primary",
-      description: "text-primary/60"
-    }
-  },
-  secondary: {
-    soft: {
-      container: "border border-secondary/10 bg-secondary/5 text-secondary [&>svg]:text-secondary",
-      foreground: "text-secondary",
-      description: "text-secondary/80"
-    },
-    outline: {
-      container: "bg-transparent border border-secondary/50 dark:border-secondary/30 text-secondary [&>svg]:text-secondary",
-      foreground: "text-secondary",
-      description: "text-secondary/80"
-    },
-    solid: {
-      container: "border border-transparent bg-secondary text-secondary-foreground [&>svg]:text-secondary-foreground",
-      foreground: "text-secondary-foreground",
-      description: "text-secondary-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-secondary",
-      description: "text-secondary/60"
-    }
-  },
-  info: {
-    soft: {
-      container: "border border-info/10 bg-info/5 text-info [&>svg]:text-info",
-      foreground: "text-info",
-      description: "text-info/80"
-    },
-    outline: {
-      container: "bg-transparent border border-info/50 dark:border-info/30 text-info [&>svg]:text-info",
-      foreground: "text-info",
-      description: "text-info/80"
-    },
-    solid: {
-      container: "border border-transparent bg-info text-info-foreground [&>svg]:text-info-foreground",
-      foreground: "text-info-foreground",
-      description: "text-info-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-info",
-      description: "text-info/60"
-    }
-  },
-  warning: {
-    soft: {
-      container: "border border-warning/10 bg-warning/5 text-warning [&>svg]:text-warning",
-      foreground: "text-warning",
-      description: "text-warning"
-    },
-    outline: {
-      container: "bg-transparent border border-warning/50 dark:border-warning/30 text-warning [&>svg]:text-warning",
-      foreground: "text-warning",
-      description: "text-warning"
-    },
-    solid: {
-      container: "border border-transparent bg-warning text-warning-foreground [&>svg]:text-warning-foreground",
-      foreground: "text-warning-foreground",
-      description: "text-warning-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-warning",
-      description: "text-warning/60"
-    }
-  },
-  error: {
-    soft: {
-      container: "border border-error/10 bg-error/5 text-error [&>svg]:text-error",
-      foreground: "text-error",
-      description: "text-error/80"
-    },
-    outline: {
-      container: "bg-transparent border border-error/50 dark:border-error/30 text-error [&>svg]:text-error",
-      foreground: "text-error",
-      description: "text-error/80"
-    },
-    solid: {
-      container: "border border-transparent bg-error text-error-foreground [&>svg]:text-error-foreground",
-      foreground: "text-error-foreground",
-      description: "text-error-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-error",
-      description: "text-error/60"
-    }
-  },
-  success: {
-    soft: {
-      container: "border border-success/10 bg-success/5 text-success [&>svg]:text-success",
-      foreground: "text-success",
-      description: "text-success/80"
-    },
-    outline: {
-      container: "bg-transparent border border-success/50 dark:border-success/30 text-success [&>svg]:text-success",
-      foreground: "text-success",
-      description: "text-success/80"
-    },
-    solid: {
-      container: "border border-transparent bg-success text-success-foreground [&>svg]:text-success-foreground",
-      foreground: "text-success-foreground",
-      description: "text-success-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-success",
-      description: "text-success/60"
-    }
-  },
-  disabled: {
-    soft: {
-      container: "border border-disabled/10 bg-disabled/5 text-disabled [&>svg]:text-disabled",
-      foreground: "text-disabled",
-      description: "text-disabled/80"
-    },
-    outline: {
-      container: "bg-transparent border border-disabled/50 dark:border-disabled/30 text-disabled [&>svg]:text-disabled",
-      foreground: "text-disabled",
-      description: "text-disabled/80"
-    },
-    solid: {
-      container: "border border-transparent bg-disabled text-disabled-foreground [&>svg]:text-disabled-foreground",
-      foreground: "text-disabled-foreground",
-      description: "text-disabled-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-disabled",
-      description: "text-disabled/60"
-    }
-  },
-  gray: {
-    soft: {
-      container: "border border-gray/10 bg-gray/5 text-gray [&>svg]:text-gray",
-      foreground: "text-gray",
-      description: "text-gray/80"
-    },
-    outline: {
-      container: "bg-transparent border border-gray/50 dark:border-gray/30 text-gray [&>svg]:text-gray",
-      foreground: "text-gray",
-      description: "text-gray/80"
-    },
-    solid: {
-      container: "border border-transparent bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
-      foreground: "text-gray-foreground",
-      description: "text-gray-foreground/80"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-gray",
-      description: "text-gray/60"
-    }
-  },
-  mist: {
-    soft: {
-      container: "border border-mist-border bg-mist text-mist-foreground [&>svg]:text-mist-foreground",
-      foreground: "text-mist-foreground",
-      description: "text-mist-secondary"
-    },
-    outline: {
-      container: "bg-transparent border border-mist-border text-mist-foreground [&>svg]:text-mist-foreground",
-      foreground: "text-mist-foreground",
-      description: "text-mist-secondary"
-    },
-    solid: {
-      container: "border border-transparent bg-mist text-mist-foreground [&>svg]:text-mist-foreground",
-      foreground: "text-mist-foreground",
-      description: "text-mist-secondary"
-    },
-    gradient: {
-      container: "",
-      foreground: "text-mist-foreground",
-      description: "text-mist-secondary"
-    }
-  }
-};
-var SILVER_VARIANT_ROWS = {
-  soft: {
-    container: "border border-gray/5 bg-gray/2 text-gray [&>svg]:text-gray",
-    foreground: "text-gray",
-    description: "text-gray/80"
-  },
-  outline: {
-    /** No `border-*` here — the metallic ring is painted by `SilverMetallicBorderOverlay`. */
-    container: "bg-transparent border-0 text-gray [&>svg]:text-gray",
-    foreground: "text-gray",
-    description: "text-gray/80"
-  },
-  solid: {
-    /** Metallic surface gradient layered on top of `bg-gray` via `SILVER_SOLID_SURFACE_STYLE`. */
-    container: "border border-transparent bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
-    foreground: "text-gray-foreground",
-    description: "text-gray-foreground/80"
-  },
-  gradient: {
-    container: "",
-    foreground: "text-gray",
-    description: "text-gray/60"
-  }
-};
-function getArbitraryVariantStyles(variant, color) {
-  const text = resolveColor(color, "text");
-  const border = resolveColor(color, "border");
-  if (variant === "soft") {
-    return {
-      container: cn("border [&>svg]:text-current", text.className),
-      foreground: text.className ?? "",
-      foregroundStyle: text.style,
-      description: "text-current/80",
-      containerStyle: {
-        backgroundColor: `color-mix(in srgb, ${color} 5%, transparent)`,
-        borderColor: `color-mix(in srgb, ${color} 10%, transparent)`,
-        ...text.style
-      }
-    };
-  }
-  if (variant === "outline") {
-    return {
-      container: cn(
-        "bg-transparent border [&>svg]:text-current",
-        border.className,
-        text.className
-      ),
-      foreground: text.className ?? "",
-      foregroundStyle: text.style,
-      description: "text-current/80",
-      containerStyle: {
-        borderColor: `light-dark(
-          color-mix(in srgb, ${color} 50%, transparent),
-          color-mix(in srgb, ${color} 28%, transparent)
-        )`,
-        ...text.style
-      }
-    };
-  }
-  if (variant === "solid") {
-    return {
-      container: "border border-transparent text-white [&>svg]:text-white",
-      foreground: "text-white",
-      foregroundStyle: { color: "#fff" },
-      description: "text-white/80",
-      containerStyle: { backgroundColor: color, color: "#fff" }
-    };
-  }
-  return {
-    container: cn(
-      "relative isolate overflow-hidden group border [&>svg]:text-current",
-      text.className
-    ),
-    foreground: text.className ?? "",
-    foregroundStyle: text.style,
-    description: "text-current/60",
-    containerStyle: {
-      borderColor: `color-mix(in srgb, ${color} 20%, transparent)`,
-      ...text.style
-    },
-    gradientHoverLayersInline: {
-      idle: {
-        backgroundImage: arbitraryGradientBackgroundImage(color, "idle"),
-        backgroundSize: "100% 100%"
-      },
-      hover: {
-        backgroundImage: arbitraryGradientBackgroundImage(color, "hover"),
-        backgroundSize: "100% 100%"
-      }
-    }
-  };
-}
-function resolveVariantStyles(variant, color) {
-  if (color === "silver") {
-    const row = SILVER_VARIANT_ROWS[variant];
-    if (variant === "gradient") {
-      return {
-        container: cn(
-          "relative isolate overflow-hidden group",
-          PRESET_GRADIENT_FRAME.gray
-        ),
-        gradientHoverLayers: SILVER_GRADIENT_BACKDROP,
-        foreground: row.foreground,
-        description: row.description,
-        silverShine: true
-      };
-    }
-    return {
-      container: cn("relative isolate overflow-hidden", row.container),
-      containerStyle: variant === "solid" ? SILVER_SOLID_SURFACE_STYLE : void 0,
-      foreground: row.foreground,
-      description: row.description,
-      silverBorder: variant === "outline"
-    };
-  }
-  if (isPresetColor(color)) {
-    const preset = color;
-    const row = PRESET_VARIANT_STYLES[preset][variant];
-    if (variant === "gradient") {
-      return {
-        container: cn(
-          "relative isolate overflow-hidden group",
-          PRESET_GRADIENT_FRAME[preset]
-        ),
-        gradientHoverLayers: PRESET_GRADIENT_BACKDROP[preset],
-        foreground: row.foreground,
-        description: row.description
-      };
-    }
-    return {
-      container: row.container,
-      foreground: row.foreground,
-      description: row.description
-    };
-  }
-  return getArbitraryVariantStyles(variant, color);
-}
-var Card = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    ),
-    ...props
-  }
-));
-Card.displayName = "Card";
-var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React.forwardRef(
-  ({
-    className,
-    align = "center",
-    sideOffset = 4,
-    portal = true,
-    onWheel,
-    onTouchMove,
-    ...props
-  }, ref) => {
-    const handleWheel = (event) => {
-      onWheel?.(event);
-      event.stopPropagation();
-    };
-    const handleTouchMove = (event) => {
-      onTouchMove?.(event);
-      event.stopPropagation();
-    };
-    const content = /* @__PURE__ */ jsx(
-      PopoverPrimitive.Content,
-      {
-        ref,
-        align,
-        sideOffset,
-        onWheel: handleWheel,
-        onTouchMove: handleTouchMove,
-        className: cn(
-          "z-50 w-72 rounded-2xl border bg-popover p-4 text-popover-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
-          className
-        ),
-        ...props
-      }
-    );
-    return portal ? /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content }) : content;
-  }
-);
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-);
-var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  LabelPrimitive.Root,
-  {
-    ref,
-    className: cn(labelVariants(), className),
-    ...props
-  }
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-function VariantGradientUnderlay({
-  layers,
-  layersInline,
-  silverShine = false,
-  silverBorder = false
-}) {
-  const shine = silverShine ? /* @__PURE__ */ jsx(SilverShineOverlay, {}) : null;
-  const border = silverBorder ? /* @__PURE__ */ jsx(SilverMetallicBorderOverlay, {}) : null;
-  if (layers != null) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(VARIANT_GRADIENT_BACKDROP_BASE, layers.idle)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            VARIANT_GRADIENT_BACKDROP_BASE,
-            layers.hover,
-            VARIANT_GRADIENT_HOVER_OVERLAY_CLASS
-          )
-        }
-      ),
-      shine,
-      border
-    ] });
-  }
-  if (layersInline != null) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: VARIANT_GRADIENT_BACKDROP_BASE,
-          style: layersInline.idle
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": true,
-          className: cn(
-            VARIANT_GRADIENT_BACKDROP_BASE,
-            VARIANT_GRADIENT_HOVER_OVERLAY_CLASS
-          ),
-          style: layersInline.hover
-        }
-      ),
-      shine,
-      border
-    ] });
-  }
-  if (shine || border) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      shine,
-      border
-    ] });
-  }
-  return null;
-}
-var badgeVariants = cva(
-  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
-);
-function Badge({
-  className,
-  variant = "soft",
-  color = "primary",
-  style,
-  children,
-  ...props
-}) {
-  const styles = resolveVariantStyles(variant, color);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(badgeVariants(), styles.container, className),
-      style: { ...styles.containerStyle, ...style },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(
-          VariantGradientUnderlay,
-          {
-            layers: styles.gradientHoverLayers,
-            layersInline: styles.gradientHoverLayersInline,
-            silverShine: styles.silverShine,
-            silverBorder: styles.silverBorder
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-var buttonGroupVariants = cva(
-  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
-        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
-      }
-    },
-    defaultVariants: {
-      orientation: "horizontal"
-    }
-  }
-);
-function ButtonGroup({
-  className,
-  orientation,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "button-group",
-      "data-orientation": orientation,
-      className: cn(buttonGroupVariants({ orientation }), className),
-      ...props
-    }
-  );
-}
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: cn(
-        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function ButtonGroupSeparator({
-  className,
-  orientation = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Separator,
-    {
-      "data-slot": "button-group-separator",
-      orientation,
-      className: cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function useIsInView(ref, options = {}) {
-  const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
-  const localRef = React.useRef(null);
-  React.useImperativeHandle(ref, () => localRef.current);
-  const inViewResult = useInView(localRef, {
-    once: inViewOnce,
-    margin: inViewMargin
-  });
-  const isInView = !inView || inViewResult;
-  return { ref: localRef, isInView };
-}
-
-export { Badge, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Label, PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, SILVER_GRADIENT_BACKDROP, SilverMetallicBorderOverlay, SilverShineOverlay, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, VariantGradientUnderlay, arbitraryGradientBackgroundImage, badgeVariants, buttonGroupVariants, resolveVariantStyles, useIsInView };