@customafk/lunas-ui 0.2.66 → 0.2.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{analysis-panel-ikcRtzG9.mjs → analysis-panel-BD2QvOth.mjs} +2 -2
- package/dist/{analysis-panel-ikcRtzG9.mjs.map → analysis-panel-BD2QvOth.mjs.map} +1 -1
- package/dist/{analysis-panel-DzsZKA9l.cjs → analysis-panel-UlC7cvO2.cjs} +2 -2
- package/dist/{analysis-panel-DzsZKA9l.cjs.map → analysis-panel-UlC7cvO2.cjs.map} +1 -1
- package/dist/{badge-display-9WXwgQgH.cjs → badge-display-Bs0QeCJt.cjs} +2 -2
- package/dist/{badge-display-9WXwgQgH.cjs.map → badge-display-Bs0QeCJt.cjs.map} +1 -1
- package/dist/{badge-display-Dx-dITLB.mjs → badge-display-Dg5XM66P.mjs} +2 -2
- package/dist/{badge-display-Dx-dITLB.mjs.map → badge-display-Dg5XM66P.mjs.map} +1 -1
- package/dist/{boolean-display-pmzYS-ND.cjs → boolean-display-BnN32_Jd.cjs} +2 -2
- package/dist/{boolean-display-pmzYS-ND.cjs.map → boolean-display-BnN32_Jd.cjs.map} +1 -1
- package/dist/{boolean-display-OVCtvzI1.mjs → boolean-display-DVn3UGuZ.mjs} +2 -2
- package/dist/{boolean-display-OVCtvzI1.mjs.map → boolean-display-DVn3UGuZ.mjs.map} +1 -1
- package/dist/{currency-display-BN1i8jnU.mjs → currency-display-CKLQ_lxN.mjs} +2 -2
- package/dist/{currency-display-BN1i8jnU.mjs.map → currency-display-CKLQ_lxN.mjs.map} +1 -1
- package/dist/{currency-display-B91H66HM.cjs → currency-display-CZ6PJAzu.cjs} +2 -2
- package/dist/{currency-display-B91H66HM.cjs.map → currency-display-CZ6PJAzu.cjs.map} +1 -1
- package/dist/{date-display-odcC9NcB.cjs → date-display-BQOVmN7S.cjs} +2 -2
- package/dist/{date-display-odcC9NcB.cjs.map → date-display-BQOVmN7S.cjs.map} +1 -1
- package/dist/{date-display-BWtvWDHK.mjs → date-display-BrCdJkmq.mjs} +2 -2
- package/dist/{date-display-BWtvWDHK.mjs.map → date-display-BrCdJkmq.mjs.map} +1 -1
- package/dist/{description-display-BubAcFan.mjs → description-display-BQFLzI2g.mjs} +2 -2
- package/dist/{description-display-BubAcFan.mjs.map → description-display-BQFLzI2g.mjs.map} +1 -1
- package/dist/{description-display-CKe0j3q-.cjs → description-display-DnDAB3a1.cjs} +2 -2
- package/dist/{description-display-CKe0j3q-.cjs.map → description-display-DnDAB3a1.cjs.map} +1 -1
- package/dist/{email-display-BLt60GQ1.cjs → email-display-D6ZgA_en.cjs} +2 -2
- package/dist/{email-display-BLt60GQ1.cjs.map → email-display-D6ZgA_en.cjs.map} +1 -1
- package/dist/{email-display-CMme47S9.mjs → email-display-m745lUts.mjs} +2 -2
- package/dist/{email-display-CMme47S9.mjs.map → email-display-m745lUts.mjs.map} +1 -1
- package/dist/features/tables/index.cjs +1 -1
- package/dist/features/tables/index.mjs +1 -1
- package/dist/{filter-Cmg6SHMu.cjs → filter-Bb9_Blk3.cjs} +2 -2
- package/dist/{filter-Cmg6SHMu.cjs.map → filter-Bb9_Blk3.cjs.map} +1 -1
- package/dist/{filter-CMzD5h0M.mjs → filter-CG6wQHRd.mjs} +2 -2
- package/dist/{filter-CMzD5h0M.mjs.map → filter-CG6wQHRd.mjs.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/{list-display-BuRCso6J.mjs → list-display-8Jx6G5nk.mjs} +2 -2
- package/dist/{list-display-BuRCso6J.mjs.map → list-display-8Jx6G5nk.mjs.map} +1 -1
- package/dist/{list-display-DEU6yFa9.cjs → list-display-BQjNDttz.cjs} +2 -2
- package/dist/{list-display-DEU6yFa9.cjs.map → list-display-BQjNDttz.cjs.map} +1 -1
- package/dist/{name-display-DXMZ8Lug.mjs → name-display-BBJoNnRG.mjs} +2 -2
- package/dist/{name-display-DXMZ8Lug.mjs.map → name-display-BBJoNnRG.mjs.map} +1 -1
- package/dist/{name-display-B6X52ip_.cjs → name-display-scAMZdyr.cjs} +2 -2
- package/dist/{name-display-B6X52ip_.cjs.map → name-display-scAMZdyr.cjs.map} +1 -1
- package/dist/{progress-display-Bp0xVhln.cjs → progress-display-B45TkUcr.cjs} +2 -2
- package/dist/{progress-display-Bp0xVhln.cjs.map → progress-display-B45TkUcr.cjs.map} +1 -1
- package/dist/{progress-display-DYj7vAe9.mjs → progress-display-DvV-YhkE.mjs} +2 -2
- package/dist/{progress-display-DYj7vAe9.mjs.map → progress-display-DvV-YhkE.mjs.map} +1 -1
- package/dist/{statistic-BUGIRhL9.cjs → statistic-BHCSCw9Q.cjs} +2 -2
- package/dist/{statistic-BUGIRhL9.cjs.map → statistic-BHCSCw9Q.cjs.map} +1 -1
- package/dist/{statistic-Ug9Zgi3N.mjs → statistic-DwiUKz02.mjs} +2 -2
- package/dist/{statistic-Ug9Zgi3N.mjs.map → statistic-DwiUKz02.mjs.map} +1 -1
- package/dist/{status-display-B-6KKttX.mjs → status-display-BKe0EupF.mjs} +2 -2
- package/dist/{status-display-B-6KKttX.mjs.map → status-display-BKe0EupF.mjs.map} +1 -1
- package/dist/{status-display-DkI9UwAu.cjs → status-display-BRJX53bQ.cjs} +2 -2
- package/dist/{status-display-DkI9UwAu.cjs.map → status-display-BRJX53bQ.cjs.map} +1 -1
- package/dist/{summary-bar-CZHeAORf.mjs → summary-bar-ByYm7uWR.mjs} +2 -2
- package/dist/{summary-bar-CZHeAORf.mjs.map → summary-bar-ByYm7uWR.mjs.map} +1 -1
- package/dist/{summary-bar-DTFVpBZn.cjs → summary-bar-DjdtmsIY.cjs} +2 -2
- package/dist/{summary-bar-DTFVpBZn.cjs.map → summary-bar-DjdtmsIY.cjs.map} +1 -1
- package/dist/{tables-UikqnT9q.mjs → tables-9d53sH9E.mjs} +2 -2
- package/dist/{tables-UikqnT9q.mjs.map → tables-9d53sH9E.mjs.map} +1 -1
- package/dist/{tables-7aC9WFs9.cjs → tables-B1O9qy-m.cjs} +2 -2
- package/dist/{tables-7aC9WFs9.cjs.map → tables-B1O9qy-m.cjs.map} +1 -1
- package/dist/{tooltip-octglTPf.cjs → tooltip-DVK6xfZ1.cjs} +2 -2
- package/dist/{tooltip-octglTPf.cjs.map → tooltip-DVK6xfZ1.cjs.map} +1 -1
- package/dist/{tooltip-B-yLj6pe.mjs → tooltip-lvpW5dMi.mjs} +2 -2
- package/dist/{tooltip-B-yLj6pe.mjs.map → tooltip-lvpW5dMi.mjs.map} +1 -1
- package/package.json +5 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Statistic as e}from"./data-display/statistic.mjs";import{G as t,K as n,q as r}from"./tables-
|
|
2
|
-
//# sourceMappingURL=analysis-panel-
|
|
1
|
+
import{Statistic as e}from"./data-display/statistic.mjs";import{G as t,K as n,q as r}from"./tables-9d53sH9E.mjs";import{ChevronDownIcon as i,ChevronUpIcon as a}from"lucide-react";import{memo as o,useMemo as s}from"react";import{cn as c}from"@customafk/react-toolkit/utils";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(e,t,n){switch(n){case`count`:return e;case`sum`:return t.reduce((e,t)=>e+t,0);case`avg`:return t.length===0?0:t.reduce((e,t)=>e+t,0)/t.length;case`min`:return t.length===0?0:Math.min(...t);case`max`:return t.length===0?0:Math.max(...t)}}function f(e,t){return e.map(e=>{let n=e.getValue(t);return typeof n==`string`?Number(n):typeof n==`number`?n:NaN}).filter(e=>!Number.isNaN(e))}const p={sum:`Tổng`,avg:`Trung bình`,count:`Đếm`,min:`Nhỏ nhất`,max:`Lớn nhất`},m=o(()=>{let{table:o,totalRows:m}=r(),{rowSelectionState:g}=n(),{isOpen:_,toggle:v}=t(),y=s(()=>o.getRowModel().rows,[o]),b=s(()=>o.getSelectedRowModel().flatRows,[o,g]),x=s(()=>o.getHeaderGroups()[0]?.headers??[],[o]),S=s(()=>x.filter(e=>![`select`,`actions`].includes(e.id)).flatMap(e=>{let t=e.column.columnDef.meta?.aggregation;if(!t)return[];let n=t.label??(typeof e.column.columnDef.header==`string`?e.column.columnDef.header:e.id),r=f(y,e.id),i=b.length>0?f(b,e.id):null;return[{colId:e.id,header:n,aggregation:t,allValue:d(y.length,r,t.type),selectedValue:i===null?null:d(b.length,i,t.type)}]}),[x,y,b]);return u(`div`,{"data-slot":`table-analysis-panel`,className:`w-full border-t border-border`,children:[u(`button`,{type:`button`,className:c(`flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive`,`hover:bg-muted-bg-subtle transition-colors outline-none`,`focus-visible:ring-2 focus-visible:ring-primary-weak`),onClick:v,"aria-expanded":_,children:[l(`span`,{children:`Tổng quan dữ liệu`}),l(_?a:i,{size:14})]}),_&&u(`div`,{className:`px-4 pb-4 pt-2 space-y-4`,children:[u(`div`,{className:`flex flex-wrap gap-4`,children:[l(h,{label:`Tổng bản ghi`,value:m??y.length}),l(h,{label:`Hàng hiển thị`,value:y.length}),l(h,{label:`Hàng đã chọn`,value:b.length,highlight:b.length>0})]}),S.length>0&&u(`div`,{children:[l(`p`,{className:`mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak`,children:`Tóm tắt cột`}),l(`div`,{className:`overflow-x-auto rounded-md border border-border`,children:u(`table`,{className:`w-full text-sm`,children:[l(`thead`,{children:u(`tr`,{className:`border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak`,children:[l(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Cột`}),l(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Kiểu`}),l(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Tất cả hàng`}),b.length>0&&l(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Hàng đã chọn`})]})}),l(`tbody`,{children:S.map((t,n)=>u(`tr`,{className:c(`border-b border-border last:border-b-0`,n%2==1&&`bg-muted-bg-subtle/50`),children:[l(`td`,{className:`px-3 py-2 text-text-positive font-medium`,children:t.header}),l(`td`,{className:`px-3 py-2 text-text-positive-weak`,children:p[t.aggregation.type]}),l(`td`,{className:`px-3 py-2 text-right`,children:l(e,{value:t.allValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})}),b.length>0&&l(`td`,{className:`px-3 py-2 text-right`,children:t.selectedValue===null?l(`span`,{className:`text-text-positive-weak`,children:`—`}):l(e,{value:t.selectedValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})})]},t.colId))})]})})]})]})]})});m.displayName=`UITableAnalysisPanel`;const h=o(({label:e,value:t,highlight:n})=>u(`div`,{className:c(`flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white`,n&&t>0?`border-primary bg-primary-bg-subtle`:`border-border bg-white`),children:[l(`span`,{className:`text-[11px] text-text-positive-weak`,children:e}),l(`span`,{className:`text-base font-semibold tabular-nums text-text-positive-strong`,children:t.toLocaleString()})]}));h.displayName=`StatChip`;export{m as UITableAnalysisPanel};
|
|
2
|
+
//# sourceMappingURL=analysis-panel-BD2QvOth.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analysis-panel-ikcRtzG9.mjs","names":[],"sources":["../packages/components/features/tables/components/table/analysis-panel.tsx"],"sourcesContent":["'use client';\nimport { memo, useMemo } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { AnyEntity } from '@/types';\nimport { Statistic } from '@/components/data-display/statistic';\n\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\n\nfunction computeAggregation(rowCount: number, values: number[], type: ColumnAggregationType): number {\n switch (type) {\n case 'count':\n return rowCount;\n case 'sum':\n return values.reduce((a, b) => a + b, 0);\n case 'avg':\n return values.length === 0 ? 0 : values.reduce((a, b) => a + b, 0) / values.length;\n case 'min':\n return values.length === 0 ? 0 : Math.min(...values);\n case 'max':\n return values.length === 0 ? 0 : Math.max(...values);\n }\n}\n\nfunction extractNumericValues(rows: { getValue: (id: string) => unknown }[], colId: string): number[] {\n return rows\n .map(r => {\n const v = r.getValue(colId);\n const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN;\n return n;\n })\n .filter(n => !Number.isNaN(n));\n}\n\ntype AggregationLabel = {\n colId: string;\n header: string;\n aggregation: ColumnAggregation;\n allValue: number;\n selectedValue: number | null;\n};\n\nconst typeLabels: Record<ColumnAggregationType, string> = {\n sum: 'Tổng',\n avg: 'Trung bình',\n count: 'Đếm',\n min: 'Nhỏ nhất',\n max: 'Lớn nhất',\n};\n\nexport const UITableAnalysisPanel = memo(() => {\n const { table, totalRows } = useUITableContext();\n const { rowSelectionState } = useUITableBodyContext();\n const { isOpen, toggle } = useUITableAnalysisContext();\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: row model\n const allRows = useMemo(() => table.getRowModel().rows, [table]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: selected rows\n const selectedRows = useMemo(() => table.getSelectedRowModel().flatRows, [table, rowSelectionState]);\n\n const headers = useMemo(() => table.getHeaderGroups()[0]?.headers ?? [], [table]);\n\n const aggregationRows = useMemo<AggregationLabel[]>(() => {\n return headers\n .filter(h => !['select', 'actions'].includes(h.id))\n .flatMap(header => {\n const agg = (header.column.columnDef.meta as AnyEntity)?.aggregation as ColumnAggregation | undefined;\n if (!agg) return [];\n\n const headerText = agg.label ?? (typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.id);\n\n const allValues = extractNumericValues(allRows, header.id);\n const selectedValues = selectedRows.length > 0 ? extractNumericValues(selectedRows, header.id) : null;\n\n return [\n {\n colId: header.id,\n header: headerText,\n aggregation: agg,\n allValue: computeAggregation(allRows.length, allValues, agg.type),\n selectedValue: selectedValues !== null ? computeAggregation(selectedRows.length, selectedValues, agg.type) : null,\n },\n ];\n });\n }, [headers, allRows, selectedRows]);\n\n return (\n <div data-slot=\"table-analysis-panel\" className=\"w-full border-t border-border\">\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive',\n 'hover:bg-muted-bg-subtle transition-colors outline-none',\n 'focus-visible:ring-2 focus-visible:ring-primary-weak'\n )}\n onClick={toggle}\n aria-expanded={isOpen}\n >\n <span>Tổng quan dữ liệu</span>\n {isOpen ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />}\n </button>\n\n {isOpen && (\n <div className=\"px-4 pb-4 pt-2 space-y-4\">\n {/* Row summary */}\n <div className=\"flex flex-wrap gap-4\">\n <StatChip label=\"Tổng bản ghi\" value={totalRows ?? allRows.length} />\n <StatChip label=\"Hàng hiển thị\" value={allRows.length} />\n <StatChip label=\"Hàng đã chọn\" value={selectedRows.length} highlight={selectedRows.length > 0} />\n </div>\n\n {/* Column aggregations */}\n {aggregationRows.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak\">Tóm tắt cột</p>\n <div className=\"overflow-x-auto rounded-md border border-border\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak\">\n <th className=\"px-3 py-2 text-left font-medium\">Cột</th>\n <th className=\"px-3 py-2 text-left font-medium\">Kiểu</th>\n <th className=\"px-3 py-2 text-right font-medium\">Tất cả hàng</th>\n {selectedRows.length > 0 && <th className=\"px-3 py-2 text-right font-medium\">Hàng đã chọn</th>}\n </tr>\n </thead>\n <tbody>\n {aggregationRows.map((row, idx) => (\n <tr key={row.colId} className={cn('border-b border-border last:border-b-0', idx % 2 === 1 && 'bg-muted-bg-subtle/50')}>\n <td className=\"px-3 py-2 text-text-positive font-medium\">{row.header}</td>\n <td className=\"px-3 py-2 text-text-positive-weak\">{typeLabels[row.aggregation.type]}</td>\n <td className=\"px-3 py-2 text-right\">\n <Statistic\n value={row.allValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n </td>\n {selectedRows.length > 0 && (\n <td className=\"px-3 py-2 text-right\">\n {row.selectedValue !== null ? (\n <Statistic\n value={row.selectedValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n ) : (\n <span className=\"text-text-positive-weak\">—</span>\n )}\n </td>\n )}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n});\nUITableAnalysisPanel.displayName = 'UITableAnalysisPanel';\n\nconst StatChip = memo<{ label: string; value: number; highlight?: boolean }>(({ label, value, highlight }) => (\n <div\n className={cn(\n 'flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white',\n highlight && value > 0 ? 'border-primary bg-primary-bg-subtle' : 'border-border bg-white'\n )}\n >\n <span className=\"text-[11px] text-text-positive-weak\">{label}</span>\n <span className=\"text-base font-semibold tabular-nums text-text-positive-strong\">{value.toLocaleString()}</span>\n </div>\n));\nStatChip.displayName = 'StatChip';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"analysis-panel-BD2QvOth.mjs","names":[],"sources":["../packages/components/features/tables/components/table/analysis-panel.tsx"],"sourcesContent":["'use client';\nimport { memo, useMemo } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { AnyEntity } from '@/types';\nimport { Statistic } from '@/components/data-display/statistic';\n\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\n\nfunction computeAggregation(rowCount: number, values: number[], type: ColumnAggregationType): number {\n switch (type) {\n case 'count':\n return rowCount;\n case 'sum':\n return values.reduce((a, b) => a + b, 0);\n case 'avg':\n return values.length === 0 ? 0 : values.reduce((a, b) => a + b, 0) / values.length;\n case 'min':\n return values.length === 0 ? 0 : Math.min(...values);\n case 'max':\n return values.length === 0 ? 0 : Math.max(...values);\n }\n}\n\nfunction extractNumericValues(rows: { getValue: (id: string) => unknown }[], colId: string): number[] {\n return rows\n .map(r => {\n const v = r.getValue(colId);\n const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN;\n return n;\n })\n .filter(n => !Number.isNaN(n));\n}\n\ntype AggregationLabel = {\n colId: string;\n header: string;\n aggregation: ColumnAggregation;\n allValue: number;\n selectedValue: number | null;\n};\n\nconst typeLabels: Record<ColumnAggregationType, string> = {\n sum: 'Tổng',\n avg: 'Trung bình',\n count: 'Đếm',\n min: 'Nhỏ nhất',\n max: 'Lớn nhất',\n};\n\nexport const UITableAnalysisPanel = memo(() => {\n const { table, totalRows } = useUITableContext();\n const { rowSelectionState } = useUITableBodyContext();\n const { isOpen, toggle } = useUITableAnalysisContext();\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: row model\n const allRows = useMemo(() => table.getRowModel().rows, [table]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: selected rows\n const selectedRows = useMemo(() => table.getSelectedRowModel().flatRows, [table, rowSelectionState]);\n\n const headers = useMemo(() => table.getHeaderGroups()[0]?.headers ?? [], [table]);\n\n const aggregationRows = useMemo<AggregationLabel[]>(() => {\n return headers\n .filter(h => !['select', 'actions'].includes(h.id))\n .flatMap(header => {\n const agg = (header.column.columnDef.meta as AnyEntity)?.aggregation as ColumnAggregation | undefined;\n if (!agg) return [];\n\n const headerText = agg.label ?? (typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.id);\n\n const allValues = extractNumericValues(allRows, header.id);\n const selectedValues = selectedRows.length > 0 ? extractNumericValues(selectedRows, header.id) : null;\n\n return [\n {\n colId: header.id,\n header: headerText,\n aggregation: agg,\n allValue: computeAggregation(allRows.length, allValues, agg.type),\n selectedValue: selectedValues !== null ? computeAggregation(selectedRows.length, selectedValues, agg.type) : null,\n },\n ];\n });\n }, [headers, allRows, selectedRows]);\n\n return (\n <div data-slot=\"table-analysis-panel\" className=\"w-full border-t border-border\">\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive',\n 'hover:bg-muted-bg-subtle transition-colors outline-none',\n 'focus-visible:ring-2 focus-visible:ring-primary-weak'\n )}\n onClick={toggle}\n aria-expanded={isOpen}\n >\n <span>Tổng quan dữ liệu</span>\n {isOpen ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />}\n </button>\n\n {isOpen && (\n <div className=\"px-4 pb-4 pt-2 space-y-4\">\n {/* Row summary */}\n <div className=\"flex flex-wrap gap-4\">\n <StatChip label=\"Tổng bản ghi\" value={totalRows ?? allRows.length} />\n <StatChip label=\"Hàng hiển thị\" value={allRows.length} />\n <StatChip label=\"Hàng đã chọn\" value={selectedRows.length} highlight={selectedRows.length > 0} />\n </div>\n\n {/* Column aggregations */}\n {aggregationRows.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak\">Tóm tắt cột</p>\n <div className=\"overflow-x-auto rounded-md border border-border\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak\">\n <th className=\"px-3 py-2 text-left font-medium\">Cột</th>\n <th className=\"px-3 py-2 text-left font-medium\">Kiểu</th>\n <th className=\"px-3 py-2 text-right font-medium\">Tất cả hàng</th>\n {selectedRows.length > 0 && <th className=\"px-3 py-2 text-right font-medium\">Hàng đã chọn</th>}\n </tr>\n </thead>\n <tbody>\n {aggregationRows.map((row, idx) => (\n <tr key={row.colId} className={cn('border-b border-border last:border-b-0', idx % 2 === 1 && 'bg-muted-bg-subtle/50')}>\n <td className=\"px-3 py-2 text-text-positive font-medium\">{row.header}</td>\n <td className=\"px-3 py-2 text-text-positive-weak\">{typeLabels[row.aggregation.type]}</td>\n <td className=\"px-3 py-2 text-right\">\n <Statistic\n value={row.allValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n </td>\n {selectedRows.length > 0 && (\n <td className=\"px-3 py-2 text-right\">\n {row.selectedValue !== null ? (\n <Statistic\n value={row.selectedValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n ) : (\n <span className=\"text-text-positive-weak\">—</span>\n )}\n </td>\n )}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n});\nUITableAnalysisPanel.displayName = 'UITableAnalysisPanel';\n\nconst StatChip = memo<{ label: string; value: number; highlight?: boolean }>(({ label, value, highlight }) => (\n <div\n className={cn(\n 'flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white',\n highlight && value > 0 ? 'border-primary bg-primary-bg-subtle' : 'border-border bg-white'\n )}\n >\n <span className=\"text-[11px] text-text-positive-weak\">{label}</span>\n <span className=\"text-base font-semibold tabular-nums text-text-positive-strong\">{value.toLocaleString()}</span>\n </div>\n));\nStatChip.displayName = 'StatChip';\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./data-display/statistic.cjs"),t=require("./tables-
|
|
2
|
-
//# sourceMappingURL=analysis-panel-
|
|
1
|
+
const e=require("./data-display/statistic.cjs"),t=require("./tables-B1O9qy-m.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime");function o(e,t,n){switch(n){case`count`:return e;case`sum`:return t.reduce((e,t)=>e+t,0);case`avg`:return t.length===0?0:t.reduce((e,t)=>e+t,0)/t.length;case`min`:return t.length===0?0:Math.min(...t);case`max`:return t.length===0?0:Math.max(...t)}}function s(e,t){return e.map(e=>{let n=e.getValue(t);return typeof n==`string`?Number(n):typeof n==`number`?n:NaN}).filter(e=>!Number.isNaN(e))}const c={sum:`Tổng`,avg:`Trung bình`,count:`Đếm`,min:`Nhỏ nhất`,max:`Lớn nhất`},l=(0,r.memo)(()=>{let{table:l,totalRows:d}=t.q(),{rowSelectionState:f}=t.K(),{isOpen:p,toggle:m}=t.G(),h=(0,r.useMemo)(()=>l.getRowModel().rows,[l]),g=(0,r.useMemo)(()=>l.getSelectedRowModel().flatRows,[l,f]),_=(0,r.useMemo)(()=>l.getHeaderGroups()[0]?.headers??[],[l]),v=(0,r.useMemo)(()=>_.filter(e=>![`select`,`actions`].includes(e.id)).flatMap(e=>{let t=e.column.columnDef.meta?.aggregation;if(!t)return[];let n=t.label??(typeof e.column.columnDef.header==`string`?e.column.columnDef.header:e.id),r=s(h,e.id),i=g.length>0?s(g,e.id):null;return[{colId:e.id,header:n,aggregation:t,allValue:o(h.length,r,t.type),selectedValue:i===null?null:o(g.length,i,t.type)}]}),[_,h,g]);return(0,a.jsxs)(`div`,{"data-slot":`table-analysis-panel`,className:`w-full border-t border-border`,children:[(0,a.jsxs)(`button`,{type:`button`,className:(0,i.cn)(`flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive`,`hover:bg-muted-bg-subtle transition-colors outline-none`,`focus-visible:ring-2 focus-visible:ring-primary-weak`),onClick:m,"aria-expanded":p,children:[(0,a.jsx)(`span`,{children:`Tổng quan dữ liệu`}),p?(0,a.jsx)(n.ChevronUpIcon,{size:14}):(0,a.jsx)(n.ChevronDownIcon,{size:14})]}),p&&(0,a.jsxs)(`div`,{className:`px-4 pb-4 pt-2 space-y-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-wrap gap-4`,children:[(0,a.jsx)(u,{label:`Tổng bản ghi`,value:d??h.length}),(0,a.jsx)(u,{label:`Hàng hiển thị`,value:h.length}),(0,a.jsx)(u,{label:`Hàng đã chọn`,value:g.length,highlight:g.length>0})]}),v.length>0&&(0,a.jsxs)(`div`,{children:[(0,a.jsx)(`p`,{className:`mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak`,children:`Tóm tắt cột`}),(0,a.jsx)(`div`,{className:`overflow-x-auto rounded-md border border-border`,children:(0,a.jsxs)(`table`,{className:`w-full text-sm`,children:[(0,a.jsx)(`thead`,{children:(0,a.jsxs)(`tr`,{className:`border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak`,children:[(0,a.jsx)(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Cột`}),(0,a.jsx)(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Kiểu`}),(0,a.jsx)(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Tất cả hàng`}),g.length>0&&(0,a.jsx)(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Hàng đã chọn`})]})}),(0,a.jsx)(`tbody`,{children:v.map((t,n)=>(0,a.jsxs)(`tr`,{className:(0,i.cn)(`border-b border-border last:border-b-0`,n%2==1&&`bg-muted-bg-subtle/50`),children:[(0,a.jsx)(`td`,{className:`px-3 py-2 text-text-positive font-medium`,children:t.header}),(0,a.jsx)(`td`,{className:`px-3 py-2 text-text-positive-weak`,children:c[t.aggregation.type]}),(0,a.jsx)(`td`,{className:`px-3 py-2 text-right`,children:(0,a.jsx)(e.Statistic,{value:t.allValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})}),g.length>0&&(0,a.jsx)(`td`,{className:`px-3 py-2 text-right`,children:t.selectedValue===null?(0,a.jsx)(`span`,{className:`text-text-positive-weak`,children:`—`}):(0,a.jsx)(e.Statistic,{value:t.selectedValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})})]},t.colId))})]})})]})]})]})});l.displayName=`UITableAnalysisPanel`;const u=(0,r.memo)(({label:e,value:t,highlight:n})=>(0,a.jsxs)(`div`,{className:(0,i.cn)(`flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white`,n&&t>0?`border-primary bg-primary-bg-subtle`:`border-border bg-white`),children:[(0,a.jsx)(`span`,{className:`text-[11px] text-text-positive-weak`,children:e}),(0,a.jsx)(`span`,{className:`text-base font-semibold tabular-nums text-text-positive-strong`,children:t.toLocaleString()})]}));u.displayName=`StatChip`,exports.UITableAnalysisPanel=l;
|
|
2
|
+
//# sourceMappingURL=analysis-panel-UlC7cvO2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analysis-panel-DzsZKA9l.cjs","names":["useUITableContext","useUITableBodyContext","useUITableAnalysisContext","ChevronUpIcon","ChevronDownIcon","Statistic"],"sources":["../packages/components/features/tables/components/table/analysis-panel.tsx"],"sourcesContent":["'use client';\nimport { memo, useMemo } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { AnyEntity } from '@/types';\nimport { Statistic } from '@/components/data-display/statistic';\n\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\n\nfunction computeAggregation(rowCount: number, values: number[], type: ColumnAggregationType): number {\n switch (type) {\n case 'count':\n return rowCount;\n case 'sum':\n return values.reduce((a, b) => a + b, 0);\n case 'avg':\n return values.length === 0 ? 0 : values.reduce((a, b) => a + b, 0) / values.length;\n case 'min':\n return values.length === 0 ? 0 : Math.min(...values);\n case 'max':\n return values.length === 0 ? 0 : Math.max(...values);\n }\n}\n\nfunction extractNumericValues(rows: { getValue: (id: string) => unknown }[], colId: string): number[] {\n return rows\n .map(r => {\n const v = r.getValue(colId);\n const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN;\n return n;\n })\n .filter(n => !Number.isNaN(n));\n}\n\ntype AggregationLabel = {\n colId: string;\n header: string;\n aggregation: ColumnAggregation;\n allValue: number;\n selectedValue: number | null;\n};\n\nconst typeLabels: Record<ColumnAggregationType, string> = {\n sum: 'Tổng',\n avg: 'Trung bình',\n count: 'Đếm',\n min: 'Nhỏ nhất',\n max: 'Lớn nhất',\n};\n\nexport const UITableAnalysisPanel = memo(() => {\n const { table, totalRows } = useUITableContext();\n const { rowSelectionState } = useUITableBodyContext();\n const { isOpen, toggle } = useUITableAnalysisContext();\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: row model\n const allRows = useMemo(() => table.getRowModel().rows, [table]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: selected rows\n const selectedRows = useMemo(() => table.getSelectedRowModel().flatRows, [table, rowSelectionState]);\n\n const headers = useMemo(() => table.getHeaderGroups()[0]?.headers ?? [], [table]);\n\n const aggregationRows = useMemo<AggregationLabel[]>(() => {\n return headers\n .filter(h => !['select', 'actions'].includes(h.id))\n .flatMap(header => {\n const agg = (header.column.columnDef.meta as AnyEntity)?.aggregation as ColumnAggregation | undefined;\n if (!agg) return [];\n\n const headerText = agg.label ?? (typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.id);\n\n const allValues = extractNumericValues(allRows, header.id);\n const selectedValues = selectedRows.length > 0 ? extractNumericValues(selectedRows, header.id) : null;\n\n return [\n {\n colId: header.id,\n header: headerText,\n aggregation: agg,\n allValue: computeAggregation(allRows.length, allValues, agg.type),\n selectedValue: selectedValues !== null ? computeAggregation(selectedRows.length, selectedValues, agg.type) : null,\n },\n ];\n });\n }, [headers, allRows, selectedRows]);\n\n return (\n <div data-slot=\"table-analysis-panel\" className=\"w-full border-t border-border\">\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive',\n 'hover:bg-muted-bg-subtle transition-colors outline-none',\n 'focus-visible:ring-2 focus-visible:ring-primary-weak'\n )}\n onClick={toggle}\n aria-expanded={isOpen}\n >\n <span>Tổng quan dữ liệu</span>\n {isOpen ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />}\n </button>\n\n {isOpen && (\n <div className=\"px-4 pb-4 pt-2 space-y-4\">\n {/* Row summary */}\n <div className=\"flex flex-wrap gap-4\">\n <StatChip label=\"Tổng bản ghi\" value={totalRows ?? allRows.length} />\n <StatChip label=\"Hàng hiển thị\" value={allRows.length} />\n <StatChip label=\"Hàng đã chọn\" value={selectedRows.length} highlight={selectedRows.length > 0} />\n </div>\n\n {/* Column aggregations */}\n {aggregationRows.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak\">Tóm tắt cột</p>\n <div className=\"overflow-x-auto rounded-md border border-border\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak\">\n <th className=\"px-3 py-2 text-left font-medium\">Cột</th>\n <th className=\"px-3 py-2 text-left font-medium\">Kiểu</th>\n <th className=\"px-3 py-2 text-right font-medium\">Tất cả hàng</th>\n {selectedRows.length > 0 && <th className=\"px-3 py-2 text-right font-medium\">Hàng đã chọn</th>}\n </tr>\n </thead>\n <tbody>\n {aggregationRows.map((row, idx) => (\n <tr key={row.colId} className={cn('border-b border-border last:border-b-0', idx % 2 === 1 && 'bg-muted-bg-subtle/50')}>\n <td className=\"px-3 py-2 text-text-positive font-medium\">{row.header}</td>\n <td className=\"px-3 py-2 text-text-positive-weak\">{typeLabels[row.aggregation.type]}</td>\n <td className=\"px-3 py-2 text-right\">\n <Statistic\n value={row.allValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n </td>\n {selectedRows.length > 0 && (\n <td className=\"px-3 py-2 text-right\">\n {row.selectedValue !== null ? (\n <Statistic\n value={row.selectedValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n ) : (\n <span className=\"text-text-positive-weak\">—</span>\n )}\n </td>\n )}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n});\nUITableAnalysisPanel.displayName = 'UITableAnalysisPanel';\n\nconst StatChip = memo<{ label: string; value: number; highlight?: boolean }>(({ label, value, highlight }) => (\n <div\n className={cn(\n 'flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white',\n highlight && value > 0 ? 'border-primary bg-primary-bg-subtle' : 'border-border bg-white'\n )}\n >\n <span className=\"text-[11px] text-text-positive-weak\">{label}</span>\n <span className=\"text-base font-semibold tabular-nums text-text-positive-strong\">{value.toLocaleString()}</span>\n </div>\n));\nStatChip.displayName = 'StatChip';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"analysis-panel-UlC7cvO2.cjs","names":["useUITableContext","useUITableBodyContext","useUITableAnalysisContext","ChevronUpIcon","ChevronDownIcon","Statistic"],"sources":["../packages/components/features/tables/components/table/analysis-panel.tsx"],"sourcesContent":["'use client';\nimport { memo, useMemo } from 'react';\n\nimport { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport type { AnyEntity } from '@/types';\nimport { Statistic } from '@/components/data-display/statistic';\n\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\n\nfunction computeAggregation(rowCount: number, values: number[], type: ColumnAggregationType): number {\n switch (type) {\n case 'count':\n return rowCount;\n case 'sum':\n return values.reduce((a, b) => a + b, 0);\n case 'avg':\n return values.length === 0 ? 0 : values.reduce((a, b) => a + b, 0) / values.length;\n case 'min':\n return values.length === 0 ? 0 : Math.min(...values);\n case 'max':\n return values.length === 0 ? 0 : Math.max(...values);\n }\n}\n\nfunction extractNumericValues(rows: { getValue: (id: string) => unknown }[], colId: string): number[] {\n return rows\n .map(r => {\n const v = r.getValue(colId);\n const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN;\n return n;\n })\n .filter(n => !Number.isNaN(n));\n}\n\ntype AggregationLabel = {\n colId: string;\n header: string;\n aggregation: ColumnAggregation;\n allValue: number;\n selectedValue: number | null;\n};\n\nconst typeLabels: Record<ColumnAggregationType, string> = {\n sum: 'Tổng',\n avg: 'Trung bình',\n count: 'Đếm',\n min: 'Nhỏ nhất',\n max: 'Lớn nhất',\n};\n\nexport const UITableAnalysisPanel = memo(() => {\n const { table, totalRows } = useUITableContext();\n const { rowSelectionState } = useUITableBodyContext();\n const { isOpen, toggle } = useUITableAnalysisContext();\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: row model\n const allRows = useMemo(() => table.getRowModel().rows, [table]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: selected rows\n const selectedRows = useMemo(() => table.getSelectedRowModel().flatRows, [table, rowSelectionState]);\n\n const headers = useMemo(() => table.getHeaderGroups()[0]?.headers ?? [], [table]);\n\n const aggregationRows = useMemo<AggregationLabel[]>(() => {\n return headers\n .filter(h => !['select', 'actions'].includes(h.id))\n .flatMap(header => {\n const agg = (header.column.columnDef.meta as AnyEntity)?.aggregation as ColumnAggregation | undefined;\n if (!agg) return [];\n\n const headerText = agg.label ?? (typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : header.id);\n\n const allValues = extractNumericValues(allRows, header.id);\n const selectedValues = selectedRows.length > 0 ? extractNumericValues(selectedRows, header.id) : null;\n\n return [\n {\n colId: header.id,\n header: headerText,\n aggregation: agg,\n allValue: computeAggregation(allRows.length, allValues, agg.type),\n selectedValue: selectedValues !== null ? computeAggregation(selectedRows.length, selectedValues, agg.type) : null,\n },\n ];\n });\n }, [headers, allRows, selectedRows]);\n\n return (\n <div data-slot=\"table-analysis-panel\" className=\"w-full border-t border-border\">\n <button\n type=\"button\"\n className={cn(\n 'flex w-full items-center justify-between px-4 py-2 text-sm font-medium text-text-positive',\n 'hover:bg-muted-bg-subtle transition-colors outline-none',\n 'focus-visible:ring-2 focus-visible:ring-primary-weak'\n )}\n onClick={toggle}\n aria-expanded={isOpen}\n >\n <span>Tổng quan dữ liệu</span>\n {isOpen ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />}\n </button>\n\n {isOpen && (\n <div className=\"px-4 pb-4 pt-2 space-y-4\">\n {/* Row summary */}\n <div className=\"flex flex-wrap gap-4\">\n <StatChip label=\"Tổng bản ghi\" value={totalRows ?? allRows.length} />\n <StatChip label=\"Hàng hiển thị\" value={allRows.length} />\n <StatChip label=\"Hàng đã chọn\" value={selectedRows.length} highlight={selectedRows.length > 0} />\n </div>\n\n {/* Column aggregations */}\n {aggregationRows.length > 0 && (\n <div>\n <p className=\"mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak\">Tóm tắt cột</p>\n <div className=\"overflow-x-auto rounded-md border border-border\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak\">\n <th className=\"px-3 py-2 text-left font-medium\">Cột</th>\n <th className=\"px-3 py-2 text-left font-medium\">Kiểu</th>\n <th className=\"px-3 py-2 text-right font-medium\">Tất cả hàng</th>\n {selectedRows.length > 0 && <th className=\"px-3 py-2 text-right font-medium\">Hàng đã chọn</th>}\n </tr>\n </thead>\n <tbody>\n {aggregationRows.map((row, idx) => (\n <tr key={row.colId} className={cn('border-b border-border last:border-b-0', idx % 2 === 1 && 'bg-muted-bg-subtle/50')}>\n <td className=\"px-3 py-2 text-text-positive font-medium\">{row.header}</td>\n <td className=\"px-3 py-2 text-text-positive-weak\">{typeLabels[row.aggregation.type]}</td>\n <td className=\"px-3 py-2 text-right\">\n <Statistic\n value={row.allValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n </td>\n {selectedRows.length > 0 && (\n <td className=\"px-3 py-2 text-right\">\n {row.selectedValue !== null ? (\n <Statistic\n value={row.selectedValue}\n prefix={row.aggregation.prefix}\n suffix={row.aggregation.suffix}\n precision={row.aggregation.precision}\n size=\"sm\"\n />\n ) : (\n <span className=\"text-text-positive-weak\">—</span>\n )}\n </td>\n )}\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n});\nUITableAnalysisPanel.displayName = 'UITableAnalysisPanel';\n\nconst StatChip = memo<{ label: string; value: number; highlight?: boolean }>(({ label, value, highlight }) => (\n <div\n className={cn(\n 'flex flex-col gap-0.5 rounded border px-3 py-2 min-w-25 bg-white',\n highlight && value > 0 ? 'border-primary bg-primary-bg-subtle' : 'border-border bg-white'\n )}\n >\n <span className=\"text-[11px] text-text-positive-weak\">{label}</span>\n <span className=\"text-base font-semibold tabular-nums text-text-positive-strong\">{value.toLocaleString()}</span>\n </div>\n));\nStatChip.displayName = 'StatChip';\n"],"mappings":"+MAaA,SAAS,EAAmB,EAAkB,EAAkB,EAAqC,CACnG,OAAQ,EAAR,CACE,IAAK,QACH,OAAO,EACT,IAAK,MACH,OAAO,EAAO,QAAQ,EAAG,IAAM,EAAI,EAAG,CAAC,EACzC,IAAK,MACH,OAAO,EAAO,SAAW,EAAI,EAAI,EAAO,QAAQ,EAAG,IAAM,EAAI,EAAG,CAAC,EAAI,EAAO,OAC9E,IAAK,MACH,OAAO,EAAO,SAAW,EAAI,EAAI,KAAK,IAAI,GAAG,CAAM,EACrD,IAAK,MACH,OAAO,EAAO,SAAW,EAAI,EAAI,KAAK,IAAI,GAAG,CAAM,CACvD,CACF,CAEA,SAAS,EAAqB,EAA+C,EAAyB,CACpG,OAAO,EACJ,IAAI,GAAK,CACR,IAAM,EAAI,EAAE,SAAS,CAAK,EAE1B,OADU,OAAO,GAAM,SAAW,OAAO,CAAC,EAAI,OAAO,GAAM,SAAW,EAAI,GAE5E,CAAC,CAAC,CACD,OAAO,GAAK,CAAC,OAAO,MAAM,CAAC,CAAC,CACjC,CAUA,MAAM,EAAoD,CACxD,IAAK,OACL,IAAK,aACL,MAAO,MACP,IAAK,WACL,IAAK,UACP,EAEa,GAAA,EAAA,EAAA,KAAA,KAAkC,CAC7C,GAAM,CAAE,QAAO,aAAcA,EAAAA,EAAkB,EACzC,CAAE,qBAAsBC,EAAAA,EAAsB,EAC9C,CAAE,SAAQ,UAAWC,EAAAA,EAA0B,EAG/C,GAAA,EAAA,EAAA,QAAA,KAAwB,EAAM,YAAY,CAAC,CAAC,KAAM,CAAC,CAAK,CAAC,EAGzD,GAAA,EAAA,EAAA,QAAA,KAA6B,EAAM,oBAAoB,CAAC,CAAC,SAAU,CAAC,EAAO,CAAiB,CAAC,EAE7F,GAAA,EAAA,EAAA,QAAA,KAAwB,EAAM,gBAAgB,CAAC,CAAC,EAAE,EAAE,SAAW,CAAC,EAAG,CAAC,CAAK,CAAC,EAE1E,GAAA,EAAA,EAAA,QAAA,KACG,EACJ,OAAO,GAAK,CAAC,CAAC,SAAU,SAAS,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAClD,QAAQ,GAAU,CACjB,IAAM,EAAO,EAAO,OAAO,UAAU,MAAoB,YACzD,GAAI,CAAC,EAAK,MAAO,CAAC,EAElB,IAAM,EAAa,EAAI,QAAU,OAAO,EAAO,OAAO,UAAU,QAAW,SAAW,EAAO,OAAO,UAAU,OAAS,EAAO,IAExH,EAAY,EAAqB,EAAS,EAAO,EAAE,EACnD,EAAiB,EAAa,OAAS,EAAI,EAAqB,EAAc,EAAO,EAAE,EAAI,KAEjG,MAAO,CACL,CACE,MAAO,EAAO,GACd,OAAQ,EACR,YAAa,EACb,SAAU,EAAmB,EAAQ,OAAQ,EAAW,EAAI,IAAI,EAChE,cAAe,IAAmB,KAA2E,KAApE,EAAmB,EAAa,OAAQ,EAAgB,EAAI,IAAI,CAC3G,CACF,CACF,CAAC,EACF,CAAC,EAAS,EAAS,CAAY,CAAC,EAEnC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,YAAU,uBAAuB,UAAU,yCAAhD,EACE,EAAA,EAAA,KAAA,CAAC,SAAD,CACE,KAAK,SACL,WAAA,EAAA,EAAA,GAAA,CACE,4FACA,0DACA,sDACF,EACA,QAAS,EACT,gBAAe,WARjB,EAUE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAA,SAAM,mBAAuB,CAAA,EAC5B,GAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,cAAD,CAAe,KAAM,EAAK,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAiB,KAAM,EAAK,CAAA,CAC9D,IAEP,IACC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oCAAf,EAEE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gCAAf,EACE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAU,MAAM,eAAe,MAAO,GAAa,EAAQ,MAAS,CAAA,GACpE,EAAA,EAAA,IAAA,CAAC,EAAD,CAAU,MAAM,gBAAgB,MAAO,EAAQ,MAAS,CAAA,GACxD,EAAA,EAAA,IAAA,CAAC,EAAD,CAAU,MAAM,eAAe,MAAO,EAAa,OAAQ,UAAW,EAAa,OAAS,CAAI,CAAA,CAC7F,IAGJ,EAAgB,OAAS,IACxB,EAAA,EAAA,KAAA,CAAC,MAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAU,sFAA6E,aAAc,CAAA,GACxG,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,4DACb,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,UAAU,0BAAjB,EACE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,KAAD,CAAI,UAAU,qFAAd,EACE,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,2CAAkC,KAAO,CAAA,GACvD,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,2CAAkC,MAAQ,CAAA,GACxD,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,4CAAmC,aAAe,CAAA,EAC/D,EAAa,OAAS,IAAK,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,4CAAmC,cAAgB,CAAA,CAC3F,GACC,CAAA,GACP,EAAA,EAAA,IAAA,CAAC,QAAD,CAAA,SACG,EAAgB,KAAK,EAAK,KACzB,EAAA,EAAA,KAAA,CAAC,KAAD,CAAoB,WAAA,EAAA,EAAA,GAAA,CAAc,yCAA0C,EAAM,GAAM,GAAK,uBAAuB,WAApH,EACE,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,oDAA4C,EAAI,MAAW,CAAA,GACzE,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,6CAAqC,EAAW,EAAI,YAAY,KAAU,CAAA,GACxF,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,iCACZ,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CACE,MAAO,EAAI,SACX,OAAQ,EAAI,YAAY,OACxB,OAAQ,EAAI,YAAY,OACxB,UAAW,EAAI,YAAY,UAC3B,KAAK,IACN,CAAA,CACC,CAAA,EACH,EAAa,OAAS,IACrB,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAU,gCACX,EAAI,gBAAkB,MASrB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,mCAA0B,GAAO,CAAA,GARjD,EAAA,EAAA,IAAA,CAACA,EAAAA,UAAD,CACE,MAAO,EAAI,cACX,OAAQ,EAAI,YAAY,OACxB,OAAQ,EAAI,YAAY,OACxB,UAAW,EAAI,YAAY,UAC3B,KAAK,IACN,CAAA,CAID,CAAA,CAEJ,GA3BK,EAAI,KA2BT,CACL,CACI,CAAA,CACF,GACJ,CAAA,CACF,CAAA,CAAA,CAEJ,GAEJ,GAET,CAAC,EACD,EAAqB,YAAc,uBAEnC,MAAM,GAAA,EAAA,EAAA,KAAA,EAAwE,CAAE,QAAO,QAAO,gBAC5F,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,WAAA,EAAA,EAAA,GAAA,CACE,mEACA,GAAa,EAAQ,EAAI,sCAAwC,wBACnE,WAJF,EAME,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,GACnE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,0EAAkE,EAAM,eAAe,CAAQ,CAAA,CAC5G,GACN,EACD,EAAS,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./tables-
|
|
2
|
-
//# sourceMappingURL=badge-display-
|
|
1
|
+
const e=require("./tables-B1O9qy-m.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({label:r,onClick:i,onRemove:a})=>r?a?(0,n.jsxs)(`div`,{className:`flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs`,onClick:e=>{i?.(),e.stopPropagation(),e.preventDefault()},children:[r,(0,n.jsx)(`button`,{className:`cursor-pointer text-text-positive-weak hover:text-text-positive-strong`,onClick:e=>{a?.(),e.stopPropagation(),e.preventDefault()},children:(0,n.jsx)(t.XIcon,{size:12})})]}):(0,n.jsx)(`button`,{className:`w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs`,onClick:e=>{i?.(),e.stopPropagation(),e.preventDefault()},children:r}):(0,n.jsx)(e.Y,{});exports.UITableBadgeDisplay=r;
|
|
2
|
+
//# sourceMappingURL=badge-display-Bs0QeCJt.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge-display-
|
|
1
|
+
{"version":3,"file":"badge-display-Bs0QeCJt.cjs","names":["UITableEmpty","XIcon"],"sources":["../packages/components/features/tables/components/atoms/badge-display.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders a pill-shaped badge for a table cell that optionally supports a click\n * action and an inline remove button; falls back to {@link UITableEmpty} when\n * `label` is falsy.\n *\n * @example\n * import { UITableBadgeDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableBadgeDisplay\n * label=\"Active\"\n * onClick={() => console.log('badge clicked')}\n * onRemove={() => console.log('remove clicked')}\n * />\n */\nexport const UITableBadgeDisplay: React.FC<{\n /** The text or number to display inside the badge. */\n label: string | number | null | undefined;\n /** Optional callback fired when the badge itself is clicked. */\n onClick?: () => void;\n /** When provided, renders a remove (×) button and fires this callback on click. */\n onRemove?: () => void;\n}> = ({ label, onClick, onRemove }) => {\n if (!label) return <UITableEmpty />;\n if (onRemove) {\n return (\n <div\n className=\"flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs\"\n onClick={e => {\n onClick?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n {label}\n <button\n className=\"cursor-pointer text-text-positive-weak hover:text-text-positive-strong\"\n onClick={e => {\n onRemove?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <XIcon size={12} />\n </button>\n </div>\n );\n }\n return (\n <button\n className=\"w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs\"\n onClick={e => {\n onClick?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n {label}\n </button>\n );\n};\n"],"mappings":"sGAkBA,MAAa,GAOP,CAAE,QAAO,UAAS,cACjB,EACD,GAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CACE,UAAU,6GACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WANF,CAQG,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,yEACV,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,YAEA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACL,KAIP,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,yFACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WAEC,CACK,CAAA,GAnCS,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Y as e}from"./tables-
|
|
2
|
-
//# sourceMappingURL=badge-display-
|
|
1
|
+
import{Y as e}from"./tables-9d53sH9E.mjs";import{XIcon as t}from"lucide-react";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({label:i,onClick:a,onRemove:o})=>i?o?r(`div`,{className:`flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs`,onClick:e=>{a?.(),e.stopPropagation(),e.preventDefault()},children:[i,n(`button`,{className:`cursor-pointer text-text-positive-weak hover:text-text-positive-strong`,onClick:e=>{o?.(),e.stopPropagation(),e.preventDefault()},children:n(t,{size:12})})]}):n(`button`,{className:`w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs`,onClick:e=>{a?.(),e.stopPropagation(),e.preventDefault()},children:i}):n(e,{});export{i as UITableBadgeDisplay};
|
|
2
|
+
//# sourceMappingURL=badge-display-Dg5XM66P.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge-display-
|
|
1
|
+
{"version":3,"file":"badge-display-Dg5XM66P.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/badge-display.tsx"],"sourcesContent":["import { XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\n/**\n * Renders a pill-shaped badge for a table cell that optionally supports a click\n * action and an inline remove button; falls back to {@link UITableEmpty} when\n * `label` is falsy.\n *\n * @example\n * import { UITableBadgeDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableBadgeDisplay\n * label=\"Active\"\n * onClick={() => console.log('badge clicked')}\n * onRemove={() => console.log('remove clicked')}\n * />\n */\nexport const UITableBadgeDisplay: React.FC<{\n /** The text or number to display inside the badge. */\n label: string | number | null | undefined;\n /** Optional callback fired when the badge itself is clicked. */\n onClick?: () => void;\n /** When provided, renders a remove (×) button and fires this callback on click. */\n onRemove?: () => void;\n}> = ({ label, onClick, onRemove }) => {\n if (!label) return <UITableEmpty />;\n if (onRemove) {\n return (\n <div\n className=\"flex w-fit gap-x-0.5 rounded-full border border-border py-1 pr-2 pl-3 text-text-positive text-xs shadow-xs\"\n onClick={e => {\n onClick?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n {label}\n <button\n className=\"cursor-pointer text-text-positive-weak hover:text-text-positive-strong\"\n onClick={e => {\n onRemove?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <XIcon size={12} />\n </button>\n </div>\n );\n }\n return (\n <button\n className=\"w-fit rounded-full border border-border px-3 py-1 text-text-positive text-xs shadow-xs\"\n onClick={e => {\n onClick?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n {label}\n </button>\n );\n};\n"],"mappings":"iIAkBA,MAAa,GAOP,CAAE,QAAO,UAAS,cACjB,EACD,EAEA,EAAC,MAAD,CACE,UAAU,6GACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WANF,CAQG,EACD,EAAC,SAAD,CACE,UAAU,yEACV,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WAEA,EAAC,EAAD,CAAO,KAAM,EAAK,CAAA,CACZ,CAAA,CACL,IAIP,EAAC,SAAD,CACE,UAAU,yFACV,QAAS,GAAK,CACZ,IAAU,EACV,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,WAEC,CACK,CAAA,EAnCS,EAAC,EAAD,CAAe,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./tables-
|
|
2
|
-
//# sourceMappingURL=boolean-display-
|
|
1
|
+
const e=require("./tables-B1O9qy-m.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({value:r})=>r==null?(0,n.jsx)(e.Y,{}):r===!1?(0,n.jsx)(t.XIcon,{size:14,strokeWidth:2,className:`text-danger-strong`}):(0,n.jsx)(t.CheckIcon,{size:14,strokeWidth:2,className:`text-success-strong`});exports.UITableBooleanDisplay=r;
|
|
2
|
+
//# sourceMappingURL=boolean-display-BnN32_Jd.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"boolean-display-
|
|
1
|
+
{"version":3,"file":"boolean-display-BnN32_Jd.cjs","names":["UITableEmpty","XIcon","CheckIcon"],"sources":["../packages/components/features/tables/components/atoms/boolean-display.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\nexport const UITableBooleanDisplay: React.FC<{\n value: boolean | null | undefined;\n}> = ({ value }) => {\n if (value === null || value === undefined) return <UITableEmpty />;\n if (value === false) {\n return <XIcon size={14} strokeWidth={2} className=\"text-danger-strong\" />;\n }\n return <CheckIcon size={14} strokeWidth={2} className=\"text-success-strong\" />;\n};\n"],"mappings":"sGAIA,MAAa,GAEP,CAAE,WACF,GAAU,MAAoC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAC7D,IAAU,IACL,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,KAAM,GAAI,YAAa,EAAG,UAAU,oBAAsB,CAAA,GAEnE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,GAAI,YAAa,EAAG,UAAU,qBAAuB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Y as e}from"./tables-
|
|
2
|
-
//# sourceMappingURL=boolean-display-
|
|
1
|
+
import{Y as e}from"./tables-9d53sH9E.mjs";import{CheckIcon as t,XIcon as n}from"lucide-react";import{jsx as r}from"react/jsx-runtime";const i=({value:i})=>i==null?r(e,{}):i===!1?r(n,{size:14,strokeWidth:2,className:`text-danger-strong`}):r(t,{size:14,strokeWidth:2,className:`text-success-strong`});export{i as UITableBooleanDisplay};
|
|
2
|
+
//# sourceMappingURL=boolean-display-DVn3UGuZ.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"boolean-display-
|
|
1
|
+
{"version":3,"file":"boolean-display-DVn3UGuZ.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/boolean-display.tsx"],"sourcesContent":["import { CheckIcon, XIcon } from 'lucide-react';\n\nimport { UITableEmpty } from './empty';\n\nexport const UITableBooleanDisplay: React.FC<{\n value: boolean | null | undefined;\n}> = ({ value }) => {\n if (value === null || value === undefined) return <UITableEmpty />;\n if (value === false) {\n return <XIcon size={14} strokeWidth={2} className=\"text-danger-strong\" />;\n }\n return <CheckIcon size={14} strokeWidth={2} className=\"text-success-strong\" />;\n};\n"],"mappings":"sIAIA,MAAa,GAEP,CAAE,WACF,GAAU,KAAoC,EAAC,EAAD,CAAe,CAAA,EAC7D,IAAU,GACL,EAAC,EAAD,CAAO,KAAM,GAAI,YAAa,EAAG,UAAU,oBAAsB,CAAA,EAEnE,EAAC,EAAD,CAAW,KAAM,GAAI,YAAa,EAAG,UAAU,qBAAuB,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Y as e}from"./tables-
|
|
2
|
-
//# sourceMappingURL=currency-display-
|
|
1
|
+
import{Y as e}from"./tables-9d53sH9E.mjs";import{memo as t,useMemo as n}from"react";import{cn as r}from"@customafk/react-toolkit/utils";import{jsx as i}from"react/jsx-runtime";const a=t(({value:t,currency:a=`USD`,locale:o=`en-US`,display:s=`symbol`,size:c=`md`,colorize:l=!1})=>{let u=n(()=>{let e=typeof t==`string`?Number(t.trim()):t;return e==null||Number.isNaN(e)||!Number.isFinite(e)?null:new Intl.NumberFormat(o,{style:`currency`,currency:a,currencyDisplay:s,minimumFractionDigits:2,maximumFractionDigits:2}).format(e)},[t,a,o,s]),d=n(()=>{let e=typeof t==`string`?Number(t.trim()):t;return typeof e==`number`&&e<0},[t]);return u?i(`p`,{className:r(`font-number tabular-nums`,c===`xs`&&`text-xs`,c===`sm`&&`text-sm`,c===`md`&&`text-base`,c===`lg`&&`text-lg`,c===`xl`&&`text-xl`,!l&&`text-text-positive`,l&&d&&`text-danger-strong`,l&&!d&&`text-success-strong`),children:u}):i(e,{})});a.displayName=`UITableCurrencyDisplay`;export{a as UITableCurrencyDisplay};
|
|
2
|
+
//# sourceMappingURL=currency-display-CKLQ_lxN.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currency-display-
|
|
1
|
+
{"version":3,"file":"currency-display-CKLQ_lxN.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/currency-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableCurrencyDisplay} component. */\ntype Props = {\n /** The numeric value to format as currency; falsy / `NaN` renders an empty state. */\n value: number | string | null | undefined;\n /** ISO 4217 currency code (default: `'USD'`). */\n currency?: string;\n /**\n * BCP 47 locale used for number formatting (default: `'en-US'`).\n * Controls digit grouping and decimal separators.\n */\n locale?: string;\n /** How to display the currency symbol — `'symbol'` (default), `'code'`, or `'name'`. */\n display?: 'symbol' | 'code' | 'name';\n /** Font-size variant (default: `'md'`). */\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n /** When `true`, applies a green tint for positive and red tint for negative values. */\n colorize?: boolean;\n};\n\n/**\n * Formats a numeric value as a locale-aware currency string in a table cell.\n * Always shows exactly two decimal places and uses the browser's `Intl` API for\n * symbol placement. Renders {@link UITableEmpty} when the value is absent or\n * invalid.\n *\n * @example\n * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableCurrencyDisplay value={1234.5} currency=\"USD\" colorize />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false }: Props) => {\n const formatted = useMemo(() => {\n const num = typeof value === 'string' ? Number(value.trim()) : value;\n if (num === null || num === undefined || Number.isNaN(num) || !Number.isFinite(num)) return null;\n\n return new Intl.NumberFormat(locale, {\n style: 'currency',\n currency,\n currencyDisplay: display,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(num);\n }, [value, currency, locale, display]);\n\n const isNegative = useMemo(() => {\n const num = typeof value === 'string' ? Number(value.trim()) : value;\n return typeof num === 'number' && num < 0;\n }, [value]);\n\n if (!formatted) return <UITableEmpty />;\n\n return (\n <p\n className={cn(\n 'font-number tabular-nums',\n size === 'xs' && 'text-xs',\n size === 'sm' && 'text-sm',\n size === 'md' && 'text-base',\n size === 'lg' && 'text-lg',\n size === 'xl' && 'text-xl',\n !colorize && 'text-text-positive',\n colorize && isNegative && 'text-danger-strong',\n colorize && !isNegative && 'text-success-strong'\n )}\n >\n {formatted}\n </p>\n );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"gLAsCA,MAAa,EAAyB,GAAM,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,MAAmB,CACtJ,IAAM,EAAY,MAAc,CAC9B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAG/D,OAFI,GAAQ,MAA6B,OAAO,MAAM,CAAG,GAAK,CAAC,OAAO,SAAS,CAAG,EAAU,KAErF,IAAI,KAAK,aAAa,EAAQ,CACnC,MAAO,WACP,WACA,gBAAiB,EACjB,sBAAuB,EACvB,sBAAuB,CACzB,CAAC,CAAC,CAAC,OAAO,CAAG,CACf,EAAG,CAAC,EAAO,EAAU,EAAQ,CAAO,CAAC,EAE/B,EAAa,MAAc,CAC/B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC/D,OAAO,OAAO,GAAQ,UAAY,EAAM,CAC1C,EAAG,CAAC,CAAK,CAAC,EAIV,OAFK,EAGH,EAAC,IAAD,CACE,UAAW,EACT,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAY,qBACb,GAAY,GAAc,qBAC1B,GAAY,CAAC,GAAc,qBAC7B,WAEC,CACA,CAAA,EAjBkB,EAAC,EAAD,CAAe,CAAA,CAmBxC,CAAC,EACD,EAAuB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./tables-
|
|
2
|
-
//# sourceMappingURL=currency-display-
|
|
1
|
+
const e=require("./tables-B1O9qy-m.cjs");let t=require("react"),n=require("@customafk/react-toolkit/utils"),r=require("react/jsx-runtime");const i=(0,t.memo)(({value:i,currency:a=`USD`,locale:o=`en-US`,display:s=`symbol`,size:c=`md`,colorize:l=!1})=>{let u=(0,t.useMemo)(()=>{let e=typeof i==`string`?Number(i.trim()):i;return e==null||Number.isNaN(e)||!Number.isFinite(e)?null:new Intl.NumberFormat(o,{style:`currency`,currency:a,currencyDisplay:s,minimumFractionDigits:2,maximumFractionDigits:2}).format(e)},[i,a,o,s]),d=(0,t.useMemo)(()=>{let e=typeof i==`string`?Number(i.trim()):i;return typeof e==`number`&&e<0},[i]);return u?(0,r.jsx)(`p`,{className:(0,n.cn)(`font-number tabular-nums`,c===`xs`&&`text-xs`,c===`sm`&&`text-sm`,c===`md`&&`text-base`,c===`lg`&&`text-lg`,c===`xl`&&`text-xl`,!l&&`text-text-positive`,l&&d&&`text-danger-strong`,l&&!d&&`text-success-strong`),children:u}):(0,r.jsx)(e.Y,{})});i.displayName=`UITableCurrencyDisplay`,exports.UITableCurrencyDisplay=i;
|
|
2
|
+
//# sourceMappingURL=currency-display-CZ6PJAzu.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currency-display-
|
|
1
|
+
{"version":3,"file":"currency-display-CZ6PJAzu.cjs","names":["UITableEmpty"],"sources":["../packages/components/features/tables/components/atoms/currency-display.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useMemo } from 'react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableCurrencyDisplay} component. */\ntype Props = {\n /** The numeric value to format as currency; falsy / `NaN` renders an empty state. */\n value: number | string | null | undefined;\n /** ISO 4217 currency code (default: `'USD'`). */\n currency?: string;\n /**\n * BCP 47 locale used for number formatting (default: `'en-US'`).\n * Controls digit grouping and decimal separators.\n */\n locale?: string;\n /** How to display the currency symbol — `'symbol'` (default), `'code'`, or `'name'`. */\n display?: 'symbol' | 'code' | 'name';\n /** Font-size variant (default: `'md'`). */\n size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n /** When `true`, applies a green tint for positive and red tint for negative values. */\n colorize?: boolean;\n};\n\n/**\n * Formats a numeric value as a locale-aware currency string in a table cell.\n * Always shows exactly two decimal places and uses the browser's `Intl` API for\n * symbol placement. Renders {@link UITableEmpty} when the value is absent or\n * invalid.\n *\n * @example\n * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableCurrencyDisplay value={1234.5} currency=\"USD\" colorize />\n */\nexport const UITableCurrencyDisplay = memo(({ value, currency = 'USD', locale = 'en-US', display = 'symbol', size = 'md', colorize = false }: Props) => {\n const formatted = useMemo(() => {\n const num = typeof value === 'string' ? Number(value.trim()) : value;\n if (num === null || num === undefined || Number.isNaN(num) || !Number.isFinite(num)) return null;\n\n return new Intl.NumberFormat(locale, {\n style: 'currency',\n currency,\n currencyDisplay: display,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(num);\n }, [value, currency, locale, display]);\n\n const isNegative = useMemo(() => {\n const num = typeof value === 'string' ? Number(value.trim()) : value;\n return typeof num === 'number' && num < 0;\n }, [value]);\n\n if (!formatted) return <UITableEmpty />;\n\n return (\n <p\n className={cn(\n 'font-number tabular-nums',\n size === 'xs' && 'text-xs',\n size === 'sm' && 'text-sm',\n size === 'md' && 'text-base',\n size === 'lg' && 'text-lg',\n size === 'xl' && 'text-xl',\n !colorize && 'text-text-positive',\n colorize && isNegative && 'text-danger-strong',\n colorize && !isNegative && 'text-success-strong'\n )}\n >\n {formatted}\n </p>\n );\n});\nUITableCurrencyDisplay.displayName = 'UITableCurrencyDisplay';\n"],"mappings":"2IAsCA,MAAa,GAAA,EAAA,EAAA,KAAA,EAA+B,CAAE,QAAO,WAAW,MAAO,SAAS,QAAS,UAAU,SAAU,OAAO,KAAM,WAAW,MAAmB,CACtJ,IAAM,GAAA,EAAA,EAAA,QAAA,KAA0B,CAC9B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAG/D,OAFI,GAAQ,MAA6B,OAAO,MAAM,CAAG,GAAK,CAAC,OAAO,SAAS,CAAG,EAAU,KAErF,IAAI,KAAK,aAAa,EAAQ,CACnC,MAAO,WACP,WACA,gBAAiB,EACjB,sBAAuB,EACvB,sBAAuB,CACzB,CAAC,CAAC,CAAC,OAAO,CAAG,CACf,EAAG,CAAC,EAAO,EAAU,EAAQ,CAAO,CAAC,EAE/B,GAAA,EAAA,EAAA,QAAA,KAA2B,CAC/B,IAAM,EAAM,OAAO,GAAU,SAAW,OAAO,EAAM,KAAK,CAAC,EAAI,EAC/D,OAAO,OAAO,GAAQ,UAAY,EAAM,CAC1C,EAAG,CAAC,CAAK,CAAC,EAIV,OAFK,GAGH,EAAA,EAAA,IAAA,CAAC,IAAD,CACE,WAAA,EAAA,EAAA,GAAA,CACE,2BACA,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,YACjB,IAAS,MAAQ,UACjB,IAAS,MAAQ,UACjB,CAAC,GAAY,qBACb,GAAY,GAAc,qBAC1B,GAAY,CAAC,GAAc,qBAC7B,WAEC,CACA,CAAA,GAjBkB,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,CAmBxC,CAAC,EACD,EAAuB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./date-B3cozmfV.cjs"),t=require("./ui/badge.cjs"),n=require("./ui/tooltip.cjs"),r=require("./tables-
|
|
2
|
-
//# sourceMappingURL=date-display-
|
|
1
|
+
const e=require("./date-B3cozmfV.cjs"),t=require("./ui/badge.cjs"),n=require("./ui/tooltip.cjs"),r=require("./tables-B1O9qy-m.cjs");let i=require("react/jsx-runtime");const a=({date:a})=>a==null?(0,i.jsx)(r.Y,{}):(0,i.jsx)(n.TooltipProvider,{children:(0,i.jsxs)(n.Tooltip,{children:[(0,i.jsx)(n.TooltipTrigger,{asChild:!0,children:(0,i.jsx)(t.Badge,{className:`h-fit`,children:(0,i.jsx)(e.t,{date:a,format:`medium`,className:`font-normal text-white`})})}),(0,i.jsx)(n.TooltipContent,{className:`rounded px-2`,children:(0,i.jsx)(e.t,{date:a,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});exports.UITableDateDisplay=a;
|
|
2
|
+
//# sourceMappingURL=date-display-BQOVmN7S.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-display-
|
|
1
|
+
{"version":3,"file":"date-display-BQOVmN7S.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","Badge","DateDisplay","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/date-display.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableDateDisplay} component. */\ntype Props = {\n /** The date value to format and display; `null`/`undefined` renders an empty state. */\n date: Date | string | number | null | undefined;\n};\n\n/**\n * Displays a date as a compact badge in a table cell with a tooltip that shows\n * the full date and time on hover; renders {@link UITableEmpty} when `date` is\n * `null` or `undefined`.\n *\n * @example\n * import { UITableDateDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />\n */\nexport const UITableDateDisplay: React.FC<Props> = ({ date }) => {\n if (typeof date === 'undefined' || date === null) return <UITableEmpty />;\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Badge className=\"h-fit\">\n <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white\" />\n </Badge>\n </TooltipTrigger>\n <TooltipContent className=\"rounded px-2\">\n <DateDisplay date={date} format=\"full\" showTime className=\"font-medium text-text-negative text-xs\" />\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n );\n};\n"],"mappings":"uKAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,MAAa,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAEtE,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,kBACf,EAAA,EAAA,IAAA,CAACC,EAAAA,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,UAAU,yBACxB,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./date-Nsz0Pewe.mjs";import{Badge as t}from"./ui/badge.mjs";import{Tooltip as n,TooltipContent as r,TooltipProvider as i,TooltipTrigger as a}from"./ui/tooltip.mjs";import{Y as o}from"./tables-
|
|
2
|
-
//# sourceMappingURL=date-display-
|
|
1
|
+
import{t as e}from"./date-Nsz0Pewe.mjs";import{Badge as t}from"./ui/badge.mjs";import{Tooltip as n,TooltipContent as r,TooltipProvider as i,TooltipTrigger as a}from"./ui/tooltip.mjs";import{Y as o}from"./tables-9d53sH9E.mjs";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=({date:l})=>l==null?s(o,{}):s(i,{children:c(n,{children:[s(a,{asChild:!0,children:s(t,{className:`h-fit`,children:s(e,{date:l,format:`medium`,className:`font-normal text-white`})})}),s(r,{className:`rounded px-2`,children:s(e,{date:l,format:`full`,showTime:!0,className:`font-medium text-text-negative text-xs`})})]})});export{l as UITableDateDisplay};
|
|
2
|
+
//# sourceMappingURL=date-display-BrCdJkmq.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-display-
|
|
1
|
+
{"version":3,"file":"date-display-BrCdJkmq.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/date-display.tsx"],"sourcesContent":["import { Badge } from '@/components/ui/badge';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { DateDisplay } from '@/components/data-display/date';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableDateDisplay} component. */\ntype Props = {\n /** The date value to format and display; `null`/`undefined` renders an empty state. */\n date: Date | string | number | null | undefined;\n};\n\n/**\n * Displays a date as a compact badge in a table cell with a tooltip that shows\n * the full date and time on hover; renders {@link UITableEmpty} when `date` is\n * `null` or `undefined`.\n *\n * @example\n * import { UITableDateDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />\n */\nexport const UITableDateDisplay: React.FC<Props> = ({ date }) => {\n if (typeof date === 'undefined' || date === null) return <UITableEmpty />;\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Badge className=\"h-fit\">\n <DateDisplay date={date} format=\"medium\" className=\"font-normal text-white\" />\n </Badge>\n </TooltipTrigger>\n <TooltipContent className=\"rounded px-2\">\n <DateDisplay date={date} format=\"full\" showTime className=\"font-medium text-text-negative text-xs\" />\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n );\n};\n"],"mappings":"mRAsBA,MAAa,GAAuC,CAAE,UACzC,GAAiC,KAAa,EAAC,EAAD,CAAe,CAAA,EAEtE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,EAAD,CAAO,UAAU,iBACf,EAAC,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,wBACxB,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-
|
|
2
|
-
//# sourceMappingURL=description-display-
|
|
1
|
+
import{Paragraph as e}from"./typography/paragraph.mjs";import{Tooltip as t,TooltipContent as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-9d53sH9E.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({content:s})=>s==null?a(i,{}):o(t,{children:[a(r,{children:a(e,{variant:`sm`,className:`line-clamp-2 whitespace-pre-line break-all`,children:s})}),a(n,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:o(`div`,{className:`flex flex-col gap-y-2`,children:[a(e,{variant:`xs`,className:`whitespace-pre-line text-wrap break-keep text-text-negative-weak`,children:s}),o(`p`,{className:`w-full text-end`,children:[s.toString().length,` chars`]})]})})]});export{s as UITableDescriptionDisplay};
|
|
2
|
+
//# sourceMappingURL=description-display-BQFLzI2g.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"description-display-
|
|
1
|
+
{"version":3,"file":"description-display-BQFLzI2g.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n content: string | null | undefined | number;\n}> = ({ content }) => {\n if (content === undefined || content === null) {\n return <UITableEmpty />;\n }\n return (\n <Tooltip>\n <TooltipTrigger>\n <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n {content}\n </Paragraph>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n <div className=\"flex flex-col gap-y-2\">\n <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n {content}\n </Paragraph>\n <p className=\"w-full text-end\">{content.toString().length} chars</p>\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"sOAeA,MAAa,GAGP,CAAE,aACF,GAAqC,KAChC,EAAC,EAAD,CAAe,CAAA,EAGtB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,wCACtC,EAAC,MAAD,CAAK,UAAU,iCAAf,CACE,EAAC,EAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,EACX,EAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-
|
|
2
|
-
//# sourceMappingURL=description-display-
|
|
1
|
+
const e=require("./typography/paragraph.cjs"),t=require("./ui/tooltip.cjs"),n=require("./tables-B1O9qy-m.cjs");let r=require("react/jsx-runtime");const i=({content:i})=>i==null?(0,r.jsx)(n.Y,{}):(0,r.jsxs)(t.Tooltip,{children:[(0,r.jsx)(t.TooltipTrigger,{children:(0,r.jsx)(e.Paragraph,{variant:`sm`,className:`line-clamp-2 whitespace-pre-line break-all`,children:i})}),(0,r.jsx)(t.TooltipContent,{align:`start`,className:`h-fit min-w-48 max-w-80 pt-4`,children:(0,r.jsxs)(`div`,{className:`flex flex-col gap-y-2`,children:[(0,r.jsx)(e.Paragraph,{variant:`xs`,className:`whitespace-pre-line text-wrap break-keep text-text-negative-weak`,children:i}),(0,r.jsxs)(`p`,{className:`w-full text-end`,children:[i.toString().length,` chars`]})]})})]});exports.UITableDescriptionDisplay=i;
|
|
2
|
+
//# sourceMappingURL=description-display-DnDAB3a1.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"description-display-
|
|
1
|
+
{"version":3,"file":"description-display-DnDAB3a1.cjs","names":["UITableEmpty","Tooltip","TooltipTrigger","Paragraph","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/description-display.tsx"],"sourcesContent":["import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { UITableEmpty } from './empty';\nimport { Paragraph } from '@/components/typography/paragraph';\n\n/**\n * Renders a two-line-clamped description in a table cell with a tooltip that\n * reveals the full text and its character count; falls back to\n * {@link UITableEmpty} when `content` is `null` or `undefined`.\n *\n * @example\n * import { UITableDescriptionDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableDescriptionDisplay content=\"A detailed description of this record.\" />\n */\nexport const UITableDescriptionDisplay: React.FC<{\n /** The text or numeric value to display; `null`/`undefined` renders an empty state. */\n content: string | null | undefined | number;\n}> = ({ content }) => {\n if (content === undefined || content === null) {\n return <UITableEmpty />;\n }\n return (\n <Tooltip>\n <TooltipTrigger>\n <Paragraph variant=\"sm\" className=\"line-clamp-2 whitespace-pre-line break-all\">\n {content}\n </Paragraph>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"h-fit min-w-48 max-w-80 pt-4\">\n <div className=\"flex flex-col gap-y-2\">\n <Paragraph variant=\"xs\" className=\"whitespace-pre-line text-wrap break-keep text-text-negative-weak\">\n {content}\n </Paragraph>\n <p className=\"w-full text-end\">{content.toString().length} chars</p>\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"mappings":"kJAeA,MAAa,GAGP,CAAE,aACF,GAAqC,MAChC,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,GAGtB,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,UACE,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,sDAC/B,CACQ,CAAA,CACG,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,yCACtC,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iCAAf,EACE,EAAA,EAAA,IAAA,CAACD,EAAAA,UAAD,CAAW,QAAQ,KAAK,UAAU,4EAC/B,CACQ,CAAA,GACX,EAAA,EAAA,KAAA,CAAC,IAAD,CAAG,UAAU,2BAAb,CAAgC,EAAQ,SAAS,CAAC,CAAC,OAAO,QAAS,GAChE,GACS,CAAA,CACT,CAAA,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./ui/tooltip.cjs"),t=require("./tables-
|
|
2
|
-
//# sourceMappingURL=email-display-
|
|
1
|
+
const e=require("./ui/tooltip.cjs"),t=require("./tables-B1O9qy-m.cjs");let n=require("lucide-react"),r=require("react"),i=require("react/jsx-runtime");const a=({email:a,linkable:o=!0})=>{let[s,c]=(0,r.useState)(!1);return a?(0,i.jsx)(e.TooltipProvider,{children:(0,i.jsxs)(`div`,{className:`group flex items-center gap-x-1.5`,children:[(0,i.jsx)(n.MailIcon,{size:13,className:`shrink-0 text-text-positive-weak`}),o?(0,i.jsx)(`a`,{href:`mailto:${a}`,className:`truncate text-primary text-sm underline-offset-2 hover:underline`,onClick:e=>e.stopPropagation(),children:a}):(0,i.jsx)(`span`,{className:`truncate text-text-positive text-sm`,children:a}),(0,i.jsxs)(e.Tooltip,{children:[(0,i.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,i.jsx)(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),navigator.clipboard.writeText(a).then(()=>{c(!0),setTimeout(()=>c(!1),1500)})},className:`shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive`,children:s?(0,i.jsx)(n.CheckIcon,{size:13,className:`text-success-strong`}):(0,i.jsx)(n.CopyIcon,{size:13})})}),(0,i.jsx)(e.TooltipContent,{children:s?`Copied!`:`Copy email`})]})]})}):(0,i.jsx)(t.Y,{})};exports.UITableEmailDisplay=a;
|
|
2
|
+
//# sourceMappingURL=email-display-D6ZgA_en.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"email-display-
|
|
1
|
+
{"version":3,"file":"email-display-D6ZgA_en.cjs","names":["UITableEmpty","TooltipProvider","MailIcon","Tooltip","TooltipTrigger","CheckIcon","CopyIcon","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/email-display.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { CheckIcon, CopyIcon, MailIcon } from 'lucide-react';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableEmailDisplay} component. */\ntype Props = {\n /** The email address to display; `null`/`undefined`/empty renders an empty state. */\n email: string | null | undefined;\n /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */\n linkable?: boolean;\n};\n\n/**\n * Displays an email address in a table cell with a copy-to-clipboard button.\n * Shows a brief checkmark confirmation after copying. Optionally wraps the\n * address in a `mailto:` link. Renders {@link UITableEmpty} when `email` is\n * absent.\n *\n * @example\n * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEmailDisplay email=\"jane@example.com\" />\n */\nexport const UITableEmailDisplay: React.FC<Props> = ({ email, linkable = true }) => {\n const [copied, setCopied] = useState(false);\n\n if (!email) return <UITableEmpty />;\n\n const handleCopy = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n navigator.clipboard.writeText(email).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n });\n };\n\n return (\n <TooltipProvider>\n <div className=\"group flex items-center gap-x-1.5\">\n <MailIcon size={13} className=\"shrink-0 text-text-positive-weak\" />\n\n {linkable ? (\n <a href={`mailto:${email}`} className=\"truncate text-primary text-sm underline-offset-2 hover:underline\" onClick={e => e.stopPropagation()}>\n {email}\n </a>\n ) : (\n <span className=\"truncate text-text-positive text-sm\">{email}</span>\n )}\n\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={handleCopy}\n className=\"shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive\"\n >\n {copied ? <CheckIcon size={13} className=\"text-success-strong\" /> : <CopyIcon size={13} />}\n </button>\n </TooltipTrigger>\n <TooltipContent>{copied ? 'Copied!' : 'Copy email'}</TooltipContent>\n </Tooltip>\n </div>\n </TooltipProvider>\n );\n};\n"],"mappings":"uJA4BA,MAAa,GAAwC,CAAE,QAAO,WAAW,MAAW,CAClF,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,SAAA,CAAsB,EAAK,EAa1C,OAXK,GAYH,EAAA,EAAA,IAAA,CAACC,EAAAA,gBAAD,CAAA,UACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,6CAAf,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,GAAI,UAAU,kCAAoC,CAAA,EAEjE,GACC,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,KAAM,UAAU,IAAS,UAAU,mEAAmE,QAAS,GAAK,EAAE,gBAAgB,WACtI,CACA,CAAA,GAEH,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,GAGrE,EAAA,EAAA,KAAA,CAACC,EAAAA,QAAD,CAAA,SAAA,EACE,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,QAAA,aACd,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,QAzBQ,GAAwB,CAC1C,EAAE,gBAAgB,EAClB,EAAE,eAAe,EACjB,UAAU,UAAU,UAAU,CAAK,CAAC,CAAC,SAAW,CAC9C,EAAU,EAAI,EACd,eAAiB,EAAU,EAAK,EAAG,IAAI,CACzC,CAAC,CACH,EAmBY,UAAU,yIAET,GAAS,EAAA,EAAA,IAAA,CAACC,EAAAA,UAAD,CAAW,KAAM,GAAI,UAAU,qBAAuB,CAAA,GAAI,EAAA,EAAA,IAAA,CAACC,EAAAA,SAAD,CAAU,KAAM,EAAK,CAAA,CACnF,CAAA,CACM,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAA,SAAiB,EAAS,UAAY,YAA6B,CAAA,CAC5D,CAAA,CAAA,CACN,GACU,CAAA,GApCA,EAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAe,CAAA,CAsCpC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-
|
|
2
|
-
//# sourceMappingURL=email-display-
|
|
1
|
+
import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Y as i}from"./tables-9d53sH9E.mjs";import{CheckIcon as a,CopyIcon as o,MailIcon as s}from"lucide-react";import{useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({email:d,linkable:f=!0})=>{let[p,m]=c(!1);return d?l(n,{children:u(`div`,{className:`group flex items-center gap-x-1.5`,children:[l(s,{size:13,className:`shrink-0 text-text-positive-weak`}),f?l(`a`,{href:`mailto:${d}`,className:`truncate text-primary text-sm underline-offset-2 hover:underline`,onClick:e=>e.stopPropagation(),children:d}):l(`span`,{className:`truncate text-text-positive text-sm`,children:d}),u(e,{children:[l(r,{asChild:!0,children:l(`button`,{onClick:e=>{e.stopPropagation(),e.preventDefault(),navigator.clipboard.writeText(d).then(()=>{m(!0),setTimeout(()=>m(!1),1500)})},className:`shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive`,children:p?l(a,{size:13,className:`text-success-strong`}):l(o,{size:13})})}),l(t,{children:p?`Copied!`:`Copy email`})]})]})}):l(i,{})};export{d as UITableEmailDisplay};
|
|
2
|
+
//# sourceMappingURL=email-display-m745lUts.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"email-display-
|
|
1
|
+
{"version":3,"file":"email-display-m745lUts.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/email-display.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { CheckIcon, CopyIcon, MailIcon } from 'lucide-react';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableEmailDisplay} component. */\ntype Props = {\n /** The email address to display; `null`/`undefined`/empty renders an empty state. */\n email: string | null | undefined;\n /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */\n linkable?: boolean;\n};\n\n/**\n * Displays an email address in a table cell with a copy-to-clipboard button.\n * Shows a brief checkmark confirmation after copying. Optionally wraps the\n * address in a `mailto:` link. Renders {@link UITableEmpty} when `email` is\n * absent.\n *\n * @example\n * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableEmailDisplay email=\"jane@example.com\" />\n */\nexport const UITableEmailDisplay: React.FC<Props> = ({ email, linkable = true }) => {\n const [copied, setCopied] = useState(false);\n\n if (!email) return <UITableEmpty />;\n\n const handleCopy = (e: React.MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n navigator.clipboard.writeText(email).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n });\n };\n\n return (\n <TooltipProvider>\n <div className=\"group flex items-center gap-x-1.5\">\n <MailIcon size={13} className=\"shrink-0 text-text-positive-weak\" />\n\n {linkable ? (\n <a href={`mailto:${email}`} className=\"truncate text-primary text-sm underline-offset-2 hover:underline\" onClick={e => e.stopPropagation()}>\n {email}\n </a>\n ) : (\n <span className=\"truncate text-text-positive text-sm\">{email}</span>\n )}\n\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={handleCopy}\n className=\"shrink-0 cursor-pointer text-text-positive-weak opacity-0 transition-opacity group-hover:opacity-100 hover:text-text-positive\"\n >\n {copied ? <CheckIcon size={13} className=\"text-success-strong\" /> : <CopyIcon size={13} />}\n </button>\n </TooltipTrigger>\n <TooltipContent>{copied ? 'Copied!' : 'Copy email'}</TooltipContent>\n </Tooltip>\n </div>\n </TooltipProvider>\n );\n};\n"],"mappings":"0SA4BA,MAAa,GAAwC,CAAE,QAAO,WAAW,MAAW,CAClF,GAAM,CAAC,EAAQ,GAAa,EAAS,EAAK,EAa1C,OAXK,EAYH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAU,6CAAf,CACE,EAAC,EAAD,CAAU,KAAM,GAAI,UAAU,kCAAoC,CAAA,EAEjE,EACC,EAAC,IAAD,CAAG,KAAM,UAAU,IAAS,UAAU,mEAAmE,QAAS,GAAK,EAAE,gBAAgB,WACtI,CACA,CAAA,EAEH,EAAC,OAAD,CAAM,UAAU,+CAAuC,CAAY,CAAA,EAGrE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,YACd,EAAC,SAAD,CACE,QAzBQ,GAAwB,CAC1C,EAAE,gBAAgB,EAClB,EAAE,eAAe,EACjB,UAAU,UAAU,UAAU,CAAK,CAAC,CAAC,SAAW,CAC9C,EAAU,EAAI,EACd,eAAiB,EAAU,EAAK,EAAG,IAAI,CACzC,CAAC,CACH,EAmBY,UAAU,yIAET,EAAS,EAAC,EAAD,CAAW,KAAM,GAAI,UAAU,qBAAuB,CAAA,EAAI,EAAC,EAAD,CAAU,KAAM,EAAK,CAAA,CACnF,CAAA,CACM,CAAA,EAChB,EAAC,EAAD,CAAA,SAAiB,EAAS,UAAY,YAA6B,CAAA,CAC5D,CAAA,CAAA,CACN,GACU,CAAA,EApCA,EAAC,EAAD,CAAe,CAAA,CAsCpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../tables-
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../tables-B1O9qy-m.cjs");exports.UITableAnalysisPanel=e.t,exports.UITableAvatarNameDisplay=e.n,exports.UITableBadgeDisplay=e.r,exports.UITableBody=e.W,exports.UITableBooleanDisplay=e.i,exports.UITableCell=e.U,exports.UITableCellActions=e.H,exports.UITableCellSelect=e.V,exports.UITableContainer=e.D,exports.UITableCurrencyDisplay=e.a,exports.UITableDateDisplay=e.o,exports.UITableDescriptionDisplay=e.s,exports.UITableEditButton=e.c,exports.UITableEmailDisplay=e.l,exports.UITableEmpty=e.Y,exports.UITableEmptyDisplay=e.B,exports.UITableFilter=e.u,exports.UITableFooter=e.z,exports.UITableFooterRow=e.R,exports.UITableHead=e.L,exports.UITableHeadCell=e.F,exports.UITableHeadCellOption=e.I,exports.UITableHeadCellSelect=e.P,exports.UITableHeadRow=e.N,exports.UITableInnerTable=e.M,exports.UITableInnerWrapper=e.j,exports.UITableListDisplay=e.d,exports.UITableLoadMore=e.A,exports.UITableMoreButton=e.f,exports.UITableNameDisplay=e.p,exports.UITablePermalink=e.m,exports.UITablePhoneNumberDisplay=e.h,exports.UITableProgressDisplay=e.g,exports.UITableProvider=e.E,exports.UITableRemoveButton=e._,exports.UITableRow=e.k,exports.UITableStatisticDisplay=e.v,exports.UITableStatusDisplay=e.y,exports.UITableSummaryBar=e.b,exports.UITableToggleButton=e.x,exports.UITableTooltip=e.S,exports.UITableTooltipActions=e.C,exports.UITableTooltipFilter=e.w,exports.UITableUserDataDisplay=e.T,exports.UITableWrapper=e.O;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{A as e,B as t,C as n,D as r,E as i,F as a,H as o,I as s,L as c,M as l,N as u,O as d,P as f,R as p,S as m,T as h,U as g,V as _,W as v,Y as y,_ as b,a as x,b as S,c as C,d as w,f as T,g as E,h as D,i as O,j as k,k as A,l as j,m as M,n as N,o as P,p as F,r as I,s as L,t as R,u as z,v as B,w as V,x as H,y as U,z as W}from"../../tables-
|
|
1
|
+
"use client";import{A as e,B as t,C as n,D as r,E as i,F as a,H as o,I as s,L as c,M as l,N as u,O as d,P as f,R as p,S as m,T as h,U as g,V as _,W as v,Y as y,_ as b,a as x,b as S,c as C,d as w,f as T,g as E,h as D,i as O,j as k,k as A,l as j,m as M,n as N,o as P,p as F,r as I,s as L,t as R,u as z,v as B,w as V,x as H,y as U,z as W}from"../../tables-9d53sH9E.mjs";export{R as UITableAnalysisPanel,N as UITableAvatarNameDisplay,I as UITableBadgeDisplay,v as UITableBody,O as UITableBooleanDisplay,g as UITableCell,o as UITableCellActions,_ as UITableCellSelect,r as UITableContainer,x as UITableCurrencyDisplay,P as UITableDateDisplay,L as UITableDescriptionDisplay,C as UITableEditButton,j as UITableEmailDisplay,y as UITableEmpty,t as UITableEmptyDisplay,z as UITableFilter,W as UITableFooter,p as UITableFooterRow,c as UITableHead,a as UITableHeadCell,s as UITableHeadCellOption,f as UITableHeadCellSelect,u as UITableHeadRow,l as UITableInnerTable,k as UITableInnerWrapper,w as UITableListDisplay,e as UITableLoadMore,T as UITableMoreButton,F as UITableNameDisplay,M as UITablePermalink,D as UITablePhoneNumberDisplay,E as UITableProgressDisplay,i as UITableProvider,b as UITableRemoveButton,A as UITableRow,B as UITableStatisticDisplay,U as UITableStatusDisplay,S as UITableSummaryBar,H as UITableToggleButton,m as UITableTooltip,n as UITableTooltipActions,V as UITableTooltipFilter,h as UITableUserDataDisplay,d as UITableWrapper};
|