shad-m 1.0.2 → 1.0.3

package/dist/common/display/page.mjs

@@ -0,0 +1,138 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArrowLeftIcon } from '@/assets/Icon';
+import { Button } from '@/components/button';
+import { Skeleton } from '@/components/skeleton';
+import { cn } from '@/lib/utils';
+import React from 'react';
+import { PageBreadcrumb } from './page-breadcrumb';
+export { PageBreadcrumb } from './page-breadcrumb';
+
+const PageTitle = React.forwardRef(({ className, level = 1, addonBefore, addonAfter, ...props }, ref) => {
+  const Component = `h${level}`;
+  const componentProps = {
+    ref,
+    className: cn("text-t20sb text-ink-500s font-medium", className),
+    ...props
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    addonBefore && /* @__PURE__ */ jsx("span", { children: addonBefore }),
+    React.createElement(Component, componentProps),
+    addonAfter && /* @__PURE__ */ jsx("span", { children: addonAfter })
+  ] });
+});
+PageTitle.displayName = "PageTitle";
+const PageSubtitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-t14m text-ink-400s", className), ...props })
+);
+PageSubtitle.displayName = "PageSubtitle";
+const PageBack = React.forwardRef(
+  ({ className, onBack, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: "ghost",
+        size: "icon",
+        className: cn("h-8 w-8 p-0", className),
+        onClick: onBack,
+        ...props,
+        children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "h-6 w-6" })
+      }
+    );
+  }
+);
+PageBack.displayName = "PageBack";
+const PageAction = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-3", className), ...props })
+);
+PageAction.displayName = "PageAction";
+const getChildByType = (children, targetType) => {
+  return React.Children.toArray(children).find((child) => {
+    if (!React.isValidElement(child)) return false;
+    if (child.type === targetType) return true;
+    const childDisplayName = child.type?.displayName;
+    const targetDisplayName = targetType?.displayName;
+    return childDisplayName && targetDisplayName && childDisplayName === targetDisplayName;
+  });
+};
+const PageHeader = React.forwardRef(
+  ({
+    className,
+    children,
+    title,
+    subtitle,
+    action,
+    back,
+    loading,
+    variant = "default",
+    responsive = true,
+    ...props
+  }, ref) => {
+    const headerTitle = title || getChildByType(children, PageTitle);
+    const headerSubtitle = subtitle || getChildByType(children, PageSubtitle);
+    const headerAction = action || getChildByType(children, PageAction);
+    const headerBack = back || getChildByType(children, PageBack);
+    const variantClasses = {
+      default: "flex flex-col items-start justify-between gap-4 sm:flex-row",
+      compact: "flex flex-col items-start justify-between gap-2 sm:flex-row",
+      centered: "flex flex-col items-center justify-center gap-4 text-center"
+    };
+    const baseClasses = responsive ? variantClasses[variant] : "flex flex-col items-start justify-between gap-4";
+    if (loading) {
+      return /* @__PURE__ */ jsxs("div", { ref, className: cn(baseClasses, className), ...props, children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-20" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(baseClasses, className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        headerBack,
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          headerTitle,
+          headerSubtitle
+        ] })
+      ] }),
+      headerAction
+    ] });
+  }
+);
+PageHeader.displayName = "PageHeader";
+const PageContainer = React.forwardRef(
+  ({ className, size = "full", ...props }, ref) => {
+    const sizeClasses = {
+      full: "h-full w-full mx-auto max-w-[1920px]",
+      md: "w-full md:!w-[640px] lg:!w-[970px] mx-auto",
+      // Matches old Container (fixed width with !important, no mx-auto)
+      lg: "mx-auto h-full w-full max-w-[1328px]"
+    };
+    const baseClasses = size === "md" ? "flex flex-col" : "bg-background-pg flex flex-col gap-4 p-4 md:p-6";
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(baseClasses, sizeClasses[size], className), ...props });
+  }
+);
+PageContainer.displayName = "PageContainer";
+const PageContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("border-ink-50s rounded-lg border bg-white", className),
+      ...props
+    }
+  )
+);
+PageContent.displayName = "PageContent";
+const Page = Object.assign(PageContainer, {
+  Header: PageHeader,
+  Title: PageTitle,
+  Subtitle: PageSubtitle,
+  Action: PageAction,
+  Content: PageContent,
+  Breadcrumb: PageBreadcrumb
+});
+
+export { Page, PageAction, PageBack, PageContainer, PageContent, PageHeader, PageSubtitle, PageTitle, getChildByType };
+//# sourceMappingURL=page.mjs.map
+//# sourceMappingURL=page.mjs.map

