react-shadcn-kit 0.1.0 → 0.1.1

package/dist/organisms/app-navbar.js

@@ -1,111 +1,142 @@
-import { jsxs as r, jsx as e, Fragment as b } from "react/jsx-runtime";
-import { Search as M, Bell as k } from "lucide-react";
-import { Input as D } from "../atoms/input.js";
-import { Button as d } from "../atoms/button.js";
-import { SidebarTrigger as C } from "../atoms/sidebar.js";
+import { jsxs as o, jsx as e, Fragment as v } from "react/jsx-runtime";
+import { Search as w, Bell as b } from "lucide-react";
+import { Input as C } from "../atoms/input.js";
+import { Button as m } from "../atoms/button.js";
+import { SidebarTrigger as k } from "../atoms/sidebar.js";
 import { Separator as S } from "../atoms/separator.js";
-import { ThemeToggle as y } from "../molecules/theme-toggle.js";
-import { UserMenu as L } from "../molecules/user-menu.js";
-import { DropdownMenu as T, DropdownMenuTrigger as j, DropdownMenuContent as I, DropdownMenuLabel as U, DropdownMenuSeparator as z, DropdownMenuItem as A } from "../atoms/dropdown-menu.js";
+import { ThemeToggle as M } from "../molecules/theme-toggle.js";
+import { UserMenu as D } from "../molecules/user-menu.js";
+import { DropdownMenu as y, DropdownMenuTrigger as U, DropdownMenuContent as I, DropdownMenuLabel as L, DropdownMenuSeparator as T, DropdownMenuItem as $ } from "../atoms/dropdown-menu.js";
+function j({ branding: r }) {
+  const t = r.href ? "a" : "div", a = r.href ? { href: r.href } : {};
+  return /* @__PURE__ */ o(t, { ...a, className: "flex items-center gap-2 mr-4", children: [
+    r.logoUrl && /* @__PURE__ */ e("img", { src: r.logoUrl, alt: r.logoAlt || "Logo", className: "h-6 w-6" }),
+    r.title && /* @__PURE__ */ e("span", { className: "font-semibold", children: r.title })
+  ] });
+}
+function z({ items: r }) {
+  return /* @__PURE__ */ e("nav", { className: "flex items-center gap-6 text-sm font-medium overflow-x-auto scrollbar-hide max-w-full", children: r.map((t, a) => {
+    const l = t.icon;
+    return /* @__PURE__ */ o(
+      "a",
+      {
+        href: t.href,
+        className: `transition-colors hover:text-foreground/80 ${t.disabled ? "pointer-events-none opacity-50" : "text-foreground/60"}`,
+        children: [
+          l && /* @__PURE__ */ e(l, { className: "inline-block mr-1 h-4 w-4" }),
+          t.label
+        ]
+      },
+      a
+    );
+  }) });
+}
+function A({ config: r }) {
+  return /* @__PURE__ */ o("div", { className: "relative", children: [
+    /* @__PURE__ */ e(w, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+    /* @__PURE__ */ e(
+      C,
+      {
+        placeholder: r.placeholder || "Search...",
+        className: "pl-8 w-[200px] lg:w-[300px]",
+        onChange: (t) => r.onSearch?.(t.target.value)
+      }
+    )
+  ] });
+}
+function F({ config: r, labels: t }) {
+  const a = r.items || [], l = a.some((s) => !s.read);
+  return /* @__PURE__ */ o(y, { children: [
+    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ o(m, { variant: "ghost", size: "icon", className: "relative", children: [
+      /* @__PURE__ */ e(b, { className: "h-5 w-5" }),
+      l && /* @__PURE__ */ e("span", { className: "absolute right-2 top-2 h-2 w-2 rounded-full bg-red-600" }),
+      /* @__PURE__ */ e("span", { className: "sr-only", children: t?.notifications || "Notifications" })
+    ] }) }),
+    /* @__PURE__ */ o(I, { align: "end", className: "w-80", children: [
+      /* @__PURE__ */ e(L, { children: t?.notifications || "Notifications" }),
+      /* @__PURE__ */ e(T, {}),
+      a.length > 0 ? a.map((s, n) => /* @__PURE__ */ o(
+        $,
+        {
+          className: "flex flex-col items-start gap-1 p-3 cursor-pointer",
+          onClick: () => r.onNotificationClick?.(s, n),
+          children: [
+            /* @__PURE__ */ o("div", { className: "flex w-full items-center justify-between", children: [
+              /* @__PURE__ */ e("span", { className: "font-medium", children: s.title }),
+              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: s.date })
+            ] }),
+            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground line-clamp-2", children: s.description })
+          ]
+        },
+        n
+      )) : /* @__PURE__ */ e("div", { className: "p-4 text-center text-sm text-muted-foreground", children: t?.noNotifications || "No new notifications" })
+    ] })
+  ] });
+}
 function P({
-  items: h = [],
-  searchPlaceholder: p = "Search...",
-  user: t,
-  userMenuItems: f,
-  notifications: s = [],
-  branding: o,
-  labels: m,
-  showSearch: u = !0,
-  showSidebarTrigger: N = !0,
-  showUserMenu: x = !0,
-  showThemeToggle: g = !0,
-  showNotifications: w = !0,
-  className: i,
-  style: v,
-  loginButton: l
+  user: r,
+  userMenuItems: t,
+  loginButton: a,
+  showUserMenu: l
 }) {
-  return /* @__PURE__ */ r(
-    "header",
+  return l ? r?.name && r?.email ? /* @__PURE__ */ e(
+    D,
     {
-      className: "flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-background sticky top-0 z-50" + (i ? ` ${i}` : ""),
-      style: v,
-      children: [
-        N && /* @__PURE__ */ r(b, { children: [
-          /* @__PURE__ */ e(C, { className: "-ml-1" }),
-          /* @__PURE__ */ e(S, { orientation: "vertical", className: "mr-2 h-4" })
-        ] }),
-        o && /* @__PURE__ */ r("a", { href: "#", className: "flex items-center gap-2 mr-4", children: [
-          o.logoUrl && /* @__PURE__ */ e("img", { src: o.logoUrl, alt: o.logoAlt || "Logo", className: "h-6 w-6" }),
-          o.title && /* @__PURE__ */ e("span", { className: "font-semibold", children: o.title })
-        ] }),
-        /* @__PURE__ */ e("nav", { className: "flex items-center gap-6 text-sm font-medium", children: h?.map((a, n) => {
-          const c = a.icon;
-          return /* @__PURE__ */ r(
-            "a",
-            {
-              href: a.href,
-              className: `transition-colors hover:text-foreground/80 ${a.disabled ? "pointer-events-none opacity-50" : "text-foreground/60"}`,
-              children: [
-                c && /* @__PURE__ */ e(c, { className: "inline-block mr-1 h-4 w-4" }),
-                a.label
-              ]
-            },
-            n
-          );
-        }) }),
-        /* @__PURE__ */ r("div", { className: "ml-auto flex items-center gap-2", children: [
-          u && /* @__PURE__ */ r("div", { className: "relative", children: [
-            /* @__PURE__ */ e(M, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ e(D, { placeholder: p, className: "pl-8 w-[200px] lg:w-[300px]" })
-          ] }),
-          g && /* @__PURE__ */ e(y, {}),
-          x && (t && t.name && t.email ? /* @__PURE__ */ e(
-            L,
-            {
-              user: { name: t.name, email: t.email, avatar: t.image },
-              items: f
-            }
-          ) : l && /* @__PURE__ */ e(
-            d,
-            {
-              variant: l.variant || "default",
-              onClick: l.onClick,
-              asChild: !!l.href,
-              children: l.href ? /* @__PURE__ */ e("a", { href: l.href, children: l.label || "Login" }) : l.label || "Login"
-            }
-          )),
-          w && s && s.length > 0 && /* @__PURE__ */ r(T, { children: [
-            /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ r(d, { variant: "ghost", size: "icon", className: "relative", children: [
-              /* @__PURE__ */ e(k, { className: "h-5 w-5" }),
-              s.some((a) => !a.read) && /* @__PURE__ */ e("span", { className: "absolute right-2 top-2 h-2 w-2 rounded-full bg-red-600" }),
-              /* @__PURE__ */ e("span", { className: "sr-only", children: m?.notifications || "Notifications" })
-            ] }) }),
-            /* @__PURE__ */ r(I, { align: "end", className: "w-80", children: [
-              /* @__PURE__ */ e(U, { children: m?.notifications || "Notifications" }),
-              /* @__PURE__ */ e(z, {}),
-              s.map((a, n) => /* @__PURE__ */ r(
-                A,
-                {
-                  className: "flex flex-col items-start gap-1 p-3 cursor-pointer",
-                  children: [
-                    /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between", children: [
-                      /* @__PURE__ */ e("span", { className: "font-medium", children: a.title }),
-                      /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: a.date })
-                    ] }),
-                    /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground line-clamp-2", children: a.description })
-                  ]
-                },
-                n
-              )),
-              s.length === 0 && /* @__PURE__ */ e("div", { className: "p-4 text-center text-sm text-muted-foreground", children: m?.noNotifications || "No new notifications" })
-            ] })
-          ] })
-        ] })
-      ]
+      user: { name: r.name, email: r.email, avatar: r.image },
+      items: t
     }
