@vezham/react 26.1.0 → 26.3.1

package/dist/lib/components/panel/footer/user-menu.js

@@ -1,10 +1,14 @@
 import { ACCOUNT_BUBBLE_MEDIA_QUERY, APPLICATION_MENU_SHEET_MEDIA_QUERY } from "../responsive.js";
+import { useOptionalWorkspace } from "../../../workspace/index.js";
+import { WorkspaceActionDialog } from "../../../workspace/action-dialog.js";
+import { CreateWorkspaceDialog } from "../../../workspace/create-dialog.js";
+import { WorkspaceSheetItems, WorkspaceSheetTrigger, renderWorkspaceMenuSection } from "../../../workspace/menu.js";
 import { MenuSheet } from "../../menu/sheet.js";
 import { DEFAULT_STATUS_OPTION, STATUS_OPTIONS, STATUS_TIMING_OPTIONS, SUGGESTED_STATUS_OPTIONS, isColorStatus } from "./data.js";
 import { useState } from "react";
 import { Avatar, Badge, Button, Dropdown, Separator, Tooltip, useMediaQuery } from "@vezham/react-v3";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AltArrowLeft, AltArrowRight, Bell, CheckRead, Logout2, Settings, VezhamTamizhi } from "@vezham/icons-react";
+import { AltArrowLeft, AltArrowRight, Bell, CheckRead, Logout2, Settings, VezhamAccounts, VezhamTamizhi } from "@vezham/icons-react";
 //#region src/lib/components/panel/footer/user-menu.tsx
 var StatusVisual = ({ status }) => {
 	if (isColorStatus(status.id)) return /* @__PURE__ */ jsx("span", { className: `h-2 w-2 rounded-full ${status.color ?? ""}` });
@@ -111,7 +115,10 @@ var AccountIdentity = ({ user, currentStatus }) => /* @__PURE__ */ jsxs("div", {
 				alt: user.name
 			}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
 				className: "text-xl",
-				children: user.name?.[0]
+				children: user.id ? user.name?.[0] : /* @__PURE__ */ jsx(VezhamAccounts, {
+					size: 36,
+					"aria-hidden": "true"
+				})
 			})]
 		}), /* @__PURE__ */ jsx(Badge, {
 			placement: "bottom-right",
@@ -161,7 +168,7 @@ var AccountSectionItems = ({ section, onBack }) => /* @__PURE__ */ jsxs("div", {
 		]
 	}, option.id))]
 });
-var AccountSheetContent = ({ user, currentStatus, actions, sections, onSection, onPreferences, onLogout }) => /* @__PURE__ */ jsxs("div", {
+var AccountSheetContent = ({ workspaceItems, guest, user, currentStatus, actions, sections, onSection, onPreferences, onLogout }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex flex-col items-center gap-5 py-2",
 	children: [
 		/* @__PURE__ */ jsx(AccountIdentity, {
@@ -169,6 +176,7 @@ var AccountSheetContent = ({ user, currentStatus, actions, sections, onSection,
 			currentStatus
 		}),
 		/* @__PURE__ */ jsx(AccountActions, { actions }),
+		workspaceItems,
 		/* @__PURE__ */ jsx(Separator, { className: "self-stretch" }),
 		/* @__PURE__ */ jsxs("div", {
 			className: "flex w-full flex-col gap-1 p-2",
@@ -195,7 +203,7 @@ var AccountSheetContent = ({ user, currentStatus, actions, sections, onSection,
 						"aria-hidden": "true"
 					}), "Preferences"]
 				}),
-				/* @__PURE__ */ jsxs(Button, {
+				!guest && /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
 					className: "text-danger h-auto min-h-11 w-full justify-start gap-3 px-3 py-2 text-start",
 					onPress: onLogout,
@@ -208,17 +216,20 @@ var AccountSheetContent = ({ user, currentStatus, actions, sections, onSection,
 		})
 	]
 });
-var AccountDropdownContent = ({ user, currentStatus, sections, onProfile, onPreferences, onLogout }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+var AccountDropdownContent = ({ workspaceItems, guest, user, currentStatus, sections, onProfile, onPreferences, onLogout }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 	/* @__PURE__ */ jsxs("button", {
 		type: "button",
-		className: "hover:bg-default-100 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left",
+		className: "hover:bg-default flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left",
 		onClick: onProfile,
 		children: [/* @__PURE__ */ jsxs(Avatar, {
 			size: "sm",
 			children: [user.avatar ? /* @__PURE__ */ jsx(Avatar.Image, {
 				src: user.avatar,
 				alt: user.name
-			}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: user.name?.[0] })]
+			}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: user.id ? user.name?.[0] : /* @__PURE__ */ jsx(VezhamAccounts, {
+				size: 20,
+				"aria-hidden": "true"
+			}) })]
 		}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("span", {
 			className: "block font-medium",
 			children: user.name
@@ -260,6 +271,7 @@ var AccountDropdownContent = ({ user, currentStatus, sections, onProfile, onPref
 					}, option.id))
 				})
 			})] }, item.id)),
