@panphora/bevel 0.1.0

package/dist/react/components/stat-tiles.d.ts

@@ -0,0 +1,54 @@
+export declare const StatTiles: {
+    (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDListElement> & import("react").HTMLAttributes<HTMLDListElement> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: import("../internal/classes.js").StateClassName<unknown>;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare const StatTile: {
+    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<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;
+    };
+    Value: {
+        (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;
+    };
+    Delta: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "negative" | "neutral" | "positive" | undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+        variant?: "negative" | "neutral" | "positive" | undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Spark: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Description: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};

package/dist/react/components/stat-tiles.js

@@ -0,0 +1,8 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const StatTiles = nativePart("dl", "bevel-r-stats");
+const StatTile = { Root: nativePart("div", "bevel-r-stats__tile"), Label: nativePart("dt", "bevel-r-stats__label"), Value: nativePart("dd", "bevel-r-stats__value"), Delta: nativeVariants("span", "bevel-r-stats__delta", ["positive", "negative", "neutral"]), Spark: nativePart("span", "bevel-r-stats__spark"), Description: nativePart("p", "bevel-r-stats__description") };
+export {
+  StatTile,
+  StatTiles
+};

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

@@ -0,0 +1,11 @@
+import { type ComponentProps } from 'react';
+export declare const Steps: {
+    (props: import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLOListElement> & import("react").OlHTMLAttributes<HTMLOListElement> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: import("../internal/classes.js").StateClassName<unknown>;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export declare function Step({ status, className, ...props }: ComponentProps<'li'> & {
+    status?: 'done' | 'current' | 'pending';
+}): import("react").JSX.Element;

package/dist/react/components/steps.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { nativePart } from "../internal/part.js";
+import { cx } from "../internal/classes.js";
+const Steps = nativePart("ol", "bevel-r-steps");
+const StepPart = nativePart("li", "bevel-r-step");
+function Step({ status = "pending", className, ...props }) {
+  return /* @__PURE__ */ jsx(StepPart, { ...props, "aria-current": status === "current" ? "step" : void 0, className: cx(status === "done" && "bevel-r-state-done", status === "current" && "bevel-r-state-now", className) });
+}
+export {
+  Step,
+  Steps
+};

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

@@ -0,0 +1,6 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+export declare const Switch: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/switch").SwitchRootProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/switch").SwitchThumbProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export declare const ToggleButton: <Value extends string>(props: BaseToggle.Props<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element;

package/dist/react/components/switch.js

@@ -0,0 +1,13 @@
+"use client";
+import { Switch as Base } from "@base-ui/react/switch";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { styled } from "../internal/part.js";
+const Switch = {
+  Root: styled(Base.Root, "bevel-r-toggle__track"),
+  Thumb: styled(Base.Thumb, "bevel-r-toggle__thumb")
+};
+const ToggleButton = styled(BaseToggle, "bevel-r-button");
+export {
+  Switch,
+  ToggleButton
+};

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

@@ -0,0 +1,61 @@
+export declare const Table: {
+    Root: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "size"> & {
+        variant?: "interactive" | "left" | "striped" | undefined;
+        size?: 'default' | 'small';
+    }) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "size"> & {
+        variant?: "interactive" | "left" | "striped" | undefined;
+        size?: 'default' | 'small';
+    }, "className" | "size" | "variant"> & {
+        'data-bevel-appearance': import("../provider.js").BevelAppearance;
+        className: string;
+    }, string | import("react").JSXElementConstructor<any>>;
+    Caption: {
+        (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;
+    };
+    Head: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & {
+            '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<HTMLTableSectionElement>, HTMLTableSectionElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Foot: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLTableSectionElement> & import("react").HTMLAttributes<HTMLTableSectionElement> & {
+            '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<HTMLTableRowElement>, HTMLTableRowElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLTableRowElement> & import("react").HTMLAttributes<HTMLTableRowElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    HeaderCell: {
+        (props: import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLTableHeaderCellElement> & import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Cell: {
+        (props: import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLTableDataCellElement> & import("react").TdHTMLAttributes<HTMLTableDataCellElement> & {
+            '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/table.js

@@ -0,0 +1,6 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const Table = { Root: nativeVariants("table", "bevel-r-table", ["interactive", "left", "striped"]), Caption: nativePart("caption", "bevel-r-table__caption"), Head: nativePart("thead", "bevel-r-table__head"), Body: nativePart("tbody", "bevel-r-table__body"), Foot: nativePart("tfoot", "bevel-r-table__foot"), Row: nativePart("tr", "bevel-r-table__row"), HeaderCell: nativePart("th", "bevel-r-table__header"), Cell: nativePart("td", "bevel-r-table__cell") };
+export {
+  Table
+};

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

@@ -0,0 +1,7 @@
+export declare const Tabs: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tabs").TabsRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tabs").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Tab: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tabs").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tabs").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tabs").TabsIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};

package/dist/react/components/tabs.js

@@ -0,0 +1,13 @@
+"use client";
+import { Tabs as Base } from "@base-ui/react/tabs";
+import { styled } from "../internal/part.js";
+const Tabs = {
+  Root: styled(Base.Root, "bevel-r-tabs-root"),
+  List: styled(Base.List, "bevel-r-tabs"),
+  Tab: styled(Base.Tab, "bevel-r-tabs__tab"),
+  Panel: styled(Base.Panel, "bevel-r-tabpanel"),
+  Indicator: styled(Base.Indicator, "bevel-r-tabs__indicator")
+};
+export {
+  Tabs
+};

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

@@ -0,0 +1,33 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface TagsProps extends Omit<ComponentProps<'div'>, 'defaultValue'> {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[], details: ChangeDetails) => void;
+    name?: string;
+    form?: string;
+    disabled?: boolean;
+}
+declare function Root({ value, defaultValue, onValueChange, name, form, disabled, children, onClick, ...props }: TagsProps): import("react").JSX.Element;
+declare function Input({ ref, onKeyDown, onBlur, onChange, disabled, ...props }: Omit<ComponentProps<'input'>, 'value' | 'defaultValue'>): import("react").JSX.Element;
+declare function List({ children, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+    children: (tag: string, index: number) => ReactNode;
+}): import("react").JSX.Element;
+declare function Remove({ value, onClick, disabled, children, ...props }: Omit<ComponentProps<typeof Button>, 'value'> & {
+    value?: string;
+}): import("react").JSX.Element;
+export declare const Tags: {
+    Root: typeof Root;
+    Input: typeof Input;
+    List: typeof List;
+    Item: {
+        (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;
+    };
+    Remove: typeof Remove;
+};
+export {};

package/dist/react/components/tags.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { useControllableState } from "../internal/controllable-state.js";
+import { nativePart, styled } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { useFormReset } from "../internal/form-reset.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+const ItemContext = createContext(null);
+function useTags() {
+  const context = useContext(Context);
+  if (!context) throw new Error("Tags parts must be inside Tags.Root.");
+  return context;
+}
+const RootPart = nativePart("div", "bevel-r-tags");
+function Root({ value, defaultValue = [], onValueChange, name, form, disabled = false, children, onClick, ...props }) {
+  const [tags, change] = useControllableState({ value, defaultValue, onChange: onValueChange });
+  const input = useRef(null);
+  const [resetToken, setResetToken] = useState(0);
+  useFormReset(input, (event) => {
+    change(defaultValue, { reason: "reset", event });
+    setResetToken((token) => token + 1);
+  });
+  return /* @__PURE__ */ jsx(Context, { value: { tags, change, disabled, input, form, resetToken }, children: /* @__PURE__ */ jsxs(RootPart, { ...props, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented && event.target === event.currentTarget) input.current?.focus();
+  }, children: [
+    children,
+    name && tags.map((tag) => /* @__PURE__ */ jsx("input", { type: "hidden", name, form, value: tag, disabled }, tag))
+  ] }) });
+}
+const InputPart = nativePart("input", "bevel-r-tags__input");
+function Input({ ref, onKeyDown, onBlur, onChange, disabled, ...props }) {
+  const context = useTags();
+  const [draft, setDraft] = useState("");
+  useEffect(() => setDraft(""), [context.resetToken]);
+  const merged = useMergedRefs(ref, context.input);
+  const add = (event) => {
+    const value = draft.trim();
+    if (!value) {
+      setDraft("");
+      return;
+    }
+    if (context.tags.some((tag) => tag.toLowerCase() === value.toLowerCase())) return;
+    context.change([...context.tags, value], { reason: "add", event });
+    setDraft("");
+  };
+  return /* @__PURE__ */ jsx(InputPart, { form: context.form, ...props, ref: merged, value: draft, disabled: disabled || context.disabled, onChange: (event) => {
+    onChange?.(event);
+    if (!event.defaultPrevented) setDraft(event.currentTarget.value);
+  }, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229) return;
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      add(event);
+    } else if (event.key === "Backspace" && !draft && context.tags.length) context.change(context.tags.slice(0, -1), { reason: "remove", event });
+  }, onBlur: (event) => {
+    onBlur?.(event);
+    if (!event.defaultPrevented) add(event);
+  } });
+}
+const ListPart = nativePart("div", "bevel-r-tags__list");
+function List({ children, ...props }) {
+  const context = useTags();
+  return /* @__PURE__ */ jsx(ListPart, { ...props, children: context.tags.map((tag, index) => /* @__PURE__ */ jsx(ItemContext, { value: tag, children: children(tag, index) }, tag)) });
+}
+const RemovePart = styled(Button, "bevel-r-tags__remove");
+function Remove({ value, onClick, disabled, children = "\xD7", ...props }) {
+  const context = useTags(), item = useContext(ItemContext), tag = value ?? item;
+  if (tag == null) throw new Error("Tags.Remove requires a value or Tags.List context.");
+  return /* @__PURE__ */ jsx(RemovePart, { "aria-label": `Remove ${tag}`, ...props, disabled: disabled || context.disabled, onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    context.change(context.tags.filter((value2) => value2 !== tag), { reason: "remove", event });
+    context.input.current?.focus();
+  }, children });
+}
+const Tags = { Root, Input, List, Item: nativePart("span", "bevel-r-tags__chip"), Remove };
+export {
+  Tags
+};

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

@@ -0,0 +1,10 @@
+export declare const Textarea: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "size"> & {
+    variant?: undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "size"> & {
+    variant?: undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;

package/dist/react/components/textarea.js

@@ -0,0 +1,6 @@
+"use client";
+import { nativeVariants } from "../internal/part.js";
+const Textarea = nativeVariants("textarea", "bevel-r-textarea", []);
+export {
+  Textarea
+};

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

@@ -0,0 +1,35 @@
+import { Toast as Base } from '@base-ui/react/toast';
+import { type ComponentProps, type RefObject } from 'react';
+export type ToastReturnFocus = HTMLElement | RefObject<HTMLElement | null> | null;
+export interface ToastHostData {
+    focus?: boolean;
+    returnFocus?: ToastReturnFocus;
+}
+export interface ToastHostProps extends Omit<ComponentProps<typeof Base.Viewport>, 'children'> {
+    closeLabel?: string;
+}
+declare function Host({ closeLabel, ...props }: ToastHostProps): import("react").JSX.Element;
+export declare const Toast: {
+    Provider: import("react").FC<import("@base-ui/react/toast").ToastProviderProps>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Action: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toast").ToastArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    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;
+    };
+    Host: typeof Host;
+    useToastManager: typeof Base.useToastManager;
+    createToastManager: typeof Base.createToastManager;
+};
+export {};

package/dist/react/components/toast.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast as Base } from "@base-ui/react/toast";
+import { useLayoutEffect, useRef } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { Icon } from "./icon.js";
+const Viewport = styled(Base.Viewport, "bevel-r-toasts");
+const Root = styled(Base.Root, "bevel-r-toast");
+const Content = styled(Base.Content, "bevel-r-toast__body");
+const Description = styled(Base.Description, "bevel-r-toast__message");
+const Title = styled(Base.Title, "bevel-r-toast__title");
+const Close = styled(Base.Close, "bevel-r-toast__close");
+const Action = styled(Base.Action, "bevel-r-toast__action");
+const Portal = styled(Base.Portal, "bevel-r-portal", true);
+const IconPart = nativePart("span", "bevel-r-toast__icon");
+const focusReturns = /* @__PURE__ */ new WeakMap();
+function restoreFocus({ previous, fallback }) {
+  for (const target of [previous, fallback && "current" in fallback ? fallback.current : fallback]) {
+    if (!(target instanceof HTMLElement) || !target.isConnected) continue;
+    target.focus({ preventScroll: true });
+    if (target.ownerDocument.activeElement === target) return;
+  }
+}
+function HostItem({ toast, closeLabel }) {
+  const manager = Base.useToastManager();
+  const root = useRef(null);
+  const focus = toast.data?.focus === true;
+  const sticky = focus || toast.type === "error" || Boolean(toast.actionProps);
+  useLayoutEffect(() => {
+    if (sticky && toast.timeout === void 0) manager.update(toast.id, { timeout: 0 });
+  }, [sticky, toast.id]);
+  useLayoutEffect(() => {
+    const element = root.current;
+    if (!element) return void 0;
+    const active = element.ownerDocument.activeElement;
+    let holder = active;
+    while (holder && !focusReturns.has(holder)) holder = holder.parentElement;
+    const inherited = holder ? focusReturns.get(holder) : void 0;
+    if (!focus && !inherited) return void 0;
+    const entry = { previous: inherited ? inherited.previous : active, fallback: toast.data?.returnFocus ?? inherited?.fallback };
+    focusReturns.set(element, entry);
+    if (focus) element.focus({ preventScroll: true });
+    return () => {
+      focusReturns.delete(element);
+      if (element.contains(element.ownerDocument.activeElement)) restoreFocus(entry);
+    };
+  }, [focus, toast.id]);
+  useLayoutEffect(() => {
+    const element = root.current, entry = element && focusReturns.get(element);
+    if (toast.limited && entry && element.contains(element.ownerDocument.activeElement)) restoreFocus(entry);
+  }, [toast.limited]);
+  const tone = toast.type === "success" || toast.type === "error" ? toast.type : void 0;
+  const toneIcon = toast.type === "success" ? "check" : toast.type === "error" ? "warning" : "info";
+  const label = closeLabel ?? (typeof toast.title === "string" ? `Dismiss ${toast.title}` : "Dismiss notification");
+  return /* @__PURE__ */ jsxs(Root, { ref: root, toast, "data-bevel-react-tone": tone, "aria-live": focus ? "off" : void 0, children: [
+    /* @__PURE__ */ jsx(IconPart, { children: /* @__PURE__ */ jsx(Icon, { name: toneIcon, size: 16 }) }),
+    /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(Title, {}),
+      /* @__PURE__ */ jsx(Description, {}),
+      toast.actionProps && /* @__PURE__ */ jsx(Action, { className: "bevel-r-button bevel-r-button--small", onClick: (event) => {
+        if (!event.defaultPrevented) manager.close(toast.id);
+      } })
+    ] }),
+    /* @__PURE__ */ jsx(Close, { "aria-label": label, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+  ] });
+}
+function Host({ closeLabel, ...props }) {
+  const { toasts } = Base.useToastManager();
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Viewport, { ...props, children: [...toasts].reverse().map((toast) => /* @__PURE__ */ jsx(HostItem, { toast, closeLabel }, toast.id)) }) });
+}
+const Toast = {
+  Provider: Base.Provider,
+  Viewport,
+  Root,
+  Content,
+  Description,
+  Title,
+  Close,
+  Action,
+  Portal,
+  Positioner: styled(Base.Positioner, "bevel-r-positioner"),
+  Arrow: styled(Base.Arrow, "bevel-r-toast__arrow"),
+  Icon: IconPart,
+  Host,
+  useToastManager: Base.useToastManager,
+  createToastManager: Base.createToastManager
+};
+export {
+  Toast
+};

