@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/notification-center/notification-center.d.mts

@@ -0,0 +1,225 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import { EmptyStateProps } from "../empty-state/empty-state.mjs";
+import { useRender } from "@base-ui/react/use-render";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/notification-center/notification-center.d.ts
+declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<{
+  viewport: {
+    desktop: {
+      popup: string;
+    };
+    mobile: {
+      popup: string;
+    };
+  };
+  size: {
+    sm: {
+      popup: string;
+    };
+    md: {
+      popup: string;
+    };
+    lg: {
+      popup: string;
+    };
+  };
+  read: {
+    true: {
+      item: string[];
+    };
+    false: {
+      item: string[];
+    };
+  };
+  status: {
+    error: {
+      itemIcon: string[];
+    };
+    warning: {
+      itemIcon: string[];
+    };
+    info: {
+      itemIcon: string[];
+    };
+    success: {};
+  };
+}, {
+  trigger: string[];
+  triggerIcon: string[];
+  triggerBell: string[];
+  triggerDot: string[];
+  popup: string[];
+  header: (string | string[])[];
+  title: string[];
+  count: string[];
+  scroller: string[];
+  list: never[];
+  item: string[];
+  itemRow: string[];
+  itemIcon: string[];
+  itemContent: string[];
+  itemTitle: string[];
+  itemBody: string[];
+  itemActions: string[];
+  actionButton: never[];
+}, undefined, {
+  viewport: {
+    desktop: {
+      popup: string;
+    };
+    mobile: {
+      popup: string;
+    };
+  };
+  size: {
+    sm: {
+      popup: string;
+    };
+    md: {
+      popup: string;
+    };
+    lg: {
+      popup: string;
+    };
+  };
+  read: {
+    true: {
+      item: string[];
+    };
+    false: {
+      item: string[];
+    };
+  };
+  status: {
+    error: {
+      itemIcon: string[];
+    };
+    warning: {
+      itemIcon: string[];
+    };
+    info: {
+      itemIcon: string[];
+    };
+    success: {};
+  };
+}, {
+  trigger: string[];
+  triggerIcon: string[];
+  triggerBell: string[];
+  triggerDot: string[];
+  popup: string[];
+  header: (string | string[])[];
+  title: string[];
+  count: string[];
+  scroller: string[];
+  list: never[];
+  item: string[];
+  itemRow: string[];
+  itemIcon: string[];
+  itemContent: string[];
+  itemTitle: string[];
+  itemBody: string[];
+  itemActions: string[];
+  actionButton: never[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  viewport: {
+    desktop: {
+      popup: string;
+    };
+    mobile: {
+      popup: string;
+    };
+  };
+  size: {
+    sm: {
+      popup: string;
+    };
+    md: {
+      popup: string;
+    };
+    lg: {
+      popup: string;
+    };
+  };
+  read: {
+    true: {
+      item: string[];
+    };
+    false: {
+      item: string[];
+    };
+  };
+  status: {
+    error: {
+      itemIcon: string[];
+    };
+    warning: {
+      itemIcon: string[];
+    };
+    info: {
+      itemIcon: string[];
+    };
+    success: {};
+  };
+}, {
+  trigger: string[];
+  triggerIcon: string[];
+  triggerBell: string[];
+  triggerDot: string[];
+  popup: string[];
+  header: (string | string[])[];
+  title: string[];
+  count: string[];
+  scroller: string[];
+  list: never[];
+  item: string[];
+  itemRow: string[];
+  itemIcon: string[];
+  itemContent: string[];
+  itemTitle: string[];
+  itemBody: string[];
+  itemActions: string[];
+  actionButton: never[];
+}>>;
+export type NotificationCenterProps = Popover.Root.Props;
+export declare function NotificationCenter({ modal, ...props }: NotificationCenterProps): import("react").JSX.Element;
+export type NotificationCenterTriggerProps = StyledProps<Popover.Trigger.Props>;
+export declare function NotificationCenterTrigger({ className, children, ...props }: NotificationCenterTriggerProps): import("react").JSX.Element;
+export type NotificationCenterPortalProps = Popover.Portal.Props;
+export type NotificationCenterPopupProps = StyledProps<Popover.Popup.Props> & Pick<VariantProps<typeof notificationCenter>, "size" | "viewport"> & Pick<Popover.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
+  portalProps?: NotificationCenterPortalProps;
+};
+export declare function NotificationCenterPopup({ viewport, size, className, initialFocus, align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, ...props }: NotificationCenterPopupProps): import("react").JSX.Element;
+export type NotificationCenterHeaderProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterHeader({ render, className, ...props }: NotificationCenterHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterTitleProps = useRender.ComponentProps<"span">;
+export declare function NotificationCenterTitle({ render, className, ...props }: NotificationCenterTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterCountProps = useRender.ComponentProps<"span">;
+export declare function NotificationCenterCount({ render, className, ...props }: NotificationCenterCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterScrollerProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterScroller({ render, className, ...props }: NotificationCenterScrollerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterListProps = useRender.ComponentProps<"ul">;
+export declare function NotificationCenterList({ render, className, ...props }: NotificationCenterListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemProps = useRender.ComponentProps<"li"> & Pick<VariantProps<typeof notificationCenter>, "read">;
+export declare function NotificationCenterItem({ read, render, className, ...props }: NotificationCenterItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemRowProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterItemRow({ render, className, ...props }: NotificationCenterItemRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemIconProps = useRender.ComponentProps<"div"> & Pick<VariantProps<typeof notificationCenter>, "status">;
+export declare function NotificationCenterItemIcon({ status, render, className, children, ...props }: NotificationCenterItemIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemContentProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterItemContent({ render, className, ...props }: NotificationCenterItemContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemTitleProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterItemTitle({ render, className, ...props }: NotificationCenterItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemBodyProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterItemBody({ render, className, ...props }: NotificationCenterItemBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterItemActionsProps = useRender.ComponentProps<"div">;
+export declare function NotificationCenterItemActions({ render, className, ...props }: NotificationCenterItemActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type NotificationCenterActionButtonProps = Omit<ButtonProps, "className" | "size" | "variant"> & {
+  className?: string;
+};
+export declare function NotificationCenterActionButton({ className, ...props }: NotificationCenterActionButtonProps): import("react").JSX.Element;
+export type NotificationCenterEmptyStateProps = EmptyStateProps;
+export declare function NotificationCenterEmptyState(props: NotificationCenterEmptyStateProps): import("react").JSX.Element;
+//#endregion

package/dist/components/notification-center/notification-center.mjs

@@ -0,0 +1,340 @@
+import { headEdgePull } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { Button } from "../button/button.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { Status } from "../status/status.mjs";
+import { EmptyState } from "../empty-state/empty-state.mjs";
+import { AlertTriangle, Bell, CheckCircle2, Info } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/notification-center/notification-center.tsx
+const notificationCenter = tv({
+	slots: {
+		trigger: [
+			"relative inline-flex size-10 items-center justify-center overflow-visible p-0",
+			"rounded-control border-[1.5px] border-transparent bg-transparent text-foreground-on-frame",
+			"select-none outline-none",
+			"hover:bg-fill-frame-medium active:bg-fill-frame-medium data-popup-open:bg-fill-frame-medium",
+			"focus-visible:shadow-focus",
+			"[&_svg]:size-5 [&_svg]:shrink-0"
+		],
+		triggerIcon: ["relative inline-flex size-5 items-center justify-center"],
+		triggerBell: ["size-5 shrink-0 text-current"],
+		triggerDot: ["pointer-events-none absolute top-1.5 right-1.5"],
+		popup: [
+			"flex flex-col overflow-hidden",
+			"rounded-container bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: [
+			"flex items-center px-4",
+			"min-h-13 gap-2 border-b border-line-seam py-0",
+			headEdgePull
+		],
+		title: ["font-sans text-headline text-foreground"],
+		count: ["ml-auto", "font-mono text-mono-meta text-foreground-hint"],
+		scroller: ["min-h-0 flex-1 overflow-y-auto overscroll-contain"],
+		list: [],
+		item: [
+			"group/notification-center-item relative px-4 py-3",
+			"before:pointer-events-none before:absolute before:top-0 before:right-0 before:left-4 before:hidden before:border-t before:border-line-hairline",
+			"not-first:before:block has-data-[slot=notification-center-item-icon]:before:left-[63px]"
+		],
+		itemRow: ["flex items-start", "gap-3"],
+		itemIcon: [
+			"flex shrink-0 items-center justify-center",
+			"mt-0 size-[35px] rounded-sticker bg-fill-muted text-foreground-muted",
+			"[&_svg]:size-[18px]"
+		],
+		itemContent: ["min-w-0 flex-1"],
+		itemTitle: [
+			"wrap-break-word",
+			"font-sans text-subhead font-bold text-foreground",
+			"group-data-read/notification-center-item:font-semibold group-data-read/notification-center-item:text-foreground-muted"
+		],
+		itemBody: ["mt-0.5 wrap-break-word", "line-clamp-2 font-sans text-callout text-foreground-muted"],
+		itemActions: ["flex items-center", "mt-2 ml-0 flex-wrap justify-start gap-2"],
+		actionButton: []
+	},
+	variants: {
+		viewport: {
+			desktop: { popup: "w-[380px]" },
+			mobile: { popup: "w-[min(var(--available-width,calc(100vw-16px)),480px)]" }
+		},
+		size: {
+			sm: { popup: "h-56" },
+			md: { popup: "h-72" },
+			lg: { popup: "h-96" }
+		},
+		read: {
+			true: { item: ["opacity-100"] },
+			false: { item: [
+				"pr-[37px]",
+				"after:pointer-events-none after:absolute after:top-[calc(--spacing(3)+(var(--text-subhead--line-height)-10px)/2)] after:right-4 after:size-2.5",
+				"after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-attention-400"
+			] }
+		},
+		status: {
+			error: { itemIcon: ["bg-warning-soft text-foreground"] },
+			warning: { itemIcon: ["bg-warning-soft text-foreground"] },
+			info: { itemIcon: ["bg-info-soft text-foreground"] },
+			success: {}
+		}
+	},
+	defaultVariants: {
+		viewport: "desktop",
+		size: "md",
+		read: false,
+		status: "info"
+	}
+});
+/**
+* On a phone the popup is as wide as the screen less 8px on each side, and the
+* collision padding stops it 8px from the edge it is pushed against, so it
+* lines up with the server list under the same top bar
+* (design/foundations/elevation.md#popups).
+*/
+const PHONE_INSET = 8;
+function NotificationCenter({ modal = false, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		modal,
+		...props
+	});
+}
+function NotificationCenterTriggerContent() {
+	const { triggerIcon, triggerBell, triggerDot } = notificationCenter();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: triggerIcon(),
+		children: /* @__PURE__ */ jsx(Bell, {
+			className: triggerBell(),
+			strokeWidth: 2
+		})
+	}), /* @__PURE__ */ jsx(Status, {
+		"aria-hidden": true,
+		variant: "accent",
+		size: "md",
+		className: triggerDot()
+	})] });
+}
+function NotificationCenterTrigger({ className, children, ...props }) {
+	const { trigger } = notificationCenter();
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "notification-center-trigger",
+		className: trigger({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(NotificationCenterTriggerContent, {})
+	});
+}
+function NotificationCenterPortal(props) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { ...useThemeScopeProps(props) });
+}
+function NotificationCenterFramePositioner({ collisionPadding, container, defaultCollisionPadding, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, defaultCollisionPadding, container);
+	return /* @__PURE__ */ jsx(Popover.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function NotificationCenterPopup({ viewport = "desktop", size = "md", className, initialFocus = false, align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset = 4, sticky, portalProps, ...props }) {
+	const { popup } = notificationCenter({
+		viewport,
+		size
+	});
+	return /* @__PURE__ */ jsx(NotificationCenterPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(NotificationCenterFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalProps?.container,
+			defaultCollisionPadding: viewport === "mobile" ? PHONE_INSET : 5,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset,
+			sticky,
+			className: "isolate z-50 outline-none",
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				"aria-label": props["aria-label"] ?? "Notification center",
+				"data-slot": "notification-center-popup",
+				"data-size": size,
+				"data-viewport": viewport,
+				initialFocus,
+				className: popup({ className }),
+				...props
+			})
+		})
+	});
+}
+function NotificationCenterHeader({ render, className, ...props }) {
+	const { header } = notificationCenter();
+	const defaultProps = { className: header({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-header" }
+	});
+}
+function NotificationCenterTitle({ render, className, ...props }) {
+	const { title } = notificationCenter();
+	const defaultProps = { className: title({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-title" }
+	});
+}
+function NotificationCenterCount({ render, className, ...props }) {
+	const { count } = notificationCenter();
+	const defaultProps = { className: count({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-count" }
+	});
+}
+function NotificationCenterScroller({ render, className, ...props }) {
+	const { scroller } = notificationCenter();
+	const defaultProps = { className: scroller({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-scroller" }
+	});
+}
+function NotificationCenterList({ render, className, ...props }) {
+	const { list } = notificationCenter();
+	const defaultProps = {
+		"aria-label": "Notifications",
+		className: list({ className })
+	};
+	return useRender({
+		defaultTagName: "ul",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-list" }
+	});
+}
+function NotificationCenterItem({ read = false, render, className, ...props }) {
+	const { item } = notificationCenter({ read });
+	const defaultProps = { className: item({ className }) };
+	return useRender({
+		defaultTagName: "li",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "notification-center-item",
+			read
+		}
+	});
+}
+function NotificationCenterItemRow({ render, className, ...props }) {
+	const { itemRow } = notificationCenter();
+	const defaultProps = { className: itemRow({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-item-row" }
+	});
+}
+const STATUS_LABEL = {
+	error: "Error",
+	warning: "Warning",
+	info: "Info",
+	success: "Success"
+};
+const DEFAULT_STATUS_ICON = {
+	error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
+	info: /* @__PURE__ */ jsx(Info, {}),
+	success: /* @__PURE__ */ jsx(CheckCircle2, {})
+};
+function NotificationCenterItemIcon({ status = "info", render, className, children, ...props }) {
+	const { itemIcon } = notificationCenter({ status });
+	const defaultProps = {
+		role: "img",
+		"aria-label": STATUS_LABEL[status],
+		className: itemIcon({ className }),
+		children: children ?? DEFAULT_STATUS_ICON[status]
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "notification-center-item-icon",
+			status
+		}
+	});
+}
+function NotificationCenterItemContent({ render, className, ...props }) {
+	const { itemContent } = notificationCenter();
+	const defaultProps = { className: itemContent({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-item-content" }
+	});
+}
+function NotificationCenterItemTitle({ render, className, ...props }) {
+	const { itemTitle } = notificationCenter();
+	const defaultProps = { className: itemTitle({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-item-title" }
+	});
+}
+function NotificationCenterItemBody({ render, className, ...props }) {
+	const { itemBody } = notificationCenter();
+	const defaultProps = { className: itemBody({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-item-body" }
+	});
+}
+function NotificationCenterItemActions({ render, className, ...props }) {
+	const { itemActions } = notificationCenter();
+	const defaultProps = { className: itemActions({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "notification-center-item-actions" }
+	});
+}
+function NotificationCenterActionButton({ className, ...props }) {
+	const { actionButton } = notificationCenter();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: "md",
+		variant: "outline",
+		className: actionButton({ className }),
+		...props
+	});
+}
+function NotificationCenterEmptyState(props) {
+	return /* @__PURE__ */ jsx(EmptyState, {
+		"data-slot": "notification-center-empty-state",
+		...props
+	});
+}
+//#endregion
+export { NotificationCenter, NotificationCenterActionButton, NotificationCenterCount, NotificationCenterEmptyState, NotificationCenterHeader, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemBody, NotificationCenterItemContent, NotificationCenterItemIcon, NotificationCenterItemRow, NotificationCenterItemTitle, NotificationCenterList, NotificationCenterPopup, NotificationCenterScroller, NotificationCenterTitle, NotificationCenterTrigger };

package/dist/components/panel/index.d.mts

@@ -0,0 +1,7 @@
+import { PanelAction, PanelActionProps } from "./panel-action.mjs";
+import { Panel, PanelBody, PanelBodyProps, PanelEdge, PanelFooter, PanelFooterProps, PanelHeaderRoot, PanelHeaderRootProps, PanelProps, PanelScrollContent, PanelScrollContentProps, PanelScrollViewport, PanelScrollViewportProps, PanelSection, PanelSectionProps } from "./panel.mjs";
+import { PanelActions, PanelActionsProps, PanelActivity, PanelActivityProps, PanelHeader, PanelHeaderContent, PanelHeaderContentProps, PanelHeaderIcon, PanelHeaderIconProps, PanelHeaderProps, PanelHeading, PanelHeadingProps, PanelMeta, PanelMetaProps, PanelSectionHeader, PanelSectionHeaderProps, PanelStatus, PanelStatusProps, PanelTitle, PanelTitleProps } from "./panel-header.mjs";
+import { PanelToggleAction, PanelToggleActionProps } from "./panel-toggle-action.mjs";
+import { PanelNotice, PanelNoticeActions, PanelNoticeActionsProps, PanelNoticeContent, PanelNoticeContentProps, PanelNoticeProps, PanelNoticeStatus } from "./panel-notice.mjs";
+import { PanelSplitAction, PanelSplitActionMain, PanelSplitActionMainProps, PanelSplitActionMenu, PanelSplitActionMenuProps, PanelSplitActionProps, PanelSplitActionToggle, PanelSplitActionToggleProps } from "./panel-split-action.mjs";
+export { Panel, PanelAction, type PanelActionProps, PanelActions, type PanelActionsProps, PanelActivity, type PanelActivityProps, PanelBody, type PanelBodyProps, type PanelEdge, PanelFooter, type PanelFooterProps, PanelHeader, PanelHeaderContent, type PanelHeaderContentProps, PanelHeaderIcon, type PanelHeaderIconProps, type PanelHeaderProps, PanelHeaderRoot, type PanelHeaderRootProps, PanelHeading, type PanelHeadingProps, PanelMeta, type PanelMetaProps, PanelNotice, PanelNoticeActions, type PanelNoticeActionsProps, PanelNoticeContent, type PanelNoticeContentProps, type PanelNoticeProps, type PanelNoticeStatus, type PanelProps, PanelScrollContent, type PanelScrollContentProps, PanelScrollViewport, type PanelScrollViewportProps, PanelSection, PanelSectionHeader, type PanelSectionHeaderProps, type PanelSectionProps, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PanelStatus, type PanelStatusProps, PanelTitle, type PanelTitleProps, PanelToggleAction, type PanelToggleActionProps };

package/dist/components/panel/panel-action.d.mts

@@ -0,0 +1,15 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { Button } from "@base-ui/react/button";
+//#region src/components/panel/panel-action.d.ts
+export type PanelActionProps = Omit<StyledProps<Button.Props>, "type"> & DataAttributes & {
+  /**
+   * Activate when the finger lifts instead of on the click after it, so a
+   * tap that stops a scrolling page still acts. Give it to Back, the
+   * header's navigation; not to actions that change things
+   * (design/patterns/navigation.md#switching-on-finger-lift).
+   */
+  activateOnTouchEnd?: boolean;
+};
+export declare function PanelAction({ className, render, nativeButton, activateOnTouchEnd, ref, ...props }: PanelActionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/panel/panel-action.mjs

@@ -0,0 +1,23 @@
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { panelAction } from "./panel-action.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/panel/panel-action.tsx
+function PanelAction({ className, render, nativeButton, activateOnTouchEnd = false, ref, ...props }) {
+	const tapRef = useTapActivation(activateOnTouchEnd);
+	const [setRef] = useMergedRef(tapRef, ref);
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		ref: setRef,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		type: "button",
+		"data-slot": "panel-action",
+		"data-icon-inset": "",
+		className: panelAction({ className })
+	});
+}
+//#endregion
+export { PanelAction };

package/dist/components/panel/panel-action.recipe.mjs

@@ -0,0 +1,40 @@
+import { controlIconInset } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/panel/panel-action.recipe.ts
+const panelActionBase = tv({ base: [
+	"relative inline-flex w-auto shrink-0 items-center justify-center",
+	"overflow-visible font-sans leading-none tabular-nums select-none outline-none",
+	"transition-all duration-100",
+	"[&>svg]:pointer-events-none [&>svg]:shrink-0",
+	"h-control min-w-control rounded-control border-[1.5px] border-transparent bg-transparent py-0",
+	"px-2 md:pointer-fine:px-[5px]",
+	"after:absolute after:-inset-control-hit",
+	"text-foreground",
+	"hover:bg-fill-medium active:bg-fill-medium",
+	"focus-visible:shadow-focus",
+	"[&>svg]:size-control-icon",
+	controlIconInset
+] });
+const panelAction = tv({
+	extend: panelActionBase,
+	base: [
+		"whitespace-nowrap",
+		"disabled:pointer-events-none disabled:transform-none",
+		"gap-1.5 text-control font-bold",
+		"disabled:bg-transparent disabled:text-foreground-disabled disabled:opacity-100",
+		"aria-pressed:border-sticker-ink aria-pressed:bg-selected aria-pressed:text-sticker-ink aria-pressed:ring-[1.5px] aria-pressed:ring-sticker-edge",
+		"aria-pressed:active:overlay-sticker-medium"
+	]
+});
+const panelToggleAction = tv({
+	extend: panelActionBase,
+	base: [
+		"data-disabled:pointer-events-none data-disabled:transform-none",
+		"gap-1.5 text-control font-bold",
+		"data-disabled:bg-transparent data-disabled:text-foreground-disabled data-disabled:opacity-100",
+		"data-pressed:border-sticker-ink data-pressed:bg-selected data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
+		"data-pressed:active:overlay-sticker-medium"
+	]
+});
+//#endregion
+export { panelAction, panelToggleAction };