@alexgorbatchev/shadcn 0.0.12 → 0.0.16

package/dist/chunk-q2ewq67a.js

@@ -0,0 +1,171 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  TooltipIconButton2
+} from "./chunk-q40gqpwh.js";
+import {
+  useCopyToClipboard
+} from "./chunk-6synj4j9.js";
+
+// src/components/assistant-ui/elements/MarkdownText.tsx
+import {
+  MarkdownTextPrimitive,
+  memoizeMarkdownComponents,
+  useIsMarkdownCodeBlock
+} from "@assistant-ui/react-markdown";
+import remarkGfm from "remark-gfm";
+import { useMemo } from "react";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MarkdownText2({ components, componentsByLanguage }) {
+  const markdownComponents = useMemo(() => {
+    if (!components)
+      return defaultComponents;
+    return {
+      ...defaultComponents,
+      ...memoizeMarkdownComponents(components)
+    };
+  }, [components]);
+  return /* @__PURE__ */ jsx(MarkdownTextPrimitive, {
+    remarkPlugins: [remarkGfm],
+    containerComponent: MarkdownTextContainer2,
+    components: markdownComponents,
+    componentsByLanguage,
+    defer: true
+  });
+}
+function MarkdownTextContainer2(props) {
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    "data-testid": "MarkdownTextContainer",
+    className: "aui-md text-sm"
+  });
+}
+function MarkdownTextCodeHeader2({ language, code }) {
+  const { isCopied, copyToClipboard } = useCopyToClipboard();
+  const onCopy = () => {
+    if (!code || isCopied)
+      return;
+    copyToClipboard(code);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "MarkdownTextCodeHeader",
+    className: "aui-code-header-root border-border/50 bg-muted/50 mt-3 flex items-center justify-between rounded-t-md border border-b-0 px-2 py-1.5 text-sm",
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "aui-code-header-language text-muted-foreground font-medium lowercase",
+        children: language
+      }),
+      /* @__PURE__ */ jsxs(TooltipIconButton2, {
+        tooltip: isCopied ? "Copied" : "Copy",
+        onClick: onCopy,
+        children: [
+          !isCopied && /* @__PURE__ */ jsx(CopyIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          }),
+          isCopied && /* @__PURE__ */ jsx(CheckIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-4")
+          })
+        ]
+      })
+    ]
+  });
+}
+var defaultComponents = memoizeMarkdownComponents({
+  h1: ({ className, ...props }) => /* @__PURE__ */ jsx("h1", {
+    className: cn2("aui-md-h1 mt-5 mb-2 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  h2: ({ className, ...props }) => /* @__PURE__ */ jsx("h2", {
+    className: cn2("aui-md-h2 mt-5 mb-2 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  h3: ({ className, ...props }) => /* @__PURE__ */ jsx("h3", {
+    className: cn2("aui-md-h3 mt-4 mb-1.5 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  h4: ({ className, ...props }) => /* @__PURE__ */ jsx("h4", {
+    className: cn2("aui-md-h4 mt-3.5 mb-1 scroll-m-20 text-base font-medium first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  h5: ({ className, ...props }) => /* @__PURE__ */ jsx("h5", {
+    className: cn2("aui-md-h5 mt-3 mb-1 text-sm font-semibold first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  h6: ({ className, ...props }) => /* @__PURE__ */ jsx("h6", {
+    className: cn2("aui-md-h6 mt-3 mb-1 text-sm font-medium first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+    className: cn2("aui-md-p my-3 leading-relaxed first:mt-0 last:mb-0", className),
+    ...props
+  }),
+  a: ({ className, ...props }) => /* @__PURE__ */ jsx("a", {
+    className: cn2("aui-md-a text-primary hover:text-primary/80 underline underline-offset-2", className),
+    ...props
+  }),
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+    className: cn2("aui-md-blockquote border-muted-foreground/30 text-muted-foreground my-3 border-s-2 ps-4", className),
+    ...props
+  }),
+  ul: ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+    className: cn2("aui-md-ul marker:text-muted-foreground my-3 ms-5 list-disc", className),
+    ...props
+  }),
+  ol: ({ className, ...props }) => /* @__PURE__ */ jsx("ol", {
+    className: cn2("aui-md-ol marker:text-muted-foreground my-3 ms-5 list-decimal", className),
+    ...props
+  }),
+  hr: ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
+    className: cn2("aui-md-hr border-muted-foreground/20 my-3", className),
+    ...props
+  }),
+  table: ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+    className: "aui-md-table-wrapper my-3 overflow-x-auto",
+    children: /* @__PURE__ */ jsx("table", {
+      className: cn2("aui-md-table w-full border-separate border-spacing-0", className),
+      ...props
+    })
+  }),
+  th: ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
+    className: cn2("aui-md-th bg-muted px-3 py-1.5 text-start font-medium first:rounded-ss-lg last:rounded-se-lg", className),
+    ...props
+  }),
+  td: ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
+    className: cn2("aui-md-td border-muted-foreground/20 border-s border-b px-3 py-1.5 text-start last:border-e", className),
+    ...props
+  }),
+  tr: ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
+    className: cn2("aui-md-tr m-0 border-b p-0 first:border-t", className),
+    ...props
+  }),
+  li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+    className: cn2("aui-md-li leading-relaxed", className),
+    ...props
+  }),
+  strong: ({ className, ...props }) => /* @__PURE__ */ jsx("strong", {
+    className: cn2("aui-md-strong font-semibold", className),
+    ...props
+  }),
+  sup: ({ className, ...props }) => /* @__PURE__ */ jsx("sup", {
+    className: cn2("aui-md-sup text-sm", className),
+    ...props
+  }),
+  pre: ({ className, ...props }) => /* @__PURE__ */ jsx("pre", {
+    className: cn2("aui-md-pre border-border/50 bg-muted/30 overflow-x-auto rounded-t-none rounded-b-md border border-t-0 p-2 text-base leading-relaxed", className),
+    ...props
+  }),
+  code: function Code({ className, ...props }) {
+    const isCodeBlock = useIsMarkdownCodeBlock();
+    return /* @__PURE__ */ jsx("code", {
+      className: cn2(!isCodeBlock && "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-sm", className),
+      ...props
+    });
+  },
+  CodeHeader: MarkdownTextCodeHeader2
+});
+
+export { MarkdownText2, MarkdownTextContainer2, MarkdownTextCodeHeader2 };

