@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/select/select.mjs

@@ -0,0 +1,483 @@
+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 { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
+import { Check, ChevronDown } from "lucide-react";
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select.tsx
+const select = tv({
+	slots: {
+		trigger: [
+			"inline-flex select-none items-center justify-between",
+			"outline-none transition-colors",
+			"data-invalid:focus-visible:ring-[color-mix(in_oklch,var(--danger)_60%,transparent)]",
+			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
+			"[&>span[data-slot='select-trigger-content']]:min-w-0 [&>span[data-slot='select-trigger-content']]:flex-1",
+			"[&_[data-slot='select-trigger-content']_svg]:shrink-0",
+			"h-control w-full gap-2 pr-3 pl-3.5",
+			"border-[1.5px] border-line-field",
+			"hover:bg-none",
+			"text-subhead font-semibold text-foreground",
+			"data-placeholder:font-medium data-placeholder:text-foreground-hint",
+			"data-invalid:border-danger-strong data-invalid:hover:border-danger-strong",
+			"data-invalid:focus-visible:border-danger-strong data-invalid:focus-visible:ring-0",
+			"[&_[data-slot='select-trigger-content']_svg:not([class*='size-'])]:size-4",
+			"[&_[data-slot='select-trigger-content']_svg:not([class*='stroke-'])]:stroke-2"
+		],
+		icon: [
+			"ml-auto flex shrink-0 items-center justify-center transition-transform",
+			"[&>svg]:shrink-0",
+			"text-foreground-hint opacity-100",
+			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
+		],
+		value: ["flex min-w-0 flex-1 truncate text-left"],
+		positioner: ["isolate z-50 outline-none"],
+		content: [
+			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
+			"outline-none",
+			"rounded-container bg-layer-popover p-1 text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-6", "flex flex-col"],
+		item: [
+			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
+			"text-left outline-none transition-colors",
+			"min-h-option flex-wrap gap-x-2.5 gap-y-0.5 rounded-chip px-2.5 py-option-inset",
+			"text-callout font-medium text-foreground",
+			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
+			"data-selected:font-bold data-selected:**:data-[slot='select-item-text']:font-bold",
+			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+			"[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-foreground-muted",
+			"[&>svg:not([class*='size-'])]:size-4",
+			"[&>svg:not([class*='stroke-'])]:stroke-2"
+		],
+		actionItem: [
+			"flex w-full shrink-0 cursor-default select-none items-center gap-2.5 overflow-hidden",
+			"text-left outline-none transition-colors",
+			"min-h-option rounded-chip px-2.5 py-option-inset",
+			"text-callout font-medium text-foreground-muted",
+			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
+			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+			"[&>svg]:pointer-events-none [&>svg]:shrink-0",
+			"[&>svg:not([class*='size-'])]:size-4",
+			"[&>svg:not([class*='stroke-'])]:stroke-2"
+		],
+		itemLeading: [
+			"flex shrink-0 items-center justify-center",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"size-4 text-foreground-muted",
+			"[&>svg]:pointer-events-none [&>svg]:shrink-0",
+			"[&>svg:not([class*='size-'])]:size-4",
+			"[&>svg:not([class*='stroke-'])]:stroke-2"
+		],
+		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "text-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2"],
+		itemText: ["min-w-0 flex-1 line-clamp-2 wrap-anywhere"],
+		itemDescription: [
+			"order-last min-w-0 basis-full wrap-anywhere",
+			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+(--spacing(2.5)))]",
+			"font-sans text-caption font-normal text-foreground-hint"
+		],
+		label: ["m-0", "font-sans text-footnote font-semibold text-foreground-muted"],
+		group: ["flex flex-col"],
+		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
+		separator: ["h-px shrink-0 border-0", "-mx-1 my-1 bg-line-hairline"],
+		scrollArrow: [
+			"absolute inset-x-0 z-10 flex h-6 w-full cursor-default items-center justify-center",
+			"outline-none transition-colors",
+			"data-[direction=up]:top-0 data-[direction=down]:bottom-0",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"bg-layer-popover text-foreground-hint"
+		],
+		empty: ["px-2.5 py-2 text-left text-callout text-foreground-hint"]
+	},
+	variants: { chrome: {
+		default: {},
+		field: {
+			trigger: [
+				"px-3 text-field font-field",
+				"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
+				"h-control py-0",
+				"data-placeholder:font-field"
+			],
+			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],
+			actionItem: ["text-field font-field"]
+		}
+	} },
+	defaultVariants: { chrome: "default" }
+});
+/**
+* Declared once on the root and read by both the trigger and the popup.
+*
+* The popup renders through a portal, so it has no DOM ancestor in common with
+* its trigger. React context follows the component tree rather than the DOM,
+* so both ends read one source instead of each resolving its own — which is
+* what lets a Select keep the same typography whether its content mounts at the
+* document root or into a `portalProps.container`.
+*
+* Deliberately NOT a prop on the trigger and another on the content: that shape
+* asks every callsite to restate the decision, which is exactly the duplication
+* this variant exists to remove.
+*/
+const SelectChromeContext = createContext("default");
+function useSelectChrome() {
+	return useContext(SelectChromeContext);
+}
+/**
+* The value a `SelectActionItem` gives Base UI, so the row joins the list's
+* navigation and typeahead like any item. The root recognises it and never lets
+* it become the value: a list action changes what the list shows, never what is
+* chosen.
+*/
+var SelectActionValue = class {
+	onActionRef;
+	closeOnActionRef;
+	constructor(onActionRef, closeOnActionRef) {
+		this.onActionRef = onActionRef;
+		this.closeOnActionRef = closeOnActionRef;
+	}
+};
+function findActionValue(value) {
+	if (value instanceof SelectActionValue) return value;
+	if (Array.isArray(value)) return value.find((entry) => entry instanceof SelectActionValue);
+}
+/**
+* Base UI keeps the highlight by position. When an action adds items above its
+* row, the same position then holds another item while focus stays on the row,
+* and the next arrow key starts from the wrong place. Once the list has
+* re-rendered, focus the list and then the row again: the row's focus handler
+* re-reads its position and moves the highlight back to it.
+*/
+function keepActionHighlighted(event) {
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const row = target.closest("[data-slot=\"select-action-item\"]");
+	if (!row) return;
+	requestAnimationFrame(() => {
+		if (!row.isConnected || row.hasAttribute("data-highlighted")) return;
+		row.closest("[role=\"listbox\"]")?.focus({ preventScroll: true });
+		row.focus({ preventScroll: true });
+	});
+}
+function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {
+	const pendingActionClose = useRef(void 0);
+	const handleValueChange = useCallback((next, details) => {
+		const action = findActionValue(next);
+		if (!action) {
+			pendingActionClose.current = void 0;
+			onValueChange?.(next, details);
+			return;
+		}
+		details.cancel();
+		if (details.reason !== "item-press") return;
+		pendingActionClose.current = action.closeOnActionRef.current;
+		action.onActionRef.current?.(details.event);
+		if (!action.closeOnActionRef.current) keepActionHighlighted(details.event);
+	}, [onValueChange]);
+	const handleOpenChange = useCallback((open, details) => {
+		const closeOnAction = pendingActionClose.current;
+		pendingActionClose.current = void 0;
+		if (!open && details.reason === "item-press" && closeOnAction === false) {
+			details.cancel();
+			return;
+		}
+		onOpenChange?.(open, details);
+	}, [onOpenChange]);
+	const handleItemEquality = useMemo(() => isItemEqualToValue && ((item, value) => item instanceof SelectActionValue || value instanceof SelectActionValue ? Object.is(item, value) : isItemEqualToValue(item, value)), [isItemEqualToValue]);
+	const handleStringLabel = useMemo(() => itemToStringLabel && ((item) => item instanceof SelectActionValue ? "" : itemToStringLabel(item)), [itemToStringLabel]);
+	const handleStringValue = useMemo(() => itemToStringValue && ((item) => item instanceof SelectActionValue ? "" : itemToStringValue(item)), [itemToStringValue]);
+	return /* @__PURE__ */ jsx(SelectChromeContext, {
+		value: chrome,
+		children: /* @__PURE__ */ jsx(Select.Root, {
+			"data-slot": "select",
+			"data-chrome": chrome,
+			onValueChange: handleValueChange,
+			onOpenChange: handleOpenChange,
+			isItemEqualToValue: handleItemEquality,
+			itemToStringLabel: handleStringLabel,
+			itemToStringValue: handleStringValue,
+			...props
+		})
+	});
+}
+function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }) {
+	const chrome = useSelectChrome();
+	const { trigger } = select({ chrome });
+	return /* @__PURE__ */ jsx(Select.Trigger, {
+		"data-slot": "select-trigger",
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "md",
+			className: trigger({ className })
+		}),
+		...props,
+		"data-invalid": dataInvalid || void 0,
+		"aria-invalid": dataInvalid ? "true" : void 0,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "select-trigger-content",
+			"data-picker-trigger-content": "select",
+			className: "flex min-w-0 flex-1 items-center gap-1.5",
+			children
+		})
+	});
+}
+function SelectValue({ className, ref, title, ...props }) {
+	const { value } = select();
+	const overflowRef = useOverflowTitle(ref, title);
+	return /* @__PURE__ */ jsx(Select.Value, {
+		ref: overflowRef,
+		title,
+		"data-slot": "select-value",
+		className: value({ className }),
+		...props
+	});
+}
+function SelectIcon({ className, children, ...props }) {
+	const { icon } = select();
+	return /* @__PURE__ */ jsx(Select.Icon, {
+		"data-slot": "select-icon",
+		"data-picker-trigger-indicator": "",
+		className: icon({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		})
+	});
+}
+function SelectPortal(props) {
+	return /* @__PURE__ */ jsx(Select.Portal, {
+		"data-slot": "select-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function SelectPopup({ className, ...props }) {
+	const { content } = select();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-content",
+		className: content({ className }),
+		...props
+	});
+}
+function SelectFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+	return /* @__PURE__ */ jsx(Select.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function SelectContent({ align = "start", alignItemWithTrigger = false, alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+	const { positioner, content } = select();
+	const positionerNode = /* @__PURE__ */ jsx(SelectFramePositioner, {
+		align,
+		alignItemWithTrigger,
+		alignOffset,
+		anchor,
+		arrowPadding,
+		collisionAvoidance,
+		collisionBoundary,
+		collisionPadding,
+		container: portalProps?.container,
+		disableAnchorTracking,
+		positionMethod,
+		side,
+		sideOffset: sideOffset ?? 4,
+		sticky,
+		className: positioner(),
+		children: /* @__PURE__ */ jsx(Select.Popup, {
+			"data-slot": "select-content",
+			className: content({ className }),
+			...props
+		})
+	});
+	return /* @__PURE__ */ jsx(SelectPortal, {
+		...portalProps,
+		children: positionerNode
+	});
+}
+function SelectList({ className, ...props }) {
+	const { list } = select();
+	return /* @__PURE__ */ jsx(Select.List, {
+		"data-slot": "select-list",
+		className: list({ className }),
+		...props
+	});
+}
+const SelectItemPartsContext = createContext(null);
+function SelectItem({ className, ...props }) {
+	const chrome = useSelectChrome();
+	const { item } = select({ chrome });
+	const [textId, setTextId] = useState();
+	const [descriptionId, setDescriptionId] = useState();
+	const parts = useMemo(() => ({
+		setTextId,
+		setDescriptionId
+	}), []);
+	return /* @__PURE__ */ jsx(SelectItemPartsContext.Provider, {
+		value: parts,
+		children: /* @__PURE__ */ jsx(Select.Item, {
+			"data-slot": "select-item",
+			className: item({ className }),
+			"aria-labelledby": descriptionId && textId ? textId : void 0,
+			"aria-describedby": descriptionId,
+			...props
+		})
+	});
+}
+function SelectItemLeading({ className, ...props }) {
+	const { itemLeading } = select();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "select-item-leading",
+		className: itemLeading({ className }),
+		...props
+	});
+}
+function SelectItemIndicator({ className, children, ...props }) {
+	const { itemIndicator } = select();
+	const defaultIndicator = /* @__PURE__ */ jsx(Check, {
+		"aria-hidden": true,
+		className: "size-3 shrink-0"
+	});
+	return /* @__PURE__ */ jsx(Select.ItemIndicator, {
+		"data-slot": "select-item-indicator",
+		className: itemIndicator({ className }),
+		...props,
+		children: children ?? defaultIndicator
+	});
+}
+function SelectItemText({ className, id, ref, title, ...props }) {
+	const { itemText } = select();
+	const overflowRef = useOverflowTitle(ref, title);
+	const generatedId = useId();
+	const textId = id ?? generatedId;
+	const setTextId = useContext(SelectItemPartsContext)?.setTextId;
+	useLayoutEffect(() => {
+		setTextId?.(textId);
+		return () => setTextId?.(void 0);
+	}, [setTextId, textId]);
+	return /* @__PURE__ */ jsx(Select.ItemText, {
+		ref: overflowRef,
+		title,
+		id: textId,
+		"data-slot": "select-item-text",
+		className: itemText({ className }),
+		...props
+	});
+}
+/**
+* A second line under an option's label: what it means, not its name again.
+* It sits beside `SelectItemText`, not inside it, so the selected value in the
+* trigger stays the label alone. The option grows to fit it.
+*/
+function SelectItemDescription({ className, id, ...props }) {
+	const { itemDescription } = select();
+	const generatedId = useId();
+	const descriptionId = id ?? generatedId;
+	const setDescriptionId = useContext(SelectItemPartsContext)?.setDescriptionId;
+	useLayoutEffect(() => {
+		setDescriptionId?.(descriptionId);
+		return () => setDescriptionId?.(void 0);
+	}, [setDescriptionId, descriptionId]);
+	return /* @__PURE__ */ jsx("span", {
+		id: descriptionId,
+		"data-slot": "select-item-description",
+		className: itemDescription({ className }),
+		...props
+	});
+}
+/**
+* An action row inside the list, placed last after a `SelectSeparator`, such as
+* Show All. It is reached by the arrow keys and typeahead like an item, but
+* pressing it runs `onAction` instead of choosing a value. It is an option to
+* assistive technology, so it takes no `aria-expanded`: its label says what it
+* does.
+*/
+function SelectActionItem({ className, onAction, closeOnAction = false, ...props }) {
+	const chrome = useSelectChrome();
+	const { actionItem } = select({ chrome });
+	const onActionRef = useRef(onAction);
+	const closeOnActionRef = useRef(closeOnAction);
+	useLayoutEffect(() => {
+		onActionRef.current = onAction;
+		closeOnActionRef.current = closeOnAction;
+	}, [onAction, closeOnAction]);
+	const [value] = useState(() => new SelectActionValue(onActionRef, closeOnActionRef));
+	return /* @__PURE__ */ jsx(Select.Item, {
+		"data-slot": "select-action-item",
+		className: actionItem({ className }),
+		value,
+		...props
+	});
+}
+function SelectLabel({ className, ...props }) {
+	const { label } = select();
+	return /* @__PURE__ */ jsx(Select.Label, {
+		"data-slot": "select-label",
+		className: label({ className }),
+		...props
+	});
+}
+function SelectGroup({ className, ...props }) {
+	const { group } = select();
+	return /* @__PURE__ */ jsx(Select.Group, {
+		"data-slot": "select-group",
+		className: group({ className }),
+		...props
+	});
+}
+function SelectGroupLabel({ className, ...props }) {
+	const { groupLabel } = select();
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		"data-slot": "select-group-label",
+		className: groupLabel({ className }),
+		...props
+	});
+}
+function SelectSeparator({ className, ...props }) {
+	const { separator } = select();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "select-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function SelectScrollUpArrow({ className, children, ...props }) {
+	const { scrollArrow } = select();
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-arrow",
+		"data-direction": "up",
+		className: scrollArrow({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0 rotate-180"
+		})
+	});
+}
+function SelectScrollDownArrow({ className, children, ...props }) {
+	const { scrollArrow } = select();
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-arrow",
+		"data-direction": "down",
+		className: scrollArrow({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		})
+	});
+}
+function SelectArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Arrow, {
+		"data-slot": "select-arrow",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectActionItem, SelectArrow, SelectContent, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemDescription, SelectItemIndicator, SelectItemLeading, SelectItemText, SelectLabel, SelectList, SelectPopup, SelectPortal, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, useSelectChrome };

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