-  );
+  ) : a ? /* @__PURE__ */ e(
+    m,
+    {
+      variant: a.variant || "default",
+      onClick: a.onClick,
+      asChild: !!a.href,
+      children: a.href ? /* @__PURE__ */ e("a", { href: a.href, children: a.label || "Login" }) : a.label || "Login"
+    }
+  ) : null : null;
+}
+function X({
+  placement: r = "top",
+  sticky: t = !0,
+  className: a,
+  style: l,
+  branding: s,
+  items: n,
+  search: i,
+  notifications: c,
+  showThemeToggle: d = !1,
+  showSidebarTrigger: f = !1,
+  user: p,
+  userMenuItems: h,
+  loginButton: u,
+  labels: N,
+  showUserMenu: x = !1
+}) {
+  const g = `flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-background ${t ? r === "top" ? "sticky top-0 z-50" : "sticky bottom-0 z-50" : ""} ${a || ""}`.trim();
+  return /* @__PURE__ */ o("header", { className: g, style: l, children: [
+    f && /* @__PURE__ */ o(v, { children: [
+      /* @__PURE__ */ e(k, { className: "-ml-1" }),
+      /* @__PURE__ */ e(S, { orientation: "vertical", className: "mr-2 h-4" })
+    ] }),
+    s && /* @__PURE__ */ e(j, { branding: s }),
+    n && n.length > 0 && /* @__PURE__ */ e(z, { items: n }),
+    /* @__PURE__ */ o("div", { className: "ml-auto flex items-center gap-2", children: [
+      i?.enabled && /* @__PURE__ */ e(A, { config: i }),
+      d && /* @__PURE__ */ e(M, {}),
+      c?.enabled && /* @__PURE__ */ e(F, { config: c, labels: N }),
+      /* @__PURE__ */ e(
+        P,
+        {
+          user: p,
+          userMenuItems: h,
+          loginButton: u,
+          showUserMenu: x
+        }
+      )
+    ] })
+  ] });
 }
 export {
-  P as AppNavbar
+  X as AppNavbar
 };
 //# sourceMappingURL=app-navbar.js.map

