@panphora/bevel 0.1.0

package/dist/react/components/multi-select-picker.d.ts

@@ -0,0 +1,49 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+declare function MultiSelectRoot<Value, Item = Value>(props: Omit<BaseCombobox.Root.Props<Value, true, Item>, 'multiple'>): import("react").JSX.Element;
+export declare const MultiSelectPicker: {
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Value: typeof BaseCombobox.Value;
+    Input: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    InputGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Status: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxStatusProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    GroupLabel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Chips: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxChipsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Chip: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxChipProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChipRemove: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxChipRemoveProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Row: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxRowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Collection: typeof BaseCombobox.Collection;
+    Empty: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxEmptyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxClearProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("@base-ui/react/combobox").ComboboxSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    useFilter: typeof BaseCombobox.useFilter;
+    useFilteredItems: typeof BaseCombobox.useFilteredItems;
+    createItems: typeof BaseCombobox.createItems;
+    Root: typeof MultiSelectRoot;
+    Control: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").NamedExoticComponent<Omit<import("@base-ui/react/combobox").ComboboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Summary: {
+        (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;
+    };
+    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 {};

package/dist/react/components/multi-select-picker.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Combobox } from "./combobox.js";
+import { nativePart, styled } from "../internal/part.js";
+function MultiSelectRoot(props) {
+  return /* @__PURE__ */ jsx(BaseCombobox.Root, { ...props, multiple: true });
+}
+const MultiSelectPicker = {
+  ...Combobox,
+  Root: MultiSelectRoot,
+  Control: styled(Combobox.InputGroup, "bevel-r-multiselect__control"),
+  Popup: styled(Combobox.Popup, "bevel-r-multiselect__panel"),
+  Item: styled(Combobox.Item, "bevel-r-multiselect__option"),
+  Summary: nativePart("span", "bevel-r-multiselect__summary"),
+  Count: nativePart("span", "bevel-r-multiselect__count")
+};
+export {
+  MultiSelectPicker
+};

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

