shad-m 1.0.0 → 1.0.2

package/dist/common/display/page.mjs

@@ -1,138 +0,0 @@
-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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/common/display/page.tsx"],"names":["PageBreadcrumbComponent"],"mappings":";;;;;;;;;AAcA,MAAM,SAAA,GAAY,KAAA,CAAM,UAAA,CAOtB,CAAC,EAAE,SAAA,EAAW,KAAA,GAAQ,CAAA,EAAG,WAAA,EAAa,UAAA,EAAY,GAAG,KAAA,IAAS,GAAA,KAAQ;AACtE,EAAA,MAAM,SAAA,GAAY,IAAI,KAAK,CAAA,CAAA;AAC3B,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,sCAAA,EAAwC,SAAS,CAAA;AAAA,IAC/D,GAAG;AAAA,GACL;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,IAAA,WAAA,oBAAe,GAAA,CAAC,UAAM,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,IAClC,KAAA,CAAM,aAAA,CAAc,SAAA,EAAW,cAAc,CAAA;AAAA,IAC7C,UAAA,oBAAc,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,UAAA,EAAW;AAAA,GAAA,EACnC,CAAA;AAEJ,CAAC;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAExB,MAAM,eAAe,KAAA,CAAM,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAEnF;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAK3B,MAAM,WAAW,KAAA,CAAM,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,QAAQ,GAAG,KAAA,IAAS,GAAA,KAAQ;AACxC,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,MAAA;AAAA,QACL,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,QACtC,OAAA,EAAS,MAAA;AAAA,QACR,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA,KACrC;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA;AAEvB,MAAM,aAAa,KAAA,CAAM,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,yBAAA,EAA2B,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAEnF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,cAAA,GAAiB,CAAC,QAAA,EAA2B,UAAA,KAAyC;AACjG,EAAA,OAAO,MAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,KAAA,KAAuC;AACnF,IAAA,IAAI,CAAC,KAAA,CAAM,cAAA,CAAe,KAAK,GAAG,OAAO,KAAA;AAGzC,IAAA,IAAI,KAAA,CAAM,IAAA,KAAS,UAAA,EAAY,OAAO,IAAA;AAGtC,IAAA,MAAM,gBAAA,GAAoB,MAAM,IAAA,EAAc,WAAA;AAC9C,IAAA,MAAM,oBAAqB,UAAA,EAAoB,WAAA;AAE/C,IAAA,OAAO,gBAAA,IAAoB,qBAAqB,gBAAA,KAAqB,iBAAA;AAAA,EACvE,CAAC,CAAA;AACH;AAoBA,MAAM,aAAa,KAAA,CAAM,UAAA;AAAA,EACvB,CACE;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,UAAA,GAAa,IAAA;AAAA,IACb,GAAG;AAAA,KAEL,GAAA,KACG;AAEH,IAAA,MAAM,WAAA,GAAc,KAAA,IAAS,cAAA,CAAe,QAAA,EAAU,SAAS,CAAA;AAC/D,IAAA,MAAM,cAAA,GAAiB,QAAA,IAAY,cAAA,CAAe,QAAA,EAAU,YAAY,CAAA;AACxE,IAAA,MAAM,YAAA,GAAe,MAAA,IAAU,cAAA,CAAe,QAAA,EAAU,UAAU,CAAA;AAClE,IAAA,MAAM,UAAA,GAAa,IAAA,IAAQ,cAAA,CAAe,QAAA,EAAU,QAAQ,CAAA;AAE5D,IAAA,MAAM,cAAA,GAAiB;AAAA,MACrB,OAAA,EAAS,6DAAA;AAAA,MACT,OAAA,EAAS,6DAAA;AAAA,MACT,QAAA,EAAU;AAAA,KACZ;AAEA,IAAA,MAAM,WAAA,GAAc,UAAA,GAChB,cAAA,CAAe,OAAO,CAAA,GACtB,iDAAA;AAEJ,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,uBACE,IAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,GAAG,WAAA,EAAa,SAAS,CAAA,EAAI,GAAG,KAAA,EACxD,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,WAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,WAAU,UAAA,EAAW,CAAA;AAAA,0BAC/B,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,UAAA,EAAW;AAAA,SAAA,EACjC,CAAA;AAAA,wBACA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,WAAA,EAAY;AAAA,OAAA,EAClC,CAAA;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,GAAG,WAAA,EAAa,SAAS,CAAA,EAAI,GAAG,KAAA,EACxD,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACZ,QAAA,EAAA;AAAA,QAAA,UAAA;AAAA,wBACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBAAA,EACZ,QAAA,EAAA;AAAA,UAAA,WAAA;AAAA,UACA;AAAA,SAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,MACC;AAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AACF;AACA,UAAA,CAAW,WAAA,GAAc,YAAA;AAOzB,MAAM,gBAAgB,KAAA,CAAM,UAAA;AAAA,EAC1B,CAAC,EAAE,SAAA,EAAW,IAAA,GAAO,QAAQ,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC/C,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,IAAA,EAAM,sCAAA;AAAA,MACN,EAAA,EAAI,4CAAA;AAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAIA,IAAA,MAAM,WAAA,GACJ,IAAA,KAAS,IAAA,GAAO,eAAA,GAAkB,iDAAA;AAEpC,IAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,EAAA,CAAG,WAAA,EAAa,WAAA,CAAY,IAAI,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAAA,EAC7F;AACF;AACA,aAAA,CAAc,WAAA,GAAc,eAAA;AAE5B,MAAM,cAAc,KAAA,CAAM,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACxB,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,2CAAA,EAA6C,SAAS,CAAA;AAAA,MACnE,GAAG;AAAA;AAAA;AAGV;AACA,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,MAAM,IAAA,GAAO,MAAA,CAAO,MAAA,CAAO,aAAA,EAAe;AAAA,EACxC,MAAA,EAAQ,UAAA;AAAA,EACR,KAAA,EAAO,SAAA;AAAA,EACP,QAAA,EAAU,YAAA;AAAA,EACV,MAAA,EAAQ,UAAA;AAAA,EACR,OAAA,EAAS,WAAA;AAAA,EACT,UAAA,EAAYA;AACd,CAAC","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

@@ -1,161 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/common/display/score-meter.tsx"],"names":["React","useMemo","progresWidth","jsxs","jsx","cn"],"mappings":"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","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

@@ -1,140 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,114 +0,0 @@
-'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