package/dist/react/components/tooltip-and-key.d.ts

@@ -0,0 +1,20 @@
+import { Tooltip as Base } from '@base-ui/react/tooltip';
+export declare const Tooltip: {
+    Root: <Payload>(props: Base.Root.Props<Payload>) => import("react").JSX.Element;
+    Provider: import("react").FC<import("@base-ui/react/tooltip").TooltipProviderProps>;
+    Trigger: Base.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tooltip").TooltipPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tooltip").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tooltip").TooltipPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tooltip").TooltipArrowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/tooltip").TooltipViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    createHandle: typeof Base.createHandle;
+    Handle: typeof Base.Handle;
+};
+export declare const Key: {
+    (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/tooltip-and-key.js

@@ -0,0 +1,20 @@
+"use client";
+import { Tooltip as Base } from "@base-ui/react/tooltip";
+import { nativePart, styled } from "../internal/part.js";
+const Tooltip = {
+  Root: Base.Root,
+  Provider: Base.Provider,
+  Trigger: styled(Base.Trigger, "bevel-r-tip"),
+  Portal: styled(Base.Portal, "bevel-r-portal", true),
+  Positioner: styled(Base.Positioner, "bevel-r-positioner"),
+  Popup: styled(Base.Popup, "bevel-r-tooltip"),
+  Arrow: styled(Base.Arrow, "bevel-r-tooltip__arrow"),
+  Viewport: styled(Base.Viewport, "bevel-r-tooltip__viewport"),
+  createHandle: Base.createHandle,
+  Handle: Base.Handle
+};
+const Key = nativePart("kbd", "bevel-r-kbd");
+export {
+  Key,
+  Tooltip
+};

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

@@ -0,0 +1,34 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { type TreeNode } from '../models/tree.js';
+export type { TreeNode } from '../models/tree.js';
+export interface TreeViewProps extends ComponentProps<'div'> {
+    items: readonly TreeNode[];
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelectedIdChange?: (id: string | null, details: ChangeDetails) => void;
+    expandedIds?: string[];
+    defaultExpandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[], details: ChangeDetails) => void;
+    renderNode?: (node: TreeNode) => ReactNode;
+}
+declare function Root({ items, selectedId, defaultSelectedId, onSelectedIdChange, expandedIds, defaultExpandedIds, onExpandedIdsChange, renderNode, children, ref, ...props }: TreeViewProps): import("react").JSX.Element;
+declare function Items(): import("react").JSX.Element;
+export declare const TreeView: {
+    Root: typeof Root;
+    Items: typeof Items;
+    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;
+    };
+    Empty: {
+        (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;
+    };
+};