@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.7

package/dist/lib/components/app-icon/index.js

@@ -0,0 +1,513 @@
+import { jsx } from "react/jsx-runtime";
+import { Add, AddFolder, Airbuds, AltArrowDown, AltArrowLeft, AltArrowRight, AltArrowUp, Archive, ArchiveUp, ArrowLeft, ArrowRight, ArrowRightUp, Backpack, Banknote, Bell, Bill, Bluetooth, Book, Book2, BookBookmark, Bookmark, Box, Buildings, Buildings3, Calendar, CalendarDate, CalendarMark, CallDropped, Card, CartLarge, Case, Chart, ChartSquare, ChatRoundDots, CheckCircle, ClipboardList, ClockCircle, Close, Copy, CupStar, Devices, Document, DocumentAdd, DocumentText, Download, Dumbbell, Eye, FileText, Flag, Folder, FolderWithFiles, Gallery, Gamepad, Gift, HeadphonesRound, Heart, Home, IncomingCall, Key, Leaf, Library, List, Magnifier, MenuDots, Moon, NotebookBookmark, OutgoingCall, Palette, PaletteRound, Pen, Play, Printer, QuestionCircle, RecordCircle, Refresh, Settings, Share, ShieldCheck, Sidebar, SidebarMinimalistic, SkipNext, SkipPrevious, SmileCircle, SortFromBottomToTop, SortFromTopToBottom, SortVertical, SquareAcademicCap, Star, Sun, Sun2, TrashBinTrash, Upload, User, UserCheck, UserCheckRounded, UsersGroupRounded, VerifiedCheck, Videocamera, VolumeLoud, Wallet, WiFi, Widget, Widget2 } from "@vezham/icons-react";
+//#region src/lib/components/app-icon/index.tsx
+var icons = {
+	"vx:sort-descending": {
+		component: SortFromTopToBottom,
+		weight: "outline"
+	},
+	"vx:arrow-left": {
+		component: ArrowLeft,
+		weight: "outline"
+	},
+	"vx:arrow-right": {
+		component: ArrowRight,
+		weight: "outline"
+	},
+	"vx:sort-ascending": {
+		component: SortFromBottomToTop,
+		weight: "outline"
+	},
+	"vx:verified": {
+		component: VerifiedCheck,
+		weight: "outline"
+	},
+	"vx:chart": {
+		component: Chart,
+		weight: "outline"
+	},
+	"vx:bell": {
+		component: Bell,
+		weight: "outline"
+	},
+	"vx:book": {
+		component: Book,
+		weight: "outline"
+	},
+	"vx:book-open": {
+		component: Book2,
+		weight: "outline"
+	},
+	"vx:briefcase": {
+		component: Case,
+		weight: "outline"
+	},
+	"vx:calendar-check": {
+		component: CalendarMark,
+		weight: "outline"
+	},
+	"vx:calendar-clock": {
+		component: CalendarDate,
+		weight: "outline"
+	},
+	"vx:calendar-days": {
+		component: CalendarDate,
+		weight: "outline"
+	},
+	"vx:calendar-minus": {
+		component: Calendar,
+		weight: "outline"
+	},
+	"vx:check": {
+		component: CheckCircle,
+		weight: "filled"
+	},
+	"vx:chevron-down": {
+		component: AltArrowDown,
+		weight: "outline"
+	},
+	"vx:chevron-left": {
+		component: AltArrowLeft,
+		weight: "outline"
+	},
+	"vx:chevron-right": {
+		component: AltArrowRight,
+		weight: "outline"
+	},
+	"vx:chevron-up": {
+		component: AltArrowUp,
+		weight: "outline"
+	},
+	"vx:chevrons-up-down": {
+		component: SortVertical,
+		weight: "outline"
+	},
+	"vx:status": {
+		component: RecordCircle,
+		weight: "outline"
+	},
+	"vx:help": {
+		component: QuestionCircle,
+		weight: "outline"
+	},
+	"vx:clipboard-list": {
+		component: ClipboardList,
+		weight: "outline"
+	},
+	"vx:clock": {
+		component: ClockCircle,
+		weight: "outline"
+	},
+	"vx:clock-3": {
+		component: ClockCircle,
+		weight: "outline"
+	},
+	"vx:download": {
+		component: Download,
+		weight: "outline"
+	},
+	"vx:dumbbell": {
+		component: Dumbbell,
+		weight: "outline"
+	},
+	"vx:eye": {
+		component: Eye,
+		weight: "outline"
+	},
+	"vx:report": {
+		component: ChartSquare,
+		weight: "outline"
+	},
+	"vx:document-edit": {
+		component: DocumentAdd,
+		weight: "outline"
+	},
+	"vx:file-spreadsheet": {
+		component: DocumentText,
+		weight: "outline"
+	},
+	"vx:file-text": {
+		component: FileText,
+		weight: "outline"
+	},
+	"vx:academic-cap": {
+		component: SquareAcademicCap,
+		weight: "outline"
+	},
+	"vx:home": {
+		component: Home,
+		weight: "outline"
+	},
+	"vx:grid": {
+		component: Widget,
+		weight: "outline"
+	},
+	"vx:library": {
+		component: Library,
+		weight: "outline"
+	},
+	"vx:list": {
+		component: List,
+		weight: "outline"
+	},
+	"vx:menu-horizontal": {
+		component: MenuDots,
+		weight: "outline"
+	},
+	"vx:menu-vertical": {
+		component: MenuDots,
+		weight: "outline",
+		rotate: 90
+	},
+	"vx:box": {
+		component: Box,
+		weight: "outline"
+	},
+	"vx:panel-left-close": {
+		component: SidebarMinimalistic,
+		weight: "outline"
+	},
+	"vx:panel-left-open": {
+		component: SidebarMinimalistic,
+		weight: "outline"
+	},
+	"vx:pencil": {
+		component: Pen,
+		weight: "outline"
+	},
+	"vx:phone-incoming": {
+		component: IncomingCall,
+		weight: "outline"
+	},
+	"vx:phone-missed": {
+		component: CallDropped,
+		weight: "outline"
+	},
+	"vx:phone-outgoing": {
+		component: OutgoingCall,
+		weight: "outline"
+	},
+	"vx:plus": {
+		component: Add,
+		weight: "outline"
+	},
+	"vx:printer": {
+		component: Printer,
+		weight: "outline"
+	},
+	"vx:receipt": {
+		component: Bill,
+		weight: "outline"
+	},
+	"vx:refresh": {
+		component: Refresh,
+		weight: "outline"
+	},
+	"vx:school": {
+		component: Buildings,
+		weight: "outline"
+	},
+	"vx:search": {
+		component: Magnifier,
+		weight: "outline"
+	},
+	"vx:settings": {
+		component: Settings,
+		weight: "outline"
+	},
+	"vx:sidebar": {
+		component: Sidebar,
+		weight: "outline"
+	},
+	"vx:trash": {
+		component: TrashBinTrash,
+		weight: "outline"
+	},
+	"vx:upload": {
+		component: Upload,
+		weight: "outline"
+	},
+	"vx:user": {
+		component: User,
+		weight: "outline"
+	},
+	"vx:user-check": {
+		component: UserCheck,
+		weight: "outline"
+	},
+	"vx:user-round-check": {
+		component: UserCheckRounded,
+		weight: "outline"
+	},
+	"vx:users": {
+		component: UsersGroupRounded,
+		weight: "outline"
+	},
+	"vx:wallet": {
+		component: Wallet,
+		weight: "outline"
+	},
+	"vx:close": {
+		component: Close,
+		weight: "outline"
+	},
+	"vx:skip-next": {
+		component: SkipNext,
+		weight: "filled"
+	},
+	"vx:skip-previous": {
+		component: SkipPrevious,
+		weight: "filled"
+	},
+	"vx:wifi": {
+		component: WiFi,
+		weight: "filled"
+	},
+	"vx:airbuds-filled": {
+		component: Airbuds,
+		weight: "filled"
+	},
+	"vx:archive-filled": {
+		component: Archive,
+		weight: "filled"
+	},
+	"vx:archive": {
+		component: Archive,
+		weight: "outline"
+	},
+	"vx:archive-up": {
+		component: ArchiveUp,
+		weight: "outline"
+	},
+	"vx:external-link": {
+		component: ArrowRightUp,
+		weight: "outline"
+	},
+	"vx:backpack-filled": {
+		component: Backpack,
+		weight: "filled"
+	},
+	"vx:banknote-filled": {
+		component: Banknote,
+		weight: "filled"
+	},
+	"vx:bluetooth-filled": {
+		component: Bluetooth,
+		weight: "filled"
+	},
+	"vx:book-bookmark-filled": {
+		component: BookBookmark,
+		weight: "filled"
+	},
+	"vx:bookmark-filled": {
+		component: Bookmark,
+		weight: "filled"
+	},
+	"vx:box-filled": {
+		component: Box,
+		weight: "filled"
+	},
+	"vx:buildings-3-filled": {
+		component: Buildings3,
+		weight: "filled"
+	},
+	"vx:card-filled": {
+		component: Card,
+		weight: "filled"
+	},
+	"vx:card": {
+		component: Card,
+		weight: "outline"
+	},
+	"vx:cart-large-filled": {
+		component: CartLarge,
+		weight: "filled"
+	},
+	"vx:chart-filled": {
+		component: Chart,
+		weight: "filled"
+	},
+	"vx:chat-round-dots": {
+		component: ChatRoundDots,
+		weight: "outline"
+	},
+	"vx:copy-filled": {
+		component: Copy,
+		weight: "filled"
+	},
+	"vx:cup-star-filled": {
+		component: CupStar,
+		weight: "filled"
+	},
+	"vx:devices": {
+		component: Devices,
+		weight: "outline"
+	},
+	"vx:document-filled": {
+		component: Document,
+		weight: "filled"
+	},
+	"vx:document": {
+		component: Document,
+		weight: "outline"
+	},
+	"vx:flag-filled": {
+		component: Flag,
+		weight: "filled"
+	},
+	"vx:folder-filled": {
+		component: Folder,
+		weight: "filled"
+	},
+	"vx:folder-add": {
+		component: AddFolder,
+		weight: "outline"
+	},
+	"vx:folder-with-files": {
+		component: FolderWithFiles,
+		weight: "outline"
+	},
+	"vx:gallery": {
+		component: Gallery,
+		weight: "outline"
+	},
+	"vx:gamepad-filled": {
+		component: Gamepad,
+		weight: "filled"
+	},
+	"vx:gift-filled": {
+		component: Gift,
+		weight: "filled"
+	},
+	"vx:headphones-round-filled": {
+		component: HeadphonesRound,
+		weight: "filled"
+	},
+	"vx:heart-filled": {
+		component: Heart,
+		weight: "filled"
+	},
+	"vx:home-filled": {
+		component: Home,
+		weight: "filled"
+	},
+	"vx:key-filled": {
+		component: Key,
+		weight: "filled"
+	},
+	"vx:leaf-filled": {
+		component: Leaf,
+		weight: "filled"
+	},
+	"vx:library-filled": {
+		component: Library,
+		weight: "filled"
+	},
+	"vx:list-filled": {
+		component: List,
+		weight: "filled"
+	},
+	"vx:moon-filled": {
+		component: Moon,
+		weight: "filled"
+	},
+	"vx:notebook-bookmark-filled": {
+		component: NotebookBookmark,
+		weight: "filled"
+	},
+	"vx:palette": {
+		component: Palette,
+		weight: "outline"
+	},
+	"vx:palette-filled": {
+		component: Palette,
+		weight: "filled"
+	},
+	"vx:palette-round": {
+		component: PaletteRound,
+		weight: "outline"
+	},
+	"vx:pen": {
+		component: Pen,
+		weight: "outline"
+	},
+	"vx:play-filled": {
+		component: Play,
+		weight: "filled"
+	},
+	"vx:settings-filled": {
+		component: Settings,
+		weight: "filled"
+	},
+	"vx:share": {
+		component: Share,
+		weight: "outline"
+	},
+	"vx:shield-check": {
+		component: ShieldCheck,
+		weight: "outline"
+	},
+	"vx:smile-circle": {
+		component: SmileCircle,
+		weight: "outline"
+	},
+	"vx:academic-cap-filled": {
+		component: SquareAcademicCap,
+		weight: "filled"
+	},
+	"vx:star-filled": {
+		component: Star,
+		weight: "filled"
+	},
+	"vx:star": {
+		component: Star,
+		weight: "outline"
+	},
+	"vx:sun-2-filled": {
+		component: Sun2,
+		weight: "filled"
+	},
+	"vx:sun-filled": {
+		component: Sun,
+		weight: "filled"
+	},
+	"vx:users-filled": {
+		component: UsersGroupRounded,
+		weight: "filled"
+	},
+	"vx:videocamera": {
+		component: Videocamera,
+		weight: "outline"
+	},
+	"vx:volume-loud-filled": {
+		component: VolumeLoud,
+		weight: "filled"
+	},
+	"vx:wallet-filled": {
+		component: Wallet,
+		weight: "filled"
+	},
+	"vx:widget-2-filled": {
+		component: Widget2,
+		weight: "filled"
+	}
+};
+var AppIcon = ({ icon, size, width, height, style, ...props }) => {
+	if (!icon) return null;
+	if (!Object.prototype.hasOwnProperty.call(icons, icon)) return null;
+	const entry = icons[icon];
+	const Component = entry.component;
+	return /* @__PURE__ */ jsx(Component, {
+		size: width ?? size ?? "1em",
+		height: height ?? width ?? size ?? "1em",
+		weight: entry.weight,
+		style: {
+			..."rotate" in entry ? { transform: `rotate(${entry.rotate}deg)` } : {},
+			...style
+		},
+		"aria-hidden": "true",
+		...props
+	});
+};
+//#endregion
+export { AppIcon };

package/dist/lib/components/app-menu/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type AppMenuAction = {
+    key: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+};
+export type AppMenuItem = {
+    key: string;
+    label: string;
+    icon?: string;
+    groups: AppMenuAction[][];
+};
+type Props = {
+    children: ReactNode;
+    items: AppMenuItem[];
+    onAction: (action: AppMenuAction) => void;
+};
+export declare const AppMenuProvider: ({ children, items, onAction }: Props) => import("react").JSX.Element;
+export declare const useAppMenu: () => Omit<Props, "children"> | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/app-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/app-menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAA;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,aAAa,EAAE,EAAE,CAAA;CAC1B,CAAA;AAED,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAA;CAC1C,CAAA;AAID,eAAO,MAAM,eAAe,GAAI,+BAA+B,KAAK,gCAKnE,CAAA;AAED,eAAO,MAAM,UAAU,sCAAmC,CAAA"}

package/dist/lib/components/app-menu/index.js

@@ -0,0 +1,17 @@
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/app-menu/index.tsx
+var AppMenuContext = createContext(null);
+var AppMenuProvider = ({ children, items, onAction }) => {
+	const value = useMemo(() => ({
+		items,
+		onAction
+	}), [items, onAction]);
+	return /* @__PURE__ */ jsx(AppMenuContext.Provider, {
+		value,
+		children
+	});
+};
+var useAppMenu = () => useContext(AppMenuContext);
+//#endregion
+export { AppMenuProvider, useAppMenu };

