@alexgorbatchev/shadcn 0.0.12 → 0.0.17

package/dist/chunk-gfm2arhj.js

@@ -0,0 +1,165 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/assistant-ui/native/ComposerTriggerPopover.tsx
+import { memo, useRef } from "react";
+import {
+  ComposerPrimitive,
+  defaultDirectiveFormatter
+} from "@assistant-ui/react";
+import { ChevronLeftIcon, ChevronRightIcon, SparklesIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveIcon(iconKey, iconMap, fallback) {
+  if (iconKey && iconMap?.[iconKey])
+    return iconMap[iconKey];
+  return fallback;
+}
+var Categories = ({ iconMap, fallbackIcon, emptyLabel }) => /* @__PURE__ */ jsx(ComposerPrimitive.TriggerPopoverCategories, {
+  children: (categories) => /* @__PURE__ */ jsxs("div", {
+    "data-slot": "composer-trigger-popover-categories",
+    className: "flex flex-col py-1",
+    children: [
+      categories.map((cat) => {
+        const CategoryGlyph = resolveIcon(cat.id, iconMap, fallbackIcon);
+        return /* @__PURE__ */ jsxs(ComposerPrimitive.TriggerPopoverCategoryItem, {
+          categoryId: cat.id,
+          render: /* @__PURE__ */ jsx("button", {
+            className: "hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm transition-colors outline-none"
+          }),
+          children: [
+            /* @__PURE__ */ jsxs("span", {
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx(CategoryGlyph, {
+                  "aria-hidden": "true",
+                  className: "size-4 shrink-0 text-muted-foreground"
+                }),
+                cat.label
+              ]
+            }),
+            /* @__PURE__ */ jsx(ChevronRightIcon, {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 text-muted-foreground"
+            })
+          ]
+        }, cat.id);
+      }),
+      categories.length === 0 && /* @__PURE__ */ jsx("div", {
+        className: "text-muted-foreground px-3 py-2 text-sm",
+        children: emptyLabel
+      })
+    ]
+  })
+});
+var Items = ({ iconMap, fallbackIcon, backLabel, emptyLabel, loadingLabel, isLoading }) => {
+  return /* @__PURE__ */ jsx(ComposerPrimitive.TriggerPopoverItems, {
+    children: (items) => /* @__PURE__ */ jsxs("div", {
+      "data-slot": "composer-trigger-popover-items",
+      className: "flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxs(ComposerPrimitive.TriggerPopoverBack, {
+          render: /* @__PURE__ */ jsx("button", {
+            className: "text-muted-foreground hover:bg-accent flex cursor-pointer items-center gap-1.5 border-b px-3 py-2 text-sm tracking-wide uppercase transition-colors"
+          }),
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeftIcon, {
+              "aria-hidden": "true",
+              className: "size-3.5 shrink-0"
+            }),
+            backLabel
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: "py-1",
+          children: [
+            items.map((item, index) => {
+              const iconKey = typeof item.metadata?.icon === "string" ? item.metadata.icon : undefined;
+              const Icon = resolveIcon(iconKey, iconMap, fallbackIcon);
+              return /* @__PURE__ */ jsxs(ComposerPrimitive.TriggerPopoverItem, {
+                item,
+                index,
+                render: /* @__PURE__ */ jsx("button", {
+                  className: "hover:bg-accent focus:bg-accent data-[highlighted]:bg-accent flex w-full cursor-pointer flex-col items-start gap-0.5 px-3 py-2 text-start transition-colors outline-none"
+                }),
+                children: [
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "flex items-center gap-2 text-sm font-medium",
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, {
+                        className: "text-primary size-3.5"
+                      }),
+                      item.label
+                    ]
+                  }),
+                  item.description && /* @__PURE__ */ jsx("span", {
+                    className: "text-muted-foreground ms-5.5 text-sm leading-tight",
+                    children: item.description
+                  })
+                ]
+              }, item.id);
+            }),
+            items.length === 0 && /* @__PURE__ */ jsx("div", {
+              className: "text-muted-foreground px-3 py-2 text-sm",
+              children: isLoading ? loadingLabel : emptyLabel
+            })
+          ]
+        })
+      ]
+    })
+  });
+};
+var ComposerTriggerPopoverImpl = ({
+  iconMap,
+  fallbackIcon = SparklesIcon,
+  backLabel = "Back",
+  emptyCategoriesLabel = "No items available",
+  emptyItemsLabel = "No matching items",
+  loadingLabel = "Loading…",
+  isLoading = false,
+  className,
+  directive,
+  action,
+  ...props
+}) => {
+  const warnedRef = useRef(false);
+  if (!warnedRef.current && Boolean(directive) === Boolean(action)) {
+    warnedRef.current = true;
+    console.warn("[assistant-ui] ComposerTriggerPopover requires exactly one of `directive` or `action` props.");
+  }
+  return /* @__PURE__ */ jsxs(ComposerPrimitive.TriggerPopover, {
+    "data-slot": "composer-trigger-popover",
+    isLoading,
+    ...props,
+    render: /* @__PURE__ */ jsx("div", {
+      className: cn2("aui-composer-trigger-popover bg-popover text-popover-foreground absolute start-0 bottom-full z-50 mb-2 w-64 overflow-hidden rounded-md border", className)
+    }),
+    children: [
+      directive ? /* @__PURE__ */ jsx(ComposerPrimitive.TriggerPopover.Directive, {
+        formatter: directive.formatter ?? defaultDirectiveFormatter,
+        onInserted: directive.onInserted
+      }) : action ? /* @__PURE__ */ jsx(ComposerPrimitive.TriggerPopover.Action, {
+        formatter: action.formatter ?? defaultDirectiveFormatter,
+        onExecute: action.onExecute,
+        removeOnExecute: action.removeOnExecute
+      }) : null,
+      /* @__PURE__ */ jsx(Categories, {
+        iconMap,
+        fallbackIcon,
+        emptyLabel: emptyCategoriesLabel
+      }),
+      /* @__PURE__ */ jsx(Items, {
+        iconMap,
+        fallbackIcon,
+        backLabel,
+        emptyLabel: emptyItemsLabel,
+        loadingLabel,
+        isLoading
+      })
+    ]
+  });
+};
+ComposerTriggerPopoverImpl.displayName = "ComposerTriggerPopover";
+var ComposerTriggerPopover2 = memo(ComposerTriggerPopoverImpl);
+
+export { ComposerTriggerPopover2 };

