@panphora/bevel 0.1.0

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

@@ -0,0 +1,7 @@
+import { Radio as Base } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+export declare const Radio: {
+    Root: <Value>(props: Base.Root.Props<Value>) => import("react").JSX.Element;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/radio").RadioIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export declare const RadioGroup: <Value>(props: BaseRadioGroup.Props<Value>) => import("react").JSX.Element;

package/dist/react/components/radio.js

@@ -0,0 +1,13 @@
+"use client";
+import { Radio as Base } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { styled } from "../internal/part.js";
+const Radio = {
+  Root: styled(Base.Root, "bevel-r-radio__ring"),
+  Indicator: styled(Base.Indicator, "bevel-r-radio__indicator")
+};
+const RadioGroup = styled(BaseRadioGroup, "bevel-r-choices");
+export {
+  Radio,
+  RadioGroup
+};

package/dist/react/components/rich-text-toolbar.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps } from 'react';
+import { type RichTextController } from '../internal/rich-text.js';
+import { AppToolbar } from './app-toolbar.js';
+export type { RichTextController, RichTextSnapshot, RichTextCommand } from '../internal/rich-text.js';
+export interface RichTextToolbarProps extends ComponentProps<typeof AppToolbar.Root> {
+    editor: RichTextController | null;
+    mode?: 'static' | 'floating' | 'view';
+    disabled?: boolean;
+    container?: HTMLElement;
+}
+declare function Root({ editor, mode, disabled, container, ...props }: RichTextToolbarProps): import("react").JSX.Element | null;
+declare function Command({ commandId, onPointerDown, onClick, ...props }: ComponentProps<typeof AppToolbar.Button> & {
+    commandId: string;
+}): import("react").JSX.Element;
+declare function Commands({ ids }: {
+    ids?: readonly string[];
+}): import("react").JSX.Element;
+declare function BlockMenu(): import("react").JSX.Element;
+export declare const RichTextToolbar: {
+    Root: typeof Root;
+    Command: typeof Command;
+    Commands: typeof Commands;
+    BlockMenu: typeof BlockMenu;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToolbarSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/react/components/rich-text-toolbar.js

@@ -0,0 +1,64 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
+import { useBevel, BevelProvider } from "../provider.js";
+import { emptyRichTextSnapshot } from "../internal/rich-text.js";
+import { AppToolbar } from "./app-toolbar.js";
+import { Menu } from "./menu.js";
+const Context = createContext(null);
+const subscribeNone = () => () => {
+}, serverSnapshot = () => emptyRichTextSnapshot;
+function Root({ editor, mode = "static", disabled = false, container, ...props }) {
+  const snapshot = useSyncExternalStore(editor?.subscribe ?? subscribeNone, editor?.getSnapshot ?? serverSnapshot, serverSnapshot), theme = useBevel();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (mode === "view" || mode === "floating" && (!mounted || !snapshot.selection)) return null;
+  const floating = mode === "floating" ? { position: "fixed", left: Math.max(8, snapshot.selection.left), top: Math.max(48, snapshot.selection.top - 8), transform: "translateY(-100%)", zIndex: 1e3 } : {};
+  const style = props.style;
+  const toolbar = /* @__PURE__ */ jsx(Context, { value: { editor, snapshot, disabled }, children: /* @__PURE__ */ jsx(AppToolbar.Root, { "aria-label": "Text formatting", ...props, style: mode === "floating" ? typeof style === "function" ? (state) => ({ ...floating, ...style(state) }) : { ...floating, ...style } : style }) });
+  return mode === "floating" ? createPortal(/* @__PURE__ */ jsx(BevelProvider, { appearance: theme.appearance, mode: theme.mode, tokens: theme.tokens, children: toolbar }), container ?? document.body) : toolbar;
+}
+function useToolbar() {
+  const context = useContext(Context);
+  if (!context) throw new Error("RichTextToolbar parts require RichTextToolbar.Root.");
+  return context;
+}
+function Command({ commandId, onPointerDown, onClick, ...props }) {
+  const context = useToolbar(), command = context.snapshot.commands.find((command2) => command2.id === commandId);
+  return /* @__PURE__ */ jsx(
+    AppToolbar.Button,
+    {
+      "aria-label": command?.label ?? commandId,
+      ...props,
+      disabled: props.disabled || context.disabled || !context.editor || !command || command.disabled,
+      "aria-pressed": command?.toggle ? command.active : void 0,
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        if (!event.defaultPrevented) {
+          context.editor?.saveSelection();
+          event.preventDefault();
+        }
+      },
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) context.editor?.run(commandId);
+      },
+      children: props.children ?? command?.label ?? commandId
+    }
+  );
+}
+function Commands({ ids = ["bold", "italic", "underline", "unorderedList", "orderedList", "link", "undo", "redo"] }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: ids.map((id) => /* @__PURE__ */ jsx(Command, { commandId: id }, id)) });
+}
+function BlockMenu() {
+  const context = useToolbar(), command = context.snapshot.commands.find((command2) => command2.id === "blockMenu");
+  return /* @__PURE__ */ jsxs(Menu.Root, { children: [
+    /* @__PURE__ */ jsx(Menu.Trigger, { disabled: context.disabled || !command || command.disabled, onPointerDown: () => context.editor?.saveSelection(), children: "Block style" }),
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Popup, { children: command?.options?.map((option) => /* @__PURE__ */ jsx(Menu.Item, { disabled: option.disabled, onClick: () => context.editor?.run(option.id), children: option.label }, option.id)) }) }) })
+  ] });
+}
+const RichTextToolbar = { Root, Command, Commands, BlockMenu, Group: AppToolbar.Group, Separator: AppToolbar.Separator };
+export {
+  RichTextToolbar
+};