package/dist/common/display/page.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/page.tsx"],"names":["PageBreadcrumbComponent"],"mappings":"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","file":"page.mjs","sourcesContent":["import { ArrowLeftIcon } from '@/assets/Icon';\nimport { Button } from '@/components/button';\nimport { Skeleton } from '@/components/skeleton';\nimport { cn } from '@/lib/utils';\nimport React from 'react';\n\n// Import with alias to avoid naming conflict\nimport { PageBreadcrumb as PageBreadcrumbComponent } from './page-breadcrumb';\n\n// Re-export for public API\nexport { PageBreadcrumb } from './page-breadcrumb';\nexport type { PageBreadcrumbItem } from './page-breadcrumb';\n\n// Define sub-components BEFORE PageHeader so they can be referenced\nconst PageTitle = React.forwardRef<\n  HTMLHeadingElement,\n  Omit<React.HTMLAttributes<HTMLHeadingElement>, 'title'> & {\n    level?: 1 | 2 | 3 | 4 | 5 | 6;\n    addonBefore?: React.ReactNode;\n    addonAfter?: React.ReactNode;\n  }\n>(({ className, level = 1, addonBefore, addonAfter, ...props }, ref) => {\n  const Component = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  const componentProps = {\n    ref,\n    className: cn('text-t20sb text-ink-500s font-medium', className),\n    ...props,\n  } as React.HTMLAttributes<HTMLHeadingElement> & { ref: React.ForwardedRef<HTMLHeadingElement> };\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {addonBefore && <span>{addonBefore}</span>}\n      {React.createElement(Component, componentProps)}\n      {addonAfter && <span>{addonAfter}</span>}\n    </div>\n  );\n});\nPageTitle.displayName = 'PageTitle';\n\nconst PageSubtitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('text-t14m text-ink-400s', className)} {...props} />\n  ),\n);\nPageSubtitle.displayName = 'PageSubtitle';\n\ninterface PageBackProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  onBack: () => void;\n}\nconst PageBack = React.forwardRef<HTMLButtonElement, PageBackProps>(\n  ({ className, onBack, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        variant=\"ghost\"\n        size=\"icon\"\n        className={cn('h-8 w-8 p-0', className)}\n        onClick={onBack}\n        {...props}\n      >\n        <ArrowLeftIcon className=\"h-6 w-6\" />\n      </Button>\n    );\n  },\n);\nPageBack.displayName = 'PageBack';\n\nconst PageAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex items-center gap-3', className)} {...props} />\n  ),\n);\nPageAction.displayName = 'PageAction';\n\n// Helper function for better type safety\nexport const getChildByType = (children: React.ReactNode, targetType: React.ComponentType<any>) => {\n  return React.Children.toArray(children).find((child): child is React.ReactElement => {\n    if (!React.isValidElement(child)) return false;\n\n    // Check direct type match\n    if (child.type === targetType) return true;\n\n    // Check displayName for forwardRef components\n    const childDisplayName = (child.type as any)?.displayName;\n    const targetDisplayName = (targetType as any)?.displayName;\n\n    return childDisplayName && targetDisplayName && childDisplayName === targetDisplayName;\n  });\n};\n\ninterface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  className?: string;\n  children?: React.ReactNode;\n  /** Alternative to children composition - more explicit */\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  action?: React.ReactNode;\n  back?: React.ReactNode;\n  /** Control responsive behavior */\n  responsive?: boolean;\n  /** Show loading state */\n  loading?: boolean;\n  /** Control responsive behavior */\n  variant?: 'default' | 'compact' | 'centered';\n  /** Link component for breadcrumbs */\n  LinkComponent?: React.ComponentType<any>;\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    {\n      className,\n      children,\n      title,\n      subtitle,\n      action,\n      back,\n      loading,\n      variant = 'default',\n      responsive = true,\n      ...props\n    },\n    ref,\n  ) => {\n    // Support both prop-based and children-based composition\n    const headerTitle = title || getChildByType(children, PageTitle);\n    const headerSubtitle = subtitle || getChildByType(children, PageSubtitle);\n    const headerAction = action || getChildByType(children, PageAction);\n    const headerBack = back || getChildByType(children, PageBack);\n\n    const variantClasses = {\n      default: 'flex flex-col items-start justify-between gap-4 sm:flex-row',\n      compact: 'flex flex-col items-start justify-between gap-2 sm:flex-row',\n      centered: 'flex flex-col items-center justify-center gap-4 text-center',\n    };\n\n    const baseClasses = responsive\n      ? variantClasses[variant]\n      : 'flex flex-col items-start justify-between gap-4';\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn(baseClasses, className)} {...props}>\n          <div className=\"space-y-1\">\n            <Skeleton className=\"h-8 w-48\" />\n            <Skeleton className=\"h-4 w-32\" />\n          </div>\n          <Skeleton className=\"h-10 w-20\" />\n        </div>\n      );\n    }\n\n    return (\n      <div ref={ref} className={cn(baseClasses, className)} {...props}>\n        <div className=\"flex items-start gap-2\">\n          {headerBack}\n          <div className=\"flex-1 space-y-1\">\n            {headerTitle}\n            {headerSubtitle}\n          </div>\n        </div>\n        {headerAction}\n      </div>\n    );\n  },\n);\nPageHeader.displayName = 'PageHeader';\n\ninterface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Control page width */\n  size?: 'full' | 'md' | 'lg';\n}\n\nconst PageContainer = React.forwardRef<HTMLDivElement, PageContainerProps>(\n  ({ className, size = 'full', ...props }, ref) => {\n    const sizeClasses = {\n      full: 'h-full w-full mx-auto max-w-[1920px]',\n      md: 'w-full md:!w-[640px] lg:!w-[970px] mx-auto', // Matches old Container (fixed width with !important, no mx-auto)\n      lg: 'mx-auto h-full w-full max-w-[1328px]',\n    };\n\n    // Size 'md' has minimal styling (like old Container component)\n    // Other sizes have default page styling\n    const baseClasses =\n      size === 'md' ? 'flex flex-col' : 'bg-background-pg flex flex-col gap-4 p-4 md:p-6';\n\n    return <div ref={ref} className={cn(baseClasses, sizeClasses[size], className)} {...props} />;\n  },\n);\nPageContainer.displayName = 'PageContainer';\n\nconst PageContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('border-ink-50s rounded-lg border bg-white', className)}\n      {...props}\n    />\n  ),\n);\nPageContent.displayName = 'PageContent';\n\n// Compound component pattern for better DX\nconst Page = Object.assign(PageContainer, {\n  Header: PageHeader,\n  Title: PageTitle,\n  Subtitle: PageSubtitle,\n  Action: PageAction,\n  Content: PageContent,\n  Breadcrumb: PageBreadcrumbComponent,\n});\n\nexport {\n  Page,\n  PageAction,\n  PageBack,\n  PageContainer,\n  PageContent,\n  PageHeader,\n  PageSubtitle,\n  PageTitle,\n};\n"]}

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

