@panphora/bevel 0.1.0

package/dist/react/components/activity-feed.d.ts

@@ -0,0 +1,89 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { Button } from './button.js';
+export interface ActivityEntry {
+    id: string;
+    content: ReactNode;
+    detail?: ReactNode;
+    avatar?: ReactNode;
+    time?: ReactNode;
+    dateTime?: string;
+}
+export interface ActivityGroup {
+    id: string;
+    label: ReactNode;
+    older?: boolean;
+    entries: readonly ActivityEntry[];
+}
+interface ActivityContext {
+    groups: readonly ActivityGroup[];
+    expanded: boolean;
+    change: (expanded: boolean, details: ChangeDetails) => void;
+    hasMore: boolean;
+    busy: boolean;
+    error?: string;
+    onLoadMore?: () => void;
+}
+export interface ActivityFeedProps extends ComponentProps<'section'> {
+    groups: readonly ActivityGroup[];
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: ActivityContext['change'];
+    hasMore?: boolean;
+    busy?: boolean;
+    error?: string;
+    onLoadMore?: () => void;
+}
+declare function Root({ groups, expanded, defaultExpanded, onExpandedChange, hasMore, busy, error, onLoadMore, ...props }: ActivityFeedProps): import("react").JSX.Element;
+declare function Groups({ empty }: {
+    empty?: ReactNode;
+}): import("react").JSX.Element;
+declare function More({ onClick, ...props }: ComponentProps<typeof Button>): import("react").JSX.Element;
+export declare const ActivityFeed: {
+    Root: typeof Root;
+    Groups: typeof Groups;
+    More: typeof More;
+    Day: {
+        (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;
+    };
+    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;
+    };
+    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;
+    };
+    Detail: {
+        (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;
+    };
+    Avatar: {
+        (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/activity-feed.js

@@ -0,0 +1,54 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { Button } from "./button.js";
+const Context = createContext(null);
+function useActivity() {
+  const context = useContext(Context);
+  if (!context) throw new Error("ActivityFeed parts require ActivityFeed.Root.");
+  return context;
+}
+const RootPart = nativePart("section", "bevel-r-activity");
+const Day = nativePart("h3", "bevel-r-activity__day");
+const List = nativePart("ol", "bevel-r-activity__list");
+const Item = nativePart("li", "bevel-r-activity__item");
+const Head = nativePart("div", "bevel-r-activity__head");
+const Detail = nativePart("div", "bevel-r-activity__detail");
+const Avatar = nativePart("span", "bevel-r-activity__avatar");
+function Root({ groups, expanded, defaultExpanded = false, onExpandedChange, hasMore = false, busy = false, error, onLoadMore, ...props }) {
+  const [current, change] = useControllableState({ value: expanded, defaultValue: defaultExpanded, onChange: onExpandedChange });
+  return /* @__PURE__ */ jsx(Context, { value: { groups, expanded: current, change, hasMore, busy, error, onLoadMore }, children: /* @__PURE__ */ jsx(RootPart, { ...props, "aria-busy": busy || void 0 }) });
+}
+function Groups({ empty = "No activity yet." }) {
+  const context = useActivity();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    context.groups.length ? context.groups.map((group) => /* @__PURE__ */ jsxs("section", { hidden: group.older && !context.expanded, children: [
+      /* @__PURE__ */ jsx(Day, { children: group.label }),
+      /* @__PURE__ */ jsx(List, { children: group.entries.map((entry) => /* @__PURE__ */ jsxs(Item, { children: [
+        entry.avatar && /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", children: entry.avatar }),
+        /* @__PURE__ */ jsxs(Head, { children: [
+          /* @__PURE__ */ jsx("div", { children: entry.content }),
+          entry.time && /* @__PURE__ */ jsx("time", { dateTime: entry.dateTime, children: entry.time })
+        ] }),
+        entry.detail && /* @__PURE__ */ jsx(Detail, { children: entry.detail })
+      ] }, entry.id)) })
+    ] }, group.id)) : /* @__PURE__ */ jsx("p", { children: empty }),
+    context.error && /* @__PURE__ */ jsx("p", { role: "alert", children: context.error })
+  ] });
+}
+const MorePart = styled(Button, "bevel-r-activity__more");
+function More({ onClick, ...props }) {
+  const context = useActivity(), older = context.groups.filter((group) => group.older).reduce((count, group) => count + group.entries.length, 0), reveal = !context.expanded && older > 0;
+  return /* @__PURE__ */ jsx(MorePart, { ...props, "aria-expanded": context.expanded, disabled: props.disabled || context.busy || !reveal && (!context.hasMore || !context.onLoadMore), onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    if (reveal) context.change(true, { reason: "reveal", event });
+    else context.onLoadMore?.();
+  }, children: props.children ?? (context.busy ? "Loading\u2026" : reveal ? `Show older (${older})` : context.hasMore ? "Load more" : "All activity shown") });
+}
+const ActivityFeed = { Root, Groups, More, Day, List, Item, Head, Detail, Avatar };
+export {
+  ActivityFeed
+};

