raft-ui 0.0.8 → 0.0.10

package/dist/wip.mjs

@@ -1,15 +1,16 @@
 import { cn } from "./cn.mjs";
-import { a as tv, n as useThemeFamily } from "./use-theme-Y_h1DKll.mjs";
+import { a as useThemeFamily, c as tv, t as Button$1 } from "./button-jUlaK4eN.mjs";
 import { Dialog } from "@base-ui/react/dialog";
-import { MessageSquare } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { MessageSquare, X } from "lucide-react";
+import { Children, Fragment, cloneElement, isValidElement, useCallback, useRef, useState } from "react";
 import { Button } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { useHotkey } from "@tanstack/react-hotkeys";
+import { Drawer } from "vaul";
 //#region src/components/toggle-group/toggle-group.tsx
 const toggleGroup = tv({
 	slots: {
@@ -638,7 +639,7 @@ function QuotedMessageCardThread({ className, render, children = "Thread", ...pr
 		render,
 		props: mergeProps({
 			className: thread({ className }),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
 		}, props),
 		state: { slot: "quoted-message-card-thread" }
 	});
@@ -1012,15 +1013,67 @@ const lightbox = tv({
 		actions: ["flex shrink-0 items-center gap-1.5"],
 		stage: ["pointer-events-none relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"],
 		media: ["pointer-events-auto max-h-[80vh] max-w-[86vw] border-2"],
+		navigationButton: [
+			"pointer-events-auto absolute z-10 inline-flex items-center justify-center",
+			"border-2 border-line-strong bg-layer-panel text-foreground-strong shadow-sm",
+			"transition-[background-color,color,opacity,box-shadow,transform] duration-150",
+			"outline outline-[1px] outline-offset-2 outline-transparent",
+			"focus-visible:outline-foreground-strong",
+			"data-[disabled=true]:cursor-default",
+			"[&_svg]:pointer-events-none [&_svg]:size-6 [&_svg]:shrink-0"
+		],
+		infoBar: [
+			"pointer-events-auto flex min-w-0 items-center",
+			"bg-layer-panel text-foreground-strong",
+			"shadow-[0_12px_32px_-18px_oklch(0_0_0_/_0.55)]"
+		],
+		infoTitle: ["min-w-0 flex-1 truncate font-heading text-sm font-bold"],
+		infoActions: ["flex shrink-0 items-center gap-1.5"],
 		close: []
 	},
 	variants: { theme: {
 		brutal: {
-			header: ["border-b-2 border-line-strong bg-layer-panel"],
+			header: ["bg-transparent shadow-none"],
 			title: ["text-foreground-strong"],
-			media: ["border-line-strong bg-layer-panel shadow-xl"]
+			media: ["border-line-strong bg-layer-panel shadow-xl"],
+			navigationButton: [
+				"size-8 rounded-none",
+				"hover:bg-layer-panel data-[disabled=true]:text-black/35",
+				"[&_svg]:size-6"
+			],
+			infoBar: [
+				"w-[clamp(9rem,20vw,14rem)] max-w-[calc(100vw-3rem)] min-w-[9rem]",
+				"gap-2 rounded-none border-2 border-black py-0.5 pr-0.5 pl-2.5 shadow-[var(--shadow)]",
+				"[&_[data-slot=button]_svg]:stroke-2"
+			],
+			infoTitle: ["text-xs text-black"]
 		},
-		elegant: {}
+		elegant: {
+			backdrop: ["bg-[oklch(0_0_0_/_0.72)] backdrop-blur-[2px]"],
+			header: ["bg-transparent shadow-none"],
+			title: ["font-sans font-medium text-foreground-strong"],
+			actions: ["gap-2"],
+			media: ["border border-line-subtle bg-layer-panel shadow-none"],
+			navigationButton: [
+				"size-8 rounded-full border-0",
+				"bg-white/75 backdrop-blur-md",
+				"text-foreground-muted",
+				"shadow-none",
+				"hover:bg-white/85 hover:text-foreground-strong",
+				"active:scale-[0.97]",
+				"data-[disabled=true]:bg-white/35 data-[disabled=true]:text-black/30 data-[disabled=true]:shadow-none",
+				"data-[disabled=true]:hover:bg-white/35 data-[disabled=true]:active:scale-100",
+				"[&_svg]:size-5"
+			],
+			infoBar: [
+				"w-[clamp(9rem,20vw,14rem)] max-w-[calc(100vw-3rem)] min-w-[9rem]",
+				"gap-2 rounded py-0.5 pr-0.5 pl-2.5",
+				"bg-[rgba(245,245,245,0.8)] text-neutral-900 shadow-none backdrop-blur-[10px]",
+				"[&_[data-slot=button]]:text-neutral-600 [&_[data-slot=button]]:hover:bg-neutral-900/10 [&_[data-slot=button]]:hover:text-neutral-800"
+			],
+			infoTitle: ["font-sans text-xs font-medium text-neutral-800"],
+			infoActions: ["gap-1"]
+		}
 	} }
 });
 function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpenChange, open, children, ...props }) {
@@ -1066,12 +1119,15 @@ function LightboxPortal(props) {
 	});
 }
 function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
