shad-m 1.0.0

package/dist/common/display/score-meter.mjs

@@ -0,0 +1,140 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useMemo } from 'react';
+import { cn } from '@/lib/utils';
+
+function ScoreMeter({
+  score,
+  milestones,
+  showTooltip = true,
+  className = "",
+  progresBarClassName = "",
+  renderTooltip,
+  renderTick,
+  progressFillColor
+}) {
+  const progresBarRef = React.useRef(null);
+  const tooltipRef = React.useRef(null);
+  const sortedMilestones = [...milestones].sort((a, b) => a.maxScore - b.maxScore);
+  const maximumScore = sortedMilestones[sortedMilestones.length - 1]?.maxScore || 100;
+  const validScore = useMemo(
+    () => score < 0 ? 0 : score > maximumScore ? maximumScore : score,
+    [score, maximumScore]
+  );
+  const currentMilestone = sortedMilestones.find((milestone) => score <= milestone.maxScore) || (score > maximumScore ? sortedMilestones[sortedMilestones.length - 1] : sortedMilestones[0]);
+  const [progresWidth, setProgresWidth] = React.useState(0);
+  React.useEffect(() => {
+    if (progresBarRef?.current) {
+      const progresWidth2 = progresBarRef.current.offsetWidth;
+      setProgresWidth(progresWidth2);
+    }
+  }, [score, tooltipRef, progresBarRef]);
+  const formatLabel = (template, scoreValue) => {
+    return typeof template === "function" ? template(scoreValue) : template.replace("${score}", scoreValue.toString());
+  };
+  const tooltipArrowStyles = React.useMemo(() => {
+    const tooltipPosition = validScore / maximumScore * progresWidth;
+    const isNearLeft = tooltipPosition < 10;
+    const isNearRight = tooltipPosition > progresWidth - 10;
+    const borderLeftWidth = isNearRight ? 4 : Math.min(4, validScore);
+    const borderRightWidth = isNearLeft ? 4 : Math.min(4, maximumScore - validScore);
+    const translateX = isNearLeft ? "0%" : isNearRight ? "-100%" : "-50%";
+    return {
+      borderTopColor: currentMilestone?.tooltipColor ?? currentMilestone?.bgColor ?? "",
+      marginLeft: `${tooltipPosition}px`,
+      transform: `translateX(${translateX})`,
+      borderLeftWidth: `${borderLeftWidth}px`,
+      borderRightWidth: `${borderRightWidth}px`
+    };
+  }, [maximumScore, validScore, progresWidth, currentMilestone]);
+  const tooltipStyles = React.useMemo(() => {
+    const tooltipWidth = tooltipRef.current?.offsetWidth || 0;
+    const tooltipPosition = validScore / maximumScore * progresWidth;
+    let tooltipLeft = tooltipPosition - tooltipWidth / 2;
+    if (tooltipLeft < 0) tooltipLeft = 0;
+    if (tooltipLeft + tooltipWidth > progresWidth) tooltipLeft = progresWidth - tooltipWidth;
+    const borderBottomLeftRadius = tooltipLeft === 0 ? 0 : Math.min(8, validScore);
+    const borderBottomRightRadius = tooltipLeft + tooltipWidth === progresWidth ? 0 : Math.min(8, maximumScore - validScore);
+    return {
+      background: currentMilestone?.tooltipColor ?? currentMilestone?.bgColor ?? "",
+      marginLeft: `${tooltipLeft}px`,
+      borderBottomLeftRadius: `${borderBottomLeftRadius}px`,
+      borderBottomRightRadius: `${borderBottomRightRadius}px`
+    };
+  }, [validScore, maximumScore, progresWidth, currentMilestone]);
+  const tooltipValue = useMemo(() => {
+    return renderTooltip?.(score) ?? currentMilestone?.description;
+  }, [renderTooltip, currentMilestone]);
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, ref: progresBarRef, children: [
+    showTooltip && currentMilestone && /* @__PURE__ */ jsxs("div", { className: "mb-1 w-full", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-t14m inline-block whitespace-nowrap rounded-[8px] px-3 py-1 font-medium text-white",
+          style: tooltipStyles,
+          ref: tooltipRef,
+          children: formatLabel(currentMilestone?.label ?? "", score)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("top-full h-0 w-0 rounded-[1px] border-t-[6px] border-transparent"),
+          style: tooltipArrowStyles
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("bg-ink-100s relative h-3 w-full rounded-full", progresBarClassName), children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-full", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full w-full overflow-hidden rounded-full",
+          style: {
+            transform: `translateX(${validScore / maximumScore * 100 - 100}%)`
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full w-full rounded-full",
+              style: {
+                background: progressFillColor ?? currentMilestone?.bgColor ?? "#6366f1",
+                transform: `translateX(${100 - validScore / maximumScore * 100}%)`
+              }
+            }
+          )
+        }
+      ) }),
+      sortedMilestones.map((milestone, index) => {
+        if (index === sortedMilestones.length - 1) return null;
+        if (renderTick)
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-1/2 -translate-y-1/2",
+              style: {
+                left: `${milestone.maxScore / maximumScore * 100}%`
+              },
+              children: renderTick(milestone, score)
+            },
+            index
+          );
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 h-full w-0.5 cursor-pointer transition-opacity hover:opacity-80",
+            style: {
+              left: `${milestone.maxScore / maximumScore * 100}%`,
+              background: milestone.tickColor ?? "#f97316"
+            }
+          },
+          index
+        );
+      })
+    ] }),
+    tooltipValue && /* @__PURE__ */ jsx("div", { className: "text-t14m text-ink-400s mt-3", children: tooltipValue })
+  ] });
+}
+
+export { ScoreMeter as default };
+//# sourceMappingURL=score-meter.mjs.map
+//# sourceMappingURL=score-meter.mjs.map