+			workspaceItems,
 			/* @__PURE__ */ jsx(Separator, {}),
 			/* @__PURE__ */ jsxs(Dropdown.Item, {
 				id: "preferences",
@@ -269,7 +281,7 @@ var AccountDropdownContent = ({ user, currentStatus, sections, onProfile, onPref
 					"aria-hidden": "true"
 				}), "Preferences"]
 			}),
-			/* @__PURE__ */ jsxs(Dropdown.Item, {
+			!guest && /* @__PURE__ */ jsxs(Dropdown.Item, {
 				id: "logout",
 				variant: "danger",
 				onAction: onLogout,
@@ -282,10 +294,9 @@ var AccountDropdownContent = ({ user, currentStatus, sections, onProfile, onPref
 	})
 ] });
 var UserMenuTrigger = ({ small, bubble, user, currentStatus, tooltipText, onPress }) => {
-	const Trigger = small ? Button : Dropdown.Trigger;
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		delay: 0,
-		children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsx(Trigger, {
+		children: [/* @__PURE__ */ jsx(small ? Button : Dropdown.Trigger, {
 			onPress: small ? onPress : void 0,
 			"aria-label": `Open ${user.name || "user"} menu`,
 			className: `button button--ghost relative flex h-12 w-12 items-center justify-center ${bubble ? "rounded-full" : "rounded-xl"}`,
@@ -295,35 +306,24 @@ var UserMenuTrigger = ({ small, bubble, user, currentStatus, tooltipText, onPres
 				children: [user.avatar ? /* @__PURE__ */ jsx(Avatar.Image, {
 					src: user.avatar,
 					alt: user.name
-				}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: user.name?.[0] })]
+				}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, { children: user.id ? user.name?.[0] : /* @__PURE__ */ jsx(VezhamAccounts, {
+					size: 20,
+					"aria-hidden": "true"
+				}) })]
 			}), /* @__PURE__ */ jsx(Badge, {
 				placement: "bottom-right",
 				size: "sm",
 				className: "border-background flex items-center justify-center border",
 				children: /* @__PURE__ */ jsx(StatusVisual, { status: currentStatus })
 			})] })
-		}) }), /* @__PURE__ */ jsx(Tooltip.Content, {
+		}), /* @__PURE__ */ jsx(Tooltip.Content, {
 			placement: bubble ? "bottom" : "right",
 			children: tooltipText
 		})]
 	});
 };
