@panphora/bevel 0.1.0

package/dist/react/components/icon-button.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { nativePart, styled } from "../internal/part.js";
+const RaisedPart = styled(BaseButton, "bevel-r-button bevel-r-icon-button");
+const FlatPart = styled(BaseButton, "bevel-r-icon-button bevel-r-icon-button--flat");
+const Glyph = nativePart("span", "bevel-r-button__label");
+function IconButton({ label, variant = "raised", title, children, ...props }) {
+  if (variant === "flat") return /* @__PURE__ */ jsx(FlatPart, { ...props, "aria-label": label, title: title ?? label, children });
+  return /* @__PURE__ */ jsx(RaisedPart, { ...props, "aria-label": label, title: title ?? label, children: /* @__PURE__ */ jsx(Glyph, { children }) });
+}
+export {
+  IconButton
+};

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

@@ -0,0 +1,7 @@
+import { type BevelIconName } from '@panphora/bevel/icons';
+export interface IconProps {
+    name: BevelIconName;
+    size?: number | string;
+    label?: string;
+}
+export declare function Icon({ name, size, label }: IconProps): import("react").JSX.Element;

package/dist/react/components/icon.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ICONS } from "@panphora/bevel/icons";
+function Icon({ name, size = 16, label }) {
+  const icon = ICONS[name];
+  if (!icon) throw new Error("Unknown Bevel icon: " + name);
+  const accessibility = label === void 0 ? { "aria-hidden": true } : { role: "img", "aria-label": label };
+  const renderedSize = Number(size);
+  const smallStroke = Number.isFinite(renderedSize) && renderedSize > 0 && renderedSize < 15 ? Math.round(24 / renderedSize * 100) / 100 : null;
+  const paint = icon.kind === "house" ? { fill: "none", stroke: "currentColor", strokeWidth: smallStroke ?? 1.6, strokeLinecap: "square", strokeLinejoin: "miter" } : icon.kind === "round" ? { fill: "none", stroke: "currentColor", strokeWidth: smallStroke ?? icon.strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" } : { fill: "currentColor" };
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: icon.viewBox, focusable: "false", ...paint, ...accessibility, dangerouslySetInnerHTML: { __html: icon.inner } });
+}
+export {
+  Icon
+};

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

