@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/chunk-tetvt0c3.js

@@ -0,0 +1,161 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  InputGroup2,
+  InputGroupAddon2,
+  InputGroupInput2
+} from "./chunk-1jeg5z55.js";
+import {
+  paper,
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/PromptLibrary.tsx
+import { useId } from "react";
+import { BookmarkIcon } from "lucide-react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function PromptLibrary2({
+  prompts,
+  query,
+  selectedId,
+  onQueryChange,
+  onSelect,
+  onInsert,
+  className,
+  ...props
+}) {
+  const listId = useId();
+  const optionId = (id) => `${listId}-${id}`;
+  const matches = prompts.filter((prompt) => prompt.name.toLowerCase().includes(query.toLowerCase()));
+  const selected = matches.find((prompt) => prompt.id === selectedId);
+  const move = (delta) => {
+    if (matches.length === 0)
+      return;
+    const at = matches.findIndex((prompt) => prompt.id === selectedId);
+    const from = at === -1 ? delta > 0 ? -1 : 0 : at;
+    const next = matches[(from + delta + matches.length) % matches.length];
+    if (next && onSelect)
+      onSelect(next.id);
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
+      return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "Enter" && selected && onInsert) {
+      event.preventDefault();
+      onInsert(selected.id);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "PromptLibrary",
+    "data-slot": "prompt-library",
+    className: cn2(cn2(paper, "flex w-full max-w-sm flex-col gap-2 rounded-md p-3"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs(InputGroup2, {
+        children: [
+          /* @__PURE__ */ jsx(InputGroupAddon2, {
+            children: /* @__PURE__ */ jsx(BookmarkIcon, {
+              "aria-hidden": "true"
+            })
+          }),
+          /* @__PURE__ */ jsx(InputGroupInput2, {
+            value: query,
+            onChange: (event) => onQueryChange?.(event.target.value),
+            onKeyDown,
+            placeholder: "Search prompts",
+            "aria-label": "Search saved prompts",
+            role: "combobox",
+            "aria-expanded": matches.length > 0,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": selected ? optionId(selected.id) : undefined
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        id: listId,
+        role: "listbox",
+        "aria-label": "Saved prompts",
+        className: "flex flex-col",
+        children: matches.map((prompt) => {
+          const className = cn2("flex items-center gap-2 rounded-md px-2 py-1.5 text-start transition-colors", prompt.id === selectedId ? "bg-foreground/[0.05]" : onSelect || onInsert ? "hover:bg-foreground/[0.03]" : undefined);
+          const content = /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: "min-w-0 flex-1 truncate text-base",
+                children: prompt.name
+              }),
+              prompt.variables.length > 0 && /* @__PURE__ */ jsx("span", {
+                className: cn2(mono, "text-muted-foreground shrink-0"),
+                children: `${prompt.variables.length} ${prompt.variables.length === 1 ? "var" : "vars"}`
+              })
+            ]
+          });
+          return onSelect || onInsert ? /* @__PURE__ */ jsx(Button2, {
+            id: optionId(prompt.id),
+            type: "button",
+            role: "option",
+            tabIndex: onSelect ? -1 : 0,
+            "aria-selected": prompt.id === selectedId,
+            onMouseDown: onSelect ? (event) => event.preventDefault() : undefined,
+            onClick: (event) => {
+              if (onSelect)
+                onSelect(prompt.id);
+              else if (event.detail <= 1)
+                onInsert?.(prompt.id);
+            },
+            onDoubleClick: onSelect && onInsert ? () => onInsert(prompt.id) : undefined,
+            variant: "ghost",
+            align: "start",
+            size: "content",
+            fullWidth: true,
+            children: content
+          }, prompt.id) : /* @__PURE__ */ jsx("div", {
+            id: optionId(prompt.id),
+            role: "option",
+            "aria-selected": prompt.id === selectedId,
+            className,
+            children: content
+          }, prompt.id);
+        })
+      }),
+      matches.length === 0 && /* @__PURE__ */ jsxs("span", {
+        className: "text-muted-foreground block px-2 py-3 text-center text-sm break-words",
+        children: [
+          "Nothing matches “",
+          query,
+          "”"
+        ]
+      }),
+      selected && /* @__PURE__ */ jsxs("div", {
+        className: cn2(field, "fade-in animate-in flex flex-col gap-2 rounded-md p-2.5 duration-200"),
+        children: [
+          /* @__PURE__ */ jsx("p", {
+            className: "text-muted-foreground text-sm leading-relaxed break-words",
+            children: selected.body
+          }),
+          selected.variables.length > 0 && /* @__PURE__ */ jsx("div", {
+            className: "flex flex-wrap gap-1",
+            children: selected.variables.map((variable) => /* @__PURE__ */ jsx("span", {
+              className: cn2(mono, "bg-background/70 text-muted-foreground rounded px-1.5 py-0.5"),
+              children: `{${variable}}`
+            }, variable))
+          })
+        ]
+      })
+    ]
+  });
+}
+
+export { PromptLibrary2 };

