@customafk/lunas-ui 0.2.78 → 0.2.79
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-CQZ0hmfN.cjs → analysis-panel-Bg0lCfWv.cjs} +2 -2
- package/dist/{analysis-panel-CQZ0hmfN.cjs.map → analysis-panel-Bg0lCfWv.cjs.map} +1 -1
- package/dist/{analysis-panel-BqZmOU58.mjs → analysis-panel-Cop-l4lx.mjs} +2 -2
- package/dist/{analysis-panel-BqZmOU58.mjs.map → analysis-panel-Cop-l4lx.mjs.map} +1 -1
- package/dist/{badge-display-RP5VTE10.mjs → badge-display-B0BKsU9T.mjs} +2 -2
- package/dist/{badge-display-RP5VTE10.mjs.map → badge-display-B0BKsU9T.mjs.map} +1 -1
- package/dist/{badge-display-DmCKpGk9.cjs → badge-display-Dv2UTvzp.cjs} +2 -2
- package/dist/{badge-display-DmCKpGk9.cjs.map → badge-display-Dv2UTvzp.cjs.map} +1 -1
- package/dist/{boolean-display-B9qxrF5f.mjs → boolean-display-CMX5AupA.mjs} +2 -2
- package/dist/{boolean-display-B9qxrF5f.mjs.map → boolean-display-CMX5AupA.mjs.map} +1 -1
- package/dist/{boolean-display-BwB-l9k0.cjs → boolean-display-CPX7H39m.cjs} +2 -2
- package/dist/{boolean-display-BwB-l9k0.cjs.map → boolean-display-CPX7H39m.cjs.map} +1 -1
- package/dist/{button-BnoPktln.d.cts → button-DQLIL8K2.d.cts} +2 -2
- package/dist/{button-BnoPktln.d.mts → button-DQLIL8K2.d.mts} +2 -2
- package/dist/{calendar-BkV5hTX2.d.mts → calendar-5VVBPn4F.d.mts} +2 -2
- package/dist/{calendar-iDMPT1kI.d.cts → calendar-DHcoDDIc.d.cts} +2 -2
- package/dist/{carousel-D7VXWJ3S.d.mts → carousel-D0jTbSoW.d.cts} +2 -2
- package/dist/{carousel-bBvM31sh.d.cts → carousel-qH6YsFKK.d.mts} +2 -2
- package/dist/{currency-display-CEg_HRYv.mjs → currency-display-CanjOswc.mjs} +2 -2
- package/dist/{currency-display-CEg_HRYv.mjs.map → currency-display-CanjOswc.mjs.map} +1 -1
- package/dist/{currency-display-Buxc6Ph5.cjs → currency-display-xxK62yo4.cjs} +2 -2
- package/dist/{currency-display-Buxc6Ph5.cjs.map → currency-display-xxK62yo4.cjs.map} +1 -1
- package/dist/data-display/statistic.cjs +1 -1
- package/dist/data-display/statistic.cjs.map +1 -1
- package/dist/data-display/statistic.mjs +1 -1
- package/dist/data-display/statistic.mjs.map +1 -1
- package/dist/date-display-DMPhFq8v.cjs +2 -0
- package/dist/date-display-DMPhFq8v.cjs.map +1 -0
- package/dist/date-display-YE8NIIrl.mjs +2 -0
- package/dist/date-display-YE8NIIrl.mjs.map +1 -0
- package/dist/{description-display-CW0g3aJa.mjs → description-display-B4KoH6ql.mjs} +2 -2
- package/dist/{description-display-CW0g3aJa.mjs.map → description-display-B4KoH6ql.mjs.map} +1 -1
- package/dist/{description-display-BR8nXqc_.cjs → description-display-jmAaeMBD.cjs} +2 -2
- package/dist/{description-display-BR8nXqc_.cjs.map → description-display-jmAaeMBD.cjs.map} +1 -1
- package/dist/dialogs/detail-dialog/components/sidebar.d.cts +2 -2
- package/dist/dialogs/detail-dialog/components/sidebar.d.mts +2 -2
- package/dist/{email-display-DqKYq0iM.cjs → email-display-CzvqQMhG.cjs} +2 -2
- package/dist/{email-display-DqKYq0iM.cjs.map → email-display-CzvqQMhG.cjs.map} +1 -1
- package/dist/{email-display-BKcoWmPK.mjs → email-display-D_k7AUmp.mjs} +2 -2
- package/dist/{email-display-BKcoWmPK.mjs.map → email-display-D_k7AUmp.mjs.map} +1 -1
- package/dist/features/descriptions/index.cjs +1 -1
- package/dist/features/descriptions/index.cjs.map +1 -1
- package/dist/features/descriptions/index.mjs +1 -1
- package/dist/features/descriptions/index.mjs.map +1 -1
- package/dist/features/tables/index.cjs +1 -1
- package/dist/features/tables/index.d.cts +1 -1
- package/dist/features/tables/index.d.mts +1 -1
- package/dist/features/tables/index.mjs +1 -1
- package/dist/{filter-DqedvThM.cjs → filter-B5EnnL9I.cjs} +2 -2
- package/dist/{filter-DqedvThM.cjs.map → filter-B5EnnL9I.cjs.map} +1 -1
- package/dist/{filter-CWuRGTl4.mjs → filter-BCNjqiBx.mjs} +2 -2
- package/dist/{filter-CWuRGTl4.mjs.map → filter-BCNjqiBx.mjs.map} +1 -1
- package/dist/{flex-CIzZIICK.d.cts → flex-CWo0w9K1.d.cts} +2 -2
- package/dist/{flex-CIzZIICK.d.mts → flex-CWo0w9K1.d.mts} +2 -2
- package/dist/{index-DmrQBf4E.d.cts → index-BapooVnN.d.cts} +10 -10
- package/dist/{index-DiloQ0Ev.d.mts → index-CFgFCg9H.d.mts} +10 -10
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +10 -10
- package/dist/index.d.mts +10 -10
- package/dist/index.mjs +1 -1
- package/dist/{item-ChW41yKF.d.mts → item-Brbp9t6f.d.mts} +2 -2
- package/dist/{item-BxUBO7Hd.d.cts → item-CtLZgUB6.d.cts} +2 -2
- package/dist/layouts/flex.d.cts +1 -1
- package/dist/layouts/flex.d.mts +1 -1
- package/dist/list-display-DPxZ_Jbf.cjs +2 -0
- package/dist/list-display-DPxZ_Jbf.cjs.map +1 -0
- package/dist/list-display-M43N3kle.mjs +2 -0
- package/dist/list-display-M43N3kle.mjs.map +1 -0
- package/dist/{name-display-B-FtblLL.cjs → name-display-BJ1wPUnS.cjs} +2 -2
- package/dist/{name-display-B-FtblLL.cjs.map → name-display-BJ1wPUnS.cjs.map} +1 -1
- package/dist/{name-display-CB9XAhXP.mjs → name-display-pWhLLS05.mjs} +2 -2
- package/dist/{name-display-CB9XAhXP.mjs.map → name-display-pWhLLS05.mjs.map} +1 -1
- package/dist/{pagination-BRw-yZBY.d.cts → pagination-BVA_yrBO.d.mts} +2 -2
- package/dist/{pagination-BlLiOvY9.d.mts → pagination-DqJlXNY0.d.cts} +2 -2
- package/dist/{permalink-I-INEarM.mjs → permalink-BaMvnKIz.mjs} +2 -2
- package/dist/{permalink-I-INEarM.mjs.map → permalink-BaMvnKIz.mjs.map} +1 -1
- package/dist/{permalink-CUIKG9VA.cjs → permalink-CMcI__V4.cjs} +2 -2
- package/dist/{permalink-CUIKG9VA.cjs.map → permalink-CMcI__V4.cjs.map} +1 -1
- package/dist/{phone-number-DJvfJg1b.cjs → phone-number-F9I9sNLK.cjs} +2 -2
- package/dist/{phone-number-DJvfJg1b.cjs.map → phone-number-F9I9sNLK.cjs.map} +1 -1
- package/dist/{phone-number-Cu7Mnl6J.mjs → phone-number-ao2oCmrO.mjs} +2 -2
- package/dist/{phone-number-Cu7Mnl6J.mjs.map → phone-number-ao2oCmrO.mjs.map} +1 -1
- package/dist/{progress-display-DbfN7U8m.cjs → progress-display-F8xXJ3T1.cjs} +2 -2
- package/dist/{progress-display-DbfN7U8m.cjs.map → progress-display-F8xXJ3T1.cjs.map} +1 -1
- package/dist/{progress-display-qgvclwy9.mjs → progress-display-atwRFD6e.mjs} +2 -2
- package/dist/{progress-display-qgvclwy9.mjs.map → progress-display-atwRFD6e.mjs.map} +1 -1
- package/dist/{resizable-CWmitx5U.d.cts → resizable-B61Fbl57.d.cts} +2 -2
- package/dist/{resizable-CWmitx5U.d.mts → resizable-B61Fbl57.d.mts} +2 -2
- package/dist/{statistic-LL4uHlRb.cjs → statistic-B9OqfhOl.cjs} +2 -2
- package/dist/{statistic-LL4uHlRb.cjs.map → statistic-B9OqfhOl.cjs.map} +1 -1
- package/dist/{statistic-ClkqqDfk.mjs → statistic-CJVc9sNs.mjs} +2 -2
- package/dist/{statistic-ClkqqDfk.mjs.map → statistic-CJVc9sNs.mjs.map} +1 -1
- package/dist/{status-display-BUphOF18.mjs → status-display-DInGGgiP.mjs} +2 -2
- package/dist/{status-display-BUphOF18.mjs.map → status-display-DInGGgiP.mjs.map} +1 -1
- package/dist/{status-display-o9inMVvb.cjs → status-display-DpKsYvZJ.cjs} +2 -2
- package/dist/{status-display-o9inMVvb.cjs.map → status-display-DpKsYvZJ.cjs.map} +1 -1
- package/dist/{summary-bar-Mb1B9Dnf.cjs → summary-bar-DKZh-VSB.cjs} +2 -2
- package/dist/{summary-bar-Mb1B9Dnf.cjs.map → summary-bar-DKZh-VSB.cjs.map} +1 -1
- package/dist/{summary-bar-CYfgdxrQ.mjs → summary-bar-DX_sOiuL.mjs} +2 -2
- package/dist/{summary-bar-CYfgdxrQ.mjs.map → summary-bar-DX_sOiuL.mjs.map} +1 -1
- package/dist/{tables-BGzwkdFO.mjs → tables-7_KgoyS-.mjs} +2 -2
- package/dist/{tables-BGzwkdFO.mjs.map → tables-7_KgoyS-.mjs.map} +1 -1
- package/dist/{tables-078i-X0d.cjs → tables-CS3NhgTc.cjs} +2 -2
- package/dist/{tables-078i-X0d.cjs.map → tables-CS3NhgTc.cjs.map} +1 -1
- package/dist/{toggle-group--bJylFDV.d.cts → toggle-group-DM5tS0Kt.d.cts} +2 -2
- package/dist/{toggle-group-l_Mi7NRg.d.mts → toggle-group-_PBz44Im.d.mts} +2 -2
- package/dist/{toggle-CqTmiPDi.d.cts → toggle-v1PgAvdG.d.cts} +2 -2
- package/dist/{toggle-CqTmiPDi.d.mts → toggle-v1PgAvdG.d.mts} +2 -2
- package/dist/{tooltip-BcfELg8e.cjs → tooltip-BcQG6Zw9.cjs} +2 -2
- package/dist/{tooltip-BcfELg8e.cjs.map → tooltip-BcQG6Zw9.cjs.map} +1 -1
- package/dist/{tooltip-TGmzPdoR.mjs → tooltip-C6flMQgc.mjs} +2 -2
- package/dist/{tooltip-TGmzPdoR.mjs.map → tooltip-C6flMQgc.mjs.map} +1 -1
- package/dist/ui/button.d.cts +1 -1
- package/dist/ui/button.d.mts +1 -1
- package/dist/ui/calendar.d.cts +1 -1
- package/dist/ui/calendar.d.mts +1 -1
- package/dist/ui/carousel.d.cts +1 -1
- package/dist/ui/carousel.d.mts +1 -1
- package/dist/ui/item.d.cts +1 -1
- package/dist/ui/item.d.mts +1 -1
- package/dist/ui/pagination.d.cts +1 -1
- package/dist/ui/pagination.d.mts +1 -1
- package/dist/ui/resizable.d.cts +1 -1
- package/dist/ui/resizable.d.mts +1 -1
- package/dist/ui/status.d.cts +1 -1
- package/dist/ui/status.d.mts +1 -1
- package/dist/ui/toggle-group.d.cts +1 -1
- package/dist/ui/toggle-group.d.mts +1 -1
- package/dist/ui/toggle.d.cts +1 -1
- package/dist/ui/toggle.d.mts +1 -1
- package/package.json +1 -1
- package/dist/date-display-BgI7Wjqf.cjs +0 -2
- package/dist/date-display-BgI7Wjqf.cjs.map +0 -1
- package/dist/date-display-DGfHQhpu.mjs +0 -2
- package/dist/date-display-DGfHQhpu.mjs.map +0 -1
- package/dist/list-display-BRJVmji0.cjs +0 -2
- package/dist/list-display-BRJVmji0.cjs.map +0 -1
- package/dist/list-display-Co94sV4H.mjs +0 -2
- package/dist/list-display-Co94sV4H.mjs.map +0 -1
|
@@ -3,7 +3,7 @@ import { Toggle } from "radix-ui";
|
|
|
3
3
|
//#region packages/components/ui/toggle.d.ts
|
|
4
4
|
declare const toggleVariants: (props?: ({
|
|
5
5
|
variant?: "default" | "outline" | null | undefined;
|
|
6
|
-
size?: "
|
|
6
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
/**
|
|
9
9
|
* A two-state button that switches between pressed (`on`) and unpressed (`off`).
|
|
@@ -21,4 +21,4 @@ declare const toggleVariants: (props?: ({
|
|
|
21
21
|
declare function Toggle$1({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
|
|
22
22
|
//#endregion
|
|
23
23
|
export { toggleVariants as n, Toggle$1 as t };
|
|
24
|
-
//# sourceMappingURL=toggle-
|
|
24
|
+
//# sourceMappingURL=toggle-v1PgAvdG.d.cts.map
|
|
@@ -3,7 +3,7 @@ import { Toggle } from "radix-ui";
|
|
|
3
3
|
//#region packages/components/ui/toggle.d.ts
|
|
4
4
|
declare const toggleVariants: (props?: ({
|
|
5
5
|
variant?: "default" | "outline" | null | undefined;
|
|
6
|
-
size?: "
|
|
6
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
/**
|
|
9
9
|
* A two-state button that switches between pressed (`on`) and unpressed (`off`).
|
|
@@ -21,4 +21,4 @@ declare const toggleVariants: (props?: ({
|
|
|
21
21
|
declare function Toggle$1({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
|
|
22
22
|
//#endregion
|
|
23
23
|
export { toggleVariants as n, Toggle$1 as t };
|
|
24
|
-
//# sourceMappingURL=toggle-
|
|
24
|
+
//# sourceMappingURL=toggle-v1PgAvdG.d.mts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const e=require("./tables-
|
|
1
|
+
const e=require("./tables-CS3NhgTc.cjs"),t=require("./ui/input.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime"),o=require("@customafk/react-toolkit/hooks/useDebounceCallback");function s(e){if(e==null)return``;if(typeof e==`number`)return String(e);if(typeof e==`boolean`)return e?`true`:`false`;let t=String(e);return t.includes(`,`)||t.includes(`"`)||t.includes(`
|
|
2
2
|
`)||t.includes(`\r`)?`"${t.replace(/"/g,`""`)}"`:t}function c(e){if(e.length===0)return``;let t=e[0].map(e=>s(e.label)),n=e.map(e=>e.map(e=>s(e.value)).join(`,`));return[t.join(`,`),...n].join(`
|
|
3
3
|
`)}function l(e,t){let n=c(e);if(!n)return;let r=new Blob([n],{type:`text/csv;charset=utf-8;`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`${t}.csv`,a.click(),URL.revokeObjectURL(i)}const u=({onSearch:e,onChange:r,...i})=>{let s=(0,o.useDebounceCallback)(t=>{e?.(t)},500);return(0,a.jsxs)(`div`,{className:`relative w-full max-w-80 flex-1`,children:[(0,a.jsx)(t.Input,{...i,size:`lg`,type:`search`,placeholder:`Tìm kiếm...`,className:`flex-1 ps-9 pe-9`,onChange:e=>{r?.(e),s(e.target.value??``)}}),(0,a.jsx)(`div`,{className:`pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50`,children:(0,a.jsx)(n.SearchIcon,{size:16})}),(0,a.jsx)(`button`,{className:`absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":`Submit search`,type:`submit`,children:(0,a.jsx)(n.ArrowRightIcon,{size:16,"aria-hidden":`true`})})]})},d=({children:e,disabled:t,onClick:n,className:r,...o})=>(0,a.jsx)(`button`,{type:`button`,disabled:t,className:(0,i.cn)(`flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5`,r),onClick:n,...o,children:e}),f=({onCreate:t,onDownload:i,onRefresh:o})=>{let{table:s,csvData:c,csvFileName:u,title:f,showAnalysisPanel:p,summary:m}=e.Y(),{isOpen:h,toggle:g}=e.q(),{isOpen:_,toggle:v}=e.Z(),y=(0,r.useCallback)(()=>{if(i){i();return}if(!c||c.length===0)return;let e=s.getSelectedRowModel().flatRows;l(e.length>0?e.map(e=>c[e.index]).filter(Boolean):c,u||f)},[i,c,u,s,f]),b=!!(i||c&&c.length>0);return(0,a.jsxs)(`div`,{className:`flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none`,children:[(0,a.jsx)(d,{disabled:!t,onClick:e=>{t?.(),e.stopPropagation(),e.preventDefault()},children:(0,a.jsx)(n.CirclePlus,{})}),(0,a.jsx)(d,{disabled:!o,onClick:e=>{o?.(),e.stopPropagation(),e.preventDefault()},children:(0,a.jsx)(n.RefreshCwIcon,{})}),(0,a.jsx)(d,{disabled:!b,onClick:e=>{y(),e.stopPropagation(),e.preventDefault()},children:(0,a.jsx)(n.DownloadIcon,{})}),m&&m.length>0&&(0,a.jsx)(d,{onClick:e=>{v(),e.stopPropagation(),e.preventDefault()},"aria-pressed":_,"aria-label":_?`Ẩn tổng quan`:`Hiện tổng quan`,className:_?`bg-muted-muted text-text-positive`:void 0,children:(0,a.jsx)(n.LayoutDashboardIcon,{})}),p&&(0,a.jsx)(d,{onClick:e=>{g(),e.stopPropagation(),e.preventDefault()},"aria-pressed":h,className:h?`bg-muted-muted text-text-positive`:void 0,children:(0,a.jsx)(n.BarChart2Icon,{})})]})},p=({children:t})=>{let{title:n,description:r,headerActions:i}=e.Y();return(0,a.jsxs)(`div`,{"data-slot":`table-tooltip`,className:`relative flex w-full flex-col gap-2 px-2 py-0 text-sm`,children:[(0,a.jsxs)(`div`,{className:`flex w-full items-start justify-between gap-4`,children:[(0,a.jsxs)(`div`,{className:`flex flex-col gap-0.5`,children:[(0,a.jsx)(`h3`,{className:`font-semibold text-base text-text-positive`,children:n}),r&&(0,a.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:r})]}),i&&(0,a.jsx)(`div`,{className:`flex items-center gap-2 shrink-0`,children:i})]}),(0,a.jsx)(`div`,{className:`flex w-full flex-1 justify-between gap-x-2`,children:t})]})};p.displayName=`UITableTooltip`,exports.UITableTooltip=p,exports.UITableTooltipActions=f,exports.UITableTooltipFilter=u;
|
|
4
|
-
//# sourceMappingURL=tooltip-
|
|
4
|
+
//# sourceMappingURL=tooltip-BcQG6Zw9.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-BcfELg8e.cjs","names":["Input","SearchIcon","ArrowRightIcon","useUITableContext","useUITableAnalysisContext","useUITableSummaryContext","CirclePlus","RefreshCwIcon","DownloadIcon","LayoutDashboardIcon","BarChart2Icon"],"sources":["../packages/components/features/tables/utils/csv.ts","../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { CsvCell } from '../types';\n\nfunction formatCell(value: CsvCell['value']): string {\n if (value === null || value === undefined) return '';\n if (typeof value === 'number') return String(value);\n if (typeof value === 'boolean') return value ? 'true' : 'false';\n const str = String(value);\n if (str.includes(',') || str.includes('\"') || str.includes('\\n') || str.includes('\\r')) {\n return `\"${str.replace(/\"/g, '\"\"')}\"`;\n }\n return str;\n}\n\nexport function buildCsvContent(rows: CsvCell[][]): string {\n if (rows.length === 0) return '';\n const headers = rows[0].map(cell => formatCell(cell.label));\n const dataRows = rows.map(row => row.map(cell => formatCell(cell.value)).join(','));\n return [headers.join(','), ...dataRows].join('\\n');\n}\n\nexport function downloadCsv(rows: CsvCell[][], fileName: string): void {\n const content = buildCsvContent(rows);\n if (!content) return;\n const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `${fileName}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n}\n","/**\n * @file tooltip.tsx\n * Toolbar components rendered above the table: a debounced search input,\n * an action button group (create / refresh / download), and the outer\n * toolbar shell that displays the table title.\n */\nimport { useCallback } from 'react';\n\nimport { ArrowRightIcon, BarChart2Icon, CirclePlus, DownloadIcon, LayoutDashboardIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { useDebounceCallback } from '@customafk/react-toolkit/hooks/useDebounceCallback';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableAnalysisContext, useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport { downloadCsv } from '../../utils/csv';\n\n/**\n * Debounced search input rendered inside the table toolbar.\n *\n * Fires `onSearch` 500 ms after the user stops typing and delegates all other\n * native input events via the spread `props`.\n *\n * @example\n * ```tsx\n * import { UITableTooltipFilter } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipFilter\n * placeholder=\"Search users…\"\n * onSearch={value => setQuery(value)}\n * />\n * ```\n */\nexport const UITableTooltipFilter: React.FC<\n Omit<React.ComponentProps<typeof Input>, 'className'> & {\n onSearch?: (value: string) => void;\n }\n> = ({ onSearch, onChange, ...props }) => {\n const debouncedSearch = useDebounceCallback((value: string) => {\n onSearch?.(value);\n }, 500);\n return (\n <div className=\"relative w-full max-w-80 flex-1\">\n <Input\n {...props}\n size=\"lg\"\n type=\"search\"\n placeholder=\"Tìm kiếm...\"\n className=\"flex-1 ps-9 pe-9\"\n onChange={e => {\n onChange?.(e);\n debouncedSearch(e.target.value ?? '');\n }}\n />\n <div className=\"pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n <SearchIcon size={16} />\n </div>\n <button\n className=\"absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n aria-label=\"Submit search\"\n type=\"submit\"\n >\n <ArrowRightIcon size={16} aria-hidden=\"true\" />\n </button>\n </div>\n );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren<React.ComponentProps<'button'>>> = ({ children, disabled, onClick, className, ...props }) => {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5',\n className\n )}\n onClick={onClick}\n {...props}\n >\n {children}\n </button>\n );\n};\n\n/**\n * Grouped action buttons (create, refresh, download) displayed in the table\n * toolbar.\n *\n * Each button is disabled automatically when the corresponding handler prop is\n * omitted, so only the actions relevant to a given table need to be provided.\n * A toggle for `UITableSummaryBar` appears automatically when `summary` is\n * non-empty, and a toggle for `UITableAnalysisPanel` appears when\n * `showAnalysisPanel` is `true` (both set on `UITableProvider`).\n *\n * @example\n * ```tsx\n * import { UITableTooltipActions } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipActions\n * onCreate={() => setOpenCreate(true)}\n * onRefresh={() => refetch()}\n * />\n * ```\n */\nexport const UITableTooltipActions: React.FC<{\n onCreate?: () => void;\n onRefresh?: () => void;\n onDownload?: () => void;\n}> = ({ onCreate, onDownload, onRefresh }) => {\n const { table, csvData, csvFileName, title, showAnalysisPanel, summary } = useUITableContext();\n const { isOpen: isAnalysisOpen, toggle: toggleAnalysis } = useUITableAnalysisContext();\n const { isOpen: isSummaryOpen, toggle: toggleSummary } = useUITableSummaryContext();\n\n const handleDownload = useCallback(() => {\n if (onDownload) {\n onDownload();\n return;\n }\n if (!csvData || csvData.length === 0) return;\n const selectedRows = table.getSelectedRowModel().flatRows;\n const rows = selectedRows.length > 0 ? selectedRows.map(row => csvData[row.index]).filter(Boolean) : csvData;\n downloadCsv(rows, csvFileName || title);\n }, [onDownload, csvData, csvFileName, table, title]);\n\n const isDownloadEnabled = !!(onDownload || (csvData && csvData.length > 0));\n\n return (\n <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n <ActionButton\n disabled={!onCreate}\n onClick={e => {\n onCreate?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <CirclePlus />\n </ActionButton>\n <ActionButton\n disabled={!onRefresh}\n onClick={e => {\n onRefresh?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <RefreshCwIcon />\n </ActionButton>\n <ActionButton\n disabled={!isDownloadEnabled}\n onClick={e => {\n handleDownload();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <DownloadIcon />\n </ActionButton>\n {summary && summary.length > 0 && (\n <ActionButton\n onClick={e => {\n toggleSummary();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isSummaryOpen}\n aria-label={isSummaryOpen ? 'Ẩn tổng quan' : 'Hiện tổng quan'}\n className={isSummaryOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <LayoutDashboardIcon />\n </ActionButton>\n )}\n {showAnalysisPanel && (\n <ActionButton\n onClick={e => {\n toggleAnalysis();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isAnalysisOpen}\n className={isAnalysisOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <BarChart2Icon />\n </ActionButton>\n )}\n </div>\n );\n};\n\n/**\n * Outer toolbar shell for the UITable component.\n *\n * Reads the table `title` from `UITableContext` and renders it as a heading\n * above the `children` slot, which typically contains a\n * `UITableTooltipFilter` and/or `UITableTooltipActions`.\n *\n * @example\n * ```tsx\n * import {\n * UITableTooltip,\n * UITableTooltipFilter,\n * UITableTooltipActions,\n * } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltip>\n * <UITableTooltipFilter onSearch={setQuery} />\n * <UITableTooltipActions onCreate={handleCreate} onRefresh={refetch} />\n * </UITableTooltip>\n * ```\n */\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n const { title, description, headerActions } = useUITableContext();\n return (\n <div data-slot=\"table-tooltip\" className=\"relative flex w-full flex-col gap-2 px-2 py-0 text-sm\">\n <div className=\"flex w-full items-start justify-between gap-4\">\n <div className=\"flex flex-col gap-0.5\">\n <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n </div>\n {headerActions && <div className=\"flex items-center gap-2 shrink-0\">{headerActions}</div>}\n </div>\n <div className=\"flex w-full flex-1 justify-between gap-x-2\">{children}</div>\n </div>\n );\n};\nUITableTooltip.displayName = 'UITableTooltip';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip-BcQG6Zw9.cjs","names":["Input","SearchIcon","ArrowRightIcon","useUITableContext","useUITableAnalysisContext","useUITableSummaryContext","CirclePlus","RefreshCwIcon","DownloadIcon","LayoutDashboardIcon","BarChart2Icon"],"sources":["../packages/components/features/tables/utils/csv.ts","../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { CsvCell } from '../types';\n\nfunction formatCell(value: CsvCell['value']): string {\n if (value === null || value === undefined) return '';\n if (typeof value === 'number') return String(value);\n if (typeof value === 'boolean') return value ? 'true' : 'false';\n const str = String(value);\n if (str.includes(',') || str.includes('\"') || str.includes('\\n') || str.includes('\\r')) {\n return `\"${str.replace(/\"/g, '\"\"')}\"`;\n }\n return str;\n}\n\nexport function buildCsvContent(rows: CsvCell[][]): string {\n if (rows.length === 0) return '';\n const headers = rows[0].map(cell => formatCell(cell.label));\n const dataRows = rows.map(row => row.map(cell => formatCell(cell.value)).join(','));\n return [headers.join(','), ...dataRows].join('\\n');\n}\n\nexport function downloadCsv(rows: CsvCell[][], fileName: string): void {\n const content = buildCsvContent(rows);\n if (!content) return;\n const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `${fileName}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n}\n","/**\n * @file tooltip.tsx\n * Toolbar components rendered above the table: a debounced search input,\n * an action button group (create / refresh / download), and the outer\n * toolbar shell that displays the table title.\n */\nimport { useCallback } from 'react';\n\nimport { ArrowRightIcon, BarChart2Icon, CirclePlus, DownloadIcon, LayoutDashboardIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { useDebounceCallback } from '@customafk/react-toolkit/hooks/useDebounceCallback';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableAnalysisContext, useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport { downloadCsv } from '../../utils/csv';\n\n/**\n * Debounced search input rendered inside the table toolbar.\n *\n * Fires `onSearch` 500 ms after the user stops typing and delegates all other\n * native input events via the spread `props`.\n *\n * @example\n * ```tsx\n * import { UITableTooltipFilter } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipFilter\n * placeholder=\"Search users…\"\n * onSearch={value => setQuery(value)}\n * />\n * ```\n */\nexport const UITableTooltipFilter: React.FC<\n Omit<React.ComponentProps<typeof Input>, 'className'> & {\n onSearch?: (value: string) => void;\n }\n> = ({ onSearch, onChange, ...props }) => {\n const debouncedSearch = useDebounceCallback((value: string) => {\n onSearch?.(value);\n }, 500);\n return (\n <div className=\"relative w-full max-w-80 flex-1\">\n <Input\n {...props}\n size=\"lg\"\n type=\"search\"\n placeholder=\"Tìm kiếm...\"\n className=\"flex-1 ps-9 pe-9\"\n onChange={e => {\n onChange?.(e);\n debouncedSearch(e.target.value ?? '');\n }}\n />\n <div className=\"pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n <SearchIcon size={16} />\n </div>\n <button\n className=\"absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n aria-label=\"Submit search\"\n type=\"submit\"\n >\n <ArrowRightIcon size={16} aria-hidden=\"true\" />\n </button>\n </div>\n );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren<React.ComponentProps<'button'>>> = ({ children, disabled, onClick, className, ...props }) => {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5',\n className\n )}\n onClick={onClick}\n {...props}\n >\n {children}\n </button>\n );\n};\n\n/**\n * Grouped action buttons (create, refresh, download) displayed in the table\n * toolbar.\n *\n * Each button is disabled automatically when the corresponding handler prop is\n * omitted, so only the actions relevant to a given table need to be provided.\n * A toggle for `UITableSummaryBar` appears automatically when `summary` is\n * non-empty, and a toggle for `UITableAnalysisPanel` appears when\n * `showAnalysisPanel` is `true` (both set on `UITableProvider`).\n *\n * @example\n * ```tsx\n * import { UITableTooltipActions } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipActions\n * onCreate={() => setOpenCreate(true)}\n * onRefresh={() => refetch()}\n * />\n * ```\n */\nexport const UITableTooltipActions: React.FC<{\n onCreate?: () => void;\n onRefresh?: () => void;\n onDownload?: () => void;\n}> = ({ onCreate, onDownload, onRefresh }) => {\n const { table, csvData, csvFileName, title, showAnalysisPanel, summary } = useUITableContext();\n const { isOpen: isAnalysisOpen, toggle: toggleAnalysis } = useUITableAnalysisContext();\n const { isOpen: isSummaryOpen, toggle: toggleSummary } = useUITableSummaryContext();\n\n const handleDownload = useCallback(() => {\n if (onDownload) {\n onDownload();\n return;\n }\n if (!csvData || csvData.length === 0) return;\n const selectedRows = table.getSelectedRowModel().flatRows;\n const rows = selectedRows.length > 0 ? selectedRows.map(row => csvData[row.index]).filter(Boolean) : csvData;\n downloadCsv(rows, csvFileName || title);\n }, [onDownload, csvData, csvFileName, table, title]);\n\n const isDownloadEnabled = !!(onDownload || (csvData && csvData.length > 0));\n\n return (\n <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n <ActionButton\n disabled={!onCreate}\n onClick={e => {\n onCreate?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <CirclePlus />\n </ActionButton>\n <ActionButton\n disabled={!onRefresh}\n onClick={e => {\n onRefresh?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <RefreshCwIcon />\n </ActionButton>\n <ActionButton\n disabled={!isDownloadEnabled}\n onClick={e => {\n handleDownload();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <DownloadIcon />\n </ActionButton>\n {summary && summary.length > 0 && (\n <ActionButton\n onClick={e => {\n toggleSummary();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isSummaryOpen}\n aria-label={isSummaryOpen ? 'Ẩn tổng quan' : 'Hiện tổng quan'}\n className={isSummaryOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <LayoutDashboardIcon />\n </ActionButton>\n )}\n {showAnalysisPanel && (\n <ActionButton\n onClick={e => {\n toggleAnalysis();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isAnalysisOpen}\n className={isAnalysisOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <BarChart2Icon />\n </ActionButton>\n )}\n </div>\n );\n};\n\n/**\n * Outer toolbar shell for the UITable component.\n *\n * Reads the table `title` from `UITableContext` and renders it as a heading\n * above the `children` slot, which typically contains a\n * `UITableTooltipFilter` and/or `UITableTooltipActions`.\n *\n * @example\n * ```tsx\n * import {\n * UITableTooltip,\n * UITableTooltipFilter,\n * UITableTooltipActions,\n * } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltip>\n * <UITableTooltipFilter onSearch={setQuery} />\n * <UITableTooltipActions onCreate={handleCreate} onRefresh={refetch} />\n * </UITableTooltip>\n * ```\n */\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n const { title, description, headerActions } = useUITableContext();\n return (\n <div data-slot=\"table-tooltip\" className=\"relative flex w-full flex-col gap-2 px-2 py-0 text-sm\">\n <div className=\"flex w-full items-start justify-between gap-4\">\n <div className=\"flex flex-col gap-0.5\">\n <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n </div>\n {headerActions && <div className=\"flex items-center gap-2 shrink-0\">{headerActions}</div>}\n </div>\n <div className=\"flex w-full flex-1 justify-between gap-x-2\">{children}</div>\n </div>\n );\n};\nUITableTooltip.displayName = 'UITableTooltip';\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Y as e,Z as t,q as n}from"./tables-
|
|
1
|
+
import{Y as e,Z as t,q as n}from"./tables-7_KgoyS-.mjs";import{Input as r}from"./ui/input.mjs";import{ArrowRightIcon as i,BarChart2Icon as a,CirclePlus as o,DownloadIcon as s,LayoutDashboardIcon as c,RefreshCwIcon as l,SearchIcon as u}from"lucide-react";import{useCallback as d}from"react";import{cn as f}from"@customafk/react-toolkit/utils";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useDebounceCallback as h}from"@customafk/react-toolkit/hooks/useDebounceCallback";function g(e){if(e==null)return``;if(typeof e==`number`)return String(e);if(typeof e==`boolean`)return e?`true`:`false`;let t=String(e);return t.includes(`,`)||t.includes(`"`)||t.includes(`
|
|
2
2
|
`)||t.includes(`\r`)?`"${t.replace(/"/g,`""`)}"`:t}function _(e){if(e.length===0)return``;let t=e[0].map(e=>g(e.label)),n=e.map(e=>e.map(e=>g(e.value)).join(`,`));return[t.join(`,`),...n].join(`
|
|
3
3
|
`)}function v(e,t){let n=_(e);if(!n)return;let r=new Blob([n],{type:`text/csv;charset=utf-8;`}),i=URL.createObjectURL(r),a=document.createElement(`a`);a.href=i,a.download=`${t}.csv`,a.click(),URL.revokeObjectURL(i)}const y=({onSearch:e,onChange:t,...n})=>{let a=h(t=>{e?.(t)},500);return m(`div`,{className:`relative w-full max-w-80 flex-1`,children:[p(r,{...n,size:`lg`,type:`search`,placeholder:`Tìm kiếm...`,className:`flex-1 ps-9 pe-9`,onChange:e=>{t?.(e),a(e.target.value??``)}}),p(`div`,{className:`pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50`,children:p(u,{size:16})}),p(`button`,{className:`absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,"aria-label":`Submit search`,type:`submit`,children:p(i,{size:16,"aria-hidden":`true`})})]})},b=({children:e,disabled:t,onClick:n,className:r,...i})=>p(`button`,{type:`button`,disabled:t,className:f(`flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5`,r),onClick:n,...i,children:e}),x=({onCreate:r,onDownload:i,onRefresh:u})=>{let{table:f,csvData:h,csvFileName:g,title:_,showAnalysisPanel:y,summary:x}=e(),{isOpen:S,toggle:C}=n(),{isOpen:w,toggle:T}=t(),E=d(()=>{if(i){i();return}if(!h||h.length===0)return;let e=f.getSelectedRowModel().flatRows;v(e.length>0?e.map(e=>h[e.index]).filter(Boolean):h,g||_)},[i,h,g,f,_]),D=!!(i||h&&h.length>0);return m(`div`,{className:`flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none`,children:[p(b,{disabled:!r,onClick:e=>{r?.(),e.stopPropagation(),e.preventDefault()},children:p(o,{})}),p(b,{disabled:!u,onClick:e=>{u?.(),e.stopPropagation(),e.preventDefault()},children:p(l,{})}),p(b,{disabled:!D,onClick:e=>{E(),e.stopPropagation(),e.preventDefault()},children:p(s,{})}),x&&x.length>0&&p(b,{onClick:e=>{T(),e.stopPropagation(),e.preventDefault()},"aria-pressed":w,"aria-label":w?`Ẩn tổng quan`:`Hiện tổng quan`,className:w?`bg-muted-muted text-text-positive`:void 0,children:p(c,{})}),y&&p(b,{onClick:e=>{C(),e.stopPropagation(),e.preventDefault()},"aria-pressed":S,className:S?`bg-muted-muted text-text-positive`:void 0,children:p(a,{})})]})},S=({children:t})=>{let{title:n,description:r,headerActions:i}=e();return m(`div`,{"data-slot":`table-tooltip`,className:`relative flex w-full flex-col gap-2 px-2 py-0 text-sm`,children:[m(`div`,{className:`flex w-full items-start justify-between gap-4`,children:[m(`div`,{className:`flex flex-col gap-0.5`,children:[p(`h3`,{className:`font-semibold text-base text-text-positive`,children:n}),r&&p(`p`,{className:`text-sm text-muted-foreground`,children:r})]}),i&&p(`div`,{className:`flex items-center gap-2 shrink-0`,children:i})]}),p(`div`,{className:`flex w-full flex-1 justify-between gap-x-2`,children:t})]})};S.displayName=`UITableTooltip`;export{S as UITableTooltip,x as UITableTooltipActions,y as UITableTooltipFilter};
|
|
4
|
-
//# sourceMappingURL=tooltip-
|
|
4
|
+
//# sourceMappingURL=tooltip-C6flMQgc.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-TGmzPdoR.mjs","names":[],"sources":["../packages/components/features/tables/utils/csv.ts","../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { CsvCell } from '../types';\n\nfunction formatCell(value: CsvCell['value']): string {\n if (value === null || value === undefined) return '';\n if (typeof value === 'number') return String(value);\n if (typeof value === 'boolean') return value ? 'true' : 'false';\n const str = String(value);\n if (str.includes(',') || str.includes('\"') || str.includes('\\n') || str.includes('\\r')) {\n return `\"${str.replace(/\"/g, '\"\"')}\"`;\n }\n return str;\n}\n\nexport function buildCsvContent(rows: CsvCell[][]): string {\n if (rows.length === 0) return '';\n const headers = rows[0].map(cell => formatCell(cell.label));\n const dataRows = rows.map(row => row.map(cell => formatCell(cell.value)).join(','));\n return [headers.join(','), ...dataRows].join('\\n');\n}\n\nexport function downloadCsv(rows: CsvCell[][], fileName: string): void {\n const content = buildCsvContent(rows);\n if (!content) return;\n const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `${fileName}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n}\n","/**\n * @file tooltip.tsx\n * Toolbar components rendered above the table: a debounced search input,\n * an action button group (create / refresh / download), and the outer\n * toolbar shell that displays the table title.\n */\nimport { useCallback } from 'react';\n\nimport { ArrowRightIcon, BarChart2Icon, CirclePlus, DownloadIcon, LayoutDashboardIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { useDebounceCallback } from '@customafk/react-toolkit/hooks/useDebounceCallback';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableAnalysisContext, useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport { downloadCsv } from '../../utils/csv';\n\n/**\n * Debounced search input rendered inside the table toolbar.\n *\n * Fires `onSearch` 500 ms after the user stops typing and delegates all other\n * native input events via the spread `props`.\n *\n * @example\n * ```tsx\n * import { UITableTooltipFilter } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipFilter\n * placeholder=\"Search users…\"\n * onSearch={value => setQuery(value)}\n * />\n * ```\n */\nexport const UITableTooltipFilter: React.FC<\n Omit<React.ComponentProps<typeof Input>, 'className'> & {\n onSearch?: (value: string) => void;\n }\n> = ({ onSearch, onChange, ...props }) => {\n const debouncedSearch = useDebounceCallback((value: string) => {\n onSearch?.(value);\n }, 500);\n return (\n <div className=\"relative w-full max-w-80 flex-1\">\n <Input\n {...props}\n size=\"lg\"\n type=\"search\"\n placeholder=\"Tìm kiếm...\"\n className=\"flex-1 ps-9 pe-9\"\n onChange={e => {\n onChange?.(e);\n debouncedSearch(e.target.value ?? '');\n }}\n />\n <div className=\"pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n <SearchIcon size={16} />\n </div>\n <button\n className=\"absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n aria-label=\"Submit search\"\n type=\"submit\"\n >\n <ArrowRightIcon size={16} aria-hidden=\"true\" />\n </button>\n </div>\n );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren<React.ComponentProps<'button'>>> = ({ children, disabled, onClick, className, ...props }) => {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5',\n className\n )}\n onClick={onClick}\n {...props}\n >\n {children}\n </button>\n );\n};\n\n/**\n * Grouped action buttons (create, refresh, download) displayed in the table\n * toolbar.\n *\n * Each button is disabled automatically when the corresponding handler prop is\n * omitted, so only the actions relevant to a given table need to be provided.\n * A toggle for `UITableSummaryBar` appears automatically when `summary` is\n * non-empty, and a toggle for `UITableAnalysisPanel` appears when\n * `showAnalysisPanel` is `true` (both set on `UITableProvider`).\n *\n * @example\n * ```tsx\n * import { UITableTooltipActions } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipActions\n * onCreate={() => setOpenCreate(true)}\n * onRefresh={() => refetch()}\n * />\n * ```\n */\nexport const UITableTooltipActions: React.FC<{\n onCreate?: () => void;\n onRefresh?: () => void;\n onDownload?: () => void;\n}> = ({ onCreate, onDownload, onRefresh }) => {\n const { table, csvData, csvFileName, title, showAnalysisPanel, summary } = useUITableContext();\n const { isOpen: isAnalysisOpen, toggle: toggleAnalysis } = useUITableAnalysisContext();\n const { isOpen: isSummaryOpen, toggle: toggleSummary } = useUITableSummaryContext();\n\n const handleDownload = useCallback(() => {\n if (onDownload) {\n onDownload();\n return;\n }\n if (!csvData || csvData.length === 0) return;\n const selectedRows = table.getSelectedRowModel().flatRows;\n const rows = selectedRows.length > 0 ? selectedRows.map(row => csvData[row.index]).filter(Boolean) : csvData;\n downloadCsv(rows, csvFileName || title);\n }, [onDownload, csvData, csvFileName, table, title]);\n\n const isDownloadEnabled = !!(onDownload || (csvData && csvData.length > 0));\n\n return (\n <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n <ActionButton\n disabled={!onCreate}\n onClick={e => {\n onCreate?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <CirclePlus />\n </ActionButton>\n <ActionButton\n disabled={!onRefresh}\n onClick={e => {\n onRefresh?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <RefreshCwIcon />\n </ActionButton>\n <ActionButton\n disabled={!isDownloadEnabled}\n onClick={e => {\n handleDownload();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <DownloadIcon />\n </ActionButton>\n {summary && summary.length > 0 && (\n <ActionButton\n onClick={e => {\n toggleSummary();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isSummaryOpen}\n aria-label={isSummaryOpen ? 'Ẩn tổng quan' : 'Hiện tổng quan'}\n className={isSummaryOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <LayoutDashboardIcon />\n </ActionButton>\n )}\n {showAnalysisPanel && (\n <ActionButton\n onClick={e => {\n toggleAnalysis();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isAnalysisOpen}\n className={isAnalysisOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <BarChart2Icon />\n </ActionButton>\n )}\n </div>\n );\n};\n\n/**\n * Outer toolbar shell for the UITable component.\n *\n * Reads the table `title` from `UITableContext` and renders it as a heading\n * above the `children` slot, which typically contains a\n * `UITableTooltipFilter` and/or `UITableTooltipActions`.\n *\n * @example\n * ```tsx\n * import {\n * UITableTooltip,\n * UITableTooltipFilter,\n * UITableTooltipActions,\n * } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltip>\n * <UITableTooltipFilter onSearch={setQuery} />\n * <UITableTooltipActions onCreate={handleCreate} onRefresh={refetch} />\n * </UITableTooltip>\n * ```\n */\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n const { title, description, headerActions } = useUITableContext();\n return (\n <div data-slot=\"table-tooltip\" className=\"relative flex w-full flex-col gap-2 px-2 py-0 text-sm\">\n <div className=\"flex w-full items-start justify-between gap-4\">\n <div className=\"flex flex-col gap-0.5\">\n <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n </div>\n {headerActions && <div className=\"flex items-center gap-2 shrink-0\">{headerActions}</div>}\n </div>\n <div className=\"flex w-full flex-1 justify-between gap-x-2\">{children}</div>\n </div>\n );\n};\nUITableTooltip.displayName = 'UITableTooltip';\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip-C6flMQgc.mjs","names":[],"sources":["../packages/components/features/tables/utils/csv.ts","../packages/components/features/tables/components/table/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { CsvCell } from '../types';\n\nfunction formatCell(value: CsvCell['value']): string {\n if (value === null || value === undefined) return '';\n if (typeof value === 'number') return String(value);\n if (typeof value === 'boolean') return value ? 'true' : 'false';\n const str = String(value);\n if (str.includes(',') || str.includes('\"') || str.includes('\\n') || str.includes('\\r')) {\n return `\"${str.replace(/\"/g, '\"\"')}\"`;\n }\n return str;\n}\n\nexport function buildCsvContent(rows: CsvCell[][]): string {\n if (rows.length === 0) return '';\n const headers = rows[0].map(cell => formatCell(cell.label));\n const dataRows = rows.map(row => row.map(cell => formatCell(cell.value)).join(','));\n return [headers.join(','), ...dataRows].join('\\n');\n}\n\nexport function downloadCsv(rows: CsvCell[][], fileName: string): void {\n const content = buildCsvContent(rows);\n if (!content) return;\n const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `${fileName}.csv`;\n link.click();\n URL.revokeObjectURL(url);\n}\n","/**\n * @file tooltip.tsx\n * Toolbar components rendered above the table: a debounced search input,\n * an action button group (create / refresh / download), and the outer\n * toolbar shell that displays the table title.\n */\nimport { useCallback } from 'react';\n\nimport { ArrowRightIcon, BarChart2Icon, CirclePlus, DownloadIcon, LayoutDashboardIcon, RefreshCwIcon, SearchIcon } from 'lucide-react';\n\nimport { useDebounceCallback } from '@customafk/react-toolkit/hooks/useDebounceCallback';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Input } from '@/components/ui/input';\n\nimport { useUITableAnalysisContext, useUITableContext, useUITableSummaryContext } from '../../hooks/use-context';\nimport { downloadCsv } from '../../utils/csv';\n\n/**\n * Debounced search input rendered inside the table toolbar.\n *\n * Fires `onSearch` 500 ms after the user stops typing and delegates all other\n * native input events via the spread `props`.\n *\n * @example\n * ```tsx\n * import { UITableTooltipFilter } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipFilter\n * placeholder=\"Search users…\"\n * onSearch={value => setQuery(value)}\n * />\n * ```\n */\nexport const UITableTooltipFilter: React.FC<\n Omit<React.ComponentProps<typeof Input>, 'className'> & {\n onSearch?: (value: string) => void;\n }\n> = ({ onSearch, onChange, ...props }) => {\n const debouncedSearch = useDebounceCallback((value: string) => {\n onSearch?.(value);\n }, 500);\n return (\n <div className=\"relative w-full max-w-80 flex-1\">\n <Input\n {...props}\n size=\"lg\"\n type=\"search\"\n placeholder=\"Tìm kiếm...\"\n className=\"flex-1 ps-9 pe-9\"\n onChange={e => {\n onChange?.(e);\n debouncedSearch(e.target.value ?? '');\n }}\n />\n <div className=\"pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 text-text-positive-weak peer-disabled:opacity-50\">\n <SearchIcon size={16} />\n </div>\n <button\n className=\"absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md text-text-positive-weak outline-none transition-[color,box-shadow] hover:text-text-positive focus:z-10 focus-visible:border focus-visible:border-primary-strong focus-visible:ring-[3px] focus-visible:ring-primary-weak disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n aria-label=\"Submit search\"\n type=\"submit\"\n >\n <ArrowRightIcon size={16} aria-hidden=\"true\" />\n </button>\n </div>\n );\n};\n\nconst ActionButton: React.FC<React.PropsWithChildren<React.ComponentProps<'button'>>> = ({ children, disabled, onClick, className, ...props }) => {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'flex cursor-pointer items-center gap-x-1 rounded-sm border border-border bg-background p-2.5 text-sm text-text-positive-weak outline-none transition-all hover:shadow-card focus:border-border-emphasis focus:bg-muted-muted active:border-border-emphasis active:bg-muted-muted active:text-text-positive disabled:pointer-events-none disabled:cursor-default disabled:opacity-60 [&_svg]:size-3.5',\n className\n )}\n onClick={onClick}\n {...props}\n >\n {children}\n </button>\n );\n};\n\n/**\n * Grouped action buttons (create, refresh, download) displayed in the table\n * toolbar.\n *\n * Each button is disabled automatically when the corresponding handler prop is\n * omitted, so only the actions relevant to a given table need to be provided.\n * A toggle for `UITableSummaryBar` appears automatically when `summary` is\n * non-empty, and a toggle for `UITableAnalysisPanel` appears when\n * `showAnalysisPanel` is `true` (both set on `UITableProvider`).\n *\n * @example\n * ```tsx\n * import { UITableTooltipActions } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltipActions\n * onCreate={() => setOpenCreate(true)}\n * onRefresh={() => refetch()}\n * />\n * ```\n */\nexport const UITableTooltipActions: React.FC<{\n onCreate?: () => void;\n onRefresh?: () => void;\n onDownload?: () => void;\n}> = ({ onCreate, onDownload, onRefresh }) => {\n const { table, csvData, csvFileName, title, showAnalysisPanel, summary } = useUITableContext();\n const { isOpen: isAnalysisOpen, toggle: toggleAnalysis } = useUITableAnalysisContext();\n const { isOpen: isSummaryOpen, toggle: toggleSummary } = useUITableSummaryContext();\n\n const handleDownload = useCallback(() => {\n if (onDownload) {\n onDownload();\n return;\n }\n if (!csvData || csvData.length === 0) return;\n const selectedRows = table.getSelectedRowModel().flatRows;\n const rows = selectedRows.length > 0 ? selectedRows.map(row => csvData[row.index]).filter(Boolean) : csvData;\n downloadCsv(rows, csvFileName || title);\n }, [onDownload, csvData, csvFileName, table, title]);\n\n const isDownloadEnabled = !!(onDownload || (csvData && csvData.length > 0));\n\n return (\n <div className=\"flex [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\">\n <ActionButton\n disabled={!onCreate}\n onClick={e => {\n onCreate?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <CirclePlus />\n </ActionButton>\n <ActionButton\n disabled={!onRefresh}\n onClick={e => {\n onRefresh?.();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <RefreshCwIcon />\n </ActionButton>\n <ActionButton\n disabled={!isDownloadEnabled}\n onClick={e => {\n handleDownload();\n e.stopPropagation();\n e.preventDefault();\n }}\n >\n <DownloadIcon />\n </ActionButton>\n {summary && summary.length > 0 && (\n <ActionButton\n onClick={e => {\n toggleSummary();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isSummaryOpen}\n aria-label={isSummaryOpen ? 'Ẩn tổng quan' : 'Hiện tổng quan'}\n className={isSummaryOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <LayoutDashboardIcon />\n </ActionButton>\n )}\n {showAnalysisPanel && (\n <ActionButton\n onClick={e => {\n toggleAnalysis();\n e.stopPropagation();\n e.preventDefault();\n }}\n aria-pressed={isAnalysisOpen}\n className={isAnalysisOpen ? 'bg-muted-muted text-text-positive' : undefined}\n >\n <BarChart2Icon />\n </ActionButton>\n )}\n </div>\n );\n};\n\n/**\n * Outer toolbar shell for the UITable component.\n *\n * Reads the table `title` from `UITableContext` and renders it as a heading\n * above the `children` slot, which typically contains a\n * `UITableTooltipFilter` and/or `UITableTooltipActions`.\n *\n * @example\n * ```tsx\n * import {\n * UITableTooltip,\n * UITableTooltipFilter,\n * UITableTooltipActions,\n * } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableTooltip>\n * <UITableTooltipFilter onSearch={setQuery} />\n * <UITableTooltipActions onCreate={handleCreate} onRefresh={refetch} />\n * </UITableTooltip>\n * ```\n */\nexport const UITableTooltip: React.FC<React.PropsWithChildren> = ({ children }) => {\n const { title, description, headerActions } = useUITableContext();\n return (\n <div data-slot=\"table-tooltip\" className=\"relative flex w-full flex-col gap-2 px-2 py-0 text-sm\">\n <div className=\"flex w-full items-start justify-between gap-4\">\n <div className=\"flex flex-col gap-0.5\">\n <h3 className=\"font-semibold text-base text-text-positive\">{title}</h3>\n {description && <p className=\"text-sm text-muted-foreground\">{description}</p>}\n </div>\n {headerActions && <div className=\"flex items-center gap-2 shrink-0\">{headerActions}</div>}\n </div>\n <div className=\"flex w-full flex-1 justify-between gap-x-2\">{children}</div>\n </div>\n );\n};\nUITableTooltip.displayName = 'UITableTooltip';\n"],"mappings":"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"}
|
package/dist/ui/button.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ButtonProps, t as Button } from "../button-
|
|
1
|
+
import { n as ButtonProps, t as Button } from "../button-DQLIL8K2.cjs";
|
|
2
2
|
export { Button, ButtonProps };
|
package/dist/ui/button.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ButtonProps, t as Button } from "../button-
|
|
1
|
+
import { n as ButtonProps, t as Button } from "../button-DQLIL8K2.mjs";
|
|
2
2
|
export { Button, ButtonProps };
|
package/dist/ui/calendar.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as CalendarDayButton, t as Calendar } from "../calendar-
|
|
1
|
+
import { n as CalendarDayButton, t as Calendar } from "../calendar-DHcoDDIc.cjs";
|
|
2
2
|
export { Calendar, CalendarDayButton };
|
package/dist/ui/calendar.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as CalendarDayButton, t as Calendar } from "../calendar-
|
|
1
|
+
import { n as CalendarDayButton, t as Calendar } from "../calendar-5VVBPn4F.mjs";
|
|
2
2
|
export { Calendar, CalendarDayButton };
|
package/dist/ui/carousel.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-
|
|
1
|
+
import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-D0jTbSoW.cjs";
|
|
2
2
|
export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
|
package/dist/ui/carousel.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-
|
|
1
|
+
import { a as CarouselNext, i as CarouselItem, n as CarouselApi, o as CarouselPrevious, r as CarouselContent, t as Carousel } from "../carousel-qH6YsFKK.mjs";
|
|
2
2
|
export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
|
package/dist/ui/item.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../item-
|
|
1
|
+
import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../item-CtLZgUB6.cjs";
|
|
2
2
|
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
|
package/dist/ui/item.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../item-
|
|
1
|
+
import { a as ItemFooter, c as ItemMedia, i as ItemDescription, l as ItemSeparator, n as ItemActions, o as ItemGroup, r as ItemContent, s as ItemHeader, t as Item, u as ItemTitle } from "../item-Brbp9t6f.mjs";
|
|
2
2
|
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };
|
package/dist/ui/pagination.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../pagination-
|
|
1
|
+
import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../pagination-DqJlXNY0.cjs";
|
|
2
2
|
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
|
package/dist/ui/pagination.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../pagination-
|
|
1
|
+
import { a as PaginationLink, i as PaginationItem, n as PaginationContent, o as PaginationNext, r as PaginationEllipsis, s as PaginationPrevious, t as Pagination } from "../pagination-BVA_yrBO.mjs";
|
|
2
2
|
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
|
package/dist/ui/resizable.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-
|
|
1
|
+
import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-B61Fbl57.cjs";
|
|
2
2
|
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
|
package/dist/ui/resizable.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-
|
|
1
|
+
import { n as ResizablePanel, r as ResizablePanelGroup, t as ResizableHandle } from "../resizable-B61Fbl57.mjs";
|
|
2
2
|
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
|
package/dist/ui/status.d.cts
CHANGED
|
@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
2
2
|
//#region packages/components/ui/status.variants.d.ts
|
|
3
3
|
declare const statusVariants: (props?: ({
|
|
4
4
|
variant?: "solid" | "soft" | "dot" | "bar" | null | undefined;
|
|
5
|
-
color?: "
|
|
5
|
+
color?: "none" | "neutral" | "slate" | "gray" | "zinc" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | null | undefined;
|
|
6
6
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
type StatusVariants = VariantProps<typeof statusVariants>;
|
package/dist/ui/status.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
2
2
|
//#region packages/components/ui/status.variants.d.ts
|
|
3
3
|
declare const statusVariants: (props?: ({
|
|
4
4
|
variant?: "solid" | "soft" | "dot" | "bar" | null | undefined;
|
|
5
|
-
color?: "
|
|
5
|
+
color?: "none" | "neutral" | "slate" | "gray" | "zinc" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | null | undefined;
|
|
6
6
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
type StatusVariants = VariantProps<typeof statusVariants>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group
|
|
1
|
+
import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-DM5tS0Kt.cjs";
|
|
2
2
|
export { ToggleGroup, ToggleGroupItem };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-
|
|
1
|
+
import { n as ToggleGroupItem, t as ToggleGroup } from "../toggle-group-_PBz44Im.mjs";
|
|
2
2
|
export { ToggleGroup, ToggleGroupItem };
|
package/dist/ui/toggle.d.cts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as toggleVariants, t as Toggle } from "../toggle-
|
|
1
|
+
import { n as toggleVariants, t as Toggle } from "../toggle-v1PgAvdG.cjs";
|
|
2
2
|
export { Toggle, toggleVariants };
|
package/dist/ui/toggle.d.mts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as toggleVariants, t as Toggle } from "../toggle-
|
|
1
|
+
import { n as toggleVariants, t as Toggle } from "../toggle-v1PgAvdG.mjs";
|
|
2
2
|
export { Toggle, toggleVariants };
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
const e=require("./date-B3cozmfV.cjs"),t=require("./ui/badge.cjs"),n=require("./ui/tooltip.cjs"),r=require("./tables-078i-X0d.cjs");let i=require("react/jsx-runtime");const a=({date:a})=>a==null?(0,i.jsx)(r.Q,{}):(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-BgI7Wjqf.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"date-display-BgI7Wjqf.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,GACd,UAAA,EAAA,EAAA,IAAA,CAACC,EAAAA,MAAD,CAAO,UAAU,QACf,UAAA,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,eACxB,UAAA,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
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{Q as o}from"./tables-BGzwkdFO.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-DGfHQhpu.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"date-display-DGfHQhpu.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,GACd,SAAA,EAAC,EAAD,CAAO,UAAU,QACf,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,SAAS,UAAU,wBAA0B,CAAA,CACxE,CAAA,CACO,CAAA,EAChB,EAAC,EAAD,CAAgB,UAAU,eACxB,SAAA,EAAC,EAAD,CAAmB,OAAM,OAAO,OAAO,SAAA,GAAS,UAAU,wCAA0C,CAAA,CACtF,CAAA,CACT,CAAA,CAAA,CACM,CAAA"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
const e=require("./ui/tooltip.cjs"),t=require("./tables-078i-X0d.cjs");let n=require("react/jsx-runtime");const r=({items:r,maxVisible:i=3})=>{if(!r||r.length===0)return(0,n.jsx)(t.Q,{});let a=r.slice(0,i),o=r.slice(i);return(0,n.jsxs)(`div`,{className:`flex flex-wrap gap-1`,children:[a.map((e,t)=>(0,n.jsx)(`span`,{className:`inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs`,children:e},t)),o.length>0&&(0,n.jsx)(e.TooltipProvider,{children:(0,n.jsxs)(e.Tooltip,{children:[(0,n.jsx)(e.TooltipTrigger,{asChild:!0,children:(0,n.jsxs)(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,o.length,` more`]})}),(0,n.jsx)(e.TooltipContent,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:o.map((e,t)=>(0,n.jsx)(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},t))})]})})]})};exports.UITableListDisplay=r;
|
|
2
|
-
//# sourceMappingURL=list-display-BRJVmji0.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"list-display-BRJVmji0.cjs","names":["UITableEmpty","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent"],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. */\ntype Props = {\n /** Array of strings or numbers to render as inline pills. */\n items: (string | number)[] | null | undefined;\n /**\n * Maximum number of pills shown before a `+N more` overflow badge appears\n * (default: `3`).\n */\n maxVisible?: number;\n};\n\n/**\n * Renders an array of values as compact inline pills in a table cell. When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip. Renders {@link UITableEmpty} for empty or absent\n * arrays.\n *\n * @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n if (!items || items.length === 0) return <UITableEmpty />;\n\n const visible = items.slice(0, maxVisible);\n const overflow = items.slice(maxVisible);\n\n return (\n <div className=\"flex flex-wrap gap-1\">\n {visible.map((item, i) => (\n <span key={i} className=\"inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs\">\n {item}\n </span>\n ))}\n\n {overflow.length > 0 && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n +{overflow.length} more\n </span>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n {overflow.map((item, i) => (\n <span key={i} className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\">\n {item}\n </span>\n ))}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n );\n};\n"],"mappings":"0GA2BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAA,EAAA,IAAA,CAACA,EAAAA,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,KAClB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAc,UAAU,kHACrB,SAAA,CACG,EAFK,CAEL,CACP,EAEA,EAAS,OAAS,IACjB,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,GACd,UAAA,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,GAChB,EAAA,EAAA,IAAA,CAACC,EAAAA,eAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,KACnB,EAAA,EAAA,IAAA,CAAC,OAAD,CAAc,UAAU,oGACrB,SAAA,CACG,EAFK,CAEL,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{Tooltip as e,TooltipContent as t,TooltipProvider as n,TooltipTrigger as r}from"./ui/tooltip.mjs";import{Q as i}from"./tables-BGzwkdFO.mjs";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({items:s,maxVisible:c=3})=>{if(!s||s.length===0)return a(i,{});let l=s.slice(0,c),u=s.slice(c);return o(`div`,{className:`flex flex-wrap gap-1`,children:[l.map((e,t)=>a(`span`,{className:`inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs`,children:e},t)),u.length>0&&a(n,{children:o(e,{children:[a(r,{asChild:!0,children:o(`span`,{className:`inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs`,children:[`+`,u.length,` more`]})}),a(t,{align:`start`,className:`flex max-w-64 flex-wrap gap-1 p-2`,children:u.map((e,t)=>a(`span`,{className:`inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs`,children:e},t))})]})})]})};export{s as UITableListDisplay};
|
|
2
|
-
//# sourceMappingURL=list-display-Co94sV4H.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"list-display-Co94sV4H.mjs","names":[],"sources":["../packages/components/features/tables/components/atoms/list-display.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\nimport { UITableEmpty } from './empty';\n\n/** Props for the {@link UITableListDisplay} component. */\ntype Props = {\n /** Array of strings or numbers to render as inline pills. */\n items: (string | number)[] | null | undefined;\n /**\n * Maximum number of pills shown before a `+N more` overflow badge appears\n * (default: `3`).\n */\n maxVisible?: number;\n};\n\n/**\n * Renders an array of values as compact inline pills in a table cell. When the\n * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all\n * remaining items in a tooltip. Renders {@link UITableEmpty} for empty or absent\n * arrays.\n *\n * @example\n * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';\n *\n * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />\n */\nexport const UITableListDisplay: React.FC<Props> = ({ items, maxVisible = 3 }) => {\n if (!items || items.length === 0) return <UITableEmpty />;\n\n const visible = items.slice(0, maxVisible);\n const overflow = items.slice(maxVisible);\n\n return (\n <div className=\"flex flex-wrap gap-1\">\n {visible.map((item, i) => (\n <span key={i} className=\"inline-flex items-center rounded-full border border-border bg-muted-weak px-2 py-0.5 text-text-positive text-xs\">\n {item}\n </span>\n ))}\n\n {overflow.length > 0 && (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <span className=\"inline-flex cursor-default items-center rounded-full bg-primary-bg-subtle px-2 py-0.5 text-primary-intense text-xs\">\n +{overflow.length} more\n </span>\n </TooltipTrigger>\n <TooltipContent align=\"start\" className=\"flex max-w-64 flex-wrap gap-1 p-2\">\n {overflow.map((item, i) => (\n <span key={i} className=\"inline-flex items-center rounded-full border border-border px-2 py-0.5 text-text-negative text-xs\">\n {item}\n </span>\n ))}\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n )}\n </div>\n );\n};\n"],"mappings":"oMA2BA,MAAa,GAAuC,CAAE,QAAO,aAAa,KAAQ,CAChF,GAAI,CAAC,GAAS,EAAM,SAAW,EAAG,OAAO,EAAC,EAAD,CAAe,CAAA,EAExD,IAAM,EAAU,EAAM,MAAM,EAAG,CAAU,EACnC,EAAW,EAAM,MAAM,CAAU,EAEvC,OACE,EAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACG,EAAQ,KAAK,EAAM,IAClB,EAAC,OAAD,CAAc,UAAU,kHACrB,SAAA,CACG,EAFK,CAEL,CACP,EAEA,EAAS,OAAS,GACjB,EAAC,EAAD,CAAA,SACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,EAAD,CAAgB,QAAA,GACd,SAAA,EAAC,OAAD,CAAM,UAAU,qHAAhB,SAAA,CAAqI,IACjI,EAAS,OAAO,OACd,GACQ,CAAA,EAChB,EAAC,EAAD,CAAgB,MAAM,QAAQ,UAAU,oCACrC,SAAA,EAAS,KAAK,EAAM,IACnB,EAAC,OAAD,CAAc,UAAU,oGACrB,SAAA,CACG,EAFK,CAEL,CACP,CACa,CAAA,CACT,CAAA,CAAA,CACM,CAAA,CAEhB,GAET"}
|