@@ -0,0 +1,72 @@
+import { type ComponentProps } from 'react';
+import { Button } from './button.js';
+export interface ImagePreviewProps extends Omit<ComponentProps<'img'>, 'src'> {
+    file?: Blob | null;
+    src?: string;
+}
+declare function Image({ file, src, ...props }: ImagePreviewProps): import("react").JSX.Element | null;
+export declare const ImagePreview: {
+    Root: ({ 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>>;
+    Frame: {
+        (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;
+    };
+    Thumb: {
+        (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;
+    };
+    Image: typeof Image;
+    Placeholder: {
+        (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;
+    };
+    Remove: typeof Button;
+};
+export declare const ImageField: {
+    Input: ({ ref, onFiles, onChange, disabled, ...props }: import("./file.js").FileInputProps) => import("react").JSX.Element;
+    Trigger: ({ onClick, disabled, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    Name: ({ children, ...props }: ComponentProps<'span'>) => import("react").JSX.Element;
+    Remove: ({ onClick, disabled, children, ...props }: ComponentProps<typeof Button>) => import("react").JSX.Element;
+    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;
+    };
+    Root: ({ value, defaultValue, onValueChange, disabled, ...props }: import("./file.js").FileFieldProps) => import("react").JSX.Element;
+    Preview: typeof Image;
+    Frame: {
+        (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;
+    };
+    Placeholder: {
+        (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;
+    };
+};
+export {};

package/dist/react/components/image.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useObjectURL } from "../internal/use-object-url.js";
+import { nativePart, nativeVariants, styled } from "../internal/part.js";
+import { FileField } from "./file.js";
+import { Button } from "./button.js";
+const Preview = nativePart("img", "bevel-r-image__preview");
+function Image({ file, src, ...props }) {
+  const url = useObjectURL(src ? void 0 : file);
+  return src || url ? /* @__PURE__ */ jsx(Preview, { ...props, src: src || url }) : null;
+}
+const ImagePreview = {
+  Root: nativeVariants("div", "bevel-r-image", ["compact"]),
+  Frame: nativePart("div", "bevel-r-image__frame"),
+  Thumb: nativePart("div", "bevel-r-image__thumb"),
+  Image,
+  Placeholder: nativePart("span", "bevel-r-image__placeholder"),
+  Remove: styled(Button, "bevel-r-image__remove")
+};
+const ImageField = { ...FileField, Root: styled(FileField.Root, "bevel-r-image"), Preview: Image, Frame: ImagePreview.Frame, Placeholder: ImagePreview.Placeholder };
+export {
+  ImageField,
+  ImagePreview
+};

package/dist/react/components/inline-edit.d.ts

@@ -0,0 +1,70 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface InlineDraft {
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled: boolean;
+    'aria-invalid': boolean;
+    'aria-describedby'?: string;
+}
+interface EditContext {
+    value: string | number;
+    draft: string;
+    setDraft: (draft: string) => void;
+    editing: boolean;
+    mode: 'text' | 'number' | 'multiline' | 'rich';
+    disabled: boolean;
+    error: string;
+    errorId: string;
+    trigger: React.RefObject<HTMLElement | null>;
+    start: () => void;
+    commit: () => void;
+    cancel: () => void;
+    renderEditor?: (draft: InlineDraft) => ReactNode;
+}
+export interface InlineEditProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange'> {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number, details: ChangeDetails) => void;
+    editing?: boolean;
+    defaultEditing?: boolean;
+    onEditingChange?: (editing: boolean, details: ChangeDetails) => void;
+    recordKey?: string | number;
+    mode?: EditContext['mode'];
+    required?: boolean;
+    validate?: (value: string | number) => string | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
+    pending?: boolean;
+    error?: string;
+    renderEditor?: (draft: InlineDraft) => ReactNode;
+}
+declare function Root({ value, defaultValue, onValueChange, editing, defaultEditing, onEditingChange, recordKey, mode, required, validate, disabled, readOnly, pending, error, renderEditor, ...props }: InlineEditProps): import("react").JSX.Element;
+declare function Value(props: ComponentProps<'span'>): import("react").JSX.Element;
+declare function Editor({ children, onKeyDown, ...props }: ComponentProps<'div'>): import("react").JSX.Element | null;
+declare function Input({ label }: {
+    label?: string;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+declare function Trigger({ ref, onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Save({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Cancel({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function ErrorMessage(props: ComponentProps<'p'>): import("react").JSX.Element | null;
+export declare const InlineEdit: {
+    Root: typeof Root;
+    Value: typeof Value;
+    Trigger: typeof Trigger;
+    Editor: typeof Editor;
+    Input: typeof Input;
+    Save: typeof Save;
+    Cancel: typeof Cancel;
+    Error: typeof ErrorMessage;
+    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;
+    };
+};
+export {};

package/dist/react/components/inline-edit.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { parseNumber } from "../models/filter.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useEdit() {
+  const context = useContext(Context);
+  if (!context) throw new Error("InlineEdit parts require InlineEdit.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-inline-edit");
+const ValuePart = nativePart("span", "bevel-r-inline-edit__value");
+const EditorPart = nativePart("div", "bevel-r-inline-edit__editor");
+const InputPart = nativePart("input", "bevel-r-inline-edit__input");
+const TextareaPart = nativePart("textarea", "bevel-r-inline-edit__input");
+function Root({ value, defaultValue = "", onValueChange, editing, defaultEditing = false, onEditingChange, recordKey, mode = "text", required = false, validate, disabled = false, readOnly = false, pending = false, error = "", renderEditor, ...props }) {
+  const [current, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const [open, setOpen] = useControllableState({ value: editing, defaultValue: defaultEditing, onChange: onEditingChange });
+  const [draft, setDraft] = useState(String(current)), [invalid, setInvalid] = useState("");
+  const trigger = useRef(null), original = useRef({ current, recordKey }), submitted = useRef(false), errorId = useId();
+  const wasOpen = useRef(open), returnFocus = useRef(false);
+  const blocked = disabled || readOnly || pending;
+  useEffect(() => {
+    if (open && !pending) submitted.current = false;
+  }, [open, pending, error]);
+  const close = (reason) => {
+    returnFocus.current = true;
+    setOpen(false, { reason });
+  };
+  useEffect(() => {
+    if (open && !wasOpen.current) {
+      original.current = { current, recordKey };
+      submitted.current = false;
+      setDraft(String(current));
+      setInvalid("");
+    } else if (open && (!Object.is(original.current.current, current) || original.current.recordKey !== recordKey)) {
+      setDraft(String(current));
+      close("replacement");
+    }
+    if (!open && returnFocus.current) {
+      trigger.current?.focus();
+      returnFocus.current = false;
+    }
+    wasOpen.current = open;
+  }, [current, recordKey, open]);
+  const start = () => {
+    if (blocked) return;
+    original.current = { current, recordKey };
+    submitted.current = false;
+    setInvalid("");
+    setDraft(String(current));
+    setOpen(true, { reason: "edit" });
+  };
+  const commit = () => {
+    if (blocked || submitted.current || !open) return;
+    if (!Object.is(original.current.current, current) || original.current.recordKey !== recordKey) {
+      close("replacement");
+      return;
+    }
+    const next = mode === "number" ? parseNumber(draft) : draft;
+    const message = next === null ? "Enter a number." : required && !draft.trim() ? "Enter a value before saving." : validate?.(next);
+    if (message) {
+      setInvalid(message);
+      return;
+    }
+    submitted.current = true;
+    change(next, { reason: "commit" });
+    close("commit");
+  };
+  return /* @__PURE__ */ jsx(Context, { value: { value: current, draft, setDraft: (value2) => {
+    submitted.current = false;
+    setInvalid("");
+    setDraft(value2);
+  }, editing: open, mode, disabled: blocked, error: error || invalid, errorId, trigger, start, commit, cancel: () => {
+    setDraft(String(current));
+    setInvalid("");
+    close("cancel");
+  }, renderEditor }, children: /* @__PURE__ */ jsx(RootPart, { ...props, "aria-busy": pending || void 0, "data-bevel-react-editing": open || void 0 }) });
+}
+function Value(props) {
+  const context = useEdit();
+  return /* @__PURE__ */ jsx(ValuePart, { ...props, hidden: context.editing, children: props.children ?? context.value });
+}
+function Editor({ children, onKeyDown, ...props }) {
+  const context = useEdit();
+  if (!context.editing) return null;
+  return /* @__PURE__ */ jsx(EditorPart, { ...props, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      context.cancel();
+    } else if (event.key === "Enter" && (event.ctrlKey || event.metaKey || context.mode === "text" || context.mode === "number")) {
+      event.preventDefault();
+      context.commit();
+    }
+  }, children });
+}
+function Input({ label = "Edit value" }) {
+  const context = useEdit(), input = useRef(null);
+  useEffect(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+  const props = { value: context.draft, disabled: context.disabled, "aria-label": label, "aria-invalid": Boolean(context.error), "aria-describedby": context.error ? context.errorId : void 0 };
+  if (context.mode === "rich") {
+    if (!context.renderEditor) throw new Error("InlineEdit in rich mode requires renderEditor with the optional Richclay adapter.");
+    return context.renderEditor({ ...props, onValueChange: context.setDraft });
+  }
+  return context.mode === "multiline" ? /* @__PURE__ */ jsx(TextareaPart, { ...props, ref: (node) => {
+    input.current = node;
+  }, onChange: (event) => context.setDraft(event.target.value) }) : /* @__PURE__ */ jsx(InputPart, { ...props, ref: (node) => {
+    input.current = node;
+  }, inputMode: context.mode === "number" ? "decimal" : void 0, onChange: (event) => context.setDraft(event.target.value) });
+}
+function Trigger({ ref, onClick, ...props }) {
+  const context = useEdit(), merged = useMergedRefs(ref, context.trigger);
+  return /* @__PURE__ */ jsx(Button, { ...props, ref: merged, hidden: context.editing, disabled: props.disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.start();
+  }, children: props.children ?? "Edit" });
+}
+function Save({ onClick, ...props }) {
+  const context = useEdit();
+  return /* @__PURE__ */ jsx(Button, { ...props, disabled: props.disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.commit();
+  }, children: props.children ?? "Save" });
+}
+function Cancel({ onClick, ...props }) {
+  const context = useEdit();
+  return /* @__PURE__ */ jsx(Button, { ...props, disabled: props.disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.cancel();
+  }, children: props.children ?? "Cancel" });
+}
+function ErrorMessage(props) {
+  const context = useEdit();
+  return context.error ? /* @__PURE__ */ jsx("p", { role: "alert", ...props, id: context.errorId, children: context.error }) : null;
+}
+const InlineEdit = { Root, Value, Trigger, Editor, Input, Save, Cancel, Error: ErrorMessage, Actions: nativePart("div", "bevel-r-inline-edit__actions") };
+export {
+  InlineEdit
+};

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

@@ -0,0 +1,29 @@
+import { Input as BaseInput } from '@base-ui/react/input';
+import { type ComponentProps } from 'react';
+export interface InputProps extends ComponentProps<typeof BaseInput> {
+    appearance?: 'default' | 'mono';
+    controlSize?: 'default' | 'small';
+}
+export declare function Input({ appearance, controlSize, className, ...props }: InputProps): import("react").JSX.Element;
+export declare const InputGroup: {
+    (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;
+} & {
+    Prefix: {
+        (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;
+    };
+    Suffix: {
+        (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;
+    };
+};

package/dist/react/components/input.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Input as BaseInput } from "@base-ui/react/input";
+import { classes, cx } from "../internal/classes.js";
+import { nativePart, styled } from "../internal/part.js";
+const InputPart = styled(BaseInput, "bevel-r-input");
+function Input({ appearance, controlSize, className, ...props }) {
+  return /* @__PURE__ */ jsx(InputPart, { ...props, className: classes(cx(
+    appearance === "mono" && "bevel-r-input--mono",
+    controlSize === "small" && "bevel-r-input--small"
+  ), className) });
+}
+const InputGroup = Object.assign(nativePart("div", "bevel-r-igroup"), {
+  Prefix: nativePart("span", "bevel-r-igroup__affix"),
+  Suffix: nativePart("span", "bevel-r-igroup__affix")
+});
+export {
+  Input,
+  InputGroup
+};

package/dist/react/components/kanban-board.d.ts

@@ -0,0 +1,140 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { type KanbanCard, type KanbanColumn, type KanbanFilter, type KanbanMove, type KanbanValue } from '../models/kanban.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+export type { KanbanCard, KanbanColumn, KanbanFilter, KanbanMove, KanbanValue } from '../models/kanban.js';
+export interface KanbanChangeDetails extends ChangeDetails {
+    cardId?: string;
+    move?: KanbanMove;
+}
+export interface KanbanBoardProps extends Omit<ComponentProps<'div'>, 'defaultValue'> {
+    value?: KanbanValue;
+    defaultValue?: KanbanValue;
+    onValueChange?: (value: KanbanValue, details: KanbanChangeDetails) => void;
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelectedIdChange?: (id: string | null, details: ChangeDetails) => void;
+    filter?: KanbanFilter;
+    defaultFilter?: KanbanFilter;
+    onFilterChange?: (filter: KanbanFilter, details: ChangeDetails) => void;
+    disabled?: boolean;
+    today?: string;
+}
+declare function Root({ value, defaultValue, onValueChange, selectedId, defaultSelectedId, onSelectedIdChange, filter, defaultFilter, onFilterChange, disabled, today, ref, ...props }: KanbanBoardProps): import("react").JSX.Element;
+declare function Columns({ children, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+    children?: (column: KanbanColumn) => ReactNode;
+}): import("react").JSX.Element;
+declare function Column({ columnId, children, ...props }: ComponentProps<'section'> & {
+    columnId: string;
+}): import("react").JSX.Element | null;
+declare function List({ children, empty, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+    children?: (card: KanbanCard) => ReactNode;
+    empty?: ReactNode;
+}): import("react").JSX.Element;
+declare function Card({ cardId, children, ref, onKeyDown, ...props }: ComponentProps<'article'> & {
+    cardId: string;
+}): import("react").JSX.Element | null;
+declare function DragHandle({ onPointerDown, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Search(props: ComponentProps<typeof Input>): import("react").JSX.Element;
+declare function Filter({ field, ...props }: ComponentProps<'select'> & {
+    field: 'assignee' | 'label' | 'priority' | 'due';
+}): import("react").JSX.Element;
+declare function DateFilter({ boundary, ...props }: ComponentProps<'input'> & {
+    boundary: 'from' | 'to';
+}): import("react").JSX.Element;
+declare function Create({ columnId, onClick, ...props }: ComponentProps<typeof Button> & {
+    columnId?: string;
+}): import("react").JSX.Element;
+declare function Inspector({ children, ...props }: Omit<ComponentProps<'aside'>, 'children'> & {
+    children?: (card: KanbanCard) => ReactNode;
+}): import("react").JSX.Element | null;
+declare function Move(): import("react").JSX.Element;
+declare function Checklist(): import("react").JSX.Element;
+declare function Editor(): import("react").JSX.Element;
+export declare const KanbanBoard: {
+    Root: typeof Root;
+    Columns: typeof Columns;
+    Column: typeof Column;
+    ColumnHead: {
+        (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;
+    };
+    List: typeof List;
+    Card: typeof Card;
+    DragHandle: typeof DragHandle;
+    Search: typeof Search;
+    Filter: typeof Filter;
+    DateFilter: typeof DateFilter;
+    Create: typeof Create;
+    Inspector: typeof Inspector;
+    Move: typeof Move;
+    Checklist: typeof Checklist;
+    Editor: typeof Editor;
+    Work: {
+        (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;
+    };
+    Toolbar: {
+        (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;
+    };
+    CardTitle: {
+        (props: import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    CardDescription: {
+        (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;
+    };
+    Labels: {
+        (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;
+    };
+    Label: {
+        (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;
+    };
+    Due: {
+        (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;
+    };
+    Priority: {
+        (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;
+    };
+    Footer: {
+        (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;
+    };
+};