package/dist/lib/components/command/command-dialog.d.ts

@@ -0,0 +1,10 @@
+import { AppNavigationItem } from '../../navigation';
+interface Props {
+    isOpen: boolean;
+    items: AppNavigationItem[];
+    onOpenChange: (isOpen: boolean) => void;
+    onAction?: () => void;
+}
+declare const CommandPaletteDialog: ({ isOpen, items, onOpenChange, onAction }: Props) => import("react").JSX.Element;
+export { CommandPaletteDialog };
+//# sourceMappingURL=command-dialog.d.ts.map

package/dist/lib/components/command/command-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-dialog.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/command-dialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAA;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmDD,QAAA,MAAM,oBAAoB,GAAI,2CAK3B,KAAK,gCAuEP,CAAA;AAqDD,OAAO,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/lib/components/command/command-dialog.js

@@ -0,0 +1,129 @@
+import { AppIcon } from "../app-icon/index.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Magnifier } from "@vezham/icons-react";
+import { Command } from "@vezham/react-pro-v3";
+//#region src/lib/components/command/command-dialog.tsx
+var DEFAULT_COMMAND_ICON = "vx:status";
+var actionCommands = [
+	{
+		id: "go-back",
+		label: "Back",
+		description: "Go to the previous page",
+		icon: "vx:arrow-left",
+		action: () => window.history.back()
+	},
+	{
+		id: "go-forward",
+		label: "Forward",
+		description: "Go to the next page",
+		icon: "vx:arrow-right",
+		action: () => window.history.forward()
+	},
+	{
+		id: "print-page",
+		label: "Print",
+		description: "Print the current page",
+		icon: "vx:printer",
+		action: () => window.print()
+	},
+	{
+		id: "refresh-page",
+		label: "Refresh",
+		description: "Reload the current page",
+		icon: "vx:refresh",
+		action: () => window.location.reload()
+	}
+];
+var CommandPaletteDialog = ({ isOpen, items, onOpenChange, onAction }) => {
+	const navigate = useNavigate();
+	const navigationCommands = createNavigationCommands(items);
+	const closeCommand = () => {
+		onAction?.();
+	};
+	const runNavigationCommand = (command) => {
+		navigate({ to: command.href });
+		closeCommand();
+	};
+	const runActionCommand = (command) => {
+		command.action();
+		closeCommand();
+	};
+	return /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsx(Command.Backdrop, {
+		isOpen,
+		onOpenChange,
+		className: "z-80",
+		variant: "blur",
+		children: /* @__PURE__ */ jsx(Command.Container, {
+			size: "lg",
+			children: /* @__PURE__ */ jsxs(Command.Dialog, { children: [/* @__PURE__ */ jsx(Command.Header, { children: /* @__PURE__ */ jsxs(Command.InputGroup, { children: [
+				/* @__PURE__ */ jsx(Command.InputGroup.Prefix, { children: /* @__PURE__ */ jsx(Magnifier, {
+					size: 18,
+					"aria-hidden": "true"
+				}) }),
+				/* @__PURE__ */ jsx(Command.InputGroup.Input, { placeholder: "Search commands..." }),
+				/* @__PURE__ */ jsx(Command.InputGroup.ClearButton, { "aria-label": "Clear search" })
+			] }) }), /* @__PURE__ */ jsxs(Command.List, {
+				"aria-label": "Command palette",
+				renderEmptyState: () => "No commands found.",
+				children: [
+					/* @__PURE__ */ jsx(Command.Group, {
+						heading: "Navigation",
+						children: navigationCommands.map((command) => /* @__PURE__ */ jsx(Command.Item, {
+							id: command.id,
+							textValue: `${command.label} ${command.description}`,
+							onAction: () => runNavigationCommand(command),
+							children: /* @__PURE__ */ jsx(CommandItemContent, { ...command })
+						}, command.id))
+					}),
+					/* @__PURE__ */ jsx(Command.Separator, {}),
+					/* @__PURE__ */ jsx(Command.Group, {
+						heading: "Actions",
+						children: actionCommands.map((command) => /* @__PURE__ */ jsx(Command.Item, {
+							id: command.id,
+							textValue: `${command.label} ${command.description}`,
+							onAction: () => runActionCommand(command),
+							children: /* @__PURE__ */ jsx(CommandItemContent, { ...command })
+						}, command.id))
+					})
+				]
+			})] })
+		})
+	}) });
+};
+var createNavigationCommands = (items, section) => {
+	return items.flatMap((item) => {
+		const children = item.submenu ?? item.children;
+		return [...item.href ? [{
+			id: `navigate-${item.key}`,
+			label: item.title,
+			description: section ? `${section} - ${item.href}` : item.href,
+			icon: item.icon ?? DEFAULT_COMMAND_ICON,
+			href: item.href
+		}] : [], ...createNavigationCommands(children ?? [], section ?? item.title)];
+	});
+};
+var CommandItemContent = ({ label, description, icon }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "bg-default-100 text-default-600 flex h-8 w-8 shrink-0 items-center justify-center rounded-md",
+			children: /* @__PURE__ */ jsx(AppIcon, {
+				icon,
+				size: 18,
+				"aria-hidden": "true"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-foreground block truncate text-sm leading-5 font-medium",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted block truncate text-xs leading-4",
+				children: description
+			})]
+		})]
+	});
+};
+//#endregion
+export { CommandPaletteDialog };

package/dist/lib/components/command/command-provider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { AppNavigationItem } from '../../navigation';
+declare const CommandProvider: ({ children, items }: {
+    children: ReactNode;
+    items: AppNavigationItem[];
+}) => import("react").JSX.Element;
+export { CommandProvider };
+//# sourceMappingURL=command-provider.d.ts.map

package/dist/lib/components/command/command-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-provider.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/command-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAA;AAI5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAGzD,QAAA,MAAM,eAAe,GAAI,qBAGtB;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAC3B,gCAiDA,CAAA;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}