@timbal-ai/timbal-react 1.4.0 → 1.5.0

package/dist/chunk-5ECRZ5O7.esm.js

@@ -0,0 +1,899 @@
+import {
+  overlayListPanelClass,
+  overlaySurfaceClass
+} from "./chunk-AZL2WANO.esm.js";
+import {
+  cn
+} from "./chunk-EDEKQYSU.esm.js";
+
+// src/ui/copy-button.tsx
+import * as React from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CopyButton({
+  value,
+  timeout = 1500,
+  onCopied,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef(void 0);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const handleClick = async (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      onCopied?.(value);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), timeout);
+    } catch {
+    }
+  };
+  const Icon = copied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "copy-button",
+      "data-copied": copied || void 0,
+      "aria-label": copied ? "Copied" : "Copy",
+      onClick: handleClick,
+      className: cn(
+        "inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium text-muted-foreground transition-colors",
+        "hover:bg-accent hover:text-foreground data-[copied=true]:text-emerald-600 dark:data-[copied=true]:text-emerald-400",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
+        children ? "h-8 px-2" : "size-8",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
+        children
+      ]
+    }
+  );
+}
+
+// src/ui/checkbox.tsx
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { CheckIcon as CheckIcon2 } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer size-4 shrink-0 rounded-[4px] border border-border bg-gradient-to-b from-elevated-from to-elevated-to shadow-card outline-none transition-[box-shadow,background-color,border-color]",
+        "focus-visible:ring-2 focus-visible:ring-foreground/10 disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:border-foreground/15 data-[state=checked]:from-primary-fill-from data-[state=checked]:to-primary-fill-to data-[state=checked]:text-primary-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx2(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "flex items-center justify-center text-current animate-checkbox-pop",
+          children: /* @__PURE__ */ jsx2(CheckIcon2, { className: "size-2.5 stroke-[3.5px]" })
+        }
+      )
+    }
+  );
+}
+
+// src/ui/popover.tsx
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      "data-variant": variant,
+      align,
+      sideOffset,
+      className: cn(
+        variant === "list" ? cn(
+          overlayListPanelClass,
+          "min-w-[8rem] origin-[var(--radix-popover-content-transform-origin)]"
+        ) : cn(
+          overlaySurfaceClass,
+          "w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-xl p-4 outline-hidden"
+        ),
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/ui/skeleton.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-lg bg-muted", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/untitled-button.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var SOLID_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-solid";
+var BORDERED_SKEUOMORPHIC_SHADOW = "shadow-skeuomorphic-bordered";
+var untitledButtonVariants = cva(
+  cn(
+    "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-all duration-300 ease-in-out outline-none border",
+    "focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:ring-offset-0",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+    // Overflow hidden can clip out-of-bounds shadow, so we use precise overflow management and rounded-[inherit] on pseudo overlays
+    "after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0"
+  ),
+  {
+    variants: {
+      color: {
+        primary: cn(
+          // Exact Premium Untitled UI primary BLACK / dark charcoal: gradient + borders
+          "bg-gradient-to-b from-[#344054] to-[#0F1117] text-white border-[#1A1E29]",
+          "hover:border-[#181C26]",
+          "active:border-[#0A0D14]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for beautiful animation (the gradient is static, the overlay opacity is transitioned)
+          "after:bg-white/[0.08] hover:after:opacity-100 active:after:bg-black/[0.12]",
+          // Premium Dark Mode inversion: Primary becomes white, popping out elegantly
+          "dark:bg-gradient-to-b dark:from-white dark:to-[#F9FAFB] dark:text-[#10121C] dark:border-white",
+          "dark:hover:border-[#D0D5DD] dark:hover:text-[#10121C]",
+          "dark:shadow-skeuomorphic-bordered",
+          "dark:after:bg-black/[0.04] dark:active:after:bg-black/[0.08]"
+        ),
+        secondary: cn(
+          // Exact Untitled UI secondary: premium white/gray gradient + borders
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#344054] border-[#D0D5DD]",
+          "hover:text-[#1D2939] hover:border-[#D0D5DD]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover/active overlays for white/gray gradient
+          "after:bg-black/[0.03] hover:after:opacity-100 active:after:bg-black/[0.08]",
+          // Premium Dark Mode inversion: Secondary becomes dark charcoal/gray, merging into the background
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#D1D5DB] dark:border-[#344054]",
+          "dark:hover:border-[#475467] dark:hover:text-white",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        ),
+        tertiary: cn(
+          "bg-transparent text-[#475467] border-transparent",
+          "hover:bg-[#F9FAFB] hover:text-[#344054]",
+          "active:bg-[#F2F4F7] active:text-[#1D2939]",
+          "after:hidden",
+          // No overlay needed for transparent surfaces
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:bg-[#1F242F] dark:hover:text-white dark:active:bg-[#11131A]"
+        ),
+        link: cn(
+          "h-auto! bg-transparent p-0! border-transparent text-[#1F242F] hover:text-[#10121C]",
+          "hover:underline",
+          "after:hidden",
+          // Dark Mode
+          "dark:text-[#9CA3AF] dark:hover:text-white"
+        ),
+        "primary-destructive": cn(
+          // Exact Untitled UI primary destructive: premium red gradient + borders (vibrant and subtle, not too dark)
+          "bg-gradient-to-b from-[#D92D20] to-[#B42318] text-white border-[#B42318]",
+          "hover:border-[#9E1B12]",
+          "active:border-[#84140D]",
+          SOLID_SKEUOMORPHIC_SHADOW,
+          // Destructive red hover/active overlays
+          "after:bg-white/[0.12] hover:after:opacity-100 active:after:bg-black/[0.15]"
+        ),
+        "secondary-destructive": cn(
+          // Exact Untitled UI secondary destructive: soft red bordered
+          "bg-gradient-to-b from-white to-[#F9FAFB] text-[#B42318] border-[#FDA29B]",
+          "hover:text-[#9E1B12] hover:border-[#FDA29B]",
+          BORDERED_SKEUOMORPHIC_SHADOW,
+          // Hover overlay
+          "after:bg-red-500/[0.04] hover:after:opacity-100 active:after:bg-red-950/[0.08]",
+          // Dark Mode Secondary Destructive: Charcoal fill with red borders and label
+          "dark:bg-gradient-to-b dark:from-[#1F242F] dark:to-[#10121C] dark:text-[#F87171] dark:border-[#9E1B12]/50",
+          "dark:hover:border-[#F87171]/40",
+          "dark:shadow-skeuomorphic-solid",
+          "dark:after:bg-white/[0.06] dark:active:after:bg-black/[0.15]"
+        )
+      },
+      size: {
+        sm: "h-9 gap-1.5 rounded-lg px-3 text-sm",
+        md: "h-10 gap-1.5 rounded-lg px-3.5 text-sm",
+        lg: "h-11 gap-2 rounded-lg px-4 text-base",
+        xl: "h-12 gap-2 rounded-lg px-5 text-base"
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  }
+);
+function UntitledButton({
+  className,
+  color,
+  size,
+  iconLeading,
+  iconTrailing,
+  isLoading = false,
+  asChild = false,
+  disabled,
+  type = "button",
+  children,
+  ...props
+}) {
+  const isDisabled = disabled || isLoading;
+  const classes = cn(untitledButtonVariants({ color, size }), className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx5(
+      Slot.Root,
+      {
+        className: classes,
+        "aria-disabled": isDisabled ? true : void 0,
+        "data-slot": "untitled-button",
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      "data-slot": "untitled-button",
+      className: classes,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ jsx5(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : iconLeading,
+        children,
+        !isLoading ? iconTrailing : null
+      ]
+    }
+  );
+}
+
+// src/ui/banner.tsx
+import { XIcon } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var bannerSoftClass = {
+  default: "border-border/50 bg-muted/30 text-foreground/90 dark:bg-muted/15",
+  primary: "border-primary/15 bg-primary/5 text-primary-800 dark:text-primary-200 [&_[data-banner-icon]]:text-primary",
+  success: "border-emerald-500/15 bg-emerald-500/5 text-emerald-800 dark:text-emerald-300 [&_[data-banner-icon]]:text-emerald-600 dark:[&_[data-banner-icon]]:text-emerald-400",
+  warn: "border-amber-500/15 bg-amber-500/5 text-amber-800 dark:text-amber-300 [&_[data-banner-icon]]:text-amber-600 dark:[&_[data-banner-icon]]:text-amber-400",
+  danger: "border-destructive/15 bg-destructive/5 text-destructive dark:text-red-300 [&_[data-banner-icon]]:text-destructive"
+};
+var bannerSolidClass = {
+  default: "border-transparent bg-foreground text-background shadow-sm",
+  primary: "border-transparent bg-gradient-to-r from-primary to-primary/95 text-primary-foreground shadow-sm shadow-primary/5",
+  success: "border-transparent bg-gradient-to-r from-emerald-600 to-emerald-500 text-white shadow-sm shadow-emerald-500/5 dark:from-emerald-500 dark:to-emerald-400",
+  warn: "border-transparent bg-gradient-to-r from-amber-500 to-amber-400 text-white shadow-sm shadow-amber-500/5 dark:from-amber-500 dark:to-amber-400",
+  danger: "border-transparent bg-gradient-to-r from-destructive to-destructive/95 text-destructive-foreground shadow-sm shadow-destructive/5"
+};
+var bannerOutlineClass = {
+  default: "border-border/80 bg-background/50 text-foreground/90 backdrop-blur-sm shadow-sm",
+  primary: "border-primary/30 bg-primary/[0.02] text-foreground [&_[data-banner-icon]]:text-primary shadow-sm",
+  success: "border-emerald-500/30 bg-emerald-500/[0.02] text-foreground [&_[data-banner-icon]]:text-emerald-600 dark:[&_[data-banner-icon]]:text-emerald-400 shadow-sm",
+  warn: "border-amber-500/30 bg-amber-500/[0.02] text-foreground [&_[data-banner-icon]]:text-amber-600 dark:[&_[data-banner-icon]]:text-amber-400 shadow-sm",
+  danger: "border-destructive/30 bg-destructive/[0.02] text-foreground [&_[data-banner-icon]]:text-destructive shadow-sm"
+};
+var bannerVariantClass = {
+  soft: bannerSoftClass,
+  solid: bannerSolidClass,
+  outline: bannerOutlineClass
+};
+var bannerSizeClass = {
+  sm: "gap-2.5 px-3.5 py-2 text-xs",
+  default: "gap-3 px-4 py-3 text-sm"
+};
+function Banner({
+  tone = "default",
+  variant = "soft",
+  size = "default",
+  icon,
+  title,
+  actions,
+  onDismiss,
+  className,
+  children,
+  ...props
+}) {
+  const isSolid = variant === "solid";
+  const isSingleLine = !title;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "banner",
+      "data-variant": variant,
+      role: "status",
+      className: cn(
+        "flex w-full rounded-xl border transition-all duration-200",
+        isSingleLine ? "items-center" : "items-start",
+        bannerSizeClass[size],
+        bannerVariantClass[variant][tone],
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx6(
+          "span",
+          {
+            "data-banner-icon": true,
+            className: cn(
+              "shrink-0 [&_svg]:size-4",
+              isSingleLine ? "self-center" : "mt-0.5"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+          title ? /* @__PURE__ */ jsx6("p", { className: "font-medium tracking-tight", children: title }) : null,
+          children ? /* @__PURE__ */ jsx6(
+            "div",
+            {
+              className: cn(
+                isSolid ? "opacity-90" : "text-muted-foreground",
+                title && "mt-0.5"
+              ),
+              children
+            }
+          ) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx6("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: cn(
+              "-mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15",
+              isSingleLine ? "self-center" : "-mt-0.5",
+              isSolid ? "opacity-80 hover:bg-background/15 hover:opacity-100" : "text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ jsx6(XIcon, { className: "size-4", "aria-hidden": true })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/ui/timeline.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var timelineRowGap = {
+  sm: "pb-4",
+  default: "pb-6"
+};
+var toneStyles = {
+  default: {
+    border: "border-neutral-300 dark:border-neutral-700",
+    dot: "bg-neutral-400 dark:bg-neutral-500",
+    icon: "text-neutral-500 dark:text-neutral-400"
+  },
+  primary: {
+    border: "border-primary/50 dark:border-primary/40",
+    dot: "bg-primary",
+    icon: "text-primary"
+  },
+  success: {
+    border: "border-emerald-500/40 dark:border-emerald-500/30",
+    dot: "bg-emerald-500",
+    icon: "text-emerald-500"
+  },
+  warn: {
+    border: "border-amber-500/40 dark:border-amber-500/30",
+    dot: "bg-amber-500",
+    icon: "text-amber-500"
+  },
+  danger: {
+    border: "border-destructive/40 dark:border-destructive/30",
+    dot: "bg-destructive",
+    icon: "text-destructive"
+  }
+};
+function Timeline({ items, size = "default", className, ...props }) {
+  return /* @__PURE__ */ jsx7("ol", { "data-slot": "timeline", className: cn("flex flex-col", className), ...props, children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    const tone = item.tone ?? "default";
+    const styles = toneStyles[tone];
+    return /* @__PURE__ */ jsxs4(
+      "li",
+      {
+        className: cn("relative flex gap-3.5 last:pb-0", timelineRowGap[size]),
+        children: [
+          !last ? /* @__PURE__ */ jsx7(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "absolute left-2.5 bottom-0 w-[1.5px] -translate-x-1/2 bg-neutral-200 dark:bg-neutral-800",
+                item.icon ? "top-6" : "top-3"
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsx7("div", { className: "relative flex w-5 shrink-0 justify-center pt-0.5", children: /* @__PURE__ */ jsx7(
+            "span",
+            {
+              className: cn(
+                "relative z-10 flex shrink-0 items-center justify-center rounded-full border-[1.5px] bg-background transition-colors",
+                styles.border,
+                item.icon ? "size-6" : "size-4"
+              ),
+              children: item.icon ? /* @__PURE__ */ jsx7("div", { className: cn("text-xs", styles.icon), children: item.icon }) : /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  className: cn(
+                    "size-1.5 rounded-full",
+                    styles.dot
+                  )
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1 pb-0.5", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx7("p", { className: "text-sm font-normal text-foreground", children: item.title }),
+              item.meta ? /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: item.meta }) : null
+            ] }),
+            item.description ? /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-[13px] leading-relaxed text-muted-foreground", children: item.description }) : null
+          ] })
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/ui/kanban.tsx
+import * as React2 from "react";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  closestCorners,
+  useDroppable,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVerticalIcon } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var columnTitleToneClass = {
+  default: "text-foreground",
+  primary: "text-blue-600 dark:text-blue-400",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warn: "text-amber-600 dark:text-amber-400",
+  danger: "text-rose-600 dark:text-rose-400"
+};
+var cardVariantClass = {
+  default: "border border-border/70 bg-card shadow-sm hover:border-border hover:shadow-md",
+  outline: "border border-border bg-card hover:border-foreground/25",
+  muted: "border border-transparent bg-muted/60 hover:bg-muted"
+};
+var cardToneClass = {
+  default: "bg-card shadow-sm hover:shadow-md",
+  primary: "bg-card shadow-sm hover:shadow-md",
+  success: "bg-card shadow-sm hover:shadow-md",
+  warn: "bg-card shadow-sm hover:shadow-md",
+  danger: "bg-card shadow-sm hover:shadow-md"
+};
+function cardSurfaceClass(variant, tone) {
+  return variant === "tonal" ? cardToneClass[tone] : cardVariantClass[variant];
+}
+var densityColumnClass = {
+  default: "w-72 gap-2.5",
+  compact: "w-64 gap-2"
+};
+var densityListClass = {
+  default: "gap-2.5",
+  compact: "gap-2"
+};
+var densityCardClass = {
+  default: "rounded-lg p-2",
+  compact: "rounded-lg p-1.5"
+};
+function defaultGetCardId(card) {
+  return card.id;
+}
+function SortableCard({
+  card,
+  cardId,
+  column,
+  density,
+  variant,
+  disabled,
+  dragHandle,
+  className,
+  renderCard
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: cardId, disabled });
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  const dragHandleProps = disabled ? void 0 : { ...attributes, ...listeners };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      "data-slot": "kanban-card",
+      "data-dragging": isDragging ? "" : void 0,
+      className: cn(
+        "group/kanban-card relative text-sm text-foreground transition",
+        densityCardClass[density],
+        cardSurfaceClass(variant, column.tone ?? "default"),
+        isDragging && "opacity-40",
+        className
+      ),
+      children: [
+        !disabled && dragHandle === "auto" ? /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Drag card",
+            className: "absolute right-1.5 top-1.5 z-10 grid size-6 cursor-grab touch-none place-items-center rounded-md text-muted-foreground/40 opacity-0 transition hover:bg-foreground/5 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/15 group-hover/kanban-card:opacity-100 active:cursor-grabbing",
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx8(GripVerticalIcon, { className: "size-4", "aria-hidden": true })
+          }
+        ) : null,
+        renderCard(card, { column, isDragging, isOverlay: false, dragHandleProps })
+      ]
+    }
+  );
+}
+function KanbanColumnView({
+  column,
+  cardIds,
+  density,
+  cardVariant,
+  disabled,
+  dragHandle,
+  emptyColumnLabel,
+  className,
+  cardClassName,
+  getCardId,
+  renderColumnHeader,
+  renderCard
+}) {
+  const tone = column.tone ?? "default";
+  const { setNodeRef, isOver } = useDroppable({ id: column.id, disabled });
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      "data-slot": "kanban-column",
+      className: cn(
+        "flex shrink-0 flex-col",
+        densityColumnClass[density],
+        className
+      ),
+      children: [
+        renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-0.5 px-1 pb-0.5", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx8(
+              "h3",
+              {
+                className: cn(
+                  "min-w-0 flex-1 truncate text-xs font-medium",
+                  columnTitleToneClass[tone]
+                ),
+                children: column.title
+              }
+            ),
+            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs font-normal tabular-nums text-muted-foreground/60", children: column.cards.length }),
+            column.action ? /* @__PURE__ */ jsx8("div", { className: "shrink-0", children: column.action }) : null
+          ] }),
+          column.description ? /* @__PURE__ */ jsx8("p", { className: "truncate text-xs text-muted-foreground", children: column.description }) : null
+        ] }),
+        /* @__PURE__ */ jsx8(SortableContext, { items: cardIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx8(
+          "div",
+          {
+            ref: setNodeRef,
+            "data-slot": "kanban-column-body",
+            className: cn(
+              "flex min-h-16 flex-1 flex-col rounded-xl transition-colors",
+              densityListClass[density],
+              isOver && "bg-muted/50"
+            ),
+            children: column.cards.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "flex flex-1 items-center justify-center rounded-xl border border-dashed border-border/60 px-2 py-8 text-center text-xs text-muted-foreground/70", children: emptyColumnLabel ?? "Drop here" }) : column.cards.map((card) => {
+              const id = getCardId(card);
+              return /* @__PURE__ */ jsx8(
+                SortableCard,
+                {
+                  card,
+                  cardId: id,
+                  column,
+                  density,
+                  variant: cardVariant,
+                  disabled,
+                  dragHandle,
+                  className: cardClassName,
+                  renderCard
+                },
+                id
+              );
+            })
+          }
+        ) }),
+        column.footer ? /* @__PURE__ */ jsx8("div", { className: "px-0.5 pt-0.5", children: column.footer }) : null
+      ]
+    }
+  );
+}
+function cloneColumns(columns) {
+  return columns.map((col) => ({ ...col, cards: [...col.cards] }));
+}
+function locateCard(columns, getCardId, cardId) {
+  for (const col of columns) {
+    const index = col.cards.findIndex((c) => getCardId(c) === cardId);
+    if (index !== -1) return { columnId: col.id, index };
+  }
+  return null;
+}
+function Kanban({
+  columns: columnsProp,
+  defaultColumns,
+  onColumnsChange,
+  onMove,
+  renderCard,
+  renderColumnHeader,
+  getCardId = defaultGetCardId,
+  emptyColumnLabel,
+  density = "default",
+  cardVariant = "default",
+  dragHandle = "auto",
+  disabled = false,
+  className,
+  columnClassName,
+  cardClassName,
+  ...rest
+}) {
+  const ariaLabel = rest["aria-label"] ?? "Kanban board";
+  const isControlled = columnsProp !== void 0;
+  const [internal, setInternal] = React2.useState(
+    () => cloneColumns(defaultColumns ?? columnsProp ?? [])
+  );
+  const [activeId, setActiveId] = React2.useState(null);
+  const dragOriginRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (isControlled && activeId === null) {
+      setInternal(cloneColumns(columnsProp));
+    }
+  }, [columnsProp, isControlled, activeId]);
+  const columns = internal;
+  const columnIds = React2.useMemo(
+    () => new Set(columns.map((c) => c.id)),
+    [columns]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const activeCard = React2.useMemo(() => {
+    if (!activeId) return null;
+    for (const col of columns) {
+      const card = col.cards.find((c) => getCardId(c) === activeId);
+      if (card) return { card, column: col };
+    }
+    return null;
+  }, [activeId, columns, getCardId]);
+  const resolveTargetColumnId = (overId) => {
+    if (columnIds.has(overId)) return overId;
+    const loc = locateCard(columns, getCardId, overId);
+    return loc?.columnId;
+  };
+  const handleDragStart = (event) => {
+    const id = String(event.active.id);
+    setActiveId(id);
+    dragOriginRef.current = locateCard(columns, getCardId, id);
+  };
+  const handleDragOver = (event) => {
+    const { active, over } = event;
+    if (!over) return;
+    const activeCardId = String(active.id);
+    const overId = String(over.id);
+    const from = locateCard(columns, getCardId, activeCardId);
+    const toColumnId = resolveTargetColumnId(overId);
+    if (!from || !toColumnId || from.columnId === toColumnId) return;
+    setInternal((prev) => {
+      const next = cloneColumns(prev);
+      const fromCol = next.find((c) => c.id === from.columnId);
+      const toCol = next.find((c) => c.id === toColumnId);
+      if (!fromCol || !toCol) return prev;
+      const movingIndex = fromCol.cards.findIndex(
+        (c) => getCardId(c) === activeCardId
+      );
+      if (movingIndex === -1) return prev;
+      const [moving] = fromCol.cards.splice(movingIndex, 1);
+      const overIsCard = !columnIds.has(overId);
+      const overIndex = overIsCard ? toCol.cards.findIndex((c) => getCardId(c) === overId) : toCol.cards.length;
+      const insertAt = overIndex === -1 ? toCol.cards.length : overIndex;
+      toCol.cards.splice(insertAt, 0, moving);
+      return next;
+    });
+  };
+  const finishDrag = (event) => {
+    const { active, over } = event;
+    const origin = dragOriginRef.current;
+    const movedCard = activeCard?.card;
+    dragOriginRef.current = null;
+    setActiveId(null);
+    if (!over || !origin) return;
+    const activeCardId = String(active.id);
+    const overId = String(over.id);
+    let next = columns;
+    const current = locateCard(columns, getCardId, activeCardId);
+    const toColumnId = resolveTargetColumnId(overId) ?? current?.columnId;
+    if (current && toColumnId && current.columnId === toColumnId) {
+      const col = columns.find((c) => c.id === toColumnId);
+      if (col) {
+        const oldIndex = col.cards.findIndex((c) => getCardId(c) === activeCardId);
+        const overIsCard = !columnIds.has(overId);
+        const overIndex = overIsCard ? col.cards.findIndex((c) => getCardId(c) === overId) : col.cards.length - 1;
+        const newIndex = overIndex === -1 ? col.cards.length - 1 : overIndex;
+        if (oldIndex !== -1 && newIndex !== -1 && oldIndex !== newIndex) {
+          next = columns.map(
+            (c) => c.id === toColumnId ? { ...c, cards: arrayMove(c.cards, oldIndex, newIndex) } : c
+          );
+        }
+      }
+    }
+    if (next !== columns) setInternal(next);
+    const finalLoc = locateCard(next, getCardId, activeCardId);
+    const moved = finalLoc && (finalLoc.columnId !== origin.columnId || finalLoc.index !== origin.index);
+    if (moved) {
+      if (movedCard) {
+        onMove?.({
+          card: movedCard,
+          cardId: activeCardId,
+          from: origin,
+          to: finalLoc,
+          columns: next
+        });
+      }
+      onColumnsChange?.(next);
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCorners,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: finishDrag,
+      onDragCancel: () => {
+        dragOriginRef.current = null;
+        setActiveId(null);
+        if (isControlled) setInternal(cloneColumns(columnsProp));
+      },
+      children: [
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            "data-slot": "kanban",
+            role: "list",
+            "aria-label": ariaLabel,
+            className: cn(
+              "flex w-full items-start overflow-x-auto p-1.5 pb-6 -m-1.5",
+              density === "compact" ? "gap-3" : "gap-4",
+              className
+            ),
+            children: columns.map((column) => /* @__PURE__ */ jsx8(
+              KanbanColumnView,
+              {
+                column,
+                cardIds: column.cards.map(getCardId),
+                density,
+                cardVariant,
+                disabled,
+                dragHandle,
+                emptyColumnLabel,
+                className: columnClassName,
+                cardClassName,
+                getCardId,
+                renderColumnHeader,
+                renderCard
+              },
+              column.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx8(DragOverlay, { children: activeCard ? /* @__PURE__ */ jsx8(
+          "div",
+          {
+            "data-slot": "kanban-card-overlay",
+            className: cn(
+              "text-sm text-foreground shadow-xl ring-1 ring-black/5",
+              densityCardClass[density],
+              cardSurfaceClass(cardVariant, activeCard.column.tone ?? "default"),
+              "rotate-2 cursor-grabbing"
+            ),
+            children: renderCard(activeCard.card, {
+              column: activeCard.column,
+              isDragging: true,
+              isOverlay: true
+            })
+          }
+        ) : null })
+      ]
+    }
+  );
+}
+
+export {
+  CopyButton,
+  Checkbox,
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverContent,
+  Skeleton,
+  untitledButtonVariants,
+  UntitledButton,
+  Banner,
+  Timeline,
+  Kanban
+};