@@ -0,0 +1,33 @@
+export declare const Note: {
+    Root: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "size"> & {
+        variant?: "bad" | "ok" | "stack" | "warn" | undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "size"> & {
+        variant?: "bad" | "ok" | "stack" | "warn" | undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Tag: {
+        (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<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 Notes: {
+    (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/note.js

@@ -0,0 +1,8 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const Note = { Root: nativeVariants("aside", "bevel-r-note", ["ok", "warn", "bad", "stack"]), Tag: nativePart("span", "bevel-r-note__tag"), Body: nativePart("div", "bevel-r-note__body") };
+const Notes = nativePart("div", "bevel-r-notes");
+export {
+  Note,
+  Notes
+};

package/dist/react/components/number-field.d.ts

@@ -0,0 +1,16 @@
+export declare const NumberField: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Increment: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldIncrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Decrement: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldDecrementProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    ScrubArea: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    ScrubAreaCursor: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/number-field").NumberFieldScrubAreaCursorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export declare const NumberSteps: {
+    (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/number-field.js

@@ -0,0 +1,17 @@
+"use client";
+import { NumberField as Base } from "@base-ui/react/number-field";
+import { nativePart, styled } from "../internal/part.js";
+const NumberField = {
+  Root: styled(Base.Root, "bevel-r-number-field"),
+  Group: styled(Base.Group, "bevel-r-number"),
+  Input: styled(Base.Input, "bevel-r-number__input"),
+  Increment: styled(Base.Increment, "bevel-r-number__step bevel-r-number__increment"),
+  Decrement: styled(Base.Decrement, "bevel-r-number__step bevel-r-number__decrement"),
+  ScrubArea: styled(Base.ScrubArea, "bevel-r-number__scrub"),
+  ScrubAreaCursor: styled(Base.ScrubAreaCursor, "bevel-r-number__cursor")
+};
+const NumberSteps = nativePart("div", "bevel-r-number__steps");
+export {
+  NumberField,
+  NumberSteps
+};

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

@@ -0,0 +1,45 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export { pageItems } from '../models/table.js';
+interface PageState {
+    page: number;
+    pageSize: number;
+}
+export interface PaginationProps extends Omit<ComponentProps<'nav'>, 'defaultValue'> {
+    value?: PageState;
+    defaultValue?: PageState;
+    onValueChange?: (state: PageState, details: ChangeDetails) => void;
+    total?: number;
+    hasNextPage?: boolean;
+    itemCount?: number;
+}
+declare function Root({ value, defaultValue, onValueChange, total, hasNextPage, itemCount, ...props }: PaginationProps): import("react").JSX.Element;
+declare function Range(props: ComponentProps<'span'>): import("react").JSX.Element;
+declare function Page({ page, onClick, ...props }: ComponentProps<typeof Button> & {
+    page: number;
+}): import("react").JSX.Element;
+declare function Previous({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Next({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Pages({ radius, ...props }: ComponentProps<'div'> & {
+    radius?: number;
+}): import("react").JSX.Element;
+declare function PageSize({ sizes, onChange, ...props }: ComponentProps<'select'> & {
+    sizes?: readonly number[];
+}): import("react").JSX.Element;
+export declare const Pagination: {
+    Root: typeof Root;
+    Range: typeof Range;
+    Pages: typeof Pages;
+    Page: typeof Page;
+    Previous: typeof Previous;
+    Next: typeof Next;
+    PageSize: typeof PageSize;
+    Gap: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};

package/dist/react/components/pagination.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { TableContext } from "../internal/table-context.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart, styled } from "../internal/part.js";
+import { pageItems } from "../models/table.js";
+import { Button } from "./button.js";
+import { pageItems as pageItems2 } from "../models/table.js";
+const Context = createContext(null);
+function usePagination() {
+  const context = useContext(Context);
+  if (!context) throw new Error("Pagination parts require Pagination.Root.");
+  return context;
+}
+const RootPart = nativePart("nav", "bevel-r-pagination");
+const PagesPart = nativePart("div", "bevel-r-pagination__pages");
+const PagePart = styled(Button, "bevel-r-pagination__page");
+const RangePart = nativePart("span", "bevel-r-pagination__range");
+const Gap = nativePart("span", "bevel-r-pagination__gap");
+function Root({ value, defaultValue = { page: 1, pageSize: 10 }, onValueChange, total, hasNextPage = false, itemCount, ...props }) {
+  const table = useContext(TableContext);
+  const [local, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const state = table?.state ?? local, result = table?.result;
+  total = result?.total ?? total;
+  const pageSize = Math.max(1, Math.trunc(state.pageSize) || 1), count = total === void 0 ? void 0 : Math.max(1, Math.ceil(total / pageSize));
+  const page = Math.max(1, Math.min(count ?? Infinity, Math.trunc(state.page) || 1));
+  const items = result?.rows.length ?? (total === void 0 ? itemCount ?? 0 : Math.max(0, Math.min(pageSize, total - (page - 1) * pageSize)));
+  return /* @__PURE__ */ jsx(Context, { value: {
+    page,
+    pageSize,
+    total,
+    count,
+    hasNext: result?.hasNextPage ?? (count === void 0 ? hasNextPage : page < count),
+    start: items ? (page - 1) * pageSize + 1 : 0,
+    end: items ? (page - 1) * pageSize + items : 0,
+    change: (next, details) => {
+      if (table) table.update(next, details);
+      else change(next, details);
+    }
+  }, children: /* @__PURE__ */ jsx(RootPart, { "aria-label": "Pagination", ...props }) });
+}
+function Range(props) {
+  const page = usePagination();
+  return /* @__PURE__ */ jsx(RangePart, { ...props, children: props.children ?? `${page.start}\u2013${page.end}${page.total === void 0 ? "" : ` of ${page.total}`}` });
+}
+function Page({ page, onClick, ...props }) {
+  const context = usePagination();
+  return /* @__PURE__ */ jsx(PagePart, { ...props, "aria-label": `Page ${page}`, "aria-current": context.page === page ? "page" : void 0, disabled: props.disabled || page < 1 || page > (context.count ?? Infinity), onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.change({ page, pageSize: context.pageSize }, { reason: "page", event });
+  }, children: props.children ?? page });
+}
+function Previous({ onClick, ...props }) {
+  const page = usePagination();
+  return /* @__PURE__ */ jsx(PagePart, { ...props, disabled: props.disabled || page.page <= 1, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) page.change({ page: page.page - 1, pageSize: page.pageSize }, { reason: "page", event });
+  }, children: props.children ?? "Previous" });
+}
+function Next({ onClick, ...props }) {
+  const page = usePagination();
+  return /* @__PURE__ */ jsx(PagePart, { ...props, disabled: props.disabled || !page.hasNext, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) page.change({ page: page.page + 1, pageSize: page.pageSize }, { reason: "page", event });
+  }, children: props.children ?? "Next" });
+}
+function Pages({ radius = 1, ...props }) {
+  const page = usePagination();
+  return /* @__PURE__ */ jsxs(PagesPart, { ...props, children: [
+    /* @__PURE__ */ jsx(Previous, {}),
+    page.count !== void 0 && pageItems(page.page, page.count, radius).map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx(Gap, { "aria-hidden": "true", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ jsx(Page, { page: item }, item)),
+    /* @__PURE__ */ jsx(Next, {})
+  ] });
+}
+function PageSize({ sizes = [10, 25, 50], onChange, ...props }) {
+  const page = usePagination();
+  return /* @__PURE__ */ jsx("select", { "aria-label": "Rows per page", ...props, value: page.pageSize, onChange: (event) => {
+    onChange?.(event);
+    if (!event.defaultPrevented) page.change({ page: 1, pageSize: Math.max(1, Number(event.target.value)) }, { reason: "page-size", event });
+  }, children: sizes.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size)) });
+}
+const Pagination = { Root, Range, Pages, Page, Previous, Next, PageSize, Gap };
+export {
+  Pagination,
+  pageItems2 as pageItems
+};

package/dist/react/components/persistent-action-banner.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface ActionBannerProps extends ComponentProps<'section'> {
+    dismissed?: boolean;
+    defaultDismissed?: boolean;
+    onDismissedChange?: (dismissed: boolean, details: ChangeDetails) => void;
+    condition?: 'pending' | 'resolved';
+    variant?: 'running' | 'uncertain';
+    focusToken?: string | number;
+}
+declare function Root({ dismissed, defaultDismissed, onDismissedChange, condition, variant, focusToken, ref, className, ...props }: ActionBannerProps): import("react").JSX.Element;
+declare function Dismiss({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Status(props: ComponentProps<'p'>): import("react").JSX.Element;
+declare function Observation(props: ComponentProps<'p'>): import("react").JSX.Element;
+export declare const ActionBanner: {
+    Root: typeof Root;
+    Dismiss: typeof Dismiss;
+    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;
+    };
+    Icon: {
+        (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;
+    };
+    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;
+    };
+    Observation: typeof Observation;
+    Meta: {
+        (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;
+    };
+    Head: {
+        (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;
+    };
+    Progress: {
+        (props: import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLProgressElement> & import("react").ProgressHTMLAttributes<HTMLProgressElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Status: typeof Status;
+};
+export {};

package/dist/react/components/persistent-action-banner.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { cx } from "../internal/classes.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart, styled } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+const RootPart = nativePart("section", "bevel-r-action-banner");
+function Root({ dismissed, defaultDismissed = false, onDismissedChange, condition, variant, focusToken, ref, className, ...props }) {
+  const [hidden, change] = useControllableState({ value: dismissed, defaultValue: defaultDismissed, onChange: onDismissedChange });
+  const root = useRef(null), merged = useMergedRefs(ref, root);
+  useEffect(() => {
+    if (focusToken !== void 0) root.current?.focus();
+  }, [focusToken]);
+  return /* @__PURE__ */ jsx(Context, { value: change, children: /* @__PURE__ */ jsx(RootPart, { role: variant ? void 0 : "status", tabIndex: variant || focusToken !== void 0 ? -1 : void 0, ...props, ref: merged, className: cx(variant === "running" && "bevel-r-action-banner--running", variant === "uncertain" && "bevel-r-action-banner--uncertain", className), hidden: props.hidden || hidden, "data-bevel-react-condition": condition }) });
+}
+const DismissPart = styled(Button, "bevel-r-action-banner__dismiss");
+function Dismiss({ onClick, ...props }) {
+  const change = useContext(Context);
+  if (!change) throw new Error("ActionBanner.Dismiss requires ActionBanner.Root.");
+  return /* @__PURE__ */ jsx(DismissPart, { "aria-label": "Dismiss notification", ...props, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) change(true, { reason: "dismiss", event });
+  }, children: props.children ?? "\xD7" });
+}
+const StatusPart = nativePart("p", "bevel-r-action-banner__status");
+function Status(props) {
+  return /* @__PURE__ */ jsx(StatusPart, { "aria-live": "polite", ...props });
+}
+const ObservationPart = nativePart("p", "bevel-r-action-banner__observation");
+function Observation(props) {
+  return /* @__PURE__ */ jsx(ObservationPart, { "aria-live": "polite", ...props });
+}
+const ActionBanner = { Root, Dismiss, Body: nativePart("div", "bevel-r-action-banner__body"), Icon: nativePart("span", "bevel-r-action-banner__icon"), Actions: nativePart("div", "bevel-r-action-banner__actions"), Observation, Meta: nativePart("span", "bevel-r-action-banner__meta"), Head: nativePart("div", "bevel-r-action-banner__head"), Count: nativePart("span", "bevel-r-action-banner__count"), Progress: nativePart("progress", "bevel-r-action-banner__progress"), Status };
+export {
+  ActionBanner
+};

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

@@ -0,0 +1,42 @@
+import { type ComponentProps } from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { Popover } from './popover.js';
+export interface PopconfirmProps<Payload = unknown> extends BasePopover.Root.Props<Payload> {
+    onConfirm?: () => void;
+}
+declare function Root<Payload>({ open, defaultOpen, onOpenChange, onConfirm, children, ...props }: PopconfirmProps<Payload>): import("react").JSX.Element;
+declare function Popup({ initialFocus, ...props }: ComponentProps<typeof Popover.Popup>): import("react").JSX.Element;
+declare function Cancel({ ref, ...props }: ComponentProps<typeof Popover.Close>): import("react").JSX.Element;
+declare function Confirm({ onClick, ...props }: ComponentProps<typeof Popover.Close>): import("react").JSX.Element;
+export declare const Popconfirm: {
+    Trigger: BasePopover.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    createHandle: typeof BasePopover.createHandle;
+    Handle: typeof BasePopover.Handle;
+    Root: typeof Root;
+    Popup: typeof Popup;
+    Cancel: typeof Cancel;
+    Confirm: typeof Confirm;
+    Header: {
+        (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;
+    };
+};
+export {};

package/dist/react/components/popconfirm.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { nativePart, styled } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { Popover } from "./popover.js";
+const Context = createContext(null);
+function useConfirmation() {
+  const context = useContext(Context);
+  if (!context) throw new Error("Popconfirm parts require Popconfirm.Root.");
+  return context;
+}
+function Root({ open, defaultOpen = false, onOpenChange, onConfirm, children, ...props }) {
+  const [internal, setInternal] = useState(defaultOpen);
+  const [pending, setPending] = useState(false);
+  const current = open ?? internal;
+  const cancel = useRef(null), candidate = useRef(null);
+  useEffect(() => {
+    if (!pending) return;
+    setPending(false);
+    if (!current) onConfirm?.();
+  }, [current, pending, onConfirm]);
+  return /* @__PURE__ */ jsx(Context, { value: { cancel, candidate }, children: /* @__PURE__ */ jsx(BasePopover.Root, { ...props, open: current, onOpenChange: (next, details) => {
+    onOpenChange?.(next, details);
+    setPending(!details.isCanceled && !next && candidate.current === details.event);
+    candidate.current = null;
+    if (!details.isCanceled && open === void 0) setInternal(next);
+  }, children }) });
+}
+const PopupPart = styled(Popover.Popup, "bevel-r-popconfirm");
+function Popup({ initialFocus, ...props }) {
+  const context = useConfirmation();
+  return /* @__PURE__ */ jsx(PopupPart, { ...props, initialFocus: initialFocus ?? context.cancel });
+}
+function Cancel({ ref, ...props }) {
+  const context = useConfirmation();
+  const merged = useMergedRefs(ref, context.cancel);
+  return /* @__PURE__ */ jsx(Popover.Close, { ...props, ref: merged });
+}
+function Confirm({ onClick, ...props }) {
+  const context = useConfirmation();
+  return /* @__PURE__ */ jsx(Popover.Close, { ...props, onClick: (event) => {
+    onClick?.(event);
+    context.candidate.current = event.defaultPrevented ? null : event.nativeEvent;
+  } });
+}
+const Popconfirm = {
+  ...Popover,
+  Root,
+  Popup,
+  Cancel,
+  Confirm,
+  Header: nativePart("div", "bevel-r-popconfirm__head"),
+  Actions: nativePart("div", "bevel-r-popconfirm__actions")
+};
+export {
+  Popconfirm
+};

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

@@ -0,0 +1,16 @@
+import { Popover as BasePopover } from '@base-ui/react/popover';
+export declare const Popover: {
+    Root: typeof BasePopover.Root;
+    Trigger: BasePopover.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/popover").PopoverViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    createHandle: typeof BasePopover.createHandle;
+    Handle: typeof BasePopover.Handle;
+};

package/dist/react/components/popover.js

@@ -0,0 +1,21 @@
+"use client";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { styled } from "../internal/part.js";
+const Popover = {
+  Root: BasePopover.Root,
+  Trigger: styled(BasePopover.Trigger, "bevel-r-button"),
+  Portal: styled(BasePopover.Portal, "bevel-r-portal", true),
+  Positioner: styled(BasePopover.Positioner, "bevel-r-positioner"),
+  Popup: styled(BasePopover.Popup, "bevel-r-popover"),
+  Backdrop: styled(BasePopover.Backdrop, "bevel-r-popover__backdrop"),
+  Arrow: styled(BasePopover.Arrow, "bevel-r-popover__arrow"),
+  Title: styled(BasePopover.Title, "bevel-r-popover__title"),
+  Description: styled(BasePopover.Description, "bevel-r-popover__description"),
+  Close: styled(BasePopover.Close, "bevel-r-button"),
+  Viewport: styled(BasePopover.Viewport, "bevel-r-popover__viewport"),
+  createHandle: BasePopover.createHandle,
+  Handle: BasePopover.Handle
+};
+export {
+  Popover
+};

package/dist/react/components/progress-and-gauge.d.ts

@@ -0,0 +1,44 @@
+export declare const Progress: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/progress").ProgressRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/progress").ProgressTrackProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/progress").ProgressIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Value: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/progress").ProgressValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/progress").ProgressLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export declare const NativeProgress: {
+    (props: import("react").DetailedHTMLProps<import("react").ProgressHTMLAttributes<HTMLProgressElement>, HTMLProgressElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLProgressElement> & import("react").ProgressHTMLAttributes<HTMLProgressElement> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: import("../internal/classes.js").StateClassName<unknown>;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare const Gauge: {
+    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;
+    };
+    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;
+    };
+    Value: {
+        (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 GaugeGroup: {
+    (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/progress-and-gauge.js

@@ -0,0 +1,19 @@
+"use client";
+import { Progress as Base } from "@base-ui/react/progress";
+import { nativePart, styled } from "../internal/part.js";
+const Progress = {
+  Root: styled(Base.Root, "bevel-r-progress-root"),
+  Track: styled(Base.Track, "bevel-r-progress"),
+  Indicator: styled(Base.Indicator, "bevel-r-progress__indicator"),
+  Value: styled(Base.Value, "bevel-r-gauge__value"),
+  Label: styled(Base.Label, "bevel-r-gauge__label")
+};
+const NativeProgress = nativePart("progress", "bevel-r-progress");
+const Gauge = { Root: nativePart("div", "bevel-r-gauge"), Label: nativePart("span", "bevel-r-gauge__label"), Value: nativePart("span", "bevel-r-gauge__value") };
+const GaugeGroup = nativePart("div", "bevel-r-gauges");
+export {
+  Gauge,
+  GaugeGroup,
+  NativeProgress,
+  Progress
+};