react-shadcn-kit 0.0.1 → 0.0.3

package/dist/atoms/chart.js

@@ -1,10 +1,10 @@
 import { jsx as s, jsxs as f, Fragment as P } from "react/jsx-runtime";
-import * as p from "react";
+import * as v from "react";
 import * as _ from "recharts";
 import { cn as l } from "../lib/utils.js";
-const T = { light: "", dark: ".dark" }, N = p.createContext(null);
-function j() {
-  const c = p.useContext(N);
+const T = { light: "", dark: ".dark" }, j = v.createContext(null);
+function y() {
+  const c = v.useContext(j);
   if (!c)
     throw new Error("useChart must be used within a <ChartContainer />");
   return c;
@@ -13,11 +13,11 @@ function K({
   id: c,
   className: e,
   children: n,
-  config: r,
+  config: t,
   ...a
 }) {
-  const d = p.useId(), o = `chart-${c || d.replace(/:/g, "")}`;
-  return /* @__PURE__ */ s(N.Provider, { value: { config: r }, children: /* @__PURE__ */ f(
+  const d = v.useId(), o = `chart-${c || d.replace(/:/g, "")}`;
+  return /* @__PURE__ */ s(j.Provider, { value: { config: t }, children: /* @__PURE__ */ f(
     "div",
     {
       "data-slot": "chart",
@@ -28,23 +28,23 @@ function K({
       ),
       ...a,
       children: [
-        /* @__PURE__ */ s(I, { id: o, config: r }),
+        /* @__PURE__ */ s(I, { id: o, config: t }),
         /* @__PURE__ */ s(_.ResponsiveContainer, { children: n })
       ]
     }
   ) });
 }
 const I = ({ id: c, config: e }) => {
-  const n = Object.entries(e).filter(([, r]) => r.theme || r.color);
+  const n = Object.entries(e).filter(([, t]) => t.theme || t.color);
   return n.length ? /* @__PURE__ */ s(
     "style",
     {
       dangerouslySetInnerHTML: {
         __html: Object.entries(T).map(
-          ([r, a]) => `
+          ([t, a]) => `
 ${a} [data-chart=${c}] {
 ${n.map(([d, o]) => {
-            const i = o.theme?.[r] || o.color;
+            const i = o.theme?.[t] || o.color;
             return i ? `  --color-${d}: ${i};` : null;
           }).join(`
 `)}
@@ -60,7 +60,7 @@ function R({
   active: c,
   payload: e,
   className: n,
-  indicator: r = "dot",
+  indicator: t = "dot",
   hideLabel: a = !1,
   hideIndicator: d = !1,
   label: o,
@@ -69,17 +69,17 @@ function R({
   formatter: k,
   color: $,
   nameKey: L,
-  labelKey: v
+  labelKey: p
 }) {
-  const { config: g } = j(), w = p.useMemo(() => {
+  const { config: g } = y(), w = v.useMemo(() => {
     if (a || !e?.length)
       return null;
-    const [t] = e, x = `${v || t?.dataKey || t?.name || "value"}`, b = C(g, t, x), h = !v && typeof o == "string" ? g[o]?.label || o : b?.label;
+    const [r] = e, x = `${p || r?.dataKey || r?.name || "value"}`, b = C(g, r, x), h = !p && typeof o == "string" ? g[o]?.label || o : b?.label;
     return i ? /* @__PURE__ */ s("div", { className: l("font-medium", u), children: i(h, e) }) : h ? /* @__PURE__ */ s("div", { className: l("font-medium", u), children: h }) : null;
-  }, [o, i, e, a, u, g, v]);
+  }, [o, i, e, a, u, g, p]);
   if (!c || !e?.length)
     return null;
-  const m = e.length === 1 && r !== "dot";
+  const m = e.length === 1 && t !== "dot";
   return /* @__PURE__ */ f(
     "div",
     {
@@ -89,31 +89,31 @@ function R({
       ),
       children: [
         m ? null : w,
-        /* @__PURE__ */ s("div", { className: "grid gap-1.5", children: e.filter((t) => t.type !== "none").map((t, x) => {
-          const b = `${L || t.name || t.dataKey || "value"}`, h = C(g, t, b), y = $ || t.payload.fill || t.color;
+        /* @__PURE__ */ s("div", { className: "grid gap-1.5", children: e.filter((r) => r.type !== "none").map((r, x) => {
+          const b = `${L || r.name || r.dataKey || "value"}`, h = C(g, r, b), N = $ || r.payload?.fill || r.color;
           return /* @__PURE__ */ s(
             "div",
             {
               className: l(
                 "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                r === "dot" && "items-center"
+                t === "dot" && "items-center"
               ),
-              children: k && t?.value !== void 0 && t.name ? k(t.value, t.name, t, x, t.payload) : /* @__PURE__ */ f(P, { children: [
+              children: k && r?.value !== void 0 && r.name ? k(r.value, r.name, r, x, e) : /* @__PURE__ */ f(P, { children: [
                 h?.icon ? /* @__PURE__ */ s(h.icon, {}) : !d && /* @__PURE__ */ s(
                   "div",
                   {
                     className: l(
                       "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
-                        "h-2.5 w-2.5": r === "dot",
-                        "w-1": r === "line",
-                        "w-0 border-[1.5px] border-dashed bg-transparent": r === "dashed",
-                        "my-0.5": m && r === "dashed"
+                        "h-2.5 w-2.5": t === "dot",
+                        "w-1": t === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": t === "dashed",
+                        "my-0.5": m && t === "dashed"
                       }
                     ),
                     style: {
-                      "--color-bg": y,
-                      "--color-border": y
+                      "--color-bg": N,
+                      "--color-border": N
                     }
                   }
                 ),
@@ -127,15 +127,15 @@ function R({
                     children: [
                       /* @__PURE__ */ f("div", { className: "grid gap-1.5", children: [
                         m ? w : null,
-                        /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: h?.label || t.name })
+                        /* @__PURE__ */ s("span", { className: "text-muted-foreground", children: h?.label || r.name })
                       ] }),
-                      t.value && /* @__PURE__ */ s("span", { className: "text-foreground font-mono font-medium tabular-nums", children: t.value.toLocaleString() })
+                      r.value && /* @__PURE__ */ s("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof r.value == "number" ? r.value.toLocaleString() : r.value })
                     ]
                   }
                 )
               ] })
             },
-            t.dataKey
+            r.dataKey
           );
         }) })
       ]
@@ -147,16 +147,16 @@ function O({
   className: c,
   hideIcon: e = !1,
   payload: n,
-  verticalAlign: r = "bottom",
+  verticalAlign: t = "bottom",
   nameKey: a
 }) {
-  const { config: d } = j();
+  const { config: d } = y();
   return n?.length ? /* @__PURE__ */ s(
     "div",
     {
       className: l(
         "flex items-center justify-center gap-4",
-        r === "top" ? "pb-3" : "pt-3",
+        t === "top" ? "pb-3" : "pt-3",
         c
       ),
       children: n.filter((o) => o.type !== "none").map((o) => {
@@ -189,9 +189,9 @@ function O({
 function C(c, e, n) {
   if (typeof e != "object" || e === null)
     return;
-  const r = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
+  const t = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
   let a = n;
-  return n in e && typeof e[n] == "string" ? a = e[n] : r && n in r && typeof r[n] == "string" && (a = r[n]), a in c ? c[a] : c[n];
+  return n in e && typeof e[n] == "string" ? a = e[n] : t && n in t && typeof t[n] == "string" && (a = t[n]), a in c ? c[a] : c[n];
 }
 export {
   K as ChartContainer,

package/dist/atoms/sidebar.d.ts

@@ -19,10 +19,11 @@ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: se
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
-declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<"div"> & {
+declare function Sidebar({ side, variant, collapsible, className, children, scrollable, ...props }: React.ComponentProps<"div"> & {
     side?: "left" | "right";
     variant?: "sidebar" | "floating" | "inset";
     collapsible?: "offcanvas" | "icon" | "none";
+    scrollable?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/sidebar.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
 import * as s from "react";
-import { Slot as h } from "@radix-ui/react-slot";
+import { Slot as v } from "@radix-ui/react-slot";
 import { cva as M } from "class-variance-authority";
 import { PanelLeftIcon as z } from "lucide-react";
 import { useIsMobile as I } from "../hooks/use-mobile.js";
@@ -24,33 +24,33 @@ function de({
   onOpenChange: i,
   className: o,
   style: n,
-  children: c,
-  ...m
+  children: p,
+  ...b
 }) {
-  const l = I(), [f, u] = s.useState(!1), [v, _] = s.useState(a), g = e ?? v, x = s.useCallback(
+  const l = I(), [f, c] = s.useState(!1), [m, _] = s.useState(a), h = e ?? m, x = s.useCallback(
     (d) => {
-      const b = typeof d == "function" ? d(g) : d;
-      i ? i(b) : _(b), document.cookie = `${W}=${b}; path=/; max-age=${$}`;
+      const u = typeof d == "function" ? d(h) : d;
+      i ? i(u) : _(u), document.cookie = `${W}=${u}; path=/; max-age=${$}`;
     },
-    [i, g]
-  ), w = s.useCallback(() => l ? u((d) => !d) : x((d) => !d), [l, x, u]);
+    [i, h]
+  ), w = s.useCallback(() => l ? c((d) => !d) : x((d) => !d), [l, x, c]);
   s.useEffect(() => {
-    const d = (b) => {
-      b.key === F && (b.metaKey || b.ctrlKey) && (b.preventDefault(), w());
+    const d = (u) => {
+      u.key === F && (u.metaKey || u.ctrlKey) && (u.preventDefault(), w());
     };
     return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
   }, [w]);
-  const N = g ? "expanded" : "collapsed", k = s.useMemo(
+  const N = h ? "expanded" : "collapsed", k = s.useMemo(
     () => ({
       state: N,
-      open: g,
+      open: h,
       setOpen: x,
       isMobile: l,
       openMobile: f,
-      setOpenMobile: u,
+      setOpenMobile: c,
       toggleSidebar: w
     }),
-    [N, g, x, l, f, u, w]
+    [N, h, x, l, f, c, w]
   );
   return /* @__PURE__ */ t(C.Provider, { value: k, children: /* @__PURE__ */ t(L, { delayDuration: 0, children: /* @__PURE__ */ t(
     "div",
@@ -65,8 +65,8 @@ function de({
         "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
         o
       ),
-      ...m,
-      children: c
+      ...b,
+      children: p
     }
   ) }) });
 }
@@ -76,9 +76,10 @@ function se({
   collapsible: i = "offcanvas",
   className: o,
   children: n,
-  ...c
+  scrollable: p = !1,
+  ...b
 }) {
-  const { isMobile: m, state: l, openMobile: f, setOpenMobile: u } = S();
+  const { isMobile: l, state: f, openMobile: c, setOpenMobile: m } = S();
   return i === "none" ? /* @__PURE__ */ t(
     "div",
     {
@@ -87,10 +88,10 @@ function se({
         "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
         o
       ),
-      ...c,
+      ...b,
       children: n
     }
-  ) : m ? /* @__PURE__ */ t(B, { open: f, onOpenChange: u, ...c, children: /* @__PURE__ */ p(
+  ) : l ? /* @__PURE__ */ t(B, { open: c, onOpenChange: m, ...b, children: /* @__PURE__ */ g(
     A,
     {
       "data-sidebar": "sidebar",
@@ -102,19 +103,19 @@ function se({
       },
       side: a,
       children: [
-        /* @__PURE__ */ p(O, { className: "sr-only", children: [
+        /* @__PURE__ */ g(O, { className: "sr-only", children: [
           /* @__PURE__ */ t(R, { children: "Sidebar" }),
           /* @__PURE__ */ t(H, { children: "Displays the mobile sidebar." })
         ] }),
         /* @__PURE__ */ t("div", { className: "flex h-full w-full flex-col", children: n })
       ]
     }
-  ) }) : /* @__PURE__ */ p(
+  ) }) : /* @__PURE__ */ g(
     "div",
     {
       className: "group peer text-sidebar-foreground hidden md:block",
-      "data-state": l,
-      "data-collapsible": l === "collapsed" ? i : "",
+      "data-state": f,
+      "data-collapsible": f === "collapsed" ? i : "",
       "data-variant": e,
       "data-side": a,
       "data-slot": "sidebar",
@@ -136,13 +137,14 @@ function se({
           {
             "data-slot": "sidebar-container",
             className: r(
-              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              "inset-y-0 z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+              p ? "relative h-full" : "fixed h-svh",
               a === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               // Adjust the padding for floating and inset variants.
               e === "floating" || e === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               o
             ),
-            ...c,
+            ...b,
             children: /* @__PURE__ */ t(
               "div",
               {
@@ -160,7 +162,7 @@ function se({
 }
 function le({ className: a, onClick: e, ...i }) {
   const { toggleSidebar: o } = S();
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ g(
     E,
     {
       "data-sidebar": "trigger",
@@ -292,7 +294,7 @@ function ve({
   ...i
 }) {
   return /* @__PURE__ */ t(
-    e ? h : "div",
+    e ? v : "div",
     {
       "data-slot": "sidebar-group-label",
       "data-sidebar": "group-label",
@@ -311,7 +313,7 @@ function xe({
   ...i
 }) {
   return /* @__PURE__ */ t(
-    e ? h : "button",
+    e ? v : "button",
     {
       "data-slot": "sidebar-group-action",
       "data-sidebar": "group-action",
@@ -385,34 +387,34 @@ function ye({
   variant: i = "default",
   size: o = "default",
   tooltip: n,
-  className: c,
-  ...m
+  className: p,
+  ...b
 }) {
-  const l = a ? h : "button", { isMobile: f, state: u } = S(), v = /* @__PURE__ */ t(
+  const l = a ? v : "button", { isMobile: f, state: c } = S(), m = /* @__PURE__ */ t(
     l,
     {
       "data-slot": "sidebar-menu-button",
       "data-sidebar": "menu-button",
       "data-size": o,
       "data-active": e,
-      className: r(U({ variant: i, size: o }), c),
-      ...m
+      className: r(U({ variant: i, size: o }), p),
+      ...b
     }
   );
   return n ? (typeof n == "string" && (n = {
     children: n
-  }), /* @__PURE__ */ p(K, { children: [
-    /* @__PURE__ */ t(j, { asChild: !0, children: v }),
+  }), /* @__PURE__ */ g(K, { children: [
+    /* @__PURE__ */ t(j, { asChild: !0, children: m }),
     /* @__PURE__ */ t(
       G,
       {
         side: "right",
         align: "center",
-        hidden: u !== "collapsed" || f,
+        hidden: c !== "collapsed" || f,
         ...n
       }
     )
-  ] })) : v;
+  ] })) : m;
 }
 function Ce({
   className: a,
@@ -421,7 +423,7 @@ function Ce({
   ...o
 }) {
   return /* @__PURE__ */ t(
-    e ? h : "button",
+    e ? v : "button",
     {
       "data-slot": "sidebar-menu-action",
       "data-sidebar": "menu-action",
@@ -467,7 +469,7 @@ function ke({
   const [o, n] = s.useState("50%");
   return s.useEffect(() => {
     n(`${Math.floor(Math.random() * 40) + 50}%`);
-  }, []), /* @__PURE__ */ p(
+  }, []), /* @__PURE__ */ g(
     "div",
     {
       "data-slot": "sidebar-menu-skeleton",
@@ -524,7 +526,7 @@ function Ie({
   ...n
 }) {
   return /* @__PURE__ */ t(
-    a ? h : "a",
+    a ? v : "a",
     {
       "data-slot": "sidebar-menu-sub-button",
       "data-sidebar": "menu-sub-button",

package/dist/config/blog-layout.config.js

@@ -0,0 +1,19 @@
+import { defaultSidebarConfig as i } from "./default-Sidebar.js";
+const e = {
+  ...i,
+  variant: "sidebar",
+  collapsible: "icon",
+  header: void 0,
+  // No header for blog layout
+  branding: {
+    ...i.branding,
+    name: "My Blog"
+  },
+  style: {
+    "--sidebar-width": "18rem",
+    "--sidebar-width-mobile": "100%"
+  }
+};
+export {
+  e as blogLayoutConfig
+};

package/dist/config/default-Sidebar.js

@@ -0,0 +1,83 @@
+import { LayoutDashboard as t, Users as e, Settings as a, BarChart as l, Folder as r } from "lucide-react";
+const i = {
+  groups: [
+    {
+      label: "Platform",
+      items: [
+        {
+          label: "Dashboard",
+          href: "/dashboard",
+          icon: t,
+          isActive: !0
+        },
+        {
+          label: "Analytics",
+          href: "/analytics",
+          icon: l
+        },
+        {
+          label: "Settings",
+          href: "/settings",
+          icon: a,
+          items: [
+            {
+              label: "General",
+              href: "/settings/general"
+            },
+            {
+              label: "Security",
+              href: "/settings/security"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      label: "Projects",
+      items: [
+        {
+          label: "All Projects",
+          href: "/projects",
+          icon: r
+        },
+        {
+          label: "Team",
+          href: "/team",
+          icon: e
+        }
+      ]
+    }
+  ],
+  user: {
+    name: "John Doe",
+    email: "john@example.com",
+    avatar: "https://github.com/shadcn.png"
+  },
+  branding: {
+    name: "Acme Inc",
+    logo: t,
+    href: "/"
+  },
+  userMenuItems: [
+    {
+      label: "Profile",
+      href: "/profile",
+      icon: e
+    },
+    {
+      label: "Settings",
+      href: "/settings",
+      icon: a
+    },
+    {
+      label: "Log out",
+      href: "/logout",
+      icon: e
+      // Using Users as placeholder for LogOut since we need to import it
+    }
+  ],
+  fixed: !0
+};
+export {
+  i as defaultSidebarConfig
+};

package/dist/config/default-layout.js

@@ -0,0 +1,21 @@
+const t = {
+  sidebar: {
+    visible: !0,
+    placement: "left",
+    color: "#fff",
+    transparent: !1,
+    hasBranding: !0,
+    width: "250px"
+  },
+  navbar: {
+    visible: !0,
+    height: "60px",
+    transparent: !1,
+    showBranding: !0,
+    position: "top",
+    shadow: !0
+  }
+};
+export {
+  t as defaultLayoutConfig
+};

package/dist/config/default-navigation.js

@@ -1,83 +1,5 @@
-import { Users as e, Settings as t, LayoutDashboard as a, BarChart as o, Folder as l } from "lucide-react";
-const r = {
-  groups: [
-    {
-      label: "Platform",
-      items: [
-        {
-          label: "Dashboard",
-          href: "/dashboard",
-          icon: a,
-          isActive: !0
-        },
-        {
-          label: "Analytics",
-          href: "/analytics",
-          icon: o
-        },
-        {
-          label: "Settings",
-          href: "/settings",
-          icon: t,
-          items: [
-            {
-              label: "General",
-              href: "/settings/general"
-            },
-            {
-              label: "Security",
-              href: "/settings/security"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      label: "Projects",
-      items: [
-        {
-          label: "All Projects",
-          href: "/projects",
-          icon: l
-        },
-        {
-          label: "Team",
-          href: "/team",
-          icon: e
-        }
-      ]
-    }
-  ],
-  user: {
-    name: "John Doe",
-    email: "john@example.com",
-    avatar: "https://github.com/shadcn.png"
-  },
-  branding: {
-    name: "Acme Inc",
-    logo: a,
-    href: "/"
-  },
-  userMenuItems: [
-    {
-      label: "Profile",
-      href: "/profile",
-      icon: e
-    },
-    {
-      label: "Settings",
-      href: "/settings",
-      icon: t
-    },
-    {
-      label: "Log out",
-      href: "/logout",
-      icon: e
-      // Using Users as placeholder for LogOut since we need to import it
-    }
-  ],
-  fixed: !1
-}, i = {
+import { Users as e, Settings as t } from "lucide-react";
+const a = {
   items: [
     {
       label: "Overview",
@@ -131,6 +53,5 @@ const r = {
   ]
 };
 export {
-  i as defaultNavbarConfig,
-  r as defaultSidebarConfig
+  a as defaultNavbarConfig
 };

package/dist/config/sidebar.config.js

@@ -0,0 +1,11 @@
+const e = {
+  variant: "sidebar",
+  collapsible: "icon",
+  style: {
+    "--sidebar-width": "16rem",
+    "--sidebar-width-mobile": "18rem"
+  }
+};
+export {
+  e as defaultSidebarStyles
+};

package/dist/index.d.ts

@@ -1,7 +1,11 @@
-export * from './molecules/app-sidebar';
-export * from './molecules/app-navbar';
+export * from './organisms/app-sidebar';
+export * from './organisms/app-navbar';
 export * from './types/navigation';
 export * from './config/default-navigation';
+export * from './config/default-layout';
+export { default as DefaultLayout } from './layouts/default-layout';
+export { default as BlogLayout } from './layouts/blog-layout';
+export { default as SidebarScrollLayout } from './layouts/sidebar-scroll-layout';
 export * from './atoms/accordion';
 export * from './atoms/alert-dialog';
 export * from './atoms/alert';