@panphora/bevel 0.1.0

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

@@ -0,0 +1,56 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Link as LinkPart } from '../internal/link.js';
+declare function Root(props: ComponentProps<'nav'>): import("react").JSX.Element;
+declare const Link: typeof LinkPart;
+declare function Separator(props: ComponentProps<'span'>): import("react").JSX.Element;
+declare function OverflowTrigger(props: ComponentProps<'summary'>): import("react").JSX.Element;
+export interface BreadcrumbItem extends Omit<ComponentProps<typeof Link>, 'children' | 'id'> {
+    id: string;
+    label: ReactNode;
+}
+declare function Path({ items }: {
+    items: readonly BreadcrumbItem[];
+}): import("react").JSX.Element;
+export declare const Breadcrumbs: {
+    Root: typeof Root;
+    List: {
+        (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;
+    };
+    Item: {
+        (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Link: typeof LinkPart;
+    Separator: typeof Separator;
+    Middle: {
+        (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Overflow: {
+        (props: import("react").DetailedHTMLProps<import("react").DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDetailsElement> & import("react").DetailsHTMLAttributes<HTMLDetailsElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    OverflowLinks: {
+        (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;
+    };
+    OverflowTrigger: typeof OverflowTrigger;
+    Path: typeof Path;
+};
+export {};

package/dist/react/components/breadcrumbs.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { nativePart, styled } from "../internal/part.js";
+import { Link as LinkPart } from "../internal/link.js";
+const RootPart = nativePart("nav", "bevel-r-breadcrumbs");
+function Root(props) {
+  return /* @__PURE__ */ jsx(RootPart, { "aria-label": "Breadcrumb", ...props });
+}
+const List = nativePart("ol", "bevel-r-breadcrumbs__list");
+const Item = nativePart("li", "bevel-r-breadcrumbs__item");
+const Middle = nativePart("li", "bevel-r-breadcrumbs__middle");
+const Link = styled(LinkPart, "bevel-r-breadcrumbs__link");
+const SeparatorPart = nativePart("span", "bevel-r-breadcrumbs__separator");
+function Separator(props) {
+  return /* @__PURE__ */ jsx(SeparatorPart, { ...props, "aria-hidden": "true", children: props.children ?? "\u203A" });
+}
+const Overflow = nativePart("details", "bevel-r-breadcrumbs__overflow");
+const OverflowLinks = nativePart("span", "bevel-r-breadcrumbs__overflow-links");
+function OverflowTrigger(props) {
+  return /* @__PURE__ */ jsx("summary", { "aria-label": "Show full path", ...props, children: props.children ?? "\u2026" });
+}
+function Path({ items }) {
+  const ancestors = items.slice(1, -2);
+  return /* @__PURE__ */ jsx(List, { children: items.map((item, index) => {
+    const { id, label, ...props } = item;
+    if (index === items.length - 1) return /* @__PURE__ */ jsx(Item, { "aria-current": "page", children: label }, id);
+    if (index > 0 && index < items.length - 2) return /* @__PURE__ */ jsxs(Middle, { children: [
+      /* @__PURE__ */ jsx(Link, { ...props, children: label }),
+      /* @__PURE__ */ jsx(Separator, {})
+    ] }, id);
+    return /* @__PURE__ */ jsxs(Item, { children: [
+      /* @__PURE__ */ jsx(Link, { ...props, children: label }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      index === 0 && ancestors.length > 0 && /* @__PURE__ */ jsxs(Overflow, { children: [
+        /* @__PURE__ */ jsx(OverflowTrigger, {}),
+        /* @__PURE__ */ jsx(OverflowLinks, { children: ancestors.map(({ id: id2, label: label2, ...props2 }) => /* @__PURE__ */ jsx(Link, { ...props2, children: label2 }, id2)) })
+      ] })
+    ] }, id);
+  }) });
+}
+const Breadcrumbs = { Root, List, Item, Link, Separator, Middle, Overflow, OverflowLinks, OverflowTrigger, Path };
+export {
+  Breadcrumbs
+};

package/dist/react/components/bulk-bar.d.ts

@@ -0,0 +1,22 @@
+import { Toolbar as Base } from '@base-ui/react/toolbar';
+import { type ComponentProps, type RefObject } from 'react';
+export interface BulkBarProps extends ComponentProps<typeof Base.Root> {
+    count: number;
+    floating?: boolean;
+    returnFocus?: HTMLElement | RefObject<HTMLElement | null> | null;
+}
+declare function Root({ count, floating, hidden, returnFocus, ref, className, ...props }: BulkBarProps): import("react").JSX.Element;
+declare function Count({ children, ref, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export interface BulkBarActionProps extends ComponentProps<typeof Base.Button> {
+    tone?: 'default' | 'danger';
+}
+declare function Action({ tone, className, ...props }: BulkBarActionProps): import("react").JSX.Element;
+declare function Clear({ children, ...props }: ComponentProps<typeof Base.Button>): import("react").JSX.Element;
+export declare const BulkBar: {
+    Root: typeof Root;
+    Count: typeof Count;
+    Action: typeof Action;
+    Rule: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: typeof Clear;
+};
+export {};

package/dist/react/components/bulk-bar.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar as Base } from "@base-ui/react/toolbar";
+import { createContext, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { classes, cx } from "../internal/classes.js";
+import { nativePart, styled } from "../internal/part.js";
+import { useMergedRefs } from "../internal/refs.js";
+import { Icon } from "./icon.js";
+import { VisuallyHidden } from "./layout.js";
+const BarContext = createContext({ count: 0, announce: () => {
+} });
+const RootPart = styled(Base.Root, "bevel-r-bulk-bar");
+function Root({ count, floating = false, hidden, returnFocus, ref, className, ...props }) {
+  const [message, announce] = useState("");
+  const bar = useRef(null), merged = useMergedRefs(ref, bar);
+  const shown = !hidden && count > 0;
+  useLayoutEffect(() => {
+    if (shown) return;
+    announce("");
+    const element = bar.current;
+    if (!element?.contains(element.ownerDocument.activeElement)) return;
+    (returnFocus && "current" in returnFocus ? returnFocus.current : returnFocus)?.focus();
+  }, [shown]);
+  const context = useMemo(() => ({ count, announce }), [count]);
+  return /* @__PURE__ */ jsxs(BarContext, { value: context, children: [
+    /* @__PURE__ */ jsx(
+      RootPart,
+      {
+        "aria-label": "Bulk actions",
+        ...props,
+        ref: merged,
+        hidden: !shown,
+        className: classes(cx(floating && "bevel-r-bulk-bar--floating"), className)
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", children: shown ? message : "" })
+  ] });
+}
+const CountPart = nativePart("span", "bevel-r-bulk-bar__count");
+function Count({ children, ref, ...props }) {
+  const { count, announce } = useContext(BarContext);
+  const own = useRef(null), merged = useMergedRefs(ref, own);
+  useLayoutEffect(() => {
+    announce(own.current?.textContent ?? "");
+  });
+  return /* @__PURE__ */ jsx(CountPart, { ...props, ref: merged, children: children ?? `${count} selected` });
+}
+const ActionPart = styled(Base.Button, "bevel-r-bulk-bar__action");
+function Action({ tone = "default", className, ...props }) {
+  return /* @__PURE__ */ jsx(ActionPart, { ...props, className: classes(cx(tone === "danger" && "bevel-r-bulk-bar__action--danger"), className) });
+}
+const ClearPart = styled(Base.Button, "bevel-r-bulk-bar__clear");
+function Clear({ children, ...props }) {
+  return /* @__PURE__ */ jsx(ClearPart, { "aria-label": "Clear selection", ...props, children: children ?? /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) });
+}
+const BulkBar = { Root, Count, Action, Rule: styled(Base.Separator, "bevel-r-bulk-bar__rule"), Clear };
+export {
+  BulkBar
+};

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

@@ -0,0 +1,15 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type ComponentProps } from 'react';
+export interface ButtonProps extends ComponentProps<typeof BaseButton> {
+    variant?: 'default' | 'primary' | 'danger' | 'quiet' | 'quiet-bevel';
+    size?: 'default' | 'small';
+}
+export declare function Button({ variant, size, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export { IconButton, type IconButtonProps } from './icon-button.js';
+export declare const ButtonGroup: {
+    (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/button.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cx, classes } from "../internal/classes.js";
+import { nativePart, styled } from "../internal/part.js";
+const ButtonPart = styled(BaseButton, "bevel-r-button");
+const ButtonLabel = nativePart("span", "bevel-r-button__label");
+function Button({ variant = "default", size = "default", className, children, ...props }) {
+  return /* @__PURE__ */ jsx(ButtonPart, { ...props, className: classes(cx(
+    variant !== "default" && `bevel-r-button--${variant}`,
+    size === "small" && "bevel-r-button--small"
+  ), className), children: /* @__PURE__ */ jsx(ButtonLabel, { children }) });
+}
+import { IconButton } from "./icon-button.js";
+const ButtonGroup = nativePart("div", "bevel-r-buttons");
+export {
+  Button,
+  ButtonGroup,
+  IconButton
+};

package/dist/react/components/callout-and-hint.d.ts

@@ -0,0 +1,17 @@
+export declare const Callout: {
+    (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 Hint: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size"> & {
+    variant?: "alert" | undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "size"> & {
+    variant?: "alert" | 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/callout-and-hint.js

@@ -0,0 +1,8 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const Callout = nativePart("aside", "bevel-r-callout");
+const Hint = nativeVariants("p", "bevel-r-hint", ["alert"]);
+export {
+  Callout,
+  Hint
+};

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

@@ -0,0 +1,5 @@
+export declare const Checkbox: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/checkbox").CheckboxRootProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/checkbox").CheckboxIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/checkbox-group").CheckboxGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/react/components/checkbox.js

@@ -0,0 +1,13 @@
+"use client";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { styled } from "../internal/part.js";
+const Checkbox = {
+  Root: styled(BaseCheckbox.Root, "bevel-r-checkbox__box"),
+  Indicator: styled(BaseCheckbox.Indicator, "bevel-r-checkbox__indicator")
+};
+const CheckboxGroup = styled(BaseCheckboxGroup, "bevel-r-choices");
+export {
+  Checkbox,
+  CheckboxGroup
+};

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

@@ -0,0 +1,149 @@
+import { Button } from './button.js';
+export declare const RecoveryChip: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Collapse: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    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;
+    };
+    Heading: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Eyebrow: {
+        (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;
+    };
+    Meta: {
+        (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;
+    };
+    Restore: typeof Button;
+    Keep: typeof Button;
+    Changes: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChangesTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Preview: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Key: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Old: {
+        (props: import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLModElement>, HTMLModElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLModElement> & import("react").DelHTMLAttributes<HTMLModElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    New: {
+        (props: import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLModElement> & import("react").InsHTMLAttributes<HTMLModElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+};
+export declare const Chip: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Collapse: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Panel: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    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;
+    };
+    Heading: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Eyebrow: {
+        (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;
+    };
+    Meta: {
+        (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;
+    };
+    Restore: typeof Button;
+    Keep: typeof Button;
+    Changes: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ChangesTrigger: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsibleTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Preview: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/collapsible").CollapsiblePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Row: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Key: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Old: {
+        (props: import("react").DetailedHTMLProps<import("react").DelHTMLAttributes<HTMLModElement>, HTMLModElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLModElement> & import("react").DelHTMLAttributes<HTMLModElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    New: {
+        (props: import("react").DetailedHTMLProps<import("react").InsHTMLAttributes<HTMLModElement>, HTMLModElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLModElement> & import("react").InsHTMLAttributes<HTMLModElement> & {
+            '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/chip.js

@@ -0,0 +1,29 @@
+"use client";
+import { Collapsible } from "@base-ui/react/collapsible";
+import { nativePart, styled } from "../internal/part.js";
+import { Button } from "./button.js";
+const RecoveryChip = {
+  Root: styled(Collapsible.Root, "bevel-r-chip"),
+  Trigger: styled(Collapsible.Trigger, "bevel-r-button bevel-r-chip__trigger"),
+  Collapse: styled(Collapsible.Trigger, "bevel-r-chip__collapse"),
+  Panel: styled(Collapsible.Panel, "bevel-r-chip__panel"),
+  Header: nativePart("div", "bevel-r-chip__head"),
+  Heading: nativePart("h3", "bevel-r-chip__title"),
+  Eyebrow: nativePart("p", "bevel-r-chip__eyebrow"),
+  Meta: nativePart("div", "bevel-r-chip__meta"),
+  Actions: nativePart("div", "bevel-r-chip__actions"),
+  Restore: styled(Button, "bevel-r-chip__restore"),
+  Keep: styled(Button, "bevel-r-chip__keep"),
+  Changes: styled(Collapsible.Root, "bevel-r-chip__changes"),
+  ChangesTrigger: styled(Collapsible.Trigger, "bevel-r-chip__changes-toggle"),
+  Preview: styled(Collapsible.Panel, "bevel-r-chip__preview"),
+  Row: nativePart("div", "bevel-r-chip__row"),
+  Key: nativePart("span", "bevel-r-chip__key"),
+  Old: nativePart("del", "bevel-r-chip__old"),
+  New: nativePart("ins", "bevel-r-chip__new")
+};
+const Chip = RecoveryChip;
+export {
+  Chip,
+  RecoveryChip
+};

package/dist/react/components/code-block.d.ts

@@ -0,0 +1,50 @@
+import { type ComponentProps } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface CodeBlockProps extends ComponentProps<'section'> {
+    code: string;
+    wrap?: boolean;
+    defaultWrap?: boolean;
+    onWrapChange?: (wrap: boolean, details: ChangeDetails) => void;
+}
+declare function Root({ code, wrap, defaultWrap, onWrapChange, ...props }: CodeBlockProps): import("react").JSX.Element;
+declare function Code(props: ComponentProps<'code'>): import("react").JSX.Element;
+declare function Copy({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Wrap({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+declare function Feedback(): import("react").JSX.Element | null;
+export declare const CodeBlock: {
+    Root: typeof Root;
+    Code: typeof Code;
+    Copy: typeof Copy;
+    Wrap: typeof Wrap;
+    Feedback: typeof Feedback;
+    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;
+    };
+    Name: {
+        (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;
+    };
+    Language: {
+        (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;
+    };
+    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;
+    };
+};
+export {};

package/dist/react/components/code-block.js

@@ -0,0 +1,77 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { nativePart } from "../internal/part.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useCode() {
+  const context = useContext(Context);
+  if (!context) throw new Error("CodeBlock parts require CodeBlock.Root.");
+  return context;
+}
+const RootPart = nativePart("section", "bevel-r-code");
+const Pre = nativePart("pre", "bevel-r-code__pre");
+const NoticePart = nativePart("p", "bevel-r-code__notice");
+const FallbackPart = nativePart("textarea", "bevel-r-code__fallback");
+function Root({ code, wrap, defaultWrap = false, onWrapChange, ...props }) {
+  const [current, setWrap] = useControllableState({ value: wrap, defaultValue: defaultWrap, onChange: onWrapChange });
+  const [status, setStatus] = useState("idle");
+  const generation = useRef(0), timer = useRef(null);
+  useEffect(() => {
+    setStatus("idle");
+    return () => {
+      generation.current++;
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, [code]);
+  const copy = async () => {
+    const token = ++generation.current;
+    if (timer.current) clearTimeout(timer.current);
+    try {
+      await navigator.clipboard.writeText(code);
+      if (generation.current === token) {
+        setStatus("copied");
+        timer.current = setTimeout(() => setStatus("idle"), 1500);
+      }
+    } catch {
+      if (generation.current === token) setStatus("failed");
+    }
+  };
+  return /* @__PURE__ */ jsx(Context, { value: { code, wrap: current, setWrap, status, copy }, children: /* @__PURE__ */ jsx(RootPart, { ...props, "data-bevel-react-wrap": current || void 0 }) });
+}
+function Code(props) {
+  const context = useCode();
+  return /* @__PURE__ */ jsx(Pre, { style: { whiteSpace: context.wrap ? "pre-wrap" : "pre", overflowWrap: context.wrap ? "anywhere" : void 0 }, children: /* @__PURE__ */ jsx("code", { ...props, children: props.children ?? context.code }) });
+}
+function Copy({ onClick, ...props }) {
+  const context = useCode();
+  return /* @__PURE__ */ jsx(Button, { ...props, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) void context.copy();
+  }, children: props.children ?? "Copy code" });
+}
+function Wrap({ onClick, ...props }) {
+  const context = useCode();
+  return /* @__PURE__ */ jsx(Button, { ...props, "aria-pressed": context.wrap, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) context.setWrap(!context.wrap, { reason: "wrap", event });
+  }, children: props.children ?? "Wrap lines" });
+}
+function Feedback() {
+  const context = useCode(), fallback = useRef(null);
+  useEffect(() => {
+    if (context.status === "failed") {
+      fallback.current?.focus();
+      fallback.current?.select();
+    }
+  }, [context.status]);
+  return context.status === "idle" ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NoticePart, { role: "status", children: context.status === "copied" ? "Copied" : "Could not copy. Select the code below and copy it manually." }),
+    context.status === "failed" && /* @__PURE__ */ jsx(FallbackPart, { ref: fallback, readOnly: true, value: context.code, "aria-label": "Code to copy manually" })
+  ] });
+}
+const CodeBlock = { Root, Code, Copy, Wrap, Feedback, Header: nativePart("header", "bevel-r-code__header"), Name: nativePart("span", "bevel-r-code__name"), Language: nativePart("span", "bevel-r-code__language"), Meta: nativePart("span", "bevel-r-code__meta") };
+export {
+  CodeBlock
+};