package/dist/common/display/score-meter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/score-meter.tsx"],"names":["progresWidth"],"mappings":"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","file":"score-meter.mjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport { CSSProperties, useMemo } from 'react';\n\nexport interface Milestone {\n  maxScore: number;\n  label: string | ((score: number) => string);\n  bgColor?: string;\n  tooltipColor?: string;\n  tickColor?: string;\n  description?: string;\n}\n\ninterface ScoreMeterProps {\n  score: number;\n  milestones: Milestone[];\n  showTooltip?: boolean;\n  className?: string;\n  progresBarClassName?: string;\n  renderTooltip?: (score: number) => string | React.ReactNode;\n  renderTick?: (milestone: Milestone, score: number) => React.ReactNode;\n  progressFillColor?: string;\n}\n\nexport default function ScoreMeter({\n  score,\n  milestones,\n  showTooltip = true,\n  className = '',\n  progresBarClassName = '',\n  renderTooltip,\n  renderTick,\n  progressFillColor,\n}: ScoreMeterProps) {\n  const progresBarRef = React.useRef<HTMLDivElement>(null);\n  const tooltipRef = React.useRef<HTMLDivElement>(null);\n\n  // Sắp xếp milestones theo thứ tự tăng dần\n  const sortedMilestones = [...milestones].sort((a, b) => a.maxScore - b.maxScore);\n\n  // Tính điểm tối đa từ milestones\n  const maximumScore = sortedMilestones[sortedMilestones.length - 1]?.maxScore || 100;\n\n  const validScore = useMemo(\n    () => (score < 0 ? 0 : score > maximumScore ? maximumScore : score),\n    [score, maximumScore],\n  );\n\n  // Tìm milestone hiện tại dựa trên điểm số\n  const currentMilestone =\n    sortedMilestones.find((milestone) => score <= milestone.maxScore) ||\n    (score > maximumScore ? sortedMilestones[sortedMilestones.length - 1] : sortedMilestones[0]);\n\n  const [progresWidth, setProgresWidth] = React.useState(0);\n\n  React.useEffect(() => {\n    if (progresBarRef?.current) {\n      const progresWidth = progresBarRef.current.offsetWidth;\n\n      setProgresWidth(progresWidth);\n    }\n  }, [score, tooltipRef, progresBarRef]);\n\n  // Tạo label với điểm số được thay thế\n  const formatLabel = (template: string | ((scoreValue: number) => string), scoreValue: number) => {\n    return typeof template === 'function'\n      ? template(scoreValue)\n      : template.replace('${score}', scoreValue.toString());\n  };\n\n  const tooltipArrowStyles = React.useMemo(() => {\n    const tooltipPosition = (validScore / maximumScore) * progresWidth;\n    const isNearLeft = tooltipPosition < 10; // Ngưỡng gần bên trái\n    const isNearRight = tooltipPosition > progresWidth - 10; // Ngưỡng gần bên phải\n\n    const borderLeftWidth = isNearRight ? 4 : Math.min(4, validScore);\n    const borderRightWidth = isNearLeft ? 4 : Math.min(4, maximumScore - validScore);\n    const translateX = isNearLeft ? '0%' : isNearRight ? '-100%' : '-50%';\n\n    return {\n      borderTopColor: currentMilestone?.tooltipColor ?? currentMilestone?.bgColor ?? '',\n      marginLeft: `${tooltipPosition}px`,\n      transform: `translateX(${translateX})`,\n      borderLeftWidth: `${borderLeftWidth}px`,\n      borderRightWidth: `${borderRightWidth}px`,\n    };\n  }, [maximumScore, validScore, progresWidth, currentMilestone]);\n\n  const tooltipStyles = React.useMemo(() => {\n    const tooltipWidth = tooltipRef.current?.offsetWidth || 0;\n    const tooltipPosition = (validScore / maximumScore) * progresWidth;\n\n    // Clamp tooltip position to stay within bounds\n    let tooltipLeft = tooltipPosition - tooltipWidth / 2;\n    if (tooltipLeft < 0) tooltipLeft = 0;\n    if (tooltipLeft + tooltipWidth > progresWidth) tooltipLeft = progresWidth - tooltipWidth;\n\n    // Adjust border radii based on proximity to edges\n    const borderBottomLeftRadius = tooltipLeft === 0 ? 0 : Math.min(8, validScore);\n    const borderBottomRightRadius =\n      tooltipLeft + tooltipWidth === progresWidth ? 0 : Math.min(8, maximumScore - validScore);\n\n    return {\n      background: currentMilestone?.tooltipColor ?? currentMilestone?.bgColor ?? '',\n      marginLeft: `${tooltipLeft}px`,\n      borderBottomLeftRadius: `${borderBottomLeftRadius}px`,\n      borderBottomRightRadius: `${borderBottomRightRadius}px`,\n    };\n  }, [validScore, maximumScore, progresWidth, currentMilestone]);\n\n  const tooltipValue = useMemo(() => {\n    return renderTooltip?.(score) ?? currentMilestone?.description;\n  }, [renderTooltip, currentMilestone]);\n\n  return (\n    <div className={`w-full ${className}`} ref={progresBarRef}>\n      {/* Tooltip */}\n      {showTooltip && currentMilestone && (\n        <div className=\"mb-1 w-full\">\n          <div\n            className=\"text-t14m inline-block whitespace-nowrap rounded-[8px] px-3 py-1 font-medium text-white\"\n            style={tooltipStyles}\n            ref={tooltipRef}\n          >\n            {formatLabel(currentMilestone?.label ?? '', score)}\n          </div>\n\n          {/* Mũi tên tooltip */}\n          <div\n            className={cn('top-full h-0 w-0 rounded-[1px] border-t-[6px] border-transparent')}\n            style={tooltipArrowStyles}\n          />\n        </div>\n      )}\n\n      {/* Progress bar container */}\n      <div className={cn('bg-ink-100s relative h-3 w-full rounded-full', progresBarClassName)}>\n        {/* Progress bar fill */}\n        <div className=\"h-full w-full overflow-hidden rounded-full\">\n          <div\n            className=\"h-full w-full overflow-hidden rounded-full\"\n            style={{\n              transform: `translateX(${(validScore / maximumScore) * 100 - 100}%)`,\n            }}\n          >\n            <div\n              className=\"h-full w-full rounded-full\"\n              style={{\n                background: progressFillColor ?? currentMilestone?.bgColor ?? '#6366f1',\n                transform: `translateX(${100 - (validScore / maximumScore) * 100}%)`,\n              }}\n            />\n          </div>\n        </div>\n\n        {/* Tick marks */}\n        {sortedMilestones.map((milestone, index) => {\n          if (index === sortedMilestones.length - 1) return null; // Không hiển thị tick cho milestone cuối cùng\n\n          if (renderTick)\n            return (\n              <div\n                key={index}\n                className=\"absolute top-1/2 -translate-y-1/2\"\n                style={{\n                  left: `${(milestone.maxScore / maximumScore) * 100}%`,\n                }}\n              >\n                {renderTick(milestone, score)}\n              </div>\n            );\n\n          return (\n            <div\n              key={index}\n              className=\"absolute top-0 h-full w-0.5 cursor-pointer transition-opacity hover:opacity-80\"\n              style={{\n                left: `${(milestone.maxScore / maximumScore) * 100}%`,\n                background: milestone.tickColor ?? '#f97316',\n              }}\n            />\n          );\n        })}\n      </div>\n\n      {/* Description */}\n      {tooltipValue && <div className=\"text-t14m text-ink-400s mt-3\">{tooltipValue}</div>}\n    </div>\n  );\n}\n"]}

package/dist/common/display/sidebar/app-sidebar.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { NavSectionType } from '@/lib/types';
+import { Sidebar } from '@repo/ui/components/sidebar';
+import { NavItemClassNames, SidebarClassNames } from './types';
+type AppSidebar = {
+    navSections: NavSectionType[];
+    LinkComponent?: React.ComponentType<any>;
+    sidebarHeader: React.ReactNode;
+    sidebarHeaderAsMenuItem?: boolean;
+    sidebarHeaderLink?: string;
+    sidebarFooter?: React.ReactNode;
+    sidebarContent?: React.ReactNode;
+    hasSideRail?: boolean;
+    classNames?: SidebarClassNames;
+    navClassNames?: NavItemClassNames;
+    mobileSheetClassName?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    /**
+     * Control gap behavior when sidebar is collapsed
+     * - true: Use smaller gap (gap-2) when collapsed
+     * - false: Keep consistent gap (gap-6)
+     */
+    compactWhenCollapsed?: boolean;
+} & React.ComponentProps<typeof Sidebar>;
+export declare function AppSidebar({ navSections, sidebarHeader, sidebarHeaderAsMenuItem, sidebarHeaderLink, sidebarFooter, sidebarContent, hasSideRail, LinkComponent, classNames, navClassNames, className, mobileSheetClassName, showHeader, showFooter, compactWhenCollapsed, ...props }: AppSidebar): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=app-sidebar.d.ts.map

package/dist/common/display/sidebar/app-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../src/common/display/sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EACL,OAAO,EAUR,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE/D,KAAK,UAAU,GAAG;IAChB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEzC,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,aAAa,EACb,uBAA8B,EAC9B,iBAAuB,EACvB,aAAa,EACb,cAAc,EACd,WAAmB,EACnB,aAAa,EACb,UAAU,EACV,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,UAAiB,EACjB,UAAiB,EACjB,oBAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,UAAU,2CAkFZ"}

package/dist/common/display/sidebar/app-sidebar.js

@@ -0,0 +1,114 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('@/lib/utils');
+var sidebar = require('@repo/ui/components/sidebar');
+var navMain = require('./nav-main');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function AppSidebar({
+  navSections,
+  sidebarHeader,
+  sidebarHeaderAsMenuItem = true,
+  sidebarHeaderLink = "/",
+  sidebarFooter,
+  sidebarContent,
+  hasSideRail = false,
+  LinkComponent,
+  classNames,
+  navClassNames,
+  className,
+  mobileSheetClassName,
+  showHeader = true,
+  showFooter = true,
+  compactWhenCollapsed = true,
+  ...props
+}) {
+  const { isMobile, openMobile, state, isHovered, open } = sidebar.useSidebar();
+  const Link = LinkComponent || (({ href, children, ...linkProps }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...linkProps, children }));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    sidebar.Sidebar,
+    {
+      collapsible: "icon",
+      className: utils.cn("z-40", className),
+      mobileSheetClassName: classNames?.mobileRoot,
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsxRuntime.jsxs(sidebar.SidebarHeader, { className: utils.cn("relative", classNames?.header), children: [
+          sidebarHeaderAsMenuItem ? /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenu, { children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: sidebarHeaderLink, className: "cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            sidebar.SidebarMenuButton,
+            {
+              size: "lg",
+              className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+              children: sidebarHeader
+            }
+          ) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: sidebarHeader }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            sidebar.SidebarTrigger,
+            {
+              className: utils.cn(
+                "absolute right-[-16px] top-4 z-30 hidden h-8 w-8 rounded-full lg:flex",
+                classNames?.trigger
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          sidebar.SidebarContent,
+          {
+            className: utils.cn(
+              "gap-6",
+              classNames?.content,
+              !showHeader && "pt-6"
+              // Add padding-top when header is hidden
+            ),
+            children: [
+              sidebarContent,
+              navSections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                navMain.NavMain,
+                {
+                  label: section.label,
+                  items: section.items,
+                  LinkComponent,
+                  labelClassName: navClassNames?.label,
+                  itemClassName: navClassNames?.item,
+                  itemActiveClassName: navClassNames?.itemActive,
+                  itemHoverClassName: navClassNames?.itemHover,
+                  subItemClassName: navClassNames?.subItem,
+                  subItemActiveClassName: navClassNames?.subItemActive,
+                  subItemHoverClassName: navClassNames?.subItemHover
+                }
+              ) }, section.label || index))
+            ]
+          }
+        ),
+        showFooter && sidebarFooter && /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarFooter, { className: classNames?.footer, children: sidebarFooter }),
+        hasSideRail && /* @__PURE__ */ jsxRuntime.jsx(sidebar.SidebarRail, {})
+      ]
+    }
+  );
+}
+
+exports.AppSidebar = AppSidebar;
+//# sourceMappingURL=app-sidebar.js.map
+//# sourceMappingURL=app-sidebar.js.map

