@botiverse/raft-ui 0.94.0 → 0.95.1

package/dist/components/select/select.mjs

@@ -1,16 +1,16 @@
+import { usePopupCollision } from "../../lib/frame-insets.mjs";
 import { cn } from "../../cn.mjs";
 import { tv } from "../../lib/tv.mjs";
+import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
 import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { Button } from "../button/button.mjs";
 import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
 import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
-import { usePopupCollision } 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, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
-//#region src/components/select/select.tsx
+// src/components/select/select.tsx
 const select = tv({
 	slots: {
 		trigger: [
@@ -39,6 +39,10 @@ const select = tv({
 			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
 		],
 		value: ["flex min-w-0 flex-1 truncate text-left"],
+		fitFrame: ["grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)]"],
+		sizer: ["col-start-1 row-start-1 flex h-0 flex-col overflow-hidden", "pointer-events-none invisible select-none"],
+		sizerLabel: ["whitespace-nowrap font-semibold"],
+		sizerPlaceholder: ["whitespace-nowrap font-medium"],
 		positioner: ["isolate z-popup outline-none"],
 		content: [
 			"relative max-h-(--available-height) min-w-[max(var(--anchor-width),220px)] overflow-hidden",
@@ -100,19 +104,24 @@ const select = tv({
 		],
 		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 rounded-(--control-radius) py-0",
-				"data-placeholder:font-field"
-			],
-			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],
-			actionItem: ["text-field font-field"]
-		}
-	} },
+	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 rounded-(--control-radius) py-0",
+					"data-placeholder:font-field"
+				],
+				item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],
+				actionItem: ["text-field font-field"],
+				sizerLabel: ["font-field"],
+				sizerPlaceholder: ["font-field"]
+			}
+		},
+		fit: { true: { trigger: ["w-auto min-w-44 max-w-80"] } }
+	},
 	defaultVariants: { chrome: "default" }
 });
 /**
@@ -133,6 +142,19 @@ function useSelectChrome() {
 	return useContext(SelectChromeContext);
 }
 /**
+* The root's `items`, for a `fit` trigger's sizer: Base UI keeps them in a
+* store of its own that the trigger can't read.
+*/
+const SelectItemsContext = createContext(void 0);
+/** Whether the trigger around a `SelectValue` sizes to the longest option. */
+const SelectFitContext = createContext(false);
+/** Every label in `items`, groups flattened: what a `fit` trigger may show. */
+function itemLabels(items) {
+	if (items == null) return [];
+	if (!Array.isArray(items)) return Object.values(items);
+	return items.flatMap((entry) => Array.isArray(entry.items) ? entry.items : [entry]).map((item) => item.label);
+}
+/**
 * 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
@@ -174,7 +196,7 @@ function keepActionHighlighted(event) {
 		if (lent) list.removeAttribute("tabindex");
 	});
 }
-function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {
+function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, items, ...props }) {
 	const pendingActionClose = useRef(void 0);
 	const handleValueChange = useCallback((next, details) => {
 		const action = findActionValue(next);
@@ -203,21 +225,28 @@ function Select$1({ chrome = "default", onValueChange, onOpenChange, isItemEqual
 	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
+		children: /* @__PURE__ */ jsx(SelectItemsContext, {
+			value: items,
+			children: /* @__PURE__ */ jsx(Select.Root, {
+				"data-slot": "select",
+				"data-chrome": chrome,
+				onValueChange: handleValueChange,
+				onOpenChange: handleOpenChange,
+				isItemEqualToValue: handleItemEquality,
+				itemToStringLabel: handleStringLabel,
+				itemToStringValue: handleStringValue,
+				items,
+				...props
+			})
 		})
 	});
 }
