@lax-wp/design-system 0.13.33-beta.7 → 0.13.33

package/dist/components/data-display/infinite-table/head/cell/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),A=require("../../../../../providers/design-system-provider/hooks.cjs.js"),L=require("../../../datatype-icon/DataTypeIcon.cjs.js"),l=require("../../../../tooltip/Tooltip.cjs.js"),n=require("@mui/icons-material"),y=require("../../../../../_virtual/index.cjs.js"),u=require("react"),W=require("../../context.cjs.js"),_=require("./Options.cjs.js"),B=require("./Prefix.cjs.js"),E=require("./Resizer.cjs.js"),V=require("../../constants.cjs.js"),H=({headerGroup:f,headerIndex:a,showHeaderOptions:d,column:e,isShowSortArrowAsc:k,isShowSortArrowDesc:C,onSort:c,onFilter:g,toggleHeaderOption:x,setIsShowSortArrowAsc:m,setIsShowSortArrowDesc:j,setShowHeaderOptions:v,toggleDataFilterModal:w,isColumnConfigurable:N,onAddColumnClick:S,onEditColumnClick:K,onDeleteColumnClick:T,isResizable:q})=>{const t=A.useTableConfig(),p=t?.getPrimaryColor?.()||{},{lastNonStickyColumnIndex:I,setShowHeaderContextOptions:o,showHeaderContextOptions:P,getSumOfNextVisibleColumnWidth:z,handleUpdateColumnWidth:O,multiSelectConfig:b,headerContextOptions:h,showDataTypeIcon:R}=u.useContext(W.TableContext),D=e?.sticky?z?.(a):0,F=I?.(),{selectedColumnIds:i=[]}=b||{},$=y({"border border-primary-600 dark:border-blue-800":i?.includes(e.id),"border-b border-b-primary-300":e?.isPrimaryKey,"border-b border-b-purple-300":e?.isCompositeKey});return r.jsx(u.Fragment,{children:r.jsxs("th",{className:y("bg-white dark:bg-black-700",`${e?.sticky?"sticky left-0 bg-neutral-50 dark:bg-black-700 right-0":"relative"} h-10 whitespace-normal max-w-lg ${F===a?"w-full":""} h-full gap-1 cursor-pointer`,!e.static&&!i?.includes(e.id)&&"hover:bg-neutral-200 dark:hover:bg-black-700",{"bg-primary-100 dark:bg-primary-900":i?.includes(e.id)},$),style:{minWidth:`${e.width}px`,maxWidth:`${e.width}px`,right:` ${e?.sticky?`${D}px`:V.CELL_DEFAULT_RIGHT_OFFSET}`},role:"cell",onClick:s=>b?.onTableColumnClick?.(s.nativeEvent,e.id),onContextMenu:s=>{i?.includes(e.id)&&(s.preventDefault(),o?.(e.key))},children:[r.jsxs("div",{className:"flex w-full px-4 gap-2 h-10 justify-between items-center",children:[r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(B.Prefix,{column:e,isShowSortArrowAsc:k,isShowSortArrowDesc:C}),e?.isCompositeKey?t?.renderKeyIcons?t.renderKeyIcons("composite"):r.jsx(l,{title:"Composite Key",children:r.jsx("span",{className:"flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1",children:r.jsx(n.VpnKeyRounded,{sx:{fontSize:14,color:"#BB5DFF"}})})}):e?.isPrimaryKey?t?.renderKeyIcons?t.renderKeyIcons("primary",p?.[400]):r.jsx(l,{title:"Primary Key",children:r.jsx("span",{className:"flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1",children:r.jsx(n.VpnKeyRounded,{sx:{fontSize:14,color:p?.[400]||"var(--color-primary-400)"}})})}):null,r.jsx("span",{className:"text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap",children:e.render("Header")}),e.isSAP&&t?.renderSapLabel?.(),e.is_live_field&&r.jsx(l,{title:"Live Field",children:r.jsx("span",{className:"flex items-center",children:r.jsx(n.BoltOutlined,{sx:{fontSize:14,color:"var(--color-primary-600)"}})})}),!e.static&&e?.sortable&&c&&r.jsx("button",{className:"flex items-center justify-center h-full",children:r.jsx(n.KeyboardArrowDown,{sx:{fontSize:18,color:"#98A2B3",transform:d===e.key?"rotate(180deg)":"none",transition:"transform 0.2s"},onClick:s=>{s.stopPropagation(),e.static||x(e.key)}})})]}),!e.static&&d===e.key&&r.jsx(_.Options,{headerIndex:a,headerGroup:f,column:e,onSort:c,toggleHeaderOption:x,setIsShowSortArrowAsc:m,setIsShowSortArrowDesc:j,setShowHeaderOptions:v,toggleDataFilterModal:w,isColumnConfigurable:N,onAddColumnClick:S,onEditColumnClick:K,onDeleteColumnClick:T,onFilter:g}),P===e.key?t?.renderColumnContextOptions?.({onClose:()=>o?.(null),children:h})||r.jsxs("div",{className:"absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]",children:[r.jsx("div",{className:"flex justify-end p-1 border-b border-neutral-100 dark:border-black-600",children:r.jsx("button",{type:"button",className:"text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1",onClick:()=>o?.(null),children:"Close"})}),r.jsx("div",{className:"p-1",children:h})]}):null,R&&r.jsx(L.DataTypeIcon,{dataType:e?.dataType||"string"})]}),q?r.jsx(E.Resizer,{column:e,onResizeComplete:O}):null]})})};exports.Cell=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),A=require("../../../../../providers/design-system-provider/hooks.cjs.js"),L=require("../../../datatype-icon/DataTypeIcon.cjs.js"),l=require("../../../../tooltip/Tooltip.cjs.js"),n=require("@mui/icons-material"),y=require("../../../../../_virtual/index.cjs.js"),u=require("react"),W=require("../../context.cjs.js"),_=require("./Options.cjs.js"),B=require("./Prefix.cjs.js"),E=require("./Resizer.cjs.js"),V=require("../../constants.cjs.js"),H=({headerGroup:f,headerIndex:o,showHeaderOptions:d,column:e,isShowSortArrowAsc:k,isShowSortArrowDesc:C,onSort:c,onFilter:g,toggleHeaderOption:x,setIsShowSortArrowAsc:m,setIsShowSortArrowDesc:j,setShowHeaderOptions:v,toggleDataFilterModal:w,isColumnConfigurable:N,onAddColumnClick:S,onEditColumnClick:K,onDeleteColumnClick:T,isResizable:q})=>{const t=A.useTableConfig(),p=t?.getPrimaryColor?.()||{},{lastNonStickyColumnIndex:I,setShowHeaderContextOptions:a,showHeaderContextOptions:P,getSumOfNextVisibleColumnWidth:z,handleUpdateColumnWidth:O,multiSelectConfig:b,headerContextOptions:h,showDataTypeIcon:R}=u.useContext(W.TableContext),D=e?.sticky?z?.(o):0,F=I?.(),{selectedColumnIds:i=[]}=b||{},$=y({"border border-primary-600 dark:border-blue-800":i?.includes(e.id),"border-b border-b-primary-300":e?.isPrimaryKey,"border-b border-b-purple-300":e?.isCompositeKey});return r.jsx(u.Fragment,{children:r.jsxs("th",{className:y("bg-white dark:bg-black-700",`${e?.sticky?"sticky left-0 bg-neutral-50 dark:bg-black-700 right-0":"relative"} h-row whitespace-normal max-w-lg ${F===o?"w-full":""} h-full gap-1 cursor-pointer`,!e.static&&!i?.includes(e.id)&&"hover:bg-neutral-200 dark:hover:bg-black-700",{"bg-primary-100 dark:bg-primary-900":i?.includes(e.id)},$),style:{minWidth:`${e.width}px`,maxWidth:`${e.width}px`,right:` ${e?.sticky?`${D}px`:V.CELL_DEFAULT_RIGHT_OFFSET}`},role:"cell",onClick:s=>b?.onTableColumnClick?.(s.nativeEvent,e.id),onContextMenu:s=>{i?.includes(e.id)&&(s.preventDefault(),a?.(e.key))},children:[r.jsxs("div",{className:"flex w-full px-4 gap-2 h-row justify-between items-center",children:[r.jsxs("div",{className:"flex items-center gap-2",children:[r.jsx(B.Prefix,{column:e,isShowSortArrowAsc:k,isShowSortArrowDesc:C}),e?.isCompositeKey?t?.renderKeyIcons?t.renderKeyIcons("composite"):r.jsx(l,{title:"Composite Key",children:r.jsx("span",{className:"flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1",children:r.jsx(n.VpnKeyRounded,{sx:{fontSize:14,color:"#BB5DFF"}})})}):e?.isPrimaryKey?t?.renderKeyIcons?t.renderKeyIcons("primary",p?.[400]):r.jsx(l,{title:"Primary Key",children:r.jsx("span",{className:"flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1",children:r.jsx(n.VpnKeyRounded,{sx:{fontSize:14,color:p?.[400]||"var(--color-primary-400)"}})})}):null,r.jsx("span",{className:"text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap",children:e.render("Header")}),e.isSAP&&t?.renderSapLabel?.(),e.is_live_field&&r.jsx(l,{title:"Live Field",children:r.jsx("span",{className:"flex items-center",children:r.jsx(n.BoltOutlined,{sx:{fontSize:14,color:"var(--color-primary-600)"}})})}),!e.static&&e?.sortable&&c&&r.jsx("button",{className:"flex items-center justify-center h-full",children:r.jsx(n.KeyboardArrowDown,{sx:{fontSize:18,color:"#98A2B3",transform:d===e.key?"rotate(180deg)":"none",transition:"transform 0.2s"},onClick:s=>{s.stopPropagation(),e.static||x(e.key)}})})]}),!e.static&&d===e.key&&r.jsx(_.Options,{headerIndex:o,headerGroup:f,column:e,onSort:c,toggleHeaderOption:x,setIsShowSortArrowAsc:m,setIsShowSortArrowDesc:j,setShowHeaderOptions:v,toggleDataFilterModal:w,isColumnConfigurable:N,onAddColumnClick:S,onEditColumnClick:K,onDeleteColumnClick:T,onFilter:g}),P===e.key?t?.renderColumnContextOptions?.({onClose:()=>a?.(null),children:h})||r.jsxs("div",{className:"absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]",children:[r.jsx("div",{className:"flex justify-end p-1 border-b border-neutral-100 dark:border-black-600",children:r.jsx("button",{type:"button",className:"text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1",onClick:()=>a?.(null),children:"Close"})}),r.jsx("div",{className:"p-1",children:h})]}):null,R&&r.jsx(L.DataTypeIcon,{dataType:e?.dataType||"string"})]}),q?r.jsx(E.Resizer,{column:e,onResizeComplete:O}):null]})})};exports.Cell=H;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/data-display/infinite-table/head/cell/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/index.tsx"],"sourcesContent":["import { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { DataTypeIcon } from '../../../../data-display/datatype-icon/DataTypeIcon';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { BoltOutlined, KeyboardArrowDown, VpnKeyRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { Fragment, useContext } from 'react';\n\nimport { TableContext } from '../../context';\nimport { Options } from './Options';\nimport { Prefix } from './Prefix';\nimport { Resizer } from './Resizer';\nimport { CELL_DEFAULT_RIGHT_OFFSET } from '../../constants';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  sticky?: boolean;\n  static?: boolean;\n  isPrimaryKey?: boolean;\n  isCompositeKey?: boolean;\n  isSAP?: boolean;\n  is_live_field?: boolean;\n  dataType?: string;\n  visible?: boolean;\n  sortable?: boolean\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface CellProps {\n  headerGroup: { getHeaderGroupProps: () => Record<string, unknown>; headers: HeaderColumn[]; [k: string]: unknown };\n  headerIndex: number;\n  showHeaderOptions: string;\n  column: HeaderColumn;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  isResizable: boolean;\n}\n\nexport const Cell = ({\n  headerGroup,\n  headerIndex,\n  showHeaderOptions,\n  column,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  isResizable,\n}: CellProps) => {\n  const tableConfig = useTableConfig();\n  const primaryColorShades = tableConfig?.getPrimaryColor?.() || {};\n  const {\n    lastNonStickyColumnIndex,\n    setShowHeaderContextOptions,\n    showHeaderContextOptions,\n    getSumOfNextVisibleColumnWidth,\n    handleUpdateColumnWidth,\n    multiSelectConfig,\n    headerContextOptions,\n    showDataTypeIcon,\n  } = useContext(TableContext);\n\n  const nextWidthSum = column?.sticky ? getSumOfNextVisibleColumnWidth?.(headerIndex) : 0;\n  const lastNonStickyColIndex = lastNonStickyColumnIndex?.();\n  const { selectedColumnIds = [] } = multiSelectConfig || {};\n\n  const borderClass = cn({\n    'border border-primary-600 dark:border-blue-800': selectedColumnIds?.includes(column.id),\n    'border-b border-b-primary-300': column?.isPrimaryKey,\n    'border-b border-b-purple-300': column?.isCompositeKey,\n  });\n\n  return (\n    <Fragment>\n      <th\n        className={cn(\n          'bg-white dark:bg-black-700',\n          `${column?.sticky ? `sticky left-0 bg-neutral-50 dark:bg-black-700 right-0` : `relative`} h-10 whitespace-normal max-w-lg ${lastNonStickyColIndex === headerIndex ? 'w-full' : ''} h-full gap-1 cursor-pointer`,\n          !column.static && !selectedColumnIds?.includes(column.id) && 'hover:bg-neutral-200 dark:hover:bg-black-700',\n          { 'bg-primary-100 dark:bg-primary-900': selectedColumnIds?.includes(column.id) },\n          borderClass,\n        )}\n        style={{\n          minWidth: `${column.width}px`,\n          maxWidth: `${column.width}px`,\n          right: ` ${column?.sticky ? `${nextWidthSum}px` : CELL_DEFAULT_RIGHT_OFFSET}`,\n        }}\n        role='cell'\n        onClick={(e) => multiSelectConfig?.onTableColumnClick?.(e.nativeEvent, column.id)}\n        onContextMenu={(e) => {\n          if (selectedColumnIds?.includes(column.id)) {\n            e.preventDefault();\n            setShowHeaderContextOptions?.(column.key);\n          }\n        }}\n      >\n        <div className='flex w-full px-4 gap-2 h-10 justify-between items-center'>\n          <div className='flex items-center gap-2'>\n            <Prefix {...{ column, isShowSortArrowAsc, isShowSortArrowDesc }} />\n\n            {column?.isCompositeKey\n              ? tableConfig?.renderKeyIcons\n                ? tableConfig.renderKeyIcons('composite')\n                : (\n                    <Tooltip title='Composite Key'>\n                      <span className='flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1'>\n                        <VpnKeyRounded sx={{ fontSize: 14, color: '#BB5DFF' }} />\n                      </span>\n                    </Tooltip>\n                  )\n              : column?.isPrimaryKey\n                ? tableConfig?.renderKeyIcons\n                  ? tableConfig.renderKeyIcons('primary', primaryColorShades?.[400])\n                  : (\n                      <Tooltip title='Primary Key'>\n                        <span className='flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1'>\n                          <VpnKeyRounded sx={{ fontSize: 14, color: primaryColorShades?.[400] || 'var(--color-primary-400)' }} />\n                        </span>\n                      </Tooltip>\n                    )\n                : null}\n\n            <span className='text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap'>{column.render('Header')}</span>\n            {column.isSAP && tableConfig?.renderSapLabel?.()}\n            {column.is_live_field && (\n              <Tooltip title='Live Field'>\n                <span className='flex items-center'>\n                  <BoltOutlined sx={{ fontSize: 14, color: 'var(--color-primary-600)' }} />\n                </span>\n              </Tooltip>\n            )}\n            {!column.static && column?.sortable && onSort && (\n              <button className='flex items-center justify-center h-full'>\n                <KeyboardArrowDown\n                  sx={{ fontSize: 18, color: '#98A2B3', transform: showHeaderOptions === column.key ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!column.static) toggleHeaderOption(column.key);\n                  }}\n                />\n              </button>\n            )}\n          </div>\n          {!column.static && showHeaderOptions === column.key && (\n            <Options\n              headerIndex={headerIndex}\n              headerGroup={headerGroup}\n              column={column}\n              onSort={onSort}\n              toggleHeaderOption={toggleHeaderOption}\n              setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n              setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n              setShowHeaderOptions={setShowHeaderOptions}\n              toggleDataFilterModal={toggleDataFilterModal}\n              isColumnConfigurable={isColumnConfigurable}\n              onAddColumnClick={onAddColumnClick}\n              onEditColumnClick={onEditColumnClick}\n              onDeleteColumnClick={onDeleteColumnClick}\n              onFilter={onFilter}\n            />\n          )}\n          {showHeaderContextOptions === column.key\n            ? tableConfig?.renderColumnContextOptions?.({\n                onClose: () => setShowHeaderContextOptions?.(null),\n                children: headerContextOptions,\n              }) || (\n                <div className='absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]'>\n                  <div className='flex justify-end p-1 border-b border-neutral-100 dark:border-black-600'>\n                    <button\n                      type='button'\n                      className='text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1'\n                      onClick={() => setShowHeaderContextOptions?.(null)}\n                    >\n                      Close\n                    </button>\n                  </div>\n                  <div className='p-1'>{headerContextOptions}</div>\n                </div>\n              )\n            : null}\n          {showDataTypeIcon && <DataTypeIcon dataType={column?.dataType || 'string'} />}\n        </div>\n        {isResizable ? <Resizer column={column} onResizeComplete={handleUpdateColumnWidth!} /> : null}\n      </th>\n    </Fragment>\n  );\n};\n"],"names":["Cell","headerGroup","headerIndex","showHeaderOptions","column","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","isResizable","tableConfig","useTableConfig","primaryColorShades","lastNonStickyColumnIndex","setShowHeaderContextOptions","showHeaderContextOptions","getSumOfNextVisibleColumnWidth","handleUpdateColumnWidth","multiSelectConfig","headerContextOptions","showDataTypeIcon","useContext","TableContext","nextWidthSum","lastNonStickyColIndex","selectedColumnIds","borderClass","cn","Fragment","jsxs","CELL_DEFAULT_RIGHT_OFFSET","e","jsx","Prefix","Tooltip","VpnKeyRounded","BoltOutlined","KeyboardArrowDown","Options","DataTypeIcon","Resizer"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/index.tsx"],"sourcesContent":["import { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { DataTypeIcon } from '../../../../data-display/datatype-icon/DataTypeIcon';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { BoltOutlined, KeyboardArrowDown, VpnKeyRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { Fragment, useContext } from 'react';\n\nimport { TableContext } from '../../context';\nimport { Options } from './Options';\nimport { Prefix } from './Prefix';\nimport { Resizer } from './Resizer';\nimport { CELL_DEFAULT_RIGHT_OFFSET } from '../../constants';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  sticky?: boolean;\n  static?: boolean;\n  isPrimaryKey?: boolean;\n  isCompositeKey?: boolean;\n  isSAP?: boolean;\n  is_live_field?: boolean;\n  dataType?: string;\n  visible?: boolean;\n  sortable?: boolean\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface CellProps {\n  headerGroup: { getHeaderGroupProps: () => Record<string, unknown>; headers: HeaderColumn[]; [k: string]: unknown };\n  headerIndex: number;\n  showHeaderOptions: string;\n  column: HeaderColumn;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  isResizable: boolean;\n}\n\nexport const Cell = ({\n  headerGroup,\n  headerIndex,\n  showHeaderOptions,\n  column,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  isResizable,\n}: CellProps) => {\n  const tableConfig = useTableConfig();\n  const primaryColorShades = tableConfig?.getPrimaryColor?.() || {};\n  const {\n    lastNonStickyColumnIndex,\n    setShowHeaderContextOptions,\n    showHeaderContextOptions,\n    getSumOfNextVisibleColumnWidth,\n    handleUpdateColumnWidth,\n    multiSelectConfig,\n    headerContextOptions,\n    showDataTypeIcon,\n  } = useContext(TableContext);\n\n  const nextWidthSum = column?.sticky ? getSumOfNextVisibleColumnWidth?.(headerIndex) : 0;\n  const lastNonStickyColIndex = lastNonStickyColumnIndex?.();\n  const { selectedColumnIds = [] } = multiSelectConfig || {};\n\n  const borderClass = cn({\n    'border border-primary-600 dark:border-blue-800': selectedColumnIds?.includes(column.id),\n    'border-b border-b-primary-300': column?.isPrimaryKey,\n    'border-b border-b-purple-300': column?.isCompositeKey,\n  });\n\n  return (\n    <Fragment>\n      <th\n        className={cn(\n          'bg-white dark:bg-black-700',\n          `${column?.sticky ? `sticky left-0 bg-neutral-50 dark:bg-black-700 right-0` : `relative`} h-row whitespace-normal max-w-lg ${lastNonStickyColIndex === headerIndex ? 'w-full' : ''} h-full gap-1 cursor-pointer`,\n          !column.static && !selectedColumnIds?.includes(column.id) && 'hover:bg-neutral-200 dark:hover:bg-black-700',\n          { 'bg-primary-100 dark:bg-primary-900': selectedColumnIds?.includes(column.id) },\n          borderClass,\n        )}\n        style={{\n          minWidth: `${column.width}px`,\n          maxWidth: `${column.width}px`,\n          right: ` ${column?.sticky ? `${nextWidthSum}px` : CELL_DEFAULT_RIGHT_OFFSET}`,\n        }}\n        role='cell'\n        onClick={(e) => multiSelectConfig?.onTableColumnClick?.(e.nativeEvent, column.id)}\n        onContextMenu={(e) => {\n          if (selectedColumnIds?.includes(column.id)) {\n            e.preventDefault();\n            setShowHeaderContextOptions?.(column.key);\n          }\n        }}\n      >\n        <div className='flex w-full px-4 gap-2 h-row justify-between items-center'>\n          <div className='flex items-center gap-2'>\n            <Prefix {...{ column, isShowSortArrowAsc, isShowSortArrowDesc }} />\n\n            {column?.isCompositeKey\n              ? tableConfig?.renderKeyIcons\n                ? tableConfig.renderKeyIcons('composite')\n                : (\n                    <Tooltip title='Composite Key'>\n                      <span className='flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1'>\n                        <VpnKeyRounded sx={{ fontSize: 14, color: '#BB5DFF' }} />\n                      </span>\n                    </Tooltip>\n                  )\n              : column?.isPrimaryKey\n                ? tableConfig?.renderKeyIcons\n                  ? tableConfig.renderKeyIcons('primary', primaryColorShades?.[400])\n                  : (\n                      <Tooltip title='Primary Key'>\n                        <span className='flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1'>\n                          <VpnKeyRounded sx={{ fontSize: 14, color: primaryColorShades?.[400] || 'var(--color-primary-400)' }} />\n                        </span>\n                      </Tooltip>\n                    )\n                : null}\n\n            <span className='text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap'>{column.render('Header')}</span>\n            {column.isSAP && tableConfig?.renderSapLabel?.()}\n            {column.is_live_field && (\n              <Tooltip title='Live Field'>\n                <span className='flex items-center'>\n                  <BoltOutlined sx={{ fontSize: 14, color: 'var(--color-primary-600)' }} />\n                </span>\n              </Tooltip>\n            )}\n            {!column.static && column?.sortable && onSort && (\n              <button className='flex items-center justify-center h-full'>\n                <KeyboardArrowDown\n                  sx={{ fontSize: 18, color: '#98A2B3', transform: showHeaderOptions === column.key ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!column.static) toggleHeaderOption(column.key);\n                  }}\n                />\n              </button>\n            )}\n          </div>\n          {!column.static && showHeaderOptions === column.key && (\n            <Options\n              headerIndex={headerIndex}\n              headerGroup={headerGroup}\n              column={column}\n              onSort={onSort}\n              toggleHeaderOption={toggleHeaderOption}\n              setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n              setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n              setShowHeaderOptions={setShowHeaderOptions}\n              toggleDataFilterModal={toggleDataFilterModal}\n              isColumnConfigurable={isColumnConfigurable}\n              onAddColumnClick={onAddColumnClick}\n              onEditColumnClick={onEditColumnClick}\n              onDeleteColumnClick={onDeleteColumnClick}\n              onFilter={onFilter}\n            />\n          )}\n          {showHeaderContextOptions === column.key\n            ? tableConfig?.renderColumnContextOptions?.({\n                onClose: () => setShowHeaderContextOptions?.(null),\n                children: headerContextOptions,\n              }) || (\n                <div className='absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]'>\n                  <div className='flex justify-end p-1 border-b border-neutral-100 dark:border-black-600'>\n                    <button\n                      type='button'\n                      className='text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1'\n                      onClick={() => setShowHeaderContextOptions?.(null)}\n                    >\n                      Close\n                    </button>\n                  </div>\n                  <div className='p-1'>{headerContextOptions}</div>\n                </div>\n              )\n            : null}\n          {showDataTypeIcon && <DataTypeIcon dataType={column?.dataType || 'string'} />}\n        </div>\n        {isResizable ? <Resizer column={column} onResizeComplete={handleUpdateColumnWidth!} /> : null}\n      </th>\n    </Fragment>\n  );\n};\n"],"names":["Cell","headerGroup","headerIndex","showHeaderOptions","column","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","isResizable","tableConfig","useTableConfig","primaryColorShades","lastNonStickyColumnIndex","setShowHeaderContextOptions","showHeaderContextOptions","getSumOfNextVisibleColumnWidth","handleUpdateColumnWidth","multiSelectConfig","headerContextOptions","showDataTypeIcon","useContext","TableContext","nextWidthSum","lastNonStickyColIndex","selectedColumnIds","borderClass","cn","Fragment","jsxs","CELL_DEFAULT_RIGHT_OFFSET","e","jsx","Prefix","Tooltip","VpnKeyRounded","BoltOutlined","KeyboardArrowDown","Options","DataTypeIcon","Resizer"],"mappings":"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"}