package/dist/organisms/app-navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-navbar.js","sources":["../../src/organisms/app-navbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Search, Bell } from \"lucide-react\";\nimport { Input } from \"@/atoms/input\";\nimport { Button } from \"@/atoms/button\";\nimport { SidebarTrigger } from \"@/atoms/sidebar\";\nimport { Separator } from \"@/atoms/separator\";\nimport { ThemeToggle } from \"@/molecules/theme-toggle\";\nimport { UserMenu } from \"@/molecules/user-menu\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/atoms/dropdown-menu\";\nimport type {\n  UserConfig,\n  BrandingConfig,\n  MenuItem,\n  NotificationsList,\n  LoginButtonConfig,\n} from \"@/default-layout\";\n\ninterface NavbarLabels {\n  profile?: string;\n  notifications?: string;\n  noNotifications?: string;\n}\n\ninterface UserMenuItem {\n  label: string;\n  href?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  onClick?: () => void;\n}\n\ninterface AppNavbarProps {\n  items?: (MenuItem & { icon?: React.ComponentType<{ className?: string }> })[];\n  searchPlaceholder?: string;\n  user?: UserConfig;\n  userMenuItems?: UserMenuItem[];\n  notifications?: NotificationsList[];\n  branding?: BrandingConfig;\n  labels?: NavbarLabels;\n  showSearch?: boolean;\n  showSidebarTrigger?: boolean;\n  showUserMenu?: boolean;\n  showThemeToggle?: boolean;\n  showNotifications?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  loginButton?: LoginButtonConfig;\n}\n\nexport function AppNavbar({\n  items = [],\n  searchPlaceholder = \"Search...\",\n  user,\n  userMenuItems,\n  notifications = [],\n  branding,\n  labels,\n  showSearch = true,\n  showSidebarTrigger = true,\n  showUserMenu = true,\n  showThemeToggle = true,\n  showNotifications = true,\n  className,\n  style,\n  loginButton,\n}: AppNavbarProps) {\n  return (\n    <header\n      className={\n        \"flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-background sticky top-0 z-50\" +\n        (className ? ` ${className}` : \"\")\n      }\n      style={style}\n    >\n      {showSidebarTrigger && (\n        <>\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        </>\n      )}\n\n      {branding && (\n        <a href=\"#\" className=\"flex items-center gap-2 mr-4\">\n          {branding.logoUrl && (\n            <img src={branding.logoUrl} alt={branding.logoAlt || \"Logo\"} className=\"h-6 w-6\" />\n          )}\n          {branding.title && <span className=\"font-semibold\">{branding.title}</span>}\n        </a>\n      )}\n\n      <nav className=\"flex items-center gap-6 text-sm font-medium\">\n        {items?.map((item, index) => {\n          const Icon = item.icon;\n          return (\n            <a\n              key={index}\n              href={item.href}\n              className={`transition-colors hover:text-foreground/80 ${\n                item.disabled ? \"pointer-events-none opacity-50\" : \"text-foreground/60\"\n              }`}\n            >\n              {Icon && <Icon className=\"inline-block mr-1 h-4 w-4\" />}\n              {item.label}\n            </a>\n          );\n        })}\n      </nav>\n\n      <div className=\"ml-auto flex items-center gap-2\">\n        {showSearch && (\n          <div className=\"relative\">\n            <Search className=\"absolute left-2 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input placeholder={searchPlaceholder} className=\"pl-8 w-[200px] lg:w-[300px]\" />\n          </div>\n        )}\n\n        {showThemeToggle && <ThemeToggle />}\n        {showUserMenu &&\n          (user && user.name && user.email ? (\n            <UserMenu\n              user={{ name: user.name, email: user.email, avatar: user.image }}\n              items={userMenuItems}\n            />\n          ) : (\n            loginButton && (\n              <Button\n                variant={loginButton.variant || \"default\"}\n                onClick={loginButton.onClick}\n                asChild={!!loginButton.href}\n              >\n                {loginButton.href ? (\n                  <a href={loginButton.href}>{loginButton.label || \"Login\"}</a>\n                ) : (\n                  loginButton.label || \"Login\"\n                )}\n              </Button>\n            )\n          ))}\n\n        {showNotifications && notifications && notifications.length > 0 && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"relative\">\n                <Bell className=\"h-5 w-5\" />\n                {notifications.some((n) => !n.read) && (\n                  <span className=\"absolute right-2 top-2 h-2 w-2 rounded-full bg-red-600\" />\n                )}\n                <span className=\"sr-only\">{labels?.notifications || \"Notifications\"}</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-80\">\n              <DropdownMenuLabel>{labels?.notifications || \"Notifications\"}</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {notifications.map((notification, index) => (\n                <DropdownMenuItem\n                  key={index}\n                  className=\"flex flex-col items-start gap-1 p-3 cursor-pointer\"\n                >\n                  <div className=\"flex w-full items-center justify-between\">\n                    <span className=\"font-medium\">{notification.title}</span>\n                    <span className=\"text-xs text-muted-foreground\">{notification.date}</span>\n                  </div>\n                  <p className=\"text-sm text-muted-foreground line-clamp-2\">\n                    {notification.description}\n                  </p>\n                </DropdownMenuItem>\n              ))}\n              {notifications.length === 0 && (\n                <div className=\"p-4 text-center text-sm text-muted-foreground\">\n                  {labels?.noNotifications || \"No new notifications\"}\n                </div>\n              )}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    </header>\n  );\n}\n"],"names":["jsxs","jsx","Fragment","Search","Bell","Input","Button","SidebarTrigger","Separator","ThemeToggle","UserMenu","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuItem","AppNavbar","items","searchPlaceholder","user","userMenuItems","notifications","branding","labels","showSearch","showSidebarTrigger","showUserMenu","showThemeToggle","showNotifications","className","style","loginButton","item","index","Icon","n","notification"],"mappings":"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"}
+{"version":3,"file":"app-navbar.js","sources":["../../src/organisms/app-navbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Search, Bell } from \"lucide-react\";\nimport { Input } from \"@/atoms/input\";\nimport { Button } from \"@/atoms/button\";\nimport { SidebarTrigger } from \"@/atoms/sidebar\";\nimport { Separator } from \"@/atoms/separator\";\nimport { ThemeToggle } from \"@/molecules/theme-toggle\";\nimport { UserMenu } from \"@/molecules/user-menu\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/atoms/dropdown-menu\";\n\ntype Placement = \"top\" | \"bottom\";\n\ntype NavItem = {\n  label: string;\n  href: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  disabled?: boolean;\n};\n\ntype User = {\n  name: string;\n  email: string;\n  image?: string;\n};\n\ntype UserMenuItem = {\n  label: string;\n  href?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  onClick?: () => void;\n};\n\ntype Notification = {\n  title: string;\n  description: string;\n  date: string;\n  read: boolean;\n};\n\ntype Branding = {\n  logoUrl?: string;\n  logoAlt?: string;\n  title?: string;\n  href?: string;\n};\n\ntype LoginButton = {\n  label?: string;\n  href?: string;\n  variant?: \"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\";\n  onClick?: () => void;\n};\n\ntype SearchConfig = {\n  enabled?: boolean;\n  placeholder?: string;\n  onSearch?: (value: string) => void;\n};\n\ntype NotificationsConfig = {\n  enabled?: boolean;\n  items?: Notification[];\n  onNotificationClick?: (notification: Notification, index: number) => void;\n};\n\ntype Labels = {\n  notifications?: string;\n  noNotifications?: string;\n};\n\nexport type AppNavbarProps = {\n  // Layout\n  placement?: Placement;\n  sticky?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n\n  // Branding\n  branding?: Branding;\n\n  // Navigation\n  items?: NavItem[];\n\n  // Features\n  search?: SearchConfig;\n  notifications?: NotificationsConfig;\n  showThemeToggle?: boolean;\n  showSidebarTrigger?: boolean;\n\n  // User\n  user?: User;\n  userMenuItems?: UserMenuItem[];\n  loginButton?: LoginButton;\n  showUserMenu?: boolean;\n\n  // Customization\n  labels?: Labels;\n};\n\nfunction NavbarBranding({ branding }: { branding: Branding }) {\n  const Wrapper = branding.href ? \"a\" : \"div\";\n  const wrapperProps = branding.href ? { href: branding.href } : {};\n\n  return (\n    <Wrapper {...wrapperProps} className=\"flex items-center gap-2 mr-4\">\n      {branding.logoUrl && (\n        <img src={branding.logoUrl} alt={branding.logoAlt || \"Logo\"} className=\"h-6 w-6\" />\n      )}\n      {branding.title && <span className=\"font-semibold\">{branding.title}</span>}\n    </Wrapper>\n  );\n}\n\nfunction NavbarItems({ items }: { items: NavItem[] }) {\n  return (\n    <nav className=\"flex items-center gap-6 text-sm font-medium overflow-x-auto scrollbar-hide max-w-full\">\n      {items.map((item, index) => {\n        const Icon = item.icon;\n        return (\n          <a\n            key={index}\n            href={item.href}\n            className={`transition-colors hover:text-foreground/80 ${\n              item.disabled ? \"pointer-events-none opacity-50\" : \"text-foreground/60\"\n            }`}\n          >\n            {Icon && <Icon className=\"inline-block mr-1 h-4 w-4\" />}\n            {item.label}\n          </a>\n        );\n      })}\n    </nav>\n  );\n}\n\nfunction NavbarSearch({ config }: { config: SearchConfig }) {\n  return (\n    <div className=\"relative\">\n      <Search className=\"absolute left-2 top-2.5 h-4 w-4 text-muted-foreground\" />\n      <Input\n        placeholder={config.placeholder || \"Search...\"}\n        className=\"pl-8 w-[200px] lg:w-[300px]\"\n        onChange={(e) => config.onSearch?.(e.target.value)}\n      />\n    </div>\n  );\n}\n\nfunction NavbarNotifications({ config, labels }: { config: NotificationsConfig; labels?: Labels }) {\n  const notifications = config.items || [];\n  const hasUnread = notifications.some((n) => !n.read);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon\" className=\"relative\">\n          <Bell className=\"h-5 w-5\" />\n          {hasUnread && <span className=\"absolute right-2 top-2 h-2 w-2 rounded-full bg-red-600\" />}\n          <span className=\"sr-only\">{labels?.notifications || \"Notifications\"}</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-80\">\n        <DropdownMenuLabel>{labels?.notifications || \"Notifications\"}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {notifications.length > 0 ? (\n          notifications.map((notification, index) => (\n            <DropdownMenuItem\n              key={index}\n              className=\"flex flex-col items-start gap-1 p-3 cursor-pointer\"\n              onClick={() => config.onNotificationClick?.(notification, index)}\n            >\n              <div className=\"flex w-full items-center justify-between\">\n                <span className=\"font-medium\">{notification.title}</span>\n                <span className=\"text-xs text-muted-foreground\">{notification.date}</span>\n              </div>\n              <p className=\"text-sm text-muted-foreground line-clamp-2\">\n                {notification.description}\n              </p>\n            </DropdownMenuItem>\n          ))\n        ) : (\n          <div className=\"p-4 text-center text-sm text-muted-foreground\">\n            {labels?.noNotifications || \"No new notifications\"}\n          </div>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nfunction NavbarUserSection({\n  user,\n  userMenuItems,\n  loginButton,\n  showUserMenu,\n}: {\n  user?: User;\n  userMenuItems?: UserMenuItem[];\n  loginButton?: LoginButton;\n  showUserMenu?: boolean;\n}) {\n  if (!showUserMenu) return null;\n\n  if (user?.name && user?.email) {\n    return (\n      <UserMenu\n        user={{ name: user.name, email: user.email, avatar: user.image }}\n        items={userMenuItems}\n      />\n    );\n  }\n\n  if (loginButton) {\n    return (\n      <Button\n        variant={loginButton.variant || \"default\"}\n        onClick={loginButton.onClick}\n        asChild={!!loginButton.href}\n      >\n        {loginButton.href ? (\n          <a href={loginButton.href}>{loginButton.label || \"Login\"}</a>\n        ) : (\n          loginButton.label || \"Login\"\n        )}\n      </Button>\n    );\n  }\n\n  return null;\n}\n\nexport function AppNavbar({\n  placement = \"top\",\n  sticky = true,\n  className,\n  style,\n  branding,\n  items,\n  search,\n  notifications,\n  showThemeToggle = false,\n  showSidebarTrigger = false,\n  user,\n  userMenuItems,\n  loginButton,\n  labels,\n  showUserMenu = false,\n}: AppNavbarProps) {\n  const baseClasses = \"flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-background\";\n  const positionClasses = sticky\n    ? placement === \"top\"\n      ? \"sticky top-0 z-50\"\n      : \"sticky bottom-0 z-50\"\n    : \"\";\n  const combinedClasses = `${baseClasses} ${positionClasses} ${className || \"\"}`.trim();\n\n  return (\n    <header className={combinedClasses} style={style}>\n      {/* Left Section */}\n      {showSidebarTrigger && (\n        <>\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        </>\n      )}\n\n      {branding && <NavbarBranding branding={branding} />}\n\n      {items && items.length > 0 && <NavbarItems items={items} />}\n\n      {/* Right Section */}\n      <div className=\"ml-auto flex items-center gap-2\">\n        {search?.enabled && <NavbarSearch config={search} />}\n\n        {showThemeToggle && <ThemeToggle />}\n\n        {notifications?.enabled && <NavbarNotifications config={notifications} labels={labels} />}\n\n        <NavbarUserSection\n          user={user}\n          userMenuItems={userMenuItems}\n          loginButton={loginButton}\n          showUserMenu={showUserMenu}\n        />\n      </div>\n    </header>\n  );\n}\n"],"names":["jsxs","jsx","Fragment","Search","Bell","Input","Button","SidebarTrigger","Separator","ThemeToggle","UserMenu","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuItem","NavbarBranding","branding","Wrapper","wrapperProps","NavbarItems","items","item","index","Icon","NavbarSearch","config","e","NavbarNotifications","labels","notifications","hasUnread","n","notification","NavbarUserSection","user","userMenuItems","loginButton","showUserMenu","AppNavbar","placement","sticky","className","style","search","showThemeToggle","showSidebarTrigger","combinedClasses"],"mappings":"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"}

