@hex-core/components 1.5.0 → 1.6.0

package/dist/_tsup-dts-rollup.d.ts

@@ -51,6 +51,7 @@ import { toast } from 'sonner';
 import { Toaster as Toaster_2 } from 'sonner';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { VariantProps } from 'class-variance-authority';
 
@@ -179,6 +180,76 @@ declare const aspectRatioSchema: ComponentSchemaDefinition;
 export { aspectRatioSchema }
 export { aspectRatioSchema as aspectRatioSchema_alias_1 }
 
+/**
+ * A file / image attachment thumbnail with an optional remove affordance
+ * and optional upload-progress overlay. Composes with the existing
+ * `Composer` AI primitive (drop into Composer's children slot to render
+ * as part of the message draft).
+ *
+ * Auto-detects the visual variant: image MIME + `preview` URL → image
+ * thumbnail; everything else → typed file icon with name + size.
+ *
+ * Distinct from {@link Dropzone} (the upload-input affordance) and
+ * static {@link Card} previews (no remove/progress UI).
+ *
+ * @example
+ * ```tsx
+ * <Attachment
+ *   file={{ name: "screenshot.png", size: 124000, type: "image/png", preview: objectUrl }}
+ *   onRemove={() => removeFromDraft("screenshot.png")}
+ * />
+ * ```
+ */
+declare function Attachment({ className, variant, file, onRemove, progress, ref, ...props }: AttachmentProps): JSX.Element;
+export { Attachment }
+export { Attachment as Attachment_alias_1 }
+
+/** A file-shaped attachment metadata object accepted by `<Attachment>`. */
+declare interface AttachmentFile {
+    /** Display name. */
+    name: string;
+    /** Bytes. Used to render a human-readable size. */
+    size: number;
+    /** MIME type. Drives the auto-detected `variant`. */
+    type: string;
+    /**
+     * Optional preview URL for images. When `type` starts with `image/`
+     * AND `preview` is set, the attachment renders a thumbnail; otherwise
+     * it falls back to a typed file icon + name + size.
+     */
+    preview?: string;
+}
+export { AttachmentFile }
+export { AttachmentFile as AttachmentFile_alias_1 }
+
+declare interface AttachmentProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "onProgress">, VariantProps<typeof attachmentVariants> {
+    /** Forwarded ref onto the root element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+    /** Native `File` OR a metadata object. */
+    file: File | AttachmentFile;
+    /** Click handler for the remove button. When provided, a × button overlays the attachment. */
+    onRemove?: () => void;
+    /**
+     * Upload progress in `[0, 1)`. Values `>= 1` (or `undefined`) hide the
+     * progressbar — pass `undefined` once the upload completes. Internally
+     * scaled to `aria-valuenow` on a 0–100 progressbar so AT engines
+     * announce "42 percent" rather than "0.42 of 1."
+     */
+    progress?: number;
+}
+export { AttachmentProps }
+export { AttachmentProps as AttachmentProps_alias_1 }
+
+declare const attachmentSchema: ComponentSchemaDefinition;
+export { attachmentSchema }
+export { attachmentSchema as attachmentSchema_alias_1 }
+
+declare const attachmentVariants: (props?: ({
+    variant?: "file" | "image" | null | undefined;
+} & ClassProp) | undefined) => string;
+export { attachmentVariants }
+export { attachmentVariants as attachmentVariants_alias_1 }
+
 /** Root container for an avatar (image + fallback). */
 declare const Avatar: React_2.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React_2.RefAttributes<HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
 export { Avatar }
@@ -1340,6 +1411,120 @@ declare const dropzoneSchema: ComponentSchemaDefinition;
 export { dropzoneSchema }
 export { dropzoneSchema as dropzoneSchema_alias_1 }
 
