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

package/README.md

@@ -1 +1,3 @@
 # @vezham/react
+
+Shared React application shell and components.

package/dist/index.css

@@ -0,0 +1,55 @@
+@source './**/*.js';
+
+._panel_inr1p_1 {
+  height: 100%;
+  animation: _panel-enter_inr1p_1 180ms ease-out both;
+}
+
+._panel_inr1p_1[data-state='closed'] {
+  animation: _panel-exit_inr1p_1 140ms ease-in both;
+  pointer-events: none;
+}
+
+@keyframes _panel-enter_inr1p_1 {
+  from {
+    opacity: 0;
+    transform: translate3d(-1rem, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes _panel-exit_inr1p_1 {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-1rem, 0, 0);
+  }
+}
+
+@keyframes _panel-reduced_inr1p_1 {
+  from,
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ._panel_inr1p_1 {
+    animation: none;
+  }
+
+  /* vx-bot/NOTE: A new closing animation must fire the event that collapses the panel. */
+  ._panel_inr1p_1[data-state='closed'] {
+    animation: _panel-reduced_inr1p_1 1ms linear both;
+  }
+}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -1,2 +1,7 @@
-export {};
+export { AppFrame, AppLayout, type AppFrameProps, type AppLayoutProps } from './lib/layouts/app';
+export type { AppNavigationItem } from './lib/navigation';
+export * from './lib/navigation-toolbar';
+export type { AppMenuItem, AppMenuAction } from './lib/components/app-menu';
+export { ControlCenter } from './lib/components/panel/footer/control-center';
+export type { ControlCenterProps } from './lib/components/panel/footer/control-center';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,KAAK,aAAa,EAClB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACzD,cAAc,0BAA0B,CAAA;AAExC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAA;AAC5E,YAAY,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAA"}

package/dist/index.js

@@ -0,0 +1,5 @@
+import { ControlCenter } from "./lib/components/panel/footer/control-center/control-center.js";
+import { getNavigationToolbar } from "./lib/navigation-toolbar.js";
+import { AppFrame } from "./lib/layouts/app/frame.js";
+import { AppLayout } from "./lib/layouts/app/index.js";
+export { AppFrame, AppLayout, ControlCenter, getNavigationToolbar };

package/dist/lib/components/actions-header/index.d.ts

@@ -0,0 +1,26 @@
+export interface ActionItem {
+    key: string;
+    label: string;
+    icon?: string;
+    shortcut?: string;
+    onAction?: (pageKey: string) => void;
+    isVisible?: (pageKey: string) => boolean;
+}
+export interface TabItem {
+    key: string;
+    title: string;
+    href: string;
+    icon?: string;
+    isDisabled?: boolean;
+}
+export interface DynamicHeaderProps {
+    tabs: TabItem[];
+    activeTab: string;
+    rightActions?: ActionItem[];
+    showSearch?: boolean;
+    onSearch?: (value: string, pageKey: string) => void;
+    leftActions?: ActionItem[];
+}
+declare const DynamicHeader: ({ tabs, activeTab, rightActions, showSearch, onSearch, leftActions }: DynamicHeaderProps) => import("react").JSX.Element;
+export { DynamicHeader };
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/actions-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/actions-header/index.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAA;CACzC;AAED,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,UAAU,EAAE,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAA;CAC3B;AAID,QAAA,MAAM,aAAa,GAAI,sEAQpB,kBAAkB,gCA4JpB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/lib/components/actions-header/index.js

@@ -0,0 +1,126 @@
+"use client";
+import { AppIcon } from "../app-icon/index.js";
+import { ShortcutKey } from "../shortcut-key/index.js";
+import { useNavigate } from "@tanstack/react-router";
+import { useMemo, useState } from "react";
+import { Button, Dropdown, InputGroup, Label, Tabs, TextField, Typography } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Magnifier, MenuDots } from "@vezham/icons-react";
+//#region src/lib/components/actions-header/index.tsx
+var EMPTY_ACTIONS = [];
+var DynamicHeader = ({ tabs, activeTab, rightActions = EMPTY_ACTIONS, showSearch = true, onSearch, leftActions = EMPTY_ACTIONS }) => {
+	const [search, setSearch] = useState("");
+	const navigate = useNavigate();
+	const handleSearch = (val) => {
+		setSearch(val);
+		onSearch?.(val, activeTab);
+	};
+	const visibleRightActions = useMemo(() => {
+		return rightActions.filter((a) => !a.isVisible || a.isVisible(activeTab));
+	}, [rightActions, activeTab]);
+	const visibleLeftActions = useMemo(() => {
+		return leftActions.filter((a) => !a.isVisible || a.isVisible(activeTab));
+	}, [leftActions, activeTab]);
+	const createAction = visibleRightActions.find((a) => a.key === "add" || a.key === "create" || a.label.toLowerCase().includes("create") || a.label.toLowerCase().includes("add"));
+	const otherActions = visibleRightActions.filter((a) => a !== createAction);
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-background flex w-full flex-col gap-3 px-4 py-3",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-3",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "flex min-w-[120px] flex-shrink-0 items-center gap-2",
+					children: visibleLeftActions.map((action) => /* @__PURE__ */ jsx(Button, {
+						onPress: () => action.onAction?.(activeTab),
+						size: "sm",
+						variant: "ghost",
+						children: action.icon && /* @__PURE__ */ jsx(AppIcon, {
+							icon: action.icon,
+							size: "1em",
+							"aria-hidden": "true"
+						})
+					}, action.key))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 justify-center",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex w-[275px] overflow-x-auto rounded-full p-1 sm:max-w-[300px]",
+						children: /* @__PURE__ */ jsx(Tabs, {
+							selectedKey: activeTab,
+							children: /* @__PURE__ */ jsx(Tabs.List, {
+								className: "flex gap-1",
+								children: tabs.map((tab) => {
+									const isActive = activeTab === tab.key;
+									return /* @__PURE__ */ jsxs(Tabs.Tab, {
+										onClick: () => {
+											if (tab.href) navigate({ to: tab.href });
+										},
+										className: `flex cursor-pointer items-center gap-2 rounded-full px-4 py-2 whitespace-nowrap transition-all ${isActive ? "text-foreground bg-white" : "text-muted-foreground"} `,
+										children: [tab.icon && /* @__PURE__ */ jsx(AppIcon, {
+											icon: tab.icon,
+											className: "h-4 w-4",
+											size: "1em",
+											"aria-hidden": "true"
+										}), /* @__PURE__ */ jsx(Typography.Heading, { children: tab.title })]
+									}, tab.key);
+								})
+							})
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						showSearch && /* @__PURE__ */ jsx(TextField, {
+							className: "w-full max-w-[280px]",
+							name: "email",
+							children: /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroup.Prefix, { children: /* @__PURE__ */ jsx(Magnifier, {
+								className: "text-muted-foreground h-4 w-4",
+								size: "1em",
+								"aria-hidden": "true"
+							}) }), /* @__PURE__ */ jsx(InputGroup.Input, {
+								className: "w-full max-w-[280px]",
+								placeholder: "Search",
+								value: search,
+								onChange: (event) => handleSearch(event.target.value)
+							})] })
+						}),
+						otherActions.length > 0 && /* @__PURE__ */ jsxs(Dropdown, { children: [/* @__PURE__ */ jsx(Button, {
+							"aria-label": "More actions",
+							isIconOnly: true,
+							variant: "ghost",
+							children: /* @__PURE__ */ jsx(MenuDots, {
+								size: "1em",
+								style: { transform: "rotate(90deg)" },
+								"aria-hidden": "true"
+							})
+						}), /* @__PURE__ */ jsx(Dropdown.Popover, { children: /* @__PURE__ */ jsx(Dropdown.Menu, { children: otherActions.map((action) => /* @__PURE__ */ jsxs(Dropdown.Item, {
+							onPress: () => action.onAction?.(activeTab),
+							children: [/* @__PURE__ */ jsxs(Label, {
+								className: "flex items-center gap-2",
+								children: [action.icon && /* @__PURE__ */ jsx(AppIcon, {
+									icon: action.icon,
+									size: "1em",
+									"aria-hidden": "true"
+								}), action.label]
+							}), action.shortcut && /* @__PURE__ */ jsx(ShortcutKey, {
+								className: "ms-auto",
+								shortcut: action.shortcut
+							})]
+						}, action.key)) }) })] }),
+						createAction && /* @__PURE__ */ jsxs(Button, {
+							onPress: () => createAction.onAction?.(activeTab),
+							children: [createAction.icon && /* @__PURE__ */ jsx(AppIcon, {
+								icon: createAction.icon,
+								size: "1em",
+								"aria-hidden": "true"
+							}), createAction.label]
+						})
+					]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { DynamicHeader };