-	const { backdrop, content } = lightbox({ theme: useThemeFamily() });
+	const theme = useThemeFamily();
+	const { backdrop, content } = lightbox({ theme });
 	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 		"data-slot": "lightbox-backdrop",
+		"data-theme": theme,
 		className: backdrop()
 	}), /* @__PURE__ */ jsx(Dialog.Popup, {
 		"data-slot": "lightbox-content",
+		"data-theme": theme,
 		initialFocus,
 		finalFocus,
 		className: content({ className }),
@@ -1123,6 +1179,56 @@ function LightboxMedia({ render, className, ...props }) {
 		state: { slot: "lightbox-media" }
 	});
 }
+function LightboxNavigationButton({ className, direction, disabled, onClick, type = "button", ...props }) {
+	const { navigationButton } = lightbox({ theme: useThemeFamily() });
+	const handleClick = useCallback((event) => {
+		event.stopPropagation();
+		if (disabled) {
+			event.preventDefault();
+			return;
+		}
+		onClick?.(event);
+	}, [disabled, onClick]);
+	return /* @__PURE__ */ jsx(Button$1, {
+		"aria-disabled": disabled,
+		className: navigationButton({ className: cn(direction === "previous" ? "left-8" : "right-8", className) }),
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "lightbox-navigation-button",
+		"data-direction": direction,
+		onClick: handleClick,
+		size: "icon-lg",
+		type,
+		variant: "outline",
+		...props
+	});
+}
+function LightboxInfoBar({ render, className, ...props }) {
+	const { infoBar } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: infoBar({ className }) }, props),
+		state: { slot: "lightbox-info-bar" }
+	});
+}
+function LightboxInfoTitle({ render, className, ...props }) {
+	const { infoTitle } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: infoTitle({ className }) }, props),
+		state: { slot: "lightbox-info-title" }
+	});
+}
+function LightboxInfoActions({ render, className, ...props }) {
+	const { infoActions } = lightbox({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: infoActions({ className }) }, props),
+		state: { slot: "lightbox-info-actions" }
+	});
+}
 function LightboxClose({ className, ...props }) {
 	const { close } = lightbox({ theme: useThemeFamily() });
 	return /* @__PURE__ */ jsx(Dialog.Close, {
@@ -1135,45 +1241,133 @@ function LightboxClose({ className, ...props }) {
 //#region src/components/bottom-sheet/bottom-sheet.tsx
 const bottomSheet = tv({
 	slots: {
-		content: ["fixed inset-x-3 bottom-[max(12px,env(safe-area-inset-bottom))] z-50 mx-auto max-w-md"],
-		header: ["flex flex-col gap-1 p-4"],
-		footer: ["mt-auto flex flex-col gap-2 p-4"],
-		title: ["text-base font-bold text-foreground-strong"],
-		description: ["text-sm text-foreground/60"]
+		portal: [],
+		overlay: ["fixed inset-0 z-50", "![animation-duration:0.2s]"],
+		positioner: ["contents"],
+		content: [
+			"fixed z-50 flex h-auto flex-col outline-none",
+			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 md:data-[vaul-drawer-direction=bottom]:inset-x-3",
+			"data-[vaul-drawer-direction=bottom]:mx-auto data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:min-h-64 data-[vaul-drawer-direction=bottom]:max-h-[82vh] data-[vaul-drawer-direction=bottom]:max-w-lg md:data-[vaul-drawer-direction=bottom]:max-w-md",
+			"data-[vaul-drawer-direction=top]:inset-x-3 data-[vaul-drawer-direction=top]:top-3",
+			"data-[vaul-drawer-direction=top]:mx-auto data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:max-w-md",
+			"data-[vaul-drawer-direction=left]:inset-y-3 data-[vaul-drawer-direction=left]:left-3 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:max-w-sm",
+			"data-[vaul-drawer-direction=right]:inset-y-3 data-[vaul-drawer-direction=right]:right-3 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:max-w-sm",
+			"!duration-200 ![animation-duration:0.2s]"
+		],
+		header: ["flex flex-col items-center px-6 pt-8 pb-2 text-center"],
+		body: ["flex flex-1 flex-col items-center px-6 pt-4 pb-6 text-center"],
+		footer: ["mt-auto px-6 py-5 md:pb-11"],
+		actions: ["mx-auto w-full items-center justify-center gap-2.5", "[&_[data-slot=button]]:w-full"],
+		title: ["max-w-sm text-pretty text-center text-2xl leading-8 text-foreground-strong"],
+		description: ["max-w-sm text-pretty text-center text-sm leading-5 text-foreground/60"]
 	},
 	variants: { theme: {
-		brutal: { content: ["border-2 border-black bg-white text-black shadow-xl"] },
-		elegant: {}
+		brutal: {
+			overlay: ["bg-layer-backdrop"],
+			title: ["font-bold"],
+			content: [
+				"border-2 border-black bg-white text-black shadow-[var(--shadow-lg)]",
+				"data-[vaul-drawer-direction=bottom]:border-x-0 md:data-[vaul-drawer-direction=bottom]:border-x-2",
+				"data-[vaul-drawer-direction=bottom]:border-b-0 md:data-[vaul-drawer-direction=bottom]:border-b-2"
+			]
+		},
+		elegant: {
+			overlay: ["bg-layer-backdrop backdrop-blur-[2px]"],
+			content: [
+				"overflow-clip rounded-lg bg-layer-popover text-foreground shadow-xl md:rounded-xl",
+				"data-[vaul-drawer-direction=bottom]:rounded-b-none",
+				"md:data-[vaul-drawer-direction=bottom]:max-w-md",
+				"md:data-[vaul-drawer-direction=top]:max-w-md",
+				"md:data-[vaul-drawer-direction=left]:max-w-md",
+				"md:data-[vaul-drawer-direction=right]:max-w-md"
+			],
+			header: ["bg-white px-8 pt-9 pb-2"],
+			body: ["bg-white px-8 pt-4 pb-7"],
+			footer: ["mt-0 px-8 py-5 md:pb-11"],
+			actions: ["flex w-fit max-w-none flex-row justify-center", "[&_[data-slot=button]]:w-auto"],
+			title: ["font-sans text-2xl leading-8 font-semibold text-[oklch(0.22_0_0)]"],
+			description: ["font-sans text-sm leading-5 text-[oklch(0.48_0_0)]"]
+		}
 	} }
 });
-function BottomSheet(props) {
-	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+function BottomSheet({ direction = "bottom", ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Root, {
+		direction,
+		...props
+	});
 }
-function BottomSheetTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+function BottomSheetTrigger({ children, render, ...props }) {
+	if (render) return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "bottom-sheet-trigger",
+		asChild: true,
+		...props,
+		children: cloneElement(render, void 0, children ?? render.props.children)
+	});
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
 		"data-slot": "bottom-sheet-trigger",
+		...props,
+		children
+	});
+}
+function BottomSheetPortal({ className, children, ...props }) {
+	const portalChildren = Children.map(children, (child) => {
+		if (isValidElement(child) && child.type === BottomSheetPositioner) return Children.map(child.props.children, (positionerChild) => withPortalClassName(positionerChild, className));
+		return withPortalClassName(child, className);
+	});
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		...props,
+		children: portalChildren
+	});
+}
+function withPortalClassName(child, className) {
+	if (!className || !isValidElement(child)) return child;
+	return cloneElement(child, { className: cn(child.props.className, className) });
+}
+function BottomSheetPositioner({ className, ...props }) {
+	const { positioner } = bottomSheet({ theme: useThemeFamily() });
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bottom-sheet-positioner",
+		className: positioner({ className }),
 		...props
 	});
 }
-function BottomSheetPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog.Portal, {
-		"data-slot": "bottom-sheet-portal",
+function BottomSheetOverlay({ className, ...props }) {
+	const theme = useThemeFamily();
+	const { overlay } = bottomSheet({ theme });
+	return /* @__PURE__ */ jsx(Drawer.Overlay, {
+		"data-slot": "bottom-sheet-overlay",
+		"data-theme": theme,
+		className: overlay({ className }),
 		...props
 	});
 }
 function BottomSheetContent({ className, ...props }) {
 	const { content } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(BottomSheetPortal, { children: /* @__PURE__ */ jsx(Dialog.Popup, {
+	return /* @__PURE__ */ jsx(Drawer.Content, {
 		"data-slot": "bottom-sheet-content",
-		"data-side": "bottom",
 		className: content({ className }),
 		...props
-	}) });
+	});
 }
-function BottomSheetClose(props) {
-	return /* @__PURE__ */ jsx(Dialog.Close, {
+function BottomSheetClose({ className, variant, size, children, render, ...props }) {
+	const isBrutal = useThemeFamily() === "brutal";
+	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
 		"data-slot": "bottom-sheet-close",
-		...props
+		asChild: true,
+		...props,
+		children: cloneElement(render, void 0, children ?? render.props.children)
+	});
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "bottom-sheet-close",
+		asChild: true,
+		...props,
+		children: /* @__PURE__ */ jsx(Button$1, {
+			variant: variant ?? (isBrutal ? "outline" : "ghost"),
+			size: size ?? (isBrutal ? "icon-sm" : "icon-sm"),
+			"aria-label": "Close",
+			className: cn(isBrutal ? "absolute top-3 right-3" : "absolute top-4 right-6", isBrutal ? "bg-white" : "p-0 text-foreground-placeholder hover:bg-transparent hover:text-foreground", className),
+			children: children ?? /* @__PURE__ */ jsx(X, { className: "size-4" })
+		})
 	});
 }
 function BottomSheetHeader({ className, render, ...props }) {
@@ -1194,9 +1388,38 @@ function BottomSheetFooter({ className, render, ...props }) {
 		state: { slot: "bottom-sheet-footer" }
 	});
 }
+function BottomSheetBody({ className, render, ...props }) {
+	const { body } = bottomSheet({ theme: useThemeFamily() });
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({ className: body({ className }) }, props),
+		state: { slot: "bottom-sheet-body" }
+	});
+}
+function BottomSheetActions({ className, render, children, ...props }) {
+	const theme = useThemeFamily();
+	const { actions } = bottomSheet({ theme });
+	const count = Math.min(3, countActionChildren(children));
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			className: actions({ className: cn(theme === "elegant" ? "flex-row" : count <= 1 ? "flex max-w-64 flex-col" : count === 2 ? "flex max-w-64 flex-col-reverse" : "grid max-w-[32rem] grid-cols-3", className) }),
+			children
+		}, props),
+		state: { slot: "bottom-sheet-actions" }
+	});
+}
+function countActionChildren(children) {
+	return Children.toArray(children).reduce((count, child) => {
+		if (isValidElement(child) && child.type === Fragment) return count + countActionChildren(child.props.children);
+		return count + 1;
+	}, 0);
+}
 function BottomSheetTitle({ className, ...props }) {
 	const { title } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog.Title, {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
 		"data-slot": "bottom-sheet-title",
 		className: title({ className }),
 		...props
@@ -1204,11 +1427,11 @@ function BottomSheetTitle({ className, ...props }) {
 }
 function BottomSheetDescription({ className, ...props }) {
 	const { description } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog.Description, {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
 		"data-slot": "bottom-sheet-description",
 		className: description({ className }),
 		...props
 	});
 }
 //#endregion
-export { BottomSheet, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxMedia, LightboxPortal, LightboxStage, LightboxTitle, LightboxTrigger, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };
+export { BottomSheet, BottomSheetActions, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetPositioner, BottomSheetTitle, BottomSheetTrigger, ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, Lightbox, LightboxActions, LightboxClose, LightboxContent, LightboxHeader, LightboxInfoActions, LightboxInfoBar, LightboxInfoTitle, LightboxMedia, LightboxNavigationButton, LightboxPortal, LightboxStage, LightboxTitle, LightboxTrigger, ListItem, ListItemActionGroup, ListItemBody, ListItemDescription, ListItemIcon, ListItemMeta, ListItemRow, ListItemTitle, MediaListItem, MediaListItemActionGroup, MediaListItemAside, MediaListItemBody, MediaListItemSubtitle, MediaListItemText, MediaListItemTitle, MediaListItemVisual, PanelHeader, PanelHeaderActions, PanelHeaderContent, PanelHeaderIcon, PanelHeaderSubtitle, PanelHeaderSuffix, PanelHeaderTitle, PanelHeaderTitleRow, PanelHeaderVisual, PreviewShell, QuotedMessageCard, QuotedMessageCardAttachments, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, QuotedMessageCardAuthorSubtitle, QuotedMessageCardBody, QuotedMessageCardChannel, QuotedMessageCardContent, QuotedMessageCardContentWrap, QuotedMessageCardHeader, QuotedMessageCardMeta, QuotedMessageCardSeparator, QuotedMessageCardTag, QuotedMessageCardThread, QuotedMessageCardTimestamp, QuotedMessageCardUnavailable, SectionHeader, SectionHeaderActions, SectionHeaderContent, SectionHeaderCount, SectionHeaderIcon, SectionHeaderTitle, SectionLabel, ToggleGroup, ToggleGroupCount, ToggleGroupItem, ToggleGroupLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raft-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "React UI components for Raft.",
   "license": "MIT",
   "repository": {
@@ -41,7 +41,8 @@
     "cnfast": "^0.0.7",
     "foxact": "^0.3.7",
     "lucide-react": "^1.21.0",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.2.2",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@types/node": "^26.0.0",

package/dist/tv-UUMwNowu.d.mts

@@ -1,16 +0,0 @@
-import { VariantProps } from "tailwind-variants/lite";
-
-//#region src/lib/styled-props.d.ts
-/**
- * Base UI components type `className` as `string | ((state) => string)`, but our
- * tv() recipes only accept a plain string. `StyledProps` narrows a Base UI
- * component's props to a string `className` so they can flow into a recipe.
- *
- * The state-callback form is intentionally dropped: our components express every
- * state through `data-*` variants in the recipe, so a caller never needs it.
- */
-type StyledProps<P> = Omit<P, "className"> & {
-  className?: string;
-};
-//#endregion
-export { StyledProps as n, VariantProps as t };

package/dist/use-theme-Y_h1DKll.mjs

@@ -1,34 +0,0 @@
-import { cn } from "cnfast";
-import { tv } from "tailwind-variants/lite";
-import { createContext, use } from "react";
-//#region src/lib/tv.ts
-const tv$1 = ((options) => {
-	const recipe = tv(options);
-	const wrappedRecipe = ((props) => {
-		const result = recipe(props);
-		if (typeof result === "string") return cn(result);
-		return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
-	});
-	return Object.assign(wrappedRecipe, recipe);
-});
-//#endregion
-//#region src/lib/theme/theme-context.ts
-const ThemeContext = createContext("brutal");
-const ThemeStateContext = createContext({
-	theme: "brutal",
-	setTheme: () => void 0,
-	mode: "light",
-	resolvedMode: "light"
-});
-//#endregion
-//#region src/lib/theme/use-theme.ts
-/** Read the active style family for theme-aware component recipes. */
-function useThemeFamily() {
-	return use(ThemeContext);
-}
-/** Read and update the application-level RUI theme selection. */
-function useTheme() {
-	return use(ThemeStateContext);
-}
-//#endregion
-export { tv$1 as a, ThemeStateContext as i, useThemeFamily as n, ThemeContext as r, useTheme as t };