@tablestore/tablestore-agent-cli 0.1.8 → 0.2.0

package/dist/dashboard-runtime/dashboard/src/components/ui/result-row.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface ResultRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  score?: number | string
+  scoreLabel?: React.ReactNode
+  meta?: React.ReactNode
+}
+
+export const ResultRow = React.forwardRef<HTMLDivElement, ResultRowProps>(
+  ({ className, score, scoreLabel, meta, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "mb-2.5 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-4 transition-colors hover:border-[hsl(var(--primary))]",
+        className,
+      )}
+      {...props}
+    >
+      {score !== undefined ? (
+        <div className="mb-1.5 flex items-center justify-between gap-3 text-xs">
+          <span className="font-semibold text-[hsl(var(--primary))]">
+            {scoreLabel ?? "score"} {score}
+          </span>
+          {meta ? (
+            <span className="text-[hsl(var(--subtle))]">{meta}</span>
+          ) : null}
+        </div>
+      ) : null}
+      <div className="text-sm leading-6 text-[hsl(var(--foreground))]">
+        {children}
+      </div>
+    </div>
+  ),
+)
+ResultRow.displayName = "ResultRow"

package/dist/dashboard-runtime/dashboard/src/components/ui/scope-tag.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const scopeTagVariants = cva(
+  "inline-flex items-center gap-1 rounded px-2 py-0.5 text-[11px] font-medium",
+  {
+    variants: {
+      accent: {
+        primary: "bg-[hsl(var(--primary-soft))] text-[hsl(var(--primary))]",
+        success: "bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]",
+        warning: "bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]",
+        danger: "bg-[hsl(var(--danger-soft))] text-[hsl(var(--danger))]",
+        purple: "bg-[hsl(var(--purple-soft))] text-[hsl(var(--purple))]",
+      },
+    },
+    defaultVariants: {
+      accent: "primary",
+    },
+  },
+)
+
+interface ScopeTagProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof scopeTagVariants> {}
+
+export function ScopeTag({ className, accent, ...props }: ScopeTagProps) {
+  return <span className={cn(scopeTagVariants({ accent }), className)} {...props} />
+}

package/dist/dashboard-runtime/dashboard/src/components/ui/select.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-md border border-[hsl(var(--border))] px-3 py-1 text-sm transition-colors data-[placeholder]:text-[hsl(var(--subtle))] focus:outline-none focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.2)] disabled:cursor-not-allowed disabled:bg-[hsl(var(--secondary))] disabled:text-[hsl(var(--muted-foreground))] [&>span]:line-clamp-1",
+      "bg-[hsl(var(--card))]",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-72 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-[hsl(var(--border))] shadow-md 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-select-content-transform-origin]",
+        "bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))]",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "hover:bg-[hsl(var(--primary-soft))] hover:text-[hsl(var(--primary))] focus:bg-[hsl(var(--primary-soft))] focus:text-[hsl(var(--primary))]",
+      "data-[state=checked]:bg-[hsl(var(--primary-soft))] data-[state=checked]:text-[hsl(var(--primary))]",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/dist/dashboard-runtime/dashboard/src/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package/dist/dashboard-runtime/dashboard/src/components/ui/sheet.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+// Reuse the Radix Dialog primitives under a Sheet-themed alias so slide-in
+// drawers can be composed without pulling in a second primitive. The content
+// slot provides side-aware animations via `data-side`.
+
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+type SheetSide = "top" | "bottom" | "left" | "right";
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  side?: SheetSide;
+}
+
+const SIDE_STYLES: Record<SheetSide, string> = {
+  top: "inset-x-0 top-0 border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top",
+  bottom:
+    "inset-x-0 bottom-0 border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+  left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left",
+  right:
+    "inset-y-0 right-0 h-full w-3/4 max-w-md border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right",
+};
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ className, children, side = "right", ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed z-50 flex flex-col gap-4 bg-[hsl(var(--card))] p-6 shadow-md border-[hsl(var(--border))]",
+        "duration-300 ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out",
+        SIDE_STYLES[side],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col space-y-1.5 text-left", className)}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-base font-semibold leading-tight", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-[hsl(var(--muted-foreground))]", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetPortal,
+  SheetOverlay,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/dist/dashboard-runtime/dashboard/src/components/ui/skeleton.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Pulse start delay in milliseconds, used by SkeletonGroup for stagger. */
+  delay?: number
+}
+
+function Skeleton({ className, delay, style, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      style={{ animationDelay: delay ? `${delay}ms` : undefined, ...style }}
+      {...props}
+    />
+  )
+}
+
+interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Gap between each child animation start, default 80ms. */
+  stagger?: number
+}
+
+/**
+ * Wraps multiple Skeleton children and assigns incremental animation-delay to
+ * each one, producing a progressive loading effect.
+ */
+function SkeletonGroup({
+  children,
+  stagger = 80,
+  className,
+  ...props
+}: SkeletonGroupProps) {
+  const items = React.Children.toArray(children)
+  return (
+    <div className={className} {...props}>
+      {items.map((child, index) => {
+        if (!React.isValidElement<SkeletonProps>(child)) return child
+        const existingDelay = child.props.delay ?? 0
+        return React.cloneElement(child, {
+          delay: existingDelay + index * stagger,
+        })
+      })}
+    </div>
+  )
+}
+
+export { Skeleton, SkeletonGroup }

