@panphora/bevel 0.1.0

package/dist/react/components/skeleton-and-empty.d.ts

@@ -0,0 +1,51 @@
+import { type ComponentProps } from 'react';
+declare function SkeletonBody({ lines, children, ...props }: ComponentProps<'div'> & {
+    lines?: number;
+}): import("react").JSX.Element;
+export declare const Skeleton: typeof SkeletonBody & {
+    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;
+    };
+    Line: {
+        (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 EmptyState: {
+    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;
+    };
+    Title: {
+        (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;
+    };
+    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;
+    };
+    Actions: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/react/components/skeleton-and-empty.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { nativePart } from "../internal/part.js";
+const Root = nativePart("div", "bevel-r-skel");
+const Line = nativePart("i", "bevel-r-skel__line");
+function SkeletonBody({ lines = 3, children, ...props }) {
+  return /* @__PURE__ */ jsx(Root, { "aria-hidden": "true", ...props, children: children ?? Array.from({ length: Math.max(1, lines) }, (_, index) => /* @__PURE__ */ jsx(Line, { className: index === 0 ? "bevel-r-state-heading" : void 0 }, index)) });
+}
+const Skeleton = Object.assign(SkeletonBody, { Root, Line });
+const EmptyState = { Root: nativePart("div", "bevel-r-empty"), Title: nativePart("p", "bevel-r-kicker"), Description: nativePart("p", "bevel-r-empty__description"), Actions: nativePart("div", "bevel-r-buttons") };
+export {
+  EmptyState,
+  Skeleton
+};

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

@@ -0,0 +1,19 @@
+import { Slider as Base } from '@base-ui/react/slider';
+export declare const Slider: {
+    Root: <Value extends number | readonly number[]>(props: Base.Root.Props<Value> & {
+        ref?: import("react").Ref<HTMLDivElement> | undefined;
+    }) => import("react").JSX.Element;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderValueProps, "ref"> & import("react").RefAttributes<HTMLOutputElement>>;
+    Control: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderControlProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderTrackProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/slider").SliderThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const SliderRow: {
+    (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/slider.js

@@ -0,0 +1,17 @@
+"use client";
+import { Slider as Base } from "@base-ui/react/slider";
+import { nativePart, styled } from "../internal/part.js";
+const Slider = {
+  Root: styled(Base.Root, "bevel-r-slider-root"),
+  Label: styled(Base.Label, "bevel-r-sliderrow__label"),
+  Value: styled(Base.Value, "bevel-r-sliderrow__value"),
+  Control: styled(Base.Control, "bevel-r-slider"),
+  Track: styled(Base.Track, "bevel-r-slider__track"),
+  Indicator: styled(Base.Indicator, "bevel-r-slider__fill"),
+  Thumb: styled(Base.Thumb, "bevel-r-slider__nub")
+};
+const SliderRow = nativePart("div", "bevel-r-sliderrow");
+export {
+  Slider,
+  SliderRow
+};

package/dist/react/components/small-charts.d.ts

@@ -0,0 +1,60 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface ChartSeries {
+    id: string;
+    label: string;
+    values: readonly (number | null)[];
+    color?: string;
+}
+interface ChartContext {
+    title: string;
+    labels: readonly string[];
+    series: readonly ChartSeries[];
+    visible: string[];
+    change: (ids: string[], details: ChangeDetails) => void;
+}
+export interface SmallChartProps extends ComponentProps<'section'> {
+    title: string;
+    labels: readonly string[];
+    series: readonly ChartSeries[];
+    visibleIds?: string[];
+    defaultVisibleIds?: string[];
+    onVisibleIdsChange?: ChartContext['change'];
+}
+declare function Root({ title, labels, series, visibleIds, defaultVisibleIds, onVisibleIdsChange, ...props }: SmallChartProps): import("react").JSX.Element;
+declare function DataTable(props: ComponentProps<'table'>): import("react").JSX.Element;
+declare function Plot({ kind, ...props }: ComponentProps<'svg'> & {
+    kind?: 'line' | 'bar' | 'spark';
+}): import("react").JSX.Element;
+export declare function SeriesToggle({ seriesId, onClick, ...props }: ComponentProps<typeof Button> & {
+    seriesId: string;
+}): import("react").JSX.Element;
+export declare const SmallChart: {
+    Root: typeof Root;
+    Plot: typeof Plot;
+    DataTable: typeof DataTable;
+    SeriesToggle: typeof SeriesToggle;
+    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;
+    };
+    Legend: {
+        (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;
+    };
+    Total: {
+        (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/small-charts.js

@@ -0,0 +1,76 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useChart() {
+  const context = useContext(Context);
+  if (!context) throw new Error("SmallChart parts require SmallChart.Root.");
+  return context;
+}
+const RootPart = nativePart("section", "bevel-r-chart");
+const PlotPart = nativePart("svg", "bevel-r-chart__plot");
+const TablePart = nativePart("table", "bevel-r-chart__table");
+const SeriesPart = styled(Button, "bevel-r-chart__series");
+function Root({ title, labels, series, visibleIds, defaultVisibleIds, onVisibleIdsChange, ...props }) {
+  const [visible, change] = useControllableState({ value: visibleIds, defaultValue: defaultVisibleIds ?? series.map((series2) => series2.id), onChange: onVisibleIdsChange });
+  if (new Set(series.map((series2) => series2.id)).size !== series.length) throw new Error("Chart series IDs must be unique.");
+  if (series.some((series2) => series2.values.length !== labels.length || series2.values.some((value) => value !== null && !Number.isFinite(value)))) throw new Error("Chart series need one finite number or null per label.");
+  return /* @__PURE__ */ jsx(Context, { value: { title, labels, series, visible, change }, children: /* @__PURE__ */ jsx(RootPart, { "aria-label": title, ...props }) });
+}
+function DataTable(props) {
+  const context = useChart(), series = context.series.filter((series2) => context.visible.includes(series2.id));
+  return /* @__PURE__ */ jsxs(TablePart, { ...props, children: [
+    /* @__PURE__ */ jsxs("caption", { children: [
+      context.title,
+      " data"
+    ] }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "col", children: "Label" }),
+      series.map((series2) => /* @__PURE__ */ jsx("th", { scope: "col", children: series2.label }, series2.id))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: context.labels.map((label, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "row", children: label }),
+      series.map((series2) => /* @__PURE__ */ jsx("td", { children: series2.values[index] ?? "No data" }, series2.id))
+    ] }, index)) })
+  ] });
+}
+function Plot({ kind = "line", ...props }) {
+  const context = useChart(), titleId = useId(), series = context.series.filter((series2) => context.visible.includes(series2.id));
+  const values = series.flatMap((series2) => series2.values.filter((value) => value !== null));
+  const scale = values.reduce((max2, value) => Math.max(max2, Math.abs(value)), 1);
+  const min = values.reduce((min2, value) => Math.min(min2, value / scale), 0), max = values.reduce((max2, value) => Math.max(max2, value / scale), 0), span = max - min || 1;
+  const height = kind === "spark" ? 64 : 200, top = 8, bottom = height - (kind === "spark" ? 8 : 24), width = 480, left = 12, right = width - 12;
+  const y = (value) => bottom - (value / scale - min) / span * (bottom - top), unit = (right - left) / Math.max(1, context.labels.length);
+  const x = (index) => left + unit * (index + 0.5);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(PlotPart, { ...props, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-labelledby": titleId, children: [
+      /* @__PURE__ */ jsx("title", { id: titleId, children: context.title }),
+      /* @__PURE__ */ jsx("line", { x1: left, x2: right, y1: y(0), y2: y(0), stroke: "currentColor", opacity: ".2" }),
+      series.map((series2, seriesIndex) => {
+        const color = series2.color ?? ["var(--bevel-brass, currentColor)", "var(--bevel-teal, currentColor)", "var(--bevel-ox, currentColor)"][seriesIndex % 3];
+        const path = series2.values.map((value, index) => value === null ? "" : `${index === 0 || series2.values[index - 1] === null ? "M" : "L"}${x(index)},${y(value)}`).join(" ");
+        return /* @__PURE__ */ jsx("g", { "data-bevel-react-series-key": series2.id, "aria-label": series2.label, children: kind === "bar" ? series2.values.map((value, index) => value === null ? null : /* @__PURE__ */ jsx("rect", { x: left + index * unit + unit * 0.1 + seriesIndex * unit * 0.8 / Math.max(1, context.series.filter((item) => context.visible.includes(item.id)).length), y: Math.min(y(value), y(0)), width: unit * 0.8 / Math.max(1, context.series.filter((item) => context.visible.includes(item.id)).length), height: Math.abs(y(value) - y(0)), fill: color }, index)) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: 2.5 }),
+          series2.values.map((value, index) => value === null ? null : /* @__PURE__ */ jsx("circle", { cx: x(index), cy: y(value), r: 2.5, fill: color }, index))
+        ] }) }, series2.id);
+      }),
+      kind !== "spark" && context.labels.map((label, index) => /* @__PURE__ */ jsx("text", { x: x(index), y: height - 4, textAnchor: "middle", fontSize: 11, fill: "currentColor", children: label }, index))
+    ] }),
+    /* @__PURE__ */ jsx(DataTable, {})
+  ] });
+}
+function SeriesToggle({ seriesId, onClick, ...props }) {
+  const context = useChart(), series = context.series.find((series2) => series2.id === seriesId), visible = context.visible.includes(seriesId);
+  return /* @__PURE__ */ jsx(SeriesPart, { ...props, disabled: props.disabled || !series, "aria-pressed": visible, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.change(visible ? context.visible.filter((id) => id !== seriesId) : [...context.visible, seriesId], { reason: "series", event });
+  }, children: props.children ?? series?.label });
+}
+const SmallChart = { Root, Plot, DataTable, SeriesToggle, Header: nativePart("header", "bevel-r-chart__header"), Legend: nativePart("div", "bevel-r-chart__legend"), Total: nativePart("span", "bevel-r-chart__total") };
+export {
+  SeriesToggle,
+  SmallChart
+};

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