package/dist/components/data-display/infinite-table/head/cell/index.es.js

@@ -49,7 +49,7 @@ const le = ({
     {
       className: y(
         "bg-white dark:bg-black-700",
-        `${e?.sticky ? "sticky left-0 bg-neutral-50 dark:bg-black-700 right-0" : "relative"} h-10 whitespace-normal max-w-lg ${L === s ? "w-full" : ""} h-full gap-1 cursor-pointer`,
+        `${e?.sticky ? "sticky left-0 bg-neutral-50 dark:bg-black-700 right-0" : "relative"} h-row whitespace-normal max-w-lg ${L === s ? "w-full" : ""} h-full gap-1 cursor-pointer`,
         !e.static && !o?.includes(e.id) && "hover:bg-neutral-200 dark:hover:bg-black-700",
         { "bg-primary-100 dark:bg-primary-900": o?.includes(e.id) },
         W
@@ -65,7 +65,7 @@ const le = ({
         o?.includes(e.id) && (i.preventDefault(), l?.(e.key));
       },
       children: [
-        /* @__PURE__ */ a("div", { className: "flex w-full px-4 gap-2 h-10 justify-between items-center", children: [
+        /* @__PURE__ */ a("div", { className: "flex w-full px-4 gap-2 h-row justify-between items-center", children: [
           /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ r(G, { column: e, isShowSortArrowAsc: k, isShowSortArrowDesc: C }),
             e?.isCompositeKey ? t?.renderKeyIcons ? t.renderKeyIcons("composite") : /* @__PURE__ */ r(n, { title: "Composite Key", children: /* @__PURE__ */ r("span", { className: "flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1", children: /* @__PURE__ */ r(f, { sx: { fontSize: 14, color: "#BB5DFF" } }) }) }) : e?.isPrimaryKey ? t?.renderKeyIcons ? t.renderKeyIcons("primary", b?.[400]) : /* @__PURE__ */ r(n, { title: "Primary Key", children: /* @__PURE__ */ r("span", { className: "flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1", children: /* @__PURE__ */ r(f, { sx: { fontSize: 14, color: b?.[400] || "var(--color-primary-400)" } }) }) }) : null,

package/dist/components/data-display/infinite-table/head/cell/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/index.tsx"],"sourcesContent":["import { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { DataTypeIcon } from '../../../../data-display/datatype-icon/DataTypeIcon';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { BoltOutlined, KeyboardArrowDown, VpnKeyRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { Fragment, useContext } from 'react';\n\nimport { TableContext } from '../../context';\nimport { Options } from './Options';\nimport { Prefix } from './Prefix';\nimport { Resizer } from './Resizer';\nimport { CELL_DEFAULT_RIGHT_OFFSET } from '../../constants';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  sticky?: boolean;\n  static?: boolean;\n  isPrimaryKey?: boolean;\n  isCompositeKey?: boolean;\n  isSAP?: boolean;\n  is_live_field?: boolean;\n  dataType?: string;\n  visible?: boolean;\n  sortable?: boolean\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface CellProps {\n  headerGroup: { getHeaderGroupProps: () => Record<string, unknown>; headers: HeaderColumn[]; [k: string]: unknown };\n  headerIndex: number;\n  showHeaderOptions: string;\n  column: HeaderColumn;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  isResizable: boolean;\n}\n\nexport const Cell = ({\n  headerGroup,\n  headerIndex,\n  showHeaderOptions,\n  column,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  isResizable,\n}: CellProps) => {\n  const tableConfig = useTableConfig();\n  const primaryColorShades = tableConfig?.getPrimaryColor?.() || {};\n  const {\n    lastNonStickyColumnIndex,\n    setShowHeaderContextOptions,\n    showHeaderContextOptions,\n    getSumOfNextVisibleColumnWidth,\n    handleUpdateColumnWidth,\n    multiSelectConfig,\n    headerContextOptions,\n    showDataTypeIcon,\n  } = useContext(TableContext);\n\n  const nextWidthSum = column?.sticky ? getSumOfNextVisibleColumnWidth?.(headerIndex) : 0;\n  const lastNonStickyColIndex = lastNonStickyColumnIndex?.();\n  const { selectedColumnIds = [] } = multiSelectConfig || {};\n\n  const borderClass = cn({\n    'border border-primary-600 dark:border-blue-800': selectedColumnIds?.includes(column.id),\n    'border-b border-b-primary-300': column?.isPrimaryKey,\n    'border-b border-b-purple-300': column?.isCompositeKey,\n  });\n\n  return (\n    <Fragment>\n      <th\n        className={cn(\n          'bg-white dark:bg-black-700',\n          `${column?.sticky ? `sticky left-0 bg-neutral-50 dark:bg-black-700 right-0` : `relative`} h-10 whitespace-normal max-w-lg ${lastNonStickyColIndex === headerIndex ? 'w-full' : ''} h-full gap-1 cursor-pointer`,\n          !column.static && !selectedColumnIds?.includes(column.id) && 'hover:bg-neutral-200 dark:hover:bg-black-700',\n          { 'bg-primary-100 dark:bg-primary-900': selectedColumnIds?.includes(column.id) },\n          borderClass,\n        )}\n        style={{\n          minWidth: `${column.width}px`,\n          maxWidth: `${column.width}px`,\n          right: ` ${column?.sticky ? `${nextWidthSum}px` : CELL_DEFAULT_RIGHT_OFFSET}`,\n        }}\n        role='cell'\n        onClick={(e) => multiSelectConfig?.onTableColumnClick?.(e.nativeEvent, column.id)}\n        onContextMenu={(e) => {\n          if (selectedColumnIds?.includes(column.id)) {\n            e.preventDefault();\n            setShowHeaderContextOptions?.(column.key);\n          }\n        }}\n      >\n        <div className='flex w-full px-4 gap-2 h-10 justify-between items-center'>\n          <div className='flex items-center gap-2'>\n            <Prefix {...{ column, isShowSortArrowAsc, isShowSortArrowDesc }} />\n\n            {column?.isCompositeKey\n              ? tableConfig?.renderKeyIcons\n                ? tableConfig.renderKeyIcons('composite')\n                : (\n                    <Tooltip title='Composite Key'>\n                      <span className='flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1'>\n                        <VpnKeyRounded sx={{ fontSize: 14, color: '#BB5DFF' }} />\n                      </span>\n                    </Tooltip>\n                  )\n              : column?.isPrimaryKey\n                ? tableConfig?.renderKeyIcons\n                  ? tableConfig.renderKeyIcons('primary', primaryColorShades?.[400])\n                  : (\n                      <Tooltip title='Primary Key'>\n                        <span className='flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1'>\n                          <VpnKeyRounded sx={{ fontSize: 14, color: primaryColorShades?.[400] || 'var(--color-primary-400)' }} />\n                        </span>\n                      </Tooltip>\n                    )\n                : null}\n\n            <span className='text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap'>{column.render('Header')}</span>\n            {column.isSAP && tableConfig?.renderSapLabel?.()}\n            {column.is_live_field && (\n              <Tooltip title='Live Field'>\n                <span className='flex items-center'>\n                  <BoltOutlined sx={{ fontSize: 14, color: 'var(--color-primary-600)' }} />\n                </span>\n              </Tooltip>\n            )}\n            {!column.static && column?.sortable && onSort && (\n              <button className='flex items-center justify-center h-full'>\n                <KeyboardArrowDown\n                  sx={{ fontSize: 18, color: '#98A2B3', transform: showHeaderOptions === column.key ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!column.static) toggleHeaderOption(column.key);\n                  }}\n                />\n              </button>\n            )}\n          </div>\n          {!column.static && showHeaderOptions === column.key && (\n            <Options\n              headerIndex={headerIndex}\n              headerGroup={headerGroup}\n              column={column}\n              onSort={onSort}\n              toggleHeaderOption={toggleHeaderOption}\n              setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n              setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n              setShowHeaderOptions={setShowHeaderOptions}\n              toggleDataFilterModal={toggleDataFilterModal}\n              isColumnConfigurable={isColumnConfigurable}\n              onAddColumnClick={onAddColumnClick}\n              onEditColumnClick={onEditColumnClick}\n              onDeleteColumnClick={onDeleteColumnClick}\n              onFilter={onFilter}\n            />\n          )}\n          {showHeaderContextOptions === column.key\n            ? tableConfig?.renderColumnContextOptions?.({\n                onClose: () => setShowHeaderContextOptions?.(null),\n                children: headerContextOptions,\n              }) || (\n                <div className='absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]'>\n                  <div className='flex justify-end p-1 border-b border-neutral-100 dark:border-black-600'>\n                    <button\n                      type='button'\n                      className='text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1'\n                      onClick={() => setShowHeaderContextOptions?.(null)}\n                    >\n                      Close\n                    </button>\n                  </div>\n                  <div className='p-1'>{headerContextOptions}</div>\n                </div>\n              )\n            : null}\n          {showDataTypeIcon && <DataTypeIcon dataType={column?.dataType || 'string'} />}\n        </div>\n        {isResizable ? <Resizer column={column} onResizeComplete={handleUpdateColumnWidth!} /> : null}\n      </th>\n    </Fragment>\n  );\n};\n"],"names":["Cell","headerGroup","headerIndex","showHeaderOptions","column","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","isResizable","tableConfig","useTableConfig","primaryColorShades","lastNonStickyColumnIndex","setShowHeaderContextOptions","showHeaderContextOptions","getSumOfNextVisibleColumnWidth","handleUpdateColumnWidth","multiSelectConfig","headerContextOptions","showDataTypeIcon","useContext","TableContext","nextWidthSum","lastNonStickyColIndex","selectedColumnIds","borderClass","cn","Fragment","jsxs","CELL_DEFAULT_RIGHT_OFFSET","e","jsx","Prefix","Tooltip","VpnKeyRounded","BoltOutlined","KeyboardArrowDown","Options","DataTypeIcon","Resizer"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/data-display/infinite-table/head/cell/index.tsx"],"sourcesContent":["import { useTableConfig } from '../../../../../providers/design-system-provider/hooks';\nimport { DataTypeIcon } from '../../../../data-display/datatype-icon/DataTypeIcon';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport { BoltOutlined, KeyboardArrowDown, VpnKeyRounded } from '@mui/icons-material';\nimport cn from 'classnames';\nimport React, { Fragment, useContext } from 'react';\n\nimport { TableContext } from '../../context';\nimport { Options } from './Options';\nimport { Prefix } from './Prefix';\nimport { Resizer } from './Resizer';\nimport { CELL_DEFAULT_RIGHT_OFFSET } from '../../constants';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  sticky?: boolean;\n  static?: boolean;\n  isPrimaryKey?: boolean;\n  isCompositeKey?: boolean;\n  isSAP?: boolean;\n  is_live_field?: boolean;\n  dataType?: string;\n  visible?: boolean;\n  sortable?: boolean\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface CellProps {\n  headerGroup: { getHeaderGroupProps: () => Record<string, unknown>; headers: HeaderColumn[]; [k: string]: unknown };\n  headerIndex: number;\n  showHeaderOptions: string;\n  column: HeaderColumn;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  setShowHeaderOptions: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  isResizable: boolean;\n}\n\nexport const Cell = ({\n  headerGroup,\n  headerIndex,\n  showHeaderOptions,\n  column,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  setShowHeaderOptions,\n  toggleDataFilterModal,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  isResizable,\n}: CellProps) => {\n  const tableConfig = useTableConfig();\n  const primaryColorShades = tableConfig?.getPrimaryColor?.() || {};\n  const {\n    lastNonStickyColumnIndex,\n    setShowHeaderContextOptions,\n    showHeaderContextOptions,\n    getSumOfNextVisibleColumnWidth,\n    handleUpdateColumnWidth,\n    multiSelectConfig,\n    headerContextOptions,\n    showDataTypeIcon,\n  } = useContext(TableContext);\n\n  const nextWidthSum = column?.sticky ? getSumOfNextVisibleColumnWidth?.(headerIndex) : 0;\n  const lastNonStickyColIndex = lastNonStickyColumnIndex?.();\n  const { selectedColumnIds = [] } = multiSelectConfig || {};\n\n  const borderClass = cn({\n    'border border-primary-600 dark:border-blue-800': selectedColumnIds?.includes(column.id),\n    'border-b border-b-primary-300': column?.isPrimaryKey,\n    'border-b border-b-purple-300': column?.isCompositeKey,\n  });\n\n  return (\n    <Fragment>\n      <th\n        className={cn(\n          'bg-white dark:bg-black-700',\n          `${column?.sticky ? `sticky left-0 bg-neutral-50 dark:bg-black-700 right-0` : `relative`} h-row whitespace-normal max-w-lg ${lastNonStickyColIndex === headerIndex ? 'w-full' : ''} h-full gap-1 cursor-pointer`,\n          !column.static && !selectedColumnIds?.includes(column.id) && 'hover:bg-neutral-200 dark:hover:bg-black-700',\n          { 'bg-primary-100 dark:bg-primary-900': selectedColumnIds?.includes(column.id) },\n          borderClass,\n        )}\n        style={{\n          minWidth: `${column.width}px`,\n          maxWidth: `${column.width}px`,\n          right: ` ${column?.sticky ? `${nextWidthSum}px` : CELL_DEFAULT_RIGHT_OFFSET}`,\n        }}\n        role='cell'\n        onClick={(e) => multiSelectConfig?.onTableColumnClick?.(e.nativeEvent, column.id)}\n        onContextMenu={(e) => {\n          if (selectedColumnIds?.includes(column.id)) {\n            e.preventDefault();\n            setShowHeaderContextOptions?.(column.key);\n          }\n        }}\n      >\n        <div className='flex w-full px-4 gap-2 h-row justify-between items-center'>\n          <div className='flex items-center gap-2'>\n            <Prefix {...{ column, isShowSortArrowAsc, isShowSortArrowDesc }} />\n\n            {column?.isCompositeKey\n              ? tableConfig?.renderKeyIcons\n                ? tableConfig.renderKeyIcons('composite')\n                : (\n                    <Tooltip title='Composite Key'>\n                      <span className='flex items-center hover:bg-purple-50 dark:hover:bg-purple-950 rounded-full p-1'>\n                        <VpnKeyRounded sx={{ fontSize: 14, color: '#BB5DFF' }} />\n                      </span>\n                    </Tooltip>\n                  )\n              : column?.isPrimaryKey\n                ? tableConfig?.renderKeyIcons\n                  ? tableConfig.renderKeyIcons('primary', primaryColorShades?.[400])\n                  : (\n                      <Tooltip title='Primary Key'>\n                        <span className='flex items-center hover:bg-primary-50 dark:hover:bg-dark-blue rounded-full p-1'>\n                          <VpnKeyRounded sx={{ fontSize: 14, color: primaryColorShades?.[400] || 'var(--color-primary-400)' }} />\n                        </span>\n                      </Tooltip>\n                    )\n                : null}\n\n            <span className='text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap'>{column.render('Header')}</span>\n            {column.isSAP && tableConfig?.renderSapLabel?.()}\n            {column.is_live_field && (\n              <Tooltip title='Live Field'>\n                <span className='flex items-center'>\n                  <BoltOutlined sx={{ fontSize: 14, color: 'var(--color-primary-600)' }} />\n                </span>\n              </Tooltip>\n            )}\n            {!column.static && column?.sortable && onSort && (\n              <button className='flex items-center justify-center h-full'>\n                <KeyboardArrowDown\n                  sx={{ fontSize: 18, color: '#98A2B3', transform: showHeaderOptions === column.key ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    if (!column.static) toggleHeaderOption(column.key);\n                  }}\n                />\n              </button>\n            )}\n          </div>\n          {!column.static && showHeaderOptions === column.key && (\n            <Options\n              headerIndex={headerIndex}\n              headerGroup={headerGroup}\n              column={column}\n              onSort={onSort}\n              toggleHeaderOption={toggleHeaderOption}\n              setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n              setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n              setShowHeaderOptions={setShowHeaderOptions}\n              toggleDataFilterModal={toggleDataFilterModal}\n              isColumnConfigurable={isColumnConfigurable}\n              onAddColumnClick={onAddColumnClick}\n              onEditColumnClick={onEditColumnClick}\n              onDeleteColumnClick={onDeleteColumnClick}\n              onFilter={onFilter}\n            />\n          )}\n          {showHeaderContextOptions === column.key\n            ? tableConfig?.renderColumnContextOptions?.({\n                onClose: () => setShowHeaderContextOptions?.(null),\n                children: headerContextOptions,\n              }) || (\n                <div className='absolute top-full right-0 mt-1 z-50 bg-white dark:bg-black-700 border border-neutral-200 dark:border-black-600 rounded-md shadow-lg min-w-[180px]'>\n                  <div className='flex justify-end p-1 border-b border-neutral-100 dark:border-black-600'>\n                    <button\n                      type='button'\n                      className='text-xs text-neutral-500 hover:text-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-100 px-1'\n                      onClick={() => setShowHeaderContextOptions?.(null)}\n                    >\n                      Close\n                    </button>\n                  </div>\n                  <div className='p-1'>{headerContextOptions}</div>\n                </div>\n              )\n            : null}\n          {showDataTypeIcon && <DataTypeIcon dataType={column?.dataType || 'string'} />}\n        </div>\n        {isResizable ? <Resizer column={column} onResizeComplete={handleUpdateColumnWidth!} /> : null}\n      </th>\n    </Fragment>\n  );\n};\n"],"names":["Cell","headerGroup","headerIndex","showHeaderOptions","column","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","setShowHeaderOptions","toggleDataFilterModal","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","isResizable","tableConfig","useTableConfig","primaryColorShades","lastNonStickyColumnIndex","setShowHeaderContextOptions","showHeaderContextOptions","getSumOfNextVisibleColumnWidth","handleUpdateColumnWidth","multiSelectConfig","headerContextOptions","showDataTypeIcon","useContext","TableContext","nextWidthSum","lastNonStickyColIndex","selectedColumnIds","borderClass","cn","Fragment","jsxs","CELL_DEFAULT_RIGHT_OFFSET","e","jsx","Prefix","Tooltip","VpnKeyRounded","BoltOutlined","KeyboardArrowDown","Options","DataTypeIcon","Resizer"],"mappings":"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"}

package/dist/components/data-display/infinite-table/head/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),R=require("react"),S=require("./CheckAll.cjs.js"),D=require("./cell/index.cjs.js"),M=({headerGroups:c,isCheckbox:r,checkboxConfig:x,isAllChecked:d,showHeaderOptions:h,setShowHeaderOptions:b,isShowSortArrowAsc:m,isShowSortArrowDesc:n,onSort:k,onFilter:f,toggleHeaderOption:j,setIsShowSortArrowAsc:u,setIsShowSortArrowDesc:g,toggleDataFilterModal:p,rowOptions:v,isColumnConfigurable:N,onAddColumnClick:w,onEditColumnClick:o,onDeleteColumnClick:y,tableActions:t,isResizable:z,isLoading:q,rowAdditionalActions:s,showPendingEditsColumn:i})=>e.jsx("thead",{className:"text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b",children:c.map((a,H)=>R.createElement("tr",{...a.getHeaderGroupProps(),key:H,className:"h-10"},i&&e.jsx("th",{className:"sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]",children:e.jsx("div",{className:"w-full h-10"})}),r&&e.jsx("div",{className:`sticky ${i?"left-[28px]":"left-0"} right-0 z-20 flex items-center bg-white dark:bg-black-700`,children:e.jsx("th",{className:"px-2.5 min-w-[40px]",children:e.jsx(S.CheckAll,{isDisabled:q,checkboxConfig:x,isAllChecked:d})})}),t&&e.jsxs("th",{className:"px-2.5 relative",children:[e.jsx("div",{className:"absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0"}),e.jsx("div",{children:t()})]}),a.headers.filter(l=>l?.visible!==!1).map((l,C)=>e.jsx(D.Cell,{headerGroup:a,headerIndex:C,showHeaderOptions:h,column:l,isShowSortArrowAsc:m,isShowSortArrowDesc:n,onSort:k,onFilter:f,toggleHeaderOption:j,setIsShowSortArrowAsc:u,setIsShowSortArrowDesc:g,setShowHeaderOptions:b,toggleDataFilterModal:p,isColumnConfigurable:N,onAddColumnClick:w,onEditColumnClick:o,onDeleteColumnClick:y,isResizable:z},l.id)),(v||s)&&e.jsx("th",{className:"h-10 whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700",children:e.jsxs("div",{className:"flex",children:[s&&e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"absolute w-full h-full top-0 left-0"}),e.jsx("div",{children:s()})]}),e.jsx("div",{className:"w-12"})]})})))});exports.Head=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),R=require("react"),S=require("./CheckAll.cjs.js"),D=require("./cell/index.cjs.js"),M=({headerGroups:r,isCheckbox:c,checkboxConfig:x,isAllChecked:d,showHeaderOptions:h,setShowHeaderOptions:b,isShowSortArrowAsc:m,isShowSortArrowDesc:n,onSort:k,onFilter:f,toggleHeaderOption:j,setIsShowSortArrowAsc:u,setIsShowSortArrowDesc:g,toggleDataFilterModal:p,rowOptions:w,isColumnConfigurable:o,onAddColumnClick:v,onEditColumnClick:N,onDeleteColumnClick:y,tableActions:t,isResizable:z,isLoading:q,rowAdditionalActions:s,showPendingEditsColumn:i})=>e.jsx("thead",{className:"text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b",children:r.map((a,H)=>R.createElement("tr",{...a.getHeaderGroupProps(),key:H,className:"h-row"},i&&e.jsx("th",{className:"sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]",children:e.jsx("div",{className:"w-full h-row"})}),c&&e.jsx("div",{className:`sticky ${i?"left-[28px]":"left-0"} right-0 z-20 flex items-center bg-white dark:bg-black-700`,children:e.jsx("th",{className:"px-2.5 min-w-[40px]",children:e.jsx(S.CheckAll,{isDisabled:q,checkboxConfig:x,isAllChecked:d})})}),t&&e.jsxs("th",{className:"px-2.5 relative",children:[e.jsx("div",{className:"absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0"}),e.jsx("div",{children:t()})]}),a.headers.filter(l=>l?.visible!==!1).map((l,C)=>e.jsx(D.Cell,{headerGroup:a,headerIndex:C,showHeaderOptions:h,column:l,isShowSortArrowAsc:m,isShowSortArrowDesc:n,onSort:k,onFilter:f,toggleHeaderOption:j,setIsShowSortArrowAsc:u,setIsShowSortArrowDesc:g,setShowHeaderOptions:b,toggleDataFilterModal:p,isColumnConfigurable:o,onAddColumnClick:v,onEditColumnClick:N,onDeleteColumnClick:y,isResizable:z},l.id)),(w||s)&&e.jsx("th",{className:"h-row whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700",children:e.jsxs("div",{className:"flex",children:[s&&e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"absolute w-full h-full top-0 left-0"}),e.jsx("div",{children:s()})]}),e.jsx("div",{className:"w-12"})]})})))});exports.Head=M;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/data-display/infinite-table/head/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/data-display/infinite-table/head/index.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckAll } from './CheckAll';\nimport { Cell } from './cell';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  visible?: boolean;\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface HeaderGroup {\n  getHeaderGroupProps: () => Record<string, unknown>;\n  headers: HeaderColumn[];\n  [key: string]: unknown;\n}\n\ntype TProps = {\n  headerGroups: HeaderGroup[];\n  isCheckbox: boolean;\n  checkboxConfig: Record<string, unknown> | null;\n  isAllChecked: boolean;\n  showHeaderOptions: string;\n  setShowHeaderOptions: (value: string | null) => void;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  rowOptions: unknown[];\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  tableActions: (() => React.ReactNode) | null;\n  isResizable: boolean;\n  isLoading?: boolean;\n  rowAdditionalActions: (() => React.ReactNode) | null;\n  showPendingEditsColumn?: boolean;\n};\n\nexport const Head = ({\n  headerGroups,\n  isCheckbox,\n  checkboxConfig,\n  isAllChecked,\n  showHeaderOptions,\n  setShowHeaderOptions,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  toggleDataFilterModal,\n  rowOptions,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  tableActions,\n  isResizable,\n  isLoading,\n  rowAdditionalActions,\n  showPendingEditsColumn,\n}: TProps) => {\n  return (\n    <thead className='text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b'>\n      {headerGroups.map((headerGroup, index) => (\n        <tr {...headerGroup.getHeaderGroupProps()} key={index} className='h-10'>\n          {showPendingEditsColumn && (\n            <th className='sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]'>\n              <div className='w-full h-10' />\n            </th>\n          )}\n          {isCheckbox && (\n            <div className={`sticky ${showPendingEditsColumn ? 'left-[28px]' : 'left-0'} right-0 z-20 flex items-center bg-white dark:bg-black-700`}>\n              <th className='px-2.5 min-w-[40px]'>\n                <CheckAll isDisabled={isLoading} checkboxConfig={checkboxConfig as unknown as { onAllItemsCheck?: (event: { target: { checked: boolean } }) => void; checkedIds: string[] }} isAllChecked={isAllChecked} />\n              </th>\n            </div>\n          )}\n          {tableActions && (\n            <th className='px-2.5 relative'>\n              <div className='absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0' />\n              <div>{tableActions()}</div>\n            </th>\n          )}\n          {headerGroup.headers\n            .filter((header: HeaderColumn) => header?.visible !== false)\n            .map((column: HeaderColumn, headerIndex: number) => (\n              <Cell\n                key={column.id}\n                headerGroup={headerGroup}\n                headerIndex={headerIndex}\n                showHeaderOptions={showHeaderOptions}\n                column={column}\n                isShowSortArrowAsc={isShowSortArrowAsc}\n                isShowSortArrowDesc={isShowSortArrowDesc}\n                onSort={onSort}\n                onFilter={onFilter}\n                toggleHeaderOption={toggleHeaderOption}\n                setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n                setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n                setShowHeaderOptions={setShowHeaderOptions}\n                toggleDataFilterModal={toggleDataFilterModal}\n                isColumnConfigurable={isColumnConfigurable}\n                onAddColumnClick={onAddColumnClick}\n                onEditColumnClick={onEditColumnClick}\n                onDeleteColumnClick={onDeleteColumnClick}\n                isResizable={isResizable}\n              />\n            ))}\n          {(rowOptions || rowAdditionalActions) && (\n            <th className='h-10 whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700'>\n              <div className='flex'>\n                {rowAdditionalActions && (\n                  <div className='relative'>\n                    <div className='absolute w-full h-full top-0 left-0' />\n                    <div>{rowAdditionalActions()}</div>\n                  </div>\n                )}\n                <div className='w-12' />\n              </div>\n            </th>\n          )}\n        </tr>\n      ))}\n    </thead>\n  );\n};\n"],"names":["Head","headerGroups","isCheckbox","checkboxConfig","isAllChecked","showHeaderOptions","setShowHeaderOptions","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","toggleDataFilterModal","rowOptions","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","tableActions","isResizable","isLoading","rowAdditionalActions","showPendingEditsColumn","jsx","headerGroup","index","createElement","CheckAll","jsxs","header","column","headerIndex","Cell"],"mappings":"wMA+CaA,EAAO,CAAC,CACnB,aAAAC,EACA,WAAAC,EACA,eAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,sBAAAC,EACA,WAAAC,EACA,qBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,IAEIC,EAAAA,IAAC,QAAA,CAAM,UAAU,yIACd,SAAAxB,EAAa,IAAI,CAACyB,EAAaC,IAC9BC,EAAAA,cAAC,KAAA,CAAI,GAAGF,EAAY,sBAAuB,IAAKC,EAAO,UAAU,MAAA,EAC9DH,GACCC,EAAAA,IAAC,KAAA,CAAG,UAAU,sEACZ,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,aAAA,CAAc,EAC/B,EAEDvB,GACCuB,EAAAA,IAAC,MAAA,CAAI,UAAW,UAAUD,EAAyB,cAAgB,QAAQ,6DACzE,SAAAC,EAAAA,IAAC,KAAA,CAAG,UAAU,sBACZ,eAACI,EAAAA,SAAA,CAAS,WAAYP,EAAW,eAAAnB,EAA4I,aAAAC,CAAA,CAA4B,CAAA,CAC3M,CAAA,CACF,EAEDgB,GACCU,EAAAA,KAAC,KAAA,CAAG,UAAU,kBACZ,SAAA,CAAAL,EAAAA,IAAC,MAAA,CAAI,UAAU,gEAAA,CAAiE,EAChFA,EAAAA,IAAC,MAAA,CAAK,SAAAL,EAAA,CAAa,CAAE,CAAA,CAAA,CACvB,EAEDM,EAAY,QACV,OAAQK,GAAyBA,GAAQ,UAAY,EAAK,EAC1D,IAAI,CAACC,EAAsBC,IAC1BR,EAAAA,IAACS,EAAAA,KAAA,CAEC,YAAAR,EACA,YAAAO,EACA,kBAAA5B,EACA,OAAA2B,EACA,mBAAAzB,EACA,oBAAAC,EACA,OAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,qBAAAP,EACA,sBAAAQ,EACA,qBAAAE,EACA,iBAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,YAAAE,CAAA,EAlBKW,EAAO,EAAA,CAoBf,GACDjB,GAAcQ,IACdE,EAAAA,IAAC,KAAA,CAAG,UAAU,sFACZ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAU,OACZ,SAAA,CAAAP,GACCO,EAAAA,KAAC,MAAA,CAAI,UAAU,WACb,SAAA,CAAAL,EAAAA,IAAC,MAAA,CAAI,UAAU,qCAAA,CAAsC,EACrDA,EAAAA,IAAC,MAAA,CAAK,SAAAF,EAAA,CAAqB,CAAE,CAAA,EAC/B,EAEFE,EAAAA,IAAC,MAAA,CAAI,UAAU,MAAA,CAAO,CAAA,EACxB,CAAA,CACF,CAEJ,CACD,EACH"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../../src/components/data-display/infinite-table/head/index.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckAll } from './CheckAll';\nimport { Cell } from './cell';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  visible?: boolean;\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface HeaderGroup {\n  getHeaderGroupProps: () => Record<string, unknown>;\n  headers: HeaderColumn[];\n  [key: string]: unknown;\n}\n\ntype TProps = {\n  headerGroups: HeaderGroup[];\n  isCheckbox: boolean;\n  checkboxConfig: Record<string, unknown> | null;\n  isAllChecked: boolean;\n  showHeaderOptions: string;\n  setShowHeaderOptions: (value: string | null) => void;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  rowOptions: unknown[];\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  tableActions: (() => React.ReactNode) | null;\n  isResizable: boolean;\n  isLoading?: boolean;\n  rowAdditionalActions: (() => React.ReactNode) | null;\n  showPendingEditsColumn?: boolean;\n};\n\nexport const Head = ({\n  headerGroups,\n  isCheckbox,\n  checkboxConfig,\n  isAllChecked,\n  showHeaderOptions,\n  setShowHeaderOptions,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  toggleDataFilterModal,\n  rowOptions,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  tableActions,\n  isResizable,\n  isLoading,\n  rowAdditionalActions,\n  showPendingEditsColumn,\n}: TProps) => {\n  return (\n    <thead className='text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b'>\n      {headerGroups.map((headerGroup, index) => (\n        <tr {...headerGroup.getHeaderGroupProps()} key={index} className='h-row'>\n          {showPendingEditsColumn && (\n            <th className='sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]'>\n              <div className='w-full h-row' />\n            </th>\n          )}\n          {isCheckbox && (\n            <div className={`sticky ${showPendingEditsColumn ? 'left-[28px]' : 'left-0'} right-0 z-20 flex items-center bg-white dark:bg-black-700`}>\n              <th className='px-2.5 min-w-[40px]'>\n                <CheckAll isDisabled={isLoading} checkboxConfig={checkboxConfig as unknown as { onAllItemsCheck?: (event: { target: { checked: boolean } }) => void; checkedIds: string[] }} isAllChecked={isAllChecked} />\n              </th>\n            </div>\n          )}\n          {tableActions && (\n            <th className='px-2.5 relative'>\n              <div className='absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0' />\n              <div>{tableActions()}</div>\n            </th>\n          )}\n          {headerGroup.headers\n            .filter((header: HeaderColumn) => header?.visible !== false)\n            .map((column: HeaderColumn, headerIndex: number) => (\n              <Cell\n                key={column.id}\n                headerGroup={headerGroup}\n                headerIndex={headerIndex}\n                showHeaderOptions={showHeaderOptions}\n                column={column}\n                isShowSortArrowAsc={isShowSortArrowAsc}\n                isShowSortArrowDesc={isShowSortArrowDesc}\n                onSort={onSort}\n                onFilter={onFilter}\n                toggleHeaderOption={toggleHeaderOption}\n                setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n                setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n                setShowHeaderOptions={setShowHeaderOptions}\n                toggleDataFilterModal={toggleDataFilterModal}\n                isColumnConfigurable={isColumnConfigurable}\n                onAddColumnClick={onAddColumnClick}\n                onEditColumnClick={onEditColumnClick}\n                onDeleteColumnClick={onDeleteColumnClick}\n                isResizable={isResizable}\n              />\n            ))}\n          {(rowOptions || rowAdditionalActions) && (\n            <th className='h-row whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700'>\n              <div className='flex'>\n                {rowAdditionalActions && (\n                  <div className='relative'>\n                    <div className='absolute w-full h-full top-0 left-0' />\n                    <div>{rowAdditionalActions()}</div>\n                  </div>\n                )}\n                <div className='w-12' />\n              </div>\n            </th>\n          )}\n        </tr>\n      ))}\n    </thead>\n  );\n};\n"],"names":["Head","headerGroups","isCheckbox","checkboxConfig","isAllChecked","showHeaderOptions","setShowHeaderOptions","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","toggleDataFilterModal","rowOptions","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","tableActions","isResizable","isLoading","rowAdditionalActions","showPendingEditsColumn","jsx","headerGroup","index","createElement","CheckAll","jsxs","header","column","headerIndex","Cell"],"mappings":"wMA+CaA,EAAO,CAAC,CACnB,aAAAC,EACA,WAAAC,EACA,eAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,sBAAAC,EACA,WAAAC,EACA,qBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,IAEIC,EAAAA,IAAC,QAAA,CAAM,UAAU,yIACd,SAAAxB,EAAa,IAAI,CAACyB,EAAaC,IAC9BC,EAAAA,cAAC,KAAA,CAAI,GAAGF,EAAY,sBAAuB,IAAKC,EAAO,UAAU,OAAA,EAC9DH,GACCC,EAAAA,IAAC,KAAA,CAAG,UAAU,sEACZ,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAA,CAAe,EAChC,EAEDvB,GACCuB,EAAAA,IAAC,MAAA,CAAI,UAAW,UAAUD,EAAyB,cAAgB,QAAQ,6DACzE,SAAAC,EAAAA,IAAC,KAAA,CAAG,UAAU,sBACZ,eAACI,EAAAA,SAAA,CAAS,WAAYP,EAAW,eAAAnB,EAA4I,aAAAC,CAAA,CAA4B,CAAA,CAC3M,CAAA,CACF,EAEDgB,GACCU,EAAAA,KAAC,KAAA,CAAG,UAAU,kBACZ,SAAA,CAAAL,EAAAA,IAAC,MAAA,CAAI,UAAU,gEAAA,CAAiE,EAChFA,EAAAA,IAAC,MAAA,CAAK,SAAAL,EAAA,CAAa,CAAE,CAAA,CAAA,CACvB,EAEDM,EAAY,QACV,OAAQK,GAAyBA,GAAQ,UAAY,EAAK,EAC1D,IAAI,CAACC,EAAsBC,IAC1BR,EAAAA,IAACS,EAAAA,KAAA,CAEC,YAAAR,EACA,YAAAO,EACA,kBAAA5B,EACA,OAAA2B,EACA,mBAAAzB,EACA,oBAAAC,EACA,OAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,qBAAAP,EACA,sBAAAQ,EACA,qBAAAE,EACA,iBAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,YAAAE,CAAA,EAlBKW,EAAO,EAAA,CAoBf,GACDjB,GAAcQ,IACdE,EAAAA,IAAC,KAAA,CAAG,UAAU,uFACZ,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAU,OACZ,SAAA,CAAAP,GACCO,EAAAA,KAAC,MAAA,CAAI,UAAU,WACb,SAAA,CAAAL,EAAAA,IAAC,MAAA,CAAI,UAAU,qCAAA,CAAsC,EACrDA,EAAAA,IAAC,MAAA,CAAK,SAAAF,EAAA,CAAqB,CAAE,CAAA,EAC/B,EAEFE,EAAAA,IAAC,MAAA,CAAI,UAAU,MAAA,CAAO,CAAA,EACxB,CAAA,CACF,CAEJ,CACD,EACH"}

