phx-react 1.3.1864 → 1.3.1865

package/dist/esm/components/TableSchedule/components/PHXScheduleTableBody.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PHXScheduleTableProps } from '../types';
-type PHXScheduleTableBodyProps = Pick<PHXScheduleTableProps, 'columns' | 'rows' | 'onCellClick' | 'stickyColumnWidth' | 'defaultCellLayout' | 'userDetailPageUrl' | 'TooltipComponent' | 'ButtonComponent'> & {
+type PHXScheduleTableBodyProps = Pick<PHXScheduleTableProps, 'columns' | 'rows' | 'onCellClick' | 'stickyColumnWidth' | 'defaultCellLayout' | 'scheduleCardSize' | 'scheduleCardVariant' | 'userDetailPageUrl' | 'TooltipComponent' | 'ButtonComponent'> & {
     skipMap: Set<string>;
     stickyHeaderCount: number;
     resolvedStickyColumnWidths: number[];
@@ -12,5 +12,5 @@ type PHXScheduleTableBodyProps = Pick<PHXScheduleTableProps, 'columns' | 'rows'
  * @param {PHXScheduleTableBodyProps} props Body render inputs.
  * @returns {React.ReactNode} The schedule table body.
  */
-export declare const PHXScheduleTableBody: ({ columns, rows, onCellClick, stickyColumnWidth, defaultCellLayout, userDetailPageUrl, TooltipComponent, ButtonComponent, skipMap, stickyHeaderCount, resolvedStickyColumnWidths, showStickyShadow, }: PHXScheduleTableBodyProps) => React.JSX.Element;
+export declare const PHXScheduleTableBody: ({ columns, rows, onCellClick, stickyColumnWidth, defaultCellLayout, scheduleCardSize, scheduleCardVariant, userDetailPageUrl, TooltipComponent, ButtonComponent, skipMap, stickyHeaderCount, resolvedStickyColumnWidths, showStickyShadow, }: PHXScheduleTableBodyProps) => React.JSX.Element;
 export {};

package/dist/esm/components/TableSchedule/components/PHXScheduleTableBody.js

@@ -1,30 +1,35 @@
 'use client';
 import React from 'react';
 import { getCellWrapperAlignClassName } from '../constants';
-import { renderCellBoxContent, renderRowHeaderContent, renderScheduleContent, renderTooltipContent, resolveTooltipClassName, } from '../renderers';
+import { renderCellBoxContent, renderRowHeaderContent, renderScheduleCards, renderScheduleContent, renderTooltipContent, resolveTooltipClassName, } from '../renderers';
 import { buildDataCellStyle, buildRowHeaderCellStyle, getCellSpan, getClickableCellClassName, getColumnAlign, getDataCellClassName, getRowHeaderClassName, getRowHeaders, getStaticCellClassName, } from '../utils';
 /**
- * Resolves the plain cell content for non-boxed cells.
+ * Trả về nội dung hiển thị của ô khi ô đang dùng layout không bọc box.
  *
- * @param {GridCellData} cell The cell data being rendered.
- * @param {string} [userDetailPageUrl] Optional detail-page URL used by schedule links.
- * @returns {React.ReactNode} The plain rendered cell content.
+ * @param {GridCellData} cell Dữ liệu ô đang được render.
+ * @param {CellRenderContext} context Ngữ cảnh dùng chung để render card lịch và liên kết chi tiết.
+ * @returns {React.ReactNode} Nội dung hiển thị cuối cùng của ô theo dữ liệu hiện có.
  */
-const getPlainCellContent = (cell, userDetailPageUrl) => {
+const getPlainCellContent = (cell, context) => {
+    var _a;
+    const { defaultScheduleCardSize, defaultScheduleCardVariant, userDetailPageUrl } = context;
+    if (cell.scheduleCards && cell.scheduleCards.length > 0) {
+        return renderScheduleCards(cell.scheduleCards, (_a = cell.scheduleCardSize) !== null && _a !== void 0 ? _a : defaultScheduleCardSize, defaultScheduleCardVariant, userDetailPageUrl);
+    }
     if (cell.scheduleContent) {
         return renderScheduleContent(cell.scheduleContent, userDetailPageUrl);
     }
     return cell.content;
 };
 /**
- * Resolves the rendered content for a cell based on the active layout mode.
+ * Chọn cách render nội dung ô theo layout hiện tại của ô dữ liệu.
  *
- * @param {GridCellData} cell The cell data being rendered.
- * @param {'boxed' | 'plain'} cellLayout The layout mode used for the cell.
- * @param {string} [userDetailPageUrl] Optional detail-page URL used by schedule links.
- * @returns {React.ReactNode} The rendered cell content for the selected layout.
+ * @param {GridCellData} cell Dữ liệu ô đang được render.
+ * @param {'boxed' | 'plain'} cellLayout Layout áp dụng cho ô hiện tại.
+ * @param {CellRenderContext} context Ngữ cảnh dùng chung để render card lịch và liên kết chi tiết.
+ * @returns {React.ReactNode} Nội dung ô đã được dựng đúng theo layout tương ứng.
  */
-const getBoxContent = (cell, cellLayout, userDetailPageUrl) => cellLayout === 'plain' ? getPlainCellContent(cell, userDetailPageUrl) : renderCellBoxContent(cell);
+const getBoxContent = (cell, cellLayout, context) => cellLayout === 'plain' ? getPlainCellContent(cell, context) : renderCellBoxContent(cell);
 /**
  * Creates the click handler payload for an interactive data cell.
  *
@@ -69,7 +74,7 @@ const renderInteractiveCellContent = (boxContent, cellLayout, cellWrapperAlignCl
  * @param {PHXScheduleTableBodyProps} props Body render inputs.
  * @returns {React.ReactNode} The schedule table body.
  */
-export const PHXScheduleTableBody = ({ columns, rows, onCellClick, stickyColumnWidth = 130, defaultCellLayout = 'boxed', userDetailPageUrl, TooltipComponent, ButtonComponent, skipMap, stickyHeaderCount, resolvedStickyColumnWidths, showStickyShadow, }) => {
+export const PHXScheduleTableBody = ({ columns, rows, onCellClick, stickyColumnWidth = 130, defaultCellLayout = 'boxed', scheduleCardSize, scheduleCardVariant, userDetailPageUrl, TooltipComponent, ButtonComponent, skipMap, stickyHeaderCount, resolvedStickyColumnWidths, showStickyShadow, }) => {
     /**
      * Wraps a cell with the configured tooltip component when tooltip content exists.
      *
@@ -99,6 +104,8 @@ export const PHXScheduleTableBody = ({ columns, rows, onCellClick, stickyColumnW
                 stickyWidths: resolvedStickyColumnWidths,
                 width,
                 isLast,
+                stickyHeaderCount,
+                showStickyShadow,
                 customStyle: header.style,
             }) }, renderRowHeaderContent(header)));
     }
@@ -118,11 +125,15 @@ export const PHXScheduleTableBody = ({ columns, rows, onCellClick, stickyColumnW
         const columnAlign = getColumnAlign(col.align);
         const cellWrapperAlignClassName = getCellWrapperAlignClassName(columnAlign);
         const cellLayout = (_b = cell.layout) !== null && _b !== void 0 ? _b : defaultCellLayout;
-        const boxContent = getBoxContent(cell, cellLayout, userDetailPageUrl);
+        const boxContent = getBoxContent(cell, cellLayout, {
+            defaultScheduleCardSize: scheduleCardSize,
+            defaultScheduleCardVariant: scheduleCardVariant,
+            userDetailPageUrl,
+        });
         const onClick = onCellClick && !cell.disabled ? getCellClickHandler(onCellClick, rowIndex, col.key, cell) : undefined;
         const cellContent = renderInteractiveCellContent(boxContent, cellLayout, cellWrapperAlignClassName, onClick, ButtonComponent);
         const wrappedContent = renderTooltipWrappedContent(cell, cellContent);
-        return (React.createElement("td", { key: col.key, colSpan: cs > 1 ? cs : undefined, rowSpan: rs > 1 ? rs : undefined, className: getDataCellClassName(cell.cellClassName), style: buildDataCellStyle(isLast, cell.cellStyle) }, wrappedContent));
+        return (React.createElement("td", { key: col.key, colSpan: cs > 1 ? cs : undefined, rowSpan: rs > 1 ? rs : undefined, className: getDataCellClassName(cell.cellClassName), style: buildDataCellStyle(isLast, col.minWidth, cell.cellStyle) }, wrappedContent));
     }
     /**
      * Renders a single table body row with its sticky headers and visible data cells.

package/dist/esm/components/TableSchedule/components/PHXScheduleTableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"PHXScheduleTableBody.js","sourceRoot":"","sources":["../../../../../src/components/TableSchedule/components/PHXScheduleTableBody.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,4BAA4B,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,yBAAyB,EACzB,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,aAAa,EACb,sBAAsB,GACvB,MAAM,UAAU,CAAA;AAiCjB;;;;;;GAMG;AACH,MAAM,mBAAmB,GAAG,CAAC,IAAkB,EAAE,iBAA0B,EAAE,EAAE;IAC7E,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,OAAO,qBAAqB,CAAC,IAAI,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAA;IACvE,CAAC;IAED,OAAO,IAAI,CAAC,OAAO,CAAA;AACrB,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,aAAa,GAAG,CAAC,IAAkB,EAAE,UAA6B,EAAE,iBAA0B,EAAE,EAAE,CACtG,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAEpG;;;;;;;;GAQG;AACH,MAAM,mBAAmB,GAAG,CAC1B,WAAiD,EACjD,QAAgB,EAChB,SAAiB,EACjB,QAAsB,EACtB,EAAE;IACF,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,SAAS,CAAA;IAClB,CAAC;IAED,OAAO,GAAG,EAAE,CACV,WAAW,CAAC;QACV,QAAQ;QACR,SAAS;QACT,QAAQ;KACT,CAAC,CAAA;AACN,CAAC,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,4BAA4B,GAAG,CACnC,UAA2B,EAC3B,UAA6B,EAC7B,yBAAiC,EACjC,OAAiC,EACjC,eAA0D,EAC1D,EAAE;IACF,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,6BAAK,SAAS,EAAE,sBAAsB,CAAC,UAAU,EAAE,yBAAyB,CAAC,IAAG,UAAU,CAAO,CAAA;IAC1G,CAAC;IAED,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,CACL,oBAAC,eAAe,IACd,QAAQ,QACR,SAAS,QACT,SAAS,EAAE,yBAAyB,CAAC,UAAU,EAAE,yBAAyB,EAAE,IAAI,CAAC,EACjF,OAAO,EAAE,OAAO,IAEf,UAAU,CACK,CACnB,CAAA;IACH,CAAC;IAED,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,yBAAyB,CAAC,UAAU,EAAE,yBAAyB,CAAC,EAC3E,OAAO,EAAE,OAAO,IAEf,UAAU,CACJ,CACV,CAAA;AACH,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,OAAO,EACP,IAAI,EACJ,WAAW,EACX,iBAAiB,GAAG,GAAG,EACvB,iBAAiB,GAAG,OAAO,EAC3B,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,OAAO,EACP,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,GACU,EAAE,EAAE;IAC9B;;;;;;OAMG;IACH,MAAM,2BAA2B,GAAG,CAAC,IAAkB,EAAE,WAA4B,EAAE,EAAE;QACvF,MAAM,cAAc,GAAG,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAA;QAEpE,IAAI,CAAC,cAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACzC,OAAO,WAAW,CAAA;QACpB,CAAC;QAED,OAAO,CACL,oBAAC,gBAAgB,IAAC,gBAAgB,EAAE,uBAAuB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAc,IACvF,WAAW,CACK,CACpB,CAAA;IACH,CAAC,CAAA;IAED;;;;;OAKG;IACH,SAAS,mBAAmB,CAAC,MAAiC;;QAC5D,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;QAC9C,MAAM,KAAK,GAAG,MAAA,MAAM,CAAC,KAAK,mCAAI,iBAAiB,CAAA;QAE/C,OAAO,CACL,4BACE,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE,qBAAqB,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,EACpG,KAAK,EAAE,uBAAuB,CAAC;gBAC7B,WAAW;gBACX,YAAY,EAAE,0BAA0B;gBACxC,KAAK;gBACL,MAAM;gBACN,WAAW,EAAE,MAAM,CAAC,KAAK;aAC1B,CAAC,IAED,sBAAsB,CAAC,MAAM,CAAC,CAC5B,CACN,CAAA;IACH,CAAC;IAED;;;;;OAKG;IACH,SAAS,cAAc,CAAC,MAA4B;;QAClD,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;QAE7C,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,QAAQ,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC;YAAE,OAAO,IAAI,CAAA;QAEtD,MAAM,IAAI,GAAiB,MAAA,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,mCAAI,EAAE,CAAA;QACnD,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,CAAA;QACtD,MAAM,WAAW,GAAG,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAC7C,MAAM,yBAAyB,GAAG,4BAA4B,CAAC,WAAW,CAAC,CAAA;QAC3E,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,iBAAiB,CAAA;QACnD,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAA;QACrE,MAAM,OAAO,GACX,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QACvG,MAAM,WAAW,GAAG,4BAA4B,CAC9C,UAAU,EACV,UAAU,EACV,yBAAyB,EACzB,OAAO,EACP,eAAe,CAChB,CAAA;QACD,MAAM,cAAc,GAAG,2BAA2B,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;QAErE,OAAO,CACL,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,OAAO,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAChC,OAAO,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAChC,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,EACnD,KAAK,EAAE,kBAAkB,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,IAEhD,cAAc,CACZ,CACN,CAAA;IACH,CAAC;IAED;;;;;;OAMG;IACH,SAAS,aAAa,CAAC,GAA0C,EAAE,QAAgB;QACjF,MAAM,MAAM,GAAG,QAAQ,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,CAAA;QAC3C,MAAM,UAAU,GAAG,aAAa,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAA;QAExD,OAAO,CACL,4BAAI,GAAG,EAAE,QAAQ;YACd,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,CACtC,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CACrE;YACA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,CAClE,CACN,CAAA;IACH,CAAC;IAED,OAAO,mCAAQ,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAS,CAAA;AACjD,CAAC,CAAA"}
+{"version":3,"file":"PHXScheduleTableBody.js","sourceRoot":"","sources":["../../../../../src/components/TableSchedule/components/PHXScheduleTableBody.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TableSchedule/components/PHXScheduleTableHead.js

@@ -25,6 +25,8 @@ const StickyHeaderPlaceholders = ({ stickyHeaderCount, resolvedStickyColumnWidth
         index,
         stickyWidths: resolvedStickyColumnWidths,
         zIndexBase,
+        stickyHeaderCount,
+        showStickyShadow,
     }) })));
 /**
  * Renders the table head, including grouped headers and sticky row-header placeholders.

package/dist/esm/components/TableSchedule/components/PHXScheduleTableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"PHXScheduleTableHead.js","sourceRoot":"","sources":["../../../../../src/components/TableSchedule/components/PHXScheduleTableHead.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,cAAc,EACd,wBAAwB,GACzB,MAAM,UAAU,CAAA;AAqBjB;;;;;;;GAOG;AACH,MAAM,iCAAiC,GAAG,CACxC,mBAAwC,EACxC,UAAkB,EAClB,OAAgB,EACe,EAAE,CAAC,CAAC;IACnC,GAAG,mBAAmB;IACtB,UAAU;IACV,OAAO;CACR,CAAC,CAAA;AAEF;;;;;GAKG;AACH,MAAM,wBAAwB,GAAG,CAAC,EAChC,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,OAAO,GACuB,EAAE,EAAE,CAClC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,4BACE,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,wBAAwB,CAAC,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,EAC/E,KAAK,EAAE,0BAA0B,CAAC;QAChC,KAAK;QACL,YAAY,EAAE,0BAA0B;QACxC,UAAU;KACX,CAAC,GACF,CACH,CAAC,CAAA;AAEJ;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,GAAG,KAAK,CAAA;IAE/D,OAAO,CACL;QACG,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1C;YACE,oBAAC,wBAAwB,OAAK,iCAAiC,CAAC,mBAAmB,EAAE,CAAC,EAAE,CAAC,CAAC,GAAI;YAC7F,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC/B,4BACE,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,EAChC,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,yBAAyB,EAAE,IAEjC,KAAK,CAAC,MAAM,CACV,CACN,CAAC,CACC,CACN;QAED;YACG,CAAC,YAAY,IAAI,oBAAC,wBAAwB,OAAK,iCAAiC,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAI;YAC5G,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,0BAA0B,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,IAEzE,GAAG,CAAC,MAAM,CACR,CACN,CAAC,CACC,CACC,CACT,CAAA;AACH,CAAC"}
+{"version":3,"file":"PHXScheduleTableHead.js","sourceRoot":"","sources":["../../../../../src/components/TableSchedule/components/PHXScheduleTableHead.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,EACzB,0BAA0B,EAC1B,cAAc,EACd,wBAAwB,GACzB,MAAM,UAAU,CAAA;AAqBjB;;;;;;;GAOG;AACH,MAAM,iCAAiC,GAAG,CACxC,mBAAwC,EACxC,UAAkB,EAClB,OAAgB,EACe,EAAE,CAAC,CAAC;IACnC,GAAG,mBAAmB;IACtB,UAAU;IACV,OAAO;CACR,CAAC,CAAA;AAEF;;;;;GAKG;AACH,MAAM,wBAAwB,GAAG,CAAC,EAChC,iBAAiB,EACjB,0BAA0B,EAC1B,gBAAgB,EAChB,UAAU,EACV,OAAO,GACuB,EAAE,EAAE,CAClC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,4BACE,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,wBAAwB,CAAC,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,CAAC,EAC/E,KAAK,EAAE,0BAA0B,CAAC;QAChC,KAAK;QACL,YAAY,EAAE,0BAA0B;QACxC,UAAU;QACV,iBAAiB;QACjB,gBAAgB;KACjB,CAAC,GACF,CACH,CAAC,CAAA;AAEJ;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAgC;IACnE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,GAAG,KAAK,CAAA;IAE/D,OAAO,CACL;QACG,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAC1C;YACE,oBAAC,wBAAwB,OAAK,iCAAiC,CAAC,mBAAmB,EAAE,CAAC,EAAE,CAAC,CAAC,GAAI;YAC7F,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC/B,4BACE,GAAG,EAAE,EAAE,EACP,OAAO,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,EAChC,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,yBAAyB,EAAE,IAEjC,KAAK,CAAC,MAAM,CACV,CACN,CAAC,CACC,CACN;QAED;YACG,CAAC,YAAY,IAAI,oBAAC,wBAAwB,OAAK,iCAAiC,CAAC,mBAAmB,EAAE,CAAC,CAAC,GAAI;YAC5G,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,4BACE,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,0BAA0B,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,QAAQ,CAAC,IAEzE,GAAG,CAAC,MAAM,CACR,CACN,CAAC,CACC,CACC,CACT,CAAA;AACH,CAAC"}

package/dist/esm/components/TableSchedule/constants.d.ts

@@ -35,13 +35,25 @@ export declare const TOOLTIP_LABEL_CLASSNAME = "text-xs leading-5 text-gray-500"
 export declare const TOOLTIP_VALUE_CLASSNAME = "text-xs font-semibold leading-5 text-gray-800";
 export declare const DEFAULT_TOOLTIP_CLASSNAME = "w-fit !px-5 !py-4";
 export declare const SCHEDULE_CELL_CLASSNAME = "flex flex-col gap-2 text-left";
-export declare const SCHEDULE_TITLE_CLASSNAME = "text-sm font-semibold leading-5 text-gray-800";
-export declare const SCHEDULE_TITLE_DOTTED_CLASSNAME = "inline-block w-fit border-b-2 border-dotted border-gray-300 text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_TITLE_CLASSNAME = "whitespace-normal break-words text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_TITLE_DOTTED_CLASSNAME = "inline-block max-w-full whitespace-normal break-words border-b-2 border-dotted border-gray-300 text-sm font-semibold leading-5 text-gray-800";
 export declare const SCHEDULE_SECTION_CLASSNAME = "flex flex-col gap-1";
 export declare const SCHEDULE_SECTION_LABEL_CLASSNAME = "flex items-center gap-1.5 text-xs font-normal leading-5 text-gray-500";
-export declare const SCHEDULE_SECTION_VALUE_CLASSNAME = "text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_SECTION_VALUE_CLASSNAME = "w-full min-w-0 whitespace-normal break-words text-sm font-semibold leading-5 text-gray-800";
 export declare const SCHEDULE_EMPTY_TITLE_CLASSNAME = "text-sm font-semibold leading-5 text-gray-800";
 export declare const SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME = "text-xs font-normal leading-5 text-gray-500";
+export declare const SCHEDULE_CARD_STACK_CLASSNAME = "flex w-full flex-col gap-3";
+export declare const SCHEDULE_CARD_BUTTON_CLASSNAME = "group w-full shrink-0 overflow-hidden rounded-xl border border-gray-300 bg-white text-left shadow-sm ring-1 ring-inset ring-gray-200/80 transition hover:border-blue-300 hover:shadow-md";
+export declare const SCHEDULE_CARD_CONTENT_CLASSNAME = "relative h-full min-h-0 overflow-hidden";
+export declare const SCHEDULE_CARD_CONTENT_BORDERLESS_CLASSNAME = "relative h-full min-h-0 overflow-hidden";
+export declare const SCHEDULE_CARD_SCROLL_CLASSNAME = "h-full min-h-0 overflow-x-hidden overflow-y-auto [scrollbar-color:transparent_transparent] [scrollbar-gutter:stable] [scrollbar-width:thin] group-hover:[scrollbar-color:rgba(148,163,184,0.75)_transparent] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent group-hover:[&::-webkit-scrollbar-thumb]:bg-slate-300/80 group-hover:[&::-webkit-scrollbar-thumb:hover]:bg-slate-400/80 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5";
+export declare const SCHEDULE_CARD_CONTENT_INNER_CLASSNAME = "flex min-h-full flex-col gap-2 px-4 py-4 pr-1.5";
+export declare const SCHEDULE_CARD_CONTENT_BORDERLESS_INNER_CLASSNAME = "flex min-h-full flex-col gap-2 px-2.5 py-2 pr-1";
+export declare const SCHEDULE_CARD_TITLE_CLASSNAME = "inline-flex max-w-full whitespace-normal break-words rounded-full bg-blue-50 px-3 py-1 text-sm font-semibold leading-5 text-blue-600";
+export declare const SCHEDULE_CARD_BLOCK_CLASSNAME = "flex min-w-0 flex-col gap-2 border-t border-gray-100 pt-3 first:border-t-0 first:pt-0";
+export declare const SCHEDULE_CARD_SECTION_CLASSNAME = "flex flex-col gap-0.5";
+export declare const SCHEDULE_CARD_SECTION_LABEL_CLASSNAME = "inline-flex items-center gap-1.5 text-xs font-normal leading-5 text-gray-500";
+export declare const SCHEDULE_CARD_SECTION_VALUE_CLASSNAME = "w-full min-w-0 whitespace-normal break-words text-xs font-semibold leading-5 text-gray-800";
 export declare const BOXED_CELL_PADDING_CLASSNAME = "px-1 py-1";
 export declare const PLAIN_CELL_PADDING_CLASSNAME = "px-2 py-1.5";
 export declare const BUTTON_BASE_CLASSNAME = "!shadow-none !flex !w-full !rounded-none !text-left";

package/dist/esm/components/TableSchedule/constants.js

@@ -5,7 +5,6 @@ export const stickyBase = {
     left: 0,
     zIndex: 2,
     background: 'var(--color-background-primary, #fff)',
-    borderRight: BORDER,
 };
 export const thBase = {
     borderBottom: BORDER,
@@ -23,7 +22,8 @@ export const TABLE_SCROLL_CONTAINER_STYLE = {
     border: BORDER,
 };
 export const TABLE_STYLE = {
-    width: '100%',
+    width: 'max-content',
+    minWidth: '100%',
     borderCollapse: 'collapse',
 };
 export const ROW_HEADER_CONTENT_CLASSNAME = 'flex flex-col';
@@ -66,13 +66,25 @@ export const TOOLTIP_LABEL_CLASSNAME = 'text-xs leading-5 text-gray-500';
 export const TOOLTIP_VALUE_CLASSNAME = 'text-xs font-semibold leading-5 text-gray-800';
 export const DEFAULT_TOOLTIP_CLASSNAME = 'w-fit !px-5 !py-4';
 export const SCHEDULE_CELL_CLASSNAME = 'flex flex-col gap-2 text-left';
-export const SCHEDULE_TITLE_CLASSNAME = 'text-sm font-semibold leading-5 text-gray-800';
-export const SCHEDULE_TITLE_DOTTED_CLASSNAME = 'inline-block w-fit border-b-2 border-dotted border-gray-300 text-sm font-semibold leading-5 text-gray-800';
+export const SCHEDULE_TITLE_CLASSNAME = 'whitespace-normal break-words text-sm font-semibold leading-5 text-gray-800';
+export const SCHEDULE_TITLE_DOTTED_CLASSNAME = 'inline-block max-w-full whitespace-normal break-words border-b-2 border-dotted border-gray-300 text-sm font-semibold leading-5 text-gray-800';
 export const SCHEDULE_SECTION_CLASSNAME = 'flex flex-col gap-1';
 export const SCHEDULE_SECTION_LABEL_CLASSNAME = 'flex items-center gap-1.5 text-xs font-normal leading-5 text-gray-500';
-export const SCHEDULE_SECTION_VALUE_CLASSNAME = 'text-sm font-semibold leading-5 text-gray-800';
+export const SCHEDULE_SECTION_VALUE_CLASSNAME = 'w-full min-w-0 whitespace-normal break-words text-sm font-semibold leading-5 text-gray-800';
 export const SCHEDULE_EMPTY_TITLE_CLASSNAME = 'text-sm font-semibold leading-5 text-gray-800';
 export const SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME = 'text-xs font-normal leading-5 text-gray-500';
+export const SCHEDULE_CARD_STACK_CLASSNAME = 'flex w-full flex-col gap-3';
+export const SCHEDULE_CARD_BUTTON_CLASSNAME = 'group w-full shrink-0 overflow-hidden rounded-xl border border-gray-300 bg-white text-left shadow-sm ring-1 ring-inset ring-gray-200/80 transition hover:border-blue-300 hover:shadow-md';
+export const SCHEDULE_CARD_CONTENT_CLASSNAME = 'relative h-full min-h-0 overflow-hidden';
+export const SCHEDULE_CARD_CONTENT_BORDERLESS_CLASSNAME = 'relative h-full min-h-0 overflow-hidden';
+export const SCHEDULE_CARD_SCROLL_CLASSNAME = 'h-full min-h-0 overflow-x-hidden overflow-y-auto [scrollbar-color:transparent_transparent] [scrollbar-gutter:stable] [scrollbar-width:thin] group-hover:[scrollbar-color:rgba(148,163,184,0.75)_transparent] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent group-hover:[&::-webkit-scrollbar-thumb]:bg-slate-300/80 group-hover:[&::-webkit-scrollbar-thumb:hover]:bg-slate-400/80 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5';
+export const SCHEDULE_CARD_CONTENT_INNER_CLASSNAME = 'flex min-h-full flex-col gap-2 px-4 py-4 pr-1.5';
+export const SCHEDULE_CARD_CONTENT_BORDERLESS_INNER_CLASSNAME = 'flex min-h-full flex-col gap-2 px-2.5 py-2 pr-1';
+export const SCHEDULE_CARD_TITLE_CLASSNAME = 'inline-flex max-w-full whitespace-normal break-words rounded-full bg-blue-50 px-3 py-1 text-sm font-semibold leading-5 text-blue-600';
+export const SCHEDULE_CARD_BLOCK_CLASSNAME = 'flex min-w-0 flex-col gap-2 border-t border-gray-100 pt-3 first:border-t-0 first:pt-0';
+export const SCHEDULE_CARD_SECTION_CLASSNAME = 'flex flex-col gap-0.5';
+export const SCHEDULE_CARD_SECTION_LABEL_CLASSNAME = 'inline-flex items-center gap-1.5 text-xs font-normal leading-5 text-gray-500';
+export const SCHEDULE_CARD_SECTION_VALUE_CLASSNAME = 'w-full min-w-0 whitespace-normal break-words text-xs font-semibold leading-5 text-gray-800';
 export const BOXED_CELL_PADDING_CLASSNAME = 'px-1 py-1';
 export const PLAIN_CELL_PADDING_CLASSNAME = 'px-2 py-1.5';
 export const BUTTON_BASE_CLASSNAME = '!shadow-none !flex !w-full !rounded-none !text-left';

package/dist/esm/components/TableSchedule/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/components/TableSchedule/constants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/components/TableSchedule/constants.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/TableSchedule/renderers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridCellData, GridRowHeader, GridScheduleContent } from './types';
+import { GridCellData, GridRowHeader, GridScheduleCard, GridScheduleCardSize, GridScheduleCardVariant, GridScheduleContent } from './types';
 /**
  * Renders the content displayed inside a sticky row-header cell.
  *
@@ -22,6 +22,7 @@ export declare const renderCellBoxContent: (cell: GridCellData) => React.JSX.Ele
  * @returns {React.ReactNode} The rendered schedule content.
  */
 export declare const renderScheduleContent: (scheduleContent: GridScheduleContent, userDetailPageUrl?: string) => React.JSX.Element;
+export declare const renderScheduleCards: (scheduleCards: GridScheduleCard[], scheduleCardSize?: GridScheduleCardSize, scheduleCardVariant?: GridScheduleCardVariant, userDetailPageUrl?: string) => React.JSX.Element;
 /**
  * Resolves and renders the tooltip content for a data cell.
  *

package/dist/esm/components/TableSchedule/renderers.js

@@ -1,6 +1,7 @@
 'use client';
-import React from 'react';
-import { CELL_BOX_BASE_CLASSNAME, CELL_BOX_VARIANT_CLASSNAME, DEFAULT_TOOLTIP_CLASSNAME, ROW_HEADER_ALIGN_CLASSNAME, ROW_HEADER_CONTENT_CLASSNAME, ROW_HEADER_DESCRIPTION_CLASSNAME, ROW_HEADER_TITLE_CLASSNAME, SCHEDULE_CELL_CLASSNAME, SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME, SCHEDULE_EMPTY_TITLE_CLASSNAME, SCHEDULE_SECTION_CLASSNAME, SCHEDULE_SECTION_LABEL_CLASSNAME, SCHEDULE_SECTION_VALUE_CLASSNAME, SCHEDULE_TITLE_CLASSNAME, SCHEDULE_TITLE_DOTTED_CLASSNAME, TOOLTIP_CONTENT_CLASSNAME, TOOLTIP_LABEL_CLASSNAME, TOOLTIP_SECTION_CLASSNAME, TOOLTIP_TITLE_CLASSNAME, TOOLTIP_VALUE_CLASSNAME, } from './constants';
+import React, { useEffect, useRef, useState } from 'react';
+import { CELL_BOX_BASE_CLASSNAME, CELL_BOX_VARIANT_CLASSNAME, DEFAULT_TOOLTIP_CLASSNAME, ROW_HEADER_ALIGN_CLASSNAME, ROW_HEADER_CONTENT_CLASSNAME, ROW_HEADER_DESCRIPTION_CLASSNAME, ROW_HEADER_TITLE_CLASSNAME, SCHEDULE_CARD_BUTTON_CLASSNAME, SCHEDULE_CARD_BLOCK_CLASSNAME, SCHEDULE_CARD_CONTENT_CLASSNAME, SCHEDULE_CARD_CONTENT_BORDERLESS_INNER_CLASSNAME, SCHEDULE_CARD_CONTENT_BORDERLESS_CLASSNAME, SCHEDULE_CARD_CONTENT_INNER_CLASSNAME, SCHEDULE_CARD_SCROLL_CLASSNAME, SCHEDULE_CARD_SECTION_CLASSNAME, SCHEDULE_CARD_SECTION_LABEL_CLASSNAME, SCHEDULE_CARD_SECTION_VALUE_CLASSNAME, SCHEDULE_CARD_STACK_CLASSNAME, SCHEDULE_CARD_TITLE_CLASSNAME, SCHEDULE_CELL_CLASSNAME, SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME, SCHEDULE_EMPTY_TITLE_CLASSNAME, SCHEDULE_SECTION_CLASSNAME, SCHEDULE_SECTION_LABEL_CLASSNAME, SCHEDULE_SECTION_VALUE_CLASSNAME, SCHEDULE_TITLE_CLASSNAME, SCHEDULE_TITLE_DOTTED_CLASSNAME, TOOLTIP_CONTENT_CLASSNAME, TOOLTIP_LABEL_CLASSNAME, TOOLTIP_SECTION_CLASSNAME, TOOLTIP_TITLE_CLASSNAME, TOOLTIP_VALUE_CLASSNAME, } from './constants';
+import { PHXBadge } from '../Badge';
 /**
  * Checks whether a render value is a structured person-link object.
  *
@@ -9,34 +10,108 @@ import { CELL_BOX_BASE_CLASSNAME, CELL_BOX_VARIANT_CLASSNAME, DEFAULT_TOOLTIP_CL
  */
 const isGridPersonLink = (value) => !!value && typeof value === 'object' && 'type' in value && value.type === 'person-link';
 /**
- * Renders a person-link value as an external profile anchor when a destination URL exists.
+ * Trả về đường dẫn trang chi tiết của một người dùng nếu đủ dữ liệu điều hướng.
  *
- * @param {GridPersonLink} person The person-link payload to render.
- * @param {string} [userDetailPageUrl] The base URL used to build the person detail link.
- * @returns {React.ReactNode} The rendered link node, or null when the person has no display name.
+ * @param {GridPersonLink} person Dữ liệu người dùng đang được hiển thị.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết.
+ * @returns {string | undefined} URL đầy đủ của trang chi tiết, hoặc `undefined` nếu không thể điều hướng.
  */
-const renderGridPersonLink = (person, userDetailPageUrl) => {
+function resolvePersonLinkHref(person, userDetailPageUrl) {
+    if (!userDetailPageUrl || !person.id) {
+        return undefined;
+    }
+    return `${userDetailPageUrl}${person.id}`;
+}
+/**
+ * Hiển thị phần mã đi kèm tên người dùng khi dữ liệu có cung cấp mã.
+ *
+ * @param {GridPersonLink} person Dữ liệu người dùng cần dựng nhãn hiển thị.
+ * @returns {React.ReactNode} Phần nhãn tên và mã của người dùng.
+ */
+function renderPersonLinkLabel(person) {
+    return (React.createElement("span", { className: 'whitespace-normal break-words' },
+        person.name,
+        person.code ? ` (${person.code})` : ''));
+}
+/**
+ * Hiển thị icon dẫn tới trang chi tiết khi ô dữ liệu có thể điều hướng.
+ *
+ * @param {GridPersonLink} person Dữ liệu người dùng của ô hiện tại.
+ * @param {string | undefined} href Đường dẫn điều hướng đã được chuẩn hóa.
+ * @returns {React.ReactNode} Icon điều hướng hoặc `null` nếu không cần hiển thị.
+ */
+function renderPersonLinkIcon(person, href) {
+    if (!person.id || !href) {
+        return null;
+    }
+    return React.createElement("span", { className: 'ml-1 inline-block align-baseline' }, person.icon);
+}
+/**
+ * Hiển thị một liên kết người dùng trong ô lịch, có thể mở sang trang chi tiết nếu đủ dữ liệu.
+ *
+ * @param {GridPersonLink} person Thông tin người dùng cần hiển thị.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Nút liên kết đã dựng xong, hoặc `null` nếu không có tên để hiển thị.
+ */
+function renderPersonLinkNode(person, userDetailPageUrl) {
     if (!person.name)
         return null;
-    return (React.createElement("a", { className: 'group inline-flex items-center gap-1 whitespace-nowrap font-semibold text-gray-800 hover:text-blue-500', href: userDetailPageUrl && person.id ? `${userDetailPageUrl}${person.id}` : undefined, rel: 'noopener noreferrer', target: '_blank' },
-        React.createElement("span", null,
-            person.name,
-            person.code ? ` (${person.code})` : ''),
-        person.id && userDetailPageUrl && person.icon));
-};
+    const href = resolvePersonLinkHref(person, userDetailPageUrl);
+    return (React.createElement("a", { className: 'group/person-link block w-full min-w-0 font-semibold text-gray-800 hover:text-blue-500', href: href, rel: 'noopener noreferrer', target: '_blank' },
+        renderPersonLinkLabel(person),
+        renderPersonLinkIcon(person, href)));
+}
 /**
- * Renders a tooltip or schedule value that may contain raw nodes, a person link, or a list of person links.
+ * Hiển thị danh sách nhiều người dùng theo dạng cột trong cùng một ô dữ liệu.
  *
- * @param {ReactNode | GridPersonLink | GridPersonLink[]} value The value payload to render.
- * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
- * @returns {React.ReactNode} The rendered value node.
+ * @param {GridPersonLink[]} people Danh sách người dùng cần hiển thị.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Danh sách liên kết người dùng đã dựng xong.
+ */
+function renderPersonLinkListNode(people, userDetailPageUrl) {
+    return (React.createElement("div", { className: 'flex min-w-0 flex-col gap-1' }, people.map((person, index) => {
+        var _a;
+        return (React.createElement("div", { key: `${(_a = person.id) !== null && _a !== void 0 ? _a : 'person'}-${index}`, className: 'min-w-0' }, renderPersonLinkNode(person, userDetailPageUrl)));
+    })));
+}
+/**
+ * Hiển thị một phần tử giá trị bên trong danh sách nhiều dòng của ô dữ liệu.
+ *
+ * @param {RenderRichValueItem} item Giá trị đơn lẻ cần hiển thị.
+ * @param {number} index Chỉ số của giá trị trong danh sách.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Dòng hiển thị của giá trị tương ứng.
  */
-const renderRichValue = (value, userDetailPageUrl) => {
+function renderRichValueListItem(item, index, userDetailPageUrl) {
+    return (React.createElement("div", { key: index, className: 'min-w-0' }, isGridPersonLink(item) ? renderPersonLinkNode(item, userDetailPageUrl) : item));
+}
+/**
+ * Hiển thị danh sách nhiều giá trị giàu định dạng theo từng dòng riêng biệt.
+ *
+ * @param {RenderRichValueItem[]} values Danh sách giá trị cần hiển thị.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Danh sách giá trị đã dựng xong.
+ */
+function renderRichValueList(values, userDetailPageUrl) {
+    return (React.createElement("div", { className: 'flex min-w-0 flex-col gap-1' }, values.map((item, index) => renderRichValueListItem(item, index, userDetailPageUrl))));
+}
+/**
+ * Hiển thị giá trị của tooltip hoặc lịch học, hỗ trợ node thô, một người dùng, hoặc danh sách người dùng.
+ *
+ * @param {ReactNode | GridPersonLink | GridPersonLink[]} value Giá trị cần dựng giao diện.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Giá trị đã được dựng theo đúng kiểu dữ liệu đầu vào.
+ */
+function renderRichValue(value, userDetailPageUrl) {
     if (Array.isArray(value)) {
-        return (React.createElement("div", { className: 'flex flex-col gap-1' }, value.map((item, index) => (React.createElement("div", { key: index }, isGridPersonLink(item) ? renderGridPersonLink(item, userDetailPageUrl) : item)))));
+        const values = value;
+        if (values.every(isGridPersonLink)) {
+            return renderPersonLinkListNode(values, userDetailPageUrl);
+        }
+        return renderRichValueList(values, userDetailPageUrl);
     }
-    return isGridPersonLink(value) ? renderGridPersonLink(value, userDetailPageUrl) : value;
-};
+    return isGridPersonLink(value) ? renderPersonLinkNode(value, userDetailPageUrl) : value;
+}
 /**
  * Renders the content displayed inside a sticky row-header cell.
  *
@@ -84,8 +159,209 @@ export const renderScheduleContent = (scheduleContent, userDetailPageUrl) => {
             section.label && (React.createElement("div", { className: SCHEDULE_SECTION_LABEL_CLASSNAME },
                 section.labelPrefix,
                 React.createElement("span", null, section.label))),
-            section.items.map((item, itemIndex) => (React.createElement("div", { key: itemIndex, className: SCHEDULE_SECTION_VALUE_CLASSNAME }, isGridPersonLink(item) ? renderGridPersonLink(item, userDetailPageUrl) : item))))))));
+            section.items.map((item, itemIndex) => (React.createElement("div", { key: itemIndex, className: SCHEDULE_SECTION_VALUE_CLASSNAME }, isGridPersonLink(item) ? renderPersonLinkNode(item, userDetailPageUrl) : item))))))));
+};
+/**
+ * Hiển thị một dòng section trong card lịch với nhãn và giá trị đi kèm.
+ *
+ * @param {GridScheduleCardSection} section Dữ liệu section cần hiển thị.
+ * @param {number} sectionIndex Chỉ số section trong danh sách hiện tại.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Section đã được dựng xong để gắn vào card lịch.
+ */
+function renderScheduleCardSection(section, sectionIndex, userDetailPageUrl) {
+    return (React.createElement("div", { key: sectionIndex, className: SCHEDULE_CARD_SECTION_CLASSNAME },
+        React.createElement("div", { className: SCHEDULE_CARD_SECTION_LABEL_CLASSNAME },
+            section.labelPrefix,
+            React.createElement("span", null, section.label)),
+        React.createElement("div", { className: SCHEDULE_CARD_SECTION_VALUE_CLASSNAME }, renderRichValue(section.value, userDetailPageUrl))));
+}
+/**
+ * Hiển thị danh sách section dùng chung cho block hoặc card lịch.
+ *
+ * @param {GridScheduleCardSection[] | undefined} sections Danh sách section cần hiển thị.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Danh sách section đã dựng xong.
+ */
+function renderScheduleCardSections(sections, userDetailPageUrl) {
+    return (sections !== null && sections !== void 0 ? sections : []).map((section, sectionIndex) => renderScheduleCardSection(section, sectionIndex, userDetailPageUrl));
+}
+/**
+ * Hiển thị một block thông tin bên trong card lịch.
+ *
+ * @param {GridScheduleCardBlock} block Dữ liệu block cần hiển thị.
+ * @param {string} [userDetailPageUrl] Đường dẫn gốc để ghép tới trang chi tiết người dùng.
+ * @returns {React.ReactNode} Nội dung block đã được dựng xong.
+ */
+function renderScheduleCardBlock(block, userDetailPageUrl) {
+    return (React.createElement(React.Fragment, null,
+        renderScheduleCardTitle(block.title),
+        renderScheduleCardSections(block.sections, userDetailPageUrl)));
+}
+const DEFAULT_SCHEDULE_CARD_SIZE = {
+    width: '100%',
+    height: 156,
+};
+const resolveBadgeText = (value) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+        return String(value);
+    }
+    return undefined;
 };
+/**
+ * Hiển thị tiêu đề của card lịch dưới dạng badge hoặc tiêu đề văn bản thường.
+ *
+ * @param {ReactNode} [title] Giá trị tiêu đề cần hiển thị.
+ * @returns {React.ReactNode} Badge hoặc tiêu đề đã dựng xong, hoặc `null` nếu không có dữ liệu.
+ */
+function renderScheduleCardTitle(title) {
+    if (!title)
+        return null;
+    const badgeText = resolveBadgeText(title);
+    if (badgeText) {
+        return React.createElement(PHXBadge, { hideIcon: true, text: badgeText, type: 'informational' });
+    }
+    return React.createElement("div", { className: SCHEDULE_CARD_TITLE_CLASSNAME }, title);
+}
+const resolveScheduleCardSize = (scheduleCardSize) => {
+    var _a, _b;
+    return ({
+        width: (_a = scheduleCardSize === null || scheduleCardSize === void 0 ? void 0 : scheduleCardSize.width) !== null && _a !== void 0 ? _a : DEFAULT_SCHEDULE_CARD_SIZE.width,
+        height: (_b = scheduleCardSize === null || scheduleCardSize === void 0 ? void 0 : scheduleCardSize.height) !== null && _b !== void 0 ? _b : DEFAULT_SCHEDULE_CARD_SIZE.height,
+    });
+};
+const buildScheduleCardStackStyle = (scheduleCardSize) => {
+    const resolvedSize = resolveScheduleCardSize(scheduleCardSize);
+    return {
+        width: resolvedSize.width,
+        height: resolvedSize.height,
+    };
+};
+const buildScheduleCardButtonStyle = (totalCards, scheduleCardSize) => {
+    if (totalCards !== 1) {
+        return undefined;
+    }
+    const resolvedSize = resolveScheduleCardSize(scheduleCardSize);
+    return {
+        width: resolvedSize.width,
+        minHeight: resolvedSize.height,
+        height: resolvedSize.height,
+    };
+};
+/**
+ * Trả về class cho nút card lịch theo biến thể giao diện đang dùng.
+ *
+ * @param {GridScheduleCardVariant} [scheduleCardVariant='default'] Biến thể hiển thị của card lịch.
+ * @returns {string} Chuỗi className áp dụng cho nút card.
+ */
+function getScheduleCardButtonClassName(scheduleCardVariant = 'default') {
+    return scheduleCardVariant === 'borderless'
+        ? 'group w-full shrink-0 appearance-none overflow-hidden rounded-xl bg-white text-left transition'
+        : SCHEDULE_CARD_BUTTON_CLASSNAME;
+}
+/**
+ * Trả về class cho vùng nội dung ngoài của card lịch theo biến thể giao diện.
+ *
+ * @param {GridScheduleCardVariant} [scheduleCardVariant='default'] Biến thể hiển thị của card lịch.
+ * @returns {string} Chuỗi className áp dụng cho vùng nội dung ngoài.
+ */
+function getScheduleCardContentClassName(scheduleCardVariant = 'default') {
+    return scheduleCardVariant === 'borderless'
+        ? SCHEDULE_CARD_CONTENT_BORDERLESS_CLASSNAME
+        : SCHEDULE_CARD_CONTENT_CLASSNAME;
+}
+/**
+ * Trả về class cho vùng nội dung trong cùng của card lịch theo biến thể giao diện.
+ *
+ * @param {GridScheduleCardVariant} [scheduleCardVariant='default'] Biến thể hiển thị của card lịch.
+ * @returns {string} Chuỗi className áp dụng cho vùng nội dung trong cùng.
+ */
+function getScheduleCardContentInnerClassName(scheduleCardVariant = 'default') {
+    return scheduleCardVariant === 'borderless'
+        ? SCHEDULE_CARD_CONTENT_BORDERLESS_INNER_CLASSNAME
+        : SCHEDULE_CARD_CONTENT_INNER_CLASSNAME;
+}
+/**
+ * Tính trạng thái cuộn của phần nội dung card lịch để quyết định có hiển thị fade ở đáy hay không.
+ *
+ * @param {HTMLDivElement} element Phần tử cuộn đang được theo dõi.
+ * @returns {ScheduleCardScrollState} Trạng thái tràn dọc và vị trí hiện tại của thanh cuộn.
+ */
+function resolveScheduleCardScrollState(element) {
+    const hasVerticalOverflow = element.scrollHeight > element.clientHeight;
+    const maxScrollTop = element.scrollHeight - element.clientHeight;
+    const isAtBottom = maxScrollTop <= 1 || element.scrollTop >= maxScrollTop - 1;
+    return {
+        hasVerticalOverflow,
+        isAtBottom,
+    };
+}
+/**
+ * Đồng bộ state cuộn của card lịch từ kích thước và vị trí cuộn hiện tại của phần tử.
+ *
+ * @param {HTMLDivElement} element Phần tử cuộn đang được theo dõi.
+ * @param {(value: React.SetStateAction<boolean>) => void} setHasVerticalOverflow Hàm cập nhật trạng thái tràn dọc.
+ * @param {(value: React.SetStateAction<boolean>) => void} setIsAtBottom Hàm cập nhật trạng thái đã cuộn tới đáy.
+ * @returns {void}
+ */
+function syncScheduleCardScrollState(element, setHasVerticalOverflow, setIsAtBottom) {
+    const nextState = resolveScheduleCardScrollState(element);
+    setHasVerticalOverflow(nextState.hasVerticalOverflow);
+    setIsAtBottom(nextState.isAtBottom);
+}
+/**
+ * Hiển thị vùng nội dung có thể cuộn của card lịch và thêm hiệu ứng fade khi còn nội dung phía dưới.
+ *
+ * @param {ScheduleCardScrollableContentProps} props Thuộc tính render của vùng cuộn card lịch.
+ * @returns {React.ReactNode} Vùng nội dung card lịch có xử lý overflow theo chiều dọc.
+ */
+function ScheduleCardScrollableContent({ children, scheduleCardVariant, }) {
+    const scrollRef = useRef(null);
+    const [hasVerticalOverflow, setHasVerticalOverflow] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (!element) {
+            return undefined;
+        }
+        const scrollElement = element;
+        /**
+         * Đồng bộ trạng thái cuộn mỗi khi kích thước hoặc vị trí cuộn của card thay đổi.
+         *
+         * @returns {void}
+         */
+        function updateScrollState() {
+            syncScheduleCardScrollState(scrollElement, setHasVerticalOverflow, setIsAtBottom);
+        }
+        updateScrollState();
+        const resizeObserver = new ResizeObserver(() => {
+            updateScrollState();
+        });
+        resizeObserver.observe(scrollElement);
+        const innerElement = scrollElement.firstElementChild;
+        if (innerElement instanceof HTMLElement) {
+            resizeObserver.observe(innerElement);
+        }
+        scrollElement.addEventListener('scroll', updateScrollState, { passive: true });
+        window.addEventListener('resize', updateScrollState);
+        return () => {
+            resizeObserver.disconnect();
+            scrollElement.removeEventListener('scroll', updateScrollState);
+            window.removeEventListener('resize', updateScrollState);
+        };
+    }, [children, scheduleCardVariant]);
+    return (React.createElement("div", { className: getScheduleCardContentClassName(scheduleCardVariant) },
+        React.createElement("div", { ref: scrollRef, className: SCHEDULE_CARD_SCROLL_CLASSNAME },
+            React.createElement("div", { className: getScheduleCardContentInnerClassName(scheduleCardVariant) }, children)),
+        hasVerticalOverflow && !isAtBottom && (React.createElement("div", { className: 'pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-white via-white/90 to-transparent' }))));
+}
+export const renderScheduleCards = (scheduleCards, scheduleCardSize, scheduleCardVariant, userDetailPageUrl) => (React.createElement("div", { className: SCHEDULE_CARD_STACK_CLASSNAME, style: buildScheduleCardStackStyle(scheduleCardSize) }, scheduleCards.map((card, index) => {
+    var _a;
+    return (React.createElement("button", { key: (_a = card.id) !== null && _a !== void 0 ? _a : index, type: 'button', className: getScheduleCardButtonClassName(scheduleCardVariant), onClick: card.onClick, style: buildScheduleCardButtonStyle(scheduleCards.length, scheduleCardSize) },
+        React.createElement(ScheduleCardScrollableContent, { scheduleCardVariant: scheduleCardVariant }, card.blocks && card.blocks.length > 0 ? (card.blocks.map((block, blockIndex) => (React.createElement("div", { key: blockIndex, className: SCHEDULE_CARD_BLOCK_CLASSNAME }, renderScheduleCardBlock(block, userDetailPageUrl))))) : (React.createElement(React.Fragment, null,
+            renderScheduleCardTitle(card.title),
+            renderScheduleCardSections(card.sections, userDetailPageUrl))))));
+})));
 /**
  * Renders the grouped tooltip sections for a cell.
  *