@alexgorbatchev/shadcn 0.0.19 → 0.0.21

package/dist/{chunk-m54kq3he.js → chunk-hh43wg05.js}

@@ -4,6 +4,10 @@ import {
 import {
   usePortalContainer2
 } from "./chunk-j89xg1ak.js";
+import {
+  usePortalNode,
+  PortalProvider2
+} from "./chunk-aa7m22zj.js";
 import {
   cn2
 } from "./chunk-cp2m7y7v.js";
@@ -36,21 +40,27 @@ function HoverCardContent2({
   const resolvedDensity = useDensity(density);
   const direction = useDirection();
   const container = usePortalContainer2();
+  const portal = usePortalNode();
   return /* @__PURE__ */ jsx(PreviewCardPrimitive.Portal, {
     container,
+    ref: portal.ref,
     "data-slot": "hover-card-portal",
-    children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Positioner, {
-      dir: direction,
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate ",
-      children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Popup, {
-        "data-density": resolvedDensity,
-        "data-slot": "hover-card-content",
-        className: (state) => cn2(" w-64 origin-(--transform-origin) rounded-sm bg-popover p-panel text-sm text-popover-foreground  border border-frame-edge shadow-frame outline-hidden duration-100       data-open:animate-in data-open:fade-in-0  data-closed:animate-out data-closed:fade-out-0 ", typeof className === "function" ? className(state) : className),
-        ...props
+    children: /* @__PURE__ */ jsx(PortalProvider2, {
+      container: portal.node,
+      children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Positioner, {
+        dir: direction,
+        align,
+        alignOffset,
+        side,
+        sideOffset,
+        className: "isolate ",
+        children: /* @__PURE__ */ jsx(PreviewCardPrimitive.Popup, {
+          "data-density": resolvedDensity,
+          "data-slot": "hover-card-content",
+          "data-scroll": "none",
+          className: (state) => cn2(" w-64 origin-(--transform-origin) rounded-sm bg-popover p-panel text-sm text-popover-foreground  border border-frame-edge shadow-frame outline-hidden duration-100       data-open:animate-in data-open:fade-in-0  data-closed:animate-out data-closed:fade-out-0 ", typeof className === "function" ? className(state) : className),
+          ...props
+        })
       })
     })
   });

package/dist/{chunk-6hbx647r.js → chunk-j4gd5awk.js}

@@ -1,21 +1,21 @@
 import {
   ContextDisplayRoot3
-} from "./chunk-f63f8w58.js";
+} from "./chunk-3jrsp186.js";
 import {
   ContextDisplayTrigger2
-} from "./chunk-86211e5a.js";
+} from "./chunk-p8gshf3k.js";
 import {
   ContextDisplayContent2
-} from "./chunk-2b9agdrf.js";
+} from "./chunk-3dyqen8w.js";
 import {
   ContextDisplayRing2
-} from "./chunk-wf5cnpdg.js";
+} from "./chunk-p45ytcc2.js";
 import {
   ContextDisplayBar2
-} from "./chunk-pe1vvkp7.js";
+} from "./chunk-9jct7hv0.js";
 import {
   ContextDisplayText2
-} from "./chunk-550z7s64.js";
+} from "./chunk-6432235c.js";
 
 // src/components/assistant-ui/elements/ContextDisplay.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/{chunk-aewjmzt9.js → chunk-jba22682.js}

@@ -6,13 +6,13 @@ import {
   Tooltip2,
   TooltipTrigger2,
   TooltipContent2
-} from "./chunk-czg9p52v.js";
+} from "./chunk-mz3e810d.js";
 import {
   Dialog2,
   DialogTrigger2,
   DialogContent2,
   DialogTitle2
-} from "./chunk-717ggspf.js";
+} from "./chunk-70vndezn.js";
 import {
   Avatar2,
   AvatarImage2,
@@ -20,7 +20,7 @@ import {
 } from "./chunk-gg39sggp.js";
 import {
   TooltipIconButton2
-} from "./chunk-q40gqpwh.js";
+} from "./chunk-qgjjcmpa.js";
 
 // src/components/assistant-ui/native/AttachmentPreview.tsx
 import { useState, isValidElement } from "react";

