@panphora/bevel 0.1.0

package/dist/react/components/field.d.ts

@@ -0,0 +1,32 @@
+import { Form as BaseForm } from '@base-ui/react/form';
+export declare const Field: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/field").FieldRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/field").FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/field").FieldDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Error: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/field").FieldErrorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/field").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/field").FieldItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Validity: import("react").FC<import("@base-ui/react/field").FieldValidityProps>;
+};
+export declare const Fieldset: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/fieldset").FieldsetRootProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Legend: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/fieldset").FieldsetLegendProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const Form: (<FormValues extends Record<string, any> = Record<string, any>>(props: BaseForm.Props<FormValues> & {
+    ref?: import("react").Ref<HTMLFormElement> | undefined;
+}) => import("react").JSX.Element) & {
+    Fields: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Actions: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};

package/dist/react/components/field.js

@@ -0,0 +1,27 @@
+"use client";
+import { Field as BaseField } from "@base-ui/react/field";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { Form as BaseForm } from "@base-ui/react/form";
+import { nativePart, styled } from "../internal/part.js";
+const Field = {
+  Root: styled(BaseField.Root, "bevel-r-field"),
+  Label: styled(BaseField.Label, "bevel-r-field__label"),
+  Description: styled(BaseField.Description, "bevel-r-field__hint"),
+  Error: styled(BaseField.Error, "bevel-r-field-error"),
+  Control: styled(BaseField.Control, "bevel-r-input"),
+  Item: styled(BaseField.Item, "bevel-r-field__item"),
+  Validity: BaseField.Validity
+};
+const Fieldset = {
+  Root: styled(BaseFieldset.Root, "bevel-r-fieldset"),
+  Legend: styled(BaseFieldset.Legend, "bevel-r-fieldset__legend")
+};
+const Form = Object.assign(styled(BaseForm, "bevel-r-form"), {
+  Fields: nativePart("div", "bevel-r-validation-form__fields"),
+  Actions: nativePart("div", "bevel-r-validation-form__actions")
+});
+export {
+  Field,
+  Fieldset,
+  Form
+};

package/dist/react/components/file-tree.d.ts

