@panphora/bevel 0.1.0

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

@@ -0,0 +1,74 @@
+import type { ComponentProps } from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+declare function CornerClose({ children, 'aria-label': label, ...props }: ComponentProps<typeof BaseDialog.Close>): import("react").JSX.Element;
+export declare const Dialog: {
+    Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: BaseDialog.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CornerClose: typeof CornerClose;
+    Header: {
+        (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;
+    };
+    Body: {
+        (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;
+    };
+    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;
+    };
+    createHandle: typeof BaseDialog.createHandle;
+    Handle: typeof BaseDialog.Handle;
+};
+export declare const Modal: {
+    Root: <Payload>(props: BaseDialog.Root.Props<Payload>) => import("react").JSX.Element;
+    Trigger: BaseDialog.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    CornerClose: typeof CornerClose;
+    Header: {
+        (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;
+    };
+    Body: {
+        (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;
+    };
+    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;
+    };
+    createHandle: typeof BaseDialog.createHandle;
+    Handle: typeof BaseDialog.Handle;
+};
+export {};

package/dist/react/components/dialog.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { CloseMark } from "../internal/close-mark.js";
+import { nativePart, styled } from "../internal/part.js";
+const CornerCloseButton = styled(BaseDialog.Close, "bevel-r-overlay__close");
+function CornerClose({ children, "aria-label": label, ...props }) {
+  return /* @__PURE__ */ jsx(CornerCloseButton, { ...props, "aria-label": label ?? "Close", children: children ?? /* @__PURE__ */ jsx(CloseMark, {}) });
+}
+const Dialog = {
+  Root: BaseDialog.Root,
+  Trigger: styled(BaseDialog.Trigger, "bevel-r-button"),
+  Portal: styled(BaseDialog.Portal, "bevel-r-portal", true),
+  Backdrop: styled(BaseDialog.Backdrop, "bevel-r-modal__backdrop"),
+  Viewport: styled(BaseDialog.Viewport, "bevel-r-modal__viewport"),
+  Popup: styled(BaseDialog.Popup, "bevel-r-modal"),
+  Title: styled(BaseDialog.Title, "bevel-r-modal__heading"),
+  Description: styled(BaseDialog.Description, "bevel-r-modal__description"),
+  Close: styled(BaseDialog.Close, "bevel-r-button"),
+  CornerClose,
+  Header: nativePart("header", "bevel-r-modal__header"),
+  Body: nativePart("div", "bevel-r-modal__body"),
+  Footer: nativePart("footer", "bevel-r-modal__footer"),
+  createHandle: BaseDialog.createHandle,
+  Handle: BaseDialog.Handle
+};
+const Modal = Dialog;
+export {
+  Dialog,
+  Modal
+};

package/dist/react/components/diff-view.d.ts

@@ -0,0 +1,73 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface DiffRecord {
+    id: string;
+    kind: 'add' | 'remove' | 'same';
+    text: string;
+    oldLine?: number;
+    newLine?: number;
+}
+interface DiffContext {
+    records: readonly DiffRecord[];
+    layout: 'unified' | 'split';
+    filename?: string;
+    hunk?: string;
+    change: (layout: 'unified' | 'split', details: ChangeDetails) => void;
+}
+export interface DiffViewProps extends ComponentProps<'section'> {
+    records: readonly DiffRecord[];
+    layout?: 'unified' | 'split';
+    defaultLayout?: 'unified' | 'split';
+    onLayoutChange?: DiffContext['change'];
+    filename?: string;
+    hunk?: string;
+}
+declare function Root({ records, layout, defaultLayout, onLayoutChange, filename, hunk, ...props }: DiffViewProps): import("react").JSX.Element;
+declare function Line({ record, before }: {
+    record: DiffRecord;
+    before?: boolean;
+}): import("react").JSX.Element;
+declare function Body(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function Count({ kind, ...props }: ComponentProps<'span'> & {
+    kind: 'add' | 'remove';
+}): import("react").JSX.Element;
+declare function Layout({ layout, onClick, ...props }: ComponentProps<typeof Button> & {
+    layout: 'unified' | 'split';
+}): import("react").JSX.Element;
+export declare const DiffView: {
+    Root: typeof Root;
+    Body: typeof Body;
+    Line: typeof Line;
+    Count: typeof Count;
+    Layout: typeof Layout;
+    Hunk: {
+        (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;
+    };
+    Header: {
+        (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;
+    };
+    Controls: {
+        (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;
+    };
+    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;
+    };
+};
+export {};

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

@@ -0,0 +1,68 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { nativePart } from "../internal/part.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { VisuallyHidden } from "./layout.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useDiff() {
+  const context = useContext(Context);
+  if (!context) throw new Error("DiffView parts require DiffView.Root.");
+  return context;
+}
+const RootPart = nativePart("section", "bevel-r-diff");
+const BodyPart = nativePart("div", "bevel-r-diff__body");
+const LinePart = nativePart("div", "bevel-r-diff__line");
+const Hunk = nativePart("div", "bevel-r-diff__hunk");
+const CountPart = nativePart("span", "bevel-r-diff__count");
+function Root({ records, layout, defaultLayout = "unified", onLayoutChange, filename, hunk, ...props }) {
+  const [current, change] = useControllableState({ value: layout, defaultValue: defaultLayout, onChange: onLayoutChange });
+  if (new Set(records.map((record) => record.id)).size !== records.length) throw new Error("Diff record IDs must be unique.");
+  return /* @__PURE__ */ jsx(Context, { value: { records, layout: current, filename, hunk, change }, children: /* @__PURE__ */ jsx(RootPart, { "aria-label": filename ? `Changes to ${filename}` : "Changes", ...props, "data-bevel-react-layout": current }) });
+}
+function Line({ record, before = false }) {
+  const line = before || record.kind === "remove" ? record.oldLine : record.newLine;
+  return /* @__PURE__ */ jsxs(LinePart, { role: "listitem", "data-bevel-react-kind": record.kind, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: line }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: record.kind === "add" ? "+" : record.kind === "remove" ? "\u2212" : " " }),
+    /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+      record.kind === "add" ? "Added" : record.kind === "remove" ? "Removed" : "Unchanged",
+      line === void 0 ? "" : `, line ${line}`,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsx("code", { children: record.text })
+  ] });
+}
+function Body(props) {
+  const context = useDiff();
+  return /* @__PURE__ */ jsx(BodyPart, { ...props, children: context.layout === "unified" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Hunk, { children: context.hunk }),
+    /* @__PURE__ */ jsx("div", { role: "list", "aria-label": "Changes", children: context.records.map((record) => /* @__PURE__ */ jsx(Line, { record }, record.id)) })
+  ] }) : ["before", "after"].map((side) => /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("h3", { children: [
+      side === "before" ? "Before" : "After",
+      " ",
+      /* @__PURE__ */ jsx("small", { children: context.filename })
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "list", "aria-label": side === "before" ? "Before" : "After", children: context.records.filter((record) => record.kind !== (side === "before" ? "add" : "remove")).map((record) => /* @__PURE__ */ jsx(Line, { record, before: side === "before" }, record.id)) })
+  ] }, side)) });
+}
+function Count({ kind, ...props }) {
+  const context = useDiff();
+  return /* @__PURE__ */ jsxs(CountPart, { ...props, "data-bevel-react-kind": kind, children: [
+    kind === "add" ? "+" : "\u2212",
+    context.records.filter((record) => record.kind === kind).length
+  ] });
+}
+function Layout({ layout, onClick, ...props }) {
+  const context = useDiff();
+  return /* @__PURE__ */ jsx(Button, { ...props, "aria-pressed": context.layout === layout, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.change(layout, { reason: "layout", event });
+  }, children: props.children ?? (layout === "unified" ? "Unified" : "Split") });
+}
+const DiffView = { Root, Body, Line, Count, Layout, Hunk, Header: nativePart("header", "bevel-r-diff__header"), Controls: nativePart("div", "bevel-r-diff__controls"), Footer: nativePart("footer", "bevel-r-diff__footer") };
+export {
+  DiffView
+};

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