package/dist/{chunk-82cw4kcg.js → chunk-jf0y740b.js}

@@ -4,7 +4,7 @@ import {
 import {
   Card2,
   CardContent2
-} from "./chunk-v4yqjvzd.js";
+} from "./chunk-bygq5yqf.js";
 import {
   FieldSet2,
   FieldLegend2,

package/dist/{chunk-fyb0b7bp.js → chunk-jpamrhdk.js}

@@ -5,7 +5,7 @@ import {
   Card2,
   CardContent2,
   CardFooter2
-} from "./chunk-v4yqjvzd.js";
+} from "./chunk-bygq5yqf.js";
 import {
   Field2,
   FieldLabel2

package/dist/{chunk-gyg2s982.js → chunk-k4qz4q7r.js}

@@ -41,6 +41,7 @@ function ApprovalCard2({
     role: "group",
     "data-testid": "ApprovalCard",
     "data-slot": "approval-card",
+    "data-scroll": "none",
     "data-variant": variant,
     "aria-labelledby": titleId,
     "aria-describedby": description ? descriptionId : undefined,

package/dist/{chunk-dppmqr99.js → chunk-k8v9y2dw.js}

@@ -1,6 +1,6 @@
 import {
   CommandGroup2
-} from "./chunk-waat2ksf.js";
+} from "./chunk-ghmkxqn5.js";
 
 // src/components/assistant-ui/elements/ModelSelectorGroup.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/chunk-kbg2e95b.js

@@ -0,0 +1,434 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Badge2
+} from "./chunk-wjx6zf94.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  NativeSelect2,
+  NativeSelectOption2
+} from "./chunk-r9qrb6b6.js";
+
+// src/components/Tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+function Tabs2({ density, className, orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Root, {
+    "data-density": density,
+    "data-slot": "tabs",
+    orientation,
+    className: (state) => cn2("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+var tabsListVariants2 = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-sm p-px text-muted-foreground group-data-[orientation=horizontal]/tabs:h-control group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
+  variants: {
+    variant: {
+      default: "bg-muted",
+      line: "gap-1 bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function TabsList2({ density, className, variant = "default", ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.List, {
+    "data-density": density,
+    "data-slot": "tabs-list",
+    "data-variant": variant,
+    className: (state) => cn2(tabsListVariants2({ variant }), typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function TabsTrigger2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Tab, {
+    "data-density": density,
+    "data-slot": "tabs-trigger",
+    className: (state) => cn2("relative inline-flex h-full flex-1 items-center justify-center gap-control-gap rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pe-1 has-data-[icon=inline-start]:ps-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function TabsContent2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Panel, {
+    "data-density": density,
+    "data-slot": "tabs-content",
+    "data-scroll": "none",
+    className: (state) => cn2("flex-1 text-sm outline-none", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+
+// src/components/DragDropPreview.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DragDropPreview2({ labels, maxItems = 5 }) {
+  const limit = Math.max(1, Math.floor(maxItems));
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "drag-drop-preview",
+    className: "flex w-max max-w-64 flex-col items-start gap-1",
+    children: [
+      labels.slice(0, limit).map((label, index) => /* @__PURE__ */ jsx2(Badge2, {
+        variant: "secondary",
+        density: "compact",
+        children: /* @__PURE__ */ jsx2("span", {
+          className: "max-w-60 truncate",
+          children: label
+        })
+      }, `${index}:${label}`)),
+      labels.length > limit && /* @__PURE__ */ jsxs(Badge2, {
+        variant: "secondary",
+        density: "compact",
+        children: [
+          "+",
+          labels.length - limit,
+          " more…"
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/DragDropProvider.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+
+// src/drag-drop/DragDropContext.ts
+import { createContext } from "react";
+var DragDropContext = createContext(null);
+
+// src/components/DragDropProvider.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function DragDropProvider2({ children, maxPreviewItems = 5 }) {
+  const [active, setActive] = useState(null);
+  const [over, setOver] = useState(null);
+  const preview = useRef(null);
+  const end = useCallback(() => {
+    setActive(null);
+    setOver(null);
+  }, []);
+  useEffect(() => {
+    window.addEventListener("dragend", end);
+    window.addEventListener("drop", end);
+    return () => {
+      window.removeEventListener("dragend", end);
+      window.removeEventListener("drop", end);
+    };
+  }, [end]);
+  const start = (event, item, effect) => {
+    event.dataTransfer.effectAllowed = effect;
+    event.dataTransfer.setData(item.type, JSON.stringify(item.data) ?? "null");
+    event.dataTransfer.setData("text/plain", item.labels.join(`
+`));
+    flushSync(() => {
+      setActive(item);
+      setOver(null);
+    });
+    if (preview.current)
+      event.dataTransfer.setDragImage(preview.current, 12, 12);
+  };
+  const enter = (next) => setOver((current) => current?.id === next.id && current.type === next.type && current.isAlt === next.isAlt && current.effect === next.effect ? current : next);
+  const leave = (id) => setOver((current) => current?.id === id ? null : current);
+  return /* @__PURE__ */ jsxs2(DragDropContext, {
+    value: { active, over, start, end, enter, leave },
+    children: [
+      children,
+      /* @__PURE__ */ jsx3("div", {
+        ref: preview,
+        "aria-hidden": "true",
+        className: "pointer-events-none fixed -left-[10000px] top-0 w-max",
+        children: /* @__PURE__ */ jsx3(DragDropPreview2, {
+          labels: active?.labels ?? [],
+          maxItems: maxPreviewItems
+        })
+      }),
+      /* @__PURE__ */ jsx3("span", {
+        role: "status",
+        "aria-label": "Drag status",
+        className: "sr-only",
+        children: active && `${active.labels.length} ${active.labels.length === 1 ? "item" : "items"} being dragged`
+      })
+    ]
+  });
+}
+
+// src/hooks/useDragDrop.ts
+import { useContext } from "react";
+function useDragDrop2() {
+  const context = useContext(DragDropContext);
+  if (!context)
+    throw new Error("Drag and drop requires DragDropProvider.");
+  return context;
+}
+
+// src/hooks/useDragSource.ts
+import { useId } from "react";
+function useDragSource2({
+  type,
+  data,
+  labels,
+  effectAllowed = "copyMove",
+  disabled = false
+}) {
+  const { active, start, end } = useDragDrop2();
+  const sourceId = useId();
+  return {
+    isDragging: active?.sourceId === sourceId,
+    props: {
+      draggable: !disabled,
+      onDragStart: (event) => {
+        if (event.defaultPrevented)
+          return;
+        event.stopPropagation();
+        if (disabled || labels.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        start(event, { sourceId, type, data, labels }, effectAllowed);
+      },
+      onDragEnd: end
+    }
+  };
+}
+
+// src/components/DragSource.tsx
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+function DragSource2({
+  type,
+  data,
+  labels,
+  effectAllowed,
+  disabled,
+  render,
+  ...props
+}) {
+  const source = useDragSource2({ type, data, labels, effectAllowed, disabled });
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps(props, source.props),
+    state: { slot: "drag-source", dragging: source.isDragging }
+  });
+}
+
+// src/hooks/useDropTarget.ts
+import { useId as useId2, useState as useState2 } from "react";
+function useDropTarget2({ accept, canDrop, getDropEffect, onDrop }) {
+  const { active, over, enter, leave, end } = useDragDrop2();
+  const id = useId2();
+  const [feedback, setFeedback] = useState2(null);
+  return {
+    feedback,
+    type: over?.id === id ? over.type : null,
+    isOver: over?.id === id,
+    isAlt: over?.id === id && over.isAlt,
+    effect: over?.id === id ? over.effect : "none",
+    props: {
+      onDragOver: (event) => {
+        const type = accept.find((type) => event.dataTransfer.types.includes(type));
+        if (!type)
+          return;
+        event.stopPropagation();
+        const item = active?.type === type ? active : null;
+        const effect = item && canDrop && !canDrop(item) ? "none" : getDropEffect?.(item, event) ?? "move";
+        event.dataTransfer.dropEffect = effect;
+        if (effect === "none") {
+          leave(id);
+          return;
+        }
+        event.preventDefault();
+        setFeedback((current) => current?.type === type && current.isAlt === event.altKey && current.effect === effect ? current : { type, isAlt: event.altKey, effect });
+        enter({ id, type, isAlt: event.altKey, effect });
+      },
+      onDragLeave: (event) => {
+        if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget))
+          leave(id);
+      },
+      onDrop: (event) => {
+        const type = accept.find((type) => event.dataTransfer.types.includes(type));
+        if (!type)
+          return;
+        event.stopPropagation();
+        event.preventDefault();
+        const raw = event.dataTransfer.getData(type);
+        let data;
+        try {
+          data = JSON.parse(raw);
+        } catch {
+          data = raw;
+        }
+        const item = { type, data, labels: active?.labels ?? [] };
+        leave(id);
+        end();
+        if (!canDrop || canDrop(item))
+          onDrop(item, event);
+      }
+    }
+  };
+}
+
+// src/components/DropTarget.tsx
+import { useRender as useRender2 } from "@base-ui/react/use-render";
+import { mergeProps as mergeProps2 } from "@base-ui/react/merge-props";
+function DropTarget2({
+  accept,
+  canDrop,
+  getDropEffect,
+  onDrop,
+  render,
+  ...props
+}) {
+  const target = useDropTarget2({ accept, canDrop, getDropEffect, onDrop });
+  return useRender2({
+    defaultTagName: "div",
+    render,
+    props: mergeProps2(props, target.props),
+    state: { slot: "drop-target", over: target.isOver, effect: target.effect }
+  });
+}
+
+// src/components/Kanban.tsx
+import { useId as useId3 } from "react";
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Kanban2({
+  label,
+  columns,
+  items,
+  onItemsChange,
+  renderItem,
+  canMove,
+  disabled,
+  density
+}) {
+  const boardId = useId3();
+  const type = `application/x-kanban-${boardId.replaceAll(":", "").toLowerCase()}`;
+  const canDropInto = (data, columnId) => typeof data === "string" && !disabled && items.some((item) => item.id === data && (!canMove || canMove(item, columnId)));
+  const move = (id, columnId, beforeId) => {
+    const item = items.find((candidate) => candidate.id === id);
+    if (!item || disabled || !columns.some((column) => column.id === columnId) || canMove && !canMove(item, columnId) || id === beforeId)
+      return;
+    const remaining = items.filter((candidate) => candidate.id !== id);
+    const index = beforeId ? remaining.findIndex((candidate) => candidate.id === beforeId) : remaining.length;
+    remaining.splice(index < 0 ? remaining.length : index, 0, { ...item, columnId });
+    onItemsChange(remaining);
+  };
+  return /* @__PURE__ */ jsx4(DragDropProvider2, {
+    children: /* @__PURE__ */ jsx4("div", {
+      role: "region",
+      "aria-label": label,
+      "data-density": density,
+      className: "overflow-x-auto",
+      children: /* @__PURE__ */ jsx4("div", {
+        className: "grid min-w-max auto-cols-[18rem] grid-flow-col gap-4",
+        children: columns.map((column) => {
+          const cards = items.filter((item) => item.columnId === column.id);
+          return /* @__PURE__ */ jsxs3(DropTarget2, {
+            accept: [type],
+            canDrop: (item) => canDropInto(item.data, column.id),
+            onDrop: (item) => {
+              if (typeof item.data === "string")
+                move(item.data, column.id);
+            },
+            render: /* @__PURE__ */ jsx4("section", {
+              "aria-label": column.label,
+              "data-scroll": "none"
+            }),
+            className: "flex min-h-48 flex-col gap-3 rounded-sm border border-border bg-muted/30 p-3 data-over:border-primary",
+            children: [
+              /* @__PURE__ */ jsxs3("header", {
+                className: "flex items-center justify-between gap-2",
+                children: [
+                  /* @__PURE__ */ jsx4("h2", {
+                    className: "text-sm font-semibold",
+                    children: column.label
+                  }),
+                  /* @__PURE__ */ jsx4(Badge2, {
+                    variant: "secondary",
+                    "aria-label": `${column.label} count`,
+                    children: cards.length
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsx4("ol", {
+                className: "grid gap-2",
+                children: cards.map((item, index) => /* @__PURE__ */ jsx4("li", {
+                  children: /* @__PURE__ */ jsx4(DropTarget2, {
+                    accept: [type],
+                    canDrop: (drag) => canDropInto(drag.data, column.id),
+                    onDrop: (drag) => {
+                      if (typeof drag.data === "string")
+                        move(drag.data, column.id, item.id);
+                    },
+                    children: /* @__PURE__ */ jsxs3(DragSource2, {
+                      type,
+                      data: item.id,
+                      labels: [item.title],
+                      disabled,
+                      className: "grid gap-3 rounded-sm border border-border bg-card p-3 text-sm data-dragging:opacity-50",
+                      role: "group",
+                      "aria-label": item.title,
+                      "data-scroll": "none",
+                      children: [
+                        /* @__PURE__ */ jsx4("div", {
+                          children: renderItem ? renderItem(item) : /* @__PURE__ */ jsx4("h3", {
+                            className: "font-medium",
+                            children: item.title
+                          })
+                        }),
+                        /* @__PURE__ */ jsxs3("div", {
+                          className: "flex items-center gap-1",
+                          children: [
+                            /* @__PURE__ */ jsx4(NativeSelect2, {
+                              "aria-label": `Move ${item.title} to`,
+                              value: column.id,
+                              disabled,
+                              onChange: (event) => move(item.id, event.target.value),
+                              children: columns.map((target) => /* @__PURE__ */ jsx4(NativeSelectOption2, {
+                                value: target.id,
+                                disabled: Boolean(canMove && !canMove(item, target.id)),
+                                children: target.label
+                              }, target.id))
+                            }),
+                            /* @__PURE__ */ jsx4(Button2, {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon-sm",
+                              "aria-label": `Move ${item.title} up`,
+                              disabled: disabled || index === 0,
+                              onClick: () => move(item.id, column.id, cards[index - 1]?.id),
+                              children: /* @__PURE__ */ jsx4(ArrowUpIcon, {})
+                            }),
+                            /* @__PURE__ */ jsx4(Button2, {
+                              type: "button",
+                              variant: "ghost",
+                              size: "icon-sm",
+                              "aria-label": `Move ${item.title} down`,
+                              disabled: disabled || index === cards.length - 1,
+                              onClick: () => move(cards[index + 1].id, column.id, item.id),
+                              children: /* @__PURE__ */ jsx4(ArrowDownIcon, {})
+                            })
+                          ]
+                        })
+                      ]
+                    })
+                  })
+                }, item.id))
+              }),
+              !cards.length && /* @__PURE__ */ jsx4("p", {
+                className: "py-6 text-center text-sm text-muted-foreground",
+                children: "No items"
+              })
+            ]
+          }, column.id);
+        })
+      })
+    })
+  });
+}
+
+export { Tabs2, tabsListVariants2, TabsList2, TabsTrigger2, TabsContent2, DragDropPreview2, DragDropProvider2, useDragDrop2, useDragSource2, DragSource2, useDropTarget2, DropTarget2, Kanban2 };

package/dist/{chunk-s3b87adw.js → chunk-kv1akmf5.js}

@@ -7,7 +7,7 @@ import {
   CardTitle2,
   CardDescription2,
   CardContent2
-} from "./chunk-v4yqjvzd.js";
+} from "./chunk-bygq5yqf.js";
 import {
   codeScroll,
   codeSurface

package/dist/{chunk-2g0zzx6f.js → chunk-m2ct74my.js}

@@ -31,6 +31,7 @@ function RecommendationCard2({
   return /* @__PURE__ */ jsxs("div", {
     "data-testid": "RecommendationCard",
     "data-slot": "recommendation-card",
+    "data-scroll": "none",
     className: cn2(cn2(paper, "flex w-full max-w-sm flex-col gap-3 rounded-md p-4"), className),
     ...props,
     ...focusHandlers,

package/dist/{chunk-19441s27.js → chunk-m9zsppp2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-cp2m7y7v.js";
 import {
   MarkdownText2
-} from "./chunk-q2ewq67a.js";
+} from "./chunk-02qymemz.js";
 import {
   formatUnknownValue2,
   ToolFallbackError2,
@@ -13,7 +13,7 @@ import {
 } from "./chunk-yp12vs0s.js";
 import {
   TaskCard3
-} from "./chunk-njzam0hx.js";
+} from "./chunk-3qqdfft7.js";
 import {
   taskStateOf,
   taskLabel,