+/**
+ * A "zero-state" surface for lists, dashboards, and search results that have
+ * no content to show. Use to explain *why* the slot is empty and *what to do*
+ * next; pair the `action` slot with a button that creates the missing record.
+ *
+ * Distinct from {@link Loading} (transient, has a measurable wait) and
+ * {@link ErrorState} (something failed and may need a retry). If you're
+ * thinking "show a message because the request just hasn't returned yet,"
+ * reach for `Loading` — Empty is for "the request returned, and there's
+ * nothing to show."
+ *
+ * @example
+ * ```tsx
+ * <Empty
+ *   icon={<InboxIcon />}
+ *   title="No messages yet"
+ *   description="When someone sends you a message, it'll show up here."
+ *   action={<Button>Compose</Button>}
+ * />
+ * ```
+ *
+ * @returns A region landmark labeled by the title.
+ */
+declare function Empty({ className, size, icon, title, description, action, titleAs, ref, ...props }: EmptyProps): JSX.Element;
+export { Empty }
+export { Empty as Empty_alias_1 }
+
+declare interface EmptyProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyVariants> {
+    /** Forwarded ref onto the root region element. */
+    ref?: React_2.Ref<HTMLDivElement>;
+    /** Optional icon (typically an `<svg>`) rendered in a circular muted container. */
+    icon?: React_2.ReactNode;
+    /** Required heading copy. Becomes the region's accessible name via `aria-labelledby`. */
+    title: React_2.ReactNode;
+    /** Optional supporting copy that explains why the slot is empty + what to do next. */
+    description?: React_2.ReactNode;
+    /** Optional call-to-action — typically a `<Button>` that creates the missing record. */
+    action?: React_2.ReactNode;
+    /** Heading level for the title — pick to match surrounding hierarchy (default `h3`). */
+    titleAs?: EmptyTitleAs;
+}
+export { EmptyProps }
+export { EmptyProps as EmptyProps_alias_1 }
+
+declare const emptySchema: ComponentSchemaDefinition;
+export { emptySchema }
+export { emptySchema as emptySchema_alias_1 }
+
+/** Heading element used to render the Empty title. Defaults to `h3`. */
+declare type EmptyTitleAs = "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+
+declare const emptyVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+export { emptyVariants }
+export { emptyVariants as emptyVariants_alias_1 }
+
+/**
+ * A surface for rendering a failed-fetch / failed-action state. Visually
+ * similar to {@link Empty} but ships with a destructive-tone bias and
+ * mounts with `role="alert"` so screen readers announce the failure on
+ * first render.
+ *
+ * Distinct from {@link Empty} (request returned, no items) and
+ * {@link Loading} (request still in flight). For inline form-field
+ * errors, use Form's `<FormMessage>` instead. For blocking destructive
+ * confirmations, use AlertDialog.
+ *
+ * @example
+ * ```tsx
+ * <ErrorState
+ *   icon={<AlertCircleIcon />}
+ *   title="Couldn't load messages"
+ *   message="The server didn't respond. Check your connection and try again."
+ *   action={<Button onClick={refetch}>Retry</Button>}
+ * />
+ * ```
+ *
+ * @returns A `role="alert"` region with an optional action slot.
+ */
+declare function ErrorState({ className, variant, icon, title, message, action, ref, ...props }: ErrorStateProps): JSX.Element;
+export { ErrorState }
+export { ErrorState as ErrorState_alias_1 }
+
+declare interface ErrorStateProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
+    /** Forwarded ref onto the alert region. */
+    ref?: React_2.Ref<HTMLDivElement>;
+    /** Optional icon (typically an alert / x-circle SVG). */
+    icon?: React_2.ReactNode;
+    /** Optional heading copy. Falls back to a generic "Something went wrong" if omitted. */
+    title?: React_2.ReactNode;
+    /** Required body copy explaining what failed. */
+    message: React_2.ReactNode;
+    /**
+     * Optional call-to-action — typically a `<Button>` with `onClick={refetch}`.
+     * Slot pattern (matching `Empty.action`) so consumers control the button's
+     * variant / loading state / asChild composition without ErrorState
+     * re-implementing those concerns.
+     */
+    action?: React_2.ReactNode;
+}
+export { ErrorStateProps }
+export { ErrorStateProps as ErrorStateProps_alias_1 }
+
+declare const errorStateSchema: ComponentSchemaDefinition;
+export { errorStateSchema }
+export { errorStateSchema as errorStateSchema_alias_1 }
+
+declare const errorStateVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & ClassProp) | undefined) => string;
+export { errorStateVariants }
+export { errorStateVariants as errorStateVariants_alias_1 }
+
 /**
  * Hierarchical tree view for files, folders, settings sections, or any nested
  * navigation. Built on the WAI-ARIA tree pattern: `role="tree"` root,
@@ -1665,6 +1850,30 @@ export { labelSchema as labelSchema_alias_1 }
 
 declare const labelVariants: (props?: ClassProp | undefined) => string;
 
+/**
+ * A composed loading-placeholder pattern for lists, cards, and stacks.
+ * Renders N {@link Skeleton} rows pre-arranged for the chosen layout —
+ * Skeleton is the atom (one shaped pulse), Loading is the molecule
+ * (the canonical pattern most surfaces want).
+ *
+ * Distinct from {@link Empty} (request returned, no items) and
+ * {@link ErrorState} (request failed). If you need a single shaped
+ * pulse for a specific element (an avatar circle, a heading line),
+ * reach for `Skeleton` directly. If the wait has a measurable
+ * percent-done, reach for `Progress` instead.
+ *
+ * @example
+ * ```tsx
+ * <Loading rows={5} variant="list" />
+ * ```
+ *
+ * @returns A `role="status"` region with `aria-live="polite"` and the
+ *   announced label (default "Loading…") rendered sr-only.
+ */
+declare function Loading({ className, variant, rows, label, ref, ...props }: LoadingProps): JSX.Element;
+export { Loading }
+export { Loading as Loading_alias_1 }
+
 /**
  * Renders an animated loading indicator with optional label.
  * @param props - variant + label
@@ -1701,6 +1910,32 @@ declare const loadingIndicatorVariants: (props?: ({
 export { loadingIndicatorVariants }
 export { loadingIndicatorVariants as loadingIndicatorVariants_alias_1 }
 
+declare interface LoadingProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "role">, VariantProps<typeof loadingVariants> {
+    /** Forwarded ref onto the status region. */
+    ref?: React_2.Ref<HTMLDivElement>;
+    /**
+     * Number of placeholder rows to render. Each row may contain multiple
+     * Skeleton elements depending on `variant` — `list` emits 1 Skeleton
+     * per row; `card` emits 3 (heading + 2 body lines); `stack` emits 3
+     * (avatar + 2 text lines). Default 3.
+     */
+    rows?: number;
+    /** Optional sr-only label that screen readers announce. Default "Loading…". */
+    label?: string;
+}
+export { LoadingProps }
+export { LoadingProps as LoadingProps_alias_1 }
+
+declare const loadingSchema: ComponentSchemaDefinition;
+export { loadingSchema }
+export { loadingSchema as loadingSchema_alias_1 }
+
+declare const loadingVariants: (props?: ({
+    variant?: "list" | "card" | "stack" | null | undefined;
+} & ClassProp) | undefined) => string;
+export { loadingVariants }
+export { loadingVariants as loadingVariants_alias_1 }
+
 /**
  * Renders streaming-safe markdown.
  * @param props - children string + optional Streamdown overrides
@@ -2832,6 +3067,58 @@ declare const TabsTrigger: React_2.ForwardRefExoticComponent<Omit<TabsPrimitive.
 export { TabsTrigger }
 export { TabsTrigger as TabsTrigger_alias_1 }
 
+/**
+ * An interactive tag / chip primitive — Badge with an optional dismiss
+ * affordance. Mirrors {@link Badge}'s CVA variants so the visual sibling
+ * is obvious; adds a built-in close button when `onRemove` is provided.
+ *
+ * For non-interactive labels (status indicators, counts) use {@link Badge}
+ * directly. For "click to filter" state-bearing chips, use Toggle or
+ * ToggleGroup — Tag is for "this token represents a value the user can
+ * dismiss" (filters, multi-select selections, draft attachments).
+ *
+ * @example
+ * ```tsx
+ * <Tag variant="secondary" onRemove={() => removeFilter("urgent")}>
+ *   Urgent
+ * </Tag>
+ * ```
+ *
+ * @returns A span containing the label + optional icon + optional close button.
+ */
+declare function Tag({ className, variant, icon, onRemove, removeLabel, children, ref, ...props }: TagProps): JSX.Element;
+export { Tag }
+export { Tag as Tag_alias_1 }
+
+declare interface TagProps extends Omit<React_2.HTMLAttributes<HTMLSpanElement>, "onRemove">, VariantProps<typeof tagVariants> {
+    /** Forwarded ref onto the root span element. */
+    ref?: React_2.Ref<HTMLSpanElement>;
+    /** Optional leading icon (`<svg>` or component). Sized 12×12. */
+    icon?: React_2.ReactNode;
+    /**
+     * Click handler for the close button. When provided, an inline ✕ button
+     * is rendered after the children with an `aria-label` derived from the
+     * children's string content (or a generic "Remove" if no string can be
+     * extracted). Pass undefined for a non-interactive Tag — at that point,
+     * prefer Badge directly.
+     */
+    onRemove?: () => void;
+    /** Override the auto-derived `aria-label` on the close button. */
+    removeLabel?: string;
+}
+export { TagProps }
+export { TagProps as TagProps_alias_1 }
+
+declare const tagSchema: ComponentSchemaDefinition;
+export { tagSchema }
+export { tagSchema as tagSchema_alias_1 }
+
+declare const tagVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & ClassProp) | undefined) => string;
+export { tagVariants }
+export { tagVariants as tagVariants_alias_1 }
+
 declare const Textarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea }
 export { Textarea as Textarea_alias_1 }
