@nikala-ui/docs 0.12.0

package/dist/vendor/core-src/registry/components/ui/dialog.tsx

@@ -0,0 +1,200 @@
+import { splitProps, type Component, type JSX, type ValidComponent, Show } from "solid-js";
+import * as DialogPrimitive from "@kobalte/core/dialog";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/cn";
+
+export type DialogRootProps = DialogPrimitive.DialogRootProps;
+
+/**
+ * Root Dialog component managing modal open state.
+ */
+export const Dialog: Component<DialogRootProps> = (props) => {
+  return <DialogPrimitive.Root {...props} />;
+};
+
+export const DialogTrigger = DialogPrimitive.Trigger;
+
+export type DialogOverlayProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogOverlayProps<T> & {
+    /** Whether to apply background blur effect (default: true) */
+    blur?: boolean;
+    class?: string;
+  };
+
+/**
+ * Backdrop overlay wrapper with optional backdrop blur styling.
+ */
+export const DialogOverlay = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DialogOverlayProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogOverlayProps, ["class", "blur"]);
+
+  return (
+    <DialogPrimitive.Overlay
+      class={cn(
+        "fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+        local.blur !== false && "backdrop-blur-sm",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type DialogContentProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogContentProps<T> & {
+    /** Whether to show the top-right close (X) button (default: true) */
+    showCloseButton?: boolean;
+    /** Whether clicking outside closes the dialog (default: true) */
+    closeOnOutsideClick?: boolean;
+    /** Whether to apply background backdrop blur (default: true) */
+    blur?: boolean;
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Main dialog popup window housing header, content, and footer.
+ */
+export const DialogContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DialogContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogContentProps, [
+    "class",
+    "children",
+    "showCloseButton",
+    "closeOnOutsideClick",
+    "blur",
+    "onPointerDownOutside",
+    "onInteractOutside",
+  ]);
+
+  const handlePointerDownOutside = (e: Event) => {
+    if (local.closeOnOutsideClick === false) {
+      e.preventDefault();
+    }
+    if (typeof local.onPointerDownOutside === "function") {
+      local.onPointerDownOutside(e as any);
+    }
+  };
+
+  const handleInteractOutside = (e: Event) => {
+    if (local.closeOnOutsideClick === false) {
+      e.preventDefault();
+    }
+    if (typeof local.onInteractOutside === "function") {
+      local.onInteractOutside(e as any);
+    }
+  };
+
+  return (
+    <DialogPrimitive.Portal>
+      {/* Forward blur prop to DialogOverlay */}
+      <DialogOverlay blur={local.blur} />
+      <DialogPrimitive.Content
+        onPointerDownOutside={handlePointerDownOutside}
+        onInteractOutside={handleInteractOutside}
+        class={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-border bg-popover shadow-lg duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-closed:zoom-out-95 data-expanded:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg text-card-foreground overflow-hidden max-h-[80vh]",
+          local.class
+        )}
+        {...(rest as any)}
+      >
+        <ScrollArea class="max-h-[80vh] w-full">
+          <div class="p-6 space-y-4">
+            {local.children}
+          </div>
+        </ScrollArea>
+        <Show when={local.showCloseButton !== false}>
+          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-expanded:bg-accent data-expanded:text-muted-foreground cursor-pointer z-50">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <span class="sr-only">Close</span>
+          </DialogPrimitive.CloseButton>
+        </Show>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+};
+
+export interface DialogHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Dialog top header container.
+ */
+export const DialogHeader: Component<DialogHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col space-y-1.5 text-center sm:text-left", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DialogFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Dialog bottom action buttons area.
+ */
+export const DialogFooter: Component<DialogFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export type DialogTitleProps<T extends ValidComponent = "h2"> =
+  DialogPrimitive.DialogTitleProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Dialog title heading.
+ */
+export const DialogTitle = <T extends ValidComponent = "h2">(
+  props: PolymorphicProps<T, DialogTitleProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogTitleProps, ["class"]);
+
+  return (
+    <DialogPrimitive.Title
+      class={cn("text-lg font-semibold leading-none tracking-tight text-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type DialogDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Dialog subtitle or description text.
+ */
+export const DialogDescription = <T extends ValidComponent = "p">(
+  props: PolymorphicProps<T, DialogDescriptionProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogDescriptionProps, ["class"]);
+
+  return (
+    <DialogPrimitive.Description
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export const DialogClose = DialogPrimitive.CloseButton;

package/dist/vendor/core-src/registry/components/ui/dropdown-menu.tsx

@@ -0,0 +1,298 @@
+import { splitProps, type Component, type JSX, type ValidComponent, createContext, useContext } from "solid-js";
+import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { createClickOutside } from "@/hooks/create-click-outside";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/cn";
+
+const DropdownGroupContext = createContext<boolean>(false);
+
+export type DropdownMenuRootProps = Omit<
+  DropdownMenuPrimitive.DropdownMenuRootProps,
+  "placement"
+> & {
+  placement?:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+};
+
+export const DropdownMenu: Component<DropdownMenuRootProps> = (props) => {
+  return <DropdownMenuPrimitive.Root {...props} />;
+};
+
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+export const DropdownMenuGroup: Component<DropdownMenuPrimitive.DropdownMenuGroupProps> = (props) => {
+  return (
+    <DropdownGroupContext.Provider value={true}>
+      <DropdownMenuPrimitive.Group {...props} />
+    </DropdownGroupContext.Provider>
+  );
+};
+
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export type DropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    inset?: boolean;
+  };
+
+export const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children", "inset"]);
+
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      class={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent text-foreground",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      {local.children}
+      <svg class="ml-auto h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+};
+
+export type DropdownMenuSubContentProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {
+    class?: string;
+  };
+
+export const DropdownMenuSubContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]);
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        class={cn(
+          "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+          local.class
+        )}
+        {...(rest as any)}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+};
+
+export type DropdownMenuContentProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+export const DropdownMenuContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuContentProps, ["class", "children"]);
+  let contentRef: HTMLElement | undefined;
+
+  createClickOutside({
+    target: () => contentRef,
+    onInteractOutside: (e) => {
+      if (typeof (props as any).onInteractOutside === "function") {
+        (props as any).onInteractOutside(e);
+      }
+    },
+  });
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={(el) => {
+          contentRef = el;
+          if (typeof (props as any).ref === "function") (props as any).ref(el);
+        }}
+        {...(rest as any)}
+        sideOffset={(rest as any).sideOffset ?? 8}
+        class={cn(
+          "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 max-h-72 flex flex-col mt-1",
+          local.class
+        )}
+      >
+        <ScrollArea class="max-h-72 w-full">
+          <div class="p-1">
+            {local.children}
+          </div>
+        </ScrollArea>
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+};
+
+export type DropdownMenuItemProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
+    class?: string;
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  };
+
+export const DropdownMenuItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuItemProps, [
+    "class",
+    "inset",
+    "variant",
+  ]);
+
+  return (
+    <DropdownMenuPrimitive.Item
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        local.inset && "pl-8",
+        local.variant === "destructive" &&
+        "text-destructive focus:bg-destructive/15 focus:text-destructive",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]);
+
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+};
+
+export type DropdownMenuRadioItemProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"]);
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <span class="h-2 w-2 rounded-lg bg-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+};
+
+export const DropdownMenuGroupLabel = DropdownMenuPrimitive.GroupLabel;
+
+export interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  inset?: boolean;
+  children?: JSX.Element;
+}
+
+export const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "inset", "children"]);
+  const isInsideGroup = useContext(DropdownGroupContext);
+
+  const classes = () =>
+    cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      local.inset && "pl-8",
+      local.class
+    );
+
+  return (
+    <>
+      {isInsideGroup ? (
+        <DropdownMenuPrimitive.GroupLabel class={classes()} {...(rest as any)}>
+          {local.children}
+        </DropdownMenuPrimitive.GroupLabel>
+      ) : (
+        <div class={classes()} {...rest}>
+          {local.children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
+  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
+    class?: string;
+  };
+
+export const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
+  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]);
+
+  return (
+    <DropdownMenuPrimitive.Separator
+      class={cn("-mx-1 my-1 h-px bg-border", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+export const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <span
+      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};

package/dist/vendor/core-src/registry/components/ui/dropzone.tsx

@@ -0,0 +1,189 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+import { CloudUpload, FileText, X, AlertCircle } from "lucide-solid";
+
+export interface DropzoneProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  isOver?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Root container for the Dropzone file upload component.
+ */
+export const Dropzone: Component<DropzoneProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "isOver", "disabled"]);
+
+  return (
+    <div
+      class={cn(
+        "group relative flex w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-card/50 p-8 text-center transition-all",
+        "hover:border-primary/50 hover:bg-card/80",
+        local.isOver && "border-primary bg-primary/5 ring-2 ring-primary/20",
+        local.disabled && "pointer-events-none opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Centered icon placeholder for Dropzone.
+ */
+export const DropzoneIcon: Component<DropzoneIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "mb-3 flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-transform group-hover:scale-105",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children || <CloudUpload class="size-6" />}
+    </div>
+  );
+};
+
+export interface DropzoneTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+/**
+ * Primary title text for the dropzone prompt.
+ */
+export const DropzoneTitle: Component<DropzoneTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h4
+      class={cn("text-sm font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+/**
+ * Subtitle description text for dropzone file specifications.
+ */
+export const DropzoneDescription: Component<DropzoneDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 text-xs text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneFileListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Container list for uploaded files.
+ */
+export const DropzoneFileList: Component<DropzoneFileListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("mt-4 flex w-full flex-col gap-2", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneFileItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  name: string;
+  size?: string;
+  onRemove?: () => void;
+}
+
+/**
+ * Individual uploaded file card with name, formatted size, and remove button.
+ */
+export const DropzoneFileItem: Component<DropzoneFileItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "name", "size", "onRemove", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-3 rounded-md border border-border bg-card p-2.5 text-xs transition-colors",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 items-center gap-2.5">
+        <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          {local.children || <FileText class="size-4" />}
+        </div>
+        <div class="flex min-w-0 flex-col text-left">
+          <span class="truncate font-medium text-foreground">{local.name}</span>
+          {local.size && (
+            <span class="font-mono text-[11px] text-muted-foreground">{local.size}</span>
+          )}
+        </div>
+      </div>
+
+      {local.onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            local.onRemove?.();
+          }}
+          class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          aria-label="Remove file"
+        >
+          <X class="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export interface DropzoneRejectedItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  name: string;
+  error?: string;
+  size?: string;
+}
+
+/**
+ * Card for displaying rejected files and validation errors.
+ */
+export const DropzoneRejectedItem: Component<DropzoneRejectedItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "name", "error", "size"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 items-center gap-2">
+        <AlertCircle class="size-4 shrink-0" />
+        <span class="truncate font-medium">{local.name}</span>
+        {local.size && <span class="font-mono text-[11px] opacity-80">({local.size})</span>}
+      </div>
+      {local.error && (
+        <span class="shrink-0 text-[11px] font-medium">{local.error}</span>
+      )}
+    </div>
+  );
+};