package/dist/common/display/sidebar/app-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/app-sidebar.tsx"],"names":["useSidebar","jsx","jsxs","Sidebar","cn","SidebarHeader","SidebarMenu","SidebarMenuItem","SidebarMenuButton","SidebarTrigger","SidebarContent","React","NavMain","SidebarFooter","SidebarRail"],"mappings":"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","file":"app-sidebar.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { NavSectionType } from '@/lib/types';\nimport { cn } from '@/lib/utils';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from '@repo/ui/components/sidebar';\nimport { NavMain } from './nav-main';\nimport { NavItemClassNames, SidebarClassNames } from './types';\n\ntype AppSidebar = {\n  navSections: NavSectionType[]; // Changed from navItems to navSections\n  LinkComponent?: React.ComponentType<any>;\n  sidebarHeader: React.ReactNode;\n  sidebarHeaderAsMenuItem?: boolean; // If true, wraps sidebarHeader in SidebarMenu structure\n  sidebarHeaderLink?: string; // Optional link for header when used as menu item\n  sidebarFooter?: React.ReactNode; // Footer content (parent decides what to show)\n  sidebarContent?: React.ReactNode; // Additional content before navigation (e.g., userInfo on mobile)\n  hasSideRail?: boolean; // Controls SidebarRail visibility for drag-to-resize functionality (default: false)\n  // Grouped style customization props\n  classNames?: SidebarClassNames;\n  navClassNames?: NavItemClassNames;\n  mobileSheetClassName?: string;\n  showHeader?: boolean; // Control header visibility\n  showFooter?: boolean; // Control footer visibility\n  /**\n   * Control gap behavior when sidebar is collapsed\n   * - true: Use smaller gap (gap-2) when collapsed\n   * - false: Keep consistent gap (gap-6)\n   */\n  compactWhenCollapsed?: boolean;\n} & React.ComponentProps<typeof Sidebar>;\n\nexport function AppSidebar({\n  navSections,\n  sidebarHeader,\n  sidebarHeaderAsMenuItem = true,\n  sidebarHeaderLink = '/',\n  sidebarFooter,\n  sidebarContent,\n  hasSideRail = false,\n  LinkComponent,\n  classNames,\n  navClassNames,\n  className,\n  mobileSheetClassName,\n  showHeader = true,\n  showFooter = true,\n  compactWhenCollapsed = true,\n  ...props\n}: AppSidebar) {\n  const { isMobile, openMobile, state, isHovered, open } = useSidebar();\n  // On mobile: use openMobile state\n  // On desktop: show expanded when open OR when collapsed but hovered\n  const isExpanded = isMobile ? openMobile : open || (state === 'collapsed' && isHovered);\n\n  const Link =\n    LinkComponent ||\n    (({ href, children, ...linkProps }) => (\n      <a href={href} {...linkProps}>\n        {children}\n      </a>\n    ));\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className={cn('z-40', className)}\n      mobileSheetClassName={classNames?.mobileRoot}\n      {...props}\n    >\n      {showHeader && (\n        <SidebarHeader className={cn('relative', classNames?.header)}>\n          {sidebarHeaderAsMenuItem ? (\n            <SidebarMenu>\n              <Link href={sidebarHeaderLink} className=\"cursor-pointer\">\n                <SidebarMenuItem>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    {sidebarHeader}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </Link>\n            </SidebarMenu>\n          ) : (\n            <>{sidebarHeader}</>\n          )}\n          <SidebarTrigger\n            className={cn(\n              'absolute right-[-16px] top-4 z-30 hidden h-8 w-8 rounded-full lg:flex',\n              classNames?.trigger,\n            )}\n          />\n        </SidebarHeader>\n      )}\n      {/* ...existing code... */}\n      <SidebarContent\n        className={cn(\n          'gap-6',\n          classNames?.content,\n          !showHeader && 'pt-6', // Add padding-top when header is hidden\n        )}\n      >\n        {/* Additional content before navigation (e.g., userInfo on mobile) */}\n        {sidebarContent}\n\n        {/* Navigation Sections */}\n        {navSections.map((section, index) => (\n          <React.Fragment key={section.label || index}>\n            <NavMain\n              label={section.label}\n              items={section.items}\n              LinkComponent={LinkComponent}\n              labelClassName={navClassNames?.label}\n              itemClassName={navClassNames?.item}\n              itemActiveClassName={navClassNames?.itemActive}\n              itemHoverClassName={navClassNames?.itemHover}\n              subItemClassName={navClassNames?.subItem}\n              subItemActiveClassName={navClassNames?.subItemActive}\n              subItemHoverClassName={navClassNames?.subItemHover}\n            />\n          </React.Fragment>\n        ))}\n      </SidebarContent>\n      {showFooter && sidebarFooter && (\n        <SidebarFooter className={classNames?.footer}>{sidebarFooter}</SidebarFooter>\n      )}\n      {hasSideRail && <SidebarRail />}\n    </Sidebar>\n  );\n}\n"]}

package/dist/common/display/sidebar/app-sidebar.mjs

@@ -0,0 +1,92 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { useSidebar, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger, SidebarContent, SidebarFooter, SidebarRail } from '@repo/ui/components/sidebar';
+import { NavMain } from './nav-main';
+
+function AppSidebar({
+  navSections,
+  sidebarHeader,
+  sidebarHeaderAsMenuItem = true,
+  sidebarHeaderLink = "/",
+  sidebarFooter,
+  sidebarContent,
+  hasSideRail = false,
+  LinkComponent,
+  classNames,
+  navClassNames,
+  className,
+  mobileSheetClassName,
+  showHeader = true,
+  showFooter = true,
+  compactWhenCollapsed = true,
+  ...props
+}) {
+  const { isMobile, openMobile, state, isHovered, open } = useSidebar();
+  const Link = LinkComponent || (({ href, children, ...linkProps }) => /* @__PURE__ */ jsx("a", { href, ...linkProps, children }));
+  return /* @__PURE__ */ jsxs(
+    Sidebar,
+    {
+      collapsible: "icon",
+      className: cn("z-40", className),
+      mobileSheetClassName: classNames?.mobileRoot,
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(SidebarHeader, { className: cn("relative", classNames?.header), children: [
+          sidebarHeaderAsMenuItem ? /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(Link, { href: sidebarHeaderLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(
+            SidebarMenuButton,
+            {
+              size: "lg",
+              className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+              children: sidebarHeader
+            }
+          ) }) }) }) : /* @__PURE__ */ jsx(Fragment, { children: sidebarHeader }),
+          /* @__PURE__ */ jsx(
+            SidebarTrigger,
+            {
+              className: cn(
+                "absolute right-[-16px] top-4 z-30 hidden h-8 w-8 rounded-full lg:flex",
+                classNames?.trigger
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          SidebarContent,
+          {
+            className: cn(
+              "gap-6",
+              classNames?.content,
+              !showHeader && "pt-6"
+              // Add padding-top when header is hidden
+            ),
+            children: [
+              sidebarContent,
+              navSections.map((section, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
+                NavMain,
+                {
+                  label: section.label,
+                  items: section.items,
+                  LinkComponent,
+                  labelClassName: navClassNames?.label,
+                  itemClassName: navClassNames?.item,
+                  itemActiveClassName: navClassNames?.itemActive,
+                  itemHoverClassName: navClassNames?.itemHover,
+                  subItemClassName: navClassNames?.subItem,
+                  subItemActiveClassName: navClassNames?.subItemActive,
+                  subItemHoverClassName: navClassNames?.subItemHover
+                }
+              ) }, section.label || index))
+            ]
+          }
+        ),
+        showFooter && sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, { className: classNames?.footer, children: sidebarFooter }),
+        hasSideRail && /* @__PURE__ */ jsx(SidebarRail, {})
+      ]
+    }
+  );
+}
+
+export { AppSidebar };
+//# sourceMappingURL=app-sidebar.mjs.map
+//# sourceMappingURL=app-sidebar.mjs.map