@@ -0,0 +1,75 @@
+import type { ContextMenuItem, ContextMenuOpenContext, FileTree as FileTreeModel, FileTreeIconConfig, FileTreeOptions } from '@pierre/trees';
+import { type ComponentProps, type ReactNode, type RefCallback } from 'react';
+/**
+ * Upload paths carry this zero-width prefix so a folder, a site and an upload
+ * may share a name. Pierre's identity is the path: `['docs/', 'docs']` throws
+ * `Path collides with an existing entry`, and two `index.html` throw
+ * `Duplicate path`. The marker also sorts every upload after every folder and
+ * site, because folder and site names are restricted to `[a-z0-9_-]`.
+ */
+export declare const UPLOAD_MARK = "\u200B";
+/** Bevel library art as one sprite sheet, injected into pierre's shadow root. */
+export declare const fileTreeSpriteSheet: string;
+export declare const fileTreeIcons: FileTreeIconConfig;
+/**
+ * The six things a `--trees-*-override` cannot reach. Injected into pierre's
+ * `@layer unsafe`, which its own stylesheet declares last, so nothing here
+ * fights specificity. Every colour is a Bevel token read through the shadow
+ * boundary; the geometry is pierre's own computed `--trees-*` values.
+ */
+export declare const fileTreeUnsafeCSS: string;
+export interface FileTreeProps extends Omit<ComponentProps<'div'>, 'children'> {
+    model: FileTreeModel;
+    header?: ReactNode;
+    renderContextMenu?: (item: ContextMenuItem, context: ContextMenuOpenContext) => ReactNode;
+}
+/**
+ * The panel a pierre tree lives in. It carries `bevel-r-file-tree`, which is
+ * where every `--trees-*-override` is declared; custom properties inherit
+ * across the shadow boundary, so the tree draws with Bevel tokens and a plain
+ * appearance leaves pierre's own defaults alone.
+ */
+export declare function FileTree({ model, header, renderContextMenu, ...props }: FileTreeProps): import("react").JSX.Element;
+/** Options a consumer may set. `sort` and `presorted` are not among them. */
+export type BevelFileTreeOptions = Omit<FileTreeOptions, 'sort' | 'presorted'>;
+/**
+ * Bevel's defaults for a dashboard sidebar, plus the sprite and the unsafe
+ * block. Exported on its own so a server render or a web-component host can
+ * build the same options without a React hook.
+ *
+ * `sort` and `presorted` are removed rather than merely left out of the type.
+ * Pierre restores expansion by walking each directory's children and giving up
+ * as soon as a child's natural sort key passes the target, so any other
+ * ordering makes that early exit fire on the wrong row and the tree reopens
+ * somewhere else. A cast or a JavaScript caller would otherwise slip one past
+ * the signature.
+ */
+export declare function fileTreeOptions(options: BevelFileTreeOptions): FileTreeOptions;
+/** The same options, mounted. Pierre freezes them at mount; later changes are ignored. */
+export declare function useFileTree(options: BevelFileTreeOptions): {
+    model: FileTreeModel;
+};
+export interface FileTreeDropTarget {
+    /** The folder under the pointer, or the empty string for the tree's root. */
+    directoryPath: string;
+    /** The row element inside pierre's open shadow root, or the panel for the root. */
+    element: HTMLElement;
+}
+export interface FileTreeOutsideDropOptions {
+    model: FileTreeModel;
+    onDrop: (target: FileTreeDropTarget, event: DragEvent) => void;
+    canDrop?: (target: FileTreeDropTarget) => boolean;
+    /** Milliseconds a collapsed folder is hovered before it opens. */
+    openDelay?: number;
+    disabled?: boolean;
+}
+/**
+ * Accept a drag that did not start inside the tree. Pierre's own dragover and
+ * drop handlers return early without a drag session of their own, so this is a
+ * host listener on the panel: it reads the row out of `composedPath()` (the
+ * shadow root is open), paints it with `data-bevel-react-drop-target`, opens a
+ * collapsed folder after a hover delay, and hands the resolved folder to the
+ * consumer. It reads only `data-item-type` and `data-item-path`, the two row
+ * attributes the theme already depends on. No fork, no patch.
+ */
+export declare function useFileTreeOutsideDrop(options: FileTreeOutsideDropOptions): RefCallback<HTMLElement>;

package/dist/react/components/file-tree.js

