@panphora/bevel 0.1.0

package/dist/react/components/kanban-board.js

@@ -0,0 +1,374 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { usePointerSession } from "../internal/pointer-session.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { isISODate } from "../models/filter.js";
+import { matchesKanban, moveKanbanCard, validateKanban } from "../models/kanban.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Dialog } from "./dialog.js";
+const Context = createContext(null);
+const ColumnContext = createContext(null);
+const CardContext = createContext(null);
+function useBoard() {
+  const context = useContext(Context);
+  if (!context) throw new Error("KanbanBoard parts require KanbanBoard.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-kanban");
+const ColumnsPart = nativePart("div", "bevel-r-kanban__board");
+const ColumnPart = nativePart("section", "bevel-r-kanban__column");
+const ColumnHead = nativePart("header", "bevel-r-kanban__column-head");
+const ListPart = nativePart("div", "bevel-r-kanban__list");
+const CardPart = nativePart("article", "bevel-r-kanban__card");
+const CardTitle = nativePart("button", "bevel-r-kanban__title");
+const CardDescription = nativePart("p", "bevel-r-kanban__desc");
+const Labels = nativePart("div", "bevel-r-kanban__labels");
+const Label = nativePart("span", "bevel-r-kanban__label");
+const Due = nativePart("span", "bevel-r-kanban__due");
+const Priority = nativePart("span", "bevel-r-kanban__priority");
+const Footer = nativePart("footer", "bevel-r-kanban__card-foot");
+function Root({ value, defaultValue = { columns: [], cards: [] }, onValueChange, selectedId, defaultSelectedId = null, onSelectedIdChange, filter, defaultFilter = {}, onFilterChange, disabled = false, today, ref, ...props }) {
+  const [current, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  validateKanban(current);
+  const [selected, select] = useControllableState({ value: selectedId, defaultValue: defaultSelectedId, onChange: onSelectedIdChange });
+  const [filters, setFilter] = useControllableState({ value: filter, defaultValue: defaultFilter, onChange: onFilterChange });
+  const [editor, edit] = useState(null), [preview, setPreview] = useState(null);
+  const root = useRef(null), merged = useMergedRefs(ref, root), timer = useRef(null);
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  const focus = (id) => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const cards = [...root.current?.querySelectorAll("[data-bevel-react-card]") ?? []];
+      (cards.find((card) => card.dataset.bevelReactCard === id) ?? cards[0] ?? root.current)?.focus();
+    }, 0);
+  };
+  const update = (id, patch, reason) => {
+    if (disabled || current.cards.find((card) => card.id === id)?.disabled) return;
+    change({ ...current, cards: current.cards.map((card) => card.id === id ? { ...card, ...patch, id: card.id, columnId: card.columnId } : card) }, { reason, cardId: id });
+  };
+  const move = (id, column, index) => {
+    if (disabled) return;
+    const moved = moveKanbanCard(current, id, column, index);
+    if (!moved) return;
+    change(moved.value, { reason: "move", cardId: id, move: moved.move });
+    focus(id);
+  };
+  return /* @__PURE__ */ jsx(Context, { value: {
+    value: current,
+    selected,
+    select,
+    filter: filters,
+    setFilter,
+    filtered: Object.values(filters).some(Boolean),
+    disabled,
+    today,
+    root,
+    focus,
+    newId: () => crypto.randomUUID(),
+    change: (value2, details) => {
+      if (!disabled) change(value2, details);
+    },
+    update,
+    move,
+    editor,
+    edit,
+    preview,
+    setPreview
+  }, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, tabIndex: props.tabIndex ?? -1, "aria-disabled": disabled || void 0 }) });
+}
+function Columns({ children, ...props }) {
+  const board = useBoard();
+  return /* @__PURE__ */ jsx(ColumnsPart, { ...props, style: { gridTemplateColumns: `repeat(${Math.max(1, board.value.columns.length)}, minmax(15rem, 1fr))`, ...props.style }, children: board.value.columns.map((column) => children ? /* @__PURE__ */ jsx(Column, { columnId: column.id, children: children(column) }, column.id) : /* @__PURE__ */ jsx(Column, { columnId: column.id }, column.id)) });
+}
+function Column({ columnId, children, ...props }) {
+  const board = useBoard(), column = board.value.columns.find((column2) => column2.id === columnId);
+  if (!column) return null;
+  const count = board.value.cards.filter((card) => card.columnId === columnId && !card.archived).length;
+  return /* @__PURE__ */ jsx(ColumnContext, { value: column, children: /* @__PURE__ */ jsx(ColumnPart, { ...props, "data-bevel-react-column": columnId, "data-bevel-react-drop-target": board.preview?.column === columnId && !board.preview.card || void 0, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ColumnHead, { children: [
+      /* @__PURE__ */ jsx("h2", { children: column.label }),
+      /* @__PURE__ */ jsx("span", { children: count }),
+      column.wip !== void 0 && /* @__PURE__ */ jsxs("span", { "data-full": count >= column.wip, children: [
+        "WIP ",
+        count,
+        " / ",
+        column.wip
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(List, {}),
+    /* @__PURE__ */ jsx(Create, { columnId })
+  ] }) }) });
+}
+function List({ children, empty = "No tasks.", ...props }) {
+  const board = useBoard(), column = useContext(ColumnContext);
+  if (!column) throw new Error("KanbanBoard.List requires KanbanBoard.Column.");
+  const cards = column.cardIds.map((id) => board.value.cards.find((card) => card.id === id)).filter((card) => matchesKanban(card, board.filter));
+  return /* @__PURE__ */ jsx(ListPart, { ...props, children: cards.length ? cards.map((card) => /* @__PURE__ */ jsx(Card, { cardId: card.id, children: children?.(card) }, card.id)) : /* @__PURE__ */ jsx("p", { children: empty }) });
+}
+function Card({ cardId, children, ref, onKeyDown, ...props }) {
+  const board = useBoard(), card = board.value.cards.find((card2) => card2.id === cardId), root = useRef(null), merged = useMergedRefs(ref, root);
+  if (!card) return null;
+  const column = board.value.columns.find((column2) => column2.id === card.columnId), columnIndex = board.value.columns.indexOf(column);
+  const due = column.done ? "done" : board.today && card.due === board.today ? "today" : board.today && card.due && card.due < board.today ? "overdue" : void 0;
+  return /* @__PURE__ */ jsx(CardContext, { value: card, children: /* @__PURE__ */ jsx(CardPart, { ...props, ref: merged, tabIndex: -1, "data-bevel-react-card": card.id, "data-bevel-react-drop-target": board.preview?.card === card.id || void 0, "aria-current": board.selected === card.id || void 0, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || board.disabled || card.disabled || !event.altKey) return;
+    const index = column.cardIds.indexOf(card.id);
+    if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      board.move(card.id, column.id, index + (event.key === "ArrowDown" ? 1 : -1));
+    } else if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
+      event.preventDefault();
+      const target = board.value.columns[columnIndex + (event.key === "ArrowRight" ? 1 : -1)];
+      if (target) board.move(card.id, target.id, target.cardIds.length);
+    }
+  }, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CardTitle, { type: "button", disabled: board.disabled || card.disabled, "aria-pressed": board.selected === card.id, onClick: (event) => board.select(card.id, { reason: "select", event }), children: card.title }),
+    /* @__PURE__ */ jsx(CardDescription, { children: card.description }),
+    /* @__PURE__ */ jsx(Priority, { "data-bevel-react-priority": card.priority, children: card.priority }),
+    /* @__PURE__ */ jsx(Labels, { children: card.labels?.map((label) => /* @__PURE__ */ jsx(Label, { "data-bevel-react-label": label, children: label }, label)) }),
+    !!card.checklist?.length && /* @__PURE__ */ jsx("progress", { "aria-label": `Checklist for ${card.title}`, value: card.checklist.filter((item) => item.checked).length, max: card.checklist.length }),
+    /* @__PURE__ */ jsxs(Footer, { children: [
+      /* @__PURE__ */ jsx(Due, { "data-bevel-react-due": due, children: card.due ?? "No due date" }),
+      /* @__PURE__ */ jsx("span", { children: card.assignee }),
+      /* @__PURE__ */ jsx(DragHandle, {})
+    ] })
+  ] }) }) });
+}
+const HandlePart = styled(Button, "bevel-r-kanban__icon");
+function DragHandle({ onPointerDown, ...props }) {
+  const board = useBoard(), card = useContext(CardContext), pointer = usePointerSession([board.value, JSON.stringify(board.filter), board.disabled, card?.disabled, props.disabled]);
+  if (!card) throw new Error("KanbanBoard.DragHandle requires KanbanBoard.Card.");
+  const blocked = board.disabled || card.disabled || board.filtered || props.disabled;
+  return /* @__PURE__ */ jsx(HandlePart, { "aria-label": `Move ${card.title}`, title: board.filtered ? "Clear filters to drag tasks. Use the inspector Move control while filtering." : "Drag, or use Alt and arrow keys to move", ...props, disabled: props.disabled || blocked, onPointerDown: (event) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || blocked) return;
+    let destination = null;
+    pointer.begin(event, { move: (event2) => {
+      destination = null;
+      board.setPreview(null);
+      for (const node of board.root.current?.querySelectorAll("[data-bevel-react-column]") ?? []) {
+        const rect = node.getBoundingClientRect();
+        if (event2.clientX < rect.left || event2.clientX > rect.right || event2.clientY < rect.top || event2.clientY > rect.bottom) continue;
+        const id = node.dataset.bevelReactColumn, column = board.value.columns.find((column2) => column2.id === id);
+        const ids = column.cardIds.filter((id2) => id2 !== card.id);
+        let index = ids.length, target;
+        for (const child of node.querySelectorAll("[data-bevel-react-card]")) {
+          if (child.dataset.bevelReactCard === card.id) continue;
+          const bounds = child.getBoundingClientRect();
+          if (event2.clientY < bounds.top + bounds.height / 2) {
+            target = child.dataset.bevelReactCard;
+            index = ids.indexOf(target);
+            break;
+          }
+        }
+        destination = { column: id, index };
+        board.setPreview({ column: id, card: target });
+      }
+    }, end: (accepted) => {
+      board.setPreview(null);
+      if (accepted && destination) board.move(card.id, destination.column, destination.index);
+    } });
+  }, children: props.children ?? "\u283F" });
+}
+function Search(props) {
+  const board = useBoard();
+  return /* @__PURE__ */ jsx(Input, { "aria-label": "Search tasks", ...props, value: board.filter.query ?? "", disabled: props.disabled || board.disabled, onValueChange: (query, details) => {
+    props.onValueChange?.(query, details);
+    if (!details.isCanceled) board.setFilter({ ...board.filter, query }, { reason: "search", event: details.event });
+  } });
+}
+function Filter({ field, ...props }) {
+  const board = useBoard(), values = field === "due" ? ["set", "empty"] : [...new Set(board.value.cards.flatMap((card) => field === "label" ? card.labels ?? [] : card[field] ? [card[field]] : []))];
+  return /* @__PURE__ */ jsxs("select", { "aria-label": `Filter ${field}`, ...props, disabled: props.disabled || board.disabled, value: board.filter[field] ?? "", onChange: (event) => {
+    props.onChange?.(event);
+    if (!event.defaultPrevented) board.setFilter({ ...board.filter, [field]: event.target.value }, { reason: "filter", event });
+  }, children: [
+    /* @__PURE__ */ jsxs("option", { value: "", children: [
+      "Any ",
+      field
+    ] }),
+    values.map((value) => /* @__PURE__ */ jsx("option", { value, children: value }, value))
+  ] });
+}
+function DateFilter({ boundary, ...props }) {
+  const board = useBoard(), key = boundary === "from" ? "dueFrom" : "dueTo";
+  return /* @__PURE__ */ jsx("input", { "aria-label": `Due ${boundary}`, ...props, type: "date", disabled: props.disabled || board.disabled, value: board.filter[key] ?? "", onChange: (event) => {
+    props.onChange?.(event);
+    if (!event.defaultPrevented) board.setFilter({ ...board.filter, [key]: event.target.value }, { reason: "filter", event });
+  } });
+}
+function Create({ columnId, onClick, ...props }) {
+  const board = useBoard(), column = columnId ?? board.value.columns[0]?.id;
+  return /* @__PURE__ */ jsx(Button, { ...props, disabled: props.disabled || board.disabled || !column, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented && column) board.edit({ card: null, columnId: column });
+  }, children: props.children ?? "Add task" });
+}
+const InspectorPart = nativePart("aside", "bevel-r-kanban__panel");
+function Inspector({ children, ...props }) {
+  const board = useBoard(), card = board.value.cards.find((card2) => card2.id === board.selected);
+  if (!card) return null;
+  return /* @__PURE__ */ jsx(CardContext, { value: card, children: /* @__PURE__ */ jsx(InspectorPart, { ...props, "aria-label": `Task ${card.title}`, children: children?.(card) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { children: card.title }),
+    /* @__PURE__ */ jsx("p", { children: card.description }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => {
+      board.select(null, { reason: "close-inspector" });
+      board.focus(card.id);
+    }, children: "Close task" }),
+    /* @__PURE__ */ jsx(Button, { disabled: board.disabled || card.disabled, onClick: () => board.edit({ card, columnId: card.columnId }), children: "Edit task" }),
+    /* @__PURE__ */ jsx(Button, { disabled: board.disabled || card.disabled, onClick: () => board.update(card.id, { archived: !card.archived }, card.archived ? "restore" : "archive"), children: card.archived ? "Restore task" : "Archive task" }),
+    /* @__PURE__ */ jsx(Move, {}),
+    /* @__PURE__ */ jsx(Checklist, {})
+  ] }) }) });
+}
+function Move() {
+  const board = useBoard(), card = useContext(CardContext), [destination, setDestination] = useState(""), [position, setPosition] = useState("last");
+  if (!card) throw new Error("KanbanBoard.Move requires a card or inspector.");
+  const target = board.value.columns.find((column) => column.id === destination) ?? board.value.columns.find((column) => column.id === card.columnId);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Move to",
+      /* @__PURE__ */ jsx("select", { value: target.id, disabled: board.disabled || card.disabled, onChange: (event) => setDestination(event.target.value), children: board.value.columns.map((column) => /* @__PURE__ */ jsx("option", { value: column.id, children: column.label }, column.id)) })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Position",
+      /* @__PURE__ */ jsxs("select", { value: position, disabled: board.disabled || card.disabled, onChange: (event) => setPosition(event.target.value), children: [
+        /* @__PURE__ */ jsx("option", { value: "first", children: "First" }),
+        /* @__PURE__ */ jsx("option", { value: "last", children: "Last" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { disabled: board.disabled || card.disabled, onClick: () => board.move(card.id, target.id, position === "first" ? 0 : target.cardIds.length), children: "Move task" })
+  ] });
+}
+function Checklist() {
+  const board = useBoard(), card = useContext(CardContext), [text, setText] = useState("");
+  if (!card) throw new Error("KanbanBoard.Checklist requires a card or inspector.");
+  const blocked = board.disabled || card.disabled;
+  return /* @__PURE__ */ jsxs("div", { "aria-label": `Checklist for ${card.title}`, children: [
+    /* @__PURE__ */ jsx("ul", { children: card.checklist?.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", disabled: blocked, checked: item.checked, onChange: (event) => board.update(card.id, { checklist: card.checklist.map((check) => check.id === item.id ? { ...check, checked: event.target.checked } : check) }, "checklist") }),
+        item.text
+      ] }),
+      /* @__PURE__ */ jsx(Button, { disabled: blocked, "aria-label": `Remove ${item.text}`, onClick: () => board.update(card.id, { checklist: card.checklist.filter((check) => check.id !== item.id) }, "checklist-remove"), children: "\xD7" })
+    ] }, item.id)) }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: (event) => {
+      event.preventDefault();
+      if (!blocked && text.trim()) {
+        board.update(card.id, { checklist: [...card.checklist ?? [], { id: board.newId(), text: text.trim(), checked: false }] }, "checklist-add");
+        setText("");
+      }
+    }, children: [
+      /* @__PURE__ */ jsx("input", { "aria-label": "Checklist item", value: text, disabled: blocked, required: true, onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+        if (event.nativeEvent.isComposing && event.key === "Enter") event.preventDefault();
+      } }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: blocked, children: "Add checklist item" })
+    ] })
+  ] });
+}
+function cardContent(card) {
+  return card ? JSON.stringify([card.id, card.columnId, card.title, card.description, card.assignee, card.priority, card.due, card.labels ?? [], card.checklist?.map((item) => [item.id, item.text, item.checked]) ?? [], Boolean(card.archived), Boolean(card.disabled)]) : null;
+}
+function EditorForm({ source }) {
+  const board = useBoard(), [draft, setDraft] = useState(() => source.card ?? { id: board.newId(), columnId: source.columnId, title: "", priority: "normal", labels: [] }), [error, setError] = useState("");
+  const [labels, setLabels] = useState(() => source.card?.labels?.join(", ") ?? "");
+  const [original] = useState(() => cardContent(source.card));
+  useEffect(() => {
+    if (source.card && cardContent(board.value.cards.find((card) => card.id === source.card.id)) !== original) board.edit(null);
+  }, [board.value.cards, source.card, original]);
+  const field = (name) => ({ value: draft[name] ?? "", onChange: (event) => {
+    setDraft({ ...draft, [name]: event.target.value });
+    setError("");
+  } });
+  return /* @__PURE__ */ jsxs("form", { onSubmit: (event) => {
+    event.preventDefault();
+    if (board.disabled || draft.disabled) return;
+    if (!draft.title.trim() || draft.due && !isISODate(draft.due)) {
+      setError(!draft.title.trim() ? "Enter a task title." : "Enter a real date.");
+      return;
+    }
+    const card = { ...draft, title: draft.title.trim(), labels: [...new Set(labels.split(",").map((label) => label.trim().toLowerCase()).filter(Boolean))] };
+    const value = { columns: board.value.columns.map((column) => ({ ...column, cardIds: column.cardIds.includes(card.id) ? column.cardIds : column.id === card.columnId ? [...column.cardIds, card.id] : column.cardIds })), cards: source.card ? board.value.cards.map((item) => item.id === card.id ? card : item) : [...board.value.cards, card] };
+    board.change(value, { reason: source.card ? "edit" : "create", cardId: card.id });
+    board.edit(null);
+  }, onKeyDown: (event) => {
+    if (event.nativeEvent.isComposing && event.key === "Enter") event.preventDefault();
+  }, children: [
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Task title",
+      /* @__PURE__ */ jsx("input", { ...field("title"), required: true })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Description",
+      /* @__PURE__ */ jsx("textarea", { ...field("description") })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Assignee",
+      /* @__PURE__ */ jsx("input", { ...field("assignee") })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Due date",
+      /* @__PURE__ */ jsx("input", { ...field("due"), type: "date" })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Priority",
+      /* @__PURE__ */ jsx("select", { value: draft.priority, onChange: (event) => setDraft({ ...draft, priority: event.target.value }), children: ["low", "normal", "high", "urgent"].map((priority) => /* @__PURE__ */ jsx("option", { children: priority }, priority)) })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { children: [
+      "Labels",
+      /* @__PURE__ */ jsx("input", { value: labels, onChange: (event) => setLabels(event.target.value) })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
+    /* @__PURE__ */ jsx(Button, { type: "submit", disabled: board.disabled, children: "Save task" }),
+    /* @__PURE__ */ jsx(Dialog.Close, { children: "Cancel" })
+  ] });
+}
+function Editor() {
+  const board = useBoard();
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: board.editor !== null, onOpenChange: (open) => {
+    if (!open) board.edit(null);
+  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, {}),
+    /* @__PURE__ */ jsxs(Dialog.Popup, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: board.editor?.card ? "Edit task" : "New task" }),
+      /* @__PURE__ */ jsx(Dialog.Description, { children: "Set the task details." }),
+      board.editor && /* @__PURE__ */ jsx(EditorForm, { source: board.editor }, board.editor.card?.id ?? "new")
+    ] })
+  ] }) });
+}
+const KanbanBoard = {
+  Root,
+  Columns,
+  Column,
+  ColumnHead,
+  List,
+  Card,
+  DragHandle,
+  Search,
+  Filter,
+  DateFilter,
+  Create,
+  Inspector,
+  Move,
+  Checklist,
+  Editor,
+  Work: nativePart("div", "bevel-r-kanban__work"),
+  Toolbar: nativePart("div", "bevel-r-kanban__tools"),
+  CardTitle,
+  CardDescription,
+  Labels,
+  Label,
+  Due,
+  Priority,
+  Footer
+};
+export {
+  KanbanBoard
+};

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

