@hogoshi/ui 0.0.0-stage → 0.1.1

package/src/components/context-menu.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { ClipboardIcon, Copy01Icon, ScissorIcon, TextIcon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps, ReactNode } from "react";
+import { cn } from "../lib/cn";
+import type { AppIcon } from "./icon";
+import { Icon } from "./icon";
+import { Glide } from "./glide";
+import { HIGHLIGHTED, popupClass, popupItemClass } from "./popup";
+import { Separator } from "./separator";
+
+export interface ContextMenuEntry {
+  id: string;
+  label: string;
+  icon?: AppIcon;
+  onSelect?: () => void;
+  destructive?: boolean;
+  items?: ContextMenuEntry[];
+}
+
+function selectionText() {
+  return window.getSelection()?.toString() ?? "";
+}
+
+function cutSelection() {
+  const text = selectionText();
+  if (text) void navigator.clipboard.writeText(text);
+  document.execCommand("delete");
+}
+
+function copySelection() {
+  const text = selectionText();
+  if (text) void navigator.clipboard.writeText(text);
+}
+
+async function pasteSelection() {
+  const text = await navigator.clipboard.readText();
+  const active = document.activeElement;
+  if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
+    const start = active.selectionStart ?? active.value.length;
+    const end = active.selectionEnd ?? start;
+    active.setRangeText(text, start, end, "end");
+    active.dispatchEvent(new Event("input", { bubbles: true }));
+    return;
+  }
+  document.execCommand("insertText", false, text);
+}
+
+function selectAll() {
+  const active = document.activeElement;
+  if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
+    active.select();
+    return;
+  }
+  const selection = window.getSelection();
+  const node = selection?.anchorNode?.parentElement;
+  if (!node || !selection) return;
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function editEntries(): ContextMenuEntry[] {
+  return [
+    {
+      id: "edit",
+      label: "Edit",
+      items: [
+        { id: "cut", label: "Cut", icon: ScissorIcon, onSelect: cutSelection },
+        { id: "copy", label: "Copy", icon: Copy01Icon, onSelect: copySelection },
+        { id: "paste", label: "Paste", icon: ClipboardIcon, onSelect: () => void pasteSelection() },
+        { id: "select-all", label: "Select all", icon: TextIcon, onSelect: selectAll },
+      ],
+    },
+  ];
+}
+
+export const ContextMenuRoot = BaseContextMenu.Root;
+export const ContextMenuTrigger = BaseContextMenu.Trigger;
+
+export function ContextMenuContent({ className, children, ...props }: ComponentProps<typeof BaseContextMenu.Popup>) {
+  return (
+    <BaseContextMenu.Portal>
+      <BaseContextMenu.Positioner className="z-[var(--z-popover)]">
+        <BaseContextMenu.Popup className={cn(popupClass, className)} {...props}>
+          <Glide selector={HIGHLIGHTED} />
+          <EntryList items={editEntries()} />
+          {children ? (
+            <>
+              <Separator className="my-1" />
+              {children}
+            </>
+          ) : null}
+        </BaseContextMenu.Popup>
+      </BaseContextMenu.Positioner>
+    </BaseContextMenu.Portal>
+  );
+}
+
+export function ContextMenuItem({ className, ...props }: ComponentProps<typeof BaseContextMenu.Item>) {
+  return <BaseContextMenu.Item className={cn(popupItemClass, className)} {...props} />;
+}
+
+function EntryList({ items }: { items: ContextMenuEntry[] }) {
+  return items.map((item, index) =>
+    item.items ? (
+      <div key={item.id} className={index > 0 ? "border-border mt-1 border-t pt-1" : undefined}>
+        <p className="text-fg-subtle px-2 py-1 text-[11px] font-medium tracking-wider uppercase">{item.label}</p>
+        <EntryList items={item.items} />
+      </div>
+    ) : (
+      <ContextMenuItem
+        key={item.id}
+        className={item.destructive ? "text-danger data-[highlighted]:text-danger" : undefined}
+        onClick={item.onSelect}
+      >
+        {item.icon ? <Icon icon={item.icon} variant="stroke" size={16} /> : null}
+        {item.label}
+      </ContextMenuItem>
+    ),
+  );
+}
+
+export function ContextMenuViewport({ children }: { children: ReactNode }) {
+  return (
+    <BaseContextMenu.Root>
+      <ContextMenuTrigger className="block min-h-svh">{children}</ContextMenuTrigger>
+      <ContextMenuContent />
+    </BaseContextMenu.Root>
+  );
+}
+
+export function ContextMenu({
+  items,
+  children,
+  ...props
+}: ComponentProps<typeof BaseContextMenu.Root> & { items?: ContextMenuEntry[]; children?: ReactNode }) {
+  return (
+    <BaseContextMenu.Root {...props}>
+      {items ? <ContextMenuTrigger>{children}</ContextMenuTrigger> : children}
+      {items ? (
+        <ContextMenuContent>
+          <EntryList items={items} />
+        </ContextMenuContent>
+      ) : null}
+    </BaseContextMenu.Root>
+  );
+}