@@ -2999,6 +3286,91 @@ declare const toggleVariants: (props?: ({
 export { toggleVariants }
 export { toggleVariants as toggleVariants_alias_1 }
 
+/**
+ * Root toolbar element. Wraps Radix `Toolbar.Root` with the canonical
+ * Hex Core token + visual styling. Pass children consisting of
+ * `ToolbarButton`, `ToolbarToggleGroup`, `ToolbarSeparator`, and
+ * `ToolbarLink` — Radix handles arrow-key roving focus across them
+ * automatically.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Editor controls">
+ *   <ToolbarButton onClick={onUndo}>Undo</ToolbarButton>
+ *   <ToolbarButton onClick={onRedo}>Redo</ToolbarButton>
+ *   <ToolbarSeparator />
+ *   <ToolbarToggleGroup type="single" defaultValue="left">
+ *     <ToolbarToggleItem value="left">Left</ToolbarToggleItem>
+ *     <ToolbarToggleItem value="center">Center</ToolbarToggleItem>
+ *     <ToolbarToggleItem value="right">Right</ToolbarToggleItem>
+ *   </ToolbarToggleGroup>
+ * </Toolbar>
+ * ```
+ */
+declare function Toolbar({ className, orientation, ref, ...props }: ToolbarProps): JSX.Element;
+export { Toolbar }
+export { Toolbar as Toolbar_alias_1 }
+
+/** A push button inside the toolbar. */
+declare function ToolbarButton({ className, ref, ...props }: React_2.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button> & {
+    ref?: React_2.Ref<React_2.ElementRef<typeof ToolbarPrimitive.Button>>;
+}): JSX.Element;
+export { ToolbarButton }
+export { ToolbarButton as ToolbarButton_alias_1 }
+
+/** A link inside the toolbar — renders an `<a>` with toolbar focus semantics. */
+declare function ToolbarLink({ className, ref, ...props }: React_2.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> & {
+    ref?: React_2.Ref<React_2.ElementRef<typeof ToolbarPrimitive.Link>>;
+}): JSX.Element;
+export { ToolbarLink }
+export { ToolbarLink as ToolbarLink_alias_1 }
+
+/**
+ * Toolbar root props. `aria-label` is required — Radix Toolbar.Root
+ * mounts as a `role="toolbar"` landmark, and AT users will hear an
+ * unlabelled "toolbar" landmark when no visible heading sits adjacent.
+ * If a visible heading IS present, pair it via `aria-labelledby` instead.
+ */
+declare interface ToolbarProps extends Omit<React_2.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root>, "aria-label"> {
+    /** Forwarded ref onto the Radix `Toolbar.Root`. */
+    ref?: React_2.Ref<React_2.ElementRef<typeof ToolbarPrimitive.Root>>;
+    /** Required accessible name for the toolbar landmark. */
+    "aria-label": string;
+}
+export { ToolbarProps }
+export { ToolbarProps as ToolbarProps_alias_1 }
+
+declare const toolbarSchema: ComponentSchemaDefinition;
+export { toolbarSchema }
+export { toolbarSchema as toolbarSchema_alias_1 }
+
+/** A vertical (or horizontal, in vertical toolbars) divider. */
+declare function ToolbarSeparator({ className, ref, ...props }: React_2.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator> & {
+    ref?: React_2.Ref<React_2.ElementRef<typeof ToolbarPrimitive.Separator>>;
+}): JSX.Element;
+export { ToolbarSeparator }
+export { ToolbarSeparator as ToolbarSeparator_alias_1 }
+
+/** A group of mutually-exclusive (`type='single'`) or independent (`type='multiple'`) toggle items. */
+declare function ToolbarToggleGroup({ className, ref, ...props }: React_2.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup> & {
+    ref?: React_2.Ref<React_2.ElementRef<typeof ToolbarPrimitive.ToggleGroup>>;
+}): JSX.Element;
+export { ToolbarToggleGroup }
+export { ToolbarToggleGroup as ToolbarToggleGroup_alias_1 }
+
+/** Individual toggle item — exposes `data-state="on"` for the on style. */
+declare function ToolbarToggleItem({ className, ref, ...props }: React_2.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> & {
+    ref?: React_2.Ref<React_2.ElementRef<typeof ToolbarPrimitive.ToggleItem>>;
+}): JSX.Element;
+export { ToolbarToggleItem }
+export { ToolbarToggleItem as ToolbarToggleItem_alias_1 }
+
+declare const toolbarVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & ClassProp) | undefined) => string;
+export { toolbarVariants }
+export { toolbarVariants as toolbarVariants_alias_1 }
+
 /**
  * Renders a tool-invocation card with collapsible details.
  * @param props - tool name, state, optional args/result
@@ -3074,6 +3446,85 @@ declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive
 export { TooltipTrigger }
 export { TooltipTrigger as TooltipTrigger_alias_1 }
 
+/**
+ * Generic hierarchical list with roving-tabindex keyboard navigation —
+ * arrow keys move focus, → expands, ← collapses, Home / End jump to
+ * first / last visible row, Enter / Space activates the focused node.
+ *
+ * Distinct from {@link FileTree} (which adds folder/file icon-by-extension
+ * logic baked in) and {@link Accordion} (two-level groupings without
+ * item-selection semantics).
+ *
+ * @example
+ * ```tsx
+ * <Tree
+ *   aria-label="Org chart"
+ *   data={[
+ *     { id: "ceo", label: "CEO", children: [
+ *       { id: "cto", label: "CTO", children: [
+ *         { id: "eng-lead", label: "Eng Lead" },
+ *       ]},
+ *       { id: "cmo", label: "CMO" },
+ *     ]},
+ *   ]}
+ *   defaultExpanded={["ceo"]}
+ *   onSelect={(id) => console.log(id)}
+ * />
+ * ```
+ */
+declare function Tree({ data, defaultExpanded, expanded: expandedProp, onExpandedChange, selected: selectedProp, onSelect, "aria-label": ariaLabel, className, ref, }: TreeProps): JSX.Element;
+export { Tree }
+export { Tree as Tree_alias_1 }
+
+/**
+ * One node in a Tree. Generic — the shape is content-agnostic so consumers
+ * can render org charts, taxonomy pickers, navigation trees, etc.
+ *
+ * For filesystem-shaped data (with file-extension icon logic baked in),
+ * prefer {@link FileTree} instead.
+ */
+declare interface TreeNode {
+    /** Stable unique id used as React key + ARIA target. */
+    id: string;
+    /** Display name. */
+    label: React_2.ReactNode;
+    /** Nested children. Presence (even empty array) marks the node as a parent. */
+    children?: TreeNode[];
+    /** Optional icon (default: a chevron + dot). */
+    icon?: React_2.ReactNode;
+    /** Disable selection + expand toggle. */
+    disabled?: boolean;
+}
+export { TreeNode }
+export { TreeNode as TreeNode_alias_1 }
+
+declare interface TreeProps {
+    /** Forwarded ref onto the root `<ul role="tree">`. */
+    ref?: React_2.Ref<HTMLUListElement>;
+    /** Root nodes. */
+    data: TreeNode[];
+    /** Uncontrolled initial expanded ids. */
+    defaultExpanded?: string[];
+    /** Controlled expanded ids. */
+    expanded?: string[];
+    /** Fired when expanded set changes (array of ids). */
+    onExpandedChange?: (ids: string[]) => void;
+    /** Controlled selected node id. */
+    selected?: string;
+    /** Fired when the user activates a node (click, Enter, or Space). */
+    onSelect?: (id: string) => void;
+    /** Required accessible name. */
+    "aria-label": string;
+    /** Optional additional class names. */
+    className?: string;
+}
+export { TreeProps }
+export { TreeProps as TreeProps_alias_1 }
+
+declare const treeSchema: ComponentSchemaDefinition;
+export { treeSchema }
+export { treeSchema as treeSchema_alias_1 }
+
 /**
  * Hook that returns the current field's id, name, error, and derived aria ids.
  * Must be called inside a FormField + FormItem subtree.

package/dist/attachment.d.ts

@@ -0,0 +1,4 @@
+export { AttachmentFile_alias_1 as AttachmentFile } from './_tsup-dts-rollup.js';
+export { AttachmentProps_alias_1 as AttachmentProps } from './_tsup-dts-rollup.js';
+export { Attachment_alias_1 as Attachment } from './_tsup-dts-rollup.js';
+export { attachmentVariants_alias_1 as attachmentVariants } from './_tsup-dts-rollup.js';

package/dist/attachment.js

@@ -0,0 +1,157 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var attachmentVariants = cva(
+  [
+    "group/attachment relative inline-flex items-center gap-[var(--gap-sm,0.5rem)] rounded-md border border-border bg-card",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        file: "px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] max-w-xs",
+        image: "p-0 overflow-hidden"
+      }
+    },
+    defaultVariants: { variant: "file" }
+  }
+);
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function detectVariant(file) {
+  const preview = "preview" in file ? file.preview : void 0;
+  const isImage = file.type.startsWith("image/");
+  return isImage && preview ? "image" : "file";
+}
+function resolvePreview(file) {
+  return "preview" in file ? file.preview : void 0;
+}
+function Attachment({
+  className,
+  variant,
+  file,
+  onRemove,
+  progress,
+  ref,
+  ...props
+}) {
+  const preview = resolvePreview(file);
+  const detected = detectVariant(file);
+  const resolvedVariant = variant === "image" && !preview ? "file" : variant ?? detected;
+  const showProgress = typeof progress === "number" && progress >= 0 && progress < 1;
+  const progressPercent = showProgress ? Math.round(progress * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(attachmentVariants({ variant: resolvedVariant }), className),
+      ...props,
+      children: [
+        resolvedVariant === "image" && preview ? (
+          // Intentional plain <img> (not next/image) — Attachment is
+          // framework-agnostic. Consumers can swap in next/image at the
+          // callsite when they want optimization.
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: file.name,
+              className: "block h-20 w-20 object-cover"
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: file.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatSize(file.size) })
+          ] })
+        ] }),
+        showProgress ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": progressPercent,
+            "aria-label": `Uploading ${file.name}`,
+            className: "absolute inset-x-0 bottom-0 h-1 overflow-hidden rounded-b-md bg-muted",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary transition-[width] duration-[var(--duration-normal,200ms)] ease-out",
+                style: { width: `${progressPercent}%` }
+              }
+            )
+          }
+        ) : null,
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": `Remove ${file.name}`,
+            className: cn(
+              "absolute -right-2 -top-2 inline-flex h-5 w-5 items-center justify-center rounded-full",
+              "bg-card border border-border text-foreground shadow-sm",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+              "hover:bg-accent hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              "active:scale-90"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "size-3",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function FileIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+      ]
+    }
+  );
+}
+
+export { Attachment, attachmentVariants };
+//# sourceMappingURL=attachment.js.map
+//# sourceMappingURL=attachment.js.map