@panphora/bevel 0.1.0

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

@@ -0,0 +1,118 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { nativePart } from "../internal/part.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { visibleTree, treeParent } from "../models/tree.js";
+const Context = createContext(null);
+function useTree() {
+  const context = useContext(Context);
+  if (!context) throw new Error("TreeView parts require TreeView.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-tree");
+const ButtonItem = nativePart("button", "bevel-r-tree__item");
+const LinkItem = nativePart("a", "bevel-r-tree__item");
+function Root({ items, selectedId, defaultSelectedId = null, onSelectedIdChange, expandedIds, defaultExpandedIds = [], onExpandedIdsChange, renderNode, children, ref, ...props }) {
+  const [selected, select] = useControllableState({ value: selectedId, defaultValue: defaultSelectedId, onChange: onSelectedIdChange });
+  const [expanded, expand] = useControllableState({ value: expandedIds, defaultValue: defaultExpandedIds, onChange: onExpandedIdsChange });
+  const [focused, setFocused] = useState(selected), root = useRef(null), nodes = useRef(/* @__PURE__ */ new Map()), merged = useMergedRefs(ref, root);
+  const typeahead = useRef({ text: "", at: 0 }), ownedFocus = useRef(false);
+  const visible = visibleTree(items, expanded), enabled = visible.filter((item) => !item.node.disabled);
+  let nextFocus = enabled.some((item) => item.node.id === focused) ? focused : null;
+  let parent = focused;
+  while (!nextFocus && parent) {
+    parent = treeParent(items, parent) ?? null;
+    if (enabled.some((item) => item.node.id === parent)) nextFocus = parent;
+  }
+  nextFocus ??= enabled.find((item) => item.node.id === selected)?.node.id ?? enabled[0]?.node.id ?? null;
+  const focus = (id) => {
+    setFocused(id);
+    nodes.current.get(id)?.focus();
+  };
+  useEffect(() => {
+    if (focused === nextFocus) return;
+    setFocused(nextFocus);
+    const document = root.current?.ownerDocument;
+    if (ownedFocus.current && nextFocus && document && (document.activeElement === document.body || root.current?.contains(document.activeElement))) nodes.current.get(nextFocus)?.focus();
+  }, [focused, nextFocus]);
+  return /* @__PURE__ */ jsx(Context, { value: { visible, selected, expanded, focused: nextFocus, nodes: nodes.current, select, expand: (id, open, details) => expand(open ? [...expanded, id] : expanded.filter((item) => item !== id), details), focus, typeahead, renderNode }, children: /* @__PURE__ */ jsx(RootPart, { role: "tree", "aria-label": "Files", ...props, ref: merged, onFocusCapture: (event) => {
+    ownedFocus.current = true;
+    props.onFocusCapture?.(event);
+  }, onBlurCapture: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) ownedFocus.current = false;
+    props.onBlurCapture?.(event);
+  }, children: children ?? /* @__PURE__ */ jsx(Items, {}) }) });
+}
+function Item({ item }) {
+  const tree = useTree(), { node } = item, branch = Boolean(node.children?.length), expanded = tree.expanded.includes(node.id);
+  const enabled = tree.visible.filter((item2) => !item2.node.disabled), index = enabled.findIndex((item2) => item2.node.id === node.id);
+  const props = {
+    role: "treeitem",
+    tabIndex: tree.focused === node.id && !node.disabled ? 0 : -1,
+    "aria-selected": tree.selected === node.id,
+    "aria-expanded": branch ? expanded : void 0,
+    "aria-disabled": node.disabled || void 0,
+    "aria-level": item.level,
+    "aria-setsize": item.setSize,
+    "aria-posinset": item.posInSet,
+    style: { paddingInlineStart: `${(item.level - 1) * 1.25 + 0.5}rem` },
+    ref: (element) => {
+      if (element) tree.nodes.set(node.id, element);
+      else tree.nodes.delete(node.id);
+    },
+    onFocus: () => tree.focus(node.id),
+    onClick: (event) => {
+      if (node.disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (branch) {
+        event.preventDefault();
+        tree.expand(node.id, !expanded, { reason: "expand", event });
+      } else tree.select(node.id, { reason: "select", event });
+    },
+    onKeyDown: (event) => {
+      if (node.disabled || event.nativeEvent.isComposing) return;
+      let target;
+      if (event.key === "ArrowDown") target = enabled[(index + 1) % enabled.length]?.node.id;
+      else if (event.key === "ArrowUp") target = enabled[(index - 1 + enabled.length) % enabled.length]?.node.id;
+      else if (event.key === "Home") target = enabled[0]?.node.id;
+      else if (event.key === "End") target = enabled.at(-1)?.node.id;
+      else if (event.key === "ArrowRight" && branch) {
+        event.preventDefault();
+        if (!expanded) tree.expand(node.id, true, { reason: "expand", event });
+        else target = enabled.find((item2) => item2.parentId === node.id)?.node.id;
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (branch && expanded) tree.expand(node.id, false, { reason: "collapse", event });
+        else target = item.parentId ?? void 0;
+      } else if (event.key === "Enter" || event.key === " ") {
+        if (!node.href || event.key === " ") event.preventDefault();
+        tree.select(node.id, { reason: "select", event });
+      } else if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
+        const now = Date.now();
+        tree.typeahead.current = { text: (now - tree.typeahead.current.at > 700 ? "" : tree.typeahead.current.text) + event.key.toLowerCase(), at: now };
+        target = [...enabled.slice(index + 1), ...enabled.slice(0, index + 1)].find((item2) => item2.node.label.toLowerCase().startsWith(tree.typeahead.current.text))?.node.id;
+      }
+      if (target) {
+        event.preventDefault();
+        tree.focus(target);
+      }
+    },
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      branch && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: expanded ? "\u25BE" : "\u25B8" }),
+      tree.renderNode?.(node) ?? node.label
+    ] })
+  };
+  return node.href ? /* @__PURE__ */ jsx(LinkItem, { ...props, href: node.href }) : /* @__PURE__ */ jsx(ButtonItem, { ...props, type: "button" });
+}
+function Items() {
+  const tree = useTree();
+  return /* @__PURE__ */ jsx(Fragment, { children: tree.visible.map((item) => /* @__PURE__ */ jsx(Item, { item }, item.node.id)) });
+}
+const TreeView = { Root, Items, Header: nativePart("div", "bevel-r-tree__head"), Empty: nativePart("div", "bevel-r-tree__empty") };
+export {
+  TreeView
+};

