raft-ui 0.0.7 → 0.0.8

package/dist/wip.mjs

@@ -1,288 +1,15 @@
-import { a as useThemeFamily, c as tv, t as Button$1 } from "./button-CJqMhTPQ.mjs";
 import { cn } from "./cn.mjs";
-import { Button } from "@base-ui/react/button";
+import { a as tv, n as useThemeFamily } from "./use-theme-Y_h1DKll.mjs";
+import { Dialog } from "@base-ui/react/dialog";
+import { MessageSquare } from "lucide-react";
 import { 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 { MessageSquare } from "lucide-react";
-import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { useHotkey } from "@tanstack/react-hotkeys";
-//#region src/components/dialog/dialog.tsx
-const dialog = tv({
-	slots: {
-		overlay: [
-			"fixed inset-0 z-50",
-			"transition-opacity duration-100",
-			"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
-		],
-		content: [
-			"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2",
-			"outline-none transition-[opacity,transform] duration-100",
-			"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
-			"data-[ending-style]:scale-95 data-[ending-style]:opacity-0"
-		],
-		header: ["flex min-w-0 flex-col gap-1"],
-		body: ["min-w-0"],
-		footer: ["flex items-center justify-end gap-3"],
-		title: ["m-0 min-w-0 text-foreground-strong"],
-		description: ["m-0 text-foreground-muted"]
-	},
-	variants: { theme: {
-		brutal: {
-			overlay: ["bg-black/60"],
-			content: ["gap-4 border-2 border-line-strong bg-layer-panel p-6 shadow-xl"],
-			title: ["font-heading text-lg leading-none font-bold uppercase"],
-			description: ["font-sans text-sm leading-5 text-foreground/60"]
-		},
-		elegant: {
-			overlay: ["bg-black/20"],
-			content: ["gap-5 rounded-lg bg-layer-popover p-5", "shadow-[0_24px_48px_-24px_oklch(0.21_0.006_285_/_0.30),0_0_0_1px_oklch(0.21_0.006_285_/_0.08),0_1px_2px_oklch(0.21_0.006_285_/_0.08)]"],
-			title: ["font-sans text-base leading-5 font-medium tracking-[-0.005em]"],
-			description: ["font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]"]
-		}
-	} }
-});
-function Dialog(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, {
-		"data-slot": "dialog",
-		...props
-	});
-}
-function DialogTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
-		"data-slot": "dialog-trigger",
-		...props
-	});
-}
-function DialogPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
-		"data-slot": "dialog-portal",
-		...props
-	});
-}
-function DialogOverlay({ className, ...props }) {
-	const { overlay } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
-		"data-slot": "dialog-overlay",
-		className: overlay({ className }),
-		...props
-	});
-}
-function DialogContent({ className, children, portalProps, overlay, ...props }) {
-	const { content } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsxs(DialogPortal, {
-		...portalProps,
-		children: [overlay === false ? null : /* @__PURE__ */ jsx(DialogOverlay, { ...overlay }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
-			"data-slot": "dialog-content",
-			className: content({ className }),
-			...props,
-			children
-		})]
-	});
-}
-function DialogClose(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Close, {
-		"data-slot": "dialog-close",
-		...props
-	});
-}
-function DialogHeader({ className, ...props }) {
-	const { header } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-header",
-		className: header({ className }),
-		...props
-	});
-}
-function DialogBody({ className, ...props }) {
-	const { body } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-body",
-		className: body({ className }),
-		...props
-	});
-}
-function DialogFooter({ className, ...props }) {
-	const { footer } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "dialog-footer",
-		className: footer({ className }),
-		...props
-	});
-}
-function DialogTitle({ className, ...props }) {
-	const { title } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Title, {
-		"data-slot": "dialog-title",
-		className: title({ className }),
-		...props
-	});
-}
-function DialogDescription({ className, ...props }) {
-	const { description } = dialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Description, {
-		"data-slot": "dialog-description",
-		className: description({ className }),
-		...props
-	});
-}
-//#endregion
-//#region src/components/alert-dialog/alert-dialog.tsx
-const alertDialog = tv({
-	slots: {
-		overlay: [
-			"fixed inset-0 z-50",
-			"transition-opacity duration-100",
-			"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
-		],
-		content: [
-			"fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2",
-			"outline-none transition-[opacity,transform] duration-100",
-			"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
-			"data-[ending-style]:scale-95 data-[ending-style]:opacity-0"
-		],
-		header: ["grid min-w-0 gap-1"],
-		media: ["flex size-10 shrink-0 items-center justify-center"],
-		body: ["min-w-0"],
-		footer: ["flex items-center justify-end gap-3"],
-		title: ["m-0 min-w-0 text-foreground-strong"],
-		description: ["m-0 text-foreground-muted"]
-	},
-	variants: {
-		theme: {
-			brutal: {
-				overlay: ["bg-black/60"],
-				content: ["gap-4 border-2 border-line-strong bg-layer-panel p-6 shadow-xl"],
-				media: ["border-2 border-line-strong bg-warning-base text-foreground-inverse"],
-				title: ["font-heading text-lg leading-none font-bold uppercase"],
-				description: ["font-sans text-sm leading-5 text-foreground/60"]
-			},
-			elegant: {
-				overlay: ["bg-black/20"],
-				content: ["gap-5 rounded-lg bg-layer-popover p-5", "shadow-[0_24px_48px_-24px_oklch(0.21_0.006_285_/_0.30),0_0_0_1px_oklch(0.21_0.006_285_/_0.08),0_1px_2px_oklch(0.21_0.006_285_/_0.08)]"],
-				media: ["rounded-md bg-danger-lighter text-danger-base"],
-				title: ["font-sans text-base leading-5 font-medium tracking-[-0.005em]"],
-				description: ["font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]"]
-			}
-		},
-		size: {
-			sm: { content: ["max-w-sm"] },
-			md: { content: ["max-w-md"] }
-		}
-	},
-	defaultVariants: { size: "sm" }
-});
-function AlertDialog(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, {
-		"data-slot": "alert-dialog",
-		...props
-	});
-}
-function AlertDialogTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
-		"data-slot": "alert-dialog-trigger",
-		...props
-	});
-}
-function AlertDialogPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
-		"data-slot": "alert-dialog-portal",
-		...props
-	});
-}
-function AlertDialogOverlay({ className, ...props }) {
-	const { overlay } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
-		"data-slot": "alert-dialog-overlay",
-		className: overlay({ className }),
-		...props
-	});
-}
-function AlertDialogContent({ className, children, portalProps, overlay, size, ...props }) {
-	const { content } = alertDialog({
-		theme: useThemeFamily(),
-		size
-	});
-	return /* @__PURE__ */ jsxs(AlertDialogPortal, {
-		...portalProps,
-		children: [overlay === false ? null : /* @__PURE__ */ jsx(AlertDialogOverlay, { ...overlay }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
-			"data-slot": "alert-dialog-content",
-			className: content({ className }),
-			...props,
-			role: "alertdialog",
-			children
-		})]
-	});
-}
-function AlertDialogHeader({ className, ...props }) {
-	const { header } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert-dialog-header",
-		className: header({ className }),
-		...props
-	});
-}
-function AlertDialogMedia({ className, ...props }) {
-	const { media } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert-dialog-media",
-		className: media({ className }),
-		...props
-	});
-}
-function AlertDialogBody({ className, ...props }) {
-	const { body } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert-dialog-body",
-		className: body({ className }),
-		...props
-	});
-}
-function AlertDialogFooter({ className, ...props }) {
-	const { footer } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert-dialog-footer",
-		className: footer({ className }),
-		...props
-	});
-}
-function AlertDialogTitle({ className, ...props }) {
-	const { title } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Title, {
-		"data-slot": "alert-dialog-title",
-		className: title({ className }),
-		...props
-	});
-}
-function AlertDialogDescription({ className, ...props }) {
-	const { description } = alertDialog({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Description, {
-		"data-slot": "alert-dialog-description",
-		className: description({ className }),
-		...props
-	});
-}
-function AlertDialogAction(props) {
-	return /* @__PURE__ */ jsx(Button$1, {
-		"data-slot": "alert-dialog-action",
-		...props
-	});
-}
-function AlertDialogCancel({ className, variant = "outline", size = "sm", ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Close, {
-		"data-slot": "alert-dialog-cancel",
-		render: /* @__PURE__ */ jsx(Button$1, {
-			className,
-			variant,
-			size
-		}),
-		...props
-	});
-}
-//#endregion
 //#region src/components/toggle-group/toggle-group.tsx
 const toggleGroup = tv({
 	slots: {
@@ -690,10 +417,10 @@ const panelHeader = tv({
 	},
 	variants: { theme: {
 		brutal: {
-			root: "border-b-2 border-line-strong bg-layer-panel",
-			icon: "border-line-strong",
-			title: "text-foreground-strong",
-			subtitle: "text-foreground/50"
+			root: "border-b-2 border-black bg-white",
+			icon: "border-black",
+			title: "text-black",
+			subtitle: "text-black/50"
 		},
 		elegant: {}
 	} }
@@ -1305,7 +1032,7 @@ function Lightbox({ closeOnModW = true, defaultOpen = false, modal = true, onOpe
 		onOpenChange?.(nextOpen, eventDetails);
 	}, [onOpenChange, open]);
 	const modWClose = closeOnModW && effectiveOpen ? /* @__PURE__ */ jsx(LightboxModWClose, { dialogRef }) : null;
-	return /* @__PURE__ */ jsxs(Dialog$1.Root, {
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
 		actionsRef: dialogRef,
 		defaultOpen,
 		modal,
@@ -1327,23 +1054,23 @@ function LightboxModWClose({ dialogRef }) {
 	return null;
 }
 function LightboxTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "lightbox-trigger",
 		...props
 	});
 }
 function LightboxPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
 		"data-slot": "lightbox-portal",
 		...props
 	});
 }
 function LightboxContent({ className, initialFocus = false, finalFocus = false, ...props }) {
 	const { backdrop, content } = lightbox({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+	return /* @__PURE__ */ jsxs(LightboxPortal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 		"data-slot": "lightbox-backdrop",
 		className: backdrop()
-	}), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+	}), /* @__PURE__ */ jsx(Dialog.Popup, {
 		"data-slot": "lightbox-content",
 		initialFocus,
 		finalFocus,
@@ -1398,7 +1125,7 @@ function LightboxMedia({ render, className, ...props }) {
 }
 function LightboxClose({ className, ...props }) {
 	const { close } = lightbox({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
 		"data-slot": "lightbox-close",
 		className: close({ className }),
 		...props
@@ -1415,28 +1142,28 @@ const bottomSheet = tv({
 		description: ["text-sm text-foreground/60"]
 	},
 	variants: { theme: {
-		brutal: { content: ["border-2 border-line-strong bg-layer-panel shadow-xl"] },
+		brutal: { content: ["border-2 border-black bg-white text-black shadow-xl"] },
 		elegant: {}
 	} }
 });
 function BottomSheet(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
 }
 function BottomSheetTrigger(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "bottom-sheet-trigger",
 		...props
 	});
 }
 function BottomSheetPortal(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Portal, {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
 		"data-slot": "bottom-sheet-portal",
 		...props
 	});
 }
 function BottomSheetContent({ className, ...props }) {
 	const { content } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(BottomSheetPortal, { children: /* @__PURE__ */ jsx(Dialog$1.Popup, {
+	return /* @__PURE__ */ jsx(BottomSheetPortal, { children: /* @__PURE__ */ jsx(Dialog.Popup, {
 		"data-slot": "bottom-sheet-content",
 		"data-side": "bottom",
 		className: content({ className }),
@@ -1444,7 +1171,7 @@ function BottomSheetContent({ className, ...props }) {
 	}) });
 }
 function BottomSheetClose(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Close, {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
 		"data-slot": "bottom-sheet-close",
 		...props
 	});
@@ -1469,7 +1196,7 @@ function BottomSheetFooter({ className, render, ...props }) {
 }
 function BottomSheetTitle({ className, ...props }) {
 	const { title } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Title, {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-slot": "bottom-sheet-title",
 		className: title({ className }),
 		...props
@@ -1477,11 +1204,11 @@ function BottomSheetTitle({ className, ...props }) {
 }
 function BottomSheetDescription({ className, ...props }) {
 	const { description } = bottomSheet({ theme: useThemeFamily() });
-	return /* @__PURE__ */ jsx(Dialog$1.Description, {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
 		"data-slot": "bottom-sheet-description",
 		className: description({ className }),
 		...props
 	});
 }
 //#endregion
-export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, 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, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raft-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React UI components for Raft.",
   "license": "MIT",
   "repository": {
@@ -39,6 +39,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@tanstack/react-hotkeys": "^0.10.0",
     "cnfast": "^0.0.7",
+    "foxact": "^0.3.7",
     "lucide-react": "^1.21.0",
     "tailwind-variants": "^3.2.2"
   },