package/dist/chunk-q40gqpwh.js

@@ -0,0 +1,41 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  TooltipProvider2,
+  Tooltip2,
+  TooltipTrigger2,
+  TooltipContent2
+} from "./chunk-czg9p52v.js";
+
+// src/components/assistant-ui/elements/TooltipIconButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TooltipIconButton2({
+  children,
+  tooltip,
+  side = "bottom",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider2, {
+    delay: 0,
+    children: /* @__PURE__ */ jsxs(Tooltip2, {
+      children: [
+        /* @__PURE__ */ jsx(TooltipTrigger2, {
+          render: /* @__PURE__ */ jsx(Button2, {
+            variant: "ghost",
+            size: "icon",
+            "aria-label": tooltip,
+            ...props
+          }),
+          children
+        }),
+        /* @__PURE__ */ jsx(TooltipContent2, {
+          side,
+          children: tooltip
+        })
+      ]
+    })
+  });
+}
+
+export { TooltipIconButton2 };

package/dist/chunk-q4264v6h.js

@@ -0,0 +1,123 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  InputGroup2,
+  InputGroupAddon2,
+  InputGroupInput2
+} from "./chunk-1jeg5z55.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ConversationSearch.tsx
+import { ChevronDownIcon, ChevronUpIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function ConversationSearch2({
+  query,
+  hits,
+  activeIndex,
+  onQueryChange,
+  onStep,
+  ...props
+}) {
+  const index = hits.length === 0 ? -1 : Math.min(Math.max(activeIndex, 0), hits.length - 1);
+  const active = index === -1 ? undefined : hits[index];
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ConversationSearch",
+    "data-slot": "conversation-search",
+    className: cn2("flex w-full max-w-sm gap-2"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex min-w-0 flex-1 flex-col gap-2",
+        children: [
+          /* @__PURE__ */ jsxs(InputGroup2, {
+            children: [
+              /* @__PURE__ */ jsx(InputGroupAddon2, {
+                children: /* @__PURE__ */ jsx(SearchIcon, {
+                  "aria-hidden": "true"
+                })
+              }),
+              /* @__PURE__ */ jsx(InputGroupInput2, {
+                value: query,
+                readOnly: !onQueryChange,
+                onChange: (event) => onQueryChange?.(event.target.value),
+                placeholder: "Find in conversation",
+                "aria-label": "Find in conversation"
+              }),
+              /* @__PURE__ */ jsxs(InputGroupAddon2, {
+                align: "inline-end",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: cn2(mono, "text-muted-foreground shrink-0 tabular-nums"),
+                    children: hits.length === 0 ? "0" : `${index + 1}/${hits.length}`
+                  }),
+                  onStep && /* @__PURE__ */ jsxs(Fragment, {
+                    children: [
+                      /* @__PURE__ */ jsx(Button2, {
+                        type: "button",
+                        "aria-label": "Previous match",
+                        onClick: () => onStep(-1),
+                        disabled: hits.length === 0,
+                        variant: "ghost",
+                        size: "icon",
+                        children: /* @__PURE__ */ jsx(ChevronUpIcon, {
+                          "aria-hidden": "true",
+                          "data-icon": "inline-start"
+                        })
+                      }),
+                      /* @__PURE__ */ jsx(Button2, {
+                        type: "button",
+                        "aria-label": "Next match",
+                        onClick: () => onStep(1),
+                        disabled: hits.length === 0,
+                        variant: "ghost",
+                        size: "icon",
+                        children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+                          "aria-hidden": "true",
+                          "data-icon": "inline-start"
+                        })
+                      })
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          active && /* @__PURE__ */ jsxs("div", {
+            className: cn2(field, "fade-in animate-in rounded-md px-3 py-2 text-sm leading-relaxed duration-200"),
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "text-muted-foreground",
+                children: active.before
+              }),
+              /* @__PURE__ */ jsx("mark", {
+                className: "rounded-sm bg-warning/35 px-0.5 text-foreground",
+                children: active.match
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "text-muted-foreground",
+                children: active.after
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "bg-foreground/[0.04] inset-ring-border relative w-1.5 shrink-0 rounded-full inset-ring forced-colors:border",
+        children: hits.map((hit, i) => /* @__PURE__ */ jsx("span", {
+          "aria-hidden": true,
+          className: cn2("absolute inset-x-0 h-1 rounded-full transition-colors duration-200 forced-color-adjust-none", i === index ? "bg-warning forced-colors:bg-[Highlight]" : "bg-warning/35 forced-colors:bg-[CanvasText]"),
+          style: { top: `${hit.position}%` }
+        }, hit.id))
+      })
+    ]
+  });
+}
+
+export { ConversationSearch2 };

package/dist/chunk-q7zc22qp.js

@@ -0,0 +1,77 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/AgentHandoff.tsx
+import { ArrowRightIcon, BotIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AgentHandoff2({
+  from,
+  to,
+  reason,
+  carried,
+  settled,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "AgentHandoff",
+    "data-slot": "agent-handoff",
+    className: cn2(cn2("flex w-full max-w-sm flex-col gap-2"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(field, "text-muted-foreground flex items-center gap-1.5 rounded-full px-2.5 py-1 text-sm transition-opacity duration-500", settled && "border-dashed"),
+            children: [
+              /* @__PURE__ */ jsx(BotIcon, {
+                "aria-hidden": "true",
+                className: cn2("size-3.5")
+              }),
+              from
+            ]
+          }),
+          /* @__PURE__ */ jsx(ArrowRightIcon, {
+            "aria-hidden": "true",
+            className: cn2("size-3.5", settled ? "text-muted-foreground" : "text-primary")
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2("flex items-center gap-1.5 rounded-full px-2.5 py-1 text-sm transition-colors duration-500", settled ? cn2(field, "text-foreground") : "bg-primary/15 text-primary"),
+            children: [
+              /* @__PURE__ */ jsx(BotIcon, {
+                "aria-hidden": "true",
+                className: cn2("size-3.5")
+              }),
+              to
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("p", {
+        className: "text-muted-foreground text-sm leading-relaxed",
+        children: reason
+      }),
+      carried.length > 0 && /* @__PURE__ */ jsxs("div", {
+        className: "flex flex-col gap-1",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2(mono, "text-muted-foreground"),
+            children: "carried over"
+          }),
+          carried.map((item) => /* @__PURE__ */ jsx("span", {
+            className: "text-muted-foreground border-foreground/12 border-s ps-2.5 text-sm leading-relaxed",
+            children: item
+          }, item))
+        ]
+      })
+    ]
+  });
+}
+
+export { AgentHandoff2 };

package/dist/chunk-q9qm7skj.js

@@ -0,0 +1,132 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Card2,
+  CardHeader2,
+  CardTitle2,
+  CardDescription2,
+  CardContent2
+} from "./chunk-fqekyjkh.js";
+import {
+  Chart3,
+  ChartTooltipContent2,
+  ChartTooltip2
+} from "./chunk-82e7fbmq.js";
+import {
+  take
+} from "./chunk-v8ks0cfq.js";
+
+// src/components/assistant-ui/elements/Chart.tsx
+import { AreaChart, Area, LineChart, Line, BarChart, Bar, XAxis, YAxis } from "recharts";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var CONFIG = { amount: { label: "Value", color: "var(--primary)" } };
+function Chart2({
+  label,
+  value,
+  delta,
+  points,
+  visibleCount,
+  variant = "area",
+  trend,
+  upIsGood = true,
+  ...props
+}) {
+  const data = take(points, visibleCount).map((amount, index) => ({ index, amount }));
+  const direction = trend ?? (delta === undefined ? undefined : /\d/.test(delta) && !/[1-9]/.test(delta) ? "flat" : /^\s*[-−–]/.test(delta) ? "down" : "up");
+  const isGood = direction === "up" || direction === "down" ? direction === "up" === upIsGood : undefined;
+  const axes = /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx(XAxis, {
+        dataKey: "index",
+        hide: true,
+        domain: [0, Math.max(1, points.length - 1)],
+        type: "number"
+      }),
+      /* @__PURE__ */ jsx(YAxis, {
+        hide: true,
+        domain: [Math.min(0, ...points), Math.max(1, ...points)]
+      })
+    ]
+  });
+  const tooltip = /* @__PURE__ */ jsx(ChartTooltip2, {
+    content: /* @__PURE__ */ jsx(ChartTooltipContent2, {
+      hideLabel: true
+    }),
+    isAnimationActive: false
+  });
+  return /* @__PURE__ */ jsxs(Card2, {
+    "data-testid": "Chart",
+    className: "w-full max-w-sm",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(CardHeader2, {
+        children: [
+          /* @__PURE__ */ jsx(CardDescription2, {
+            children: label
+          }),
+          /* @__PURE__ */ jsx(CardTitle2, {
+            children: value
+          }),
+          delta !== undefined && /* @__PURE__ */ jsx("span", {
+            "data-trend": direction,
+            className: cn2("text-sm tabular-nums", isGood === undefined ? "text-muted-foreground" : isGood ? "text-success" : "text-destructive"),
+            children: delta
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CardContent2, {
+        children: /* @__PURE__ */ jsx(Chart3, {
+          config: CONFIG,
+          className: "h-24 w-full",
+          initialDimension: { width: 300, height: 96 },
+          children: variant === "bars" ? /* @__PURE__ */ jsxs(BarChart, {
+            accessibilityLayer: true,
+            "aria-label": `${label}: ${value}`,
+            data,
+            children: [
+              axes,
+              tooltip,
+              /* @__PURE__ */ jsx(Bar, {
+                dataKey: "amount",
+                fill: "var(--color-amount)",
+                isAnimationActive: false
+              })
+            ]
+          }) : variant === "line" ? /* @__PURE__ */ jsxs(LineChart, {
+            accessibilityLayer: true,
+            "aria-label": `${label}: ${value}`,
+            data,
+            children: [
+              axes,
+              tooltip,
+              /* @__PURE__ */ jsx(Line, {
+                dataKey: "amount",
+                stroke: "var(--color-amount)",
+                dot: false,
+                isAnimationActive: false
+              })
+            ]
+          }) : /* @__PURE__ */ jsxs(AreaChart, {
+            accessibilityLayer: true,
+            "aria-label": `${label}: ${value}`,
+            data,
+            children: [
+              axes,
+              tooltip,
+              /* @__PURE__ */ jsx(Area, {
+                dataKey: "amount",
+                stroke: "var(--color-amount)",
+                fill: "var(--color-amount)",
+                fillOpacity: 0.15,
+                isAnimationActive: false
+              })
+            ]
+          })
+        })
+      })
+    ]
+  });
+}
+
+export { Chart2 };

package/dist/chunk-qk167mcx.js

@@ -0,0 +1,87 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  ShimmerLabel2
+} from "./chunk-s3wqwhxc.js";
+import {
+  paper
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ImageGeneration.tsx
+import { useState } from "react";
+import { RefreshCwIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImageGeneration2({
+  prompt,
+  generating,
+  image,
+  imageAlt = prompt,
+  onRegenerate,
+  ...props
+}) {
+  const [dimensions, setDimensions] = useState(null);
+  const currentDimensions = dimensions?.source === image ? dimensions : null;
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ImageGeneration",
+    "data-slot": "image-generation",
+    className: "flex w-52 flex-col gap-2",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: cn2(paper, "relative flex aspect-square items-center justify-center overflow-hidden rounded-md"),
+        children: [
+          generating ? /* @__PURE__ */ jsx(ShimmerLabel2, {
+            role: "status",
+            children: "Generating image"
+          }) : image ? /* @__PURE__ */ jsx("img", {
+            src: image,
+            alt: imageAlt,
+            className: "size-full object-cover",
+            onLoad: (event) => setDimensions({
+              source: image,
+              width: event.currentTarget.naturalWidth,
+              height: event.currentTarget.naturalHeight
+            })
+          }) : /* @__PURE__ */ jsx("span", {
+            className: "text-muted-foreground text-sm",
+            children: "No image available"
+          }),
+          !generating && currentDimensions ? /* @__PURE__ */ jsxs("span", {
+            className: "absolute end-1.5 bottom-1.5 rounded-sm bg-background px-1 text-sm text-muted-foreground",
+            children: [
+              currentDimensions.width,
+              " × ",
+              currentDimensions.height
+            ]
+          }) : null
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx("p", {
+            className: "min-w-0 flex-1 truncate text-sm text-muted-foreground",
+            children: prompt
+          }),
+          onRegenerate ? /* @__PURE__ */ jsx(Button2, {
+            variant: "ghost",
+            "aria-label": "Regenerate image",
+            disabled: generating,
+            onClick: onRegenerate,
+            size: "icon",
+            children: /* @__PURE__ */ jsx(RefreshCwIcon, {
+              "aria-hidden": "true",
+              "data-icon": "inline-start"
+            })
+          }) : null
+        ]
+      })
+    ]
+  });
+}
+
+export { ImageGeneration2 };