package/dist/chunk-gg39sggp.js

@@ -0,0 +1,59 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/Avatar.tsx
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { jsx } from "react/jsx-runtime";
+function Avatar2({ density, className, size = "default", shape = "circle", ...props }) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
+    "data-density": density,
+    "data-slot": "avatar",
+    "data-size": size,
+    "data-shape": shape,
+    className: (state) => cn2("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border  data-[size=lg]:size-10 data-[size=sm]:size-6 ", "data-[shape=square]:rounded-none data-[shape=square]:after:rounded-none", "data-[size=preview]:size-64", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function AvatarImage2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+    "data-density": density,
+    "data-slot": "avatar-image",
+    className: (state) => cn2("aspect-square size-full rounded-full object-cover group-data-[shape=square]/avatar:rounded-none", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function AvatarFallback2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+    "data-density": density,
+    "data-slot": "avatar-fallback",
+    className: (state) => cn2("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs group-data-[shape=square]/avatar:rounded-none", typeof className === "function" ? className(state) : className),
+    ...props
+  });
+}
+function AvatarBadge2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("span", {
+    "data-density": density,
+    "data-slot": "avatar-badge",
+    className: cn2("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+    ...props
+  });
+}
+function AvatarGroup2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-density": density,
+    "data-slot": "avatar-group",
+    className: cn2("group/avatar-group flex [&>*+*]:-ms-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+    ...props
+  });
+}
+function AvatarGroupCount2({ density, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-density": density,
+    "data-slot": "avatar-group-count",
+    className: cn2("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+    ...props
+  });
+}
+
+export { Avatar2, AvatarImage2, AvatarFallback2, AvatarBadge2, AvatarGroup2, AvatarGroupCount2 };

package/dist/chunk-gknaq8ep.js