@@ -0,0 +1,2 @@
+import { Separator, SeparatorProps } from "./separator.mjs";
+export { Separator, type SeparatorProps };

package/dist/components/separator/separator.d.mts

@@ -0,0 +1,10 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ReactNode } from "react";
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/separator/separator.d.ts
+export type SeparatorProps = StyledProps<Separator.Props> & {
+  children?: ReactNode;
+};
+declare function Separator$1({ children, className, orientation, ...props }: SeparatorProps): import("react").JSX.Element;
+//#endregion
+export { Separator$1 as Separator };

package/dist/components/separator/separator.mjs

@@ -0,0 +1,49 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+//#region src/components/separator/separator.tsx
+const separator = tv({ slots: {
+	root: [
+		"shrink-0",
+		"data-[orientation=horizontal]:w-full",
+		"data-[orientation=vertical]:self-stretch",
+		"bg-line-hairline",
+		"data-[orientation=horizontal]:h-px",
+		"data-[orientation=vertical]:w-px"
+	],
+	labeledRoot: ["grid grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 py-3"],
+	labeledLine: ["w-full shrink-0", "h-px bg-line-hairline"],
+	labeledContent: ["min-w-0", "font-sans text-footnote font-semibold text-foreground-hint"]
+} });
+function Separator$1({ children, className, orientation = "horizontal", ...props }) {
+	const { labeledContent, labeledLine, labeledRoot, root } = separator();
+	if (children != null && orientation === "horizontal") return /* @__PURE__ */ jsxs(Separator, {
+		"data-slot": "separator",
+		orientation,
+		className: labeledRoot({ className }),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: labeledLine()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "separator-content",
+				className: labeledContent(),
+				children
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: labeledLine()
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		orientation,
+		className: root({ className }),
+		...props
+	});
+}
+//#endregion
+export { Separator$1 as Separator };

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