@@ -0,0 +1,30 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface SortableProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'children'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (order: string[], details: ChangeDetails) => void;
+    children: ReactNode | ((order: string[]) => ReactNode);
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+}
+declare function Root({ value, defaultValue, onValueChange, children, disabled, orientation, ref, ...props }: SortableProps): import("react").JSX.Element;
+declare function Item({ id, disabled, ...props }: ComponentProps<'div'> & {
+    id: string;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+declare function Handle({ onKeyDown, onPointerDown, children, disabled, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+export declare const Sortable: {
+    Root: typeof Root;
+    Item: typeof Item;
+    Handle: typeof Handle;
+    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;
+    };
+};
+export {};

package/dist/react/components/sortable.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useState } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { usePointerSession } from "../internal/pointer-session.js";
+import { moveId } from "../models/reorder.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+const ItemContext = createContext(null);
+function useSort() {
+  const context = useContext(Context);
+  if (!context) throw new Error("Sortable parts require Sortable.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-sortable");
+function Root({ value, defaultValue = [], onValueChange, children, disabled = false, orientation = "vertical", ref, ...props }) {
+  const [order, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const [preview, setPreview] = useState(null);
+  const root = useRef(null), merged = useMergedRefs(ref, root);
+  return /* @__PURE__ */ jsx(Context, { value: { order, disabled, orientation, root, preview, setPreview, move(id, to, details) {
+    if (disabled || !order.includes(id)) return;
+    const next = moveId(order, id, to);
+    if (next.some((id2, index) => id2 !== order[index])) change(next, details);
+  } }, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, "data-orientation": orientation, children: typeof children === "function" ? children(order) : children }) });
+}
+const ItemPart = nativePart("div", "bevel-r-sortable__row");
+function Item({ id, disabled = false, ...props }) {
+  const context = useSort();
+  return /* @__PURE__ */ jsx(ItemContext, { value: { id, disabled }, children: /* @__PURE__ */ jsx(
+    ItemPart,
+    {
+      ...props,
+      "data-bevel-react-sortable-item": id,
+      "data-bevel-react-drop-target": context.preview === id ? "" : void 0
+    }
+  ) });
+}
+const HandlePart = styled(Button, "bevel-r-sortable__grip");
+function Handle({ onKeyDown, onPointerDown, children = "\u283F", disabled, ...props }) {
+  const context = useSort(), item = useContext(ItemContext);
+  const pointer = usePointerSession([context.order, context.orientation, context.disabled, item?.id, item?.disabled, disabled]);
+  if (!item) throw new Error("Sortable.Handle requires Sortable.Item.");
+  const blocked = disabled || context.disabled || item.disabled;
+  return /* @__PURE__ */ jsx(HandlePart, { "aria-label": `Move ${item.id}`, ...props, disabled: blocked, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || blocked) return;
+    const keys = context.orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+    if (![...keys, "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const index = context.order.indexOf(item.id);
+    const destination = event.key === "Home" ? 0 : event.key === "End" ? context.order.length - 1 : index + (event.key === keys[1] ? 1 : -1);
+    context.move(item.id, destination, { reason: "keyboard", event });
+  }, onPointerDown: (event) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || blocked) return;
+    const handle = event.currentTarget;
+    let destination = context.order.indexOf(item.id);
+    pointer.begin(event, {
+      move(event2) {
+        const items = context.root.current?.querySelectorAll("[data-bevel-react-sortable-item]") ?? [];
+        for (const node of items) {
+          const rect = node.getBoundingClientRect();
+          const position = context.orientation === "vertical" ? event2.clientY : event2.clientX;
+          const start = context.orientation === "vertical" ? rect.top : rect.left;
+          const end = context.orientation === "vertical" ? rect.bottom : rect.right;
+          if (position < start || position > end) continue;
+          const id = node.dataset.bevelReactSortableItem;
+          destination = context.order.indexOf(id);
+          context.setPreview(id);
+        }
+      },
+      end(committed) {
+        context.setPreview(null);
+        if (committed) context.move(item.id, destination, { reason: "pointer" });
+        if (handle.isConnected) handle.focus();
+      }
+    });
+  }, children });
+}
+const Sortable = { Root, Item, Handle, Body: nativePart("div", "bevel-r-sortable__body") };
+export {
+  Sortable
+};