package/dist/react/components/upload-dropzone.d.ts

@@ -0,0 +1,92 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { FileInput } from './file.js';
+import { Button } from './button.js';
+export interface UploadEntry {
+    id: string;
+    file?: File;
+    name?: string;
+    status: 'selected' | 'uploading' | 'uploaded' | 'error';
+    progress?: number;
+    url?: string;
+    error?: string;
+}
+export interface FileBatch {
+    accepted: Array<{
+        id: string;
+        file: File;
+    }>;
+    rejected: Array<{
+        file: File;
+        name: string;
+        reason: string;
+    }>;
+}
+export interface UploadDropzoneProps extends ComponentProps<'div'> {
+    entries: readonly UploadEntry[];
+    onFiles: (batch: FileBatch) => void;
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    accept?: string;
+    maxBytes?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+}
+declare function Root({ entries, onFiles, onRemove, onRetry, accept, maxBytes, multiple, disabled, onDragOver, onDragLeave, onDrop, ...props }: UploadDropzoneProps): import("react").JSX.Element;
+declare function Input({ ref, onFiles, ...props }: ComponentProps<typeof FileInput>): import("react").JSX.Element;
+declare function Trigger({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Row({ entry, ...props }: ComponentProps<'article'> & {
+    entry: UploadEntry;
+}): import("react").JSX.Element;
+declare function List({ children, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+    children?: (entry: UploadEntry) => ReactNode;
+}): import("react").JSX.Element;
+export declare const UploadDropzone: {
+    Root: typeof Root;
+    Input: typeof Input;
+    Trigger: typeof Trigger;
+    List: typeof List;
+    Row: typeof Row;
+    Copy: {
+        (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;
+    };
+    Name: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Status: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Progress: {
+        (props: import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLProgressElement> & import("react").ProgressHTMLAttributes<HTMLProgressElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Rejection: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+            '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/upload-dropzone.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from "react";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { formatBytes } from "../internal/format.js";
+import { FileInput } from "./file.js";
+import { ImagePreview } from "./image.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useUpload() {
+  const context = useContext(Context);
+  if (!context) throw new Error("UploadDropzone parts require UploadDropzone.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-dropzone");
+const ListPart = nativePart("div", "bevel-r-upload");
+const RowPart = nativePart("article", "bevel-r-upload__row");
+const Copy = nativePart("div", "bevel-r-upload__copy");
+const Actions = nativePart("div", "bevel-r-upload__actions");
+const Name = nativePart("strong", "bevel-r-upload__name");
+const Status = nativePart("span", "bevel-r-upload__status");
+const Progress = nativePart("progress", "bevel-r-upload__progress");
+function Root({ entries, onFiles, onRemove, onRetry, accept, maxBytes = Infinity, multiple = true, disabled = false, onDragOver, onDragLeave, onDrop, ...props }) {
+  const input = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const choose = (files) => {
+    if (disabled) return;
+    const batch = { accepted: [], rejected: [] }, rules = (accept ?? "").split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+    for (const file of files) {
+      const typeAccepted = !rules.length || rules.some((rule) => rule.startsWith(".") ? file.name.toLowerCase().endsWith(rule) : rule.endsWith("/*") ? file.type.toLowerCase().startsWith(rule.slice(0, -1)) : file.type.toLowerCase() === rule);
+      const reason = file.size > maxBytes ? `This file is larger than ${formatBytes(maxBytes)}.` : !typeAccepted ? "File type is not accepted." : !multiple && batch.accepted.length ? "Choose one file." : "";
+      if (reason) batch.rejected.push({ file, name: file.name, reason });
+      else batch.accepted.push({ id: crypto.randomUUID(), file });
+    }
+    onFiles(batch);
+  };
+  return /* @__PURE__ */ jsx(Context, { value: { entries, input, choose, onRemove, onRetry, accept, multiple, disabled }, children: /* @__PURE__ */ jsx(
+    RootPart,
+    {
+      ...props,
+      "aria-disabled": disabled || void 0,
+      "data-bevel-react-dragging": dragging || void 0,
+      onDragOver: (event) => {
+        onDragOver?.(event);
+        if (!event.defaultPrevented && !disabled) {
+          event.preventDefault();
+          setDragging(true);
+        }
+      },
+      onDragLeave: (event) => {
+        onDragLeave?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+      },
+      onDrop: (event) => {
+        onDrop?.(event);
+        setDragging(false);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          choose([...event.dataTransfer.files]);
+        }
+      }
+    }
+  ) });
+}
+function Input({ ref, onFiles, ...props }) {
+  const context = useUpload(), merged = useMergedRefs(ref, context.input);
+  return /* @__PURE__ */ jsx(FileInput, { "aria-label": "Choose files", ...props, ref: merged, accept: context.accept, multiple: context.multiple, disabled: props.disabled || context.disabled, onFiles: (files, event) => {
+    onFiles?.(files, event);
+    if (!event.defaultPrevented) context.choose(files);
+    event.currentTarget.value = "";
+  } });
+}
+function Trigger({ onClick, ...props }) {
+  const context = useUpload();
+  return /* @__PURE__ */ jsx(Button, { ...props, disabled: props.disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.input.current?.click();
+  }, children: props.children ?? "Choose files" });
+}
+function Row({ entry, ...props }) {
+  const context = useUpload();
+  return /* @__PURE__ */ jsxs(RowPart, { ...props, "data-bevel-react-status": entry.status, children: [
+    (entry.url || entry.file?.type.startsWith("image/")) && /* @__PURE__ */ jsx(ImagePreview.Frame, { style: { width: 48, height: 48, flexShrink: 0 }, children: /* @__PURE__ */ jsx(ImagePreview.Image, { alt: "", src: entry.url, file: entry.status === "uploaded" ? void 0 : entry.file }) }),
+    /* @__PURE__ */ jsxs(Copy, { children: [
+      /* @__PURE__ */ jsx(Name, { children: entry.name ?? entry.file?.name ?? "File" }),
+      /* @__PURE__ */ jsx(Status, { role: "status", children: entry.error ?? entry.status }),
+      entry.status === "uploading" && /* @__PURE__ */ jsx(Progress, { "aria-label": "Upload progress", max: 100, value: entry.progress === void 0 ? void 0 : Math.max(0, Math.min(100, entry.progress)) })
+    ] }),
+    /* @__PURE__ */ jsxs(Actions, { children: [
+      entry.url && /* @__PURE__ */ jsx("a", { href: entry.url, children: "Open file" }),
+      entry.status === "error" && entry.file && context.onRetry && /* @__PURE__ */ jsx(Button, { disabled: context.disabled, onClick: () => context.onRetry?.(entry.id), children: "Retry" }),
+      context.onRemove && /* @__PURE__ */ jsx(Button, { disabled: context.disabled, onClick: () => context.onRemove?.(entry.id), children: "Remove" })
+    ] })
+  ] });
+}
+function List({ children, ...props }) {
+  const context = useUpload();
+  return /* @__PURE__ */ jsx(ListPart, { ...props, children: context.entries.map((entry) => children ? /* @__PURE__ */ jsx("div", { children: children(entry) }, entry.id) : /* @__PURE__ */ jsx(Row, { entry }, entry.id)) });
+}
+const UploadDropzone = {
+  Root,
+  Input,
+  Trigger,
+  List,
+  Row,
+  Copy,
+  Actions,
+  Name,
+  Status,
+  Progress,
+  Rejection: nativePart("p", "bevel-r-upload__rejection")
+};
+export {
+  UploadDropzone
+};

package/dist/react/components/wizard-shell.d.ts

@@ -0,0 +1,78 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface WizardStep {
+    id: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface WizardProps extends Omit<ComponentProps<'form'>, 'defaultValue'> {
+    steps: readonly WizardStep[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string, details: ChangeDetails) => void;
+    validateStep?: (id: string) => boolean | Promise<boolean>;
+    onFinish?: () => void | Promise<void>;
+    onValidationError?: (id: string, error?: unknown) => void;
+}
+declare function Root({ steps, value, defaultValue, onValueChange, validateStep, onFinish, onValidationError, onSubmit, ...props }: WizardProps): import("react").JSX.Element;
+declare function Panel({ stepId, ref, ...props }: ComponentProps<'section'> & {
+    stepId: string;
+}): import("react").JSX.Element;
+declare function Step({ stepId, onClick, children, ...props }: ComponentProps<'button'> & {
+    stepId: string;
+}): import("react").JSX.Element;
+declare function Steps(props: ComponentProps<'nav'>): import("react").JSX.Element;
+declare function Finish(props: ComponentProps<typeof Button>): import("react").JSX.Element;
+export declare const Wizard: {
+    Root: typeof Root;
+    Steps: typeof Steps;
+    Step: typeof Step;
+    Panel: typeof Panel;
+    Back: ({ onClick, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Next: ({ onClick, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Finish: typeof Finish;
+    Marker: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    StepNote: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Content: {
+        (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;
+    };
+    Lede: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Note: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+            '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/wizard-shell.js

@@ -0,0 +1,176 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useWizard() {
+  const context = useContext(Context);
+  if (!context) throw new Error("Wizard parts require Wizard.Root.");
+  return context;
+}
+const RootPart = nativePart("form", "bevel-r-wizard");
+const PanelPart = nativePart("section", "bevel-r-wizard__panel");
+const StepPart = nativePart("button", "bevel-r-wizard__step");
+const StepsPart = nativePart("nav", "bevel-r-wizard__steps");
+const Marker = nativePart("span", "bevel-r-wizard__marker");
+const StepNote = nativePart("span", "bevel-r-wizard__step-note");
+function Root({ steps, value, defaultValue, onValueChange, validateStep, onFinish, onValidationError, onSubmit, ...props }) {
+  if (new Set(steps.map((step) => step.id)).size !== steps.length) throw new Error("Wizard step IDs must be unique.");
+  const [current, change] = useControllableState({ value, defaultValue: defaultValue ?? steps.find((step) => !step.disabled)?.id ?? "", onChange: onValueChange });
+  const active = steps.find((step) => step.id === current && !step.disabled)?.id ?? steps.find((step) => !step.disabled)?.id ?? "";
+  const [busy, setBusy] = useState(false), panels = useRef(/* @__PURE__ */ new Map()), prefix = useId(), operation = useRef(0), pendingFocus = useRef(null);
+  const stepKeys = JSON.stringify(steps.map((step) => [step.id, Boolean(step.disabled)]));
+  const latest = useRef({ active, stepKeys });
+  latest.current = { active, stepKeys };
+  const approvedSubmit = useRef(false);
+  useEffect(() => {
+    setBusy(false);
+    return () => {
+      operation.current++;
+    };
+  }, [active, stepKeys]);
+  useEffect(() => {
+    if (pendingFocus.current?.id !== active) return;
+    (pendingFocus.current.control ?? panels.current.get(active))?.focus();
+    pendingFocus.current = null;
+  }, [active]);
+  const isCurrent = (token) => token === operation.current && latest.current.active === active && latest.current.stepKeys === stepKeys;
+  const validate = async (required, token, custom = true) => {
+    for (const step of required) {
+      const controls = panels.current.get(step.id)?.querySelectorAll("input,select,textarea") ?? [];
+      let invalid = [...controls].find((control) => control.willValidate && !control.validity.valid);
+      let valid = !invalid, failure;
+      try {
+        if (valid && custom) valid = await validateStep?.(step.id) !== false;
+      } catch (error) {
+        failure = error;
+        valid = false;
+      }
+      if (!isCurrent(token)) return false;
+      invalid = [...controls].find((control) => control.willValidate && !control.validity.valid);
+      valid = valid && !invalid;
+      if (!valid) {
+        pendingFocus.current = { id: step.id, control: invalid };
+        if (step.id === latest.current.active) {
+          (invalid ?? panels.current.get(step.id))?.focus();
+          pendingFocus.current = null;
+        } else change(step.id, { reason: "validation" });
+        onValidationError?.(step.id, failure);
+        return false;
+      }
+    }
+    return true;
+  };
+  const run = async (id, submit) => {
+    if (busy || !active) return false;
+    const target = steps.findIndex((step) => step.id === id && !step.disabled), from = steps.findIndex((step) => step.id === active);
+    if (target < 0) return false;
+    const token = ++operation.current;
+    setBusy(true);
+    try {
+      const required = submit ? steps.filter((step) => !step.disabled) : target > from ? steps.slice(0, target).filter((step) => !step.disabled) : [];
+      if (!await validate(required, token) || !isCurrent(token)) return false;
+      if (submit) {
+        await onFinish?.();
+        if (!isCurrent(token) || !await validate(required, token, false)) return false;
+        if (submit.form.isConnected && (onSubmit || !onFinish)) {
+          flushSync(() => setBusy(false));
+          if (!isCurrent(token) || !submit.form.isConnected) return false;
+          approvedSubmit.current = true;
+          try {
+            submit.form.requestSubmit(submit.submitter?.isConnected ? submit.submitter : void 0);
+          } finally {
+            approvedSubmit.current = false;
+          }
+        }
+      } else {
+        pendingFocus.current = { id };
+        change(id, { reason: "step" });
+      }
+      return true;
+    } catch (error) {
+      if (isCurrent(token)) onValidationError?.(active, error);
+      return false;
+    } finally {
+      if (token === operation.current) setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Context, { value: { steps, active, panels: panels.current, prefix, busy, go: (id) => run(id) }, children: /* @__PURE__ */ jsx(RootPart, { ...props, noValidate: true, "aria-busy": busy || void 0, onSubmit: (event) => {
+    if (approvedSubmit.current) {
+      onSubmit?.(event);
+      return;
+    }
+    event.preventDefault();
+    void run(active, { form: event.currentTarget, submitter: event.nativeEvent.submitter });
+  } }) });
+}
+function Panel({ stepId, ref, ...props }) {
+  const wizard = useWizard(), step = wizard.steps.find((step2) => step2.id === stepId), hidden = wizard.active !== stepId || step?.disabled;
+  const merged = useMergedRefs(ref, (node) => {
+    if (node) wizard.panels.set(stepId, node);
+    else wizard.panels.delete(stepId);
+  });
+  return /* @__PURE__ */ jsx(PanelPart, { ...props, ref: merged, id: `${wizard.prefix}-${stepId}`, "aria-label": typeof step?.label === "string" ? step.label : props["aria-label"], tabIndex: -1, hidden, inert: hidden });
+}
+function Step({ stepId, onClick, children, ...props }) {
+  const wizard = useWizard(), index = wizard.steps.findIndex((step2) => step2.id === stepId), step = wizard.steps[index], current = wizard.steps.findIndex((step2) => step2.id === wizard.active), state = index < current ? "done" : index === current ? "current" : "next";
+  return /* @__PURE__ */ jsx(
+    StepPart,
+    {
+      type: "button",
+      ...props,
+      "aria-controls": `${wizard.prefix}-${stepId}`,
+      "aria-current": state === "current" ? "step" : void 0,
+      "data-bevel-react-state": state,
+      disabled: props.disabled || wizard.busy || !step || step.disabled,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) void wizard.go(stepId);
+      },
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Marker, { children: index + 1 }),
+        step?.label,
+        /* @__PURE__ */ jsx(StepNote, { children: state === "done" ? "Complete" : state === "current" ? "Current step" : "Up next" })
+      ] })
+    }
+  );
+}
+function Steps(props) {
+  const wizard = useWizard();
+  return /* @__PURE__ */ jsx(StepsPart, { "aria-label": "Steps", ...props, children: props.children ?? wizard.steps.map((step) => /* @__PURE__ */ jsx(Step, { stepId: step.id }, step.id)) });
+}
+function directionButton(direction) {
+  return function Direction({ onClick, ...props }) {
+    const wizard = useWizard(), enabled = wizard.steps.filter((step) => !step.disabled), index = enabled.findIndex((step) => step.id === wizard.active), target = enabled[index + direction];
+    return /* @__PURE__ */ jsx(Button, { ...props, disabled: props.disabled || wizard.busy || !target, onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && target) void wizard.go(target.id);
+    }, children: props.children ?? (direction < 0 ? "Back" : "Next") });
+  };
+}
+function Finish(props) {
+  const wizard = useWizard();
+  return /* @__PURE__ */ jsx(Button, { ...props, type: "submit", disabled: props.disabled || wizard.busy, children: props.children ?? "Finish" });
+}
+const Wizard = {
+  Root,
+  Steps,
+  Step,
+  Panel,
+  Back: directionButton(-1),
+  Next: directionButton(1),
+  Finish,
+  Marker,
+  StepNote,
+  Content: nativePart("div", "bevel-r-wizard__content"),
+  Actions: nativePart("div", "bevel-r-wizard__actions"),
+  Lede: nativePart("p", "bevel-r-wizard__lede"),
+  Note: nativePart("p", "bevel-r-wizard__note")
+};
+export {
+  Wizard
+};

package/dist/react/fonts.css.d.ts

@@ -0,0 +1 @@
+export {};