@@ -0,0 +1,161 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('@/lib/utils');
+
+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 ScoreMeter({
+  score,
+  milestones,
+  showTooltip = true,
+  className = "",
+  progresBarClassName = "",
+  renderTooltip,
+  renderTick,
+  progressFillColor
+}) {
+  const progresBarRef = React__namespace.useRef(null);
+  const tooltipRef = React__namespace.useRef(null);
+  const sortedMilestones = [...milestones].sort((a, b) => a.maxScore - b.maxScore);
+  const maximumScore = sortedMilestones[sortedMilestones.length - 1]?.maxScore || 100;
+  const validScore = React.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__namespace.useState(0);
+  React__namespace.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__namespace.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__namespace.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 = React.useMemo(() => {
+    return renderTooltip?.(score) ?? currentMilestone?.description;
+  }, [renderTooltip, currentMilestone]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${className}`, ref: progresBarRef, children: [
+    showTooltip && currentMilestone && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: utils.cn("top-full h-0 w-0 rounded-[1px] border-t-[6px] border-transparent"),
+          style: tooltipArrowStyles
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("bg-ink-100s relative h-3 w-full rounded-full", progresBarClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "h-full w-full overflow-hidden rounded-full",
+          style: {
+            transform: `translateX(${validScore / maximumScore * 100 - 100}%)`
+          },
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute top-1/2 -translate-y-1/2",
+              style: {
+                left: `${milestone.maxScore / maximumScore * 100}%`
+              },
+              children: renderTick(milestone, score)
+            },
+            index
+          );
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-t14m text-ink-400s mt-3", children: tooltipValue })
+  ] });
+}
+
+module.exports = ScoreMeter;
+//# sourceMappingURL=score-meter.js.map
+//# sourceMappingURL=score-meter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/display/score-meter.tsx"],"names":["React","useMemo","progresWidth","jsxs","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0Be,SAAR,UAAA,CAA4B;AAAA,EACjC,KAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,EAAA;AAAA,EACZ,mBAAA,GAAsB,EAAA;AAAA,EACtB,aAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,aAAA,GAAgBA,gBAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AACvD,EAAA,MAAM,UAAA,GAAaA,gBAAA,CAAM,MAAA,CAAuB,IAAI,CAAA;AAGpD,EAAA,MAAM,gBAAA,GAAmB,CAAC,GAAG,UAAU,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM,CAAA,CAAE,QAAA,GAAW,CAAA,CAAE,QAAQ,CAAA;AAG/E,EAAA,MAAM,eAAe,gBAAA,CAAiB,gBAAA,CAAiB,MAAA,GAAS,CAAC,GAAG,QAAA,IAAY,GAAA;AAEhF,EAAA,MAAM,UAAA,GAAaC,aAAA;AAAA,IACjB,MAAO,KAAA,GAAQ,CAAA,GAAI,CAAA,GAAI,KAAA,GAAQ,eAAe,YAAA,GAAe,KAAA;AAAA,IAC7D,CAAC,OAAO,YAAY;AAAA,GACtB;AAGA,EAAA,MAAM,mBACJ,gBAAA,CAAiB,IAAA,CAAK,CAAC,SAAA,KAAc,SAAS,SAAA,CAAU,QAAQ,CAAA,KAC/D,KAAA,GAAQ,eAAe,gBAAA,CAAiB,gBAAA,CAAiB,SAAS,CAAC,CAAA,GAAI,iBAAiB,CAAC,CAAA,CAAA;AAE5F,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAID,gBAAA,CAAM,SAAS,CAAC,CAAA;AAExD,EAAAA,gBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,eAAe,OAAA,EAAS;AAC1B,MAAA,MAAME,aAAAA,GAAe,cAAc,OAAA,CAAQ,WAAA;AAE3C,MAAA,eAAA,CAAgBA,aAAY,CAAA;AAAA,IAC9B;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,UAAA,EAAY,aAAa,CAAC,CAAA;AAGrC,EAAA,MAAM,WAAA,GAAc,CAAC,QAAA,EAAqD,UAAA,KAAuB;AAC/F,IAAA,OAAO,OAAO,QAAA,KAAa,UAAA,GACvB,QAAA,CAAS,UAAU,CAAA,GACnB,QAAA,CAAS,OAAA,CAAQ,UAAA,EAAY,UAAA,CAAW,QAAA,EAAU,CAAA;AAAA,EACxD,CAAA;AAEA,EAAA,MAAM,kBAAA,GAAqBF,gBAAA,CAAM,OAAA,CAAQ,MAAM;AAC7C,IAAA,MAAM,eAAA,GAAmB,aAAa,YAAA,GAAgB,YAAA;AACtD,IAAA,MAAM,aAAa,eAAA,GAAkB,EAAA;AACrC,IAAA,MAAM,WAAA,GAAc,kBAAkB,YAAA,GAAe,EAAA;AAErD,IAAA,MAAM,kBAAkB,WAAA,GAAc,CAAA,GAAI,IAAA,CAAK,GAAA,CAAI,GAAG,UAAU,CAAA;AAChE,IAAA,MAAM,mBAAmB,UAAA,GAAa,CAAA,GAAI,KAAK,GAAA,CAAI,CAAA,EAAG,eAAe,UAAU,CAAA;AAC/E,IAAA,MAAM,UAAA,GAAa,UAAA,GAAa,IAAA,GAAO,WAAA,GAAc,OAAA,GAAU,MAAA;AAE/D,IAAA,OAAO;AAAA,MACL,cAAA,EAAgB,gBAAA,EAAkB,YAAA,IAAgB,gBAAA,EAAkB,OAAA,IAAW,EAAA;AAAA,MAC/E,UAAA,EAAY,GAAG,eAAe,CAAA,EAAA,CAAA;AAAA,MAC9B,SAAA,EAAW,cAAc,UAAU,CAAA,CAAA,CAAA;AAAA,MACnC,eAAA,EAAiB,GAAG,eAAe,CAAA,EAAA,CAAA;AAAA,MACnC,gBAAA,EAAkB,GAAG,gBAAgB,CAAA,EAAA;AAAA,KACvC;AAAA,EACF,GAAG,CAAC,YAAA,EAAc,UAAA,EAAY,YAAA,EAAc,gBAAgB,CAAC,CAAA;AAE7D,EAAA,MAAM,aAAA,GAAgBA,gBAAA,CAAM,OAAA,CAAQ,MAAM;AACxC,IAAA,MAAM,YAAA,GAAe,UAAA,CAAW,OAAA,EAAS,WAAA,IAAe,CAAA;AACxD,IAAA,MAAM,eAAA,GAAmB,aAAa,YAAA,GAAgB,YAAA;AAGtD,IAAA,IAAI,WAAA,GAAc,kBAAkB,YAAA,GAAe,CAAA;AACnD,IAAA,IAAI,WAAA,GAAc,GAAG,WAAA,GAAc,CAAA;AACnC,IAAA,IAAI,WAAA,GAAc,YAAA,GAAe,YAAA,EAAc,WAAA,GAAc,YAAA,GAAe,YAAA;AAG5E,IAAA,MAAM,yBAAyB,WAAA,KAAgB,CAAA,GAAI,IAAI,IAAA,CAAK,GAAA,CAAI,GAAG,UAAU,CAAA;AAC7E,IAAA,MAAM,uBAAA,GACJ,cAAc,YAAA,KAAiB,YAAA,GAAe,IAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,YAAA,GAAe,UAAU,CAAA;AAEzF,IAAA,OAAO;AAAA,MACL,UAAA,EAAY,gBAAA,EAAkB,YAAA,IAAgB,gBAAA,EAAkB,OAAA,IAAW,EAAA;AAAA,MAC3E,UAAA,EAAY,GAAG,WAAW,CAAA,EAAA,CAAA;AAAA,MAC1B,sBAAA,EAAwB,GAAG,sBAAsB,CAAA,EAAA,CAAA;AAAA,MACjD,uBAAA,EAAyB,GAAG,uBAAuB,CAAA,EAAA;AAAA,KACrD;AAAA,EACF,GAAG,CAAC,UAAA,EAAY,YAAA,EAAc,YAAA,EAAc,gBAAgB,CAAC,CAAA;AAE7D,EAAA,MAAM,YAAA,GAAeC,cAAQ,MAAM;AACjC,IAAA,OAAO,aAAA,GAAgB,KAAK,CAAA,IAAK,gBAAA,EAAkB,WAAA;AAAA,EACrD,CAAA,EAAG,CAAC,aAAA,EAAe,gBAAgB,CAAC,CAAA;AAEpC,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAW,UAAU,SAAS,CAAA,CAAA,EAAI,KAAK,aAAA,EAEzC,QAAA,EAAA;AAAA,IAAA,WAAA,IAAe,gBAAA,oBACdE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,yFAAA;AAAA,UACV,KAAA,EAAO,aAAA;AAAA,UACP,GAAA,EAAK,UAAA;AAAA,UAEJ,QAAA,EAAA,WAAA,CAAY,gBAAA,EAAkB,KAAA,IAAS,EAAA,EAAI,KAAK;AAAA;AAAA,OACnD;AAAA,sBAGAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAWC,SAAG,kEAAkE,CAAA;AAAA,UAChF,KAAA,EAAO;AAAA;AAAA;AACT,KAAA,EACF,CAAA;AAAA,oCAID,KAAA,EAAA,EAAI,SAAA,EAAWA,QAAA,CAAG,8CAAA,EAAgD,mBAAmB,CAAA,EAEpF,QAAA,EAAA;AAAA,sBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,4CAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,4CAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,SAAA,EAAW,CAAA,WAAA,EAAe,UAAA,GAAa,YAAA,GAAgB,MAAM,GAAG,CAAA,EAAA;AAAA,WAClE;AAAA,UAEA,QAAA,kBAAAA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,4BAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,UAAA,EAAY,iBAAA,IAAqB,gBAAA,EAAkB,OAAA,IAAW,SAAA;AAAA,gBAC9D,SAAA,EAAW,CAAA,WAAA,EAAc,GAAA,GAAO,UAAA,GAAa,eAAgB,GAAG,CAAA,EAAA;AAAA;AAClE;AAAA;AACF;AAAA,OACF,EACF,CAAA;AAAA,MAGC,gBAAA,CAAiB,GAAA,CAAI,CAAC,SAAA,EAAW,KAAA,KAAU;AAC1C,QAAA,IAAI,KAAA,KAAU,gBAAA,CAAiB,MAAA,GAAS,CAAA,EAAG,OAAO,IAAA;AAElD,QAAA,IAAI,UAAA;AACF,UAAA,uBACEA,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cAEC,SAAA,EAAU,mCAAA;AAAA,cACV,KAAA,EAAO;AAAA,gBACL,IAAA,EAAM,CAAA,EAAI,SAAA,CAAU,QAAA,GAAW,eAAgB,GAAG,CAAA,CAAA;AAAA,eACpD;AAAA,cAEC,QAAA,EAAA,UAAA,CAAW,WAAW,KAAK;AAAA,aAAA;AAAA,YANvB;AAAA,WAOP;AAGJ,QAAA,uBACEA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,gFAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,IAAA,EAAM,CAAA,EAAI,SAAA,CAAU,QAAA,GAAW,eAAgB,GAAG,CAAA,CAAA,CAAA;AAAA,cAClD,UAAA,EAAY,UAAU,SAAA,IAAa;AAAA;AACrC,WAAA;AAAA,UALK;AAAA,SAMP;AAAA,MAEJ,CAAC;AAAA,KAAA,EACH,CAAA;AAAA,IAGC,YAAA,oBAAgBA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gCAAgC,QAAA,EAAA,YAAA,EAAa;AAAA,GAAA,EAC/E,CAAA;AAEJ","file":"score-meter.js","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/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.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