react-shadcn-kit 0.0.3 → 0.0.5

package/dist/es/organisms/app-sidebar.js

@@ -0,0 +1,143 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { ChevronDown as u, LogOut as k } from "lucide-react";
+import { SidebarThemeToggle as G } from "./app-sidebar-client.js";
+import { Sidebar as O, SidebarHeader as p, SidebarMenu as c, SidebarMenuItem as o, SidebarMenuButton as d, SidebarContent as B, SidebarGroup as F, SidebarGroupLabel as b, SidebarGroupContent as f, SidebarMenuSub as q, SidebarMenuSubItem as E, SidebarMenuSubButton as H, SidebarFooter as J } from "../atoms/sidebar.js";
+import { Collapsible as g, CollapsibleTrigger as N, CollapsibleContent as x } from "../atoms/collapsible.js";
+import { cn as K } from "../lib/utils.js";
+import { defaultSidebarConfig as i } from "../config/default-Sidebar.js";
+import { defaultSidebarStyles as m } from "../config/sidebar.config.js";
+import { Avatar as v, AvatarImage as C, AvatarFallback as S } from "../atoms/avatar.js";
+import { DropdownMenu as P, DropdownMenuTrigger as Q, DropdownMenuContent as R, DropdownMenuLabel as U, DropdownMenuSeparator as V, DropdownMenuItem as M } from "../atoms/dropdown-menu.js";
+function ne({
+  config: s,
+  side: w = "left",
+  variant: A,
+  collapsible: y,
+  hideBranding: D = !1,
+  showThemeToggle: I = !0,
+  className: z,
+  style: L,
+  scrollable: T,
+  ...j
+}) {
+  const r = {
+    groups: s?.groups || i.groups,
+    header: s?.header || i.header,
+    footer: s?.footer || i.footer,
+    user: s?.user || i.user,
+    userMenuItems: s?.userMenuItems || i.userMenuItems,
+    branding: D ? void 0 : s?.branding || i.branding,
+    fixed: s?.fixed ?? i.fixed,
+    variant: A ?? s?.variant ?? m.variant,
+    collapsible: y ?? s?.collapsible ?? m.collapsible,
+    scrollable: T ?? s?.scrollable ?? !1,
+    style: { ...m.style, ...s?.style, ...L },
+    className: s?.className
+  };
+  return /* @__PURE__ */ a(
+    O,
+    {
+      side: w,
+      variant: r.variant,
+      collapsible: r.collapsible,
+      scrollable: r.scrollable,
+      className: K(
+        r.fixed ? void 0 : "absolute h-full",
+        r.className,
+        z
+      ),
+      style: r.style,
+      ...j,
+      children: [
+        r.header && /* @__PURE__ */ e(p, { children: r.header }),
+        r.branding && !r.header && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(d, { size: "lg", asChild: !0, children: /* @__PURE__ */ a("a", { href: r.branding.href || "#", children: [
+          /* @__PURE__ */ e("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: r.branding.logo && /* @__PURE__ */ e(r.branding.logo, { className: "size-4" }) }),
+          /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.branding.name }),
+            /* @__PURE__ */ e("span", { className: "truncate text-xs", children: "Enterprise" })
+          ] })
+        ] }) }) }) }) }),
+        /* @__PURE__ */ e(B, { children: r.groups.map((n, h) => /* @__PURE__ */ a(F, { children: [
+          n.label && (n.collapsible ? /* @__PURE__ */ a(g, { defaultOpen: !0, className: "group/collapsible", children: [
+            /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ a(N, { children: [
+              n.label,
+              /* @__PURE__ */ e(u, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" })
+            ] }) }),
+            /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(c, { children: n.items.map((l) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(d, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a("a", { href: l.href, children: [
+              l.icon && /* @__PURE__ */ e(l.icon, {}),
+              /* @__PURE__ */ e("span", { children: l.label })
+            ] }) }) }, l.href)) }) }) })
+          ] }) : /* @__PURE__ */ e(b, { children: n.label })),
+          !n.collapsible && /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(c, { children: n.items.map((l) => /* @__PURE__ */ e(o, { children: l.items && l.items.length > 0 ? /* @__PURE__ */ a(g, { className: "group/collapsible", children: [
+            /* @__PURE__ */ e(d, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a(N, { children: [
+              l.icon && /* @__PURE__ */ e(l.icon, {}),
+              /* @__PURE__ */ e("span", { children: l.label }),
+              /* @__PURE__ */ e(u, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" })
+            ] }) }),
+            /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(q, { children: l.items.map((t) => /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(H, { asChild: !0, isActive: t.isActive, children: /* @__PURE__ */ e("a", { href: t.href, children: /* @__PURE__ */ e("span", { children: t.label }) }) }) }, t.href)) }) })
+          ] }) : /* @__PURE__ */ e(d, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a("a", { href: l.href, children: [
+            l.icon && /* @__PURE__ */ e(l.icon, {}),
+            /* @__PURE__ */ e("span", { children: l.label })
+          ] }) }) }, l.href)) }) })
+        ] }, n.label || h)) }),
+        /* @__PURE__ */ a(J, { children: [
+          I && /* @__PURE__ */ e(G, {}),
+          r.user && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { children: /* @__PURE__ */ a(P, { children: [
+            /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ a(
+              d,
+              {
+                size: "lg",
+                className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+                children: [
+                  /* @__PURE__ */ a(v, { className: "h-8 w-8 rounded-lg", children: [
+                    /* @__PURE__ */ e(C, { src: r.user.avatar, alt: r.user.name }),
+                    /* @__PURE__ */ e(S, { className: "rounded-lg", children: "CN" })
+                  ] }),
+                  /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+                    /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.user.name }),
+                    /* @__PURE__ */ e("span", { className: "truncate text-xs", children: r.user.email })
+                  ] }),
+                  /* @__PURE__ */ e(u, { className: "ml-auto size-4" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ a(
+              R,
+              {
+                className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+                side: "bottom",
+                align: "end",
+                sideOffset: 4,
+                children: [
+                  /* @__PURE__ */ e(U, { className: "p-0 font-normal", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
+                    /* @__PURE__ */ a(v, { className: "h-8 w-8 rounded-lg", children: [
+                      /* @__PURE__ */ e(C, { src: r.user.avatar, alt: r.user.name }),
+                      /* @__PURE__ */ e(S, { className: "rounded-lg", children: "CN" })
+                    ] }),
+                    /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+                      /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.user.name }),
+                      /* @__PURE__ */ e("span", { className: "truncate text-xs", children: r.user.email })
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ e(V, {}),
+                  r.userMenuItems?.map((n, h) => /* @__PURE__ */ e(M, { asChild: !0, children: /* @__PURE__ */ a("a", { href: n.href || "#", onClick: n.onClick, children: [
+                    n.icon && /* @__PURE__ */ e(n.icon, { className: "mr-2 h-4 w-4" }),
+                    /* @__PURE__ */ e("span", { children: n.label })
+                  ] }) }, h)),
+                  !r.userMenuItems && /* @__PURE__ */ a(M, { children: [
+                    /* @__PURE__ */ e(k, { className: "mr-2 h-4 w-4" }),
+                    /* @__PURE__ */ e("span", { children: "Log out" })
+                  ] })
+                ]
+              }
+            )
+          ] }) }) }),
+          r.footer
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ne as AppSidebar
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Client-only theme toggle component for sidebar footer.
+ * This component uses next-themes hooks and must remain client-side.
+ */
+export declare function SidebarThemeToggle(): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -2,10 +2,10 @@
   "name": "react-shadcn-kit",
   "author": "Tushar Yadav",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