@@ -0,0 +1,5 @@
+import { SidebarBody, SidebarBodyProps, SidebarContent, SidebarContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarHeaderProps, SidebarHeaderTitle, SidebarHeaderTitleProps, SidebarLiveActivity, SidebarLiveActivityProps, SidebarRoot, SidebarRootProps } from "./sidebar.mjs";
+import { SidebarMenu, SidebarMenuAside, SidebarMenuAsideProps, SidebarMenuCount, SidebarMenuCountProps, SidebarMenuIcon, SidebarMenuIconProps, SidebarMenuProps, SidebarMenuTitle, SidebarMenuTitleProps } from "./sidebar-menu.mjs";
+import { SidebarItem, SidebarItemAside, SidebarItemAsideProps, SidebarItemChannelIcon, SidebarItemChannelIconProps, SidebarItemContent, SidebarItemContentProps, SidebarItemCount, SidebarItemCountProps, SidebarItemCountSeparator, SidebarItemCountSeparatorProps, SidebarItemIcon, SidebarItemIconProps, SidebarItemIndicator, SidebarItemIndicatorProps, SidebarItemMeta, SidebarItemMetaIcon, SidebarItemMetaIconProps, SidebarItemMetaProps, SidebarItemProps, SidebarItemStatus, SidebarItemStatusProps, SidebarItemSubtitle, SidebarItemSubtitleProps, SidebarItemThreadCount, SidebarItemThreadCountProps, SidebarItemTitle, SidebarItemTitleProps } from "./sidebar-item.mjs";
+import { SidebarControl, SidebarControlProps, SidebarList, SidebarListProps, SidebarSection, SidebarSectionAttention, SidebarSectionAttentionProps, SidebarSectionChevron, SidebarSectionChevronProps, SidebarSectionControl, SidebarSectionControlProps, SidebarSectionControls, SidebarSectionControlsProps, SidebarSectionCount, SidebarSectionCountProps, SidebarSectionDisclosure, SidebarSectionDisclosureProps, SidebarSectionEmpty, SidebarSectionEmptyProps, SidebarSectionHeader, SidebarSectionHeaderProps, SidebarSectionProps, SidebarSectionTitle, SidebarSectionTitleProps, SidebarSectionTrailing, SidebarSectionTrailingProps } from "./sidebar-section.mjs";
+export { SidebarBody, type SidebarBodyProps, SidebarContent, type SidebarContentProps, SidebarControl, type SidebarControlProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, type SidebarHeaderProps, SidebarHeaderTitle, type SidebarHeaderTitleProps, SidebarItem, SidebarItemAside, type SidebarItemAsideProps, SidebarItemChannelIcon, type SidebarItemChannelIconProps, SidebarItemContent, type SidebarItemContentProps, SidebarItemCount, type SidebarItemCountProps, SidebarItemCountSeparator, type SidebarItemCountSeparatorProps, SidebarItemIcon, type SidebarItemIconProps, SidebarItemIndicator, type SidebarItemIndicatorProps, SidebarItemMeta, SidebarItemMetaIcon, type SidebarItemMetaIconProps, type SidebarItemMetaProps, type SidebarItemProps, SidebarItemStatus, type SidebarItemStatusProps, SidebarItemSubtitle, type SidebarItemSubtitleProps, SidebarItemThreadCount, type SidebarItemThreadCountProps, SidebarItemTitle, type SidebarItemTitleProps, SidebarList, type SidebarListProps, SidebarLiveActivity, type SidebarLiveActivityProps, SidebarMenu, SidebarMenuAside, type SidebarMenuAsideProps, SidebarMenuCount, type SidebarMenuCountProps, SidebarMenuIcon, type SidebarMenuIconProps, type SidebarMenuProps, SidebarMenuTitle, type SidebarMenuTitleProps, SidebarRoot, type SidebarRootProps, SidebarSection, SidebarSectionAttention, type SidebarSectionAttentionProps, SidebarSectionChevron, type SidebarSectionChevronProps, SidebarSectionControl, type SidebarSectionControlProps, SidebarSectionControls, type SidebarSectionControlsProps, SidebarSectionCount, type SidebarSectionCountProps, SidebarSectionDisclosure, type SidebarSectionDisclosureProps, SidebarSectionEmpty, type SidebarSectionEmptyProps, SidebarSectionHeader, type SidebarSectionHeaderProps, type SidebarSectionProps, SidebarSectionTitle, type SidebarSectionTitleProps, SidebarSectionTrailing, type SidebarSectionTrailingProps };

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