package/dist/react/components/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import { AlertDialog as Base } from '@base-ui/react/alert-dialog';
+export declare const AlertDialog: {
+    Root: typeof Base.Root;
+    Trigger: Base.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogViewportProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/alert-dialog").AlertDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Handle: typeof Base.Handle;
+    createHandle: typeof Base.createHandle;
+};

package/dist/react/components/alert-dialog.js

@@ -0,0 +1,19 @@
+"use client";
+import { AlertDialog as Base } from "@base-ui/react/alert-dialog";
+import { styled } from "../internal/part.js";
+const AlertDialog = {
+  Root: Base.Root,
+  Trigger: styled(Base.Trigger, "bevel-r-button"),
+  Portal: styled(Base.Portal, "bevel-r-portal", true),
+  Backdrop: styled(Base.Backdrop, "bevel-r-modal__backdrop"),
+  Viewport: styled(Base.Viewport, "bevel-r-modal__viewport"),
+  Popup: styled(Base.Popup, "bevel-r-modal"),
+  Title: styled(Base.Title, "bevel-r-modal__heading"),
+  Description: styled(Base.Description, "bevel-r-modal__description"),
+  Close: styled(Base.Close, "bevel-r-button"),
+  Handle: Base.Handle,
+  createHandle: Base.createHandle
+};
+export {
+  AlertDialog
+};

package/dist/react/components/app-shell.d.ts