@@ -0,0 +1,70 @@
+export declare const DocumentCard: {
+    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;
+    };
+    Identity: {
+        (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;
+    };
+    Status: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "good" | undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "good" | undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+};
+export declare const DocumentPanel: {
+    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;
+    };
+    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;
+    };
+    Description: {
+        (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 declare const DocumentRow: {
+    (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: import("../internal/classes.js").StateClassName<unknown>;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};

package/dist/react/components/documents.js

@@ -0,0 +1,10 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const DocumentCard = { Root: nativePart("article", "bevel-r-document-card"), Identity: nativePart("div", "bevel-r-document-card__identity"), Status: nativeVariants("span", "bevel-r-document-card__status", ["good"]) };
+const DocumentPanel = { Root: nativePart("section", "bevel-r-document-panel"), Row: nativePart("div", "bevel-r-document-panel__row"), Label: nativePart("span", "bevel-r-document-panel__label"), Description: nativePart("p", "bevel-r-document-panel__description"), Note: nativePart("p", "bevel-r-document-panel__note") };
+const DocumentRow = nativePart("div", "bevel-r-document-row");
+export {
+  DocumentCard,
+  DocumentPanel,
+  DocumentRow
+};

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

@@ -0,0 +1,45 @@
+import type { ComponentProps } from 'react';
+import { Drawer as Base } from '@base-ui/react/drawer';
+declare function CornerClose({ children, 'aria-label': label, ...props }: ComponentProps<typeof Base.Close>): import("react").JSX.Element;
+export declare const Drawer: {
+    Root: typeof Base.Root;
+    Provider: typeof Base.Provider;
+    VirtualKeyboardProvider: typeof Base.VirtualKeyboardProvider;
+    Trigger: Base.Trigger;
+    Portal: Base.Portal;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: Base.Title;
+    Description: Base.Description;
+    Close: Base.Close;
+    CornerClose: typeof CornerClose;
+    Indent: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerIndentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    IndentBackground: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerIndentBackgroundProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    SwipeArea: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/drawer").DrawerSwipeAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    createHandle: typeof Base.createHandle;
+    Handle: typeof Base.Handle;
+    Header: {
+        (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;
+    };
+    Body: {
+        (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;
+    };
+    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;
+    };
+};
+export {};

package/dist/react/components/drawer.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Drawer as Base } from "@base-ui/react/drawer";
+import { CloseMark } from "../internal/close-mark.js";
+import { nativePart, styled } from "../internal/part.js";
+const CornerCloseButton = styled(Base.Close, "bevel-r-overlay__close");
+function CornerClose({ children, "aria-label": label, ...props }) {
+  return /* @__PURE__ */ jsx(CornerCloseButton, { ...props, "aria-label": label ?? "Close", children: children ?? /* @__PURE__ */ jsx(CloseMark, {}) });
+}
+const Drawer = {
+  Root: Base.Root,
+  Provider: Base.Provider,
+  VirtualKeyboardProvider: Base.VirtualKeyboardProvider,
+  Trigger: styled(Base.Trigger, "bevel-r-button"),
+  Portal: styled(Base.Portal, "bevel-r-portal", true),
+  Backdrop: styled(Base.Backdrop, "bevel-r-drawer__backdrop"),
+  Viewport: styled(Base.Viewport, "bevel-r-drawer__viewport"),
+  Popup: styled(Base.Popup, "bevel-r-drawer"),
+  Content: styled(Base.Content, "bevel-r-drawer__inner"),
+  Title: styled(Base.Title, "bevel-r-drawer__heading"),
+  Description: styled(Base.Description, "bevel-r-drawer__description"),
+  Close: styled(Base.Close, "bevel-r-button"),
+  CornerClose,
+  Indent: styled(Base.Indent, "bevel-r-drawer__indent"),
+  IndentBackground: styled(Base.IndentBackground, "bevel-r-drawer__indent-background"),
+  SwipeArea: styled(Base.SwipeArea, "bevel-r-drawer__swipe-area"),
+  createHandle: Base.createHandle,
+  Handle: Base.Handle,
+  Header: nativePart("header", "bevel-r-drawer__header"),
+  Body: nativePart("div", "bevel-r-drawer__body"),
+  Footer: nativePart("footer", "bevel-r-drawer__footer")
+};
+export {
+  Drawer
+};

package/dist/react/components/editable-grid-cells.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentProps, type ReactNode } from 'react';
+export interface EditableCellProps extends ComponentProps<'div'> {
+    rowId: string;
+    columnId: string;
+    children?: ReactNode;
+}
+declare function Root({ rowId, columnId, children, onDoubleClick, onKeyDown, ref, ...props }: EditableCellProps): import("react").JSX.Element;
+export declare const EditableCell: {
+    Root: typeof Root;
+    Value: {
+        (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;
+    };
+    Editor: {
+        (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;
+    };
+    Error: {
+        (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/editable-grid-cells.js

@@ -0,0 +1,116 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { useTable } from "../internal/table-context.js";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { parseNumber } from "../models/filter.js";
+const RootPart = nativePart("div", "bevel-r-grid__cell");
+const EditorPart = nativePart("span", "bevel-r-grid__cell-editor");
+const InputPart = nativePart("input", "bevel-r-grid__cell-input");
+const SelectPart = nativePart("select", "bevel-r-grid__cell-input");
+const ActionPart = nativePart("button", "bevel-r-grid__cell-action");
+const ValuePart = nativePart("button", "bevel-r-grid__cell-value");
+const ErrorPart = nativePart("span", "bevel-r-grid__cell-error");
+function Root({ rowId, columnId, children, onDoubleClick, onKeyDown, ref, ...props }) {
+  const table = useTable();
+  const row = table.options.rows.find((row2) => table.options.getRowId(row2) === rowId);
+  const column = table.options.columns.find((column2) => column2.id === columnId);
+  const previous = row === void 0 ? void 0 : column?.getValue(row);
+  const editing = table.activeCell?.rowId === rowId && table.activeCell.columnId === columnId;
+  const [draft, setDraft] = useState(""), [error, setError] = useState("");
+  const errorId = useId(), root = useRef(null), input = useRef(null);
+  const merged = useMergedRefs(ref, root);
+  const original = useRef({ rowId, columnId, previous });
+  const finish = (focus = true, direction = 0) => {
+    table.setActiveCell(null);
+    if (focus) table.focusCell({ rowId, columnId }, direction);
+  };
+  useEffect(() => {
+    if (!editing) return;
+    if (row === void 0 || original.current.rowId !== rowId || original.current.columnId !== columnId || !Object.is(original.current.previous, previous)) {
+      finish();
+      return;
+    }
+    const document = root.current.ownerDocument;
+    const outside = (event) => {
+      if (!root.current?.contains(event.target)) finish(false);
+    };
+    document.addEventListener("pointerdown", outside);
+    return () => document.removeEventListener("pointerdown", outside);
+  }, [editing, row, rowId, columnId, previous]);
+  useEffect(() => {
+    if (editing) {
+      input.current?.focus();
+      if (input.current instanceof HTMLInputElement) input.current.select();
+    }
+  }, [editing]);
+  const start = () => {
+    if (!column?.editable || row === void 0) return;
+    original.current = { rowId, columnId, previous };
+    setDraft(String(previous ?? ""));
+    setError("");
+    table.setActiveCell({ rowId, columnId });
+  };
+  const commit = (direction = 0) => {
+    if (!column || row === void 0 || original.current.rowId !== rowId || original.current.columnId !== columnId || !Object.is(original.current.previous, previous)) {
+      finish();
+      return;
+    }
+    const value = column.type === "number" ? parseNumber(draft) : draft;
+    const message = column.type === "number" && value === null ? "Enter a number." : column.type === "enum" && column.options && !column.options.some((option) => option.id === value) ? "Choose an available value." : column.validate?.(value, row);
+    if (message) {
+      setError(message);
+      input.current?.focus();
+      return;
+    }
+    table.options.onCellCommit?.({ rowId, columnId, previous, value });
+    finish(true, direction);
+  };
+  const fieldProps = {
+    value: draft,
+    "aria-label": `Edit ${column?.label ?? columnId}`,
+    "aria-invalid": Boolean(error),
+    "aria-describedby": error ? errorId : void 0,
+    onChange: (event) => {
+      setDraft(event.target.value);
+      setError("");
+    },
+    onKeyDown: (event) => {
+      if (event.nativeEvent.isComposing) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        finish();
+      } else if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        commit(event.key === "Tab" ? event.shiftKey ? -1 : 1 : 0);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, "data-bevel-react-editing": editing || void 0, onDoubleClick: (event) => {
+    onDoubleClick?.(event);
+    if (!event.defaultPrevented && !editing) start();
+  }, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && !editing && (event.key === "F2" || event.key === "Enter")) {
+      event.preventDefault();
+      start();
+    }
+  }, children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(EditorPart, { children: [
+      column?.type === "enum" ? /* @__PURE__ */ jsx(SelectPart, { ...fieldProps, ref: (node) => {
+        input.current = node;
+      }, children: column.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.label }, option.id)) }) : /* @__PURE__ */ jsx(InputPart, { ...fieldProps, inputMode: column?.type === "number" ? "decimal" : void 0, ref: (node) => {
+        input.current = node;
+      } }),
+      /* @__PURE__ */ jsx(ActionPart, { type: "button", "aria-label": "Save cell", onClick: () => commit(), children: "\u2713" }),
+      /* @__PURE__ */ jsx(ActionPart, { type: "button", "aria-label": "Cancel cell", onClick: () => finish(), children: "\xD7" })
+    ] }),
+    error && /* @__PURE__ */ jsx(ErrorPart, { id: errorId, role: "alert", children: error })
+  ] }) : /* @__PURE__ */ jsx(ValuePart, { type: "button", "data-bevel-react-cell-focus": "", "data-row-id": rowId, "data-column-id": columnId, onClick: start, disabled: !column?.editable, children: children ?? String(previous ?? "") }) });
+}
+const EditableCell = { Root, Value: ValuePart, Editor: EditorPart, Error: ErrorPart };
+export {
+  EditableCell
+};

package/dist/react/components/eyebrow-kicker-lede-pull-quote.d.ts

@@ -0,0 +1,39 @@
+export declare const Eyebrow: (({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size"> & {
+    variant?: "bare" | undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size"> & {
+    variant?: "bare" | undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>) & {
+    Count: {
+        (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 Kicker: {
+    (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 declare const 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;
+};
+export declare const PullQuote: {
+    (props: import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLQuoteElement> & import("react").BlockquoteHTMLAttributes<HTMLQuoteElement> & {
+        '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/eyebrow-kicker-lede-pull-quote.js

@@ -0,0 +1,12 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const Eyebrow = Object.assign(nativeVariants("p", "bevel-r-eyebrow", ["bare"]), { Count: nativePart("span", "bevel-r-eyebrow__count") });
+const Kicker = nativePart("p", "bevel-r-kicker");
+const Lede = nativePart("p", "bevel-r-lede");
+const PullQuote = nativePart("blockquote", "bevel-r-pull");
+export {
+  Eyebrow,
+  Kicker,
+  Lede,
+  PullQuote
+};