package/dist/organisms/app-sidebar.d.ts

@@ -1,37 +1,67 @@
-import { Sidebar } from '../atoms/sidebar';
-import { UserConfig, BrandingConfig, SidebarGroup as SidebarGroupType, MenuItem, LoginButtonConfig } from '../default-layout';
-interface SidebarLabels {
-    logout?: string;
-}
-interface UserMenuItem {
+type SidebarPlacement = "left" | "right";
+type MenuItem = {
+    label: string;
+    href: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    disabled?: boolean;
+    items?: MenuItem[];
+};
+type MenuGroup = {
+    label?: string;
+    items: MenuItem[];
+    collapsible?: boolean;
+};
+type User = {
+    name?: string;
+    email?: string;
+    image?: string;
+    username?: string;
+    roles?: string[];
+};
+type UserMenuItem = {
     label: string;
     href?: string;
     icon?: React.ComponentType<{
         className?: string;
     }>;
     onClick?: () => void;
-}
-interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
-    groups?: (SidebarGroupType & {
-        items: (MenuItem & {
-            icon?: React.ComponentType<{
-                className?: string;
-            }>;
-            items?: MenuItem[];
-        })[];
-    })[];
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-    user?: UserConfig;
-    userMenuItems?: UserMenuItem[];
-    branding?: BrandingConfig;
-    labels?: SidebarLabels;
+};
+type Branding = {
+    logoUrl?: string;
+    logoAlt?: string;
+    title?: string;
+    subtitle?: string;
+};
+type LoginButton = {
+    label?: string;
+    href?: string;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    onClick?: () => void;
+};
+type Labels = {
+    logout?: string;
+};
+export type AppSidebarProps = {
+    side?: SidebarPlacement;
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
     fixed?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    branding?: Branding;
     hideBranding?: boolean;
+    groups?: MenuGroup[];
+    user?: User;
+    userMenuItems?: UserMenuItem[];
+    showUserMenu?: boolean;
+    loginButton?: LoginButton;
     showThemeToggle?: boolean;
     scrollable?: boolean;
-    showUserMenu?: boolean;
-    loginButton?: LoginButtonConfig;
-}
-export declare function AppSidebar({ groups, header, footer, user, userMenuItems, branding, labels, fixed, hideBranding, showThemeToggle, className, style, side, variant, collapsible, scrollable, showUserMenu, loginButton, ...props }: AppSidebarProps): import("react/jsx-runtime").JSX.Element;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    labels?: Labels;
+};
+export declare function AppSidebar({ side, variant, collapsible, fixed, className, style, branding, hideBranding, groups, user, userMenuItems, showUserMenu, loginButton, showThemeToggle, scrollable, header, footer, labels, ...props }: AppSidebarProps): import("react/jsx-runtime").JSX.Element;
 export {};