@alexgorbatchev/shadcn 0.0.12 → 0.0.16

package/dist/chunk-3esarnmt.js

@@ -0,0 +1,248 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Dialog2,
+  DialogContent2,
+  DialogTitle2
+} from "./chunk-zhnwybhq.js";
+import {
+  safeHref
+} from "./chunk-xhtsnwnb.js";
+import {
+  clamp
+} from "./chunk-v8ks0cfq.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ImageGallery.tsx
+import { ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon, ImageOffIcon } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var keyForImage = (image) => `${image.id}\x00${image.src}`;
+function ImageGallery2({ images, maxVisible = 6, onOpen, ...props }) {
+  const [activeId, setActiveId] = useState(null);
+  const [failedImages, setFailedImages] = useState(() => new Set);
+  const triggerRef = useRef(null);
+  const previousRef = useRef(null);
+  const nextRef = useRef(null);
+  const index = images.findIndex((image) => image.id === activeId);
+  if (activeId !== null && index === -1)
+    setActiveId(null);
+  const activeImage = index === -1 ? undefined : images[index];
+  const sourceHref = safeHref(activeImage?.source?.url);
+  const visibleCount = Math.floor(clamp(maxVisible, 1, images.length));
+  const visibleImages = images.slice(0, visibleCount);
+  const close = useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const focusDialog = useCallback((node) => {
+    node?.closest('[role="dialog"]')?.focus();
+  }, []);
+  const show = useCallback((nextIndex) => {
+    const image = images[nextIndex];
+    if (!image)
+      return;
+    if (nextIndex === 0 && previousRef.current?.matches(":focus")) {
+      nextRef.current?.focus();
+    } else if (nextIndex === images.length - 1 && nextRef.current?.matches(":focus")) {
+      previousRef.current?.focus();
+    }
+    setActiveId(image.id);
+  }, [images]);
+  const open = (nextIndex, trigger) => {
+    const image = images[nextIndex];
+    if (!image)
+      return;
+    triggerRef.current = trigger;
+    setActiveId(image.id);
+    onOpen?.(image.id);
+  };
+  const markFailed = (image) => {
+    const key = keyForImage(image);
+    setFailedImages((current) => current.has(key) ? current : new Set(current).add(key));
+  };
+  if (images.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ImageGallery",
+    "data-slot": "image-gallery",
+    className: cn2("@container w-full max-w-md"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "grid grid-cols-2 gap-2 @sm:grid-cols-3",
+        children: visibleImages.map((image, imageIndex) => {
+          const failed = failedImages.has(keyForImage(image));
+          const overflow = imageIndex === visibleCount - 1 && images.length > visibleCount;
+          return /* @__PURE__ */ jsxs("button", {
+            type: "button",
+            "aria-label": `Open image: ${image.alt}`,
+            onClick: (event) => open(imageIndex, event.currentTarget),
+            className: cn2(field, "focus-visible:ring-foreground/30 relative aspect-square overflow-hidden rounded-md transition-colors duration-150 outline-none focus-visible:ring-1 motion-reduce:transition-none"),
+            children: [
+              failed ? /* @__PURE__ */ jsxs("span", {
+                className: "text-muted-foreground flex size-full items-center justify-center",
+                children: [
+                  /* @__PURE__ */ jsx(ImageOffIcon, {
+                    "aria-hidden": "true",
+                    className: cn2("size-4")
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "sr-only",
+                    children: "Image unavailable"
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("img", {
+                src: image.src,
+                alt: image.alt,
+                loading: "lazy",
+                className: "size-full object-cover",
+                onError: () => markFailed(image)
+              }),
+              overflow ? /* @__PURE__ */ jsxs("span", {
+                className: "bg-foreground/65 text-background absolute inset-0 flex items-center justify-center text-base font-medium",
+                children: [
+                  "+",
+                  images.length - visibleCount
+                ]
+              }) : null
+            ]
+          }, image.id);
+        })
+      }),
+      activeImage ? /* @__PURE__ */ jsx(Dialog2, {
+        open: true,
+        onOpenChange: (nextOpen) => {
+          if (!nextOpen)
+            close();
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent2, {
+          size: "wide",
+          "aria-describedby": undefined,
+          finalFocus: triggerRef,
+          onKeyDown: (event) => {
+            if (event.key === "ArrowLeft" && index > 0) {
+              event.preventDefault();
+              show(index - 1);
+            } else if (event.key === "ArrowRight" && index < images.length - 1) {
+              event.preventDefault();
+              show(index + 1);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(DialogTitle2, {
+              className: "sr-only",
+              children: [
+                "Image ",
+                index + 1,
+                " of ",
+                images.length
+              ]
+            }),
+            /* @__PURE__ */ jsx("div", {
+              ref: focusDialog,
+              className: "flex min-h-0 items-center justify-center px-10",
+              children: failedImages.has(keyForImage(activeImage)) ? /* @__PURE__ */ jsxs("div", {
+                className: "text-muted-foreground flex h-[min(75vh,512px)] w-full items-center justify-center",
+                children: [
+                  /* @__PURE__ */ jsx(ImageOffIcon, {
+                    "aria-hidden": "true",
+                    className: cn2("size-4")
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "sr-only",
+                    children: "Image unavailable"
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("img", {
+                src: activeImage.src,
+                alt: activeImage.alt,
+                className: "max-h-[75vh] max-w-full object-contain",
+                onError: () => markFailed(activeImage)
+              })
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              className: "flex min-w-0 items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsx(Button2, {
+                  ref: previousRef,
+                  type: "button",
+                  "aria-label": "Previous image",
+                  disabled: index === 0,
+                  onClick: () => show(index - 1),
+                  variant: "ghost",
+                  size: "icon",
+                  children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
+                    "aria-hidden": "true",
+                    "data-icon": "inline-start"
+                  })
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex min-w-0 flex-1 items-center gap-2 text-sm",
+                  children: [
+                    activeImage.caption ? /* @__PURE__ */ jsx("p", {
+                      className: "text-foreground/75 truncate",
+                      children: activeImage.caption
+                    }) : null,
+                    activeImage.source?.label ? sourceHref ? /* @__PURE__ */ jsxs("a", {
+                      href: sourceHref,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "text-muted-foreground hover:text-foreground/80 flex min-w-0 items-center gap-1 truncate transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx("span", {
+                          className: "truncate",
+                          children: activeImage.source.label
+                        }),
+                        /* @__PURE__ */ jsx(ExternalLinkIcon, {
+                          "aria-hidden": "true",
+                          className: cn2("size-3.5")
+                        }),
+                        /* @__PURE__ */ jsx("span", {
+                          className: "sr-only",
+                          children: "(opens in a new tab)"
+                        })
+                      ]
+                    }) : /* @__PURE__ */ jsx("span", {
+                      className: "text-muted-foreground truncate",
+                      children: activeImage.source.label
+                    }) : null
+                  ]
+                }),
+                /* @__PURE__ */ jsxs("span", {
+                  className: cn2(mono, "text-muted-foreground shrink-0"),
+                  children: [
+                    index + 1,
+                    " / ",
+                    images.length
+                  ]
+                }),
+                /* @__PURE__ */ jsx(Button2, {
+                  ref: nextRef,
+                  type: "button",
+                  "aria-label": "Next image",
+                  disabled: index === images.length - 1,
+                  onClick: () => show(index + 1),
+                  variant: "ghost",
+                  size: "icon",
+                  children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+                    "aria-hidden": "true",
+                    "data-icon": "inline-start"
+                  })
+                })
+              ]
+            })
+          ]
+        })
+      }) : null
+    ]
+  });
+}
+
+export { ImageGallery2 };

