@kawaiininja/layouts 1.0.4 → 1.0.5

package/README.md

@@ -36,7 +36,7 @@ High-performance, premium mobile-first layouts for the Onyx Framework. Designed
 ## 🚀 Installation
 
 ```bash
-npm install @onyx/layouts
+npm install @kawaiininja/layouts
 ```
 
 Note: This package requires `framer-motion`, `lucide-react`, and `react` >= 18.0.0.
@@ -48,7 +48,7 @@ Note: This package requires `framer-motion`, `lucide-react`, and `react` >= 18.0
 ### Basic Example
 
 ```jsx
-import { OnyxMobileLayout } from "@onyx/layouts";
+import { OnyxMobileLayout } from "@kawaiininja/layouts";
 import { Home, Search, Bell, User, PenTool, Grid } from "lucide-react";
 
 const MyApp = () => {

package/dist/MobileLayout.js

@@ -103,17 +103,43 @@ function useRailNavScroll(active, navKeys) {
     };
 }
 // --- Main Layout Component ---
-const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRefreshing: externalRefreshing, rightAction, initialTab = "home", drawerItems = [], }) => {
-    const [activeTab, setActiveTab] = useState(initialTab);
+const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh, isRefreshing: externalRefreshing, rightAction, initialTab = "home", activeTab: externalActiveTab, activeSubTab: externalActiveSubTab, onNavigate, drawerItems = [], }) => {
+    const [internalActiveTab, setInternalActiveTab] = useState(initialTab);
+    const activeTab = externalActiveTab || internalActiveTab;
     const [isOpen, setIsOpen] = useState(false);
     const [isDragging, setIsDragging] = useState(false);
     const [activeDrawer, setActiveDrawer] = useState(null);
     const [pullY, setPullY] = useState(0);
     const [internalRefreshing, setInternalRefreshing] = useState(false);
     const currentTabConfig = tabs.find((t) => t.id === activeTab);
-    const isRefreshing = currentTabConfig?.isRefreshing ?? externalRefreshing ?? internalRefreshing;
     const subTabs = currentTabConfig?.subTabs || [];
-    const [subTab, setSubTab] = useState(subTabs[0]?.label || "");
+    const [internalSubTab, setInternalSubTab] = useState(subTabs[0]?.label || "");
+    const subTab = externalActiveSubTab || internalSubTab;
+    const navigateTo = (tabId, subTabLabel) => {
+        if (tabId)
+            setInternalActiveTab(tabId);
+        if (subTabLabel)
+            setInternalSubTab(subTabLabel);
+        if (onNavigate) {
+            const targetTab = tabs.find((t) => t.id === (tabId || activeTab));
+            let path = targetTab?.path || "";
+            if (subTabLabel) {
+                const st = targetTab?.subTabs.find((s) => s.label === subTabLabel);
+                if (st?.path) {
+                    if (st.path.startsWith("/")) {
+                        path = st.path;
+                    }
+                    else {
+                        const base = path.endsWith("/") ? path : path + "/";
+                        path = base + st.path;
+                    }
+                }
+            }
+            if (path)
+                onNavigate(path);
+        }
+    };
+    const isRefreshing = currentTabConfig?.isRefreshing ?? externalRefreshing ?? internalRefreshing;
     const navKeys = useMemo(() => tabs.map((t) => t.id), [tabs]);
     const { scrollContainerRef, activeHeight, activeOffset, registerButtonRef } = useRailNavScroll(activeTab, navKeys);
     const DRAWER_WIDTH = 220;
@@ -165,8 +191,8 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
     useEffect(() => {
         if (currentTabConfig && currentTabConfig.subTabs.length > 0) {
             const isValid = currentTabConfig.subTabs.some((st) => st.label === subTab);
-            if (!isValid)
-                setSubTab(currentTabConfig.subTabs[0].label);
+            if (!isValid && currentTabConfig.subTabs.length > 0)
+                navigateTo(undefined, currentTabConfig.subTabs[0].label);
         }
     }, [activeTab, tabs, subTab, currentTabConfig]);
     const [[prevActive, direction], setDir] = useState([activeTab, 0]);
@@ -210,10 +236,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                         targetTab: tabs[0].id,
                         targetSubTab: st.label,
                     }))).map((item) => (_jsxs("button", { onClick: () => {
-                        if (item.targetTab)
-                            setActiveTab(item.targetTab);
-                        if (item.targetSubTab)
-                            setSubTab(item.targetSubTab);
+                        navigateTo(item.targetTab, item.targetSubTab);
                         if (item.onClick)
                             item.onClick({
                                 openDrawer: (id) => setActiveDrawer(id),
@@ -280,9 +303,9 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
             if (Math.abs(lastDxRef.current) > 50) {
                 const idx = subTabs.findIndex((t) => t.label === subTab);
                 if (lastDxRef.current < 0 && idx < subTabs.length - 1)
-                    setSubTab(subTabs[idx + 1].label);
+                    navigateTo(undefined, subTabs[idx + 1].label);
                 else if (lastDxRef.current > 0 && idx > 0)
-                    setSubTab(subTabs[idx - 1].label);
+                    navigateTo(undefined, subTabs[idx - 1].label);
             }
         }
         if (isVerticalPull.current) {
@@ -365,7 +388,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
             setQuickMenu((prev) => ({ ...prev, visible: false, selectedIndex: -1 }));
         }
         else {
-            setActiveTab(tabId);
+            navigateTo(tabId);
         }
     };
     const currentTranslate = isDragging ? renderDragX : isOpen ? DRAWER_WIDTH : 0;
@@ -377,7 +400,7 @@ const OnyxMobileLayoutBase = ({ tabs, user, drawers = {}, onSignOut, onRefresh,
                         ? "none"
                         : "transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.3s",
                     overflow: "hidden",
-                }, children: [isOpen && !isDragging && (_jsx("div", { className: "absolute inset-0 z-50 bg-black/20", onClick: () => setIsOpen(false) })), _jsxs("div", { className: "flex-1 flex flex-col h-full mr-12 relative bg-[rgb(var(--bg-main))]", children: [_jsx(Header, { title: currentTabConfig?.navTitle || currentTabConfig?.label || "App", onMenuClick: () => setIsOpen(!isOpen), rightAction: currentTabConfig?.rightAction || rightAction }), _jsx(HorizontalTabs, { tabs: subTabs, active: subTab, onChange: setSubTab }), _jsxs("main", { ref: mainScrollRef, className: "flex-1 overflow-y-auto no-scrollbar overscroll-contain relative mr-4", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center items-center pointer-events-none z-0", style: {
+                }, children: [isOpen && !isDragging && (_jsx("div", { className: "absolute inset-0 z-50 bg-black/20", onClick: () => setIsOpen(false) })), _jsxs("div", { className: "flex-1 flex flex-col h-full mr-12 relative bg-[rgb(var(--bg-main))]", children: [_jsx(Header, { title: currentTabConfig?.navTitle || currentTabConfig?.label || "App", onMenuClick: () => setIsOpen(!isOpen), rightAction: currentTabConfig?.rightAction || rightAction }), _jsx(HorizontalTabs, { tabs: subTabs, active: subTab, onChange: (label) => navigateTo(undefined, label) }), _jsxs("main", { ref: mainScrollRef, className: "flex-1 overflow-y-auto no-scrollbar overscroll-contain relative mr-4", children: [_jsx("div", { className: "absolute top-0 left-0 right-0 flex justify-center items-center pointer-events-none z-0", style: {
                                             height: `${pullY}px`,
                                             opacity: Math.min(pullY / 40, 1),
                                         }, children: _jsx("div", { className: `p-2 bg-[rgb(var(--bg-surface))] rounded-full shadow-md border border-[rgb(var(--color-border-subtle))] ${isRefreshing

package/dist/types.d.ts

@@ -3,6 +3,7 @@ export interface SubTabConfig {
     label: string;
     icon: ComponentType<any>;
     view: ComponentType<any>;
+    path?: string;
 }
 export interface QuickActionConfig {
     label: string;
@@ -16,6 +17,7 @@ export interface TabConfig {
     label: string;
     icon: ComponentType<any>;
     navTitle?: string;
+    path?: string;
     subTabs: SubTabConfig[];
     quickActions: QuickActionConfig[];
     rightAction?: ReactNode;
@@ -50,5 +52,8 @@ export interface OnyxMobileLayoutProps {
     isRefreshing?: boolean;
     rightAction?: ReactNode;
     initialTab?: string;
+    activeTab?: string;
+    activeSubTab?: string;
+    onNavigate?: (path: string) => void;
     drawerItems?: DrawerItemConfig[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/layouts",
-    "version": "1.0.4",
+    "version": "1.0.5",
     "description": "High-performance, premium mobile-first layouts for the Onyx Framework, featuring gesture-driven navigation, radial quick actions, and integrated theme support.",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -26,13 +26,13 @@
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/kawaiininja/onyx-framework.git",
+        "url": "https://github.com/4kawaiininja/onyx-framework.git",
         "directory": "layouts"
     },
     "bugs": {
-        "url": "https://github.com/kawaiininja/onyx-framework/issues"
+        "url": "https://github.com/4kawaiininja/onyx-framework/issues"
     },
-    "homepage": "https://github.com/kawaiininja/onyx-framework#readme",
+    "homepage": "https://github.com/4kawaiininja/onyx-framework/blob/main/layouts/README.md",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",