@@ -0,0 +1,51 @@
+export declare const Page: {
+    (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;
+};
+export declare const Section: {
+    (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;
+};
+export { AppShell, type AppShellProps } from './app-shell.js';
+export declare const AppContent: {
+    (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 declare const ScrollContainer: {
+    (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 declare const Measure: {
+    (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 declare const VisuallyHidden: {
+    (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 declare const ScrollArea: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Scrollbar: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaScrollbarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Corner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/scroll-area").ScrollAreaCornerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/react/components/layout.js

@@ -0,0 +1,28 @@
+"use client";
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { nativePart, styled } from "../internal/part.js";
+const Page = nativePart("main", "bevel-r-page");
+const Section = nativePart("section", "bevel-r-section");
+import { AppShell } from "./app-shell.js";
+const AppContent = nativePart("div", "bevel-r-app-content");
+const ScrollContainer = nativePart("div", "bevel-r-scroll");
+const Measure = nativePart("div", "bevel-r-measure");
+const VisuallyHidden = nativePart("span", "bevel-r-sr-only");
+const ScrollArea = {
+  Root: styled(BaseScrollArea.Root, "bevel-r-scroll-area"),
+  Viewport: styled(BaseScrollArea.Viewport, "bevel-r-scroll-area__viewport"),
+  Content: styled(BaseScrollArea.Content, "bevel-r-scroll-area__content"),
+  Scrollbar: styled(BaseScrollArea.Scrollbar, "bevel-r-scroll-area__scrollbar"),
+  Thumb: styled(BaseScrollArea.Thumb, "bevel-r-scroll-area__thumb"),
+  Corner: styled(BaseScrollArea.Corner, "bevel-r-scroll-area__corner")
+};
+export {
+  AppContent,
+  AppShell,
+  Measure,
+  Page,
+  ScrollArea,
+  ScrollContainer,
+  Section,
+  VisuallyHidden
+};

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

@@ -0,0 +1,28 @@
+export declare const List: (({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "size"> & {
+    variant?: undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "size"> & {
+    variant?: undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>) & {
+    Ordered: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "size"> & {
+        variant?: undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "size"> & {
+        variant?: undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Item: {
+        (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & {
+            '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/list.js

@@ -0,0 +1,6 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const List = Object.assign(nativeVariants("ul", "bevel-r-list", []), { Ordered: nativeVariants("ol", "bevel-r-list", []), Item: nativePart("li", "bevel-r-list__item") });
+export {
+  List
+};

package/dist/react/components/masthead-and-verdict.d.ts

@@ -0,0 +1,60 @@
+export declare const Masthead: {
+    Root: {
+        (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;
+    };
+    Row: {
+        (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;
+    };
+    Headline: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Dek: {
+        (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;
+    };
+    Tape: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDListElement> & import("react").HTMLAttributes<HTMLDListElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export declare const Verdict: {
+    Root: {
+        (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;
+    };
+    Title: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Summary: {
+        (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;
+    };
+};

package/dist/react/components/masthead-and-verdict.js

@@ -0,0 +1,8 @@
+"use client";
+import { nativePart } from "../internal/part.js";
+const Masthead = { Root: nativePart("header", "bevel-r-mast"), Row: nativePart("div", "bevel-r-mast__row"), Headline: nativePart("h1", "bevel-r-mast__headline"), Dek: nativePart("p", "bevel-r-mast__dek"), Tape: nativePart("dl", "bevel-r-mast__tape") };
+const Verdict = { Root: nativePart("aside", "bevel-r-verdict"), Title: nativePart("h2", "bevel-r-verdict__title"), Summary: nativePart("p", "bevel-r-verdict__summary") };
+export {
+  Masthead,
+  Verdict
+};

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

@@ -0,0 +1,26 @@
+import { Menu as Base } from '@base-ui/react/menu';
+export declare const Menu: {
+    Root: <Payload>(props: Base.Root.Props<Payload>) => import("react").JSX.Element;
+    SubmenuRoot: typeof Base.SubmenuRoot;
+    Trigger: Base.Trigger;
+    UnstyledTrigger: Base.Trigger;
+    SubmenuTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuSubmenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    LinkItem: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuLinkItemProps, "ref"> & import("react").RefAttributes<Element>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    CheckboxItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuCheckboxItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    RadioGroup: import("react").NamedExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    RadioItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuRadioItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/menu").MenuGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Handle: typeof Base.Handle;
+    createHandle: typeof Base.createHandle;
+};

package/dist/react/components/menu.js

@@ -0,0 +1,31 @@
+"use client";
+import { Menu as Base } from "@base-ui/react/menu";
+import { styled } from "../internal/part.js";
+const Menu = {
+  Root: Base.Root,
+  SubmenuRoot: Base.SubmenuRoot,
+  Trigger: styled(Base.Trigger, "bevel-r-button"),
+  UnstyledTrigger: Base.Trigger,
+  SubmenuTrigger: styled(Base.SubmenuTrigger, "bevel-r-menu__item"),
+  Portal: styled(Base.Portal, "bevel-r-portal", true),
+  Positioner: styled(Base.Positioner, "bevel-r-positioner"),
+  Popup: styled(Base.Popup, "bevel-r-menu"),
+  Arrow: styled(Base.Arrow, "bevel-r-menu__arrow"),
+  Backdrop: styled(Base.Backdrop, "bevel-r-menu__backdrop"),
+  Viewport: styled(Base.Viewport, "bevel-r-menu__viewport"),
+  Item: styled(Base.Item, "bevel-r-menu__item"),
+  LinkItem: styled(Base.LinkItem, "bevel-r-menu__item"),
+  CheckboxItem: styled(Base.CheckboxItem, "bevel-r-menu__item"),
+  CheckboxItemIndicator: styled(Base.CheckboxItemIndicator, "bevel-r-menu__indicator"),
+  RadioGroup: styled(Base.RadioGroup, "bevel-r-menu__radio-group"),
+  RadioItem: styled(Base.RadioItem, "bevel-r-menu__item"),
+  RadioItemIndicator: styled(Base.RadioItemIndicator, "bevel-r-menu__indicator"),
+  Group: styled(Base.Group, "bevel-r-menu__group"),
+  GroupLabel: styled(Base.GroupLabel, "bevel-r-menu__title"),
+  Separator: styled(Base.Separator, "bevel-r-menu__separator"),
+  Handle: Base.Handle,
+  createHandle: Base.createHandle
+};
+export {
+  Menu
+};