@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/sidebar/sidebar-item.mjs

@@ -0,0 +1,201 @@
+import { Badge } from "../badge/badge.mjs";
+import { sidebarItemRecipe } from "./sidebar-item.recipe.mjs";
+import { ThreadIcon } from "../icons/conversation-icons.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/sidebar/sidebar-item.tsx
+function SidebarItemRoot({ active = false, interactive = true, className, render, ...props }) {
+	const defaultProps = {
+		"data-slot": "sidebar-item",
+		"data-active": active ? "true" : void 0,
+		className,
+		...interactive ? { type: "button" } : {}
+	};
+	return useRender({
+		render: render ?? (interactive ? /* @__PURE__ */ jsx(Button, {}) : /* @__PURE__ */ jsx("div", {})),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItem({ className, wrap = false, tone = "default", interactive = true, ...props }) {
+	const { sidebarItem } = sidebarItemRecipe({
+		wrap,
+		interactive
+	});
+	return /* @__PURE__ */ jsx(SidebarItemRoot, {
+		"data-wrap": wrap ? "true" : void 0,
+		"data-tone": tone === "default" ? void 0 : tone,
+		interactive,
+		className: sidebarItem({ className }),
+		...props
+	});
+}
+function SidebarItemIcon({ className, render, ...props }) {
+	const { sidebarItemIcon } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-icon",
+		className: sidebarItemIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemChannelIcon({ className, render, ...props }) {
+	const { sidebarItemChannelIcon } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-channel-icon",
+		className: sidebarItemChannelIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemContent({ className, render, stacked, ...props }) {
+	const { sidebarItemContent } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-content",
+		className: sidebarItemContent({
+			className,
+			stacked
+		})
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemTitle({ className, render, ...props }) {
+	const { sidebarItemTitle } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-title",
+		className: sidebarItemTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemSubtitle({ className, render, ...props }) {
+	const { sidebarItemSubtitle } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-subtitle",
+		className: sidebarItemSubtitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemMeta({ className, render, ...props }) {
+	const { sidebarItemMeta } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-meta",
+		className: sidebarItemMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemStatus({ className, render, ...props }) {
+	const { sidebarItemStatus } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-status",
+		className: sidebarItemStatus({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemIndicator({ className, ...props }) {
+	const { sidebarItemIndicator } = sidebarItemRecipe();
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "sidebar-item-indicator",
+		className: sidebarItemIndicator({ className }),
+		...props
+	});
+}
+function SidebarItemMetaIcon({ className, render, ...props }) {
+	const { sidebarItemMetaIcon } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-meta-icon",
+		className: sidebarItemMetaIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemAside({ className, render, ...props }) {
+	const { sidebarItemAside } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-aside",
+		className: sidebarItemAside({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarItemCount({ className, ...props }) {
+	const { sidebarItemCount } = sidebarItemRecipe();
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "sidebar-item-count",
+		className: sidebarItemCount({ className }),
+		...props
+	});
+}
+/** The dot between the channel's own unread count and its thread count. */
+function SidebarItemCountSeparator({ className, render, ...props }) {
+	const { sidebarItemCountSeparator } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-count-separator",
+		"aria-hidden": true,
+		className: sidebarItemCountSeparator({ className }),
+		children: "·"
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* Thread segment of an unread count: a thread icon followed by the number of
+* threads with new replies. Works inside SidebarItemCount or as quiet text.
+*/
+function SidebarItemThreadCount({ children, className, label = "threads with new replies", render, ...props }) {
+	const { sidebarItemThreadCount } = sidebarItemRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-item-thread-count",
+		className: sidebarItemThreadCount({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(ThreadIcon, { strokeWidth: 1.75 }),
+			children,
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [" ", label]
+			})
+		] })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SidebarItem, SidebarItemAside, SidebarItemChannelIcon, SidebarItemContent, SidebarItemCount, SidebarItemCountSeparator, SidebarItemIcon, SidebarItemIndicator, SidebarItemMeta, SidebarItemMetaIcon, SidebarItemRoot, SidebarItemStatus, SidebarItemSubtitle, SidebarItemThreadCount, SidebarItemTitle };

package/dist/components/sidebar/sidebar-item.recipe.mjs

@@ -0,0 +1,100 @@
+import { tv } from "../../lib/tv.mjs";
+import { listCell, listCellStates } from "../../lib/list-cell.mjs";
+//#region src/components/sidebar/sidebar-item.recipe.ts
+const sidebarItemRecipe = tv({
+	slots: {
+		sidebarItem: [
+			"group/sidebar-item flex w-full items-center text-left",
+			listCell,
+			"h-[38px] gap-2 rounded-none border-0 py-0",
+			"md:py-0 md:[@media(max-height:600px)]:py-0",
+			"max-md:h-auto max-md:min-h-11 max-md:py-2.5",
+			"font-sans text-subhead font-medium text-foreground",
+			"max-md:text-body max-md:font-semibold",
+			"data-active:font-bold data-active:text-sticker-ink",
+			"data-active:before:bg-selected data-active:before:inset-ring-[1.5px] data-active:before:inset-ring-sticker-ink data-active:before:ring-[1.5px] data-active:before:ring-sticker-edge",
+			"not-data-active:data-[tone=muted]:text-foreground-muted not-data-active:data-[tone=away]:text-foreground-hint"
+		],
+		sidebarItemIcon: [
+			"flex shrink-0 items-center justify-center",
+			"[&>svg]:shrink-0",
+			"size-[19px] text-foreground-hint [&>svg]:size-4 [&>svg]:stroke-2",
+			"group-data-active/sidebar-item:text-sticker-ink"
+		],
+		sidebarItemChannelIcon: [
+			"flex shrink-0 items-center justify-center",
+			"[&_svg]:shrink-0",
+			"size-[19px] text-foreground-hint [&_svg]:size-4 [&_svg]:stroke-2",
+			"group-data-active/sidebar-item:text-sticker-ink"
+		],
+		sidebarItemContent: ["has-[>[data-slot=sidebar-item-meta-icon]]:items-center"],
+		sidebarItemTitle: ["block min-w-0 shrink truncate", "group-data-[tone=unread]/sidebar-item:font-bold"],
+		sidebarItemSubtitle: [
+			"block min-w-0 flex-1 truncate",
+			"shrink-1000 text-footnote font-normal text-foreground-muted",
+			"group-data-active/sidebar-item:text-sticker-ink"
+		],
+		sidebarItemMeta: [
+			"ml-auto shrink-0",
+			"font-mono text-mono-meta font-normal tabular-nums text-foreground-hint",
+			"group-data-active/sidebar-item:text-sticker-ink"
+		],
+		sidebarItemStatus: ["shrink-0", "inline-flex items-center"],
+		sidebarItemIndicator: [
+			"shrink-0 items-center justify-center gap-0",
+			"has-[svg]:px-0",
+			"[&_svg]:shrink-0 [&_svg]:translate-y-0",
+			"size-5 min-w-5 rounded-sticker border-0 p-0",
+			"bg-you text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
+			"[&_svg]:size-[13px] [&_svg]:stroke-2"
+		],
+		sidebarItemMetaIcon: [
+			"inline-flex size-4 shrink-0 items-center justify-center",
+			"[&_svg]:shrink-0",
+			"text-foreground-hint [&_svg]:size-3.5",
+			"group-data-active/sidebar-item:text-sticker-ink"
+		],
+		sidebarItemAside: ["flex shrink-0 items-center gap-1"],
+		sidebarItemCount: [
+			"shrink-0",
+			"h-5 min-w-5 items-center justify-center gap-0 rounded-sticker border-0 px-1.5 py-0",
+			"data-[slot=sidebar-item-count]:px-1.5",
+			"bg-attention text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
+			"font-mono text-mono-meta font-bold tabular-nums tracking-normal"
+		],
+		sidebarItemCountSeparator: ["mx-0.5 opacity-60"],
+		sidebarItemThreadCount: ["inline-flex items-center gap-0.5", "[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:translate-y-0"]
+	},
+	variants: {
+		interactive: {
+			true: { sidebarItem: [
+				listCellStates,
+				"data-active:active:before:overlay-sticker-medium",
+				"not-data-active:focus-visible:keyboard:before:inset-ring-2 not-data-active:focus-visible:keyboard:before:inset-ring-foreground",
+				"data-active:focus-visible:keyboard:before:shadow-[inset_0_0_0_3.5px_var(--foreground)]"
+			] },
+			false: { sidebarItem: "cursor-default" }
+		},
+		wrap: {
+			false: {},
+			true: { sidebarItem: [
+				"h-auto items-start whitespace-normal",
+				"min-h-[38px] py-[9px] md:py-[9px] md:[@media(max-height:600px)]:py-[9px]",
+				"**:data-[slot=sidebar-item-channel-icon]:h-lh **:data-[slot=sidebar-item-icon]:h-lh",
+				"**:data-[slot=sidebar-item-meta-icon]:h-lh",
+				"*:data-[slot=avatar]:mt-[calc((1lh-19px)/2)]"
+			] }
+		},
+		stacked: {
+			false: { sidebarItemContent: "min-w-0 flex flex-1 items-baseline gap-1 text-left" },
+			true: { sidebarItemContent: ["min-w-0 flex-1 text-left"] }
+		}
+	},
+	defaultVariants: {
+		interactive: true,
+		wrap: false,
+		stacked: false
+	}
+});
+//#endregion
+export { sidebarItemRecipe };

package/dist/components/sidebar/sidebar-menu.d.mts

@@ -0,0 +1,13 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/sidebar/sidebar-menu.d.ts
+export type SidebarMenuProps = useRender.ComponentProps<"button">;
+export declare function SidebarMenu({ className, render, ...props }: SidebarMenuProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarMenuIconProps = useRender.ComponentProps<"span">;
+export declare function SidebarMenuIcon({ className, render, ...props }: SidebarMenuIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarMenuTitleProps = useRender.ComponentProps<"span">;
+export declare function SidebarMenuTitle({ className, render, ...props }: SidebarMenuTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarMenuAsideProps = useRender.ComponentProps<"span">;
+export declare function SidebarMenuAside({ className, render, ...props }: SidebarMenuAsideProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarMenuCountProps = useRender.ComponentProps<"span">;
+export declare function SidebarMenuCount({ className, render, ...props }: SidebarMenuCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/sidebar/sidebar-menu.mjs

@@ -0,0 +1,67 @@
+import { sidebarMenuRecipe } from "./sidebar-menu.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/sidebar/sidebar-menu.tsx
+function SidebarMenu({ className, render, ...props }) {
+	const { sidebarMenu } = sidebarMenuRecipe();
+	const defaultProps = {
+		type: "button",
+		"data-slot": "sidebar-menu",
+		className: sidebarMenu({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarMenuIcon({ className, render, ...props }) {
+	const { sidebarMenuIcon } = sidebarMenuRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-menu-icon",
+		className: sidebarMenuIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarMenuTitle({ className, render, ...props }) {
+	const { sidebarMenuTitle } = sidebarMenuRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-menu-title",
+		className: sidebarMenuTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarMenuAside({ className, render, ...props }) {
+	const { sidebarMenuAside } = sidebarMenuRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-menu-aside",
+		className: sidebarMenuAside({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarMenuCount({ className, render, ...props }) {
+	const { sidebarMenuCount } = sidebarMenuRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-menu-count",
+		className: sidebarMenuCount({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SidebarMenu, SidebarMenuAside, SidebarMenuCount, SidebarMenuIcon, SidebarMenuTitle };

package/dist/components/sidebar/sidebar-menu.recipe.mjs

@@ -0,0 +1,22 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/sidebar/sidebar-menu.recipe.ts
+const sidebarMenuRecipe = tv({ slots: {
+	sidebarMenu: [
+		"flex min-w-0 flex-1 items-center",
+		"h-auto gap-1.5 rounded-sticker",
+		"font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint",
+		"hover:text-foreground aria-[current=page]:text-foreground",
+		"outline-none focus-visible:shadow-focus"
+	],
+	sidebarMenuIcon: [
+		"flex shrink-0 items-center justify-center",
+		"[&_svg]:shrink-0",
+		"[&_svg]:[vector-effect:non-scaling-stroke] [&_svg_*]:[vector-effect:non-scaling-stroke]",
+		"size-3.5 [&_svg]:size-3.5 [&_svg]:stroke-2 [&_svg_*]:stroke-2"
+	],
+	sidebarMenuTitle: ["min-w-0 truncate"],
+	sidebarMenuAside: ["flex shrink-0 items-center gap-1"],
+	sidebarMenuCount: ["font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"]
+} });
+//#endregion
+export { sidebarMenuRecipe };

package/dist/components/sidebar/sidebar-section.d.mts

@@ -0,0 +1,41 @@
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { StatusProps } from "../status/status.mjs";
+import "../status/index.mjs";
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/sidebar/sidebar-section.d.ts
+export type SidebarSectionProps = Omit<ComponentProps<typeof Collapsible.Root>, "className"> & {
+  className?: string;
+};
+export declare function SidebarSection({ className, defaultOpen, render, ...props }: SidebarSectionProps): import("react").JSX.Element;
+export type SidebarListProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
+  className?: string;
+};
+export declare function SidebarList({ className, render, ...props }: SidebarListProps): import("react").JSX.Element;
+export type SidebarSectionEmptyProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
+  className?: string;
+};
+export declare function SidebarSectionEmpty({ className, render, ...props }: SidebarSectionEmptyProps): import("react").JSX.Element;
+export type SidebarSectionHeaderProps = useRender.ComponentProps<"div">;
+export declare function SidebarSectionHeader({ className, render, ...props }: SidebarSectionHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSectionDisclosureProps = useRender.ComponentProps<"button">;
+export declare function SidebarSectionDisclosure({ className, render, ...props }: SidebarSectionDisclosureProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSectionChevronProps = useRender.ComponentProps<"svg">;
+export declare function SidebarSectionChevron({ className, render, ...props }: SidebarSectionChevronProps): import("react").JSX.Element;
+export type SidebarSectionTitleProps = useRender.ComponentProps<"span">;
+export declare function SidebarSectionTitle({ className, render, ...props }: SidebarSectionTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSectionCountProps = useRender.ComponentProps<"span">;
+export declare function SidebarSectionCount({ className, render, ...props }: SidebarSectionCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSectionAttentionProps = StatusProps;
+export declare function SidebarSectionAttention({ className, size, variant, ...props }: SidebarSectionAttentionProps): import("react").JSX.Element;
+export type SidebarSectionTrailingProps = useRender.ComponentProps<"div">;
+export type SidebarSectionControlsProps = useRender.ComponentProps<"div">;
+export declare function SidebarSectionTrailing({ className, render, ...props }: SidebarSectionTrailingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function SidebarSectionControls({ className, render, ...props }: SidebarSectionControlsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSectionControlProps = useRender.ComponentProps<"button"> & Pick<ButtonProps, "size" | "variant" | "loading" | "loadingLabel">;
+export declare function SidebarSectionControl({ className, render, size, variant, loading, loadingLabel, children, disabled, ...props }: SidebarSectionControlProps): import("react").JSX.Element;
+export type SidebarControlProps = SidebarSectionControlProps;
+export declare const SidebarControl: typeof SidebarSectionControl;
+//#endregion

package/dist/components/sidebar/sidebar-section.mjs

@@ -0,0 +1,164 @@
+import { cn } from "../../cn.mjs";
+import { Button } from "../button/button.mjs";
+import { Status } from "../status/status.mjs";
+import { sidebarSectionRecipe } from "./sidebar-section.recipe.mjs";
+import { ChevronRight } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/sidebar/sidebar-section.tsx
+function SidebarSection({ className, defaultOpen = true, render, ...props }) {
+	const { sidebarSection } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section",
+		defaultOpen,
+		className: sidebarSection({ className })
+	};
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		render: render ?? /* @__PURE__ */ jsx("section", {}),
+		...mergeProps(defaultProps, props)
+	});
+}
+function SidebarList({ className, render, ...props }) {
+	const { sidebarList } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-list",
+		className: sidebarList({ className })
+	};
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		render,
+		...mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionEmpty({ className, render, ...props }) {
+	const { sidebarSectionEmpty } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section-empty",
+		className: sidebarSectionEmpty({ className })
+	};
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		render,
+		...mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionHeader({ className, render, ...props }) {
+	const { sidebarSectionHeader } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section-header",
+		className: sidebarSectionHeader({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionDisclosure({ className, render, ...props }) {
+	const { sidebarSectionDisclosure } = sidebarSectionRecipe();
+	const defaultProps = {
+		type: "button",
+		"data-slot": "sidebar-section-disclosure",
+		className: sidebarSectionDisclosure({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionChevron({ className, render, ...props }) {
+	const defaultProps = {
+		"data-slot": "sidebar-section-chevron",
+		className: cn("size-3", className)
+	};
+	const chevron = useRender({
+		render: render ?? /* @__PURE__ */ jsx(ChevronRight, {}),
+		props: mergeProps(defaultProps, props)
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-4.5 shrink-0 items-center justify-center",
+		"aria-hidden": "true",
+		children: chevron
+	});
+}
+function SidebarSectionTitle({ className, render, ...props }) {
+	const { sidebarSectionTitle } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section-title",
+		className: sidebarSectionTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionCount({ className, render, ...props }) {
+	const { sidebarSectionCount } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section-count",
+		className: sidebarSectionCount({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionAttention({ className, size = "md", variant, ...props }) {
+	const { sidebarSectionAttention } = sidebarSectionRecipe();
+	const resolvedVariant = variant ?? "accent";
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "sidebar-section-attention",
+		className: sidebarSectionAttention(),
+		children: /* @__PURE__ */ jsx(Status, {
+			size,
+			variant: resolvedVariant,
+			className,
+			...props
+		})
+	});
+}
+function SidebarSectionTrailing({ className, render, ...props }) {
+	const { sidebarSectionTrailing } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section-trailing",
+		className: sidebarSectionTrailing({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionControls({ className, render, ...props }) {
+	const { sidebarSectionControls } = sidebarSectionRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-section-controls",
+		className: sidebarSectionControls({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarSectionControl({ className, render, size = "icon-md", variant = "ghost", loading = false, loadingLabel = "Loading", children, disabled, ...props }) {
+	const { sidebarSectionControl } = sidebarSectionRecipe();
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "sidebar-section-control",
+		size,
+		variant,
+		loading,
+		loadingLabel,
+		disabled,
+		className: sidebarSectionControl({ className }),
+		render,
+		...props,
+		children
+	});
+}
+const SidebarControl = SidebarSectionControl;
+//#endregion
+export { SidebarControl, SidebarList, SidebarSection, SidebarSectionAttention, SidebarSectionChevron, SidebarSectionControl, SidebarSectionControls, SidebarSectionCount, SidebarSectionDisclosure, SidebarSectionEmpty, SidebarSectionHeader, SidebarSectionTitle, SidebarSectionTrailing };

package/dist/components/sidebar/sidebar-section.recipe.mjs

@@ -0,0 +1,45 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/sidebar/sidebar-section.recipe.ts
+const sidebarSectionRecipe = tv({ slots: {
+	sidebarSection: ["group/section", "px-0"],
+	sidebarList: ["flex flex-col gap-0.5 py-2"],
+	sidebarSectionEmpty: [
+		"px-5 py-2",
+		"font-sans text-footnote",
+		"text-foreground-hint"
+	],
+	sidebarSectionHeader: [
+		"flex items-center justify-between",
+		"group/section-header",
+		"my-0  h-auto gap-2 px-5 pt-4 pb-0"
+	],
+	sidebarSectionDisclosure: [
+		"flex min-w-0 flex-1 items-center",
+		"**:data-[slot=sidebar-section-chevron]:transition-transform",
+		"[&[data-panel-open]_[data-slot=sidebar-section-chevron]]:rotate-90",
+		"h-auto gap-1.5 rounded-sticker border-0",
+		"font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint",
+		"outline-none focus-visible:shadow-focus",
+		"**:data-[slot=sidebar-section-chevron]:size-3.5 **:data-[slot=sidebar-section-chevron]:stroke-2"
+	],
+	sidebarSectionTitle: ["min-w-0 truncate"],
+	sidebarSectionCount: ["font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"],
+	sidebarSectionAttention: [
+		"inline-flex min-w-4.5 shrink-0 items-center justify-center",
+		"group-data-open/section:hidden",
+		"group-data-popup-open/section-header:hidden",
+		"group-hover/section-header:hidden"
+	],
+	sidebarSectionTrailing: ["relative flex min-w-4.5 shrink-0 items-center justify-end"],
+	sidebarSectionControls: [
+		"flex shrink-0 items-center gap-1",
+		"pointer-events-none absolute top-1/2 right-0 -translate-y-1/2 opacity-0",
+		"not-pointer-fine:static not-pointer-fine:pointer-events-auto not-pointer-fine:translate-y-0 not-pointer-fine:opacity-100",
+		"pointer-fine:group-hover/section-header:pointer-events-auto pointer-fine:group-hover/section-header:opacity-100",
+		"pointer-fine:focus-within:pointer-events-auto pointer-fine:focus-within:opacity-100",
+		"pointer-fine:has-data-popup-open:pointer-events-auto pointer-fine:has-data-popup-open:opacity-100"
+	],
+	sidebarSectionControl: ["flex h-7 w-auto min-w-7 shrink-0 items-center justify-center p-0 -my-1.5", "[&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4"]
+} });
+//#endregion
+export { sidebarSectionRecipe };

package/dist/components/sidebar/sidebar.d.mts

@@ -0,0 +1,17 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/sidebar/sidebar.d.ts
+export type SidebarRootProps = useRender.ComponentProps<"div">;
+export declare function SidebarRoot({ className, render, ...props }: SidebarRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarHeaderProps = useRender.ComponentProps<"div">;
+export declare function SidebarHeader({ children, className, render, ...props }: SidebarHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarHeaderTitleProps = useRender.ComponentProps<"div">;
+export declare function SidebarHeaderTitle({ className, render, ...props }: SidebarHeaderTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarGroupLabelProps = useRender.ComponentProps<"div">;
+export declare function SidebarGroupLabel({ className, render, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarBodyProps = useRender.ComponentProps<"div">;
+export declare function SidebarBody({ className, render, ...props }: SidebarBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarContentProps = useRender.ComponentProps<"div">;
+export declare function SidebarContent({ children, className, render, ...props }: SidebarContentProps): import("react").JSX.Element;
+export type SidebarLiveActivityProps = useRender.ComponentProps<"div">;
+export declare function SidebarLiveActivity({ children, className, render, ...props }: SidebarLiveActivityProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion