raft-ui 0.0.9 → 0.0.11

package/dist/styles.css

@@ -48,6 +48,36 @@
   height: 200%;
 }
 
+@utility toast-gradient-border {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--toast-gradient-border-width, 1px);
+    background: var(
+      --toast-gradient-border,
+      linear-gradient(
+        var(--toast-gradient-border-angle, to bottom),
+        var(--toast-gradient-border-from, rgba(255, 255, 255, 0.24)),
+        var(--toast-gradient-border-via, rgba(255, 255, 255, 0.1)),
+        var(--toast-gradient-border-to, transparent)
+      )
+    );
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -264,6 +294,7 @@
   --color-info-base: var(--state-info-base);
   --color-info-light: var(--state-info-light);
   --color-info-lighter: var(--state-info-lighter);
+  --color-soft-signal: var(--soft-signal);
 
   --color-success-dark: var(--state-success-dark);
   --color-success-base: var(--state-success-base);
@@ -285,6 +316,9 @@
   --shadow-md: var(--theme-shadow-md);
   --shadow-lg: var(--theme-shadow-lg);
   --shadow-xl: var(--theme-shadow-xl);
+  --shadow-brutal-sm: var(--theme-shadow-sm);
+  --shadow-brutal: var(--theme-shadow-md);
+  --shadow-brutal-lg: var(--theme-shadow-xl);
 
   --font-heading: var(--heading-font);
   --font-sans: var(--sans-font);
@@ -353,6 +387,7 @@
   --state-info-base: var(--color-brutal-cyan);
   --state-info-light: var(--color-brutal-cyan-200);
   --state-info-lighter: var(--color-brutal-cyan-100);
+  --soft-signal: var(--color-brutal-yellow);
 
   --state-success-dark: oklch(0.366 0.09 153.079);
   --state-success-base: oklch(0.714 0.176 153.079);
@@ -375,6 +410,11 @@
   --theme-shadow-md: 4px 4px 0px var(--line-strong);
   --theme-shadow-lg: 4px 4px 0px var(--color-black);
   --theme-shadow-xl: 6px 6px 0px var(--line-strong);
+  --shadow-brutal-active: 1px 1px 0px #141111;
+  --shadow-brutal-hover: 2px 2px 0px #141111;
+  --shadow-brutal-sm: 2px 2px 0px #141111;
+  --shadow-brutal: 4px 4px 0px #141111;
+  --shadow-brutal-lg: 6px 6px 0px #141111;
 
   --heading-font: "Hanken Grotesk", system-ui, sans-serif;
   --sans-font: "Hanken Grotesk", system-ui, sans-serif;

package/dist/tv-UUMwNowu.d.mts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,34 @@
+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 };

package/dist/wip.d.mts

@@ -1,10 +1,8 @@
-import { a as StyledProps, i as VariantProps, n as ButtonProps } from "./index-lPUAF7fl.mjs";
-import { Dialog } from "@base-ui/react/dialog";
-import { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import { n as StyledProps, t as VariantProps } from "./tv-UUMwNowu.mjs";
+import { ComponentPropsWithRef } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
-import { Drawer } from "vaul";
 
 //#region src/components/toggle-group/toggle-group.d.ts
 declare const toggleGroup: import("tailwind-variants/lite").TVReturnType<{
@@ -816,155 +814,4 @@ declare function DescriptionAction({
   ...props
 }: DescriptionActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-//#region src/components/lightbox/lightbox.d.ts
-type LightboxProps<Payload = unknown> = Omit<Dialog.Root.Props<Payload>, "actionsRef" | "children" | "handle"> & {
-  children?: ReactNode;
-  closeOnModW?: boolean;
-};
-declare function Lightbox<Payload = unknown>({
-  closeOnModW,
-  defaultOpen,
-  modal,
-  onOpenChange,
-  open,
-  children,
-  ...props
-}: LightboxProps<Payload>): import("react").JSX.Element;
-type LightboxTriggerProps = Dialog.Trigger.Props;
-declare function LightboxTrigger(props: LightboxTriggerProps): import("react").JSX.Element;
-type LightboxPortalProps = Dialog.Portal.Props;
-declare function LightboxPortal(props: LightboxPortalProps): import("react").JSX.Element;
-type LightboxContentProps = StyledProps<Dialog.Popup.Props>;
-declare function LightboxContent({
-  className,
-  initialFocus,
-  finalFocus,
-  ...props
-}: LightboxContentProps): import("react").JSX.Element;
-type LightboxHeaderProps = useRender.ComponentProps<"div">;
-declare function LightboxHeader({
-  render,
-  className,
-  ...props
-}: LightboxHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type LightboxTitleProps = useRender.ComponentProps<"div">;
-declare function LightboxTitle({
-  render,
-  className,
-  ...props
-}: LightboxTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type LightboxActionsProps = useRender.ComponentProps<"div">;
-declare function LightboxActions({
-  render,
-  className,
-  ...props
-}: LightboxActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type LightboxStageProps = useRender.ComponentProps<"div">;
-declare function LightboxStage({
-  render,
-  className,
-  ...props
-}: LightboxStageProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type LightboxMediaProps = useRender.ComponentProps<"div">;
-declare function LightboxMedia({
-  render,
-  className,
-  ...props
-}: LightboxMediaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type LightboxCloseProps = StyledProps<Dialog.Close.Props>;
-declare function LightboxClose({
-  className,
-  ...props
-}: LightboxCloseProps): import("react").JSX.Element;
-//#endregion
-//#region src/components/bottom-sheet/bottom-sheet.d.ts
-type BottomSheetProps = ComponentProps<typeof Drawer.Root>;
-declare function BottomSheet({
-  direction,
-  ...props
-}: BottomSheetProps): import("react").JSX.Element;
-type BottomSheetTriggerProps = Omit<ComponentProps<typeof Drawer.Trigger>, "asChild"> & {
-  render?: ReactElement<{
-    children?: ReactNode;
-  }>;
-};
-declare function BottomSheetTrigger({
-  children,
-  render,
-  ...props
-}: BottomSheetTriggerProps): import("react").JSX.Element;
-type BottomSheetPortalProps = ComponentProps<typeof Drawer.Portal> & {
-  className?: string;
-};
-declare function BottomSheetPortal({
-  className,
-  children,
-  ...props
-}: BottomSheetPortalProps): import("react").JSX.Element;
-type BottomSheetPositionerProps = ComponentPropsWithRef<"div">;
-declare function BottomSheetPositioner({
-  className,
-  ...props
-}: BottomSheetPositionerProps): import("react").JSX.Element;
-type BottomSheetOverlayProps = StyledProps<ComponentProps<typeof Drawer.Overlay>>;
-declare function BottomSheetOverlay({
-  className,
-  ...props
-}: BottomSheetOverlayProps): import("react").JSX.Element;
-type BottomSheetContentProps = StyledProps<ComponentProps<typeof Drawer.Content>>;
-declare function BottomSheetContent({
-  className,
-  ...props
-}: BottomSheetContentProps): import("react").JSX.Element;
-type BottomSheetCloseProps = Omit<ComponentProps<typeof Drawer.Close>, "asChild"> & Pick<ButtonProps, "variant" | "size"> & {
-  className?: string;
-  children?: ReactNode;
-  render?: ReactElement<{
-    children?: ReactNode;
-  }>;
-};
-declare function BottomSheetClose({
-  className,
-  variant,
-  size,
-  children,
-  render,
-  ...props
-}: BottomSheetCloseProps): import("react").JSX.Element;
-type BottomSheetHeaderProps = useRender.ComponentProps<"div">;
-declare function BottomSheetHeader({
-  className,
-  render,
-  ...props
-}: BottomSheetHeaderProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type BottomSheetFooterProps = useRender.ComponentProps<"div">;
-declare function BottomSheetFooter({
-  className,
-  render,
-  ...props
-}: BottomSheetFooterProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type BottomSheetBodyProps = useRender.ComponentProps<"div">;
-declare function BottomSheetBody({
-  className,
-  render,
-  ...props
-}: BottomSheetBodyProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type BottomSheetActionsProps = useRender.ComponentProps<"div">;
-declare function BottomSheetActions({
-  className,
-  render,
-  children,
-  ...props
-}: BottomSheetActionsProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type BottomSheetTitleProps = StyledProps<ComponentProps<typeof Drawer.Title>>;
-declare function BottomSheetTitle({
-  className,
-  ...props
-}: BottomSheetTitleProps): import("react").JSX.Element;
-type BottomSheetDescriptionProps = StyledProps<ComponentProps<typeof Drawer.Description>>;
-declare function BottomSheetDescription({
-  className,
-  ...props
-}: BottomSheetDescriptionProps): import("react").JSX.Element;
-//#endregion
-export { BottomSheet, BottomSheetActions, type BottomSheetActionsProps, BottomSheetBody, type BottomSheetBodyProps, BottomSheetClose, type BottomSheetCloseProps, BottomSheetContent, type BottomSheetContentProps, BottomSheetDescription, type BottomSheetDescriptionProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, BottomSheetOverlay, type BottomSheetOverlayProps, BottomSheetPortal, type BottomSheetPortalProps, BottomSheetPositioner, type BottomSheetPositionerProps, type BottomSheetProps, BottomSheetTitle, type BottomSheetTitleProps, BottomSheetTrigger, type BottomSheetTriggerProps, ConversationPreviewCard, ConversationPreviewCardAction, type ConversationPreviewCardActionProps, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, type ConversationPreviewCardAuthorNameProps, type ConversationPreviewCardAuthorProps, ConversationPreviewCardAuthorSubtitle, type ConversationPreviewCardAuthorSubtitleProps, ConversationPreviewCardChannel, type ConversationPreviewCardChannelProps, ConversationPreviewCardContent, type ConversationPreviewCardContentProps, ConversationPreviewCardFooter, type ConversationPreviewCardFooterProps, ConversationPreviewCardMeta, type ConversationPreviewCardMetaProps, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, type ConversationPreviewCardPreviewAuthorProps, ConversationPreviewCardPreviewLeading, type ConversationPreviewCardPreviewLeadingProps, type ConversationPreviewCardPreviewProps, type ConversationPreviewCardProps, ConversationPreviewCardSecondaryPreview, type ConversationPreviewCardSecondaryPreviewProps, ConversationPreviewCardTimestamp, type ConversationPreviewCardTimestampProps, DescriptionAction, type DescriptionActionProps, DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps, Lightbox, LightboxActions, type LightboxActionsProps, LightboxClose, type LightboxCloseProps, LightboxContent, type LightboxContentProps, LightboxHeader, type LightboxHeaderProps, LightboxMedia, type LightboxMediaProps, LightboxPortal, type LightboxPortalProps, type LightboxProps, LightboxStage, type LightboxStageProps, LightboxTitle, type LightboxTitleProps, LightboxTrigger, type LightboxTriggerProps, ListItem, ListItemActionGroup, type ListItemActionGroupProps, ListItemBody, type ListItemBodyProps, ListItemDescription, type ListItemDescriptionProps, ListItemIcon, type ListItemIconProps, ListItemMeta, type ListItemMetaProps, type ListItemProps, ListItemRow, type ListItemRowProps, ListItemTitle, type ListItemTitleProps, MediaListItem, MediaListItemActionGroup, type MediaListItemActionGroupProps, MediaListItemAside, type MediaListItemAsideProps, MediaListItemBody, type MediaListItemBodyProps, type MediaListItemProps, MediaListItemSubtitle, type MediaListItemSubtitleProps, MediaListItemText, type MediaListItemTextProps, MediaListItemTitle, type MediaListItemTitleProps, MediaListItemVisual, type MediaListItemVisualProps, PanelHeader, PanelHeaderActions, type PanelHeaderActionsProps, PanelHeaderContent, type PanelHeaderContentProps, PanelHeaderIcon, type PanelHeaderIconProps, type PanelHeaderProps, PanelHeaderSubtitle, type PanelHeaderSubtitleProps, PanelHeaderSuffix, type PanelHeaderSuffixProps, PanelHeaderTitle, type PanelHeaderTitleProps, PanelHeaderTitleRow, type PanelHeaderTitleRowProps, PanelHeaderVisual, type PanelHeaderVisualProps, PreviewShell, type PreviewShellProps, QuotedMessageCard, QuotedMessageCardAttachments, type QuotedMessageCardAttachmentsProps, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, type QuotedMessageCardAuthorNameProps, type QuotedMessageCardAuthorProps, QuotedMessageCardAuthorSubtitle, type QuotedMessageCardAuthorSubtitleProps, QuotedMessageCardBody, type QuotedMessageCardBodyProps, QuotedMessageCardChannel, type QuotedMessageCardChannelProps, QuotedMessageCardContent, type QuotedMessageCardContentProps, QuotedMessageCardContentWrap, type QuotedMessageCardContentWrapProps, QuotedMessageCardHeader, type QuotedMessageCardHeaderProps, QuotedMessageCardMeta, type QuotedMessageCardMetaProps, type QuotedMessageCardProps, QuotedMessageCardSeparator, type QuotedMessageCardSeparatorProps, QuotedMessageCardTag, type QuotedMessageCardTagProps, QuotedMessageCardThread, type QuotedMessageCardThreadProps, QuotedMessageCardTimestamp, type QuotedMessageCardTimestampProps, QuotedMessageCardUnavailable, type QuotedMessageCardUnavailableProps, SectionHeader, SectionHeaderActions, type SectionHeaderActionsProps, SectionHeaderContent, type SectionHeaderContentProps, SectionHeaderCount, type SectionHeaderCountProps, SectionHeaderIcon, type SectionHeaderIconProps, type SectionHeaderProps, SectionHeaderTitle, type SectionHeaderTitleProps, SectionLabel, type SectionLabelProps, ToggleGroup, ToggleGroupCount, type ToggleGroupCountProps, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupLabel, type ToggleGroupLabelProps, type ToggleGroupProps };
+export { ConversationPreviewCard, ConversationPreviewCardAction, type ConversationPreviewCardActionProps, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, type ConversationPreviewCardAuthorNameProps, type ConversationPreviewCardAuthorProps, ConversationPreviewCardAuthorSubtitle, type ConversationPreviewCardAuthorSubtitleProps, ConversationPreviewCardChannel, type ConversationPreviewCardChannelProps, ConversationPreviewCardContent, type ConversationPreviewCardContentProps, ConversationPreviewCardFooter, type ConversationPreviewCardFooterProps, ConversationPreviewCardMeta, type ConversationPreviewCardMetaProps, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, type ConversationPreviewCardPreviewAuthorProps, ConversationPreviewCardPreviewLeading, type ConversationPreviewCardPreviewLeadingProps, type ConversationPreviewCardPreviewProps, type ConversationPreviewCardProps, ConversationPreviewCardSecondaryPreview, type ConversationPreviewCardSecondaryPreviewProps, ConversationPreviewCardTimestamp, type ConversationPreviewCardTimestampProps, DescriptionAction, type DescriptionActionProps, DescriptionDetails, type DescriptionDetailsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, DescriptionTerm, type DescriptionTermProps, ListItem, ListItemActionGroup, type ListItemActionGroupProps, ListItemBody, type ListItemBodyProps, ListItemDescription, type ListItemDescriptionProps, ListItemIcon, type ListItemIconProps, ListItemMeta, type ListItemMetaProps, type ListItemProps, ListItemRow, type ListItemRowProps, ListItemTitle, type ListItemTitleProps, MediaListItem, MediaListItemActionGroup, type MediaListItemActionGroupProps, MediaListItemAside, type MediaListItemAsideProps, MediaListItemBody, type MediaListItemBodyProps, type MediaListItemProps, MediaListItemSubtitle, type MediaListItemSubtitleProps, MediaListItemText, type MediaListItemTextProps, MediaListItemTitle, type MediaListItemTitleProps, MediaListItemVisual, type MediaListItemVisualProps, PanelHeader, PanelHeaderActions, type PanelHeaderActionsProps, PanelHeaderContent, type PanelHeaderContentProps, PanelHeaderIcon, type PanelHeaderIconProps, type PanelHeaderProps, PanelHeaderSubtitle, type PanelHeaderSubtitleProps, PanelHeaderSuffix, type PanelHeaderSuffixProps, PanelHeaderTitle, type PanelHeaderTitleProps, PanelHeaderTitleRow, type PanelHeaderTitleRowProps, PanelHeaderVisual, type PanelHeaderVisualProps, PreviewShell, type PreviewShellProps, QuotedMessageCard, QuotedMessageCardAttachments, type QuotedMessageCardAttachmentsProps, QuotedMessageCardAuthor, QuotedMessageCardAuthorName, type QuotedMessageCardAuthorNameProps, type QuotedMessageCardAuthorProps, QuotedMessageCardAuthorSubtitle, type QuotedMessageCardAuthorSubtitleProps, QuotedMessageCardBody, type QuotedMessageCardBodyProps, QuotedMessageCardChannel, type QuotedMessageCardChannelProps, QuotedMessageCardContent, type QuotedMessageCardContentProps, QuotedMessageCardContentWrap, type QuotedMessageCardContentWrapProps, QuotedMessageCardHeader, type QuotedMessageCardHeaderProps, QuotedMessageCardMeta, type QuotedMessageCardMetaProps, type QuotedMessageCardProps, QuotedMessageCardSeparator, type QuotedMessageCardSeparatorProps, QuotedMessageCardTag, type QuotedMessageCardTagProps, QuotedMessageCardThread, type QuotedMessageCardThreadProps, QuotedMessageCardTimestamp, type QuotedMessageCardTimestampProps, QuotedMessageCardUnavailable, type QuotedMessageCardUnavailableProps, SectionHeader, SectionHeaderActions, type SectionHeaderActionsProps, SectionHeaderContent, type SectionHeaderContentProps, SectionHeaderCount, type SectionHeaderCountProps, SectionHeaderIcon, type SectionHeaderIconProps, type SectionHeaderProps, SectionHeaderTitle, type SectionHeaderTitleProps, SectionLabel, type SectionLabelProps, ToggleGroup, ToggleGroupCount, type ToggleGroupCountProps, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupLabel, type ToggleGroupLabelProps, type ToggleGroupProps };

package/dist/wip.mjs

@@ -1,16 +1,12 @@
 import { cn } from "./cn.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, X } from "lucide-react";
-import { Children, Fragment, cloneElement, isValidElement, useCallback, useRef, useState } from "react";
+import { a as tv, n as useThemeFamily } from "./use-theme-Y_h1DKll.mjs";
+import { MessageSquare } from "lucide-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 as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, 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: {
@@ -639,7 +635,7 @@ function QuotedMessageCardThread({ className, render, children = "Thread", ...pr
 		render,
 		props: mergeProps({
 			className: thread({ className }),
-			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MessageSquare, {}), children] })
 		}, props),
 		state: { slot: "quoted-message-card-thread" }
 	});
@@ -1003,332 +999,4 @@ function DescriptionAction({ className, render, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/lightbox/lightbox.tsx
-const lightbox = tv({
-	slots: {
-		backdrop: ["fixed inset-0 z-[70] bg-layer-backdrop data-[closed]:hidden"],
-		content: ["pointer-events-none fixed inset-0 z-[71] data-[closed]:hidden"],
-		header: ["safe-top safe-left safe-right pointer-events-auto shrink-0"],
-		title: ["min-w-0 flex-1 truncate font-heading text-sm font-bold"],
-		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"],
-		close: []
-	},
-	variants: { theme: {
-		brutal: {
-			header: ["border-b-2 border-line-strong bg-layer-panel"],
-			title: ["text-foreground-strong"],
-			media: ["border-line-strong bg-layer-panel shadow-xl"]
-		},
-		elegant: { backdrop: ["backdrop-blur-[2px]"] }
-	} }
-});
-function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpenChange, open, children, ...props }) {
-	const dialogRef = useRef(null);
-	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-	const effectiveOpen = open ?? uncontrolledOpen;
-	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
-		if (open === void 0) setUncontrolledOpen(nextOpen);
-		onOpenChange?.(nextOpen, eventDetails);
-	}, [onOpenChange, open]);
-	const modWClose = closeOnModW && effectiveOpen ? /* @__PURE__ */ jsx(LightboxModWClose, { dialogRef }) : null;
-	return /* @__PURE__ */ jsxs(Dialog.Root, {
-		actionsRef: dialogRef,
-		defaultOpen,
-		modal,
-		onOpenChange: handleOpenChange,
-		open,
-		...props,
-		children: [modWClose, children]
-	});
-}
-function LightboxModWClose({ dialogRef }) {
-	useHotkey("Mod+W", (event) => {
-		event.preventDefault();
-		event.stopPropagation();
-		dialogRef.current?.close();
-	}, { meta: {
-		name: "Close lightbox",
-		description: "Close the active lightbox before the browser closes the tab."
-	} });
-	return null;
-}
-function LightboxTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog.Trigger, {
-		"data-slot": "lightbox-trigger",
-		...props
-	});
-}
-function LightboxPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog.Portal, {
-		"data-slot": "lightbox-portal",
-		...props
-	});
-}
-function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
-	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",
-		initialFocus,
-		finalFocus,
-		className: content({ className }),
-		...props
-	})] });
-}
-function LightboxHeader({ render, className, ...props }) {
-	const { header } = lightbox({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: header({ className }) }, props),
-		state: { slot: "lightbox-header" }
-	});
-}
-function LightboxTitle({ render, className, ...props }) {
-	const { title } = lightbox({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: title({ className }) }, props),
-		state: { slot: "lightbox-title" }
-	});
-}
-function LightboxActions({ render, className, ...props }) {
-	const { actions } = lightbox({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: actions({ className }) }, props),
-		state: { slot: "lightbox-actions" }
-	});
-}
-function LightboxStage({ render, className, ...props }) {
-	const { stage } = lightbox({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: stage({ className }) }, props),
-		state: { slot: "lightbox-stage" }
-	});
-}
-function LightboxMedia({ render, className, ...props }) {
-	const { media } = lightbox({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: media({ className }) }, props),
-		state: { slot: "lightbox-media" }
-	});
-}
-function LightboxClose({ className, ...props }) {
-	const { close } = lightbox({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog.Close, {
-		"data-slot": "lightbox-close",
-		className: close({ className }),
-		...props
-	});
-}
-//#endregion
-//#region src/components/bottom-sheet/bottom-sheet.tsx
-const bottomSheet = tv({
-	slots: {
-		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: {
-			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({ direction = "bottom", ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Root, {
-		direction,
-		...props
-	});
-}
-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 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(Drawer.Content, {
-		"data-slot": "bottom-sheet-content",
-		className: content({ className }),
-		...props
-	});
-}
-function BottomSheetClose({ className, variant, size, children, render, ...props }) {
-	const isBrutal = useThemeFamily() === "brutal";
-	if (render) return /* @__PURE__ */ jsx(Drawer.Close, {
-		"data-slot": "bottom-sheet-close",
-		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 }) {
-	const { header } = bottomSheet({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: header({ className }) }, props),
-		state: { slot: "bottom-sheet-header" }
-	});
-}
-function BottomSheetFooter({ className, render, ...props }) {
-	const { footer } = bottomSheet({ theme: useThemeFamily() });
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps({ className: footer({ className }) }, 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(Drawer.Title, {
-		"data-slot": "bottom-sheet-title",
-		className: title({ className }),
-		...props
-	});
-}
-function BottomSheetDescription({ className, ...props }) {
-	const { description } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Drawer.Description, {
-		"data-slot": "bottom-sheet-description",
-		className: description({ className }),
-		...props
-	});
-}
-//#endregion
-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, 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 { ConversationPreviewCard, ConversationPreviewCardAction, ConversationPreviewCardAuthor, ConversationPreviewCardAuthorName, ConversationPreviewCardAuthorSubtitle, ConversationPreviewCardChannel, ConversationPreviewCardContent, ConversationPreviewCardFooter, ConversationPreviewCardMeta, ConversationPreviewCardPreview, ConversationPreviewCardPreviewAuthor, ConversationPreviewCardPreviewLeading, ConversationPreviewCardSecondaryPreview, ConversationPreviewCardTimestamp, DescriptionAction, DescriptionDetails, DescriptionItem, DescriptionList, DescriptionTerm, 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 };