@@ -0,0 +1,64 @@
+import { RowTone } from "../../lib/row-tone.mjs";
+import { BadgeProps } from "../badge/badge.mjs";
+import "../badge/index.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/sidebar/sidebar-item.d.ts
+export type SidebarItemRootProps = useRender.ComponentProps<"button"> & {
+  active?: boolean;
+  /** `false` renders a display-only `div`: no button, no type, nothing to
+   *  press. Its own controls (an action button) stay the targets. */
+  interactive?: boolean;
+};
+export type SidebarItemProps = SidebarItemRootProps & {
+  /** For a row whose content is two lines (a name and a second line): the row
+   * grows from its fixed height and its content aligns to the first line. The
+   * name itself stays on one line and truncates, in every group (Sidebar's
+   * rules); never use this to let a long name wrap. */
+  wrap?: boolean;
+  /** Something waits for you (a 700 name), the place is muted (an ink-2
+   *  name), or it is away: offline or not joined (an ink-3 name). */
+  tone?: RowTone;
+};
+export declare function SidebarItem({ className, wrap, tone, interactive, ...props }: SidebarItemProps): import("react").JSX.Element;
+export type SidebarItemIconProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemIcon({ className, render, ...props }: SidebarItemIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemChannelIconProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemChannelIcon({ className, render, ...props }: SidebarItemChannelIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemContentProps = useRender.ComponentProps<"span"> & {
+  stacked?: boolean;
+};
+export declare function SidebarItemContent({ className, render, stacked, ...props }: SidebarItemContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemTitleProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemTitle({ className, render, ...props }: SidebarItemTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemSubtitleProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemSubtitle({ className, render, ...props }: SidebarItemSubtitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemMetaProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemMeta({ className, render, ...props }: SidebarItemMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemStatusProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemStatus({ className, render, ...props }: SidebarItemStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The yellow @ sticker: someone mentioned you here. */
+export type SidebarItemIndicatorProps = Omit<BadgeProps, "appearance" | "variant">;
+export declare function SidebarItemIndicator({ className, ...props }: SidebarItemIndicatorProps): import("react").JSX.Element;
+export type SidebarItemMetaIconProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemMetaIcon({ className, render, ...props }: SidebarItemMetaIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemAsideProps = useRender.ComponentProps<"span">;
+export declare function SidebarItemAside({ className, render, ...props }: SidebarItemAsideProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** The pink unread count: messages waiting for you. */
+export type SidebarItemCountProps = Omit<BadgeProps, "appearance" | "variant">;
+export declare function SidebarItemCount({ className, ...props }: SidebarItemCountProps): import("react").JSX.Element;
+export type SidebarItemCountSeparatorProps = useRender.ComponentProps<"span">;
+/** The dot between the channel's own unread count and its thread count. */
+export declare function SidebarItemCountSeparator({ className, render, ...props }: SidebarItemCountSeparatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarItemThreadCountProps = useRender.ComponentProps<"span"> & {
+  /**
+   * Visually hidden words read after the number, so screen readers hear what
+   * the count is (the icon is decorative). Pass localized copy.
+   */
+  label?: string;
+};
+/**
+ * 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.
+ */
+export declare function SidebarItemThreadCount({ children, className, label, render, ...props }: SidebarItemThreadCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion