@zwbigi/ink-xy 0.1.2 → 0.1.4

package/inkos/packages/studio/src/components/sidebar/CharacterSection.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { Users, ChevronDown } from "lucide-react";
+import { useChatStore } from "../../store/chat";
+import { fetchJson } from "../../hooks/use-api";
+import { SidebarCard } from "./SidebarCard";
+import { cn } from "../../lib/utils";
+
+interface CharacterInfo {
+  name: string;
+  fields: Record<string, string>;
+}
+
+function parseCharacterMatrix(md: string): CharacterInfo[] {
+  const characters: CharacterInfo[] = [];
+  // Split by ## headings (level 2 only)
+  const sections = md.split(/^## /m).slice(1);
+  for (const section of sections) {
+    const lines = section.split("\n");
+    const name = lines[0].trim();
+    if (!name) continue;
+    const fields: Record<string, string> = {};
+    for (let i = 1; i < lines.length; i++) {
+      const match = lines[i].match(/^-\s+\*\*(.+?)\*\*:\s*(.+)/);
+      if (match) {
+        fields[match[1]] = match[2].trim();
+      }
+    }
+    characters.push({ name, fields });
+  }
+  return characters;
+}
+
+const ROLE_COLORS: Record<string, string> = {
+  "主角": "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+  "反派": "bg-red-500/15 text-red-600 dark:text-red-400",
+  "盟友": "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+  "配角": "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+  "提及": "bg-zinc-500/15 text-zinc-600 dark:text-zinc-400",
+  "protagonist": "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+  "antagonist": "bg-red-500/15 text-red-600 dark:text-red-400",
+  "ally": "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+  "minor": "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+  "mentioned": "bg-zinc-500/15 text-zinc-600 dark:text-zinc-400",
+};
+
+function getRoleColor(role: string): string {
+  const lower = role.toLowerCase().trim();
+  for (const [key, color] of Object.entries(ROLE_COLORS)) {
+    if (lower.includes(key)) return color;
+  }
+  return "bg-zinc-500/15 text-zinc-600 dark:text-zinc-400";
+}
+
+function CharacterCard({ char }: { readonly char: CharacterInfo }) {
+  const [expanded, setExpanded] = useState(false);
+  const role = char.fields["定位"] ?? char.fields["Role"] ?? "";
+  const tags = char.fields["标签"] ?? char.fields["Tags"] ?? "";
+  const current = char.fields["当前"] ?? char.fields["Current"] ?? "";
+
+  return (
+    <div className="rounded-lg bg-secondary/30 overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-2 px-2.5 py-2 text-left"
+      >
+        <Users size={14} className="shrink-0 text-muted-foreground/60" />
+        <span className="text-sm font-medium text-foreground font-['SimSun','Songti_SC','STSong',serif] flex-1 truncate">
+          {char.name}
+        </span>
+        {role && (
+          <span className={cn("text-[10px] px-1.5 py-0.5 rounded-full shrink-0", getRoleColor(role))}>
+            {role.split("/")[0].trim()}
+          </span>
+        )}
+        <ChevronDown size={12} className={cn("text-muted-foreground/50 transition-transform shrink-0", expanded && "rotate-180")} />
+      </button>
+      {expanded && (
+        <div className="px-2.5 pb-2.5 space-y-1">
+          {tags && (
+            <p className="text-xs text-muted-foreground"><span className="text-muted-foreground/60">标签</span> {tags}</p>
+          )}
+          {current && (
+            <p className="text-xs text-muted-foreground"><span className="text-muted-foreground/60">当前</span> {current}</p>
+          )}
+          {Object.entries(char.fields)
+            .filter(([k]) => !["定位", "Role", "标签", "Tags", "当前", "Current"].includes(k))
+            .map(([key, val]) => (
+              <p key={key} className="text-xs text-muted-foreground">
+                <span className="text-muted-foreground/60">{key}</span> {val}
+              </p>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface CharacterSectionProps {
+  readonly bookId: string;
+}
+
+export function CharacterSection({ bookId }: CharacterSectionProps) {
+  const [characters, setCharacters] = useState<CharacterInfo[]>([]);
+  const bookDataVersion = useChatStore((s) => s.bookDataVersion);
+
+  useEffect(() => {
+    fetchJson<{ content: string | null }>(`/books/${bookId}/truth/character_matrix.md`)
+      .then((data) => {
+        if (data.content) {
+          setCharacters(parseCharacterMatrix(data.content));
+        } else {
+          setCharacters([]);
+        }
+      })
+      .catch(() => setCharacters([]));
+  }, [bookId, bookDataVersion]);
+
+  if (characters.length === 0) return null;
+
+  return (
+    <SidebarCard title="角色">
+      <div className="space-y-1.5">
+        {characters.map((char) => (
+          <CharacterCard key={char.name} char={char} />
+        ))}
+      </div>
+    </SidebarCard>
+  );
+}

package/inkos/packages/studio/src/components/sidebar/FoundationSection.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react";
+import { FileText } from "lucide-react";
+import { useChatStore } from "../../store/chat";
+import { fetchJson } from "../../hooks/use-api";
+import { SidebarCard } from "./SidebarCard";
+
+const FOUNDATION_FILES: ReadonlyArray<{ file: string; label: string }> = [
+  { file: "story_bible.md", label: "世界观设定" },
+  { file: "volume_outline.md", label: "卷纲规划" },
+  { file: "book_rules.md", label: "叙事规则" },
+  { file: "current_state.md", label: "状态卡" },
+  { file: "pending_hooks.md", label: "伏笔池" },
+  { file: "subplot_board.md", label: "支线进度" },
+  { file: "emotional_arcs.md", label: "感情线" },
+  { file: "character_matrix.md", label: "角色矩阵" },
+];
+
+interface TruthFileInfo {
+  name: string;
+  size: number;
+}
+
+interface FoundationSectionProps {
+  readonly bookId: string;
+}
+
+export function FoundationSection({ bookId }: FoundationSectionProps) {
+  const [files, setFiles] = useState<ReadonlyArray<TruthFileInfo>>([]);
+  const openArtifact = useChatStore((s) => s.openArtifact);
+  const bookDataVersion = useChatStore((s) => s.bookDataVersion);
+
+  useEffect(() => {
+    fetchJson<{ files: TruthFileInfo[] }>(`/books/${bookId}/truth`)
+      .then((data) => setFiles(data.files))
+      .catch(() => setFiles([]));
+  }, [bookId, bookDataVersion]);
+
+  const available = FOUNDATION_FILES.filter((f) =>
+    files.some((tf) => tf.name === f.file),
+  );
+
+  if (available.length === 0) return null;
+
+  return (
+    <SidebarCard title="核心文件">
+      <ul className="space-y-1">
+        {available.map((item) => (
+          <li key={item.file}>
+            <button
+              onClick={() => openArtifact(item.file)}
+              className="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-secondary/50 transition-colors font-['SimSun','Songti_SC','STSong',serif]"
+            >
+              <FileText size={14} className="shrink-0 text-muted-foreground/60" />
+              <span className="truncate">{item.label}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </SidebarCard>
+  );
+}

package/inkos/packages/studio/src/components/sidebar/ProgressSection.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useState } from "react";
+import type { SSEMessage } from "../../hooks/use-sse";
+import { Loader2, Check } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { SidebarCard } from "./SidebarCard";
+
+const INIT_BOOK_STEPS = [
+  "生成基础设定",
+  "保存书籍配置",
+  "写入基础设定文件",
+  "初始化控制文档",
+  "创建初始快照",
+] as const;
+
+const WRITE_CHAPTER_STEPS = [
+  "准备章节输入",
+  "撰写章节草稿",
+  "落盘最终章节",
+  "生成最终真相文件",
+  "校验真相文件变更",
+  "同步记忆索引",
+  "更新章节索引与快照",
+] as const;
+
+type StepStatus = "pending" | "active" | "done";
+
+interface ProgressSectionProps {
+  readonly sse: { messages: ReadonlyArray<SSEMessage>; connected: boolean };
+}
+
+export function ProgressSection({ sse }: ProgressSectionProps) {
+  const [operation, setOperation] = useState<"idle" | "init" | "write">("idle");
+  const [completedSteps, setCompletedSteps] = useState<Set<string>>(new Set());
+  const [activeStep, setActiveStep] = useState<string | null>(null);
+
+  useEffect(() => {
+    const latest = sse.messages;
+    if (latest.length === 0) return;
+    const last = latest[latest.length - 1];
+
+    if (last.event === "book:creating") {
+      setOperation("init");
+      setCompletedSteps(new Set());
+      setActiveStep(null);
+    } else if (last.event === "write:start") {
+      setOperation("write");
+      setCompletedSteps(new Set());
+      setActiveStep(null);
+    } else if (last.event === "book:created" || last.event === "write:complete") {
+      // Mark all steps done
+      const steps = operation === "init" ? INIT_BOOK_STEPS : WRITE_CHAPTER_STEPS;
+      setCompletedSteps(new Set(steps));
+      setActiveStep(null);
+    } else if (last.event === "log") {
+      const data = last.data as { message?: string } | null;
+      const message = data?.message;
+      if (message && operation !== "idle") {
+        // Mark previous active step as done, set new active
+        setCompletedSteps((prev) => {
+          if (activeStep) {
+            const next = new Set(prev);
+            next.add(activeStep);
+            return next;
+          }
+          return prev;
+        });
+        setActiveStep(message);
+      }
+    }
+  }, [sse.messages]);
+
+  const steps = operation === "init" ? INIT_BOOK_STEPS
+    : operation === "write" ? WRITE_CHAPTER_STEPS
+    : null;
+
+  if (!steps) return null;
+
+  return (
+    <SidebarCard title="执行">
+      <ul className="space-y-2">
+        {steps.map((step, i) => {
+          const status: StepStatus = completedSteps.has(step) ? "done"
+            : activeStep === step ? "active"
+            : "pending";
+          return (
+            <li key={step} className="flex items-center gap-2.5">
+              <StepIndicator index={i + 1} status={status} />
+              <span className={cn(
+                "text-xs",
+                status === "done" && "text-muted-foreground",
+                status === "active" && "text-foreground font-medium",
+                status === "pending" && "text-muted-foreground/50",
+              )}>
+                {step}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </SidebarCard>
+  );
+}
+
+function StepIndicator({ index, status }: { readonly index: number; readonly status: StepStatus }) {
+  if (status === "done") {
+    return (
+      <div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center shrink-0">
+        <Check size={12} className="text-primary-foreground" strokeWidth={2.5} />
+      </div>
+    );
+  }
+  if (status === "active") {
+    return (
+      <div className="w-5 h-5 rounded-full border-2 border-primary flex items-center justify-center shrink-0">
+        <Loader2 size={10} className="text-primary animate-spin" />
+      </div>
+    );
+  }
+  return (
+    <div className="w-5 h-5 rounded-full border border-border/60 flex items-center justify-center shrink-0">
+      <span className="text-[10px] text-muted-foreground/50">{index}</span>
+    </div>
+  );
+}

package/inkos/packages/studio/src/components/sidebar/SidebarCard.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+interface SidebarCardProps {
+  readonly title: string;
+  readonly defaultOpen?: boolean;
+  readonly children: React.ReactNode;
+  readonly actions?: React.ReactNode;
+}
+
+export function SidebarCard({ title, defaultOpen = true, children, actions }: SidebarCardProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-xl bg-card/60">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-3 py-2.5"
+      >
+        <span className="text-base font-medium text-foreground font-['SimSun','Songti_SC','STSong',serif]">{title}</span>
+        <div className="flex items-center gap-1.5">
+          {actions}
+          <ChevronDown className={cn("w-4 h-4 text-muted-foreground transition-transform", open && "rotate-180")} />
+        </div>
+      </button>
+      {open && <div className="px-3 pb-3">{children}</div>}
+    </div>
+  );
+}

package/inkos/packages/studio/src/components/sidebar/SummarySection.tsx

@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { Streamdown } from "streamdown";
+import { cjk } from "@streamdown/cjk";
+import { code } from "@streamdown/code";
+import { math } from "@streamdown/math";
+import { mermaid } from "@streamdown/mermaid";
+import { useChatStore } from "../../store/chat";
+import type { BookSummary } from "../../store/chat";
+import { fetchJson } from "../../hooks/use-api";
+import { SidebarCard } from "./SidebarCard";
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+
+const SIDEBAR_MD_CLASS =
+  "text-xs text-muted-foreground leading-relaxed " +
+  "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0 " +
+  "[&>p+p]:mt-1.5 [&_strong]:text-foreground [&_strong]:font-medium " +
+  "[&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:my-0.5 " +
+  "[&_h1]:hidden [&_h2]:text-xs [&_h2]:font-medium [&_h2]:text-foreground [&_h2]:mt-1.5 [&_h2]:mb-0.5 " +
+  "[&_h3]:text-xs [&_h3]:font-medium [&_h3]:text-foreground [&_h3]:mt-1.5 [&_h3]:mb-0.5 " +
+  "[&_code]:text-[11px] [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-secondary/60";
+
+function parseStoryBible(content: string): BookSummary {
+  const sections = content.split(/^##\s+/m);
+  let world = "";
+  let protagonist = "";
+  let cast = "";
+
+  for (const section of sections) {
+    if (/^0?1[_\s]|世界观|world/i.test(section)) {
+      world = section.replace(/^[^\n]+\n/, "").trim().split("\n\n")[0] ?? "";
+    } else if (/^0?2[_\s]|主角|protagonist/i.test(section)) {
+      protagonist = section.replace(/^[^\n]+\n/, "").trim().split("\n\n")[0] ?? "";
+    } else if (/^0?3[_\s]|配角|supporting|cast/i.test(section)) {
+      cast = section.replace(/^[^\n]+\n/, "").trim().split("\n\n")[0] ?? "";
+    }
+  }
+
+  return { world, protagonist, cast };
+}
+
+interface SummarySectionProps {
+  readonly bookId: string;
+}
+
+export function SummarySection({ bookId }: SummarySectionProps) {
+  const summary = useChatStore((s) => s.bookSummary);
+  const setBookSummary = useChatStore((s) => s.setBookSummary);
+  const bookDataVersion = useChatStore((s) => s.bookDataVersion);
+
+  useEffect(() => {
+    setBookSummary(null);
+    fetchJson<{ content: string | null }>(`/books/${bookId}/truth/story_bible.md`)
+      .then((data) => {
+        if (data.content) setBookSummary(parseStoryBible(data.content));
+      })
+      .catch(() => {});
+  }, [bookId, bookDataVersion, setBookSummary]);
+
+  if (!summary) return null;
+
+  return (
+    <>
+      {summary.world && (
+        <SidebarCard title="世界观">
+          <Streamdown className={SIDEBAR_MD_CLASS} plugins={streamdownPlugins}>
+            {summary.world}
+          </Streamdown>
+        </SidebarCard>
+      )}
+      {(summary.protagonist || summary.cast) && (
+        <SidebarCard title="角色">
+          {summary.protagonist && (
+            <Streamdown className={SIDEBAR_MD_CLASS} plugins={streamdownPlugins}>
+              {summary.protagonist}
+            </Streamdown>
+          )}
+          {summary.cast && (
+            <div className={summary.protagonist ? "mt-2" : undefined}>
+              <Streamdown className={SIDEBAR_MD_CLASS} plugins={streamdownPlugins}>
+                {summary.cast}
+              </Streamdown>
+            </div>
+          )}
+        </SidebarCard>
+      )}
+    </>
+  );
+}

package/inkos/packages/studio/src/components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/inkos/packages/studio/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/inkos/packages/studio/src/components/ui/button-group.tsx

@@ -0,0 +1,87 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}