@botiverse/raft-ui 0.94.0 → 0.95.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [0.95.0](https://github.com/botiverse/raft-design/compare/v0.94.0...v0.95.0) (2026-11-11)
+
+### Breaking
+
+- **raft-ui no longer exports its own icons: import them from `@botiverse/ricons`** ([Icons](https://raft-design.botiverse.build/components/icons/)). `MessageIcon`, `ChatIcon`, `DirectMessageIcon`, `ThreadIcon`, `CommentIcon`, `FeedbackIcon`, `ArtifactIcon`, `FollowThreadIcon`, `UnfollowThreadIcon`, `JoinChannelIcon`, `LeaveChannelIcon`, `JoinPrivateChannelIcon`, `LeavePrivateChannelIcon`, `JoinJointChannelIcon`, `LeaveJointChannelIcon`, `FollowArtifactIcon`, `UnfollowArtifactIcon`, `AddCommentIcon`, `ReopenTaskIcon` and the types `ActionIconProps`, `ConversationIconProps` and `ObjectIconProps` moved to the new package `@botiverse/ricons` (packages/icons), with the same names, types and drawings. raft-ui depends on it for its own components and doesn't export them: the icons have one import path.
+  - Why: the icons are their own package, kept in this repository, so an app can use them without raft-ui; a second path through raft-ui would leave two ways to import the same icon (Artea, #proj-raft-ui:#236).
+  - Affects: an import of any of these names from `@botiverse/raft-ui` no longer compiles. Add `@botiverse/ricons` to the app's dependencies and import them from it: `import { FollowThreadIcon, UnfollowThreadIcon, ThreadIcon } from "@botiverse/ricons";`. The `[data-icon-sizes]` rule (`UnfollowArtifactIcon`'s minus at 16px) moved to `@botiverse/ricons/styles.css`, which raft-ui's `styles.css` imports, so an app that loads raft-ui's stylesheet needs no other CSS.
+  - Docs: https://raft-design.botiverse.build/components/icons/
+
+### Changed
+
+- **Base UI 1.9: a closed Select or Combobox popup unmounts on its own, even with `actionsRef`** ([Select](https://raft-design.botiverse.build/components/select/), [Combobox](https://raft-design.botiverse.build/components/combobox/)). raft-ui now depends on `@base-ui/react` 1.9, which decouples automatic unmounting from `actionsRef` for Select, Combobox and Autocomplete. Before, passing `actionsRef` kept the popup mounted after it closed until you called `actionsRef.current.unmount()`. Now it unmounts when closing finishes unless `onOpenChange` opts out.
+  - Why: the dependency update (#1193). raft-ui itself does not use `actionsRef` or `unmount()`.
+  - Affects: only an app that passes `actionsRef` to `Select` or `Combobox` and relied on the popup staying mounted, for example to run its own closing animation. In `onOpenChange`, call `eventDetails.preventUnmountOnClose()` when it closes, then `actionsRef.current.unmount()` as before. Nothing else changes.
+
 ## [0.94.0](https://github.com/botiverse/raft-design/compare/v0.93.0...v0.94.0) (2026-11-11)
 
 ### Added

package/codemods/button-sizes.mjs

@@ -37,17 +37,29 @@ let babelParse;
 /**
  * @babel/parser is an optional peer dependency of raft-ui: only this codemod
  * uses it. Look in the project being migrated first, then beside raft-ui.
+ * Only a parser that is not there asks to install it: one that is there but
+ * fails to load (Babel 8 is ESM only, and a Node without require(esm) can't
+ * load it) reports its own error.
  */
 function loadParser() {
   if (babelParse) return babelParse;
+  let loadError;
   for (const from of [path.join(process.cwd(), "package.json"), import.meta.url]) {
     try {
       babelParse = createRequire(from)("@babel/parser").parse;
       return babelParse;
-    } catch {
-      // Try the next place.
+    } catch (error) {
+      const missing =
+        error?.code === "MODULE_NOT_FOUND" && String(error.message).includes("'@babel/parser'");
+      if (!missing) loadError ??= error;
     }
   }
+  if (loadError) {
+    throw new Error(
+      `@babel/parser is installed but failed to load: ${loadError.message ?? loadError}`,
+      { cause: loadError },
+    );
+  }
   throw new Error(
     "install @babel/parser to run this codemod (it parses your TSX): pnpm add -D @babel/parser",
   );

package/dist/cn.d.mts

@@ -1,7 +1,5 @@
 import { ClassValue } from "cnfast";
-//#region src/lib/cn.d.ts
 /** The `--z-index-*` names of styles.css, in order (design/foundations/elevation.md#layer-order). */
 export declare const Z_INDEX_NAMES: string[];
 export declare function cn(...inputs: ClassValue[]): string;
-//#endregion
 export type { ClassValue };

package/dist/cn.mjs

@@ -1,6 +1,6 @@
 import { clsx } from "cnfast";
 import { extendTailwindMerge } from "tailwind-merge";
-//#region src/lib/cn.ts
+// src/lib/cn.ts
 /** The `--z-index-*` names of styles.css, in order (design/foundations/elevation.md#layer-order). */
 const Z_INDEX_NAMES = [
 	"below",
@@ -90,5 +90,4 @@ const twMerge = extendTailwindMerge({ extend: {
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
-//#endregion
 export { Z_INDEX_NAMES, cn };

package/dist/components/activity-inbox/activity-inbox-shell.d.mts

@@ -1,6 +1,5 @@
 import { Panel } from "../panel/panel.mjs";
 import { ComponentPropsWithRef } from "react";
-//#region src/components/activity-inbox/activity-inbox-shell.d.ts
 export type ActivityInboxPanelProps = ComponentPropsWithRef<typeof Panel>;
 export declare function ActivityInboxPanel({ className, ...props }: ActivityInboxPanelProps): import("react").JSX.Element;
 export type ActivityInboxViewportProps = ComponentPropsWithRef<"div">;
@@ -11,5 +10,4 @@ export type ActivityInboxViewportProps = ComponentPropsWithRef<"div">;
  *  the scrolling element's; a frame around it holds the scrollbar. */
 export declare function ActivityInboxViewport({ children, className, ref, style, ...props }: ActivityInboxViewportProps): import("react").JSX.Element;
 export type ActivityInboxLoadingMoreProps = ComponentPropsWithRef<"div">;
-export declare function ActivityInboxLoadingMore({ className, ...props }: ActivityInboxLoadingMoreProps): import("react").JSX.Element;
-//#endregion
+export declare function ActivityInboxLoadingMore({ className, ...props }: ActivityInboxLoadingMoreProps): import("react").JSX.Element;

package/dist/components/activity-inbox/activity-inbox-shell.mjs

@@ -1,11 +1,11 @@
 import { cn } from "../../cn.mjs";
+import { Panel } from "../panel/panel.mjs";
 import { ScrollAreaGutters } from "../scroll-area/scroll-area-gutters.mjs";
 import { useScrollAreaContainer } from "../scroll-area/use-scroll-area-container.mjs";
-import { Panel } from "../panel/panel.mjs";
 import { activityInboxShell } from "./activity-inbox-shell.recipe.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/activity-inbox/activity-inbox-shell.tsx
+// src/components/activity-inbox/activity-inbox-shell.tsx
 function ActivityInboxPanel({ className, ...props }) {
 	const { panel } = activityInboxShell();
 	return /* @__PURE__ */ jsx(Panel, {
@@ -54,5 +54,4 @@ function ActivityInboxLoadingMore({ className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { ActivityInboxLoadingMore, ActivityInboxPanel, ActivityInboxViewport };

package/dist/components/activity-inbox/activity-inbox-shell.recipe.mjs

@@ -1,6 +1,6 @@
 import { listColumnMargin } from "../../lib/head-edges.mjs";
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/activity-inbox/activity-inbox-shell.recipe.ts
+// src/components/activity-inbox/activity-inbox-shell.recipe.ts
 const activityInboxShell = tv({ slots: {
 	panel: [
 		"flex h-full min-h-0 flex-1 flex-col overflow-hidden",
@@ -15,5 +15,4 @@ const activityInboxShell = tv({ slots: {
 	],
 	loadingMore: ["py-3 text-center", "text-caption text-foreground-hint"]
 } });
-//#endregion
 export { activityInboxShell };

package/dist/components/activity-inbox/activity-inbox-sidebar.d.mts

@@ -1,6 +1,4 @@
 import { SidebarRoot } from "../sidebar/sidebar.mjs";
 import { ComponentPropsWithRef } from "react";
-//#region src/components/activity-inbox/activity-inbox-sidebar.d.ts
 export type ActivityInboxSidebarProps = ComponentPropsWithRef<typeof SidebarRoot>;
-export declare function ActivityInboxSidebar({ className, children, ...props }: ActivityInboxSidebarProps): import("react").JSX.Element;
-//#endregion
+export declare function ActivityInboxSidebar({ className, children, ...props }: ActivityInboxSidebarProps): import("react").JSX.Element;

package/dist/components/activity-inbox/activity-inbox-sidebar.mjs

@@ -1,7 +1,7 @@
 import { SidebarBody, SidebarContent, SidebarRoot } from "../sidebar/sidebar.mjs";
 import { activityInboxSidebar } from "./activity-inbox-sidebar.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/activity-inbox/activity-inbox-sidebar.tsx
+// src/components/activity-inbox/activity-inbox-sidebar.tsx
 function ActivityInboxSidebar({ className, children, ...props }) {
 	const { sidebar, sidebarBody, sidebarContent } = activityInboxSidebar();
 	return /* @__PURE__ */ jsx(SidebarRoot, {
@@ -18,5 +18,4 @@ function ActivityInboxSidebar({ className, children, ...props }) {
 		})
 	});
 }
-//#endregion
 export { ActivityInboxSidebar };

package/dist/components/activity-inbox/activity-inbox-sidebar.recipe.mjs

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/activity-inbox/activity-inbox-sidebar.recipe.ts
+// src/components/activity-inbox/activity-inbox-sidebar.recipe.ts
 const activityInboxSidebar = tv({ slots: {
 	sidebar: [
 		"shrink-0",
@@ -18,5 +18,4 @@ const activityInboxSidebar = tv({ slots: {
 		"**:data-activity-inbox-show-all:whitespace-nowrap"
 	]
 } });
-//#endregion
 export { activityInboxSidebar };

package/dist/components/activity-inbox/activity-inbox-toolbar.d.mts

@@ -1,9 +1,7 @@
 import { ComponentPropsWithRef } from "react";
-//#region src/components/activity-inbox/activity-inbox-toolbar.d.ts
 export type ActivityInboxControlsProps = ComponentPropsWithRef<"div">;
 export declare function ActivityInboxControls({ className, ...props }: ActivityInboxControlsProps): import("react").JSX.Element;
 export type ActivityInboxSelectionToolbarProps = ComponentPropsWithRef<"div">;
 export declare function ActivityInboxSelectionToolbar({ className, ...props }: ActivityInboxSelectionToolbarProps): import("react").JSX.Element;
 export type ActivityInboxSelectionCountProps = ComponentPropsWithRef<"span">;
-export declare function ActivityInboxSelectionCount({ className, ...props }: ActivityInboxSelectionCountProps): import("react").JSX.Element;
-//#endregion
+export declare function ActivityInboxSelectionCount({ className, ...props }: ActivityInboxSelectionCountProps): import("react").JSX.Element;

package/dist/components/activity-inbox/activity-inbox-toolbar.mjs

@@ -1,6 +1,6 @@
 import { activityInboxToolbar } from "./activity-inbox-toolbar.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/activity-inbox/activity-inbox-toolbar.tsx
+// src/components/activity-inbox/activity-inbox-toolbar.tsx
 function ActivityInboxControls({ className, ...props }) {
 	const { controls } = activityInboxToolbar();
 	return /* @__PURE__ */ jsx("div", {
@@ -25,5 +25,4 @@ function ActivityInboxSelectionCount({ className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { ActivityInboxControls, ActivityInboxSelectionCount, ActivityInboxSelectionToolbar };

package/dist/components/activity-inbox/activity-inbox-toolbar.recipe.mjs

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
+// src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
 const activityInboxToolbar = tv({ slots: {
 	controls: [
 		"flex shrink-0 flex-nowrap items-center gap-2",
@@ -15,5 +15,4 @@ const activityInboxToolbar = tv({ slots: {
 	],
 	selectionCount: ["mr-1", "text-footnote font-bold text-foreground"]
 } });
-//#endregion
 export { activityInboxToolbar };

package/dist/components/alert-dialog/alert-dialog.d.mts

@@ -3,7 +3,6 @@ import { ButtonProps } from "../button/button.mjs";
 import "../button/index.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { ComponentPropsWithRef, ReactNode } from "react";
-//#region src/components/alert-dialog/alert-dialog.d.ts
 export type AlertDialogProps = Dialog.Root.Props;
 export declare function AlertDialog({ children, ...props }: AlertDialogProps): import("react").JSX.Element;
 export type AlertDialogTriggerProps = Dialog.Trigger.Props;
@@ -37,5 +36,4 @@ export declare function AlertDialogAction(props: AlertDialogActionProps): import
 export type AlertDialogCancelProps = Omit<Dialog.Close.Props, "render"> & Pick<ButtonProps, "variant" | "size"> & {
   className?: string;
 };
-export declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogCancelProps): import("react").JSX.Element;
-//#endregion
+export declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogCancelProps): import("react").JSX.Element;

package/dist/components/alert-dialog/alert-dialog.mjs

@@ -10,7 +10,7 @@ import { DialogSheetReset } from "../dialog/dialog-sheet-context.mjs";
 import { Dialog } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/alert-dialog/alert-dialog.tsx
+// src/components/alert-dialog/alert-dialog.tsx
 const alertDialog = tv({
 	slots: {
 		overlay: ["fixed inset-0 z-dialog bg-layer-backdrop"],
@@ -160,5 +160,4 @@ function AlertDialogCancel({ className, variant, size, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/announcement-dialog/announcement-dialog.d.mts

@@ -1,10 +1,9 @@
 import { ButtonProps } from "../button/button.mjs";
-import "../button/index.mjs";
+import "../dialog/index.mjs";
 import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { Dialog, DialogClose, DialogContentProps, DialogTitleProps, DialogTrigger } from "../dialog/dialog.mjs";
-import "../dialog/index.mjs";
+import "../button/index.mjs";
 import { ComponentPropsWithRef } from "react";
-//#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;
 export declare function AnnouncementDialogBody({ className, ...props }: ScrollAreaProps): import("react").JSX.Element;
 export declare function AnnouncementDialogHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
@@ -15,5 +14,4 @@ export declare function AnnouncementDialogText({ className, ...props }: Componen
 export declare function AnnouncementDialogFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 export declare function AnnouncementDialogAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
 export declare function AnnouncementDialogSecondaryAction({ className, ...props }: Omit<ButtonProps, "variant">): import("react").JSX.Element;
-//#endregion
 export { Dialog as AnnouncementDialog, DialogClose as AnnouncementDialogClose, DialogTrigger as AnnouncementDialogTrigger };

package/dist/components/announcement-dialog/announcement-dialog.mjs

@@ -1,10 +1,10 @@
 import { tv } from "../../lib/tv.mjs";
+import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from "../dialog/dialog.mjs";
 import { Button } from "../button/button.mjs";
 import { ScrollArea } from "../scroll-area/scroll-area.mjs";
-import { Dialog, DialogClose, DialogContent, DialogTitle, DialogTrigger } from "../dialog/dialog.mjs";
 import { useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/announcement-dialog/announcement-dialog.tsx
+// src/components/announcement-dialog/announcement-dialog.tsx
 const announcement = tv({ slots: {
 	content: ["@container/announcement max-w-xl gap-0 overflow-clip p-0"],
 	body: [
@@ -118,5 +118,4 @@ function AnnouncementDialogSecondaryAction({ className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger };

package/dist/components/app-link-card/app-link-card.d.mts

@@ -1,5 +1,4 @@
 import { ComponentPropsWithRef } from "react";
-//#region src/components/app-link-card/app-link-card.d.ts
 export type AppLinkCardProps = ComponentPropsWithRef<"div">;
 /**
  * An app link's card drawn in the message, after the link's paragraph, where
@@ -52,5 +51,4 @@ export type AppLinkCardActionsProps = ComponentPropsWithRef<"div">;
  * The app's buttons at the card's bottom end: at most two, the bordered one
  * last, with a More menu (⋯) to their left for the rest.
  */
-export declare function AppLinkCardActions({ className, ...props }: AppLinkCardActionsProps): import("react").JSX.Element;
-//#endregion
+export declare function AppLinkCardActions({ className, ...props }: AppLinkCardActionsProps): import("react").JSX.Element;

package/dist/components/app-link-card/app-link-card.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { messageCard, messageEmbed } from "../message-embed/message-embed.recipe.mjs";
 import { Skeleton } from "../skeleton/skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/app-link-card/app-link-card.tsx
+// src/components/app-link-card/app-link-card.tsx
 const appLinkCard = tv({ slots: {
 	root: ["flex flex-col", "my-2 first:mt-0 last:mb-0"],
 	placeholderLine: ["flex h-lh items-center"],
@@ -185,5 +185,4 @@ function AppLinkCardActions({ className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { AppLinkCard, AppLinkCardActions, AppLinkCardBody, AppLinkCardEyebrow, AppLinkCardHeader, AppLinkCardHost, AppLinkCardIcon, AppLinkCardMeta, AppLinkCardName, AppLinkCardPlaceholder, AppLinkCardTitle };

package/dist/components/app-rail/app-rail.d.mts

@@ -1,6 +1,5 @@
 import { StatusProps } from "../status/status.mjs";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/app-rail/app-rail.d.ts
 export type AppRailRootProps = useRender.ComponentProps<"div">;
 export declare function AppRailRoot({ className, render, ...props }: AppRailRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type AppRailHeaderProps = useRender.ComponentProps<"div">;
@@ -27,5 +26,4 @@ export declare function AppRailItemBadge({ className, render, ...props }: AppRai
 export type AppRailItemIndicatorProps = StatusProps;
 export declare function AppRailItemIndicator({ className, size, variant, ...props }: AppRailItemIndicatorProps): import("react").JSX.Element;
 export type AppRailFooterProps = useRender.ComponentProps<"div">;
-export declare function AppRailFooter({ className, render, ...props }: AppRailFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
+export declare function AppRailFooter({ className, render, ...props }: AppRailFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/app-rail/app-rail.mjs

@@ -4,7 +4,7 @@ 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/app-rail/app-rail.tsx
+// src/components/app-rail/app-rail.tsx
 function AppRailRoot({ className, render, ...props }) {
 	const { root } = appRail();
 	const defaultProps = {
@@ -122,5 +122,4 @@ function AppRailFooter({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
-//#endregion
 export { AppRailFooter, AppRailHeader, AppRailItem, AppRailItemAttention, AppRailItemBadge, AppRailItemIcon, AppRailItemIndicator, AppRailItemLabel, AppRailNav, AppRailRoot };

package/dist/components/app-rail/app-rail.recipe.mjs

@@ -1,5 +1,5 @@
 import { tv } from "../../lib/tv.mjs";
-//#region src/components/app-rail/app-rail.recipe.ts
+// src/components/app-rail/app-rail.recipe.ts
 const appRail = tv({ slots: {
 	root: [
 		"flex size-full  flex-col items-center select-none",
@@ -48,5 +48,4 @@ const appRail = tv({ slots: {
 	],
 	itemIndicator: ["pointer-events-none absolute", "-top-1 -right-1"]
 } });
-//#endregion
 export { appRail };

package/dist/components/app-shell/app-shell.d.mts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/app-shell/app-shell.d.ts
 export type AppShellRootProps = useRender.ComponentProps<"div"> & {
   defaultSidebarOpen?: boolean;
   onSidebarOpenChange?: (open: boolean) => void;
@@ -23,5 +22,4 @@ export declare function AppShellMainSlot({ className, overlay, render, ...props
 export type AppShellSidebarTriggerProps = useRender.ComponentProps<"button"> & {
   children: ReactNode;
 };
-export declare function AppShellSidebarTrigger(props: AppShellSidebarTriggerProps): import("react").JSX.Element | null;
-//#endregion
+export declare function AppShellSidebarTrigger(props: AppShellSidebarTriggerProps): import("react").JSX.Element | null;

package/dist/components/app-shell/app-shell.mjs

@@ -1,11 +1,11 @@
-import { cn } from "../../cn.mjs";
 import { tv } from "../../lib/tv.mjs";
+import { cn } from "../../cn.mjs";
 import { PanelAction } from "../panel/panel-action.mjs";
 import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/app-shell/app-shell.tsx
+// src/components/app-shell/app-shell.tsx
 const appShell = tv({
 	slots: {
 		root: [
@@ -213,5 +213,4 @@ function AppShellSidebarTriggerButton({ sidebar, className, children, onClick, r
 		props: mergeProps(defaultProps, props)
 	});
 }
-//#endregion
 export { AppShellMainSlot, AppShellOverlaySlot, AppShellPanelSlot, AppShellRailSlot, AppShellRoot, AppShellSidebarSlot, AppShellSidebarTrigger };

package/dist/components/avatar/avatar.d.mts

@@ -1,99 +1,12 @@
-import { StyledProps } from "../../lib/styled-props.mjs";
 import { DataAttributes } from "../../lib/data-attributes.mjs";
-import { VariantProps } from "../../lib/tv.mjs";
 import { Presence } from "../../lib/presence.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { StyledProps } from "../../lib/styled-props.mjs";
 import { ComponentPropsWithRef } from "react";
 import { Button } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
 import { Avatar } from "@base-ui/react";
-//#region src/components/avatar/avatar.d.ts
-declare const avatar: import("tailwind-variants/lite").TVReturnType<{
-  type: {
-    agent: {
-      root: string[];
-    };
-    human: {
-      root: string[];
-    };
-    server: {
-      root: string[];
-    };
-  };
-  size: {
-    xl: {
-      root: string[];
-    };
-    lg: {
-      root: string[];
-    };
-    md: {
-      root: string[];
-    };
-    sm: {
-      root: string[];
-    };
-    xs: {
-      root: string[];
-    };
-    "2xs": {
-      root: string[];
-    };
-    "3xs": {
-      root: string;
-    };
-  };
-}, {
-  root: string[];
-  image: string[];
-  fallback: string[];
-  badge: string[];
-  dot: string[];
-  group: string[];
-  groupButton: string[];
-}, undefined, {
-  type: {
-    agent: {
-      root: string[];
-    };
-    human: {
-      root: string[];
-    };
-    server: {
-      root: string[];
-    };
-  };
-  size: {
-    xl: {
-      root: string[];
-    };
-    lg: {
-      root: string[];
-    };
-    md: {
-      root: string[];
-    };
-    sm: {
-      root: string[];
-    };
-    xs: {
-      root: string[];
-    };
-    "2xs": {
-      root: string[];
-    };
-    "3xs": {
-      root: string;
-    };
-  };
-}, {
-  root: string[];
-  image: string[];
-  fallback: string[];
-  badge: string[];
-  dot: string[];
-  group: string[];
-  groupButton: string[];
-}, import("tailwind-variants/lite").TVReturnTypeLike<{
+declare const avatar: import("tailwind-variants/config").TVReturnType<{
   type: {
     agent: {
       root: string[];
@@ -136,7 +49,7 @@ declare const avatar: import("tailwind-variants/lite").TVReturnType<{
   dot: string[];
   group: string[];
   groupButton: string[];
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export type AvatarSize = NonNullable<VariantProps<typeof avatar>["size"]>;
 export type AvatarProps = StyledProps<Avatar.Root.Props> & Required<Pick<VariantProps<typeof avatar>, "size" | "type">>;
 declare function Avatar$1({ size, type, className, children, ...props }: AvatarProps): import("react").JSX.Element;
@@ -165,5 +78,4 @@ export type AvatarGroupCountProps = ComponentPropsWithRef<"span"> & {
   size: AvatarSize;
 };
 export declare function AvatarGroupCount({ size, className, ...props }: AvatarGroupCountProps): import("react").JSX.Element;
-//#endregion
 export { Avatar$1 as Avatar };

package/dist/components/avatar/avatar.mjs

@@ -1,13 +1,13 @@
 import { cn } from "../../cn.mjs";
-import { tv } from "../../lib/tv.mjs";
 import { defaultNativeButton } from "../../lib/default-native-button.mjs";
 import { PRESENCE_COLOR } from "../../lib/presence.mjs";
+import { tv } from "../../lib/tv.mjs";
 import { 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";
 import { Avatar } from "@base-ui/react";
-//#region src/components/avatar/avatar.tsx
+// src/components/avatar/avatar.tsx
 const avatar = tv({
 	slots: {
 		root: [
@@ -287,5 +287,4 @@ function AvatarGroupCount({ size, className, ...props }) {
 		...props
 	});
 }
-//#endregion
 export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupButton, AvatarGroupCount, AvatarImage };

package/dist/components/badge/badge.d.mts

@@ -1,7 +1,6 @@
 import { VariantProps } from "../../lib/tv.mjs";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/badge/badge.d.ts
-export declare const badge: import("tailwind-variants/lite").TVReturnType<{
+export declare const badge: import("tailwind-variants/config").TVReturnType<{
   appearance: {
     solid: {
       root: string[];
@@ -14,76 +13,24 @@ export declare const badge: import("tailwind-variants/lite").TVReturnType<{
     };
   };
   variant: {
-    default: "";
-    primary: "";
-    you: "";
-    busy: "";
-    information: "";
-    muted: "";
-    accent: "";
-    success: "";
-    warning: "";
-    danger: "";
+    default: string;
+    primary: string;
+    you: string;
+    busy: string;
+    information: string;
+    muted: string;
+    accent: string;
+    success: string;
+    warning: string;
+    danger: string;
   };
 }, {
   root: string[];
-}, undefined, {
-  appearance: {
-    solid: {
-      root: string[];
-    };
-    soft: {
-      root: string[];
-    };
-    outline: {
-      root: string[];
-    };
-  };
-  variant: {
-    default: "";
-    primary: "";
-    you: "";
-    busy: "";
-    information: "";
-    muted: "";
-    accent: "";
-    success: "";
-    warning: "";
-    danger: "";
-  };
-}, {
-  root: string[];
-}, import("tailwind-variants/lite").TVReturnTypeLike<{
-  appearance: {
-    solid: {
-      root: string[];
-    };
-    soft: {
-      root: string[];
-    };
-    outline: {
-      root: string[];
-    };
-  };
-  variant: {
-    default: "";
-    primary: "";
-    you: "";
-    busy: "";
-    information: "";
-    muted: "";
-    accent: "";
-    success: "";
-    warning: "";
-    danger: "";
-  };
-}, {
-  root: string[];
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badge>;
 declare function BadgeRoot({ appearance, variant, className, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare function Experimental({ children, ...props }: Omit<BadgeProps, "appearance" | "variant">): import("react").JSX.Element;
 export declare const Badge: typeof BadgeRoot & {
   Experimental: typeof Experimental;
 };
-//#endregion
+export {};

package/dist/components/badge/badge.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/badge/badge.tsx
+// src/components/badge/badge.tsx
 const badge = tv({
 	slots: { root: [
 		"inline-flex h-[22px] w-fit min-w-0 max-w-full shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-chip px-1.5",
@@ -207,5 +207,4 @@ function Experimental({ children, ...props }) {
 	});
 }
 const Badge = Object.assign(BadgeRoot, { Experimental });
-//#endregion
 export { Badge, badge };