-var UserMenu = ({ user, onLogout, onProfile, onPreferences, showAI = false, showControlCenter = false, showNotifications = false, notificationCount = 0, onAI, onControlCenter, onNotifications }) => {
-	const small = useMediaQuery(APPLICATION_MENU_SHEET_MEDIA_QUERY, { initializeWithValue: false });
-	const bubble = useMediaQuery(ACCOUNT_BUBBLE_MEDIA_QUERY, { initializeWithValue: false });
-	const [open, setOpen] = useState(false);
-	const [section, setSection] = useState(null);
-	const { currentStatus, tooltipText, accountSections } = useAccountSections(user);
-	const activeSection = accountSections.find((item) => item.id === section);
-	const changeOpen = (value) => {
-		setOpen(value);
-		if (!value) setSection(null);
-	};
-	const closeAndRun = (action) => {
-		setOpen(false);
-		action?.();
-	};
-	const compactActions = [
+var getCompactActions = ({ showControlCenter, showNotifications, notificationCount = 0, showAI, onControlCenter, onNotifications, onTamizhi }) => {
+	return [
 		showControlCenter ? {
 			label: "Control center",
 			icon: /* @__PURE__ */ jsx(Settings, {
@@ -350,51 +350,119 @@ var UserMenu = ({ user, onLogout, onProfile, onPreferences, showAI = false, show
 				size: 24,
 				"aria-hidden": "true"
 			}),
-			onPress: onAI
+			onPress: onTamizhi
 		} : null
 	].filter((action) => action !== null);
+};
+var UserMenu = ({ user, onLogout, onProfile, onPreferences, showAI = false, showControlCenter = false, showNotifications = false, notificationCount = 0, onTamizhi, onControlCenter, onNotifications }) => {
+	const small = useMediaQuery(APPLICATION_MENU_SHEET_MEDIA_QUERY, { initializeWithValue: false });
+	const bubble = useMediaQuery(ACCOUNT_BUBBLE_MEDIA_QUERY, { initializeWithValue: false });
+	const workspace = useOptionalWorkspace();
+	const guest = !user.id;
+	const accountUser = guest ? {
+		...user,
+		name: "Guest"
+	} : user;
+	const [workspaceAction, setWorkspaceAction] = useState(null);
+	const [isCreating, setIsCreating] = useState(false);
+	const [open, setOpen] = useState(false);
+	const [section, setSection] = useState(null);
+	const { currentStatus, tooltipText, accountSections } = useAccountSections(accountUser);
+	const activeSection = accountSections.find((item) => item.id === section);
+	const changeOpen = (value) => {
+		setOpen(value);
+		if (!value) setSection(null);
+	};
+	const closeAndRun = (action) => {
+		setOpen(false);
+		action?.();
+	};
+	const compactActions = getCompactActions({
+		showControlCenter,
+		showNotifications,
+		notificationCount,
+		showAI,
+		onControlCenter,
+		onNotifications,
+		onTamizhi
+	});
+	const workspaceActions = workspace ? {
+		workspace,
+		onAction: (action) => {
+			changeOpen(false);
+			setWorkspaceAction(action);
+		},
+		select: (id) => {
+			workspace.select(id);
+			changeOpen(false);
+		},
+		create: () => {
+			changeOpen(false);
+			setIsCreating(true);
+		}
+	} : null;
 	const trigger = /* @__PURE__ */ jsx(UserMenuTrigger, {
 		small,
 		bubble,
-		user,
+		user: accountUser,
 		currentStatus,
 		tooltipText,
 		onPress: () => setOpen(true)
 	});
-	return small ? /* @__PURE__ */ jsxs(Fragment$1, { children: [trigger, /* @__PURE__ */ jsx(MenuSheet, {
-		title: "Account",
-		hideTitle: true,
-		isOpen: open,
-		onOpenChange: changeOpen,
-		children: activeSection ? /* @__PURE__ */ jsx(AccountSectionItems, {
-			section: activeSection,
-			onBack: () => setSection(null)
-		}) : /* @__PURE__ */ jsx(AccountSheetContent, {
-			user,
-			currentStatus,
-			actions: compactActions,
-			sections: accountSections,
-			onSection: setSection,
-			onPreferences: () => closeAndRun(onPreferences),
-			onLogout: () => closeAndRun(onLogout)
-		})
-	})] }) : /* @__PURE__ */ jsxs(Dropdown, {
-		isOpen: open,
-		onOpenChange: changeOpen,
-		children: [trigger, /* @__PURE__ */ jsx(Dropdown.Popover, {
-			placement: bubble ? "bottom end" : "right",
-			offset: 8,
-			className: "w-72 max-w-[calc(100vw-2rem)]",
-			children: /* @__PURE__ */ jsx(AccountDropdownContent, {
-				user,
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		small ? /* @__PURE__ */ jsxs(Fragment$1, { children: [trigger, /* @__PURE__ */ jsx(MenuSheet, {
+			title: "Account",
+			hideTitle: true,
+			isOpen: open,
+			onOpenChange: changeOpen,
+			children: section === "workspaces" && workspaceActions ? /* @__PURE__ */ jsx(WorkspaceSheetItems, {
+				...workspaceActions,
+				onBack: () => setSection(null)
+			}) : activeSection ? /* @__PURE__ */ jsx(AccountSectionItems, {
+				section: activeSection,
+				onBack: () => setSection(null)
+			}) : /* @__PURE__ */ jsx(AccountSheetContent, {
+				workspaceItems: workspaceActions && /* @__PURE__ */ jsx(WorkspaceSheetTrigger, {
+					name: workspaceActions.workspace.active.name,
+					onPress: () => setSection("workspaces")
+				}),
+				guest,
+				user: accountUser,
 				currentStatus,
+				actions: compactActions,
 				sections: accountSections,
-				onProfile: () => closeAndRun(onProfile),
+				onSection: setSection,
 				onPreferences: () => closeAndRun(onPreferences),
 				onLogout: () => closeAndRun(onLogout)
 			})
-		})]
-	});
+		})] }) : /* @__PURE__ */ jsxs(Dropdown, {
+			isOpen: open,
+			onOpenChange: changeOpen,
+			children: [trigger, /* @__PURE__ */ jsx(Dropdown.Popover, {
+				placement: bubble ? "bottom end" : "right",
+				offset: 8,
+				className: "max-h-[80vh] w-72 max-w-[calc(100vw-2rem)] overflow-y-auto",
+				children: /* @__PURE__ */ jsx(AccountDropdownContent, {
+					workspaceItems: workspaceActions && renderWorkspaceMenuSection(workspaceActions),
+					guest,
+					user: accountUser,
+					currentStatus,
+					sections: accountSections,
+					onProfile: () => closeAndRun(onProfile),
+					onPreferences: () => closeAndRun(onPreferences),
+					onLogout: () => closeAndRun(onLogout)
+				})
+			})]
+		}),
+		workspaceAction && /* @__PURE__ */ jsx(WorkspaceActionDialog, {
+			action: workspaceAction,
+			onClose: () => setWorkspaceAction(null)
+		}, `${workspaceAction.type}:${workspaceAction.id}`),
+		workspace && /* @__PURE__ */ jsx(CreateWorkspaceDialog, {
+			isOpen: isCreating,
+			onOpenChange: setIsCreating
+		})
+	] });
 };
 //#endregion
 export { UserMenu };

package/dist/lib/components/panel/header/bookmarks/favorites/variant.js

@@ -23,13 +23,13 @@ var tva = tv({
 			default: {
 				item: "data-[focus-visible]:ring-focus",
 				itemDropTarget: "ring-accent",
-				backgroundFallback: "from-default-200 to-default-300",
+				backgroundFallback: "from-surface-secondary to-surface-tertiary",
 				avatarFallback: "bg-transparent"
 			},
 			subtle: {
 				item: "bg-default/30 data-[focus-visible]:ring-focus",
 				itemDropTarget: "ring-accent",
-				backgroundFallback: "from-default-100 to-default-300",
+				backgroundFallback: "from-surface-secondary to-surface-tertiary",
 				avatarFallback: "bg-transparent"
 			},
 			glass: {

package/dist/lib/components/panel/header/bookmarks/folder-modal/index.js

@@ -62,7 +62,7 @@ var FolderModal = ({ open, mode, form, onFormChange, onOpenChange, onSave }) =>
 										children: "Name:"
 									}), /* @__PURE__ */ jsx(Input, {
 										value: form.name,
-										className: "border-default-200 focus:border-primary focus:ring-primary/25 h-12 w-full rounded-xl border bg-white px-4 text-base outline-none focus:ring-4",
+										className: "border-border focus:border-accent focus:ring-accent/25 h-12 w-full rounded-xl border bg-white px-4 text-base outline-none focus:ring-4",
 										onChange: (event) => updateForm({ name: event.target.value })
 									})]
 								}),
@@ -79,7 +79,7 @@ var FolderModal = ({ open, mode, form, onFormChange, onOpenChange, onSave }) =>
 												children: folderColors.map((color) => /* @__PURE__ */ jsx("button", {
 													type: "button",
 													"aria-label": `Use ${color} folder color`,
-													className: "ring-primary/70 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 shadow-sm transition-transform outline-none hover:scale-105 focus-visible:ring-2",
+													className: "ring-accent/70 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 shadow-sm transition-transform outline-none hover:scale-105 focus-visible:ring-2",
 													style: { backgroundColor: color },
 													onClick: () => updateForm({ color }),
 													children: form.color === color && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-white shadow" })
@@ -128,7 +128,7 @@ var FolderModal = ({ open, mode, form, onFormChange, onOpenChange, onSave }) =>
 													}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx("button", {
 														type: "button",
 														"aria-label": "Choose icon",
-														className: "focus-visible:ring-primary rounded-full outline-none focus-visible:ring-2",
+														className: "focus-visible:ring-accent rounded-full outline-none focus-visible:ring-2",
 														children: /* @__PURE__ */ jsx(FolderVisualPreview, {
 															color: form.visualType === "icon" ? form.color : "#e4e4e7",
 															visualType: "icon",
@@ -144,7 +144,7 @@ var FolderModal = ({ open, mode, form, onFormChange, onOpenChange, onSave }) =>
 															children: folderIconOptions.map((icon) => /* @__PURE__ */ jsx("button", {
 																type: "button",
 																"aria-label": `Use ${icon} icon`,
-																className: "bg-default-200 text-default-700 ring-primary hover:bg-default-300 flex h-10 w-10 items-center justify-center rounded-full transition outline-none focus-visible:ring-2",
+																className: "bg-default-hover text-foreground ring-accent hover:bg-surface-tertiary flex h-10 w-10 items-center justify-center rounded-full transition outline-none focus-visible:ring-2",
 																"data-selected": form.visualType === "icon" && form.icon === icon ? "true" : void 0,
 																onClick: () => updateForm({
 																	visualType: "icon",
@@ -182,7 +182,7 @@ var FolderModal = ({ open, mode, form, onFormChange, onOpenChange, onSave }) =>
 									]
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									className: "border-default-200 flex items-center gap-3 border-t pt-5",
+									className: "border-border flex items-center gap-3 border-t pt-5",
 									children: [/* @__PURE__ */ jsx(FolderVisualPreview, {
 										color: form.color,
 										visualType: form.visualType,
@@ -197,7 +197,7 @@ var FolderModal = ({ open, mode, form, onFormChange, onOpenChange, onSave }) =>
 							]
 						}),
 						/* @__PURE__ */ jsxs(Modal.Footer, {
-							className: "border-default-200 flex justify-end gap-3 border-t px-8 py-5",
+							className: "border-border flex justify-end gap-3 border-t px-8 py-5",
 							children: [/* @__PURE__ */ jsx(Button, {
 								variant: "secondary",
 								className: "min-w-24 rounded-xl",

package/dist/lib/components/panel/header/bookmarks/index.js

@@ -183,7 +183,7 @@ var BookmarksContent = forwardRef((props, ref) => {
 					children: [/* @__PURE__ */ jsxs("div", {
 						...getSectionHeaderProps(),
 						children: [/* @__PURE__ */ jsx(Bookmark, {
-							...getSectionIconProps("text-primary"),
+							...getSectionIconProps("text-accent"),
 							weight: "filled",
 							"aria-hidden": "true"
 						}), /* @__PURE__ */ jsx(Typography.Heading, { ...getSectionTitleProps("Bookmarks") })]

package/dist/lib/components/panel/header/bookmarks/quick-access/index.js

@@ -19,7 +19,7 @@ var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReor
 							"aria-label": "Back to bookmarks",
 							size: "sm",
 							variant: "ghost",
-							className: "text-default-600 shrink-0",
+							className: "text-muted shrink-0",
 							onPress: onBackToNormalView,
 							children: /* @__PURE__ */ jsx(ArrowLeft, {
 								size: 16,
@@ -52,7 +52,7 @@ var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReor
 									src: item.backgroundImage,
 									alt: item.name
 								}) : null, /* @__PURE__ */ jsx(Avatar.Fallback, {
-									className: "bg-default-500 text-white",
+									className: "bg-default text-default-foreground",
 									children: /* @__PURE__ */ jsx(Pin, {
 										className: "text-warning",
 										size: "1em",
@@ -137,21 +137,21 @@ var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReor
 				]
 			}, item.id)), hasMorePins && /* @__PURE__ */ jsx("button", {
 				onClick: onViewAllPins,
-				className: "group bg-default-100 hover:bg-default-200 relative flex aspect-square w-[120px] shrink-0 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl transition-[transform,background-color] hover:scale-[1.02] active:scale-[0.98]",
+				className: "group bg-default hover:bg-default-hover relative flex aspect-square w-[120px] shrink-0 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl transition-[transform,background-color] hover:scale-[1.02] active:scale-[0.98]",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col items-center gap-2 p-4",
 					children: [/* @__PURE__ */ jsx(Eye, {
 						size: 32,
-						className: "text-primary",
+						className: "text-accent",
 						weight: "filled",
 						"aria-hidden": "true"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "text-center",
 						children: [/* @__PURE__ */ jsx(Typography.Paragraph, {
-							className: "text-default-700 text-sm font-semibold",
+							className: "text-foreground text-sm font-semibold",
 							children: "View All"
 						}), /* @__PURE__ */ jsxs(Typography.Paragraph, {
-							className: "text-default-500 text-xs",
+							className: "text-muted text-xs",
 							children: [pins.length - 6, " more"]
 						})]
 					})]
@@ -165,7 +165,7 @@ var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReor
 		children: [/* @__PURE__ */ jsxs("div", {
 			...getSectionHeaderProps(),
 			children: [/* @__PURE__ */ jsx(Heart, {
-				...getSectionIconProps("text-primary"),
+				...getSectionIconProps("text-accent"),
 				weight: "filled",
 				"aria-hidden": "true"
 			}), /* @__PURE__ */ jsx(Typography.Heading, { ...getSectionTitleProps("Favorites") })]
@@ -182,7 +182,7 @@ var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReor
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-1 items-center gap-2",
 				children: [/* @__PURE__ */ jsx(Pin, {
-					...getSectionIconProps("text-primary"),
+					...getSectionIconProps("text-accent"),
 					weight: "filled",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ jsx(Typography.Heading, { ...getSectionTitleProps("Quick Access") })]
@@ -194,7 +194,7 @@ var QuickAccess = ({ mode, favorites, onUnpin, onFavoriteRemove, onFavoritesReor
 					size: "sm",
 					variant: "ghost",
 					onPress: onToggleScrollFavorites,
-					className: "text-default-400",
+					className: "text-muted",
 					children: isScrollFavoritesOpen ? /* @__PURE__ */ jsx(AltArrowUp, {
 						size: 18,
 						"aria-hidden": "true"

package/dist/lib/components/panel/header/bookmarks/variant.js

@@ -4,51 +4,51 @@ var tva = tv({
 	slots: {
 		search_container: "mt-6",
 		search_input: "w-full",
-		search_input_wrapper: "bg-default-100/50",
-		search_icon: "text-default-400",
+		search_input_wrapper: "bg-default/50",
+		search_icon: "text-muted",
 		scroll_shadow: "h-full",
 		empty_container: "flex h-[60vh] flex-col items-center justify-center gap-4 text-center",
-		empty_icon: "text-default-400",
+		empty_icon: "text-muted",
 		empty_title: "text-xl font-semibold",
-		empty_description: "text-default-500 max-w-[220px]",
+		empty_description: "text-muted max-w-[220px]",
 		content_container: "space-y-2 pb-6 @min-[24rem]/info-panel:space-y-6",
 		section: "",
 		section_header: "my-3 flex items-center gap-2",
 		section_icon: "",
-		section_title: "text-default-500 text-sm tracking-wider uppercase",
+		section_title: "text-muted text-sm tracking-wider uppercase",
 		favorites_grid: "flex flex-wrap gap-3",
 		favorite_item: "group relative flex aspect-square w-[calc(30%-5px)] cursor-grab flex-col overflow-hidden rounded-2xl transition-transform hover:scale-[1.02] active:scale-[0.98] active:cursor-grabbing",
 		favorites_grid2: "flex flex-nowrap gap-3 overflow-x-auto pb-2",
 		favorite_item2: "group relative flex aspect-square w-[120px] shrink-0 cursor-grab flex-col overflow-hidden rounded-2xl transition-transform hover:scale-[1.02] active:scale-[0.98] active:cursor-grabbing",
 		favorite_background_image: "absolute inset-0 h-full w-full object-cover",
-		favorite_background_gradient: "from-default-200 to-default-300 absolute inset-0 bg-gradient-to-br",
+		favorite_background_gradient: "from-surface-secondary to-surface-tertiary absolute inset-0 bg-gradient-to-br",
 		favorite_overlay: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent",
 		favorite_avatar_container: "absolute top-2 left-2",
 		favorite_avatar: "ring-2 ring-white/20",
 		favorite_avatar_icon: "text-warning",
-		favorite_avatar_fallback: "bg-default-500 text-white",
+		favorite_avatar_fallback: "bg-default text-default-foreground",
 		favorite_content: "absolute right-0 bottom-0 left-0 p-2",
 		favorite_name: "line-clamp-2 text-xs leading-tight text-white",
 		bookmarks_list: "space-y-1",
-		bookmark_item: "hover:bg-default-100 flex w-full cursor-grab items-center gap-3 rounded-lg py-2 transition-colors active:cursor-grabbing",
+		bookmark_item: "hover:bg-default flex w-full cursor-grab items-center gap-3 rounded-lg py-2 transition-colors active:cursor-grabbing",
 		bookmark_avatar: "shrink-0",
-		bookmark_avatar_fallback: "bg-default-500 text-white",
+		bookmark_avatar_fallback: "bg-default text-default-foreground",
 		bookmark_content: "flex-1 text-left",
 		bookmark_name: "text-sm text-black",
-		bookmark_url: "text-default-500 text-xs",
-		bookmark_arrow: "text-default-400",
+		bookmark_url: "text-muted text-xs",
+		bookmark_arrow: "text-muted",
 		bookmark_delete_button: "opacity-0 group-hover:opacity-100",
 		file_tree: "[&_[data-slot=file-tree-drag-handle]:focus-visible]:outline-focus! [&_[data-slot=file-tree-item]:hover]:bg-default! [&_[data-slot=file-tree-item][data-drop-target]]:bg-accent-soft! [&_[data-slot=file-tree-item][data-drop-target]]:outline-accent/40! [&_.react-aria-DropIndicator[data-drop-target]]:bg-accent! max-h-[calc(100vh-96px)] w-full min-w-0 gap-0.5 p-0 [--file-tree-chevron-offset:0px]! [--file-tree-indent:1rem] [--file-tree-item-px:0rem] data-[empty]:block! data-[empty]:min-h-0! data-[empty]:py-0! data-[empty]:text-left! data-[empty]:not-italic! [&_.react-aria-DropIndicator[data-drop-target]]:h-0.5! [&_.react-aria-DropIndicator[data-drop-target]]:rounded-full! [&_.react-aria-DropIndicator[data-drop-target]]:outline-none! [&_[data-slot=file-tree-drag-handle]]:pointer-events-none! [&_[data-slot=file-tree-drag-handle]]:absolute! [&_[data-slot=file-tree-drag-handle]]:end-8! [&_[data-slot=file-tree-drag-handle]]:size-7! [&_[data-slot=file-tree-drag-handle]]:rounded-md! [&_[data-slot=file-tree-drag-handle]]:opacity-0! [&_[data-slot=file-tree-drag-handle]]:transition-none! [&_[data-slot=file-tree-drag-handle]_svg]:size-4! [&_[data-slot=file-tree-drag-handle]:focus-visible]:opacity-100! [&_[data-slot=file-tree-drag-handle]:focus-visible]:outline-2! [&_[data-slot=file-tree-drag-handle]:hover]:bg-transparent! [&_[data-slot=file-tree-drag-handle]:hover]:opacity-100! [&_[data-slot=file-tree-icon]]:h-4 [&_[data-slot=file-tree-icon]]:w-4 [&_[data-slot=file-tree-item-content]]:min-h-7 [&_[data-slot=file-tree-item-content]]:min-w-0 [&_[data-slot=file-tree-item-content]]:gap-2 [&_[data-slot=file-tree-item-content]]:rounded-md [&_[data-slot=file-tree-item-content]]:pe-1 [&_[data-slot=file-tree-item]]:ring-inset [&_[data-slot=file-tree-item]:has(:focus-visible)_[data-slot=file-tree-drag-handle]]:pointer-events-auto! [&_[data-slot=file-tree-item]:has(:focus-visible)_[data-slot=file-tree-drag-handle]]:opacity-60! [&_[data-slot=file-tree-item]:hover_[data-slot=file-tree-drag-handle]]:pointer-events-auto! [&_[data-slot=file-tree-item]:hover_[data-slot=file-tree-drag-handle]]:opacity-60! [&_[data-slot=file-tree-item][data-drop-target]]:outline-1! [&_[data-slot=file-tree-item][data-focus-visible]_[data-slot=file-tree-drag-handle]]:pointer-events-auto! [&_[data-slot=file-tree-item][data-focus-visible]_[data-slot=file-tree-drag-handle]]:opacity-60! [&_[data-slot=file-tree-label]]:flex [&_[data-slot=file-tree-label]]:min-w-0 [&_[data-slot=file-tree-label]]:flex-1 [&_[slot=chevron]]:cursor-pointer! [&_[slot=chevron]:hover]:bg-transparent! [@media(hover:none)]:[&_[data-slot=file-tree-drag-handle]]:pointer-events-auto! [@media(hover:none)]:[&_[data-slot=file-tree-drag-handle]]:opacity-60!",
 		bookmark_tree_empty_state: "w-full",
 		folder_section: "mt-6",
 		folder_accordion: "px-0",
-		folder_item: "border-default-200 border-b px-0",
+		folder_item: "border-border border-b px-0",
 		folder_heading: "",
 		folder_trigger: "cursor-grab py-2 active:cursor-grabbing",
 		folder_trigger_content: "flex items-center gap-2",
 		folder_icon: "",
 		folder_name: "text-black",
-		folder_count: "text-default-400 text-xs",
+		folder_count: "text-muted text-xs",
 		folder_indicator: "",
 		folder_panel: "",
 		folder_body: "space-y-1 px-0 pb-2"
@@ -56,19 +56,19 @@ var tva = tv({
 	variants: {
 		variant: {
 			default: {
-				search_input_wrapper: "bg-default-100/50",
-				bookmark_item: "hover:bg-default-100",
-				folder_item: "border-default-200"
+				search_input_wrapper: "bg-default/50",
+				bookmark_item: "hover:bg-default",
+				folder_item: "border-border"
 			},
 			dark: {
-				search_input_wrapper: "bg-default-800/50",
-				bookmark_item: "hover:bg-default-800",
-				folder_item: "border-default-700"
+				search_input_wrapper: "bg-default/50",
+				bookmark_item: "hover:bg-default",
+				folder_item: "border-border"
 			},
 			light: {
-				search_input_wrapper: "bg-default-50/50",
-				bookmark_item: "hover:bg-default-50",
-				folder_item: "border-default-100"
+				search_input_wrapper: "bg-default-soft/50",
+				bookmark_item: "hover:bg-default-soft",
+				folder_item: "border-border"
 			},
 			glass: {
 				search_input_wrapper: "bg-white/10",

package/dist/lib/components/panel/header/index.js

@@ -1,6 +1,5 @@
 import { useAppMenu } from "../../app-menu/index.js";
 import { AppIcon } from "../../app-icon/index.js";
-import { useCommand } from "../../command/index.js";
 import "../responsive.js";
 import { useInfoPanel } from "../info-panel/provider.js";
 import { ShortcutKey, ShortcutTooltipLabel } from "../../shortcut-key/index.js";
@@ -8,11 +7,12 @@ import { ApplicationMenuSheet } from "./application-menu-sheet.js";
 import { BookmarksTrigger } from "./bookmarks/index.js";
 import { StorageTrigger } from "./storage/index.js";
 import { useCallback, useState } from "react";
+import { useCommand } from "@vezham/hooks";
 import { Avatar, Button, Dropdown, Label, Separator, Surface, Tooltip, useMediaQuery } from "@vezham/react-v3";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowDown, Archive, Bookmark, Magnifier, SidebarMinimalistic } from "@vezham/icons-react";
 //#region src/lib/components/panel/header/index.tsx
-var Header = ({ users, showSearch = false, showBookamarks = false, showStorage = false, onAvatarClick, onSearchClick, isDockHidden = false, onToggleDock, isSidebarOpen = false, onToggleSidebar, extraActions, className, compact = false, hideSeparator = false, showMenuUtilities = true }) => {
+var Header$1 = ({ users, showSearch = false, showBookamarks = false, showStorage = false, onAvatarClick, onSearchClick, isDockHidden = false, onToggleDock, isSidebarOpen = false, onToggleSidebar, extraActions, className, compact = false, hideSeparator = false, showMenuUtilities = true }) => {
 	const [open, setOpen] = useState(false);
 	const { openCommand } = useCommand();
 	const showHistoryNavigation = useMediaQuery("(max-width: 1023px)", { initializeWithValue: false });
@@ -363,4 +363,4 @@ var HeaderPanelMenuItems = ({ showBookamarks, showStorage, onClose }) => {
 	})] });
 };
 //#endregion
-export { Header };
+export { Header$1 as Header };

package/dist/lib/components/panel/info-panel/provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/info-panel/provider.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAmB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AA6ChE,QAAA,MAAM,iBAAiB,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,gCAwErE,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,eAAO,MAAM,YAAY,6BAQxB,CAAA"}
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/panel/info-panel/provider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAmB,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAkChE,QAAA,MAAM,iBAAiB,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,gCA2ErE,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA;AAE5B,eAAO,MAAM,YAAY,6BAQxB,CAAA"}