@@ -0,0 +1,86 @@
+import {
+  GeoMap2
+} from "./chunk-ds65prb9.js";
+import {
+  MermaidDiagram3
+} from "./chunk-yn3e9w1j.js";
+
+// src/components/assistant-ui/elements/GenerativeUi.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { defaultGenerativeUILibrary, renderGenerativeUI } from "@assistant-ui/generative-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var markdownBase = defaultGenerativeUILibrary.Markdown;
+var pinsOf = (places) => (Array.isArray(places) ? places : []).flatMap((place, index) => {
+  if (place === null || typeof place !== "object")
+    return [];
+  if (!("label" in place) || !("lat" in place) || !("lng" in place))
+    return [];
+  const { label, lat, lng } = place;
+  const detail = "detail" in place ? place.detail : undefined;
+  return typeof label === "string" && typeof lat === "number" && typeof lng === "number" ? [
+    {
+      id: String(index),
+      label,
+      lat,
+      lng,
+      description: typeof detail === "string" ? detail : undefined
+    }
+  ] : [];
+});
+var styledGenerativeUILibrary2 = {
+  ...defaultGenerativeUILibrary,
+  Markdown: {
+    properties: markdownBase.properties,
+    streamProperties: markdownBase.streamProperties,
+    description: "A markdown string, rendered with GitHub-flavored markdown.",
+    render: ({ value, children }) => /* @__PURE__ */ jsxs("div", {
+      "data-aui": "markdown",
+      children: [
+        /* @__PURE__ */ jsx(ReactMarkdown, {
+          remarkPlugins: [remarkGfm],
+          children: value ?? ""
+        }),
+        children
+      ]
+    })
+  },
+  Diagram: {
+    ...defaultGenerativeUILibrary.Diagram,
+    render: ({ code, title, $status }) => /* @__PURE__ */ jsxs("figure", {
+      "data-aui": "diagram",
+      children: [
+        /* @__PURE__ */ jsx(MermaidDiagram3, {
+          code: typeof code === "string" ? code : "",
+          streaming: $status === "streaming"
+        }),
+        typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ jsx("figcaption", {
+          "data-aui": "diagram-title",
+          children: title
+        }) : null
+      ]
+    })
+  },
+  Map: {
+    ...defaultGenerativeUILibrary.Map,
+    render: ({ places, route }) => {
+      const pins = pinsOf(places);
+      return /* @__PURE__ */ jsx(GeoMap2, {
+        "data-aui": "map",
+        variant: "embedded",
+        places: pins,
+        routes: route && pins.length > 1 ? [
+          {
+            id: "route",
+            points: pins.map(({ lat, lng }) => [lat, lng])
+          }
+        ] : undefined
+      });
+    }
+  }
+};
+function GenerativeUi2({ node, context }) {
+  return renderGenerativeUI(node, styledGenerativeUILibrary2, context);
+}
+
+export { styledGenerativeUILibrary2, GenerativeUi2 };

package/dist/chunk-gt8m0zeq.js