package/dist/chunk-tsekdy3w.js

@@ -0,0 +1,449 @@
+import {
+  useResolvedPortalContainer
+} from "./chunk-dtkw8m6d.js";
+import {
+  useDensity
+} from "./chunk-e6hk39ev.js";
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "./chunk-73rkr9ct.js";
+import {
+  Input2
+} from "./chunk-59p19t57.js";
+import {
+  Skeleton2
+} from "./chunk-d70rcwk7.js";
+
+// src/components/assistant-ui/hooks/useThreadListGroups.ts
+import { useMemo } from "react";
+import { useAuiState } from "@assistant-ui/react";
+
+// src/components/assistant-ui/utils/groupThreads.ts
+function groupThreads(threadIds, threadItems, searchQuery, startOfToday) {
+  const query = searchQuery.trim().toLowerCase();
+  const itemsById = new Map(threadItems.map((item) => [item.id, item]));
+  const dates = threadIds.map((id) => itemsById.get(id)?.lastMessageAt);
+  const filteredIndices = threadIds.map((id, index) => ({ id, index })).filter(({ id }) => !query || (itemsById.get(id)?.title || "New Chat").toLowerCase().includes(query)).map(({ index }) => index);
+  if (startOfToday === undefined || !filteredIndices.some((index) => dates[index])) {
+    return { threadIds, filteredIndices, groups: null };
+  }
+  const yesterday = new Date(startOfToday);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const startOfYesterday = yesterday.getTime();
+  const time = (index) => dates[index]?.getTime() ?? Number.MAX_SAFE_INTEGER;
+  const sorted = [...filteredIndices].sort((a, b) => time(b) - time(a));
+  const groups = [];
+  for (const index of sorted) {
+    const date = dates[index];
+    const label = !date || date.getTime() >= startOfToday ? "Today" : date.getTime() >= startOfYesterday ? "Yesterday" : "Earlier";
+    const lastGroup = groups[groups.length - 1];
+    if (lastGroup?.label === label)
+      lastGroup.indices.push(index);
+    else
+      groups.push({ label, indices: [index] });
+  }
+  return { threadIds, filteredIndices, groups };
+}
+
+// src/components/assistant-ui/hooks/useStartOfToday.ts
+import { useSyncExternalStore } from "react";
+function subscribeToNextDay(onDayChange) {
+  let timeout;
+  function scheduleNextDay() {
+    const now = new Date;
+    const startOfTomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1).getTime();
+    timeout = window.setTimeout(() => {
+      onDayChange();
+      scheduleNextDay();
+    }, startOfTomorrow - now.getTime());
+  }
+  scheduleNextDay();
+  return () => window.clearTimeout(timeout);
+}
+function getStartOfToday() {
+  const now = new Date;
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+}
+function getServerStartOfToday() {
+  return;
+}
+function useStartOfToday() {
+  return useSyncExternalStore(subscribeToNextDay, getStartOfToday, getServerStartOfToday);
+}
+
+// src/components/assistant-ui/hooks/useThreadListGroups.ts
+function useThreadListGroups2(searchQuery = "") {
+  const threadIds = useAuiState((state) => state.threads.threadIds);
+  const threadItems = useAuiState((state) => state.threads.threadItems);
+  const startOfToday = useStartOfToday();
+  return useMemo(() => groupThreads(threadIds, threadItems, searchQuery, startOfToday), [threadIds, threadItems, searchQuery, startOfToday]);
+}
+
+// src/components/assistant-ui/native/ThreadList.tsx
+import {
+  AuiIf,
+  ThreadListItemMorePrimitive,
+  ThreadListItemPrimitive,
+  ThreadListPrimitive,
+  useAui,
+  useAuiState as useAuiState2
+} from "@assistant-ui/react";
+import {
+  ArchiveIcon,
+  Loader2Icon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  PlusIcon,
+  SearchIcon,
+  TrashIcon
+} from "lucide-react";
+import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+import { jsx, jsxs, Fragment as Fragment2 } from "react/jsx-runtime";
+function ThreadList3() {
+  const [search, setSearch] = useState("");
+  const hasThreads = useAuiState2((s) => s.threads.threadIds.length > 0);
+  return /* @__PURE__ */ jsxs(ThreadListRoot2, {
+    children: [
+      /* @__PURE__ */ jsx(ThreadListNew2, {}),
+      hasThreads && /* @__PURE__ */ jsx(ThreadListSearch2, {
+        value: search,
+        onValueChange: setSearch
+      }),
+      /* @__PURE__ */ jsx(ThreadListItems2, {
+        searchQuery: hasThreads ? search : ""
+      })
+    ]
+  });
+}
+var ThreadListSearch2 = forwardRef(function ThreadListSearch({ value, onValueChange, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "aui_thread-list-search",
+    className: "relative px-0.5 py-1",
+    children: [
+      /* @__PURE__ */ jsx(SearchIcon, {
+        "aria-hidden": "true",
+        className: "size-4 shrink-0 text-muted-foreground"
+      }),
+      /* @__PURE__ */ jsx(Input2, {
+        ref,
+        type: "search",
+        value,
+        onChange: (event) => onValueChange(event.target.value),
+        "aria-label": "Search threads",
+        placeholder: "Search threads",
+        ...props
+      })
+    ]
+  });
+});
+ThreadListSearch2.displayName = "ThreadListSearch";
+function ThreadListRoot2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ThreadListPrimitive.Root, {
+    "data-slot": "aui_thread-list-root",
+    ...props,
+    render: /* @__PURE__ */ jsx("div", {
+      className: cn2("flex flex-col gap-0.5", className)
+    })
+  });
+}
+function ThreadListItems2({ className, searchQuery = "", ...props }) {
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "aui_thread-list-items",
+    className: cn2("flex flex-col gap-0.5", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(AuiIf, {
+        condition: (s) => s.threads.isLoading,
+        children: /* @__PURE__ */ jsx(ThreadListSkeleton, {})
+      }),
+      /* @__PURE__ */ jsx(AuiIf, {
+        condition: (s) => !s.threads.isLoading,
+        children: /* @__PURE__ */ jsx(ThreadListItemGroups, {
+          searchQuery
+        })
+      })
+    ]
+  });
+}
+var ThreadListItemGroups = ({ searchQuery = "" }) => {
+  const { threadIds, filteredIndices, groups } = useThreadListGroups2(searchQuery);
+  const query = searchQuery.trim();
+  if (query && filteredIndices.length === 0) {
+    return /* @__PURE__ */ jsx("div", {
+      "data-slot": "aui_thread-list-empty",
+      className: "text-muted-foreground px-2.5 py-4 text-sm",
+      children: "No threads found"
+    });
+  }
+  if (!groups) {
+    return filteredIndices.map((index) => /* @__PURE__ */ jsx(ThreadListPrimitive.ItemByIndex, {
+      index,
+      components: { ThreadListItem: ThreadListItem2 }
+    }, threadIds[index]));
+  }
+  return groups.map((group) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        "data-slot": "aui_thread-list-group-label",
+        className: "text-muted-foreground px-2.5 pt-3 pb-1 text-sm font-medium",
+        children: group.label
+      }),
+      group.indices.map((index) => /* @__PURE__ */ jsx(ThreadListPrimitive.ItemByIndex, {
+        index,
+        components: { ThreadListItem: ThreadListItem2 }
+      }, threadIds[index]))
+    ]
+  }, group.label));
+};
+var ThreadListNew2 = forwardRef(({ className, labelClassName, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(ThreadListPrimitive.New, {
+    asChild: true,
+    children: /* @__PURE__ */ jsx(Button2, {
+      ref,
+      variant: "ghost",
+      className,
+      "data-slot": "aui_thread-list-new",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment2, {
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, {
+            "aria-hidden": "true",
+            className: "size-4 shrink-0"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            "data-slot": "aui_thread-list-new-label",
+            className: cn2("whitespace-nowrap", labelClassName),
+            children: "New Thread"
+          })
+        ]
+      })
+    })
+  });
+});
+ThreadListNew2.displayName = "ThreadListNew";
+var ThreadListSkeleton = () => {
+  return /* @__PURE__ */ jsx("div", {
+    role: "status",
+    "aria-label": "Loading threads",
+    className: "flex flex-col gap-0.5",
+    children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx("div", {
+      "aria-hidden": "true",
+      "data-slot": "aui_thread-list-skeleton-wrapper",
+      className: "flex h-control-sm items-center px-2.5",
+      children: /* @__PURE__ */ jsx(Skeleton2, {
+        "data-slot": "aui_thread-list-skeleton",
+        className: "h-3 w-full"
+      })
+    }, i))
+  });
+};
+function ThreadListItem2() {
+  const isRunning = useAuiState2((s) => s.threadListItem.isRunning);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const triggerRef = useRef(null);
+  const restoreFocusRef = useRef(false);
+  useEffect(() => {
+    if (isRenaming || !restoreFocusRef.current)
+      return;
+    restoreFocusRef.current = false;
+    triggerRef.current?.focus();
+  }, [isRenaming]);
+  return /* @__PURE__ */ jsxs(ThreadListItemPrimitive.Root, {
+    "data-slot": "aui_thread-list-item",
+    render: /* @__PURE__ */ jsx("div", {
+      className: "group hover:bg-muted focus-visible:bg-muted data-active:bg-muted has-focus-visible:bg-muted has-data-[state=open]:bg-muted relative flex h-control-sm items-center rounded-md transition-colors focus-visible:outline-none"
+    }),
+    children: [
+      isRenaming ? /* @__PURE__ */ jsx(ThreadListItemRename, {
+        onDone: (restoreFocus) => {
+          restoreFocusRef.current = restoreFocus;
+          setIsRenaming(false);
+        }
+      }) : /* @__PURE__ */ jsxs(ThreadListItemPrimitive.Trigger, {
+        ref: triggerRef,
+        "data-slot": "aui_thread-list-item-trigger",
+        render: /* @__PURE__ */ jsx("button", {
+          className: "focus-visible:ring-ring/50 flex h-full min-w-0 flex-1 items-center rounded-md px-2.5 text-start text-sm outline-none group-hover:pe-9 group-has-focus-visible:pe-9 group-has-data-[state=open]:pe-9 group-data-active:pe-9 focus-visible:ring-1"
+        }),
+        children: [
+          isRunning && /* @__PURE__ */ jsx(Loader2Icon, {
+            "aria-hidden": "true",
+            className: "size-3.5 shrink-0 text-muted-foreground animate-spin motion-reduce:animate-none"
+          }),
+          /* @__PURE__ */ jsx("span", {
+            "data-slot": "aui_thread-list-item-title",
+            className: "min-w-0 flex-1 truncate",
+            children: /* @__PURE__ */ jsx(ThreadListItemPrimitive.Title, {
+              fallback: "New Chat"
+            })
+          }),
+          isRunning && /* @__PURE__ */ jsx("span", {
+            className: "sr-only",
+            children: "Running"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(ThreadListItemMore, {
+        onRename: () => setIsRenaming(true)
+      })
+    ]
+  });
+}
+var ThreadListItemRename = ({ onDone }) => {
+  const aui = useAui();
+  const title = useAuiState2((s) => s.threadListItem.title) ?? "";
+  const [value, setValue] = useState(title);
+  const inputRef = useRef(null);
+  const settledRef = useRef(false);
+  useEffect(() => {
+    inputRef.current?.select();
+  }, []);
+  const commit = (restoreFocus) => {
+    if (settledRef.current)
+      return;
+    settledRef.current = true;
+    const next = value.trim();
+    if (!next || next === title) {
+      onDone(restoreFocus);
+      return;
+    }
+    Promise.resolve().then(() => aui.threadListItem.rename(next)).then(() => onDone(restoreFocus), () => {
+      settledRef.current = false;
+      if (restoreFocus)
+        inputRef.current?.focus();
+    });
+  };
+  const cancel = () => {
+    if (settledRef.current)
+      return;
+    settledRef.current = true;
+    onDone(true);
+  };
+  return /* @__PURE__ */ jsx(Input2, {
+    ref: inputRef,
+    autoFocus: true,
+    "data-slot": "aui_thread-list-item-rename",
+    "aria-label": "Rename thread",
+    value,
+    onChange: (event) => setValue(event.target.value),
+    onBlur: () => commit(false),
+    onKeyDown: (event) => {
+      if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
+        return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commit(true);
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+      }
+    }
+  });
+};
+var ThreadListItemMore = ({ onRename }) => {
+  const { container: portalContainer, isReady: isPortalReady } = useResolvedPortalContainer();
+  const density = useDensity();
+  const renameRequested = useRef(false);
+  return /* @__PURE__ */ jsxs(ThreadListItemMorePrimitive.Root, {
+    sharedFocusGroup: true,
+    children: [
+      /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxs(Button2, {
+          variant: "ghost",
+          "data-slot": "aui_thread-list-item-more",
+          children: [
+            /* @__PURE__ */ jsx(MoreHorizontalIcon, {
+              "aria-hidden": "true",
+              className: "size-3.5 shrink-0"
+            }),
+            /* @__PURE__ */ jsx("span", {
+              className: "sr-only",
+              children: "More options"
+            })
+          ]
+        })
+      }),
+      isPortalReady && /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Content, {
+        onCloseAutoFocus: (event) => {
+          if (!renameRequested.current)
+            return;
+          event.preventDefault();
+          renameRequested.current = false;
+          onRename();
+        },
+        "data-density": density,
+        side: "right",
+        align: "start",
+        sideOffset: 6,
+        "data-slot": "aui_thread-list-item-more-content",
+        asChild: true,
+        portalProps: { container: portalContainer },
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "bg-popover text-popover-foreground data-[state=open]:fade-in-0  data-[state=open]:animate-in data-[state=closed]:fade-out-0  data-[state=closed]:animate-out data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1.5",
+          children: [
+            /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Item, {
+              "data-slot": "aui_thread-list-item-more-item",
+              onSelect: () => {
+                renameRequested.current = true;
+              },
+              asChild: true,
+              children: /* @__PURE__ */ jsxs("div", {
+                className: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none select-none",
+                children: [
+                  /* @__PURE__ */ jsx(PencilIcon, {
+                    "aria-hidden": "true",
+                    className: "size-4 shrink-0"
+                  }),
+                  "Rename"
+                ]
+              })
+            }),
+            /* @__PURE__ */ jsx(ThreadListItemPrimitive.Archive, {
+              asChild: true,
+              children: /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Item, {
+                "data-slot": "aui_thread-list-item-more-item",
+                asChild: true,
+                children: /* @__PURE__ */ jsxs("div", {
+                  className: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none select-none",
+                  children: [
+                    /* @__PURE__ */ jsx(ArchiveIcon, {
+                      "aria-hidden": "true",
+                      className: "size-4 shrink-0"
+                    }),
+                    "Archive"
+                  ]
+                })
+              })
+            }),
+            /* @__PURE__ */ jsx(ThreadListItemPrimitive.Delete, {
+              asChild: true,
+              children: /* @__PURE__ */ jsx(ThreadListItemMorePrimitive.Item, {
+                "data-slot": "aui_thread-list-item-more-item",
+                asChild: true,
+                children: /* @__PURE__ */ jsxs("div", {
+                  className: "text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive flex cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none select-none",
+                  children: [
+                    /* @__PURE__ */ jsx(TrashIcon, {
+                      "aria-hidden": "true",
+                      className: "size-4 shrink-0"
+                    }),
+                    "Delete"
+                  ]
+                })
+              })
+            })
+          ]
+        })
+      })
+    ]
+  });
+};
+
+export { useThreadListGroups2, ThreadList3, ThreadListSearch2, ThreadListRoot2, ThreadListItems2, ThreadListNew2, ThreadListItem2 };