package/dist/react/components/rows-and-card.d.ts

@@ -0,0 +1,88 @@
+export declare const RevisionRows: {
+    (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;
+} & {
+    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;
+    };
+    Key: {
+        (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;
+    };
+    Body: {
+        (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 EvidenceRows: {
+    (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;
+} & {
+    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;
+    };
+    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;
+    };
+    Body: {
+        (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 Card: {
+    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;
+    };
+    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;
+    };
+};

package/dist/react/components/rows-and-card.js

@@ -0,0 +1,10 @@
+"use client";
+import { nativePart } from "../internal/part.js";
+const RevisionRows = Object.assign(nativePart("div", "bevel-r-rev"), { Row: nativePart("div", "bevel-r-rev__row"), Key: nativePart("span", "bevel-r-rev__k"), Body: nativePart("p", "bevel-r-rev__body") });
+const EvidenceRows = Object.assign(nativePart("div", "bevel-r-ev"), { Row: nativePart("div", "bevel-r-ev__row"), Title: nativePart("h4", "bevel-r-ev__title"), Body: nativePart("p", "bevel-r-ev__body") });
+const Card = { Root: nativePart("article", "bevel-r-card"), Header: nativePart("header", "bevel-r-card__header"), Body: nativePart("div", "bevel-r-card__body"), Footer: nativePart("footer", "bevel-r-card__footer") };
+export {
+  Card,
+  EvidenceRows,
+  RevisionRows
+};

package/dist/react/components/save-status-indicator.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react';
+export interface SaveStatusProps extends ComponentProps<'span'> {
+    state: 'clean' | 'dirty' | 'saving' | 'saved' | 'error';
+    duration?: number;
+    eventKey?: string | number;
+    savedAt?: string;
+    onRetry?: () => void;
+    notification?: boolean;
+}
+export declare function SaveStatus({ state, duration, eventKey, savedAt, onRetry, notification, children, ...props }: SaveStatusProps): import("react").JSX.Element;
+export declare function SavedNotification(props: Omit<SaveStatusProps, 'state' | 'notification'>): import("react").JSX.Element;

package/dist/react/components/save-status-indicator.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { nativePart } from "../internal/part.js";
+import { Button } from "./button.js";
+const RootPart = nativePart("span", "bevel-r-save-status");
+const NoticePart = nativePart("span", "bevel-r-saved");
+function SaveStatus({ state, duration = 2e3, eventKey, savedAt, onRetry, notification = false, children, ...props }) {
+  const [expired, setExpired] = useState(false);
+  useEffect(() => {
+    setExpired(false);
+    if (state !== "saved" || duration <= 0) return;
+    const timer = setTimeout(() => setExpired(true), duration);
+    return () => clearTimeout(timer);
+  }, [state, duration, eventKey, savedAt]);
+  const Part = notification ? NoticePart : RootPart;
+  const labels = { clean: "All changes saved", dirty: "Unsaved changes", saving: "Saving\u2026", saved: "Saved", error: "Could not save" };
+  return /* @__PURE__ */ jsxs(Part, { role: "status", "aria-live": "polite", ...props, hidden: props.hidden || state === "saved" && expired, "data-bevel-react-state": state, children: [
+    children ?? labels[state],
+    savedAt && state === "saved" && /* @__PURE__ */ jsxs("time", { dateTime: savedAt, children: [
+      " ",
+      savedAt
+    ] }),
+    state === "error" && onRetry && /* @__PURE__ */ jsx(Button, { onClick: onRetry, children: "Retry" })
+  ] });
+}
+function SavedNotification(props) {
+  return /* @__PURE__ */ jsx(SaveStatus, { ...props, state: "saved", notification: true });
+}
+export {
+  SaveStatus,
+  SavedNotification
+};

package/dist/react/components/segmented-control.d.ts

@@ -0,0 +1,21 @@
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import { Toggle } from '@base-ui/react/toggle';
+import { type ComponentProps } from 'react';
+import { Link as LinkPart } from '../internal/link.js';
+export interface SegmentedControlLinkProps extends ComponentProps<typeof LinkPart> {
+    current?: boolean;
+}
+declare function SegmentedLink({ current, children, ...props }: SegmentedControlLinkProps): import("react").JSX.Element;
+export declare const SegmentedControl: {
+    Root: <Value extends string>(props: ToggleGroup.Props<Value> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element;
+    Item: <Value extends string>(props: Toggle.Props<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+    Links: {
+        (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;
+    };
+    Link: typeof SegmentedLink;
+};
+export {};

package/dist/react/components/segmented-control.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
+import { nativePart, styled } from "../internal/part.js";
+import { Link as LinkPart } from "../internal/link.js";
+const LinkRoot = styled(LinkPart, "bevel-r-button");
+const LinkLabel = nativePart("span", "bevel-r-button__label");
+function SegmentedLink({ current = false, children, ...props }) {
+  return /* @__PURE__ */ jsx(LinkRoot, { ...props, "aria-current": current ? "page" : props["aria-current"], children: /* @__PURE__ */ jsx(LinkLabel, { children }) });
+}
+const SegmentedControl = { Root: styled(ToggleGroup, "bevel-r-seg"), Item: styled(Toggle, "bevel-r-button"), Links: nativePart("nav", "bevel-r-seg bevel-r-seg--links"), Link: SegmentedLink };
+export {
+  SegmentedControl
+};

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

@@ -0,0 +1,29 @@
+import { Select as Base } from '@base-ui/react/select';
+export declare const Select: {
+    Root: typeof Base.Root;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").NamedExoticComponent<Omit<import("@base-ui/react/select").SelectItemProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    ItemText: import("react").NamedExoticComponent<Omit<import("@base-ui/react/select").SelectItemTextProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollDownArrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectScrollDownArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollUpArrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectScrollUpArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/select").SelectGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("@base-ui/react/select").SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const NativeSelect: {
+    (props: import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSelectElement> & import("react").SelectHTMLAttributes<HTMLSelectElement> & {
+        '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/select.js

@@ -0,0 +1,29 @@
+"use client";
+import { Select as Base } from "@base-ui/react/select";
+import { nativePart, styled } from "../internal/part.js";
+const Select = {
+  Root: Base.Root,
+  Label: styled(Base.Label, "bevel-r-field__label"),
+  Trigger: styled(Base.Trigger, "bevel-r-select__field bevel-r-select__trigger"),
+  Value: styled(Base.Value, "bevel-r-select__value"),
+  Icon: styled(Base.Icon, "bevel-r-select__icon"),
+  Portal: styled(Base.Portal, "bevel-r-portal", true),
+  Backdrop: styled(Base.Backdrop, "bevel-r-select__backdrop"),
+  Positioner: styled(Base.Positioner, "bevel-r-positioner"),
+  Popup: styled(Base.Popup, "bevel-r-select__popup"),
+  List: styled(Base.List, "bevel-r-select__list"),
+  Item: styled(Base.Item, "bevel-r-select__item"),
+  ItemText: styled(Base.ItemText, "bevel-r-select__text"),
+  ItemIndicator: styled(Base.ItemIndicator, "bevel-r-select__indicator"),
+  Arrow: styled(Base.Arrow, "bevel-r-select__arrow"),
+  ScrollDownArrow: styled(Base.ScrollDownArrow, "bevel-r-select__scroll-arrow"),
+  ScrollUpArrow: styled(Base.ScrollUpArrow, "bevel-r-select__scroll-arrow"),
+  Group: styled(Base.Group, "bevel-r-select__group"),
+  GroupLabel: styled(Base.GroupLabel, "bevel-r-select__group-label"),
+  Separator: styled(Base.Separator, "bevel-r-select__separator")
+};
+const NativeSelect = nativePart("select", "bevel-r-select__field bevel-r-native-select");
+export {
+  NativeSelect,
+  Select
+};

package/dist/react/components/selectable-cards.d.ts

@@ -0,0 +1,30 @@
+import { Radio } from './radio.js';
+import { Checkbox } from './checkbox.js';
+import type { ComponentProps } from 'react';
+declare function RadioIndicator(props: ComponentProps<typeof Radio.Indicator>): import("react").JSX.Element;
+declare function CheckboxIndicator(props: ComponentProps<typeof Checkbox.Indicator>): import("react").JSX.Element;
+export declare const RadioCards: {
+    Root: <Value>(props: import("@base-ui/react").RadioGroup.Props<Value>) => import("react").JSX.Element;
+    Item: <Value>(props: import("@base-ui/react").RadioRoot.Props<Value>) => import("react").JSX.Element;
+    Indicator: typeof RadioIndicator;
+    Copy: {
+        (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 CheckboxCards: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").CheckboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").CheckboxRootProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Indicator: typeof CheckboxIndicator;
+    Copy: {
+        (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/selectable-cards.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Radio, RadioGroup } from "./radio.js";
+import { Checkbox, CheckboxGroup } from "./checkbox.js";
+import { nativePart, styled } from "../internal/part.js";
+const Copy = nativePart("span", "bevel-r-choice-card__copy");
+const Mark = nativePart("span", "bevel-r-choice-card__mark");
+function RadioIndicator(props) {
+  return /* @__PURE__ */ jsx(Mark, { "aria-hidden": "true", "data-kind": "radio", children: /* @__PURE__ */ jsx(Radio.Indicator, { ...props }) });
+}
+function CheckboxIndicator(props) {
+  return /* @__PURE__ */ jsx(Mark, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Checkbox.Indicator, { ...props }) });
+}
+const RadioCards = {
+  Root: styled(RadioGroup, "bevel-r-choice-cards"),
+  Item: styled(Radio.Root, "bevel-r-choice-card"),
+  Indicator: RadioIndicator,
+  Copy
+};
+const CheckboxCards = {
+  Root: styled(CheckboxGroup, "bevel-r-choice-cards"),
+  Item: styled(Checkbox.Root, "bevel-r-choice-card"),
+  Indicator: CheckboxIndicator,
+  Copy
+};
+export {
+  CheckboxCards,
+  RadioCards
+};

package/dist/react/components/settings-rows.d.ts

@@ -0,0 +1,51 @@
+export declare const SettingsRows: {
+    (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 SettingsRow: {
+    Root: {
+        (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;
+    };
+    Copy: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Label: {
+        (props: import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
+            '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;
+    };
+    Control: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Actions: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};

package/dist/react/components/settings-rows.js

@@ -0,0 +1,8 @@
+"use client";
+import { nativePart } from "../internal/part.js";
+const SettingsRows = nativePart("div", "bevel-r-settings");
+const SettingsRow = { Root: nativePart("div", "bevel-r-settings__row"), Copy: nativePart("div", "bevel-r-settings__copy"), Label: nativePart("label", "bevel-r-settings__label"), Description: nativePart("p", "bevel-r-settings__description"), Control: nativePart("div", "bevel-r-settings__control"), Actions: nativePart("div", "bevel-r-buttons") };
+export {
+  SettingsRow,
+  SettingsRows
+};

package/dist/react/components/sidebar-nav.d.ts

@@ -0,0 +1,77 @@
+import { type ComponentProps } from 'react';
+import { Link as LinkPart } from '../internal/link.js';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+import { Drawer } from './drawer.js';
+export interface SidebarNavProps extends ComponentProps<'nav'> {
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean, details: ChangeDetails) => void;
+}
+declare function Root({ collapsed, defaultCollapsed, onCollapsedChange, id, ...props }: SidebarNavProps): import("react").JSX.Element;
+declare function Toggle({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare const SidebarParts: {
+    Root: typeof Root;
+    Toggle: typeof Toggle;
+    Link: typeof LinkPart;
+    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;
+    };
+    Links: {
+        (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;
+    };
+    Group: {
+        (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;
+    };
+    GroupLabel: {
+        (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;
+    };
+    Brand: {
+        (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;
+    };
+    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;
+    };
+    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;
+    };
+    IdentityCopy: {
+        (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 SidebarNav: typeof SidebarParts & {
+    Mobile: typeof Drawer;
+};
+export {};

package/dist/react/components/sidebar-nav.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { Link as LinkPart } from "../internal/link.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { Button } from "./button.js";
+import { Drawer } from "./drawer.js";
+const Context = createContext(null);
+const RootPart = nativePart("nav", "bevel-r-sidebar");
+function Root({ collapsed, defaultCollapsed = false, onCollapsedChange, id, ...props }) {
+  const generated = useId(), [current, change] = useControllableState({ value: collapsed, defaultValue: defaultCollapsed, onChange: onCollapsedChange });
+  return /* @__PURE__ */ jsx(Context, { value: { collapsed: current, id: id ?? generated, change }, children: /* @__PURE__ */ jsx(RootPart, { "aria-label": "Main navigation", ...props, id: id ?? generated, "data-bevel-react-collapsed": current || void 0 }) });
+}
+const TogglePart = styled(Button, "bevel-r-sidebar__collapse");
+function Toggle({ onClick, ...props }) {
+  const context = useContext(Context);
+  if (!context) throw new Error("SidebarNav.Toggle requires SidebarNav.Root.");
+  const label = context.collapsed ? "Expand sidebar" : "Collapse sidebar";
+  return /* @__PURE__ */ jsx(TogglePart, { "aria-label": label, title: label, ...props, "aria-controls": context.id, "aria-expanded": !context.collapsed, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.change(!context.collapsed, { reason: "collapse", event });
+  }, children: props.children ?? "\u2630" });
+}
+const SidebarParts = {
+  Root,
+  Toggle,
+  Link: styled(LinkPart, "bevel-r-sidebar__link"),
+  Label: nativePart("span", "bevel-r-sidebar__label"),
+  Links: nativePart("div", "bevel-r-sidebar__links"),
+  Group: nativePart("section", "bevel-r-sidebar__group"),
+  GroupLabel: nativePart("h2", "bevel-r-sidebar__section"),
+  Brand: nativePart("div", "bevel-r-sidebar__brand"),
+  Count: nativePart("span", "bevel-r-sidebar__count"),
+  Identity: nativePart("div", "bevel-r-sidebar__identity"),
+  IdentityCopy: nativePart("div", "bevel-r-sidebar__identity-copy")
+};
+const SidebarNav = { ...SidebarParts, Mobile: Drawer };
+export {
+  SidebarNav
+};