@kidecms/core 0.1.0

package/admin/components/TreeSelect.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "./ui/button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "./ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
+import { cn } from "../lib/utils";
+
+export type TreeSelectItem = {
+  value: string;
+  label: string;
+  depth: number;
+  path: string[];
+};
+
+type Props = {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  items: TreeSelectItem[];
+  onChange?: (value: string) => void;
+};
+
+export function flattenTree<T extends { children?: T[] }>(
+  nodes: T[],
+  getValue: (node: T) => string,
+  getLabel: (node: T) => string,
+  depth = 0,
+  path: string[] = [],
+): TreeSelectItem[] {
+  const result: TreeSelectItem[] = [];
+  for (const node of nodes) {
+    const currentPath = [...path, getLabel(node)];
+    result.push({ value: getValue(node), label: getLabel(node), depth, path: currentPath });
+    if (node.children?.length) {
+      result.push(...flattenTree(node.children, getValue, getLabel, depth + 1, currentPath));
+    }
+  }
+  return result;
+}
+
+export function flattenByParent<T>(
+  items: T[],
+  getValue: (item: T) => string,
+  getLabel: (item: T) => string,
+  getParent: (item: T) => string | null,
+): TreeSelectItem[] {
+  const childrenMap = new Map<string | null, T[]>();
+  for (const item of items) {
+    const parent = getParent(item);
+    if (!childrenMap.has(parent)) childrenMap.set(parent, []);
+    childrenMap.get(parent)!.push(item);
+  }
+
+  const result: TreeSelectItem[] = [];
+  const walk = (parentId: string | null, depth: number, path: string[]) => {
+    for (const item of childrenMap.get(parentId) ?? []) {
+      const currentPath = [...path, getLabel(item)];
+      result.push({ value: getValue(item), label: getLabel(item), depth, path: currentPath });
+      walk(getValue(item), depth + 1, currentPath);
+    }
+  };
+  walk(null, 0, []);
+  return result;
+}
+
+export default function TreeSelect({
+  name,
+  value: initialValue,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyMessage = "No results found.",
+  items,
+  onChange: onChangeProp,
+}: Props) {
+  const [value, setValue] = useState(initialValue ?? "");
+  const [open, setOpen] = useState(false);
+  const hiddenRef = useRef<HTMLInputElement>(null);
+  const isInitial = useRef(true);
+
+  useEffect(() => {
+    if (isInitial.current) {
+      isInitial.current = false;
+      return;
+    }
+    hiddenRef.current?.dispatchEvent(new Event("change", { bubbles: true }));
+  }, [value]);
+
+  const selected = items.find((i) => i.value === value);
+
+  return (
+    <div className="space-y-2">
+      <input ref={hiddenRef} type="hidden" name={name} value={value} />
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            size="lg"
+            className="border-input bg-muted/30 hover:bg-muted dark:bg-input/30 dark:hover:bg-input/50 w-full justify-between text-base font-normal"
+          >
+            <span className={cn("truncate", !selected && "text-muted-foreground")}>
+              {selected ? (
+                <span className="flex items-center gap-1">
+                  {selected.path.length > 1 && (
+                    <span className="text-muted-foreground">
+                      {selected.path.slice(0, -1).join(" / ")}
+                      {" / "}
+                    </span>
+                  )}
+                  {selected.label}
+                </span>
+              ) : (
+                placeholder
+              )}
+            </span>
+            <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+          <Command>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyMessage}</CommandEmpty>
+              <CommandItem
+                value="__none__"
+                onSelect={() => {
+                  setValue("");
+                  onChangeProp?.("");
+                  setOpen(false);
+                }}
+              >
+                <div className="flex items-center">
+                  <Check className={cn("mr-2 ml-1 size-4 shrink-0", !value ? "opacity-100" : "opacity-0")} />
+                  <span className="text-muted-foreground">None</span>
+                </div>
+              </CommandItem>
+              {items.map((item) => (
+                <CommandItem
+                  key={item.value}
+                  value={item.path.join(" / ")}
+                  onSelect={() => {
+                    setValue(item.value === value ? "" : item.value);
+                    onChangeProp?.(item.value === value ? "" : item.value);
+                    setOpen(false);
+                  }}
+                >
+                  <div className="flex items-center" style={{ paddingLeft: `${item.depth * 1.25}rem` }}>
+                    <Check
+                      className={cn("mr-2 ml-1 size-4 shrink-0", value === item.value ? "opacity-100" : "opacity-0")}
+                    />
+                    {item.label}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/admin/components/UnsavedGuard.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+import { Button } from "./ui/button";
+
+/**
+ * Tracks whether the form has unsaved changes.
+ * Shows a confirmation dialog when the user tries to navigate away.
+ * Also prevents accidental tab/window close via beforeunload.
+ */
+export default function UnsavedGuard({
+  formId,
+  isNew = false,
+  isDraft = false,
+}: {
+  formId: string;
+  isNew?: boolean;
+  /** Document is a draft — publish button stays enabled even when form is clean */
+  isDraft?: boolean;
+}) {
+  const [pendingHref, setPendingHref] = useState<string | null>(null);
+  const dirtyRef = useRef(false);
+  const submittingRef = useRef(false);
+
+  // Track form changes by comparing current values to initial snapshot.
+  // Also toggles disabled state on save/publish submit buttons.
+  useEffect(() => {
+    const form = document.getElementById(formId) as HTMLFormElement | null;
+    if (!form) return;
+
+    const doc = form.ownerDocument;
+    const saveBtn = doc.querySelector<HTMLButtonElement>(`button[type="submit"][form="${formId}"][value="save"]`);
+    const publishBtn = doc.querySelector<HTMLButtonElement>(`button[type="submit"][form="${formId}"][value="publish"]`);
+
+    const initialData = new FormData(form);
+    const initialSnapshot = serializeFormData(initialData);
+
+    const updateButtons = (dirty: boolean) => {
+      if (isNew) return;
+      if (saveBtn) saveBtn.disabled = !dirty;
+      // Publish enabled when form has changes OR document is an unpublished draft
+      if (publishBtn) publishBtn.disabled = !dirty && !isDraft;
+    };
+
+    // Set initial button state
+    updateButtons(false);
+
+    const checkDirty = () => {
+      const currentSnapshot = serializeFormData(new FormData(form));
+      dirtyRef.current = currentSnapshot !== initialSnapshot;
+      updateButtons(dirtyRef.current);
+    };
+
+    // Mark as clean when form is submitted
+    const handleSubmit = () => {
+      submittingRef.current = true;
+      dirtyRef.current = false;
+    };
+
+    // Live preview: broadcast field changes to any open preview tab
+    const previewChannel = new BroadcastChannel("cms-preview");
+    const broadcastField = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      if (!target.name || target.name.startsWith("_") || target.name === "redirectTo") return;
+      // Skip hidden inputs — complex fields (rich text, blocks) handle their own broadcasting
+      if (target.type === "hidden") return;
+      previewChannel.postMessage({ field: target.name, value: target.value });
+    };
+
+    form.addEventListener("input", checkDirty);
+    form.addEventListener("input", broadcastField);
+    form.addEventListener("change", checkDirty);
+    form.addEventListener("change", broadcastField);
+    form.addEventListener("submit", handleSubmit);
+
+    return () => {
+      form.removeEventListener("input", checkDirty);
+      form.removeEventListener("input", broadcastField);
+      form.removeEventListener("change", checkDirty);
+      form.removeEventListener("change", broadcastField);
+      form.removeEventListener("submit", handleSubmit);
+      previewChannel.close();
+    };
+  }, [formId, isNew, isDraft]);
+
+  // Cmd+S / Ctrl+S to save
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        const saveBtn =
+          document.querySelector<HTMLButtonElement>(`button[type="submit"][form="${formId}"][value="save"]`) ??
+          document.querySelector<HTMLButtonElement>(`button[type="submit"][form="${formId}"]`);
+        if (saveBtn && !saveBtn.disabled) {
+          saveBtn.click();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+    return () => document.removeEventListener("keydown", handleKeydown);
+  }, [formId]);
+
+  // Intercept link clicks within the admin layout
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (submittingRef.current || !dirtyRef.current) return;
+
+      const anchor = (e.target as HTMLElement).closest("a[href]") as HTMLAnchorElement | null;
+      if (!anchor) return;
+
+      const href = anchor.getAttribute("href");
+      if (!href || href.startsWith("#") || href.startsWith("javascript:") || anchor.target === "_blank") return;
+
+      e.preventDefault();
+      setPendingHref(href);
+    };
+
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, []);
+
+  // Prevent accidental tab/window close
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (dirtyRef.current && !submittingRef.current) {
+        e.preventDefault();
+      }
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, []);
+
+  const handleDiscard = useCallback(() => {
+    if (pendingHref) {
+      dirtyRef.current = false;
+      window.location.assign(pendingHref);
+    }
+  }, [pendingHref]);
+
+  return (
+    <AlertDialog open={pendingHref !== null} onOpenChange={(open) => !open && setPendingHref(null)}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Unsaved changes</AlertDialogTitle>
+          <AlertDialogDescription>
+            You have unsaved changes that will be lost if you leave this page.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogClose render={<Button variant="outline" />}>Stay on page</AlertDialogClose>
+          <Button variant="destructive" onClick={handleDiscard}>
+            Discard changes
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+/** Serialize FormData to a stable string for comparison, skipping system fields */
+function serializeFormData(data: FormData): string {
+  const entries: [string, string][] = [];
+  data.forEach((value, key) => {
+    if (key.startsWith("_") || key === "redirectTo") return;
+    entries.push([key, String(value)]);
+  });
+  entries.sort((a, b) => a[0].localeCompare(b[0]));
+  return entries.map(([k, v]) => `${k}=${v}`).join("&");
+}

package/admin/components/tree-utils.ts

@@ -0,0 +1,86 @@
+export type TreeItem = {
+  id: string;
+  children: TreeItem[];
+  [key: string]: unknown;
+};
+
+export function generateId() {
+  return "ti_" + Math.random().toString(36).slice(2, 9);
+}
+
+export function slugify(value: string) {
+  return value
+    .normalize("NFKD")
+    .replace(/[^\w\s-]/g, "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+export function parseItems(value?: string): TreeItem[] {
+  if (!value) return [];
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed)) return parsed;
+  } catch {}
+  return [];
+}
+
+export function cloneItems(items: TreeItem[]): TreeItem[] {
+  return JSON.parse(JSON.stringify(items));
+}
+
+export function createBlankItem(): TreeItem {
+  return { id: generateId(), children: [] };
+}
+
+export function getItemLabel(item: TreeItem, variant: "menu" | "taxonomy"): string {
+  return String(variant === "menu" ? item.label : item.name) || "—";
+}
+
+export function getItemSublabel(item: TreeItem, variant: "menu" | "taxonomy"): string {
+  return String(variant === "menu" ? item.href : item.slug) || "";
+}
+
+export function findItemById(items: TreeItem[], id: string): TreeItem | null {
+  for (const item of items) {
+    if (item.id === id) return item;
+    const found = findItemById(item.children, id);
+    if (found) return found;
+  }
+  return null;
+}
+
+export function findParentList(items: TreeItem[], id: string): TreeItem[] | null {
+  for (const item of items) {
+    if (item.id === id) return items;
+    const found = findParentList(item.children, id);
+    if (found) return found;
+  }
+  return null;
+}
+
+export function findItemDepth(items: TreeItem[], id: string, depth = 0): number {
+  for (const item of items) {
+    if (item.id === id) return depth;
+    const found = findItemDepth(item.children, id, depth + 1);
+    if (found >= 0) return found;
+  }
+  return -1;
+}
+
+export function canIndent(items: TreeItem[], id: string): boolean {
+  const check = (list: TreeItem[]): boolean => {
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].id === id) return i > 0;
+      if (check(list[i].children)) return true;
+    }
+    return false;
+  };
+  return check(items);
+}
+
+export function canOutdent(items: TreeItem[], id: string): boolean {
+  return findItemDepth(items, id) > 0;
+}