@@ -0,0 +1,247 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { FileTree as PierreFileTree, useFileTree as usePierreFileTree } from "@pierre/trees/react";
+import { ICONS } from "@panphora/bevel/icons";
+import { useMemo, useRef } from "react";
+import { nativePart } from "../internal/part.js";
+import { dropEffectFor } from "../internal/drop-effect.js";
+const UPLOAD_MARK = "\u200B";
+const GLYPHS = {
+  "caret-down": "chevron-down",
+  folder: "folder",
+  "folder-open": "folder-open",
+  "file-html": "file-html",
+  file: "doc",
+  image: "image",
+  "dots-three": "more"
+};
+const glyph = (name) => ICONS[GLYPHS[name]];
+const paint = (icon) => icon.kind === "house" ? 'fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"' : icon.kind === "round" ? `fill="none" stroke="currentColor" stroke-width="${icon.strokeWidth}" stroke-linecap="round" stroke-linejoin="round"` : 'fill="currentColor"';
+const symbol = (id, icon) => `<symbol id="${id}" viewBox="${icon.viewBox}" ${paint(icon)}>${icon.inner}</symbol>`;
+const fileTreeSpriteSheet = '<svg data-icon-sprite aria-hidden="true" width="0" height="0">' + Object.keys(GLYPHS).map((name) => symbol(`hc-${name}`, glyph(name))).join("") + "</svg>";
+const at = (px, name) => {
+  const icon = glyph(name);
+  const [x, y, width, height] = icon.viewBox.split(" ").map(Number);
+  const box = width * 16 / px, offsetX = x - (box - width) / 2, offsetY = y - (box - height) / 2;
+  return { name: `hc-${name}`, width: 16, height: 16, viewBox: `${offsetX} ${offsetY} ${box} ${box}` };
+};
+const fileTreeIcons = {
+  set: "none",
+  spriteSheet: fileTreeSpriteSheet,
+  remap: {
+    "file-tree-icon-chevron": at(11, "caret-down"),
+    "file-tree-icon-file": at(15, "file"),
+    "file-tree-icon-ellipsis": at(15, "dots-three")
+  },
+  byFileExtension: {
+    html: at(15, "file-html"),
+    png: at(15, "image"),
+    jpg: at(15, "image"),
+    jpeg: at(15, "image"),
+    gif: at(15, "image"),
+    svg: at(15, "image"),
+    webp: at(15, "image"),
+    pdf: at(15, "file"),
+    md: at(15, "file"),
+    txt: at(15, "file")
+  }
+};
+const dataUri = (name) => {
+  const icon = glyph(name);
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${icon.viewBox}" ${paint(icon)}>${icon.inner}</svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+const fileTreeUnsafeCSS = `
+/* a. folder rows render a chevron and nothing else; the drawing has a folder
+      glyph beside it, and pierre has no icon slot for one. */
+[data-item-type="folder"] > [data-item-section="icon"] {
+  width: auto;
+  gap: var(--trees-item-row-gap);
+}
+[data-item-type="folder"] > [data-item-section="icon"]::after {
+  content: "";
+  flex: none;
+  width: var(--trees-icon-width);
+  height: var(--trees-icon-width);
+  background-color: currentColor;
+  mask: ${dataUri("folder")} center / contain no-repeat;
+}
+[aria-expanded="true"][data-item-type="folder"] > [data-item-section="icon"]::after {
+  mask-image: ${dataUri("folder-open")};
+}
+
+/* b. a file's icon sits in the chevron column; the drawing keeps the chevron
+      column empty on files and puts every icon in the second column. */
+[data-item-type="file"] > [data-item-section="icon"] {
+  margin-left: calc(var(--trees-icon-width) + var(--trees-item-row-gap));
+}
+
+/* c. indent guides are opacity 0 until :host(:hover). The drawing shows them
+      always, and the gate is a rule, not a variable. */
+[data-item-section="spacing-item"] { opacity: .75; }
+
+/* d. the 2px brass bar and 500 weight on the selected row. */
+[data-type="item"][data-item-selected="true"] {
+  font-weight: 500;
+}
+[data-type="item"][data-item-selected="true"]::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 2px;
+  background: var(--bevel-brass);
+  pointer-events: none;
+}
+[data-type="item"][data-item-selected="true"] > [data-item-section="icon"] {
+  color: var(--bevel-brass);
+}
+
+/* e. uploads read dim. Pierre colours a row per file type only for git status,
+      and the marker is already the thing that makes an upload addressable, so
+      two attribute matches replace the extension list the spike carried. The
+      marker sits on the leaf, so a nested upload is docs/<mark>logo.png and a
+      prefix match alone would miss every upload that is not at the root. */
+[data-item-path^="${"\u200B"}"],
+[data-item-path*="/${"\u200B"}"] { color: var(--bevel-faint); }
+[data-item-path^="${"\u200B"}"] > [data-item-section="icon"],
+[data-item-path*="/${"\u200B"}"] > [data-item-section="icon"] { color: var(--bevel-faint); }
+
+/* f. pierre's own drop target reuses --trees-selected-bg, so a drag over the
+      selected folder shows nothing. Give it its own tint. */
+[data-type="item"][data-item-drag-target="true"] {
+  background-color: var(--bevel-brass-soft);
+  box-shadow: inset 0 0 0 1px var(--bevel-brass);
+}
+
+/* g. the same tint for a drag that started outside the tree, which pierre
+      ignores. useFileTreeOutsideDrop writes the attribute. */
+[data-type="item"][data-bevel-react-drop-target="true"] {
+  background-color: var(--bevel-brass-soft);
+  box-shadow: inset 0 0 0 1px var(--bevel-brass);
+}
+`.trim();
+const FileTreeRoot = nativePart("div", "bevel-r-file-tree");
+function FileTree({ model, header, renderContextMenu, ...props }) {
+  return /* @__PURE__ */ jsx(FileTreeRoot, { ...props, children: /* @__PURE__ */ jsx(PierreFileTree, { model, header, renderContextMenu }) });
+}
+function fileTreeOptions(options) {
+  const consumer = { ...options };
+  delete consumer.sort;
+  delete consumer.presorted;
+  return {
+    itemHeight: 28,
+    initialExpansion: "closed",
+    flattenEmptyDirectories: false,
+    search: false,
+    fileTreeSearchMode: "hide-non-matches",
+    ...consumer,
+    icons: options.icons ?? fileTreeIcons,
+    unsafeCSS: options.unsafeCSS ? `${fileTreeUnsafeCSS}
+${options.unsafeCSS}` : fileTreeUnsafeCSS
+  };
+}
+function useFileTree(options) {
+  return usePierreFileTree(fileTreeOptions(options));
+}
+function useFileTreeOutsideDrop(options) {
+  const latest = useRef(options);
+  latest.current = options;
+  return useMemo(() => (element) => {
+    if (!element) return;
+    let painted = null;
+    let timer;
+    let internal = false;
+    const clear = () => {
+      if (timer !== void 0) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+      painted?.removeAttribute("data-bevel-react-drop-target");
+      painted = null;
+    };
+    const resolve = (event) => {
+      for (const node of event.composedPath()) {
+        if (!(node instanceof Element)) continue;
+        const kind = node.getAttribute("data-item-type");
+        if (!kind) continue;
+        if (kind !== "folder") return null;
+        return { directoryPath: node.getAttribute("data-item-path") ?? "", element: node };
+      }
+      return { directoryPath: "", element };
+    };
+    const paint2 = (target) => {
+      if (painted === target.element) return;
+      clear();
+      if (target.element === element) return;
+      painted = target.element;
+      painted.setAttribute("data-bevel-react-drop-target", "true");
+      timer = setTimeout(() => {
+        const item = latest.current.model.getItem(target.directoryPath);
+        if (item && "expand" in item && !item.isExpanded()) item.expand();
+      }, latest.current.openDelay ?? 600);
+    };
+    const allowed = (target) => latest.current.canDrop?.(target) ?? true;
+    const onDocumentDragStart = (event) => {
+      internal = event.composedPath().includes(element);
+    };
+    const external = (event) => event.dataTransfer?.types?.includes("Files") ?? false;
+    const effectFor = (event) => dropEffectFor({ external: external(event), effectAllowed: event.dataTransfer?.effectAllowed });
+    const onDragEnd = () => {
+      internal = false;
+      clear();
+    };
+    const onDragOver = (event) => {
+      if (internal && !external(event) || latest.current.disabled) return;
+      const target = resolve(event);
+      if (!target || !allowed(target)) {
+        clear();
+        return;
+      }
+      const allowedBySource = event.dataTransfer?.effectAllowed;
+      if (allowedBySource === "none") {
+        clear();
+        return;
+      }
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = effectFor(event);
+      paint2(target);
+    };
+    const onDragLeave = (event) => {
+      const next = event.relatedTarget;
+      if (next instanceof Node && element.contains(next)) return;
+      clear();
+    };
+    const onDrop = (event) => {
+      if (internal && !external(event) || latest.current.disabled) return;
+      const target = resolve(event);
+      clear();
+      if (!target || !allowed(target)) return;
+      event.preventDefault();
+      latest.current.onDrop(target, event);
+    };
+    document.addEventListener("dragstart", onDocumentDragStart, true);
+    element.addEventListener("dragend", onDragEnd);
+    element.addEventListener("dragover", onDragOver);
+    element.addEventListener("dragleave", onDragLeave);
+    element.addEventListener("drop", onDrop);
+    return () => {
+      clear();
+      document.removeEventListener("dragstart", onDocumentDragStart, true);
+      element.removeEventListener("dragend", onDragEnd);
+      element.removeEventListener("dragover", onDragOver);
+      element.removeEventListener("dragleave", onDragLeave);
+      element.removeEventListener("drop", onDrop);
+    };
+  }, []);
+}
+export {
+  FileTree,
+  UPLOAD_MARK,
+  fileTreeIcons,
+  fileTreeOptions,
+  fileTreeSpriteSheet,
+  fileTreeUnsafeCSS,
+  useFileTree,
+  useFileTreeOutsideDrop
+};

package/dist/react/components/file.d.ts

@@ -0,0 +1,43 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface FileInputProps extends Omit<ComponentProps<'input'>, 'type' | 'value' | 'defaultValue'> {
+    onFiles?: (files: File[], event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare function FileInput({ onFiles, onChange, ...props }: FileInputProps): import("react").JSX.Element;
+declare const RootPart: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
+    variant?: "compact" | undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & {
+    variant?: "compact" | undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+export interface FileFieldProps extends Omit<ComponentProps<typeof RootPart>, 'defaultValue'> {
+    value?: File[];
+    defaultValue?: File[];
+    onValueChange?: (files: File[], details: ChangeDetails) => void;
+    disabled?: boolean;
+}
+declare function FileRoot({ value, defaultValue, onValueChange, disabled, ...props }: FileFieldProps): import("react").JSX.Element;
+declare function FieldInput({ ref, onFiles, onChange, disabled, ...props }: FileInputProps): import("react").JSX.Element;
+declare function Trigger({ onClick, disabled, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Name({ children, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+declare function Remove({ onClick, disabled, children, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+export declare const FileField: {
+    Root: typeof FileRoot;
+    Input: typeof FieldInput;
+    Trigger: typeof Trigger;
+    Name: typeof Name;
+    Remove: typeof Remove;
+    Link: {
+        (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/react/components/file.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart, nativeVariants, styled } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { useFormReset } from "../internal/form-reset.js";
+import { Button } from "./button.js";
+const Input = nativePart("input", "bevel-r-file__input");
+function FileInput({ onFiles, onChange, ...props }) {
+  return /* @__PURE__ */ jsx(Input, { ...props, type: "file", onChange: (event) => {
+    onChange?.(event);
+    if (!event.defaultPrevented) onFiles?.(Array.from(event.currentTarget.files ?? []), event);
+  } });
+}
+const Context = createContext(null);
+function useFiles() {
+  const context = useContext(Context);
+  if (!context) throw new Error("FileField parts must be inside FileField.Root.");
+  return context;
+}
+const RootPart = nativeVariants("div", "bevel-r-file", ["compact"]);
+function FileRoot({ value, defaultValue = [], onValueChange, disabled = false, ...props }) {
+  const [files, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const input = useRef(null);
+  useFormReset(input, (event) => change(defaultValue, { reason: "reset", event }));
+  useEffect(() => {
+    if (!files.length && input.current) input.current.value = "";
+  }, [files]);
+  return /* @__PURE__ */ jsx(Context, { value: { files, change, input, disabled }, children: /* @__PURE__ */ jsx(RootPart, { ...props }) });
+}
+function FieldInput({ ref, onFiles, onChange, disabled, ...props }) {
+  const context = useFiles();
+  const [revision, setRevision] = useState(0);
+  const merged = useMergedRefs(ref, context.input);
+  useEffect(() => {
+    const input = context.input.current, selected = Array.from(input?.files ?? []);
+    if (input && (selected.length !== context.files.length || selected.some((file, index) => file !== context.files[index]))) input.value = "";
+  }, [context.files, context.input, revision]);
+  return /* @__PURE__ */ jsx(FileInput, { ...props, ref: merged, disabled: disabled || context.disabled, onChange: (event) => {
+    onChange?.(event);
+    setRevision((revision2) => revision2 + 1);
+  }, onFiles: (files, event) => {
+    onFiles?.(files, event);
+    if (!event.defaultPrevented) context.change(files, { reason: "select", event });
+  } });
+}
+function Trigger({ onClick, disabled, ...props }) {
+  const context = useFiles();
+  return /* @__PURE__ */ jsx(Button, { ...props, disabled: disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.input.current?.click();
+  } });
+}
+const NamePart = nativePart("span", "bevel-r-file__name");
+function Name({ children, ...props }) {
+  const { files } = useFiles();
+  return /* @__PURE__ */ jsx(NamePart, { ...props, "data-filled": files.length ? "" : void 0, children: children ?? (files.length ? files.map((file) => file.name).join(", ") : "No file chosen") });
+}
+const RemovePart = styled(Button, "bevel-r-file__remove");
+function Remove({ onClick, disabled, children = "\xD7", ...props }) {
+  const context = useFiles();
+  return /* @__PURE__ */ jsx(RemovePart, { "aria-label": "Remove file", ...props, disabled: disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    context.change([], { reason: "remove", event });
+  }, children });
+}
+const FileField = { Root: FileRoot, Input: FieldInput, Trigger, Name, Remove, Link: nativePart("a", "bevel-r-file__name") };
+export {
+  FileField,
+  FileInput
+};