@nextsparkjs/core 0.1.0-beta.110 → 0.1.0-beta.112

package/dist/components/ui/avatar.js

@@ -1,9 +1,657 @@
-import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  getInitials
-} from "@nextsparkjs/ui";
+// ../../node_modules/.pnpm/@nextsparkjs+ui@0.1.0-beta.79_@types+react-dom@19.2.3_@types+react@19.2.7__@types+react@19.2._whiycl2nvwq6otr7gzrisciudi/node_modules/@nextsparkjs/ui/dist/index.js
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx as jsx2 } from "react/jsx-runtime";
+import * as React2 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+import * as React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+import * as React4 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { jsx as jsx5 } from "react/jsx-runtime";
+import * as React5 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { jsx as jsx6 } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx7 } from "react/jsx-runtime";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+import * as React6 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { jsx as jsx9 } from "react/jsx-runtime";
+import * as React7 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+import * as React8 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx11 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx12, jsxs } from "react/jsx-runtime";
+import * as React10 from "react";
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+import * as React11 from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { jsx as jsx14 } from "react/jsx-runtime";
+import * as React12 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { jsx as jsx15 } from "react/jsx-runtime";
+import * as React13 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
+import * as React14 from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
+var ThemeContext = createContext(null);
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx2(
+      Comp,
+      {
+        ref,
+        "data-slot": "button",
+        className: cn(buttonVariants({ variant, size, className })),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Textarea = React3.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Checkbox = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx5(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: /* @__PURE__ */ jsx5(CheckIcon, { className: "h-4 w-4" })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+var Switch = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  SwitchPrimitives.Root,
+  {
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    ),
+    ...props,
+    ref,
+    children: /* @__PURE__ */ jsx6(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+var badgeVariants = cva2(
+  "inline-flex items-center rounded-md border 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",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Avatar = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+function getInitials(name) {
+  if (!name) return "U";
+  const parts = name.trim().split(" ");
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}
+var Card = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border bg-card text-card-foreground shadow",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var PressableCard = React7.forwardRef(
+  ({ className, onClick, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      },
+      className: cn(
+        "rounded-xl border bg-card text-card-foreground shadow cursor-pointer transition-opacity hover:opacity-80 active:opacity-70",
+        className
+      ),
+      ...props
+    }
+  )
+);
+PressableCard.displayName = "PressableCard";
+var CardHeader = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      className: cn("font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React7.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-6 pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var Separator = React8.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx11(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+var Skeleton = React9.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref,
+        className: cn(
+          // Base styles
+          "rounded-md bg-muted",
+          // Optimized animation - GPU accelerated
+          "animate-skeleton-pulse",
+          // CSS containment for better INP
+          "skeleton-contained",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var SkeletonContainer = React9.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref,
+        className: cn("skeleton-container", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SkeletonContainer.displayName = "SkeletonContainer";
+var SkeletonText = React9.forwardRef(
+  ({ className, lines = 1, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12("div", { ref, className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx12(
+      Skeleton,
+      {
+        className: cn(
+          "h-4",
+          // Last line is typically shorter
+          i === lines - 1 && lines > 1 ? "w-3/4" : "w-full"
+        )
+      },
+      i
+    )) });
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+var SkeletonTitle = React9.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(Skeleton, { ref, className: cn("h-6 w-1/2", className), ...props });
+  }
+);
+SkeletonTitle.displayName = "SkeletonTitle";
+var SkeletonAvatar = React9.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12(Skeleton, { ref, className: cn("h-10 w-10 rounded-full", className), ...props });
+  }
+);
+SkeletonAvatar.displayName = "SkeletonAvatar";
+var SkeletonCard = React9.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("space-y-3 rounded-xl border border-border bg-card p-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx12(Skeleton, { className: "h-5 w-2/3" }),
+          /* @__PURE__ */ jsx12(Skeleton, { className: "h-4 w-full" }),
+          /* @__PURE__ */ jsx12(Skeleton, { className: "h-4 w-4/5" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
+            /* @__PURE__ */ jsx12(Skeleton, { className: "h-6 w-16 rounded-full" }),
+            /* @__PURE__ */ jsx12(Skeleton, { className: "h-6 w-16 rounded-full" })
+          ] })
+        ]
+      }
+    );
+  }
+);
+SkeletonCard.displayName = "SkeletonCard";
+var DialogContext = React10.createContext(void 0);
+function useDialogContext() {
+  const context = React10.useContext(DialogContext);
+  if (!context) {
+    throw new Error("Dialog components must be used within a Dialog");
+  }
+  return context;
+}
+function Dialog({
+  open = false,
+  onOpenChange = () => {
+  },
+  children
+}) {
+  return /* @__PURE__ */ jsx13(DialogContext.Provider, { value: { open, onOpenChange }, children });
+}
+Dialog.displayName = "Dialog";
+var DialogContent = React10.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { open, onOpenChange } = useDialogContext();
+    React10.useEffect(() => {
+      const handleEscape = (e) => {
+        if (e.key === "Escape" && open) {
+          onOpenChange(false);
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [open, onOpenChange]);
+    if (!open) return null;
+    return /* @__PURE__ */ jsxs2("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+      /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/50 animate-in fade-in-0",
+          onClick: () => onOpenChange(false)
+        }
+      ),
+      /* @__PURE__ */ jsx13(
+        "div",
+        {
+          ref,
+          role: "dialog",
+          "aria-modal": "true",
+          className: cn(
+            "relative z-50 w-full max-w-lg rounded-xl bg-card shadow-lg animate-in fade-in-0 zoom-in-95",
+            "max-h-[85vh] overflow-auto",
+            className
+          ),
+          onClick: (e) => e.stopPropagation(),
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = "DialogContent";
+var DialogHeader = React10.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref,
+        className: cn("border-b border-border p-4", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogTitle = React10.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      "h2",
+      {
+        ref,
+        className: cn("text-lg font-semibold", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React10.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      "p",
+      {
+        ref,
+        className: cn("mt-1 text-sm text-muted-foreground", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogDescription.displayName = "DialogDescription";
+var DialogBody = React10.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13("div", { ref, className: cn("p-4", className), ...props, children });
+  }
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React10.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref,
+        className: cn("flex justify-end gap-2 border-t border-border p-4", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogClose = React10.forwardRef(
+  ({ children, onClick, ...props }, ref) => {
+    const { onOpenChange } = useDialogContext();
+    return /* @__PURE__ */ jsx13(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: (e) => {
+          onClick?.(e);
+          onOpenChange(false);
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogClose.displayName = "DialogClose";
+var Progress = React11.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx14(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx14(
+      ProgressPrimitive.Indicator,
+      {
+        className: "h-full w-full flex-1 bg-primary transition-all",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+var TabsList = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow cursor-pointer",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+var AccordionItem = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn("border-b", className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs3(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx16(ChevronDownIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx16(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsx16("div", { className: cn("pb-4 pt-0", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var Slider = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs4(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx17(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx17(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+      /* @__PURE__ */ jsx17(SliderPrimitive.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-primary bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 export {
   Avatar,
   AvatarFallback,