package/admin/components/ui/alert-dialog.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import { cn } from "../../lib/utils";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({ className, children, ...props }: AlertDialogPrimitive.Popup.Props) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-104 -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg transition duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </AlertDialogPrimitive.Popup>
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="alert-dialog-header" className={cn("flex flex-col gap-1", className)} {...props} />;
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="alert-dialog-footer" className={cn("flex justify-end gap-2", className)} {...props} />;
+}
+
+function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-foreground text-base font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogClose({ ...props }: AlertDialogPrimitive.Close.Props) {
+  return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />;
+}
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogClose,
+};

package/admin/components/ui/badge.tsx

@@ -0,0 +1,83 @@
+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-foreground/20 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",
+    },
+  },
+);
+
+type StatusColor = "green" | "yellow" | "blue" | "purple";
+
+const statusDotColor: Record<StatusColor, string> = {
+  green: "bg-emerald-500",
+  yellow: "bg-amber-500",
+  blue: "bg-blue-500",
+  purple: "bg-violet-500",
+};
+
+const statusBadgeBg: Record<StatusColor, string> = {
+  green: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
+  yellow: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400",
+  blue: "border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-400",
+  purple: "border-violet-500/30 bg-violet-500/10 text-violet-700 dark:text-violet-400",
+};
+
+function StatusBadge({ status, styled, className }: { status: string; styled?: boolean; className?: string }) {
+  if (!status) return null;
+  const color: StatusColor =
+    status === "published" ? "green" : status === "changed" ? "yellow" : status === "scheduled" ? "purple" : "blue";
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-4xl py-0.5 text-xs font-medium capitalize",
+        styled ? cn("border px-2.5 py-0.5", statusBadgeBg[color]) : "text-foreground border border-transparent",
+        className,
+      )}
+    >
+      <span className={cn("size-1.5 rounded-full", statusDotColor[color])} />
+      {status}
+    </span>
+  );
+}
+
+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, StatusBadge, badgeVariants };

package/admin/components/ui/button.tsx

@@ -0,0 +1,53 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-indigo-100 hover:bg-indigo-200/70 text-indigo-900 border-indigo-300 dark:bg-indigo-500/30 dark:hover:bg-indigo-500/40 dark:border-indigo-600 dark:text-indigo-100",
+        outline:
+          "border-foreground/30 bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        publish:
+          "bg-emerald-200/80 hover:bg-emerald-200/60 text-emerald-800 border-emerald-400 dark:bg-emerald-500/30 dark:hover:bg-emerald-500/40 dark:border-emerald-700 dark:text-emerald-200",
+        ghost:
+          "border-transparent hover:bg-foreground/8 hover:text-foreground aria-expanded:bg-foreground/8 aria-expanded:text-foreground dark:hover:bg-foreground/15 dark:aria-expanded:bg-foreground/15",
+        destructive:
+          "border-transparent bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "border-transparent text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return <ButtonPrimitive data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };