@bizapps/ui 1.2.2 → 1.3.3

package/dist/main.cjs

@@ -1598,7 +1598,8 @@ var ease = {
   smooth: [0.4, 0, 0.2, 1],
   enter: [0, 0, 0.2, 1],
   exit: [0.4, 0, 1, 1],
-  linear: [0, 0, 1, 1]
+  linear: [0, 0, 1, 1],
+  drawer: [0.22, 1, 0.36, 1]
 };
 var spring = {
   gentle: { type: "spring", stiffness: 260, damping: 28 },
@@ -1642,6 +1643,15 @@ var transition = {
   card: {
     duration: duration.fast,
     ease: ease.smooth
+  },
+  // Drawer / slide panel — smooth enter, fast exit
+  drawer: {
+    duration: 0.3,
+    ease: ease.drawer
+  },
+  drawerExit: {
+    duration: 0.2,
+    ease: ease.exit
   }
 };
 var fadeIn = {
@@ -8364,14 +8374,170 @@ function DataTableSearch({
     )
   ] });
 }
-var DrawerContext = react.createContext(false);
-function Drawer({ children, open, onOpenChange, ...props }) {
+function BottomNav({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-slot": "bottom-nav",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 z-50 mx-4 mb-4 rounded-2xl bg-background shadow-[0_-4px_20px_rgba(0,0,0,0.08)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-20 items-center justify-around px-4", children: items.map(({ label, href, icon, isActive, onClick }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href,
+          onClick,
+          "data-slot": "bottom-nav-item",
+          className: cn(
+            "group flex flex-col items-center gap-0 transition-colors",
+            isActive ? "text-primary" : "text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: cn(
+                  "flex h-12 items-center justify-center rounded-2xl transition-all",
+                  isActive ? "flex-col gap-0.5 bg-primary/10 px-4" : "w-12 group-hover:bg-muted group-active:bg-primary/10"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 shrink-0", children: icon }),
+                  isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold leading-none", children: label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[10px] font-medium",
+                  isActive ? "invisible" : "visible"
+                ),
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "h-1 w-5 rounded-full transition-all",
+                  isActive ? "bg-primary" : "bg-transparent"
+                )
+              }
+            )
+          ]
+        },
+        href
+      )) })
+    }
+  );
+}
+var BottomNavTabsContext = react.createContext(null);
+function useBottomNavTabsContext() {
+  const ctx = react.useContext(BottomNavTabsContext);
+  if (!ctx) throw new Error("BottomNavTabsList must be inside BottomNavTabs");
+  return ctx;
+}
+function BottomNavTabs({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  ...props
+}) {
+  const [internalValue, setInternalValue] = react.useState(controlledValue ?? defaultValue ?? "");
+  const activeValue = controlledValue ?? internalValue;
+  const listId = react.useId();
+  const handleValueChange = (v) => {
+    if (controlledValue === void 0) setInternalValue(v);
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BottomNavTabsContext.Provider, { value: { activeValue, listId }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Root,
+    {
+      "data-slot": "bottom-nav-tabs",
+      value: activeValue,
+      onValueChange: handleValueChange,
+      ...props
+    }
+  ) });
+}
+function BottomNavTabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { className: cn("pb-28", className), ...props });
+}
+function BottomNavTabsList({ items, className }) {
+  const { activeValue, listId } = useBottomNavTabsContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "data-slot": "bottom-nav-tabs-list",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 z-50 mx-4 mb-4 rounded-2xl bg-background shadow-[0_-4px_20px_rgba(0,0,0,0.08)]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tabs.List, { className: "flex h-20 items-center justify-around px-4", children: items.map(({ value, label, icon, activeIcon }) => {
+        const isActive = value === activeValue;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          radixUi.Tabs.Trigger,
+          {
+            value,
+            "data-slot": "bottom-nav-tabs-trigger",
+            className: cn(
+              "group flex flex-col items-center gap-0.5 transition-colors",
+              "data-[state=active]:text-primary data-[state=inactive]:text-muted-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-2xl"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-12 w-12 items-center justify-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { initial: false, children: isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                  react$1.motion.span,
+                  {
+                    layoutId: `${listId}-pill`,
+                    className: "absolute inset-0 rounded-2xl bg-primary/10",
+                    transition: spring.snappy
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 h-6 w-6", children: isActive ? activeIcon ?? icon : icon })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[10px] font-medium",
+                    isActive && "font-semibold"
+                  ),
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "h-1 w-5 rounded-full transition-colors",
+                    isActive ? "bg-primary" : "bg-transparent"
+                  )
+                }
+              )
+            ]
+          },
+          value
+        );
+      }) })
+    }
+  );
+}
+var DrawerContext = react.createContext({ isOpen: false, modal: true });
+function Drawer({ children, open, onOpenChange, modal = true, ...props }) {
   const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
   const isOpen = open !== void 0 ? open : internalOpen;
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { isOpen, modal }, children: /* @__PURE__ */ jsxRuntime.jsx(
     radixUi.Dialog.Root,
     {
       "data-slot": "drawer",
+      modal,
       ...props,
       open: isOpen,
       onOpenChange: (v) => {
@@ -8389,7 +8555,7 @@ function DrawerClose({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerPortal({ children, ...props }) {
-  const isOpen = react.useContext(DrawerContext);
+  const { isOpen } = react.useContext(DrawerContext);
   return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { forceMount: true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "sync", children: isOpen && children }) });
 }
 function DrawerOverlay({ className, ...props }) {
@@ -8427,8 +8593,9 @@ function DrawerContent({
   const xInitial = side === "right" ? "100%" : side === "left" ? "-100%" : 0;
   const yInitial = side === "bottom" ? "100%" : side === "top" ? "-100%" : 0;
   const dragRef = react.useRef(null);
+  const { modal } = react.useContext(DrawerContext);
   return /* @__PURE__ */ jsxRuntime.jsxs(DrawerPortal, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
+    modal && /* @__PURE__ */ jsxRuntime.jsx(DrawerOverlay, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       radixUi.Dialog.Content,
       {
@@ -8452,9 +8619,8 @@ function DrawerContent({
           {
             className: cn("flex flex-col", isHorizontal && "h-full"),
             initial: { x: xInitial, y: yInitial, opacity: 0 },
-            animate: { x: 0, y: 0, opacity: 1 },
-            exit: { x: xInitial, y: yInitial, opacity: 0 },
-            transition: transition.sidebar,
+            animate: { x: 0, y: 0, opacity: 1, transition: transition.drawer },
+            exit: { x: xInitial, y: yInitial, opacity: 0, transition: transition.drawerExit },
             children: [
               children,
               showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "drawer-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -8635,6 +8801,10 @@ exports.AvatarGroup = AvatarGroup;
 exports.AvatarGroupCount = AvatarGroupCount;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge2;
+exports.BottomNav = BottomNav;
+exports.BottomNavTabs = BottomNavTabs;
+exports.BottomNavTabsContent = BottomNavTabsContent;
+exports.BottomNavTabsList = BottomNavTabsList;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;