@@ -16,35 +16,43 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./atoms/*": {
       "types": "./dist/atoms/*.d.ts",
-      "import": "./dist/atoms/*.js"
+      "import": "./dist/es/atoms/*.js",
+      "require": "./dist/cjs/atoms/*.js"
     },
     "./molecules/*": {
       "types": "./dist/molecules/*.d.ts",
-      "import": "./dist/molecules/*.js"
+      "import": "./dist/es/molecules/*.js",
+      "require": "./dist/cjs/molecules/*.js"
     },
     "./organisms/*": {
       "types": "./dist/organisms/*.d.ts",
-      "import": "./dist/organisms/*.js"
+      "import": "./dist/es/organisms/*.js",
+      "require": "./dist/cjs/organisms/*.js"
     },
     "./layouts/*": {
       "types": "./dist/layouts/*.d.ts",
-      "import": "./dist/layouts/*.js"
+      "import": "./dist/es/layouts/*.js",
+      "require": "./dist/cjs/layouts/*.js"
     },
     "./hooks/*": {
       "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
+      "import": "./dist/es/hooks/*.js",
+      "require": "./dist/cjs/hooks/*.js"
     },
     "./lib/*": {
       "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
+      "import": "./dist/es/lib/*.js",
+      "require": "./dist/cjs/lib/*.js"
     },
     "./config/*": {
       "types": "./dist/config/*.d.ts",
-      "import": "./dist/config/*.js"
+      "import": "./dist/es/config/*.js",
+      "require": "./dist/cjs/config/*.js"
     }
   },
   "scripts": {

package/dist/organisms/app-sidebar.js

@@ -1,169 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { ChevronDown as m, Sun as B, Moon as F, LogOut as E } from "lucide-react";
-import { useTheme as H } from "next-themes";
-import { Sidebar as J, SidebarHeader as f, SidebarMenu as d, SidebarMenuItem as c, SidebarMenuButton as t, SidebarContent as K, SidebarGroup as P, SidebarGroupLabel as g, SidebarGroupContent as N, SidebarMenuSub as Q, SidebarMenuSubItem as R, SidebarMenuSubButton as U, SidebarFooter as V } from "../atoms/sidebar.js";
-import { Collapsible as x, CollapsibleTrigger as v, CollapsibleContent as C } from "../atoms/collapsible.js";
-import { cn as W } from "../lib/utils.js";
-import { defaultSidebarConfig as n } from "../config/default-Sidebar.js";
-import { defaultSidebarStyles as b } from "../config/sidebar.config.js";
-import { Avatar as S, AvatarImage as w, AvatarFallback as M } from "../atoms/avatar.js";
-import { DropdownMenu as y, DropdownMenuTrigger as k, DropdownMenuContent as A, DropdownMenuItem as o, DropdownMenuLabel as X, DropdownMenuSeparator as Y } from "../atoms/dropdown-menu.js";
-function te({
-  config: i,
-  side: z = "left",
-  variant: D,
-  collapsible: I,
-  hideBranding: T = !1,
-  showThemeToggle: L = !0,
-  className: j,
-  style: O,
-  scrollable: G,
-  ...q
-}) {
-  const { setTheme: u } = H(), r = {
-    groups: i?.groups || n.groups,
-    header: i?.header || n.header,
-    footer: i?.footer || n.footer,
-    user: i?.user || n.user,
-    userMenuItems: i?.userMenuItems || n.userMenuItems,
-    branding: T ? void 0 : i?.branding || n.branding,
-    fixed: i?.fixed ?? n.fixed,
-    variant: D ?? i?.variant ?? b.variant,
-    collapsible: I ?? i?.collapsible ?? b.collapsible,
-    scrollable: G ?? i?.scrollable ?? !1,
-    style: { ...b.style, ...i?.style, ...O },
-    className: i?.className
-  };
-  return /* @__PURE__ */ a(
-    J,
-    {
-      side: z,
-      variant: r.variant,
-      collapsible: r.collapsible,
-      scrollable: r.scrollable,
-      className: W(
-        r.fixed ? void 0 : "absolute h-full",
-        r.className,
-        j
-      ),
-      style: r.style,
-      ...q,
-      children: [
-        r.header && /* @__PURE__ */ e(f, { children: r.header }),
-        r.branding && !r.header && /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(t, { size: "lg", asChild: !0, children: /* @__PURE__ */ a("a", { href: r.branding.href || "#", children: [
-          /* @__PURE__ */ e("div", { className: "bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg", children: r.branding.logo && /* @__PURE__ */ e(r.branding.logo, { className: "size-4" }) }),
-          /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-            /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.branding.name }),
-            /* @__PURE__ */ e("span", { className: "truncate text-xs", children: "Enterprise" })
-          ] })
-        ] }) }) }) }) }),
-        /* @__PURE__ */ e(K, { children: r.groups.map((s, p) => /* @__PURE__ */ a(P, { children: [
-          s.label && (s.collapsible ? /* @__PURE__ */ a(x, { defaultOpen: !0, className: "group/collapsible", children: [
-            /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ a(v, { children: [
-              s.label,
-              /* @__PURE__ */ e(m, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" })
-            ] }) }),
-            /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(d, { children: s.items.map((l) => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(t, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a("a", { href: l.href, children: [
-              l.icon && /* @__PURE__ */ e(l.icon, {}),
-              /* @__PURE__ */ e("span", { children: l.label })
-            ] }) }) }, l.href)) }) }) })
-          ] }) : /* @__PURE__ */ e(g, { children: s.label })),
-          !s.collapsible && /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(d, { children: s.items.map((l) => /* @__PURE__ */ e(c, { children: l.items && l.items.length > 0 ? /* @__PURE__ */ a(x, { className: "group/collapsible", children: [
-            /* @__PURE__ */ e(t, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a(v, { children: [
-              l.icon && /* @__PURE__ */ e(l.icon, {}),
-              /* @__PURE__ */ e("span", { children: l.label }),
-              /* @__PURE__ */ e(m, { className: "ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" })
-            ] }) }),
-            /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(Q, { children: l.items.map((h) => /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(U, { asChild: !0, isActive: h.isActive, children: /* @__PURE__ */ e("a", { href: h.href, children: /* @__PURE__ */ e("span", { children: h.label }) }) }) }, h.href)) }) })
-          ] }) : /* @__PURE__ */ e(t, { asChild: !0, isActive: l.isActive, children: /* @__PURE__ */ a("a", { href: l.href, children: [
-            l.icon && /* @__PURE__ */ e(l.icon, {}),
-            /* @__PURE__ */ e("span", { children: l.label })
-          ] }) }) }, l.href)) }) })
-        ] }, s.label || p)) }),
-        /* @__PURE__ */ a(V, { children: [
-          L && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ a(y, { children: [
-            /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ a(t, { size: "lg", children: [
-              /* @__PURE__ */ a("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground", children: [
-                /* @__PURE__ */ e(B, { className: "size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
-                /* @__PURE__ */ e(F, { className: "absolute size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" })
-              ] }),
-              /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-                /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: "Theme" }),
-                /* @__PURE__ */ e("span", { className: "truncate text-xs", children: "Toggle theme" })
-              ] }),
-              /* @__PURE__ */ e(m, { className: "ml-auto size-4" })
-            ] }) }),
-            /* @__PURE__ */ a(
-              A,
-              {
-                className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
-                side: "bottom",
-                align: "end",
-                sideOffset: 4,
-                children: [
-                  /* @__PURE__ */ e(o, { onClick: () => u("light"), children: "Light" }),
-                  /* @__PURE__ */ e(o, { onClick: () => u("dark"), children: "Dark" }),
-                  /* @__PURE__ */ e(o, { onClick: () => u("system"), children: "System" })
-                ]
-              }
-            )
-          ] }) }) }),
-          r.user && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ a(y, { children: [
-            /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ a(
-              t,
-              {
-                size: "lg",
-                className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-                children: [
-                  /* @__PURE__ */ a(S, { className: "h-8 w-8 rounded-lg", children: [
-                    /* @__PURE__ */ e(w, { src: r.user.avatar, alt: r.user.name }),
-                    /* @__PURE__ */ e(M, { className: "rounded-lg", children: "CN" })
-                  ] }),
-                  /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-                    /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.user.name }),
-                    /* @__PURE__ */ e("span", { className: "truncate text-xs", children: r.user.email })
-                  ] }),
-                  /* @__PURE__ */ e(m, { className: "ml-auto size-4" })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ a(
-              A,
-              {
-                className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
-                side: "bottom",
-                align: "end",
-                sideOffset: 4,
-                children: [
-                  /* @__PURE__ */ e(X, { className: "p-0 font-normal", children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm", children: [
-                    /* @__PURE__ */ a(S, { className: "h-8 w-8 rounded-lg", children: [
-                      /* @__PURE__ */ e(w, { src: r.user.avatar, alt: r.user.name }),
-                      /* @__PURE__ */ e(M, { className: "rounded-lg", children: "CN" })
-                    ] }),
-                    /* @__PURE__ */ a("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-                      /* @__PURE__ */ e("span", { className: "truncate font-semibold", children: r.user.name }),
-                      /* @__PURE__ */ e("span", { className: "truncate text-xs", children: r.user.email })
-                    ] })
-                  ] }) }),
-                  /* @__PURE__ */ e(Y, {}),
-                  r.userMenuItems?.map((s, p) => /* @__PURE__ */ e(o, { asChild: !0, children: /* @__PURE__ */ a("a", { href: s.href || "#", onClick: s.onClick, children: [
-                    s.icon && /* @__PURE__ */ e(s.icon, { className: "mr-2 h-4 w-4" }),
-                    /* @__PURE__ */ e("span", { children: s.label })
-                  ] }) }, p)),
-                  !r.userMenuItems && /* @__PURE__ */ a(o, { children: [
-                    /* @__PURE__ */ e(E, { className: "mr-2 h-4 w-4" }),
-                    /* @__PURE__ */ e("span", { children: "Log out" })
-                  ] })
-                ]
-              }
-            )
-          ] }) }) }),
-          r.footer
-        ] })
-      ]
-    }
-  );
-}
-export {
-  te as AppSidebar
-};