package/dist/dashboard-runtime/dashboard/src/components/ui/slider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-[hsl(var(--muted))]">
+      <SliderPrimitive.Range className="absolute h-full bg-[hsl(var(--primary))]" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-[hsl(var(--primary))] bg-[hsl(var(--background))] shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/dist/dashboard-runtime/dashboard/src/components/ui/sonner.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-card group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:rounded-md group-[.toaster]:shadow-md",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/dist/dashboard-runtime/dashboard/src/components/ui/stat-card.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const valueAccent = cva("text-3xl font-bold leading-none", {
+  variants: {
+    accent: {
+      foreground: "text-[hsl(var(--foreground))]",
+      primary: "text-[hsl(var(--primary))]",
+      success: "text-[hsl(var(--success))]",
+      warning: "text-[hsl(var(--warning))]",
+      danger: "text-[hsl(var(--danger))]",
+      purple: "text-[hsl(var(--purple))]",
+    },
+  },
+  defaultVariants: {
+    accent: "foreground",
+  },
+})
+
+interface StatCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof valueAccent> {
+  title: React.ReactNode
+  value: React.ReactNode
+  sub?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+export function StatCard({
+  title,
+  value,
+  sub,
+  icon,
+  accent,
+  className,
+  ...props
+}: StatCardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] p-5 transition-shadow hover:shadow-md",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mb-2 flex items-center gap-1.5 text-[13px] text-[hsl(var(--muted-foreground))]">
+        {icon ? <span className="[&>svg]:h-3.5 [&>svg]:w-3.5">{icon}</span> : null}
+        <span>{title}</span>
+      </div>
+      <div className={cn(valueAccent({ accent }))}>{value}</div>
+      {sub ? (
+        <div className="mt-1 text-xs text-[hsl(var(--subtle))]">{sub}</div>
+      ) : null}
+    </div>
+  )
+}

package/dist/dashboard-runtime/dashboard/src/components/ui/switch.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+interface SwitchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+/**
+ * iOS-style switch built on a native <button role="switch">. The track uses an
+ * inset shadow to read as a recessed groove, while the thumb carries a layered
+ * drop shadow so it visually lifts above the track. Space / Enter toggling is
+ * handled by the browser; the component only mirrors state into aria-checked
+ * and data-state, and animates the thumb via a spring easing curve. All
+ * transitions are limited to transform and background-color so the browser can
+ * keep them on the compositor thread.
+ */
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      data-state={checked ? "checked" : "unchecked"}
+      disabled={disabled}
+      onClick={() => onCheckedChange?.(!checked)}
+      className={cn(
+        // Track: 24x44 follows the iOS Switch proportions (roughly 13:22) and
+        // gives the thumb enough room to read as the dominant element.
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200",
+        // Inset shadow renders the track as a recessed groove instead of a
+        // flat saturated block, which is what made the on-state feel heavy.
+        "shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04),inset_0_1px_2px_rgba(0,0,0,0.06)]",
+        "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",
+        checked
+          ? "bg-[hsl(var(--primary-600))]"
+          : "bg-[hsl(var(--muted))] hover:bg-[hsl(var(--muted)/0.8)]",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          // Thumb: 20x20 with 2px breathing room on each side of the 24x44
+          // track. A layered shadow plus a hairline ring keep the white knob
+          // visible on both the light gray and the primary blue backgrounds.
+          "pointer-events-none block h-5 w-5 rounded-full bg-white transition-transform duration-200",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.1),0_2px_6px_rgba(0,0,0,0.15)] ring-1 ring-black/4",
+          // Spring easing gives a subtle overshoot, matching the tactile feel
+          // of the iOS toggle without a heavy animation library.
+          "ease-[cubic-bezier(0.34,1.56,0.64,1)]",
+          checked ? "translate-x-5" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  ),
+);
+Switch.displayName = "Switch";
+
+export { Switch };