package/dist/components/data-display/infinite-table/head/index.es.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { createElement as q } from "react";
 import { CheckAll as B } from "./CheckAll.es.js";
 import { Cell as E } from "./cell/index.es.js";
@@ -11,25 +11,25 @@ const L = ({
   setShowHeaderOptions: f,
   isShowSortArrowAsc: k,
   isShowSortArrowDesc: p,
-  onSort: x,
-  onFilter: n,
-  toggleHeaderOption: N,
-  setIsShowSortArrowAsc: g,
-  setIsShowSortArrowDesc: v,
-  toggleDataFilterModal: o,
-  rowOptions: w,
+  onSort: o,
+  onFilter: w,
+  toggleHeaderOption: x,
+  setIsShowSortArrowAsc: n,
+  setIsShowSortArrowDesc: N,
+  toggleDataFilterModal: g,
+  rowOptions: v,
   isColumnConfigurable: u,
   onAddColumnClick: y,
   onEditColumnClick: z,
   onDeleteColumnClick: j,
-  tableActions: s,
+  tableActions: i,
   isResizable: H,
   isLoading: C,
   rowAdditionalActions: a,
-  showPendingEditsColumn: r
-}) => /* @__PURE__ */ e("thead", { className: "text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b", children: c.map((t, D) => /* @__PURE__ */ q("tr", { ...t.getHeaderGroupProps(), key: D, className: "h-10" }, r && /* @__PURE__ */ e("th", { className: "sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]", children: /* @__PURE__ */ e("div", { className: "w-full h-10" }) }), m && /* @__PURE__ */ e("div", { className: `sticky ${r ? "left-[28px]" : "left-0"} right-0 z-20 flex items-center bg-white dark:bg-black-700`, children: /* @__PURE__ */ e("th", { className: "px-2.5 min-w-[40px]", children: /* @__PURE__ */ e(B, { isDisabled: C, checkboxConfig: h, isAllChecked: d }) }) }), s && /* @__PURE__ */ i("th", { className: "px-2.5 relative", children: [
+  showPendingEditsColumn: s
+}) => /* @__PURE__ */ e("thead", { className: "text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b", children: c.map((t, D) => /* @__PURE__ */ q("tr", { ...t.getHeaderGroupProps(), key: D, className: "h-row" }, s && /* @__PURE__ */ e("th", { className: "sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]", children: /* @__PURE__ */ e("div", { className: "w-full h-row" }) }), m && /* @__PURE__ */ e("div", { className: `sticky ${s ? "left-[28px]" : "left-0"} right-0 z-20 flex items-center bg-white dark:bg-black-700`, children: /* @__PURE__ */ e("th", { className: "px-2.5 min-w-[40px]", children: /* @__PURE__ */ e(B, { isDisabled: C, checkboxConfig: h, isAllChecked: d }) }) }), i && /* @__PURE__ */ r("th", { className: "px-2.5 relative", children: [
   /* @__PURE__ */ e("div", { className: "absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0" }),
-  /* @__PURE__ */ e("div", { children: s() })
+  /* @__PURE__ */ e("div", { children: i() })
 ] }), t.headers.filter((l) => l?.visible !== !1).map((l, $) => /* @__PURE__ */ e(
   E,
   {
@@ -39,13 +39,13 @@ const L = ({
     column: l,
     isShowSortArrowAsc: k,
     isShowSortArrowDesc: p,
-    onSort: x,
-    onFilter: n,
-    toggleHeaderOption: N,
-    setIsShowSortArrowAsc: g,
-    setIsShowSortArrowDesc: v,
+    onSort: o,
+    onFilter: w,
+    toggleHeaderOption: x,
+    setIsShowSortArrowAsc: n,
+    setIsShowSortArrowDesc: N,
     setShowHeaderOptions: f,
-    toggleDataFilterModal: o,
+    toggleDataFilterModal: g,
     isColumnConfigurable: u,
     onAddColumnClick: y,
     onEditColumnClick: z,
@@ -53,8 +53,8 @@ const L = ({
     isResizable: H
   },
   l.id
-)), (w || a) && /* @__PURE__ */ e("th", { className: "h-10 whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700", children: /* @__PURE__ */ i("div", { className: "flex", children: [
-  a && /* @__PURE__ */ i("div", { className: "relative", children: [
+)), (v || a) && /* @__PURE__ */ e("th", { className: "h-row whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700", children: /* @__PURE__ */ r("div", { className: "flex", children: [
+  a && /* @__PURE__ */ r("div", { className: "relative", children: [
     /* @__PURE__ */ e("div", { className: "absolute w-full h-full top-0 left-0" }),
     /* @__PURE__ */ e("div", { children: a() })
   ] }),

package/dist/components/data-display/infinite-table/head/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../../src/components/data-display/infinite-table/head/index.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckAll } from './CheckAll';\nimport { Cell } from './cell';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  visible?: boolean;\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface HeaderGroup {\n  getHeaderGroupProps: () => Record<string, unknown>;\n  headers: HeaderColumn[];\n  [key: string]: unknown;\n}\n\ntype TProps = {\n  headerGroups: HeaderGroup[];\n  isCheckbox: boolean;\n  checkboxConfig: Record<string, unknown> | null;\n  isAllChecked: boolean;\n  showHeaderOptions: string;\n  setShowHeaderOptions: (value: string | null) => void;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  rowOptions: unknown[];\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  tableActions: (() => React.ReactNode) | null;\n  isResizable: boolean;\n  isLoading?: boolean;\n  rowAdditionalActions: (() => React.ReactNode) | null;\n  showPendingEditsColumn?: boolean;\n};\n\nexport const Head = ({\n  headerGroups,\n  isCheckbox,\n  checkboxConfig,\n  isAllChecked,\n  showHeaderOptions,\n  setShowHeaderOptions,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  toggleDataFilterModal,\n  rowOptions,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  tableActions,\n  isResizable,\n  isLoading,\n  rowAdditionalActions,\n  showPendingEditsColumn,\n}: TProps) => {\n  return (\n    <thead className='text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b'>\n      {headerGroups.map((headerGroup, index) => (\n        <tr {...headerGroup.getHeaderGroupProps()} key={index} className='h-10'>\n          {showPendingEditsColumn && (\n            <th className='sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]'>\n              <div className='w-full h-10' />\n            </th>\n          )}\n          {isCheckbox && (\n            <div className={`sticky ${showPendingEditsColumn ? 'left-[28px]' : 'left-0'} right-0 z-20 flex items-center bg-white dark:bg-black-700`}>\n              <th className='px-2.5 min-w-[40px]'>\n                <CheckAll isDisabled={isLoading} checkboxConfig={checkboxConfig as unknown as { onAllItemsCheck?: (event: { target: { checked: boolean } }) => void; checkedIds: string[] }} isAllChecked={isAllChecked} />\n              </th>\n            </div>\n          )}\n          {tableActions && (\n            <th className='px-2.5 relative'>\n              <div className='absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0' />\n              <div>{tableActions()}</div>\n            </th>\n          )}\n          {headerGroup.headers\n            .filter((header: HeaderColumn) => header?.visible !== false)\n            .map((column: HeaderColumn, headerIndex: number) => (\n              <Cell\n                key={column.id}\n                headerGroup={headerGroup}\n                headerIndex={headerIndex}\n                showHeaderOptions={showHeaderOptions}\n                column={column}\n                isShowSortArrowAsc={isShowSortArrowAsc}\n                isShowSortArrowDesc={isShowSortArrowDesc}\n                onSort={onSort}\n                onFilter={onFilter}\n                toggleHeaderOption={toggleHeaderOption}\n                setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n                setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n                setShowHeaderOptions={setShowHeaderOptions}\n                toggleDataFilterModal={toggleDataFilterModal}\n                isColumnConfigurable={isColumnConfigurable}\n                onAddColumnClick={onAddColumnClick}\n                onEditColumnClick={onEditColumnClick}\n                onDeleteColumnClick={onDeleteColumnClick}\n                isResizable={isResizable}\n              />\n            ))}\n          {(rowOptions || rowAdditionalActions) && (\n            <th className='h-10 whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700'>\n              <div className='flex'>\n                {rowAdditionalActions && (\n                  <div className='relative'>\n                    <div className='absolute w-full h-full top-0 left-0' />\n                    <div>{rowAdditionalActions()}</div>\n                  </div>\n                )}\n                <div className='w-12' />\n              </div>\n            </th>\n          )}\n        </tr>\n      ))}\n    </thead>\n  );\n};\n"],"names":["Head","headerGroups","isCheckbox","checkboxConfig","isAllChecked","showHeaderOptions","setShowHeaderOptions","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","toggleDataFilterModal","rowOptions","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","tableActions","isResizable","isLoading","rowAdditionalActions","showPendingEditsColumn","jsx","headerGroup","index","createElement","CheckAll","jsxs","header","column","headerIndex","Cell"],"mappings":";;;;AA+CO,MAAMA,IAAO,CAAC;AAAA,EACnB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,wBAAAC;AACF,MAEI,gBAAAC,EAAC,SAAA,EAAM,WAAU,0IACd,UAAAxB,EAAa,IAAI,CAACyB,GAAaC,MAC9B,gBAAAC,EAAC,MAAA,EAAI,GAAGF,EAAY,uBAAuB,KAAKC,GAAO,WAAU,OAAA,GAC9DH,KACC,gBAAAC,EAAC,MAAA,EAAG,WAAU,uEACZ,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,cAAA,CAAc,GAC/B,GAEDvB,KACC,gBAAAuB,EAAC,OAAA,EAAI,WAAW,UAAUD,IAAyB,gBAAgB,QAAQ,8DACzE,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,uBACZ,4BAACI,GAAA,EAAS,YAAYP,GAAW,gBAAAnB,GAA4I,cAAAC,EAAA,CAA4B,EAAA,CAC3M,EAAA,CACF,GAEDgB,KACC,gBAAAU,EAAC,MAAA,EAAG,WAAU,mBACZ,UAAA;AAAA,EAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,iEAAA,CAAiE;AAAA,EAChF,gBAAAA,EAAC,OAAA,EAAK,UAAAL,EAAA,EAAa,CAAE;AAAA,EAAA,CACvB,GAEDM,EAAY,QACV,OAAO,CAACK,MAAyBA,GAAQ,YAAY,EAAK,EAC1D,IAAI,CAACC,GAAsBC,MAC1B,gBAAAR;AAAA,EAACS;AAAA,EAAA;AAAA,IAEC,aAAAR;AAAA,IACA,aAAAO;AAAA,IACA,mBAAA5B;AAAA,IACA,QAAA2B;AAAA,IACA,oBAAAzB;AAAA,IACA,qBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,sBAAAP;AAAA,IACA,uBAAAQ;AAAA,IACA,sBAAAE;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,aAAAE;AAAA,EAAA;AAAA,EAlBKW,EAAO;AAAA,CAoBf,IACDjB,KAAcQ,MACd,gBAAAE,EAAC,MAAA,EAAG,WAAU,uFACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,EAAAP,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,sCAAA,CAAsC;AAAA,IACrD,gBAAAA,EAAC,OAAA,EAAK,UAAAF,EAAA,EAAqB,CAAE;AAAA,EAAA,GAC/B;AAAA,EAEF,gBAAAE,EAAC,OAAA,EAAI,WAAU,OAAA,CAAO;AAAA,GACxB,EAAA,CACF,CAEJ,CACD,GACH;"}
+{"version":3,"file":"index.es.js","sources":["../../../../../src/components/data-display/infinite-table/head/index.tsx"],"sourcesContent":["import React from 'react';\nimport { CheckAll } from './CheckAll';\nimport { Cell } from './cell';\n\ninterface HeaderColumn {\n  id: string;\n  key: string;\n  Header: string;\n  width: number;\n  visible?: boolean;\n  render: (type: string) => React.ReactNode;\n  [k: string]: unknown;\n}\n\ninterface HeaderGroup {\n  getHeaderGroupProps: () => Record<string, unknown>;\n  headers: HeaderColumn[];\n  [key: string]: unknown;\n}\n\ntype TProps = {\n  headerGroups: HeaderGroup[];\n  isCheckbox: boolean;\n  checkboxConfig: Record<string, unknown> | null;\n  isAllChecked: boolean;\n  showHeaderOptions: string;\n  setShowHeaderOptions: (value: string | null) => void;\n  isShowSortArrowAsc: string | null;\n  isShowSortArrowDesc: string | null;\n  onSort?: (field: string, order?: string) => void;\n  onFilter?: (column: string, value: unknown) => void;\n  toggleHeaderOption: (key: string) => void;\n  setIsShowSortArrowAsc: (value: string | null) => void;\n  setIsShowSortArrowDesc: (value: string | null) => void;\n  toggleDataFilterModal: (column: unknown) => void;\n  rowOptions: unknown[];\n  isColumnConfigurable: boolean;\n  onAddColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onEditColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  onDeleteColumnClick: (column: { id: string; key: string; [k: string]: unknown }) => void;\n  tableActions: (() => React.ReactNode) | null;\n  isResizable: boolean;\n  isLoading?: boolean;\n  rowAdditionalActions: (() => React.ReactNode) | null;\n  showPendingEditsColumn?: boolean;\n};\n\nexport const Head = ({\n  headerGroups,\n  isCheckbox,\n  checkboxConfig,\n  isAllChecked,\n  showHeaderOptions,\n  setShowHeaderOptions,\n  isShowSortArrowAsc,\n  isShowSortArrowDesc,\n  onSort,\n  onFilter,\n  toggleHeaderOption,\n  setIsShowSortArrowAsc,\n  setIsShowSortArrowDesc,\n  toggleDataFilterModal,\n  rowOptions,\n  isColumnConfigurable,\n  onAddColumnClick,\n  onEditColumnClick,\n  onDeleteColumnClick,\n  tableActions,\n  isResizable,\n  isLoading,\n  rowAdditionalActions,\n  showPendingEditsColumn,\n}: TProps) => {\n  return (\n    <thead className='text-sm font-normal text-neutral-500 dark:text-black-100 capitalize font-inter bg-white dark:bg-black-700 sticky top-0 z-[49] border-b'>\n      {headerGroups.map((headerGroup, index) => (\n        <tr {...headerGroup.getHeaderGroupProps()} key={index} className='h-row'>\n          {showPendingEditsColumn && (\n            <th className='sticky left-0 z-20 bg-white dark:bg-black-700 min-w-[28px] w-[28px]'>\n              <div className='w-full h-row' />\n            </th>\n          )}\n          {isCheckbox && (\n            <div className={`sticky ${showPendingEditsColumn ? 'left-[28px]' : 'left-0'} right-0 z-20 flex items-center bg-white dark:bg-black-700`}>\n              <th className='px-2.5 min-w-[40px]'>\n                <CheckAll isDisabled={isLoading} checkboxConfig={checkboxConfig as unknown as { onAllItemsCheck?: (event: { target: { checked: boolean } }) => void; checkedIds: string[] }} isAllChecked={isAllChecked} />\n              </th>\n            </div>\n          )}\n          {tableActions && (\n            <th className='px-2.5 relative'>\n              <div className='absolute w-full h-full bg-white dark:bg-black-700 top-0 left-0' />\n              <div>{tableActions()}</div>\n            </th>\n          )}\n          {headerGroup.headers\n            .filter((header: HeaderColumn) => header?.visible !== false)\n            .map((column: HeaderColumn, headerIndex: number) => (\n              <Cell\n                key={column.id}\n                headerGroup={headerGroup}\n                headerIndex={headerIndex}\n                showHeaderOptions={showHeaderOptions}\n                column={column}\n                isShowSortArrowAsc={isShowSortArrowAsc}\n                isShowSortArrowDesc={isShowSortArrowDesc}\n                onSort={onSort}\n                onFilter={onFilter}\n                toggleHeaderOption={toggleHeaderOption}\n                setIsShowSortArrowAsc={setIsShowSortArrowAsc}\n                setIsShowSortArrowDesc={setIsShowSortArrowDesc}\n                setShowHeaderOptions={setShowHeaderOptions}\n                toggleDataFilterModal={toggleDataFilterModal}\n                isColumnConfigurable={isColumnConfigurable}\n                onAddColumnClick={onAddColumnClick}\n                onEditColumnClick={onEditColumnClick}\n                onDeleteColumnClick={onDeleteColumnClick}\n                isResizable={isResizable}\n              />\n            ))}\n          {(rowOptions || rowAdditionalActions) && (\n            <th className='h-row whitespace-normal w-auto sticky left-0 right-0 z-20 bg-white dark:bg-black-700'>\n              <div className='flex'>\n                {rowAdditionalActions && (\n                  <div className='relative'>\n                    <div className='absolute w-full h-full top-0 left-0' />\n                    <div>{rowAdditionalActions()}</div>\n                  </div>\n                )}\n                <div className='w-12' />\n              </div>\n            </th>\n          )}\n        </tr>\n      ))}\n    </thead>\n  );\n};\n"],"names":["Head","headerGroups","isCheckbox","checkboxConfig","isAllChecked","showHeaderOptions","setShowHeaderOptions","isShowSortArrowAsc","isShowSortArrowDesc","onSort","onFilter","toggleHeaderOption","setIsShowSortArrowAsc","setIsShowSortArrowDesc","toggleDataFilterModal","rowOptions","isColumnConfigurable","onAddColumnClick","onEditColumnClick","onDeleteColumnClick","tableActions","isResizable","isLoading","rowAdditionalActions","showPendingEditsColumn","jsx","headerGroup","index","createElement","CheckAll","jsxs","header","column","headerIndex","Cell"],"mappings":";;;;AA+CO,MAAMA,IAAO,CAAC;AAAA,EACnB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,wBAAAC;AACF,MAEI,gBAAAC,EAAC,SAAA,EAAM,WAAU,0IACd,UAAAxB,EAAa,IAAI,CAACyB,GAAaC,MAC9B,gBAAAC,EAAC,MAAA,EAAI,GAAGF,EAAY,uBAAuB,KAAKC,GAAO,WAAU,QAAA,GAC9DH,KACC,gBAAAC,EAAC,MAAA,EAAG,WAAU,uEACZ,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAA,CAAe,GAChC,GAEDvB,KACC,gBAAAuB,EAAC,OAAA,EAAI,WAAW,UAAUD,IAAyB,gBAAgB,QAAQ,8DACzE,UAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,uBACZ,4BAACI,GAAA,EAAS,YAAYP,GAAW,gBAAAnB,GAA4I,cAAAC,EAAA,CAA4B,EAAA,CAC3M,EAAA,CACF,GAEDgB,KACC,gBAAAU,EAAC,MAAA,EAAG,WAAU,mBACZ,UAAA;AAAA,EAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,iEAAA,CAAiE;AAAA,EAChF,gBAAAA,EAAC,OAAA,EAAK,UAAAL,EAAA,EAAa,CAAE;AAAA,EAAA,CACvB,GAEDM,EAAY,QACV,OAAO,CAACK,MAAyBA,GAAQ,YAAY,EAAK,EAC1D,IAAI,CAACC,GAAsBC,MAC1B,gBAAAR;AAAA,EAACS;AAAA,EAAA;AAAA,IAEC,aAAAR;AAAA,IACA,aAAAO;AAAA,IACA,mBAAA5B;AAAA,IACA,QAAA2B;AAAA,IACA,oBAAAzB;AAAA,IACA,qBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,sBAAAP;AAAA,IACA,uBAAAQ;AAAA,IACA,sBAAAE;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,aAAAE;AAAA,EAAA;AAAA,EAlBKW,EAAO;AAAA,CAoBf,IACDjB,KAAcQ,MACd,gBAAAE,EAAC,MAAA,EAAG,WAAU,wFACZ,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,QACZ,UAAA;AAAA,EAAAP,KACC,gBAAAO,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAL,EAAC,OAAA,EAAI,WAAU,sCAAA,CAAsC;AAAA,IACrD,gBAAAA,EAAC,OAAA,EAAK,UAAAF,EAAA,EAAqB,CAAE;AAAA,EAAA,GAC/B;AAAA,EAEF,gBAAAE,EAAC,OAAA,EAAI,WAAU,OAAA,CAAO;AAAA,GACxB,EAAA,CACF,CAEJ,CACD,GACH;"}

package/dist/components/data-display/tag/Tag.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"xs":return"text-3xs leading-3 px-1 border-[0.5px] rounded";case"lg":return"text-sm leading-5 px-1.5 border rounded-md";case"sm":return"text-2xs leading-4 px-1 border-[0.5px] rounded";default:return"text-xs leading-4 px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,y={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},p=N("inline-flex items-center transition-colors font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:p,style:y,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:p,style:y,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("../../../_virtual/index.cjs.js"),_=require("react"),L=require("react-router-dom"),O=require("../../icons/CloseIcon.cjs.js"),I=require("../../tooltip/Tooltip.cjs.js"),k={primary:"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",success:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",warning:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",error:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",neutral:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",red:"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300",green:"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",blue:"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300",teal:"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300",orange:"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300",peach:"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300",navy:"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300",gray:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",grey:"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",yellow:"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",purple:"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"},C=/^#[0-9a-fA-F]{6}$/,W=/^(?:[a-z][a-z\d+\-.]*:|\/\/)/i,B=(e,r)=>r?"":e?k[e.toLowerCase()]??k.primary:k.primary,F=e=>{const r=e.trim().toLowerCase();return C.test(r)?r:void 0},P=e=>W.test(e),X=e=>{switch(e){case"lg":return"text-[14px] leading-[20px] px-1.5 border rounded-md";case"sm":return"text-[10px] leading-[15px] px-1 border-[0.5px] rounded";default:return"text-[12px] leading-[18px] px-1.5 border rounded-md"}},j=_.forwardRef(({label:e,href:r,color:l,size:v="md",className:R,onClick:s,onMouseDown:n,truncate:i,isHashColor:E=!1,theme:g,icon:$,removable:S=!1,onRemove:m,onUpload:h,acceptsUpload:w=!1,tooltip:A=!1,"aria-label":b,role:x},c)=>{const d=typeof l=="string"&&(E||C.test(l))?F(l):void 0,q=!!d,p={maxWidth:"100%",...d?{backgroundColor:`${d}26`,borderColor:`${d}59`,color:d}:{}},o=!!(s||w||r),z=!!(r&&P(r)),H=a=>{const T=a.target.files?.[0];T&&h&&h(T),a.target.value=""},y=N("inline-flex items-center transition-colors font-medium",B(l,q),X(v),o&&"cursor-pointer hover:opacity-80",R),f=t.jsxs("div",{className:"flex items-center gap-0.5 min-w-0 overflow-hidden",style:{maxWidth:"100%"},children:[$,i?t.jsx("p",{title:e,className:N("overflow-hidden whitespace-nowrap text-ellipsis",o&&"cursor-pointer"),style:{maxWidth:"100%"},children:e.length>i?`${e.slice(0,i)}...`:e}):t.jsx("p",{className:"overflow-hidden whitespace-nowrap text-ellipsis",style:{maxWidth:"100%"},children:e}),w&&t.jsx("input",{type:"file",onChange:H,className:"absolute inset-0 h-full w-full cursor-pointer opacity-0","aria-label":`Upload file for ${e}`}),S&&m&&t.jsx("button",{onClick:m,className:"ml-1 flex-shrink-0","aria-label":`Remove ${e}`,type:"button",children:t.jsx(O.CloseIcon,{size:12,className:"cursor-pointer"})})]}),u=A?t.jsx(I,{title:e,delayShow:!0,children:f}):f;return r?z?t.jsx("a",{ref:c,href:r,className:y,style:p,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx(L.Link,{ref:c,to:r,className:y,style:p,onMouseDown:n,onClick:s,"aria-label":b||`Tag: ${e}`,role:x,"data-theme":g,children:u}):t.jsx("div",{ref:c,className:y,style:p,onMouseDown:n,onClick:s,onKeyDown:o?a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.currentTarget.click())}:void 0,"aria-label":b||`Tag: ${e}`,role:x??(o?"button":void 0),tabIndex:o?0:void 0,"data-theme":g,children:u})});j.displayName="Tag";exports.Tag=j;
 //# sourceMappingURL=Tag.cjs.js.map

package/dist/components/data-display/tag/Tag.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"xs\":\n      return \"text-3xs leading-3 px-1 border-[0.5px] rounded\";\n    case \"lg\":\n      return \"text-sm leading-5 px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-2xs leading-4 px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-xs leading-4 px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}
+{"version":3,"file":"Tag.cjs.js","sources":["../../../../src/components/data-display/tag/Tag.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { forwardRef, type CSSProperties, type Ref } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { CloseIcon } from \"../../icons/CloseIcon\";\nimport Tooltip from \"../../tooltip/Tooltip\";\n\n/**\n * Available tag size options\n */\nexport type TagSize = \"xs\" | \"sm\" | \"md\" | \"lg\";\n\n/**\n * Available color names for tags\n */\nexport type TagColor =\n  | \"primary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"neutral\"\n  | \"red\"\n  | \"green\"\n  | \"blue\"\n  | \"teal\"\n  | \"yellow\"\n  | \"orange\"\n  | \"peach\"\n  | \"purple\"\n  | \"navy\"\n  | \"gray\"\n  | \"grey\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\n/**\n * Upload handler function type\n */\nexport type UploadHandler = (file: File) => void | Promise<void>;\n\n/**\n * Props for the Tag component\n */\nexport interface TagProps {\n  /** The text content to display */\n  label: string;\n  /** Router path or external URL */\n  href?: string;\n  /** Color name or hex color value (example: #3B82F6 or red) */\n  color?: string;\n  /** Size variant */\n  size?: TagSize;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler for the tag */\n  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Mouse down handler */\n  onMouseDown?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Maximum character length before truncation */\n  truncate?: number;\n  /** Treat `color` as a hex color string (e.g. `#3B82F6` or `3b82f6`). When true, the value is applied as a hex regardless of named-color matches. */\n  isHashColor?: boolean;\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Whether the tag is removable (shows close button) */\n  removable?: boolean;\n  /** Handler for remove button click */\n  onRemove?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Upload handler function */\n  onUpload?: UploadHandler;\n  /** Whether the tag accepts file uploads */\n  acceptsUpload?: boolean;\n  /** Whether to show a tooltip with the label on hover */\n  tooltip?: boolean;\n  /** Custom aria-label for accessibility */\n  \"aria-label\"?: string;\n  /** ARIA role override */\n  role?: React.AriaRole;\n}\n\n/**\n * Tag component displays labels with customizable colors and styling\n *\n * @example\n * ```tsx\n * <Tag label=\"React\" color=\"blue\" size=\"md\" />\n * <Tag label=\"TypeScript\" color=\"#3178c6\" isHashColor />\n * <Tag label=\"Removable\" removable onRemove={handleRemove} />\n * <Tag label=\"Upload\" acceptsUpload onUpload={handleUpload} />\n * ```\n */\nconst TAG_COLOR_CLASSES: Record<TagColor, string> = {\n  primary: \"bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400\",\n  success: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  warning: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  error: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  neutral: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  red: \"bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-900 dark:text-red-300\",\n  green: \"bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300\",\n  blue: \"bg-blue-50 border-blue-200 text-blue-700 dark:bg-blue-950 dark:border-blue-900 dark:text-blue-300\",\n  teal: \"bg-teal-50 border-teal-200 text-teal-700 dark:bg-teal-950 dark:border-teal-900 dark:text-teal-300\",\n  orange: \"bg-orange-50 border-orange-200 text-orange-700 dark:bg-orange-950 dark:border-orange-900 dark:text-orange-300\",\n  peach: \"bg-peach-50 border-peach-200 text-peach-700 dark:bg-peach-950 dark:border-peach-900 dark:text-peach-300\",\n  navy: \"bg-slate-50 border-slate-200 text-slate-700 dark:bg-slate-900 dark:border-slate-700 dark:text-slate-300\",\n  gray: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  grey: \"bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300\",\n  yellow: \"bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300\",\n  purple: \"bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300\",\n};\n\nconst HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/;\nconst EXTERNAL_HREF_PATTERN = /^(?:[a-z][a-z\\d+\\-.]*:|\\/\\/)/i;\n\nconst getColorClasses = (color?: string, isHexColor?: boolean): string => {\n  if (isHexColor) return \"\";\n  if (!color) return TAG_COLOR_CLASSES.primary;\n  return TAG_COLOR_CLASSES[color.toLowerCase() as TagColor] ?? TAG_COLOR_CLASSES.primary;\n};\n\n/**\n * Normalize a 6-digit hex color string to lowercase `#rrggbb`.\n * Returns `undefined` if the value isn't a valid 6-digit hex.\n */\nconst normalizeHex = (value: string): string | undefined => {\n  const trimmed = value.trim().toLowerCase();\n  return HEX_COLOR_PATTERN.test(trimmed) ? trimmed : undefined;\n};\n\nconst isExternalHref = (href: string): boolean => EXTERNAL_HREF_PATTERN.test(href);\n\n/**\n * Get size-based styling classes\n */\nconst getSizeClasses = (size: TagSize): string => {\n  switch (size) {\n    case \"lg\":\n      return \"text-[14px] leading-[20px] px-1.5 border rounded-md\";\n    case \"sm\":\n      return \"text-[10px] leading-[15px] px-1 border-[0.5px] rounded\";\n    default: // md\n      return \"text-[12px] leading-[18px] px-1.5 border rounded-md\";\n  }\n};\n\nexport const Tag = forwardRef<HTMLElement, TagProps>(\n  (\n    {\n      label,\n      href,\n      color,\n      size = 'md',\n      className,\n      onClick,\n      onMouseDown,\n      truncate,\n      isHashColor = false,\n      theme,\n      icon,\n      removable = false,\n      onRemove,\n      onUpload,\n      acceptsUpload = false,\n      tooltip = false,\n      \"aria-label\": ariaLabel,\n      role,\n    },\n    ref\n  ) => {\n    const normalizedHex =\n      typeof color === \"string\" && (isHashColor || HEX_COLOR_PATTERN.test(color))\n        ? normalizeHex(color)\n        : undefined;\n    const isHexColor = Boolean(normalizedHex);\n    const tagStyle: CSSProperties = {\n      maxWidth: \"100%\",\n      ...(normalizedHex\n        ? {\n          backgroundColor: `${normalizedHex}26`,\n          borderColor: `${normalizedHex}59`,\n          color: normalizedHex,\n        }\n        : {}),\n    };\n    const isInteractive = Boolean(onClick || acceptsUpload || href);\n    const shouldRenderAnchor = Boolean(href && isExternalHref(href));\n\n    /**\n     * Handle file upload\n     */\n    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n      const file = event.target.files?.[0];\n      if (file && onUpload) {\n        onUpload(file);\n      }\n      // Reset input value to allow same file selection\n      event.target.value = '';\n    };\n\n    const tagClassName = cn(\n      \"inline-flex items-center transition-colors font-medium\",\n      getColorClasses(color, isHexColor),\n      getSizeClasses(size),\n      isInteractive && \"cursor-pointer hover:opacity-80\",\n      className\n    );\n\n    const inner = (\n      <div className=\"flex items-center gap-0.5 min-w-0 overflow-hidden\" style={{ maxWidth: \"100%\" }}>\n        {icon}\n\n        {truncate ? (\n          <p\n            title={label}\n            className={cn(\n              \"overflow-hidden whitespace-nowrap text-ellipsis\",\n              isInteractive && \"cursor-pointer\"\n            )}\n            style={{ maxWidth: \"100%\" }}\n          >\n            {label.length > truncate ? `${label.slice(0, truncate)}...` : label}\n          </p>\n        ) : (\n          <p className=\"overflow-hidden whitespace-nowrap text-ellipsis\" style={{ maxWidth: \"100%\" }}>\n            {label}\n          </p>\n        )}\n\n        {acceptsUpload && (\n          <input\n            type=\"file\"\n            onChange={handleFileUpload}\n            className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n            aria-label={`Upload file for ${label}`}\n          />\n        )}\n\n        {removable && onRemove && (\n          <button\n            onClick={onRemove}\n            className=\"ml-1 flex-shrink-0\"\n            aria-label={`Remove ${label}`}\n            type=\"button\"\n          >\n            <CloseIcon size={12} className=\"cursor-pointer\" />\n          </button>\n        )}\n      </div>\n    );\n\n    const content = tooltip ? <Tooltip title={label} delayShow>{inner}</Tooltip> : inner;\n\n    if (href) {\n      if (shouldRenderAnchor) {\n        return (\n          <a\n            ref={ref as Ref<HTMLAnchorElement>}\n            href={href}\n            className={tagClassName}\n            style={tagStyle}\n            onMouseDown={onMouseDown}\n            onClick={onClick}\n            aria-label={ariaLabel || `Tag: ${label}`}\n            role={role}\n            data-theme={theme}\n          >\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Link\n          ref={ref as Ref<HTMLAnchorElement>}\n          to={href}\n          className={tagClassName}\n          style={tagStyle}\n          onMouseDown={onMouseDown}\n          onClick={onClick}\n          aria-label={ariaLabel || `Tag: ${label}`}\n          role={role}\n          data-theme={theme}\n        >\n          {content}\n        </Link>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        className={tagClassName}\n        style={tagStyle}\n        onMouseDown={onMouseDown}\n        onClick={onClick}\n        onKeyDown={\n          isInteractive\n            ? (event) => {\n              if (event.key === \"Enter\" || event.key === \" \") {\n                event.preventDefault();\n                event.currentTarget.click();\n              }\n            }\n            : undefined\n        }\n        aria-label={ariaLabel || `Tag: ${label}`}\n        role={role ?? (isInteractive ? \"button\" : undefined)}\n        tabIndex={isInteractive ? 0 : undefined}\n        data-theme={theme}\n      >\n        {content}\n      </div>\n    );\n  }\n);\n\nTag.displayName = \"Tag\";\n"],"names":["TAG_COLOR_CLASSES","HEX_COLOR_PATTERN","EXTERNAL_HREF_PATTERN","getColorClasses","color","isHexColor","normalizeHex","value","trimmed","isExternalHref","href","getSizeClasses","size","Tag","forwardRef","label","className","onClick","onMouseDown","truncate","isHashColor","theme","icon","removable","onRemove","onUpload","acceptsUpload","tooltip","ariaLabel","role","ref","normalizedHex","tagStyle","isInteractive","shouldRenderAnchor","handleFileUpload","event","file","tagClassName","cn","inner","jsx","CloseIcon","content","Tooltip","Link"],"mappings":"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"}

package/dist/components/data-display/tag/Tag.es.js

@@ -4,7 +4,7 @@ import { forwardRef as O } from "react";
 import { Link as W } from "react-router-dom";
 import { CloseIcon as B } from "../../icons/CloseIcon.es.js";
 import F from "../../tooltip/Tooltip.es.js";
-const k = {
+const m = {
   primary: "bg-primary-50 border-primary-100 text-primary-600 dark:bg-primary-900 dark:border-primary-800 dark:text-primary-400",
   success: "bg-green-50 border-green-200 text-green-700 dark:bg-green-950 dark:border-green-900 dark:text-green-300",
   warning: "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",
@@ -21,19 +21,17 @@ const k = {
   grey: "bg-gray-50 border-gray-200 text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300",
   yellow: "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-900 dark:text-yellow-300",
   purple: "bg-purple-50 border-purple-200 text-purple-700 dark:bg-purple-950 dark:border-purple-900 dark:text-purple-300"
-}, C = /^#[0-9a-fA-F]{6}$/, I = /^(?:[a-z][a-z\d+\-.]*:|\/\/)/i, j = (r, e) => e ? "" : r ? k[r.toLowerCase()] ?? k.primary : k.primary, P = (r) => {
+}, C = /^#[0-9a-fA-F]{6}$/, I = /^(?:[a-z][a-z\d+\-.]*:|\/\/)/i, j = (r, e) => e ? "" : r ? m[r.toLowerCase()] ?? m.primary : m.primary, P = (r) => {
   const e = r.trim().toLowerCase();
   return C.test(e) ? e : void 0;
 }, X = (r) => I.test(r), G = (r) => {
   switch (r) {
-    case "xs":
-      return "text-3xs leading-3 px-1 border-[0.5px] rounded";
     case "lg":
-      return "text-sm leading-5 px-1.5 border rounded-md";
+      return "text-[14px] leading-[20px] px-1.5 border rounded-md";
     case "sm":
-      return "text-2xs leading-4 px-1 border-[0.5px] rounded";
+      return "text-[10px] leading-[15px] px-1 border-[0.5px] rounded";
     default:
-      return "text-xs leading-4 px-1.5 border rounded-md";
+      return "text-[12px] leading-[18px] px-1.5 border rounded-md";
   }
 }, K = O(
   ({
@@ -105,7 +103,7 @@ const k = {
           children: /* @__PURE__ */ t(B, { size: 12, className: "cursor-pointer" })
         }
       )
-    ] }), m = z ? /* @__PURE__ */ t(F, { title: r, delayShow: !0, children: w }) : w;
+    ] }), k = z ? /* @__PURE__ */ t(F, { title: r, delayShow: !0, children: w }) : w;
     return e ? S ? /* @__PURE__ */ t(
       "a",
       {
@@ -118,7 +116,7 @@ const k = {
         "aria-label": b || `Tag: ${r}`,
         role: p,
         "data-theme": g,
-        children: m
+        children: k
       }
     ) : /* @__PURE__ */ t(
       W,
@@ -132,7 +130,7 @@ const k = {
         "aria-label": b || `Tag: ${r}`,
         role: p,
         "data-theme": g,
-        children: m
+        children: k
       }
     ) : /* @__PURE__ */ t(
       "div",
@@ -149,7 +147,7 @@ const k = {
         role: p ?? (o ? "button" : void 0),
         tabIndex: o ? 0 : void 0,
         "data-theme": g,
-        children: m
+        children: k
       }
     );
   }