package/dist/chunk-3g8p9apn.js

@@ -0,0 +1,24 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+
+// src/components/assistant-ui/elements/ReasoningFade.tsx
+import { jsx } from "react/jsx-runtime";
+function ReasoningFade2({ side = "bottom", className, ...props }) {
+  if (side === "top") {
+    return /* @__PURE__ */ jsx("div", {
+      "data-testid": "ReasoningFade",
+      "data-slot": "reasoning-fade",
+      className: cn2(cn2("aui-reasoning-fade pointer-events-none absolute inset-x-0 top-0 z-10 h-8", "bg-[linear-gradient(to_bottom,var(--color-background),transparent)]", "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_bottom,color-mix(in_oklab,var(--color-muted)_50%,var(--color-background)),transparent)]", "fade-in-0 animate-in", "animation-duration-(--animation-duration)"), className),
+      ...props
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    "data-testid": "ReasoningFade",
+    "data-slot": "reasoning-fade",
+    className: cn2(cn2("aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8", "bg-[linear-gradient(to_top,var(--color-background),transparent)]", "group-data-[variant=muted]/reasoning-root:bg-[linear-gradient(to_top,color-mix(in_oklab,var(--color-muted)_50%,var(--color-background)),transparent)]", "fade-in-0 animate-in", "animation-duration-(--animation-duration)"), className),
+    ...props
+  });
+}
+
+export { ReasoningFade2 };

package/dist/chunk-3hvpcsb4.js

@@ -0,0 +1,184 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Input2
+} from "./chunk-59p19t57.js";
+import {
+  FieldSet2,
+  FieldLegend2,
+  FieldGroup2,
+  Field2,
+  FieldLabel2
+} from "./chunk-6jpz5geq.js";
+import {
+  RadioGroup2,
+  RadioGroupItem2
+} from "./chunk-wndqbss9.js";
+import {
+  Card2,
+  CardHeader2,
+  CardTitle2,
+  CardDescription2,
+  CardContent2,
+  CardFooter2
+} from "./chunk-fqekyjkh.js";
+import {
+  Switch2
+} from "./chunk-8ye0k6z7.js";
+import {
+  useReceiptFocus
+} from "./chunk-vxvaaptq.js";
+
+// src/components/assistant-ui/elements/ElicitationForm.tsx
+import { useId } from "react";
+import { CheckIcon, PlugIcon, XIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function ElicitationForm2({
+  server,
+  message,
+  fields,
+  state,
+  onFieldChange,
+  onAccept,
+  onDecline,
+  ...props
+}) {
+  const prefix = useId();
+  const { receiptRef, focusHandlers } = useReceiptFocus(props);
+  const interactive = state === "request" && onFieldChange !== undefined;
+  const missingRequired = fields.some((item) => item.kind !== "toggle" && item.required === true && !item.value.trim());
+  return /* @__PURE__ */ jsxs(Card2, {
+    "data-testid": "ElicitationForm",
+    className: "w-full max-w-sm",
+    ...props,
+    ...focusHandlers,
+    children: [
+      /* @__PURE__ */ jsxs(CardHeader2, {
+        children: [
+          /* @__PURE__ */ jsxs(CardTitle2, {
+            className: "flex items-center gap-control-gap",
+            children: [
+              /* @__PURE__ */ jsx(PlugIcon, {
+                "aria-hidden": "true",
+                className: "size-4"
+              }),
+              server
+            ]
+          }),
+          /* @__PURE__ */ jsxs(CardDescription2, {
+            children: [
+              "needs input · ",
+              message
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CardContent2, {
+        children: /* @__PURE__ */ jsx(FieldGroup2, {
+          children: fields.map((item, index) => {
+            const inputId = `${prefix}-${index}`;
+            if (item.kind === "choice")
+              return /* @__PURE__ */ jsxs(FieldSet2, {
+                children: [
+                  /* @__PURE__ */ jsxs(FieldLegend2, {
+                    variant: "label",
+                    children: [
+                      item.label,
+                      item.required ? " *" : ""
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx(RadioGroup2, {
+                    "aria-label": item.label,
+                    name: `${prefix}-${item.name}`,
+                    value: item.value,
+                    disabled: !interactive,
+                    required: item.required,
+                    onValueChange: (value) => {
+                      if (typeof value === "string")
+                        onFieldChange?.(item.name, value);
+                    },
+                    children: item.options?.map((option, optionIndex) => /* @__PURE__ */ jsxs(Field2, {
+                      orientation: "horizontal",
+                      children: [
+                        /* @__PURE__ */ jsx(RadioGroupItem2, {
+                          id: `${inputId}-${optionIndex}`,
+                          value: option
+                        }),
+                        /* @__PURE__ */ jsx(FieldLabel2, {
+                          htmlFor: `${inputId}-${optionIndex}`,
+                          children: option
+                        })
+                      ]
+                    }, option))
+                  })
+                ]
+              }, item.name);
+            return /* @__PURE__ */ jsxs(Field2, {
+              children: [
+                /* @__PURE__ */ jsxs(FieldLabel2, {
+                  htmlFor: inputId,
+                  children: [
+                    item.label,
+                    item.required ? " *" : ""
+                  ]
+                }),
+                item.kind === "toggle" ? /* @__PURE__ */ jsx(Switch2, {
+                  id: inputId,
+                  checked: item.value === "true",
+                  disabled: !interactive,
+                  onCheckedChange: (checked) => onFieldChange?.(item.name, String(checked))
+                }) : /* @__PURE__ */ jsx(Input2, {
+                  id: inputId,
+                  value: item.value,
+                  required: item.required,
+                  readOnly: !interactive,
+                  onChange: (event) => onFieldChange?.(item.name, event.currentTarget.value)
+                })
+              ]
+            }, item.name);
+          })
+        })
+      }),
+      /* @__PURE__ */ jsx(CardFooter2, {
+        className: "justify-end gap-control-gap",
+        children: state === "request" ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx(Button2, {
+              variant: "ghost",
+              onClick: onDecline,
+              disabled: !onDecline,
+              children: "Decline"
+            }),
+            /* @__PURE__ */ jsx(Button2, {
+              variant: "default",
+              onClick: onAccept,
+              disabled: missingRequired || !onAccept,
+              children: "Send"
+            })
+          ]
+        }) : /* @__PURE__ */ jsxs("span", {
+          ref: receiptRef,
+          role: "status",
+          tabIndex: -1,
+          className: "flex items-center gap-1 text-sm text-muted-foreground",
+          children: [
+            state === "accepted" ? /* @__PURE__ */ jsx(CheckIcon, {
+              "aria-hidden": "true",
+              className: cn2("size-4")
+            }) : /* @__PURE__ */ jsx(XIcon, {
+              "aria-hidden": "true",
+              className: cn2("size-4")
+            }),
+            state === "accepted" ? `Sent to ${server}` : "Declined"
+          ]
+        })
+      })
+    ]
+  });
+}
+
+export { ElicitationForm2 };

package/dist/chunk-3kp7kvdb.js

@@ -0,0 +1,100 @@
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  InputGroup2,
+  InputGroupAddon2,
+  InputGroupInput2
+} from "./chunk-1jeg5z55.js";
+
+// src/components/assistant-ui/elements/MobileComposer.tsx
+import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MobileComposer2({
+  value,
+  keyboardOpen,
+  running,
+  actions,
+  onAction,
+  onAttach,
+  onValueChange,
+  onSend,
+  onStop,
+  onFocus,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "MobileComposer",
+    className: "flex w-full max-w-sm flex-col gap-control-gap border-t border-border bg-background p-panel",
+    ...props,
+    children: [
+      !keyboardOpen && /* @__PURE__ */ jsx("div", {
+        className: "flex gap-control-gap overflow-x-auto",
+        children: actions.map((action) => /* @__PURE__ */ jsx(Button2, {
+          variant: "outline",
+          size: "sm",
+          disabled: !onAction,
+          onClick: () => onAction?.(action),
+          children: action
+        }, action))
+      }),
+      /* @__PURE__ */ jsxs(InputGroup2, {
+        children: [
+          /* @__PURE__ */ jsx(InputGroupAddon2, {
+            align: "inline-start",
+            children: /* @__PURE__ */ jsx(Button2, {
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": "Add an attachment",
+              disabled: !onAttach,
+              onClick: onAttach,
+              children: /* @__PURE__ */ jsx(PlusIcon, {
+                "aria-hidden": "true"
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx(InputGroupInput2, {
+            value,
+            readOnly: !onValueChange,
+            onChange: (event) => onValueChange?.(event.target.value),
+            onFocus,
+            onKeyDown: (event) => {
+              if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
+                return;
+              event.preventDefault();
+              if (!running && value !== "")
+                onSend?.();
+            },
+            placeholder: "Message",
+            "aria-label": "Message"
+          }),
+          /* @__PURE__ */ jsxs(InputGroupAddon2, {
+            align: "inline-end",
+            children: [
+              value === "" && /* @__PURE__ */ jsx(MicIcon, {
+                "aria-hidden": "true"
+              }),
+              (onSend || onStop) && /* @__PURE__ */ jsx(Button2, {
+                size: "icon-sm",
+                "aria-label": running ? "Stop" : "Send",
+                onClick: running ? onStop : onSend,
+                disabled: running ? !onStop : !onSend || value === "",
+                children: running ? /* @__PURE__ */ jsx(SquareIcon, {
+                  "aria-hidden": "true"
+                }) : /* @__PURE__ */ jsx(ArrowUpIcon, {
+                  "aria-hidden": "true"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      keyboardOpen && /* @__PURE__ */ jsx("span", {
+        className: "text-center text-sm text-muted-foreground",
+        children: "return to send"
+      })
+    ]
+  });
+}
+
+export { MobileComposer2 };

package/dist/chunk-3ptcdy6g.js

@@ -0,0 +1,99 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Progress2
+} from "./chunk-5j39rehg.js";
+import {
+  pct,
+  progressOf
+} from "./chunk-v8ks0cfq.js";
+import {
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/AgentPlan.tsx
+import { CheckIcon, Loader2Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AgentPlan2({ steps, activeIndex, title = "Plan", ...props }) {
+  const total = steps.length;
+  const completed = progressOf(activeIndex, total);
+  const allDone = completed >= total;
+  const progress = pct(completed, total);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "AgentPlan",
+    "data-slot": "agent-plan",
+    className: cn2("flex w-full max-w-sm flex-col gap-3"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "text-base font-medium",
+            children: title
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(mono, "text-muted-foreground tabular-nums"),
+            children: [
+              completed,
+              " of ",
+              total
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(Progress2, {
+        "aria-label": `${title} progress`,
+        value: progress,
+        "aria-valuetext": `${completed} of ${total} steps`
+      }),
+      /* @__PURE__ */ jsx("ul", {
+        className: "flex flex-col gap-2.5",
+        children: steps.map((step, i) => {
+          const item = typeof step === "string" ? { label: step } : step;
+          const done = allDone || i < completed;
+          const active = !allDone && i === completed;
+          const status = done ? "done" : active ? "in progress" : "not started";
+          return /* @__PURE__ */ jsxs("li", {
+            className: cn2("flex gap-2.5 text-base", active && item.description ? "items-start" : "items-center"),
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "flex size-4 shrink-0 items-center justify-center",
+                children: done ? /* @__PURE__ */ jsx(CheckIcon, {
+                  "aria-hidden": "true",
+                  className: cn2("size-4")
+                }) : active ? /* @__PURE__ */ jsx(Loader2Icon, {
+                  "aria-hidden": "true",
+                  className: cn2("size-4", "animate-spin motion-reduce:animate-none")
+                }) : /* @__PURE__ */ jsx("span", {
+                  "aria-hidden": true,
+                  className: "bg-foreground/15 inset-ring-border size-1.5 rounded-full inset-ring forced-colors:border"
+                })
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: "min-w-0",
+                children: [
+                  /* @__PURE__ */ jsx("span", {
+                    className: cn2(done && "text-muted-foreground", active && "text-foreground/90", !done && !active && "text-muted-foreground"),
+                    children: item.label
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "sr-only",
+                    children: ` ${status}`
+                  }),
+                  active && item.description ? /* @__PURE__ */ jsx("span", {
+                    className: "text-muted-foreground mt-0.5 block text-sm",
+                    children: item.description
+                  }) : null
+                ]
+              })
+            ]
+          }, typeof step === "string" ? i : step.id ?? i);
+        })
+      })
+    ]
+  });
+}
+
+export { AgentPlan2 };