package/dist/react/components/split-button.d.ts

@@ -0,0 +1,38 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+import { Menu } from './menu.js';
+export interface SplitAction {
+    id: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SplitButtonProps extends Omit<ComponentProps<'div'>, 'defaultValue'> {
+    value?: SplitAction;
+    defaultValue: SplitAction;
+    onValueChange?: (action: SplitAction, details: ChangeDetails) => void;
+    onAction?: (id: string, details: ChangeDetails) => void;
+    disabled?: boolean;
+    pending?: boolean;
+}
+declare function Root({ value, defaultValue, onValueChange, onAction, disabled, pending, ...props }: SplitButtonProps): import("react").JSX.Element;
+declare function Primary({ children, disabled, onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Trigger({ disabled, ...props }: ComponentProps<typeof Menu.Trigger>): import("react").JSX.Element;
+export interface SplitButtonItemProps extends ComponentProps<typeof Menu.Item> {
+    action: SplitAction;
+    setDefault?: boolean;
+}
+declare function Item({ action, setDefault, disabled, onClick, children, ...props }: SplitButtonItemProps): import("react").JSX.Element;
+export declare const SplitButton: {
+    Root: typeof Root;
+    Primary: typeof Primary;
+    Trigger: typeof Trigger;
+    Item: typeof Item;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart, styled } from "../internal/part.js";
+import { Button } from "./button.js";
+import { Menu } from "./menu.js";
+const Context = createContext(null);
+function useSplit() {
+  const context = useContext(Context);
+  if (!context) throw new Error("SplitButton parts require SplitButton.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-split-button");
+function Root({ value, defaultValue, onValueChange, onAction, disabled = false, pending = false, ...props }) {
+  const [action, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  return /* @__PURE__ */ jsx(Context, { value: { action, change, onAction, disabled: disabled || pending }, children: /* @__PURE__ */ jsx(Menu.Root, { children: /* @__PURE__ */ jsx(RootPart, { ...props, "aria-busy": pending || void 0 }) }) });
+}
+function Primary({ children, disabled, onClick, ...props }) {
+  const context = useSplit();
+  return /* @__PURE__ */ jsx(Button, { ...props, disabled: disabled || context.disabled || context.action.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.onAction?.(context.action.id, { reason: "primary", event });
+  }, children: children ?? context.action.label });
+}
+const TriggerPart = styled(Menu.Trigger, "bevel-r-split-button__caret");
+function Trigger({ disabled, ...props }) {
+  const context = useSplit();
+  return /* @__PURE__ */ jsx(TriggerPart, { "aria-label": "More actions", ...props, disabled: disabled || context.disabled });
+}
+function Item({ action, setDefault = false, disabled, onClick, children, ...props }) {
+  const context = useSplit();
+  return /* @__PURE__ */ jsx(Menu.Item, { ...props, disabled: disabled || context.disabled || action.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    if (setDefault) context.change(action, { reason: "default-action", event });
+    context.onAction?.(action.id, { reason: "menu-action", event });
+  }, children: children ?? action.label });
+}
+const SplitButton = { Root, Primary, Trigger, Item, Portal: Menu.Portal, Positioner: Menu.Positioner, Popup: Menu.Popup, Group: Menu.Group, GroupLabel: Menu.GroupLabel, Separator: Menu.Separator };
+export {
+  SplitButton
+};

package/dist/react/components/split-panes.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+export interface SplitPanesProps extends ComponentProps<'div'> {
+    ratio?: number;
+    defaultRatio?: number;
+    onRatioChange?: (ratio: number, details: ChangeDetails) => void;
+    orientation?: 'horizontal' | 'vertical';
+    minSize?: readonly [number, number];
+    disabled?: boolean;
+}
+declare function Root({ ratio: controlled, defaultRatio, onRatioChange, orientation, minSize, disabled, ref, style, ...props }: SplitPanesProps): import("react").JSX.Element;
+declare function Pane({ index, ...props }: ComponentProps<'section'> & {
+    index: 0 | 1;
+}): import("react").JSX.Element;
+declare function Handle({ ref, onKeyDown, onPointerDown, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+export declare const SplitPanes: {
+    Root: typeof Root;
+    Pane: typeof Pane;
+    Handle: typeof Handle;
+    Caption: {
+        (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;
+    };
+    Item: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export {};

package/dist/react/components/split-panes.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { usePointerSession } from "../internal/pointer-session.js";
+const Context = createContext(null);
+function useSplit() {
+  const context = useContext(Context);
+  if (!context) throw new Error("SplitPanes parts require SplitPanes.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-split");
+const PanePart = nativePart("section", "bevel-r-split__pane");
+const HandlePart = nativePart("div", "bevel-r-split__divider");
+function Root({ ratio: controlled, defaultRatio = 50, onRatioChange, orientation = "horizontal", minSize = [180, 180], disabled = false, ref, style, ...props }) {
+  const [ratio, change] = useControllableState({ value: controlled, defaultValue: defaultRatio, onChange: onRatioChange });
+  const [preview, setPreview] = useState(null), [extent, setExtent] = useState(0), [stacked, setStacked] = useState(false);
+  const root = useRef(null), handle = useRef(null), merged = useMergedRefs(ref, root), id = useId();
+  useEffect(() => {
+    const node = root.current, media = node.ownerDocument.defaultView.matchMedia("(max-width: 640px)");
+    const measure = () => {
+      const rect = node.getBoundingClientRect(), divider = handle.current?.getBoundingClientRect();
+      setExtent(Math.max(0, (orientation === "vertical" ? rect.height : rect.width) - (orientation === "vertical" ? divider?.height ?? 10 : divider?.width ?? 10)));
+      setStacked(media.matches);
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    if (handle.current) observer.observe(handle.current);
+    media.addEventListener("change", measure);
+    measure();
+    return () => {
+      observer.disconnect();
+      media.removeEventListener("change", measure);
+    };
+  }, [orientation]);
+  const first = Math.max(0, minSize[0]), second = Math.max(0, minSize[1]);
+  const cramped = extent > 0 && extent < first + second;
+  const min = extent ? cramped ? first / (first + second) * 100 : first / extent * 100 : 25;
+  const max = extent ? cramped ? min : 100 - second / extent * 100 : 75;
+  const current = Math.max(min, Math.min(max, Number.isFinite(preview ?? ratio) ? preview ?? ratio : 50));
+  return /* @__PURE__ */ jsx(Context, { value: { ratio, current, min, max, extent, orientation, disabled: disabled || min === max, stacked, ids: [`${id}-first`, `${id}-second`], handle, preview: setPreview, change }, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, "data-bevel-react-orientation": orientation, style: { "--bevel-split-size": `calc((100% - 10px) * ${current} / 100)`, ...style } }) });
+}
+function Pane({ index, ...props }) {
+  const context = useSplit();
+  return /* @__PURE__ */ jsx(PanePart, { ...props, id: context.ids[index] });
+}
+function Handle({ ref, onKeyDown, onPointerDown, ...props }) {
+  const context = useSplit(), merged = useMergedRefs(ref, context.handle);
+  const pointer = usePointerSession([context.ratio, context.extent, context.orientation, context.min, context.max, context.disabled, context.stacked]);
+  const clamp = (value) => Math.round(Math.max(context.min, Math.min(context.max, value)) * 100) / 100;
+  const blocked = context.disabled || context.stacked;
+  return /* @__PURE__ */ jsx(
+    HandlePart,
+    {
+      "aria-label": "Resize panes",
+      ...props,
+      ref: merged,
+      role: "separator",
+      tabIndex: blocked ? -1 : 0,
+      hidden: context.stacked,
+      "aria-disabled": blocked,
+      "aria-orientation": context.orientation === "horizontal" ? "vertical" : "horizontal",
+      "aria-controls": context.ids.join(" "),
+      "aria-valuemin": context.min,
+      "aria-valuemax": context.max,
+      "aria-valuenow": context.current,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || event.nativeEvent.isComposing || blocked) return;
+        const keys = context.orientation === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+        const next = event.key === "Home" ? context.min : event.key === "End" ? context.max : keys.includes(event.key) ? context.current + (event.key === keys[1] ? 1 : -1) * (event.shiftKey ? 10 : 2) : null;
+        if (next !== null) {
+          event.preventDefault();
+          context.change(clamp(next), { reason: "keyboard", event });
+        }
+      },
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        if (event.defaultPrevented || blocked || context.extent <= 0) return;
+        const vertical = context.orientation === "vertical", start = vertical ? event.clientY : event.clientX;
+        let next = context.current;
+        event.currentTarget.focus();
+        pointer.begin(event, {
+          move: (event2) => {
+            next = clamp(context.current + ((vertical ? event2.clientY : event2.clientX) - start) / context.extent * 100);
+            context.preview(next);
+          },
+          end: (accepted) => {
+            context.preview(null);
+            if (accepted) context.change(next, { reason: "pointer" });
+          }
+        });
+      }
+    }
+  );
+}
+const SplitPanes = { Root, Pane, Handle, Caption: nativePart("div", "bevel-r-split__caption"), Item: nativePart("div", "bevel-r-split__item") };
+export {
+  SplitPanes
+};