@@ -0,0 +1,112 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Popover2,
+  PopoverTrigger2,
+  PopoverContent2,
+  PopoverTitle2
+} from "./chunk-x7z9jzyf.js";
+
+// src/components/assistant-ui/native/MessageTiming.tsx
+import { useMessageTiming } from "@assistant-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var formatTimingMs = (ms) => {
+  if (ms < 1000)
+    return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+};
+function MessageTiming3({
+  className,
+  side = "right"
+}) {
+  const timing = useMessageTiming();
+  if (timing?.totalStreamTime === undefined)
+    return null;
+  return /* @__PURE__ */ jsxs(Popover2, {
+    children: [
+      /* @__PURE__ */ jsx(PopoverTrigger2, {
+        openOnHover: true,
+        render: /* @__PURE__ */ jsx("button", {
+          type: "button",
+          "data-slot": "message-timing-trigger",
+          "aria-label": "Message timing",
+          className: cn2("text-muted-foreground hover:bg-accent hover:text-accent-foreground flex h-control-sm items-center rounded-sm px-control-x font-mono text-sm tabular-nums transition-colors", className)
+        }),
+        children: formatTimingMs(timing.totalStreamTime)
+      }),
+      /* @__PURE__ */ jsxs(PopoverContent2, {
+        side,
+        sideOffset: 8,
+        "data-slot": "message-timing-popover",
+        children: [
+          /* @__PURE__ */ jsx(PopoverTitle2, {
+            children: "Message timing"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "grid min-w-35 gap-1.5 text-sm",
+            children: [
+              timing.firstTokenTime !== undefined && /* @__PURE__ */ jsxs("div", {
+                className: "flex items-center justify-between gap-4",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "text-muted-foreground",
+                    children: "First token"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "font-mono tabular-nums",
+                    children: formatTimingMs(timing.firstTokenTime)
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "flex items-center justify-between gap-4",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "text-muted-foreground",
+                    children: "Total"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "font-mono tabular-nums",
+                    children: formatTimingMs(timing.totalStreamTime)
+                  })
+                ]
+              }),
+              timing.tokensPerSecond !== undefined && /* @__PURE__ */ jsxs("div", {
+                className: "flex items-center justify-between gap-4",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "text-muted-foreground",
+                    children: "Speed"
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    className: "font-mono tabular-nums",
+                    children: [
+                      timing.tokensPerSecond.toFixed(1),
+                      " tok/s"
+                    ]
+                  })
+                ]
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                className: "flex items-center justify-between gap-4",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: "text-muted-foreground",
+                    children: "Chunks"
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "font-mono tabular-nums",
+                    children: timing.totalChunks
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { MessageTiming3 };

package/dist/chunk-gyg2s982.js

@@ -0,0 +1,143 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  useReceiptFocus
+} from "./chunk-vxvaaptq.js";
+
+// src/components/assistant-ui/elements/ApprovalCard.tsx
+import { useId } from "react";
+import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var receiptText = {
+  running: "Approved, running",
+  done: "Finished",
+  denied: "Denied"
+};
+function ApprovalCard2({
+  state,
+  title,
+  subtitle,
+  command,
+  description,
+  details,
+  variant = "default",
+  icon,
+  onAllowOnce,
+  onAlwaysAllow,
+  onDeny,
+  allowOnceLabel = "Allow once",
+  alwaysAllowLabel = "Always allow",
+  denyLabel = "Deny",
+  statusLabel,
+  ...props
+}) {
+  const titleId = useId();
+  const descriptionId = useId();
+  const { receiptRef, focusHandlers } = useReceiptFocus(props);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ...focusHandlers,
+    role: "group",
+    "data-testid": "ApprovalCard",
+    "data-slot": "approval-card",
+    "data-variant": variant,
+    "aria-labelledby": titleId,
+    "aria-describedby": description ? descriptionId : undefined,
+    className: "flex w-full max-w-sm flex-col gap-2 rounded-md border border-frame-edge bg-card p-2 text-card-foreground shadow-frame",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [
+          icon ?? /* @__PURE__ */ jsx(TerminalIcon, {
+            "aria-hidden": "true",
+            className: variant === "destructive" ? "size-4 text-destructive" : "size-4"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "flex min-w-0 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("p", {
+                id: titleId,
+                className: "text-lg font-medium",
+                children: title
+              }),
+              /* @__PURE__ */ jsx("p", {
+                className: "text-sm text-muted-foreground",
+                children: subtitle
+              })
+            ]
+          })
+        ]
+      }),
+      description ? /* @__PURE__ */ jsx("p", {
+        id: descriptionId,
+        className: "text-base",
+        children: description
+      }) : null,
+      command ? /* @__PURE__ */ jsx("pre", {
+        className: "rounded-sm border border-border bg-secondary p-2 text-base whitespace-pre-wrap break-words",
+        children: command
+      }) : null,
+      details?.length ? /* @__PURE__ */ jsx("dl", {
+        className: "flex flex-col gap-1 rounded-sm border border-border bg-secondary p-2",
+        children: details.map((detail, index) => /* @__PURE__ */ jsxs("div", {
+          className: "grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-2 text-base",
+          children: [
+            /* @__PURE__ */ jsx("dt", {
+              className: "text-muted-foreground",
+              children: detail.label
+            }),
+            /* @__PURE__ */ jsx("dd", {
+              className: "break-words",
+              children: detail.value
+            })
+          ]
+        }, `${detail.label}-${index}`))
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: "flex min-h-5 flex-wrap items-center justify-end gap-1",
+        children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            onDeny ? /* @__PURE__ */ jsx(Button2, {
+              variant: "ghost",
+              onClick: onDeny,
+              children: denyLabel
+            }) : null,
+            onAlwaysAllow ? /* @__PURE__ */ jsx(Button2, {
+              variant: "outline",
+              onClick: onAlwaysAllow,
+              children: alwaysAllowLabel
+            }) : null,
+            onAllowOnce ? /* @__PURE__ */ jsx(Button2, {
+              variant: variant === "destructive" ? "destructive" : "default",
+              onClick: onAllowOnce,
+              children: allowOnceLabel
+            }) : null
+          ]
+        }) : /* @__PURE__ */ jsxs("div", {
+          ref: receiptRef,
+          tabIndex: -1,
+          role: "status",
+          className: "flex items-center gap-1 text-base text-muted-foreground",
+          children: [
+            state === "running" ? /* @__PURE__ */ jsx(Loader2Icon, {
+              "aria-hidden": "true",
+              className: "size-4 animate-spin motion-reduce:animate-none"
+            }) : null,
+            state === "denied" ? /* @__PURE__ */ jsx(XIcon, {
+              "aria-hidden": "true",
+              className: "size-4"
+            }) : null,
+            state === "done" ? /* @__PURE__ */ jsx(CheckIcon, {
+              "aria-hidden": "true",
+              className: "size-4 text-success"
+            }) : null,
+            statusLabel ?? receiptText[state]
+          ]
+        }, state)
+      })
+    ]
+  });
+}
+
+export { ApprovalCard2 };