-function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }) {
+function SelectTrigger({ className, children, render, fit = false, "data-invalid": dataInvalid, ...props }) {
 	const chrome = useSelectChrome();
-	const { trigger } = select({ chrome });
+	const { trigger } = select({
+		chrome,
+		fit
+	});
 	return /* @__PURE__ */ jsx(Select.Trigger, {
 		"data-slot": "select-trigger",
 		render: render ?? /* @__PURE__ */ jsx(Button, {
@@ -232,20 +261,59 @@ function SelectTrigger({ className, children, render, "data-invalid": dataInvali
 			"data-slot": "select-trigger-content",
 			"data-picker-trigger-content": "select",
 			className: "flex min-w-0 flex-1 items-center gap-1.5",
-			children
+			children: /* @__PURE__ */ jsx(SelectFitContext, {
+				value: fit,
+				children
+			})
 		})
 	});
 }
 function SelectValue({ className, ref, title, ...props }) {
-	const { value } = select();
+	const fit = useContext(SelectFitContext);
+	const { value, fitFrame } = select();
 	const overflowRef = useOverflowTitle(ref, title);
-	return /* @__PURE__ */ jsx(Select.Value, {
+	const node = /* @__PURE__ */ jsx(Select.Value, {
 		ref: overflowRef,
 		title,
 		"data-slot": "select-value",
-		className: value({ className }),
+		className: value({ className: cn(fit && "col-start-1 row-start-1", className) }),
 		...props
 	});
+	if (!fit) return node;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "select-value-fit",
+		className: fitFrame(),
+		children: [node, /* @__PURE__ */ jsx(SelectValueSizer, { placeholder: props.placeholder })]
+	});
+}
+/**
+* Every option's label and the placeholder, stacked in the value's grid cell,
+* invisible and 0px high: the cell is as wide as the widest of them, so the
+* trigger is too, whichever value shows. Each takes the weight it shows at, so
+* the width doesn't change when the placeholder gives way to a value.
+*/
+function SelectValueSizer({ placeholder }) {
+	const chrome = useSelectChrome();
+	const items = useContext(SelectItemsContext);
+	const { sizer, sizerLabel, sizerPlaceholder } = select({ chrome });
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-slot": "select-value-sizer",
+		className: sizer(),
+		children: [typeof placeholder === "string" ? /* @__PURE__ */ jsx("span", {
+			"data-label": placeholder,
+			className: sizerPlaceholder({ className: "after:content-[attr(data-label)]" })
+		}) : placeholder != null && /* @__PURE__ */ jsx("span", {
+			className: sizerPlaceholder(),
+			children: placeholder
+		}), itemLabels(items).map((label, index) => typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsx("span", {
+			"data-label": label,
+			className: sizerLabel({ className: "after:content-[attr(data-label)]" })
+		}, index) : /* @__PURE__ */ jsx("span", {
+			className: sizerLabel(),
+			children: label
+		}, index))]
+	});
 }
 function SelectIcon({ className, children, ...props }) {
 	const { icon } = select();
@@ -516,5 +584,4 @@ function SelectArrow({ className, ...props }) {
 		...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/selection-toolbar/selection-toolbar.d.mts

@@ -4,7 +4,6 @@ import { FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps } from "../f
 import "../fit-toolbar/index.mjs";
 import { ReactElement, ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/selection-toolbar/selection-toolbar.d.ts
 export type SelectionToolbarDockProps = useRender.ComponentProps<"div">;
 /**
  * Where the toolbar floats: centered, 12px above the bottom of the list or
@@ -96,5 +95,4 @@ export type SelectionToolbarCloseProps = Omit<ButtonProps, "variant" | "size" |
   "aria-label": string;
 };
 /** ×, last: ends the selection, as Escape does. */
-export declare function SelectionToolbarClose({ className, children, ...props }: SelectionToolbarCloseProps): import("react").JSX.Element;
-//#endregion
+export declare function SelectionToolbarClose({ className, children, ...props }: SelectionToolbarCloseProps): import("react").JSX.Element;

package/dist/components/selection-toolbar/selection-toolbar.mjs

@@ -1,7 +1,7 @@
 import { Button } from "../button/button.mjs";
 import { DropdownMenuItem } from "../dropdown-menu/dropdown-menu.mjs";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
 import { FitToolbar, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore } from "../fit-toolbar/fit-toolbar.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
 import { selectionToolbar } from "./selection-toolbar.recipe.mjs";
 import { ChevronDown, MoreHorizontal, X } from "lucide-react";
 import { cloneElement, useCallback } from "react";
@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { Toolbar } from "@base-ui/react/toolbar";
-//#region src/components/selection-toolbar/selection-toolbar.tsx
+// src/components/selection-toolbar/selection-toolbar.tsx
 /**
 * The order things give way in as the toolbar runs out of room: the hint,
 * then the secondary actions into More (the last first), then the labels (the
@@ -213,5 +213,4 @@ function SelectionToolbarClose({ className, children, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(X, {})
 	});
 }
-//#endregion
 export { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems };

package/dist/components/selection-toolbar/selection-toolbar.recipe.mjs

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/selection-toolbar/selection-toolbar.recipe.ts
+// src/components/selection-toolbar/selection-toolbar.recipe.ts
 const selectionToolbar = tv({
 	slots: {
 		dock: [
@@ -38,5 +38,4 @@ const selectionToolbar = tv({
 	},
 	variants: { menu: { true: { action: "md:pointer-fine:pr-2.5" } } }
 });
-//#endregion
 export { selectionToolbar };

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

@@ -1,10 +1,8 @@
 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

@@ -1,7 +1,7 @@
 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
+// src/components/separator/separator.tsx
 const separator = tv({ slots: {
 	root: [
 		"shrink-0",
@@ -45,5 +45,4 @@ function Separator$1({ children, className, orientation = "horizontal", ...props
 		...props
 	});
 }
-//#endregion
 export { Separator$1 as Separator };

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

@@ -1,8 +1,7 @@
-import { RowTone } from "../../lib/row-tone.mjs";
-import { BadgeProps } from "../badge/badge.mjs";
 import "../badge/index.mjs";
+import { BadgeProps } from "../badge/badge.mjs";
+import { RowTone } from "../../lib/row-tone.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
@@ -60,5 +59,4 @@ export type SidebarItemThreadCountProps = useRender.ComponentProps<"span"> & {
  * 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
+export declare function SidebarItemThreadCount({ children, className, label, render, ...props }: SidebarItemThreadCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,11 +1,11 @@
 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
+import { ThreadIcon } from "@botiverse/ricons";
+// src/components/sidebar/sidebar-item.tsx
 function SidebarItemRoot({ active = false, interactive = true, className, render, ...props }) {
 	const defaultProps = {
 		"data-slot": "sidebar-item",
@@ -197,5 +197,4 @@ function SidebarItemThreadCount({ children, className, label = "threads with new
 		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

@@ -1,6 +1,6 @@
-import { tv } from "../../lib/tv.mjs";
 import { listCell, listCellStates } from "../../lib/list-cell.mjs";
-//#region src/components/sidebar/sidebar-item.recipe.ts
+import { tv } from "../../lib/tv.mjs";
+// src/components/sidebar/sidebar-item.recipe.ts
 const sidebarItemRecipe = tv({
 	slots: {
 		sidebarItem: [
@@ -99,5 +99,4 @@ const sidebarItemRecipe = tv({
 		stacked: false
 	}
 });
-//#endregion
 export { sidebarItemRecipe };

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

@@ -1,5 +1,4 @@
 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">;
@@ -9,5 +8,4 @@ export declare function SidebarMenuTitle({ className, render, ...props }: Sideba
 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
+export declare function SidebarMenuCount({ className, render, ...props }: SidebarMenuCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

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

@@ -1,7 +1,7 @@
 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
+// src/components/sidebar/sidebar-menu.tsx
 function SidebarMenu({ className, render, ...props }) {
 	const { sidebarMenu } = sidebarMenuRecipe();
 	const defaultProps = {
@@ -63,5 +63,4 @@ function SidebarMenuCount({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
-//#endregion
 export { SidebarMenu, SidebarMenuAside, SidebarMenuCount, SidebarMenuIcon, SidebarMenuTitle };

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

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/sidebar/sidebar-menu.recipe.ts
+// src/components/sidebar/sidebar-menu.recipe.ts
 const sidebarMenuRecipe = tv({ slots: {
 	sidebarMenu: [
 		"flex min-w-0 flex-1 items-center",
@@ -18,5 +18,4 @@ const sidebarMenuRecipe = tv({ slots: {
 	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

@@ -5,7 +5,6 @@ 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;
 };
@@ -46,5 +45,4 @@ export declare function SidebarSectionControl({ className, render, size, variant
 export type SidebarSectionEndChevronProps = Omit<SidebarSectionControlProps, "children" | "render">;
 export declare function SidebarSectionEndChevron({ className, ...props }: SidebarSectionEndChevronProps): import("react").JSX.Element;
 export type SidebarControlProps = SidebarSectionControlProps;
-export declare const SidebarControl: typeof SidebarSectionControl;
-//#endregion
+export declare const SidebarControl: typeof SidebarSectionControl;

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

@@ -7,7 +7,7 @@ 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
+// src/components/sidebar/sidebar-section.tsx
 function SidebarSection({ className, defaultOpen = true, render, ...props }) {
 	const { sidebarSection } = sidebarSectionRecipe();
 	const defaultProps = {
@@ -186,5 +186,4 @@ function SidebarSectionEndChevron({ className, ...props }) {
 	});
 }
 const SidebarControl = SidebarSectionControl;
-//#endregion
 export { SidebarControl, SidebarList, SidebarSection, SidebarSectionAttention, SidebarSectionChevron, SidebarSectionControl, SidebarSectionControls, SidebarSectionCount, SidebarSectionDisclosure, SidebarSectionEmpty, SidebarSectionEndChevron, SidebarSectionHeader, SidebarSectionTitle, SidebarSectionTrailing };

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

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/sidebar/sidebar-section.recipe.ts
+// 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 md:pointer-fine:pt-1"],
@@ -45,5 +45,4 @@ const sidebarSectionRecipe = tv({ slots: {
 		"not-pointer-fine:not-first:after:left-[-3px] not-pointer-fine:not-last:after:right-[-3px]"
 	]
 } });
-//#endregion
 export { sidebarSectionRecipe };

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

@@ -1,5 +1,4 @@
 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">;
@@ -11,5 +10,4 @@ export declare function SidebarGroupLabel({ className, render, ...props }: Sideb
 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, ...props }: SidebarContentProps): import("react").JSX.Element;
-//#endregion
+export declare function SidebarContent({ children, className, ...props }: SidebarContentProps): import("react").JSX.Element;

package/dist/components/sidebar/sidebar.mjs

@@ -1,10 +1,10 @@
-import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { sidebarRecipe } from "./sidebar.recipe.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/sidebar/sidebar.tsx
+// src/components/sidebar/sidebar.tsx
 function SidebarRoot({ className, render, ...props }) {
 	const { sidebarRoot } = sidebarRecipe();
 	const defaultProps = {
@@ -136,5 +136,4 @@ function SidebarContent({ children, className, ...props }) {
 		})
 	});
 }
-//#endregion
 export { SidebarBody, SidebarContent, SidebarGroupLabel, SidebarHeader, SidebarHeaderTitle, SidebarRoot };

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

@@ -1,6 +1,6 @@
 import { headEdgePull, listColumnMargin } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/sidebar/sidebar.recipe.ts
+// src/components/sidebar/sidebar.recipe.ts
 const sidebarRecipe = tv({ slots: {
 	sidebarRoot: [
 		"relative flex size-full min-h-0  select-none flex-col",
@@ -25,5 +25,4 @@ const sidebarRecipe = tv({ slots: {
 	sidebarViewport: ["size-full min-h-0  flex-1 overflow-x-hidden overflow-y-auto"],
 	sidebarContentInner: ["min-h-full min-w-0 w-full", "pt-2 pb-(--sidebar-content-bottom,8px)"]
 } });
-//#endregion
 export { sidebarRecipe };

package/dist/components/skeleton/skeleton.d.mts

@@ -1,7 +1,6 @@
 import { VariantProps } from "../../lib/tv.mjs";
 import { HTMLAttributes } from "react";
-//#region src/components/skeleton/skeleton.d.ts
-declare const skeleton: import("tailwind-variants/lite").TVReturnType<{
+declare const skeleton: import("tailwind-variants/config").TVReturnType<{
   variant: {
     line: {
       root: string;
@@ -15,36 +14,8 @@ declare const skeleton: import("tailwind-variants/lite").TVReturnType<{
   };
 }, {
   root: string[];
-}, undefined, {
-  variant: {
-    line: {
-      root: string;
-    };
-    block: {
-      root: string;
-    };
-    circle: {
-      root: string[];
-    };
-  };
-}, {
-  root: string[];
-}, import("tailwind-variants/lite").TVReturnTypeLike<{
-  variant: {
-    line: {
-      root: string;
-    };
-    block: {
-      root: string;
-    };
-    circle: {
-      root: string[];
-    };
-  };
-}, {
-  root: string[];
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export type SkeletonVariant = NonNullable<VariantProps<typeof skeleton>["variant"]>;
 export type SkeletonProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof skeleton>;
 export declare function Skeleton({ variant, className, ...props }: SkeletonProps): import("react").JSX.Element;
-//#endregion
+export {};

package/dist/components/skeleton/skeleton.mjs

@@ -1,6 +1,6 @@
 import { tv } from "../../lib/tv.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/skeleton/skeleton.tsx
+// src/components/skeleton/skeleton.tsx
 const skeleton = tv({
 	slots: { root: [
 		"animate-pulse motion-reduce:animate-none",
@@ -25,5 +25,4 @@ function Skeleton({ variant = "block", className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { Skeleton };

package/dist/components/spinner/spinner.d.mts

@@ -1,8 +1,7 @@
 import { VariantProps } from "../../lib/tv.mjs";
 import { WithoutChildren } from "../../lib/without-children.mjs";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/spinner/spinner.d.ts
-declare const spinner: import("tailwind-variants/lite").TVReturnType<{
+declare const spinner: import("tailwind-variants/config").TVReturnType<{
   size: {
     xs: {
       root: string[];
@@ -25,53 +24,7 @@ declare const spinner: import("tailwind-variants/lite").TVReturnType<{
   root: string[];
   ring: string[];
   pixel: string[];
-}, undefined, {
-  size: {
-    xs: {
-      root: string[];
-    };
-    sm: {};
-    md: {
-      root: string[];
-    };
-    lg: {
-      root: string[];
-    };
-  };
-  variant: {
-    default: {};
-    inverse: {
-      root: string[];
-    };
-  };
-}, {
-  root: string[];
-  ring: string[];
-  pixel: string[];
-}, import("tailwind-variants/lite").TVReturnTypeLike<{
-  size: {
-    xs: {
-      root: string[];
-    };
-    sm: {};
-    md: {
-      root: string[];
-    };
-    lg: {
-      root: string[];
-    };
-  };
-  variant: {
-    default: {};
-    inverse: {
-      root: string[];
-    };
-  };
-}, {
-  root: string[];
-  ring: string[];
-  pixel: string[];
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export type SpinnerProps = WithoutChildren<useRender.ComponentProps<"span">> & VariantProps<typeof spinner>;
 export declare function Spinner({ size, variant, className, render, ...props }: SpinnerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
+export {};

package/dist/components/spinner/spinner.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/spinner/spinner.tsx
+// src/components/spinner/spinner.tsx
 const SPINNER_STYLE = `
 @keyframes raft-spinner-pixel {
   0%,
@@ -114,5 +114,4 @@ function Spinner({ size = "sm", variant = "default", className, render, ...props
 		}
 	});
 }
-//#endregion
 export { Spinner };