@@ -0,0 +1,98 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
+import { type ComponentProps, type ReactNode } from 'react';
+import { Link as LinkPart } from '../internal/link.js';
+import { type ChangeDetails } from '../internal/controllable-state.js';
+import { IconButton, type IconButtonProps } from './icon-button.js';
+export interface AppShellProps extends ComponentProps<'div'> {
+    navOpen?: boolean;
+    defaultNavOpen?: boolean;
+    onNavOpenChange?: (open: boolean, details: ChangeDetails) => void;
+    sidebarCollapsed?: boolean;
+    defaultSidebarCollapsed?: boolean;
+    onSidebarCollapsedChange?: (collapsed: boolean, details: ChangeDetails) => void;
+}
+declare function Root({ navOpen, defaultNavOpen, onNavOpenChange, sidebarCollapsed, defaultSidebarCollapsed, onSidebarCollapsedChange, ...props }: AppShellProps): import("react").JSX.Element;
+declare function Rule(props: ComponentProps<'span'>): import("react").JSX.Element;
+export interface AppShellSwitcherProps extends Omit<ComponentProps<typeof BaseButton>, 'children'> {
+    icon?: ReactNode;
+    caret?: ReactNode;
+    children: ReactNode;
+}
+declare function Switcher({ icon, caret, children, ...props }: AppShellSwitcherProps): import("react").JSX.Element;
+export type AppShellToggleProps = Omit<IconButtonProps, 'label' | 'children' | 'variant'> & {
+    label?: string;
+    children?: ReactNode;
+};
+declare function NavToggle({ label, children, onClick, ...props }: AppShellToggleProps): import("react").JSX.Element;
+declare function Sidebar(props: Omit<ComponentProps<'aside'>, 'id'>): import("react").JSX.Element;
+declare function SidebarToggle({ label, children, onClick, ...props }: AppShellToggleProps): import("react").JSX.Element;
+declare function MainElement({ render, ref, ...props }: useRender.ComponentProps<'main'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const AppShell: typeof Root & {
+    Bar: {
+        (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;
+    };
+    Brand: typeof LinkPart;
+    Mark: {
+        (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;
+    };
+    Wordmark: {
+        (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;
+    };
+    Rule: typeof Rule;
+    Switcher: typeof Switcher;
+    Tabs: {
+        (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;
+    };
+    Tab: ({ current, children, ...props }: import("./segmented-control.js").SegmentedControlLinkProps) => import("react").JSX.Element;
+    Spacer: {
+        (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;
+    };
+    NavToggle: typeof NavToggle;
+    Account: typeof IconButton;
+    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;
+    };
+    Sidebar: typeof Sidebar;
+    SidebarHead: {
+        (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;
+    };
+    SidebarToggle: typeof SidebarToggle;
+    Main: typeof MainElement;
+    Content: {
+        (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/app-shell.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button as BaseButton } from "@base-ui/react/button";
+import { useRender } from "@base-ui/react/use-render";
+import { createContext, useContext, useId } from "react";
+import { nativePart, styled } from "../internal/part.js";
+import { Link as LinkPart } from "../internal/link.js";
+import { useControllableState } from "../internal/controllable-state.js";
+import { Icon } from "./icon.js";
+import { IconButton } from "./icon-button.js";
+import { SegmentedControl } from "./segmented-control.js";
+const Context = createContext(null);
+function useShell(part) {
+  const shell = useContext(Context);
+  if (!shell) throw new Error(`AppShell.${part} requires AppShell.`);
+  return shell;
+}
+const glyph = (name, size) => /* @__PURE__ */ jsx(Icon, { name, size });
+const RootPart = nativePart("div", "bevel-r-app-shell");
+function Root({ navOpen, defaultNavOpen = false, onNavOpenChange, sidebarCollapsed, defaultSidebarCollapsed = false, onSidebarCollapsedChange, ...props }) {
+  const sidebarId = useId();
+  const [open, changeNav] = useControllableState({ value: navOpen, defaultValue: defaultNavOpen, onChange: onNavOpenChange });
+  const [collapsed, changeCollapsed] = useControllableState({ value: sidebarCollapsed, defaultValue: defaultSidebarCollapsed, onChange: onSidebarCollapsedChange });
+  return /* @__PURE__ */ jsx(Context, { value: { navOpen: open, collapsed, sidebarId, changeNav, changeCollapsed }, children: /* @__PURE__ */ jsx(RootPart, { ...props, "data-bevel-react-nav-open": open || void 0 }) });
+}
+const RulePart = nativePart("span", "bevel-r-app-shell__rule");
+function Rule(props) {
+  return /* @__PURE__ */ jsx(RulePart, { "aria-hidden": "true", ...props });
+}
+const SwitcherPart = styled(BaseButton, "bevel-r-app-shell__switcher");
+const SwitcherIcon = nativePart("span", "bevel-r-app-shell__switcher-icon");
+const SwitcherLabel = nativePart("span", "bevel-r-app-shell__switcher-label");
+const SwitcherCaret = nativePart("span", "bevel-r-app-shell__caret");
+function Switcher({ icon, caret = glyph("chevron-down", 12), children, ...props }) {
+  return /* @__PURE__ */ jsxs(SwitcherPart, { ...props, children: [
+    icon != null && /* @__PURE__ */ jsx(SwitcherIcon, { children: icon }),
+    /* @__PURE__ */ jsx(SwitcherLabel, { children }),
+    caret != null && /* @__PURE__ */ jsx(SwitcherCaret, { children: caret })
+  ] });
+}
+const NavTogglePart = styled(IconButton, "bevel-r-app-shell__nav-toggle");
+function NavToggle({ label = "Show sidebar", children, onClick, ...props }) {
+  const shell = useShell("NavToggle");
+  return /* @__PURE__ */ jsx(NavTogglePart, { variant: "flat", ...props, label, "aria-controls": shell.sidebarId, "aria-expanded": shell.navOpen, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) shell.changeNav(!shell.navOpen, { reason: "open", event });
+  }, children: children ?? glyph("list", 17) });
+}
+const SidebarPart = nativePart("aside", "bevel-r-app-shell__side");
+function Sidebar(props) {
+  const shell = useShell("Sidebar");
+  return /* @__PURE__ */ jsx(SidebarPart, { ...props, id: shell.sidebarId, "data-bevel-react-collapsed": shell.collapsed || void 0 });
+}
+const SidebarTogglePart = styled(IconButton, "bevel-r-app-shell__side-toggle");
+function SidebarToggle({ label, children, onClick, ...props }) {
+  const shell = useShell("SidebarToggle");
+  return /* @__PURE__ */ jsx(SidebarTogglePart, { variant: "flat", ...props, label: label ?? (shell.collapsed ? "Expand sidebar" : "Collapse sidebar"), "aria-controls": shell.sidebarId, "aria-expanded": !shell.collapsed, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) shell.changeCollapsed(!shell.collapsed, { reason: "collapse", event });
+  }, children: children ?? glyph("sidebar", 15) });
+}
+function MainElement({ render, ref, ...props }) {
+  return useRender({ defaultTagName: "main", render, ref, props });
+}
+const AppShell = Object.assign(Root, {
+  Bar: nativePart("header", "bevel-r-app-shell__bar"),
+  Brand: styled(LinkPart, "bevel-r-app-shell__brand"),
+  Mark: nativePart("span", "bevel-r-app-shell__mark"),
+  Wordmark: nativePart("span", "bevel-r-app-shell__word"),
+  Rule,
+  Switcher,
+  Tabs: styled(SegmentedControl.Links, "bevel-r-app-shell__tabs"),
+  Tab: SegmentedControl.Link,
+  Spacer: nativePart("span", "bevel-r-app-shell__spacer"),
+  NavToggle,
+  Account: styled(IconButton, "bevel-r-app-shell__account"),
+  Body: nativePart("div", "bevel-r-app-shell__body"),
+  Sidebar,
+  SidebarHead: nativePart("div", "bevel-r-app-shell__side-head"),
+  SidebarToggle,
+  Main: styled(MainElement, "bevel-r-app-shell__main"),
+  Content: nativePart("div", "bevel-r-app-shell__content")
+});
+export {
+  AppShell
+};

package/dist/react/components/app-toolbar.d.ts

@@ -0,0 +1,19 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+export declare const AppToolbar: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Button: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Link: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Input: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/toolbar").ToolbarSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export declare const ToolbarToggle: <Value extends string>(props: BaseToggle.Props<Value> & import("react").RefAttributes<HTMLButtonElement>) => import("react").JSX.Element;
+export declare const ToolbarToggleGroup: <Value extends string>(props: BaseToggleGroup.Props<Value> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element;
+export declare const ToolbarSpacer: {
+    (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/app-toolbar.js

@@ -0,0 +1,22 @@
+"use client";
+import { Toolbar as Base } from "@base-ui/react/toolbar";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { nativePart, styled } from "../internal/part.js";
+const AppToolbar = {
+  Root: styled(Base.Root, "bevel-r-toolbar"),
+  Group: styled(Base.Group, "bevel-r-toolbar__group"),
+  Button: styled(Base.Button, "bevel-r-button"),
+  Link: styled(Base.Link, "bevel-r-button"),
+  Input: styled(Base.Input, "bevel-r-input bevel-r-toolbar__search"),
+  Separator: styled(Base.Separator, "bevel-r-toolbar__separator")
+};
+const ToolbarToggle = styled(BaseToggle, "bevel-r-button");
+const ToolbarToggleGroup = styled(BaseToggleGroup, "bevel-r-toolbar__group");
+const ToolbarSpacer = nativePart("span", "bevel-r-toolbar__spacer");
+export {
+  AppToolbar,
+  ToolbarSpacer,
+  ToolbarToggle,
+  ToolbarToggleGroup
+};

package/dist/react/components/avatar-group.d.ts

@@ -0,0 +1,67 @@
+import { type ComponentProps } from 'react';
+export declare const Avatar: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/avatar").AvatarRootProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Image: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/avatar").AvatarImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    Fallback: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/avatar").AvatarFallbackProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export interface AvatarMember {
+    id: string;
+    name: string;
+    src?: string;
+    initials?: string;
+    description?: string;
+    presence?: string;
+}
+declare function Person({ member }: {
+    member: AvatarMember;
+}): import("react").JSX.Element;
+declare function Members({ members }: {
+    members: readonly AvatarMember[];
+}): import("react").JSX.Element;
+declare function Group({ members, max, ...props }: ComponentProps<'section'> & {
+    members: readonly AvatarMember[];
+    max?: number;
+}): import("react").JSX.Element;
+export declare const AvatarGroup: {
+    Root: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Group: typeof Group;
+    Stack: {
+        (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;
+    };
+    Person: typeof Person;
+    Members: typeof Members;
+    Directory: {
+        (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>): import("react").ReactElement<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
+            'data-bevel-appearance': import("../provider.js").BevelAppearance;
+            className: import("../internal/classes.js").StateClassName<unknown>;
+        }, string | import("react").JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Member: {
+        (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;
+    };
+    OverflowTrigger: import("@base-ui/react").PopoverTrigger;
+    Popup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Presence: {
+        (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/avatar-group.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { nativePart, styled } from "../internal/part.js";
+import { Popover } from "./popover.js";
+const Avatar = { Root: styled(BaseAvatar.Root, "bevel-r-avatars__person"), Image: styled(BaseAvatar.Image, "bevel-r-avatars__image"), Fallback: styled(BaseAvatar.Fallback, "bevel-r-avatars__avatar bevel-r-avatars__fallback") };
+const Directory = nativePart("ul", "bevel-r-avatars__directory");
+const Member = nativePart("li", "bevel-r-avatars__member");
+const Stack = nativePart("div", "bevel-r-avatars__stack");
+const RootPart = nativePart("section", "bevel-r-avatars");
+function Person({ member }) {
+  return /* @__PURE__ */ jsxs(Avatar.Root, { role: "img", "aria-label": member.presence ? `${member.name}, ${member.presence}` : member.name, children: [
+    member.src && /* @__PURE__ */ jsx(Avatar.Image, { src: member.src, alt: "" }),
+    /* @__PURE__ */ jsx(Avatar.Fallback, { "aria-hidden": "true", children: member.initials ?? member.name.split(/\s+/).map((word) => word[0]).slice(0, 2).join("") })
+  ] });
+}
+const OverflowTrigger = styled(Popover.Trigger, "bevel-r-avatars__overflow");
+const Popup = styled(Popover.Popup, "bevel-r-avatars__members");
+function Members({ members }) {
+  return /* @__PURE__ */ jsx(Directory, { children: members.map((member) => /* @__PURE__ */ jsxs(Member, { children: [
+    /* @__PURE__ */ jsx(Person, { member }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("strong", { children: member.name }),
+      /* @__PURE__ */ jsx("p", { children: [member.presence, member.description].filter(Boolean).join(" \xB7 ") })
+    ] })
+  ] }, member.id)) });
+}
+function Group({ members, max = 4, ...props }) {
+  const count = Math.max(0, Math.trunc(max)), overflow = members.slice(count);
+  return /* @__PURE__ */ jsx(RootPart, { ...props, children: /* @__PURE__ */ jsxs(Stack, { children: [
+    members.slice(0, count).map((member) => /* @__PURE__ */ jsx(Person, { member }, member.id)),
+    overflow.length > 0 && /* @__PURE__ */ jsxs(Popover.Root, { children: [
+      /* @__PURE__ */ jsxs(OverflowTrigger, { "aria-label": `Show ${overflow.length} more members`, children: [
+        "+",
+        overflow.length
+      ] }),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popup, { children: [
+        /* @__PURE__ */ jsx(Popover.Title, { children: "More members" }),
+        /* @__PURE__ */ jsx(Members, { members: overflow }),
+        /* @__PURE__ */ jsx(Popover.Close, { children: "Close" })
+      ] }) }) })
+    ] })
+  ] }) });
+}
+const AvatarGroup = { Root: RootPart, Group, Stack, Person, Members, Directory, Member, OverflowTrigger, Popup, Presence: nativePart("span", "bevel-r-avatars__presence-dot") };
+export {
+  Avatar,
+  AvatarGroup
+};

package/dist/react/components/badge-and-pill.d.ts

@@ -0,0 +1,34 @@
+export declare const Badge: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+    variant?: "accent" | "against" | "alert" | "for" | "note" | undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+    variant?: "accent" | "against" | "alert" | "for" | "note" | undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const Pill: ({ variant, size, className: extra, ...props }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+    variant?: "down" | "live" | "warn" | undefined;
+    size?: 'default' | 'small';
+}) => import("react").ReactElement<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "size"> & {
+    variant?: "down" | "live" | "warn" | undefined;
+    size?: 'default' | 'small';
+}, "className" | "size" | "variant"> & {
+    'data-bevel-appearance': import("../provider.js").BevelAppearance;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const PillGroup: {
+    (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 LabelDot: {
+    (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/badge-and-pill.js

@@ -0,0 +1,12 @@
+"use client";
+import { nativePart, nativeVariants } from "../internal/part.js";
+const Badge = nativeVariants("span", "bevel-r-badge", ["for", "against", "note", "alert", "accent"]);
+const Pill = nativeVariants("span", "bevel-r-pill", ["live", "warn", "down"]);
+const PillGroup = nativePart("div", "bevel-r-pills");
+const LabelDot = nativePart("span", "bevel-r-label-dot");
+export {
+  Badge,
+  LabelDot,
+  Pill,
+  PillGroup
+};