package/dist/chunk-ttdeyjvj.js

@@ -0,0 +1,88 @@
+import {
+  cn2
+} from "./chunk-cp2m7y7v.js";
+import {
+  Progress2
+} from "./chunk-5j39rehg.js";
+import {
+  ToggleGroup2,
+  ToggleGroupItem2
+} from "./chunk-aexby8h3.js";
+import {
+  pct,
+  announced
+} from "./chunk-v8ks0cfq.js";
+import {
+  field,
+  mono
+} from "./chunk-fgmcbtyt.js";
+
+// src/components/assistant-ui/elements/ReasoningEffort.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var fmt = (n) => n.toLocaleString("en-US");
+function ReasoningEffort2({
+  levels,
+  selectedKey,
+  spent,
+  onSelect,
+  className,
+  ...props
+}) {
+  const selected = levels.find((level) => level.key === selectedKey);
+  const budget = selected?.budget ?? 0;
+  const used = pct(spent, budget);
+  return /* @__PURE__ */ jsxs("div", {
+    "data-testid": "ReasoningEffort",
+    "data-slot": "reasoning-effort",
+    className: cn2(cn2("flex w-full max-w-sm flex-col gap-2.5"), className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "flex items-baseline justify-between",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: "text-base font-medium",
+            children: "Thinking"
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: cn2(mono, "text-muted-foreground tabular-nums"),
+            children: [
+              fmt(spent),
+              " / ",
+              fmt(budget)
+            ]
+          })
+        ]
+      }),
+      onSelect ? /* @__PURE__ */ jsx(ToggleGroup2, {
+        value: [selectedKey],
+        onValueChange: (keys) => {
+          const key = keys[0];
+          if (key)
+            onSelect(key);
+        },
+        "aria-label": "Thinking effort",
+        variant: "outline",
+        spacing: 0,
+        children: levels.map((level) => /* @__PURE__ */ jsx(ToggleGroupItem2, {
+          value: level.key,
+          children: level.label
+        }, level.key))
+      }) : /* @__PURE__ */ jsx("div", {
+        className: cn2(field, "grid auto-cols-fr grid-flow-col gap-0.5 rounded-sm p-0.5"),
+        children: levels.map((level) => /* @__PURE__ */ jsx("span", {
+          "aria-current": level.key === selectedKey ? "true" : undefined,
+          className: cn2("px-2 py-1 text-center text-sm", level.key === selectedKey ? "bg-secondary text-foreground" : "text-muted-foreground"),
+          children: level.label
+        }, level.key))
+      }),
+      /* @__PURE__ */ jsx(Progress2, {
+        "aria-label": "Thinking budget used",
+        value: announced(used),
+        "aria-valuetext": `${fmt(spent)} of ${fmt(budget)}`
+      })
+    ]
+  });
+}
+
+export { ReasoningEffort2 };