package/src/components/counter.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn } from "../lib/cn";
+
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+function useSettled(value: number, delay: number) {
+  const [settled, setSettled] = useState(value);
+  useEffect(() => {
+    const timer = window.setTimeout(() => setSettled(value), delay);
+    return () => window.clearTimeout(timer);
+  }, [value, delay]);
+  return settled;
+}
+
+function Reel({ digit }: { digit: string }) {
+  const value = Number(digit);
+  const [soft, setSoft] = useState(false);
+  useEffect(() => {
+    setSoft(true);
+    const timer = window.setTimeout(() => setSoft(false), 160);
+    return () => window.clearTimeout(timer);
+  }, [value]);
+  if (!Number.isInteger(value)) return <span className="inline-block px-px">{digit}</span>;
+  return (
+    <span className="relative inline-block h-[1em] w-[0.62em] overflow-hidden">
+      <span
+        className={cn(
+          "absolute inset-x-0 top-0 flex flex-col transition-[transform,filter] duration-[var(--motion-duration)] ease-[var(--motion-ease)] motion-reduce:transition-none",
+          soft ? "blur-[2px]" : "blur-none",
+        )}
+        style={{ transform: `translateY(-${value}em)` }}
+      >
+        {DIGITS.map((item) => (
+          <span key={item} className="flex h-[1em] items-center justify-center">
+            {item}
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
+export function Counter({ value, className }: { value: number; className?: string }) {
+  const shown = useSettled(value, 120);
+  return (
+    <span className={cn("inline-flex items-center font-mono text-3xl font-medium tabular-nums", className)}>
+      {String(shown)
+        .split("")
+        .map((digit, index, digits) => (
+          <Reel key={digits.length - index} digit={digit} />
+        ))}
+    </span>
+  );
+}

package/src/components/dialog.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Cancel01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+import { backdropMotion, popupMotion } from "./popup";
+
+export const Dialog = BaseDialog.Root;
+export const DialogTrigger = BaseDialog.Trigger;
+export const DialogClose = BaseDialog.Close;
+export const DialogTitle = BaseDialog.Title;
+export const DialogDescription = BaseDialog.Description;
+
+export function DialogContent({ className, children, ...props }: ComponentProps<typeof BaseDialog.Popup>) {
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className={cn("fixed inset-0 z-[var(--z-overlay)] bg-transparent", backdropMotion)} />
+      <BaseDialog.Popup
+        className={cn(
+          "border-border bg-bg-elevated/70 fixed top-1/2 left-1/2 z-[var(--z-modal)] grid w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--radius-lg)] border p-6 shadow-[var(--shadow-lg)] backdrop-blur-xl outline-none",
+          popupMotion,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <BaseDialog.Close className="text-fg-subtle hover:bg-bg-subtle hover:text-fg focus-visible:ring-ring absolute top-3 right-3 inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)] focus-visible:ring-2 focus-visible:outline-none">
+          <Icon icon={Cancel01Icon} variant="stroke" size={16} />
+          <span className="sr-only">Close</span>
+        </BaseDialog.Close>
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  );
+}

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Menu } from "@base-ui/react/menu";
+import { ArrowRight01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Glide } from "./glide";
+import { Icon } from "./icon";
+import { HIGHLIGHTED, popupClass, popupItemClass, useAnchoredPopup } from "./popup";
+
+export const DropdownMenu = Menu.Root;
+export const DropdownMenuTrigger = Menu.Trigger;
+
+export function DropdownMenuContent({ className, children, ...props }: ComponentProps<typeof Menu.Popup>) {
+  const { popupClassName, ...anchor } = useAnchoredPopup();
+  return (
+    <Menu.Portal>
+      <Menu.Positioner className="z-[var(--z-popover)]" {...anchor}>
+        <Menu.Popup className={cn(popupClass, popupClassName, className)} {...props}>
+          <Glide selector={HIGHLIGHTED} />
+          {children}
+        </Menu.Popup>
+      </Menu.Positioner>
+    </Menu.Portal>
+  );
+}
+
+export function DropdownMenuItem({ className, ...props }: ComponentProps<typeof Menu.Item>) {
+  return <Menu.Item className={cn(popupItemClass, className)} {...props} />;
+}
+
+export const DropdownMenuSub = Menu.SubmenuRoot;
+
+export function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof Menu.SubmenuTrigger>) {
+  return (
+    <Menu.SubmenuTrigger className={cn(popupItemClass, className)} {...props}>
+      {children}
+      <Icon icon={ArrowRight01Icon} variant="stroke" size={14} className="text-fg-subtle ml-auto" />
+    </Menu.SubmenuTrigger>
+  );
+}
+
+export function DropdownMenuSubContent({ className, children, ...props }: ComponentProps<typeof Menu.Popup>) {
+  return (
+    <Menu.Portal>
+      <Menu.Positioner className="z-[var(--z-popover)]" side="right" align="start" sideOffset={6}>
+        <Menu.Popup className={cn(popupClass, className)} {...props}>
+          <Glide selector={HIGHLIGHTED} />
+          {children}
+        </Menu.Popup>
+      </Menu.Positioner>
+    </Menu.Portal>
+  );
+}

package/src/components/file-upload.tsx

@@ -0,0 +1,381 @@
+"use client";
+
+import { Cancel01Icon, CloudUploadIcon, File01Icon } from "@hugeicons-pro/core-stroke-rounded";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent,
+  type ReactNode,
+} from "react";
+import { cn } from "../lib/cn";
+import { Icon } from "./icon";
+import { ImageViewer } from "./image-viewer";
+
+export interface FileRejection {
+  file: File;
+  reason: string;
+}
+
+export interface FileUploadProps {
+  accept?: string;
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  disabled?: boolean;
+  value?: File[];
+  defaultValue?: File[];
+  onValueChange?: (files: File[]) => void;
+  onReject?: (rejections: FileRejection[]) => void;
+  className?: string;
+  children?: ReactNode;
+}
+
+interface FileUploadState {
+  id: string;
+  files: File[];
+  urls: (string | null)[];
+  errors: FileRejection[];
+  accept?: string;
+  maxSize?: number;
+  multiple: boolean;
+  single: boolean;
+  disabled: boolean;
+  add: (files: File[]) => void;
+  remove: (index: number) => void;
+  preview: (index: number) => void;
+}
+
+const FileUploadContext = createContext<FileUploadState | null>(null);
+
+function useFileUpload() {
+  const value = useContext(FileUploadContext);
+  if (!value) throw new Error("FileUpload parts must be used within FileUpload");
+  return value;
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let size = bytes / 1024;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit += 1;
+  }
+  return `${size.toFixed(size < 10 ? 1 : 0)} ${units[unit]}`;
+}
+
+function matches(file: File, accept: string) {
+  return accept
+    .split(",")
+    .map((rule) => rule.trim().toLowerCase())
+    .filter(Boolean)
+    .some((rule) => {
+      if (rule.startsWith(".")) return file.name.toLowerCase().endsWith(rule);
+      if (rule.endsWith("/*")) return file.type.startsWith(rule.slice(0, -1));
+      return file.type === rule;
+    });
+}
+
+function describe(accept?: string, maxSize?: number) {
+  const formats = accept
+    ?.split(",")
+    .map((rule) => rule.trim().replace(/^\./, "").replace("/*", "").replace(/^.*\//, "").toUpperCase())
+    .filter(Boolean)
+    .join(", ");
+  return [formats, maxSize ? `up to ${formatBytes(maxSize)}` : ""].filter(Boolean).join(" · ");
+}
+
+function useImageUrls(files: File[]) {
+  const urls = useMemo(
+    () => files.map((file) => (file.type.startsWith("image/") ? URL.createObjectURL(file) : null)),
+    [files],
+  );
+  useEffect(() => () => urls.forEach((url) => url && URL.revokeObjectURL(url)), [urls]);
+  return urls;
+}
+
+const fileKey = (file: File) => `${file.name}-${file.size}-${file.lastModified}`;
+
+const removeClass =
+  "bg-bg-elevated border-border text-fg-muted hover:text-fg hover:bg-bg-subtle inline-flex cursor-pointer items-center justify-center rounded-full border shadow-[var(--shadow-sm)] transition-colors duration-[var(--motion-duration)] disabled:cursor-not-allowed disabled:opacity-50";
+
+export function FileUpload({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles,
+  disabled = false,
+  value,
+  defaultValue = [],
+  onValueChange,
+  onReject,
+  className,
+  children,
+}: FileUploadProps) {
+  const id = useId();
+  const [local, setLocal] = useState(defaultValue);
+  const [errors, setErrors] = useState<FileRejection[]>([]);
+  const [viewing, setViewing] = useState<number | null>(null);
+  const files = value ?? local;
+  const limit = multiple ? (maxFiles ?? Infinity) : 1;
+  const single = limit === 1;
+  const urls = useImageUrls(files);
+  const images = files.flatMap((file, at) => (urls[at] ? [{ src: urls[at], name: file.name, alt: file.name }] : []));
+
+  const commit = (next: File[]) => {
+    setLocal(next);
+    onValueChange?.(next);
+  };
+
+  const add = (incoming: File[]) => {
+    const rejected: FileRejection[] = [];
+    const accepted = incoming.filter((file) => {
+      if (accept && !matches(file, accept)) rejected.push({ file, reason: "Format is not supported" });
+      else if (maxSize && file.size > maxSize) rejected.push({ file, reason: `Larger than ${formatBytes(maxSize)}` });
+      else return true;
+      return false;
+    });
+    const base = single ? [] : files;
+    const room = single ? 1 : Math.max(0, limit - base.length);
+    accepted.slice(room).forEach((file) => rejected.push({ file, reason: `Only ${limit} files allowed` }));
+    if (accepted.length) commit([...base, ...accepted.slice(0, room)]);
+    setErrors(rejected);
+    if (rejected.length) onReject?.(rejected);
+  };
+
+  const state: FileUploadState = {
+    id,
+    files,
+    urls,
+    errors,
+    accept,
+    maxSize,
+    multiple: multiple && !single,
+    single,
+    disabled,
+    add,
+    remove: (index) => commit(files.filter((_, at) => at !== index)),
+    preview: (index) => {
+      const at = images.findIndex((image) => image.src === urls[index]);
+      if (at >= 0) setViewing(at);
+    },
+  };
+
+  return (
+    <FileUploadContext.Provider value={state}>
+      <div className={cn("flex w-full flex-col gap-2", className)}>
+        {children ?? (
+          <>
+            <FileUploadDropzone />
+            {single ? null : <FileList />}
+          </>
+        )}
+      </div>
+      <ImageViewer
+        images={images}
+        index={viewing ?? 0}
+        open={viewing !== null && images.length > 0}
+        onOpenChange={(open) => !open && setViewing(null)}
+        onIndexChange={setViewing}
+      />
+    </FileUploadContext.Provider>
+  );
+}
+
+function SinglePreview() {
+  const { files, urls, disabled, remove, preview } = useFileUpload();
+  const file = files[0];
+  if (!file) return null;
+  return (
+    <div className="absolute inset-0 animate-[item-in_var(--motion-duration)_var(--motion-ease)]">
+      {urls[0] ? (
+        <button
+          type="button"
+          aria-label={`Preview ${file.name}`}
+          className="size-full cursor-zoom-in"
+          onClick={(event) => {
+            event.preventDefault();
+            preview(0);
+          }}
+        >
+          <img src={urls[0]} alt="" className="size-full object-cover" />
+        </button>
+      ) : (
+        <div className="bg-bg-elevated flex size-full flex-col items-center justify-center gap-2 px-4 text-center">
+          <Icon icon={File01Icon} variant="stroke" size={24} className="text-fg-muted" />
+          <span className="text-fg max-w-full truncate text-sm font-medium">{file.name}</span>
+          <span className="text-fg-subtle text-xs">{formatBytes(file.size)} · drop or click to replace</span>
+        </div>
+      )}
+      <button
+        type="button"
+        aria-label={`Remove ${file.name}`}
+        disabled={disabled}
+        className={cn(removeClass, "absolute top-2 right-2 size-7")}
+        onClick={(event) => {
+          event.preventDefault();
+          remove(0);
+        }}
+      >
+        <Icon icon={Cancel01Icon} variant="stroke" size={14} />
+      </button>
+    </div>
+  );
+}
+
+export function FileUploadDropzone({ label = "Drop files here or browse", className }: { label?: string; className?: string }) {
+  const { id, files, errors, accept, maxSize, multiple, single, disabled, add } = useFileUpload();
+  const depth = useRef(0);
+  const [over, setOver] = useState(false);
+  const hint = describe(accept, maxSize);
+  const filled = single && files.length > 0;
+
+  const onDrop = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    depth.current = 0;
+    setOver(false);
+    if (!disabled) add([...event.dataTransfer.files]);
+  };
+
+  return (
+    <>
+      <label
+        htmlFor={id}
+        data-over={over || undefined}
+        data-disabled={disabled || undefined}
+        className={cn(
+          "border-border-strong bg-bg-elevated hover:bg-bg-subtle data-[over]:border-accent data-[over]:bg-accent-muted relative flex min-h-36 cursor-pointer flex-col items-center justify-center gap-2 overflow-hidden rounded-[var(--radius-lg)] border border-dashed px-4 py-8 text-center transition-[background-color,border-color,scale] duration-[var(--motion-duration)] ease-[var(--motion-ease)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[over]:scale-[1.01]",
+          filled && "h-48 border-solid p-0",
+          className,
+        )}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          depth.current += 1;
+          if (!disabled) setOver(true);
+        }}
+        onDragOver={(event) => event.preventDefault()}
+        onDragLeave={() => {
+          depth.current -= 1;
+          if (depth.current <= 0) setOver(false);
+        }}
+        onDrop={onDrop}
+      >
+        {filled ? (
+          <SinglePreview />
+        ) : (
+          <>
+            <span className="bg-bg-subtle text-fg flex size-10 items-center justify-center rounded-full">
+              <Icon icon={CloudUploadIcon} variant="stroke" size={20} />
+            </span>
+            <span className="text-fg text-sm font-medium">{label}</span>
+            {hint ? <span className="text-fg-subtle text-xs">{hint}</span> : null}
+          </>
+        )}
+        <input
+          id={id}
+          type="file"
+          className="sr-only"
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          onChange={(event) => {
+            add([...(event.target.files ?? [])]);
+            event.target.value = "";
+          }}
+        />
+      </label>
+      {errors.map((error) => (
+        <p
+          key={`${error.file.name}-${error.reason}`}
+          className="text-danger animate-[item-in_var(--motion-duration)_var(--motion-ease)] text-xs"
+        >
+          {error.file.name}: {error.reason}
+        </p>
+      ))}
+    </>
+  );
+}
+
+function Thumb({ index, className }: { index: number; className: string }) {
+  const { files, urls, preview } = useFileUpload();
+  const file = files[index];
+  if (urls[index]) {
+    return (
+      <button
+        type="button"
+        aria-label={`Preview ${file.name}`}
+        className={cn("bg-bg-subtle shrink-0 cursor-zoom-in overflow-hidden", className)}
+        onClick={() => preview(index)}
+      >
+        <img src={urls[index]} alt="" className="size-full object-cover" />
+      </button>
+    );
+  }
+  return (
+    <span className={cn("bg-bg-subtle flex shrink-0 items-center justify-center", className)}>
+      <Icon icon={File01Icon} variant="stroke" size={18} className="text-fg-muted" />
+    </span>
+  );
+}
+
+export function FileList({ variant = "col", className }: { variant?: "col" | "row"; className?: string }) {
+  const { files, disabled, remove } = useFileUpload();
+  if (!files.length) return null;
+
+  if (variant === "row") {
+    return (
+      <ul className={cn("flex flex-wrap gap-3 pt-2", className)}>
+        {files.map((file, index) => (
+          <li
+            key={fileKey(file)}
+            className="relative flex w-20 animate-[item-in_var(--motion-duration)_var(--motion-ease)] flex-col gap-1"
+          >
+            <Thumb index={index} className="border-border size-20 rounded-[var(--radius-md)] border" />
+            <span className="text-fg-muted truncate text-xs">{file.name}</span>
+            <button
+              type="button"
+              aria-label={`Remove ${file.name}`}
+              disabled={disabled}
+              className={cn(removeClass, "absolute -top-2 -right-2 size-6")}
+              onClick={() => remove(index)}
+            >
+              <Icon icon={Cancel01Icon} variant="stroke" size={12} />
+            </button>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <ul className={cn("flex flex-col gap-1.5", className)}>
+      {files.map((file, index) => (
+        <li
+          key={fileKey(file)}
+          className="border-border bg-bg-elevated flex animate-[item-in_var(--motion-duration)_var(--motion-ease)] items-center gap-3 rounded-[var(--radius-md)] border p-2"
+        >
+          <Thumb index={index} className="size-10 rounded-[var(--radius-sm)]" />
+          <span className="flex min-w-0 flex-1 flex-col">
+            <span className="text-fg truncate text-sm">{file.name}</span>
+            <span className="text-fg-subtle text-xs">{formatBytes(file.size)}</span>
+          </span>
+          <button
+            type="button"
+            aria-label={`Remove ${file.name}`}
+            disabled={disabled}
+            className="text-fg-subtle hover:bg-bg-subtle hover:text-fg inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-sm)]"
+            onClick={() => remove(index)}
+          >
+            <Icon icon={Cancel01Icon} variant="stroke" size={16} />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}