@bizapps/ui 1.2.3 → 1.3.3

package/dist/main.cjs

@@ -8374,6 +8374,161 @@ function DataTableSearch({
     )
   ] });
 }
+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);
@@ -8646,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;