package/dist/common/display/sidebar/app-sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/app-sidebar.tsx"],"names":[],"mappings":";;;;;;AA4CO,SAAS,UAAA,CAAW;AAAA,EACzB,WAAA;AAAA,EACA,aAAA;AAAA,EACA,uBAAA,GAA0B,IAAA;AAAA,EAC1B,iBAAA,GAAoB,GAAA;AAAA,EACpB,aAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,aAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,UAAA,GAAa,IAAA;AAAA,EACb,oBAAA,GAAuB,IAAA;AAAA,EACvB,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,EAAE,QAAA,EAAU,UAAA,EAAY,OAAO,SAAA,EAAW,IAAA,KAAS,UAAA,EAAW;AAKpE,EAAA,MAAM,IAAA,GACJ,aAAA,KACC,CAAC,EAAE,MAAM,QAAA,EAAU,GAAG,SAAA,EAAU,qBAC/B,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAa,GAAG,WAChB,QAAA,EACH,CAAA,CAAA;AAGJ,EAAA,uBACE,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,SAAS,CAAA;AAAA,MAC/B,sBAAsB,UAAA,EAAY,UAAA;AAAA,MACjC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,yBACE,aAAA,EAAA,EAAc,SAAA,EAAW,GAAG,UAAA,EAAY,UAAA,EAAY,MAAM,CAAA,EACxD,QAAA,EAAA;AAAA,UAAA,uBAAA,mBACC,GAAA,CAAC,eACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,MAAM,iBAAA,EAAmB,SAAA,EAAU,gBAAA,EACvC,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,YAAC,iBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAU,sFAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH,EACF,CAAA,EACF,CAAA,EACF,CAAA,mCAEG,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,0BAEnB,GAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,uEAAA;AAAA,gBACA,UAAA,EAAY;AAAA;AACd;AAAA;AACF,SAAA,EACF,CAAA;AAAA,wBAGF,IAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,OAAA;AAAA,cACA,UAAA,EAAY,OAAA;AAAA,cACZ,CAAC,UAAA,IAAc;AAAA;AAAA,aACjB;AAAA,YAGC,QAAA,EAAA;AAAA,cAAA,cAAA;AAAA,cAGA,WAAA,CAAY,IAAI,CAAC,OAAA,EAAS,0BACzB,GAAA,CAAC,KAAA,CAAM,UAAN,EACC,QAAA,kBAAA,GAAA;AAAA,gBAAC,OAAA;AAAA,gBAAA;AAAA,kBACC,OAAO,OAAA,CAAQ,KAAA;AAAA,kBACf,OAAO,OAAA,CAAQ,KAAA;AAAA,kBACf,aAAA;AAAA,kBACA,gBAAgB,aAAA,EAAe,KAAA;AAAA,kBAC/B,eAAe,aAAA,EAAe,IAAA;AAAA,kBAC9B,qBAAqB,aAAA,EAAe,UAAA;AAAA,kBACpC,oBAAoB,aAAA,EAAe,SAAA;AAAA,kBACnC,kBAAkB,aAAA,EAAe,OAAA;AAAA,kBACjC,wBAAwB,aAAA,EAAe,aAAA;AAAA,kBACvC,uBAAuB,aAAA,EAAe;AAAA;AAAA,eACxC,EAAA,EAZmB,OAAA,CAAQ,KAAA,IAAS,KAatC,CACD;AAAA;AAAA;AAAA,SACH;AAAA,QACC,cAAc,aAAA,oBACb,GAAA,CAAC,iBAAc,SAAA,EAAW,UAAA,EAAY,QAAS,QAAA,EAAA,aAAA,EAAc,CAAA;AAAA,QAE9D,WAAA,wBAAgB,WAAA,EAAA,EAAY;AAAA;AAAA;AAAA,GAC/B;AAEJ","file":"app-sidebar.mjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { NavSectionType } from '@/lib/types';\nimport { cn } from '@/lib/utils';\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarTrigger,\n  useSidebar,\n} from '@repo/ui/components/sidebar';\nimport { NavMain } from './nav-main';\nimport { NavItemClassNames, SidebarClassNames } from './types';\n\ntype AppSidebar = {\n  navSections: NavSectionType[]; // Changed from navItems to navSections\n  LinkComponent?: React.ComponentType<any>;\n  sidebarHeader: React.ReactNode;\n  sidebarHeaderAsMenuItem?: boolean; // If true, wraps sidebarHeader in SidebarMenu structure\n  sidebarHeaderLink?: string; // Optional link for header when used as menu item\n  sidebarFooter?: React.ReactNode; // Footer content (parent decides what to show)\n  sidebarContent?: React.ReactNode; // Additional content before navigation (e.g., userInfo on mobile)\n  hasSideRail?: boolean; // Controls SidebarRail visibility for drag-to-resize functionality (default: false)\n  // Grouped style customization props\n  classNames?: SidebarClassNames;\n  navClassNames?: NavItemClassNames;\n  mobileSheetClassName?: string;\n  showHeader?: boolean; // Control header visibility\n  showFooter?: boolean; // Control footer visibility\n  /**\n   * Control gap behavior when sidebar is collapsed\n   * - true: Use smaller gap (gap-2) when collapsed\n   * - false: Keep consistent gap (gap-6)\n   */\n  compactWhenCollapsed?: boolean;\n} & React.ComponentProps<typeof Sidebar>;\n\nexport function AppSidebar({\n  navSections,\n  sidebarHeader,\n  sidebarHeaderAsMenuItem = true,\n  sidebarHeaderLink = '/',\n  sidebarFooter,\n  sidebarContent,\n  hasSideRail = false,\n  LinkComponent,\n  classNames,\n  navClassNames,\n  className,\n  mobileSheetClassName,\n  showHeader = true,\n  showFooter = true,\n  compactWhenCollapsed = true,\n  ...props\n}: AppSidebar) {\n  const { isMobile, openMobile, state, isHovered, open } = useSidebar();\n  // On mobile: use openMobile state\n  // On desktop: show expanded when open OR when collapsed but hovered\n  const isExpanded = isMobile ? openMobile : open || (state === 'collapsed' && isHovered);\n\n  const Link =\n    LinkComponent ||\n    (({ href, children, ...linkProps }) => (\n      <a href={href} {...linkProps}>\n        {children}\n      </a>\n    ));\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className={cn('z-40', className)}\n      mobileSheetClassName={classNames?.mobileRoot}\n      {...props}\n    >\n      {showHeader && (\n        <SidebarHeader className={cn('relative', classNames?.header)}>\n          {sidebarHeaderAsMenuItem ? (\n            <SidebarMenu>\n              <Link href={sidebarHeaderLink} className=\"cursor-pointer\">\n                <SidebarMenuItem>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                  >\n                    {sidebarHeader}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </Link>\n            </SidebarMenu>\n          ) : (\n            <>{sidebarHeader}</>\n          )}\n          <SidebarTrigger\n            className={cn(\n              'absolute right-[-16px] top-4 z-30 hidden h-8 w-8 rounded-full lg:flex',\n              classNames?.trigger,\n            )}\n          />\n        </SidebarHeader>\n      )}\n      {/* ...existing code... */}\n      <SidebarContent\n        className={cn(\n          'gap-6',\n          classNames?.content,\n          !showHeader && 'pt-6', // Add padding-top when header is hidden\n        )}\n      >\n        {/* Additional content before navigation (e.g., userInfo on mobile) */}\n        {sidebarContent}\n\n        {/* Navigation Sections */}\n        {navSections.map((section, index) => (\n          <React.Fragment key={section.label || index}>\n            <NavMain\n              label={section.label}\n              items={section.items}\n              LinkComponent={LinkComponent}\n              labelClassName={navClassNames?.label}\n              itemClassName={navClassNames?.item}\n              itemActiveClassName={navClassNames?.itemActive}\n              itemHoverClassName={navClassNames?.itemHover}\n              subItemClassName={navClassNames?.subItem}\n              subItemActiveClassName={navClassNames?.subItemActive}\n              subItemHoverClassName={navClassNames?.subItemHover}\n            />\n          </React.Fragment>\n        ))}\n      </SidebarContent>\n      {showFooter && sidebarFooter && (\n        <SidebarFooter className={classNames?.footer}>{sidebarFooter}</SidebarFooter>\n      )}\n      {hasSideRail && <SidebarRail />}\n    </Sidebar>\n  );\n}\n"]}

package/dist/common/display/sidebar/index.d.ts

@@ -0,0 +1,30 @@
+import { NavSectionType } from '@/lib/types';
+import * as React from 'react';
+import { NavItemClassNames, SidebarClassNames } from './types';
+interface ISidebarWrapperProps {
+    navSections: NavSectionType[];
+    sidebarHeader: React.ReactNode;
+    sidebarHeaderAsMenuItem?: boolean;
+    sidebarHeaderLink?: string;
+    header?: React.ReactNode | (() => React.ReactNode);
+    children: React.ReactNode;
+    LinkComponent?: React.ComponentType<any>;
+    sidebarFooter?: React.ReactNode;
+    sidebarContent?: React.ReactNode;
+    userInfo?: React.ReactNode;
+    userInfoPlacement?: 'content' | 'footer' | 'both' | 'none';
+    hasSideRail?: boolean;
+    headerClass?: string;
+    mainClass?: string;
+    sidebarClassNames?: SidebarClassNames;
+    navClassNames?: NavItemClassNames;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    compactWhenCollapsed?: boolean;
+}
+declare const SidebarLayout: React.FunctionComponent<ISidebarWrapperProps>;
+export default SidebarLayout;
+export { SidebarSheet } from './sidebar-sheet';
+export type { SidebarSheetProps } from './sidebar-sheet';
+export type { NavItemClassNames, SidebarClassNames };
+//# sourceMappingURL=index.d.ts.map

package/dist/common/display/sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/display/sidebar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE/D,UAAU,oBAAoB;IAC5B,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AA0BD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CA0DhE,CAAC;AAEF,eAAe,aAAa,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/common/display/sidebar/index.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var sidebar = require('@/components/sidebar');
+var utils = require('@/lib/utils');
+var appSidebar = require('./app-sidebar');
+var sidebarSheet = require('./sidebar-sheet');
+
+const SidebarContent = ({ header, children, headerClass, mainClass }) => {
+  const headerContent = typeof header === "function" ? header() : header;
+  return /* @__PURE__ */ jsxRuntime.jsxs(sidebar.SidebarInset, { className: "flex min-h-svh min-w-0 flex-1 flex-col", "data-sidebar": "inset", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "header",
+      {
+        className: utils.cn(
+          "bg-background fixed left-0 right-0 top-0 z-30 flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4",
+          headerClass
+        ),
+        children: headerContent
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: utils.cn("flex-1 pt-16", mainClass), children })
+  ] });
+};
+const SidebarLayout = ({
+  navSections,
+  sidebarHeader,
+  sidebarHeaderAsMenuItem = false,
+  sidebarHeaderLink = "/",
+  sidebarFooter,
+  sidebarContent,
+  userInfo,
+  userInfoPlacement = "content",
+  hasSideRail,
+  header,
+  children,
+  LinkComponent,
+  headerClass,
+  mainClass,
+  sidebarClassNames,
+  navClassNames,
+  showHeader = true,
+  showFooter = true,
+  compactWhenCollapsed = true
+}) => {
+  const showUserInfoInContent = userInfoPlacement === "content" || userInfoPlacement === "both";
+  const showUserInfoInFooter = userInfoPlacement === "footer" || userInfoPlacement === "both";
+  const composedSidebarContent = showUserInfoInContent && userInfo ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: userInfo }) : sidebarContent;
+  const composedSidebarFooter = showUserInfoInFooter && userInfo ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: userInfo }) : sidebarFooter;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      appSidebar.AppSidebar,
+      {
+        navSections,
+        sidebarHeader,
+        sidebarHeaderAsMenuItem,
+        sidebarHeaderLink,
+        sidebarFooter: composedSidebarFooter,
+        sidebarContent: composedSidebarContent,
+        LinkComponent,
+        showHeader,
+        showFooter,
+        compactWhenCollapsed,
+        className: sidebarClassNames?.root,
+        classNames: {
+          header: sidebarClassNames?.header,
+          content: sidebarClassNames?.content,
+          footer: sidebarClassNames?.footer,
+          trigger: sidebarClassNames?.trigger,
+          mobileRoot: sidebarClassNames?.mobileRoot
+        },
+        hasSideRail,
+        navClassNames
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(SidebarContent, { header, headerClass, mainClass, children })
+  ] });
+};
+var sidebar_default = SidebarLayout;
+
+Object.defineProperty(exports, "SidebarSheet", {
+  enumerable: true,
+  get: function () { return sidebarSheet.SidebarSheet; }
+});
+exports.default = sidebar_default;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/common/display/sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/display/sidebar/index.tsx"],"names":["jsxs","SidebarInset","jsx","cn","Fragment","AppSidebar"],"mappings":";;;;;;;;;;AA+BA,MAAM,iBAKD,CAAC,EAAE,QAAQ,QAAA,EAAU,WAAA,EAAa,WAAU,KAAM;AAErD,EAAA,MAAM,aAAA,GAAgB,OAAO,MAAA,KAAW,UAAA,GAAa,QAAO,GAAI,MAAA;AAEhE,EAAA,uBACEA,eAAA,CAACC,oBAAA,EAAA,EAAa,SAAA,EAAU,wCAAA,EAAyC,gBAAa,OAAA,EAC5E,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,QAAA;AAAA,UACT,mHAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,mCACC,MAAA,EAAA,EAAK,SAAA,EAAWA,SAAG,cAAA,EAAgB,SAAS,GAAI,QAAA,EAAS;AAAA,GAAA,EAC5D,CAAA;AAEJ,CAAA;AAEA,MAAM,gBAA+D,CAAC;AAAA,EACpE,WAAA;AAAA,EACA,aAAA;AAAA,EACA,uBAAA,GAA0B,KAAA;AAAA,EAC1B,iBAAA,GAAoB,GAAA;AAAA,EACpB,aAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA,GAAoB,SAAA;AAAA,EACpB,WAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,UAAA,GAAa,IAAA;AAAA,EACb,oBAAA,GAAuB;AACzB,CAAA,KAAM;AAEJ,EAAA,MAAM,qBAAA,GAAwB,iBAAA,KAAsB,SAAA,IAAa,iBAAA,KAAsB,MAAA;AACvF,EAAA,MAAM,oBAAA,GAAuB,iBAAA,KAAsB,QAAA,IAAY,iBAAA,KAAsB,MAAA;AAErF,EAAA,MAAM,sBAAA,GACJ,qBAAA,IAAyB,QAAA,mBAAWD,cAAA,CAAAE,mBAAA,EAAA,EAAG,oBAAS,CAAA,GAAM,cAAA;AACxD,EAAA,MAAM,qBAAA,GAAwB,oBAAA,IAAwB,QAAA,mBAAWF,cAAA,CAAAE,mBAAA,EAAA,EAAG,oBAAS,CAAA,GAAM,aAAA;AAEnF,EAAA,uBACEJ,eAAA,CAAAI,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAF,cAAA;AAAA,MAACG,qBAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,aAAA;AAAA,QACA,uBAAA;AAAA,QACA,iBAAA;AAAA,QACA,aAAA,EAAe,qBAAA;AAAA,QACf,cAAA,EAAgB,sBAAA;AAAA,QAChB,aAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,oBAAA;AAAA,QACA,WAAW,iBAAA,EAAmB,IAAA;AAAA,QAC9B,UAAA,EAAY;AAAA,UACV,QAAQ,iBAAA,EAAmB,MAAA;AAAA,UAC3B,SAAS,iBAAA,EAAmB,OAAA;AAAA,UAC5B,QAAQ,iBAAA,EAAmB,MAAA;AAAA,UAC3B,SAAS,iBAAA,EAAmB,OAAA;AAAA,UAC5B,YAAY,iBAAA,EAAmB;AAAA,SACjC;AAAA,QACA,WAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,oBACAH,cAAA,CAAC,cAAA,EAAA,EAAe,MAAA,EAAgB,WAAA,EAA0B,WACvD,QAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,eAAA,GAAQ","file":"index.js","sourcesContent":["'use client';\nimport { SidebarInset } from '@/components/sidebar';\nimport { NavSectionType } from '@/lib/types';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { AppSidebar } from './app-sidebar';\nimport { NavItemClassNames, SidebarClassNames } from './types';\n\ninterface ISidebarWrapperProps {\n  navSections: NavSectionType[]; // Changed from navItems to navSections\n  sidebarHeader: React.ReactNode;\n  sidebarHeaderAsMenuItem?: boolean; // If true, wraps sidebarHeader in SidebarMenu structure\n  sidebarHeaderLink?: string; // Optional link for header when used as menu item\n  header?: React.ReactNode | (() => React.ReactNode); // Can be ReactNode or function that returns ReactNode\n  children: React.ReactNode;\n  LinkComponent?: React.ComponentType<any>;\n  sidebarFooter?: React.ReactNode; // Footer content (can be overridden by userInfo)\n  sidebarContent?: React.ReactNode; // Content before navigation (can be overridden by userInfo)\n  userInfo?: React.ReactNode; // User info section (will be placed based on userInfoPlacement)\n  userInfoPlacement?: 'content' | 'footer' | 'both' | 'none'; // Control where userInfo is displayed\n  hasSideRail?: boolean; // Controls SidebarRail visibility for drag-to-resize functionality\n  headerClass?: string;\n  mainClass?: string;\n  // Grouped style customization props\n  sidebarClassNames?: SidebarClassNames;\n  navClassNames?: NavItemClassNames;\n  showHeader?: boolean;\n  showFooter?: boolean;\n  compactWhenCollapsed?: boolean;\n}\n\nconst SidebarContent: React.FunctionComponent<{\n  header: React.ReactNode | (() => React.ReactNode);\n  children: React.ReactNode;\n  headerClass?: string;\n  mainClass?: string;\n}> = ({ header, children, headerClass, mainClass }) => {\n  // Render header - if it's a function, call it inside the component so it has access to context\n  const headerContent = typeof header === 'function' ? header() : header;\n\n  return (\n    <SidebarInset className=\"flex min-h-svh min-w-0 flex-1 flex-col\" data-sidebar=\"inset\">\n      <header\n        className={cn(\n          'bg-background fixed left-0 right-0 top-0 z-30 flex h-16 shrink-0 items-center justify-between gap-2 border-b px-4',\n          headerClass,\n        )}\n      >\n        {headerContent}\n      </header>\n      <main className={cn('flex-1 pt-16', mainClass)}>{children}</main>\n    </SidebarInset>\n  );\n};\n\nconst SidebarLayout: React.FunctionComponent<ISidebarWrapperProps> = ({\n  navSections,\n  sidebarHeader,\n  sidebarHeaderAsMenuItem = false,\n  sidebarHeaderLink = '/',\n  sidebarFooter,\n  sidebarContent,\n  userInfo,\n  userInfoPlacement = 'content',\n  hasSideRail,\n  header,\n  children,\n  LinkComponent,\n  headerClass,\n  mainClass,\n  sidebarClassNames,\n  navClassNames,\n  showHeader = true,\n  showFooter = true,\n  compactWhenCollapsed = true,\n}) => {\n  // Compose sidebar content and footer based on userInfoPlacement\n  const showUserInfoInContent = userInfoPlacement === 'content' || userInfoPlacement === 'both';\n  const showUserInfoInFooter = userInfoPlacement === 'footer' || userInfoPlacement === 'both';\n\n  const composedSidebarContent =\n    showUserInfoInContent && userInfo ? <>{userInfo}</> : sidebarContent;\n  const composedSidebarFooter = showUserInfoInFooter && userInfo ? <>{userInfo}</> : sidebarFooter;\n\n  return (\n    <>\n      <AppSidebar\n        navSections={navSections}\n        sidebarHeader={sidebarHeader}\n        sidebarHeaderAsMenuItem={sidebarHeaderAsMenuItem}\n        sidebarHeaderLink={sidebarHeaderLink}\n        sidebarFooter={composedSidebarFooter}\n        sidebarContent={composedSidebarContent}\n        LinkComponent={LinkComponent}\n        showHeader={showHeader}\n        showFooter={showFooter}\n        compactWhenCollapsed={compactWhenCollapsed}\n        className={sidebarClassNames?.root}\n        classNames={{\n          header: sidebarClassNames?.header,\n          content: sidebarClassNames?.content,\n          footer: sidebarClassNames?.footer,\n          trigger: sidebarClassNames?.trigger,\n          mobileRoot: sidebarClassNames?.mobileRoot,\n        }}\n        hasSideRail={hasSideRail}\n        navClassNames={navClassNames}\n      />\n      <SidebarContent header={header} headerClass={headerClass} mainClass={mainClass}>\n        {children}\n      </SidebarContent>\n    </>\n  );\n};\n\nexport default SidebarLayout;\nexport { SidebarSheet } from './sidebar-sheet';\nexport type { SidebarSheetProps } from './sidebar-sheet';\nexport type { NavItemClassNames, SidebarClassNames };\n"]}