@customafk/lunas-ui 0.2.77 → 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/cms-layout-Ba_5wSnr.mjs +2 -0
- package/dist/cms-layout-Ba_5wSnr.mjs.map +1 -0
- package/dist/cms-layout-DCJhB-GY.cjs +2 -0
- package/dist/cms-layout-DCJhB-GY.cjs.map +1 -0
- 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-BTPF2-F6.d.cts → flex-CWo0w9K1.d.cts} +4 -4
- package/dist/{flex-BTPF2-F6.d.mts → flex-CWo0w9K1.d.mts} +4 -4
- package/dist/{index-C9JAujMq.d.cts → index-BapooVnN.d.cts} +12 -12
- package/dist/{index-DnHoBjv7.d.mts → index-CFgFCg9H.d.mts} +12 -12
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +12 -12
- package/dist/index.d.mts +12 -12
- package/dist/index.mjs +1 -1
- package/dist/{input-D73TrUof.d.cts → input-DxNK7Wo6.d.cts} +2 -2
- package/dist/{input-D73TrUof.d.mts → input-DxNK7Wo6.d.mts} +2 -2
- 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/cms-layout/index.cjs +1 -1
- package/dist/layouts/cms-layout/index.mjs +1 -1
- 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/{search-input-DEvYI6Rm.d.mts → search-input-C8feOKe2.d.cts} +2 -2
- package/dist/{search-input-h_3MoMqK.d.cts → search-input-CoqwakbI.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/input.d.cts +1 -1
- package/dist/ui/input.d.mts +1 -1
- package/dist/ui/inputs/search-input.d.cts +1 -1
- package/dist/ui/inputs/search-input.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/cms-layout-BXd2ncAV.cjs +0 -2
- package/dist/cms-layout-BXd2ncAV.cjs.map +0 -1
- package/dist/cms-layout-COIo9HiP.mjs +0 -2
- package/dist/cms-layout-COIo9HiP.mjs.map +0 -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
|
@@ -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-CS3NhgTc.cjs");let n=require("lucide-react"),r=require("react"),i=require("@customafk/react-toolkit/utils"),a=require("react/jsx-runtime");const o={sum:`Tổng`,avg:`Trung bình`,count:`Đếm`,min:`Nhỏ nhất`,max:`Lớn nhất`},s=(0,r.memo)(()=>{let{table:s,totalRows:l}=t.Y(),{rowSelectionState:u}=t.J(),{isOpen:d,toggle:f}=t.q(),p=(0,r.useMemo)(()=>s.getRowModel().rows,[s]),m=(0,r.useMemo)(()=>s.getSelectedRowModel().flatRows,[s,u]),h=(0,r.useMemo)(()=>s.getHeaderGroups()[0]?.headers??[],[s]),g=(0,r.useMemo)(()=>h.filter(e=>![`select`,`actions`].includes(e.id)).flatMap(e=>{let n=e.column.columnDef.meta?.aggregation;if(!n)return[];let r=n.label??(typeof e.column.columnDef.header==`string`?e.column.columnDef.header:e.id),i=t.B(p,e.id),a=m.length>0?t.B(m,e.id):null;return[{colId:e.id,header:r,aggregation:n,allValue:t.z(p.length,i,n.type),selectedValue:a===null?null:t.z(m.length,a,n.type)}]}),[h,p,m]);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:f,"aria-expanded":d,children:[(0,a.jsx)(`span`,{children:`Tổng quan dữ liệu`}),d?(0,a.jsx)(n.ChevronUpIcon,{size:14}):(0,a.jsx)(n.ChevronDownIcon,{size:14})]}),d&&(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)(c,{label:`Tổng bản ghi`,value:l??p.length}),(0,a.jsx)(c,{label:`Hàng hiển thị`,value:p.length}),(0,a.jsx)(c,{label:`Hàng đã chọn`,value:m.length,highlight:m.length>0})]}),g.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`}),m.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:g.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:o[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`})}),m.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))})]})})]})]})]})});s.displayName=`UITableAnalysisPanel`;const c=(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()})]}));c.displayName=`StatChip`,exports.UITableAnalysisPanel=s;
|
|
2
|
+
//# sourceMappingURL=analysis-panel-Bg0lCfWv.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analysis-panel-CQZ0hmfN.cjs","names":["useUITableContext","useUITableBodyContext","useUITableAnalysisContext","extractNumericValues","computeAggregation","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 { Statistic } from '@/components/data-display/statistic';\nimport type { AnyEntity } from '@/types';\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\nimport { computeAggregation, extractNumericValues } from '../../utils/aggregation';\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-Bg0lCfWv.cjs","names":["useUITableContext","useUITableBodyContext","useUITableAnalysisContext","extractNumericValues","computeAggregation","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 { Statistic } from '@/components/data-display/statistic';\nimport type { AnyEntity } from '@/types';\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\nimport { computeAggregation, extractNumericValues } from '../../utils/aggregation';\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
|
-
import{Statistic as e}from"./data-display/statistic.mjs";import{B as t,J as n,Y as r,q as i,z as a}from"./tables-
|
|
2
|
-
//# sourceMappingURL=analysis-panel-
|
|
1
|
+
import{Statistic as e}from"./data-display/statistic.mjs";import{B as t,J as n,Y as r,q as i,z as a}from"./tables-7_KgoyS-.mjs";import{ChevronDownIcon as o,ChevronUpIcon as s}from"lucide-react";import{memo as c,useMemo as l}from"react";import{cn as u}from"@customafk/react-toolkit/utils";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p={sum:`Tổng`,avg:`Trung bình`,count:`Đếm`,min:`Nhỏ nhất`,max:`Lớn nhất`},m=c(()=>{let{table:c,totalRows:m}=r(),{rowSelectionState:g}=n(),{isOpen:_,toggle:v}=i(),y=l(()=>c.getRowModel().rows,[c]),b=l(()=>c.getSelectedRowModel().flatRows,[c,g]),x=l(()=>c.getHeaderGroups()[0]?.headers??[],[c]),S=l(()=>x.filter(e=>![`select`,`actions`].includes(e.id)).flatMap(e=>{let n=e.column.columnDef.meta?.aggregation;if(!n)return[];let r=n.label??(typeof e.column.columnDef.header==`string`?e.column.columnDef.header:e.id),i=t(y,e.id),o=b.length>0?t(b,e.id):null;return[{colId:e.id,header:r,aggregation:n,allValue:a(y.length,i,n.type),selectedValue:o===null?null:a(b.length,o,n.type)}]}),[x,y,b]);return f(`div`,{"data-slot":`table-analysis-panel`,className:`w-full border-t border-border`,children:[f(`button`,{type:`button`,className:u(`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:[d(`span`,{children:`Tổng quan dữ liệu`}),d(_?s:o,{size:14})]}),_&&f(`div`,{className:`px-4 pb-4 pt-2 space-y-4`,children:[f(`div`,{className:`flex flex-wrap gap-4`,children:[d(h,{label:`Tổng bản ghi`,value:m??y.length}),d(h,{label:`Hàng hiển thị`,value:y.length}),d(h,{label:`Hàng đã chọn`,value:b.length,highlight:b.length>0})]}),S.length>0&&f(`div`,{children:[d(`p`,{className:`mb-2 text-xs font-semibold uppercase tracking-wide text-text-positive-weak`,children:`Tóm tắt cột`}),d(`div`,{className:`overflow-x-auto rounded-md border border-border`,children:f(`table`,{className:`w-full text-sm`,children:[d(`thead`,{children:f(`tr`,{className:`border-b border-border bg-muted-bg-subtle text-xs text-text-positive-weak`,children:[d(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Cột`}),d(`th`,{className:`px-3 py-2 text-left font-medium`,children:`Kiểu`}),d(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Tất cả hàng`}),b.length>0&&d(`th`,{className:`px-3 py-2 text-right font-medium`,children:`Hàng đã chọn`})]})}),d(`tbody`,{children:S.map((t,n)=>f(`tr`,{className:u(`border-b border-border last:border-b-0`,n%2==1&&`bg-muted-bg-subtle/50`),children:[d(`td`,{className:`px-3 py-2 text-text-positive font-medium`,children:t.header}),d(`td`,{className:`px-3 py-2 text-text-positive-weak`,children:p[t.aggregation.type]}),d(`td`,{className:`px-3 py-2 text-right`,children:d(e,{value:t.allValue,prefix:t.aggregation.prefix,suffix:t.aggregation.suffix,precision:t.aggregation.precision,size:`sm`})}),b.length>0&&d(`td`,{className:`px-3 py-2 text-right`,children:t.selectedValue===null?d(`span`,{className:`text-text-positive-weak`,children:`—`}):d(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=c(({label:e,value:t,highlight:n})=>f(`div`,{className:u(`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:[d(`span`,{className:`text-[11px] text-text-positive-weak`,children:e}),d(`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-Cop-l4lx.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analysis-panel-BqZmOU58.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 { Statistic } from '@/components/data-display/statistic';\nimport type { AnyEntity } from '@/types';\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\nimport { computeAggregation, extractNumericValues } from '../../utils/aggregation';\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-Cop-l4lx.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 { Statistic } from '@/components/data-display/statistic';\nimport type { AnyEntity } from '@/types';\nimport { useUITableAnalysisContext, useUITableBodyContext, useUITableContext } from '../../hooks/use-context';\nimport type { ColumnAggregation, ColumnAggregationType } from '../../types';\nimport { computeAggregation, extractNumericValues } from '../../utils/aggregation';\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
|
-
import{Q as e}from"./tables-
|
|
2
|
-
//# sourceMappingURL=badge-display-
|
|
1
|
+
import{Q as e}from"./tables-7_KgoyS-.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-B0BKsU9T.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge-display-
|
|
1
|
+
{"version":3,"file":"badge-display-B0BKsU9T.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,EANF,SAAA,CAQG,EACD,EAAC,SAAD,CACE,UAAU,yEACV,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,EAEA,SAAA,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,EAEC,SAAA,CACK,CAAA,EAnCS,EAAC,EAAD,CAAe,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require("./tables-
|
|
2
|
-
//# sourceMappingURL=badge-display-
|
|
1
|
+
const e=require("./tables-CS3NhgTc.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.Q,{});exports.UITableBadgeDisplay=r;
|
|
2
|
+
//# sourceMappingURL=badge-display-Dv2UTvzp.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge-display-
|
|
1
|
+
{"version":3,"file":"badge-display-Dv2UTvzp.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,EANF,SAAA,CAQG,GACD,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAU,yEACV,QAAS,GAAK,CACZ,IAAW,EACX,EAAE,gBAAgB,EAClB,EAAE,eAAe,CACnB,EAEA,UAAA,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,EAEC,SAAA,CACK,CAAA,GAnCS,EAAA,EAAA,IAAA,CAACD,EAAAA,EAAD,CAAe,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Q as e}from"./tables-
|
|
2
|
-
//# sourceMappingURL=boolean-display-
|
|
1
|
+
import{Q as e}from"./tables-7_KgoyS-.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-CMX5AupA.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"boolean-display-
|
|
1
|
+
{"version":3,"file":"boolean-display-CMX5AupA.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
|
-
const e=require("./tables-
|
|
2
|
-
//# sourceMappingURL=boolean-display-
|
|
1
|
+
const e=require("./tables-CS3NhgTc.cjs");let t=require("lucide-react"),n=require("react/jsx-runtime");const r=({value:r})=>r==null?(0,n.jsx)(e.Q,{}):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-CPX7H39m.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"boolean-display-
|
|
1
|
+
{"version":3,"file":"boolean-display-CPX7H39m.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"}
|
|
@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
6
6
|
declare const buttonVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
|
|
8
8
|
color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
|
|
9
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" | "
|
|
9
|
+
size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
type ButtonVariantProps = VariantProps<typeof buttonVariants>;
|
|
12
12
|
//#endregion
|
|
@@ -155,4 +155,4 @@ interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {
|
|
|
155
155
|
declare function Button({ className, variant, size, color, asChild, isLoading, children, disabled, type, innerClassName, ...props }: ButtonProps): import("react").JSX.Element;
|
|
156
156
|
//#endregion
|
|
157
157
|
export { ButtonProps as n, Button as t };
|
|
158
|
-
//# sourceMappingURL=button-
|
|
158
|
+
//# sourceMappingURL=button-DQLIL8K2.d.cts.map
|
|
@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
|
|
|
6
6
|
declare const buttonVariants: (props?: ({
|
|
7
7
|
variant?: "default" | "soft" | "outline" | "link" | "ghost" | "subtle" | null | undefined;
|
|
8
8
|
color?: "primary" | "secondary" | "muted" | "info" | "success" | "warning" | "danger" | "important" | null | undefined;
|
|
9
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" | "
|
|
9
|
+
size?: "default" | "xs" | "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
|
|
10
10
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
11
|
type ButtonVariantProps = VariantProps<typeof buttonVariants>;
|
|
12
12
|
//#endregion
|
|
@@ -155,4 +155,4 @@ interface ButtonProps extends Omit<React.ComponentProps<'button'>, 'color'> {
|
|
|
155
155
|
declare function Button({ className, variant, size, color, asChild, isLoading, children, disabled, type, innerClassName, ...props }: ButtonProps): import("react").JSX.Element;
|
|
156
156
|
//#endregion
|
|
157
157
|
export { ButtonProps as n, Button as t };
|
|
158
|
-
//# sourceMappingURL=button-
|
|
158
|
+
//# sourceMappingURL=button-DQLIL8K2.d.mts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as Button } from "./button-
|
|
1
|
+
import { t as Button } from "./button-DQLIL8K2.mjs";
|
|
2
2
|
import { DayButton, DayPicker } from "react-day-picker";
|
|
3
3
|
//#region packages/components/ui/calendar.d.ts
|
|
4
4
|
declare const CalendarDayButton: ({ className, day, modifiers, color: _, ...props }: React.ComponentProps<typeof DayButton>) => import("react").JSX.Element;
|
|
@@ -25,4 +25,4 @@ declare function Calendar({ className, classNames, showOutsideDays, captionLayou
|
|
|
25
25
|
}): import("react").JSX.Element;
|
|
26
26
|
//#endregion
|
|
27
27
|
export { CalendarDayButton as n, Calendar as t };
|
|
28
|
-
//# sourceMappingURL=calendar-
|
|
28
|
+
//# sourceMappingURL=calendar-5VVBPn4F.d.mts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as Button } from "./button-
|
|
1
|
+
import { t as Button } from "./button-DQLIL8K2.cjs";
|
|
2
2
|
import { DayButton, DayPicker } from "react-day-picker";
|
|
3
3
|
//#region packages/components/ui/calendar.d.ts
|
|
4
4
|
declare const CalendarDayButton: ({ className, day, modifiers, color: _, ...props }: React.ComponentProps<typeof DayButton>) => import("react").JSX.Element;
|
|
@@ -25,4 +25,4 @@ declare function Calendar({ className, classNames, showOutsideDays, captionLayou
|
|
|
25
25
|
}): import("react").JSX.Element;
|
|
26
26
|
//#endregion
|
|
27
27
|
export { CalendarDayButton as n, Calendar as t };
|
|
28
|
-
//# sourceMappingURL=calendar-
|
|
28
|
+
//# sourceMappingURL=calendar-DHcoDDIc.d.cts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as Button } from "./button-
|
|
1
|
+
import { t as Button } from "./button-DQLIL8K2.cjs";
|
|
2
2
|
import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
3
|
//#region packages/components/ui/carousel.d.ts
|
|
4
4
|
type CarouselApi = UseEmblaCarouselType[1];
|
|
@@ -42,4 +42,4 @@ declare function CarouselPrevious({ className, variant, size, ...props }: React.
|
|
|
42
42
|
declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
|
|
43
43
|
//#endregion
|
|
44
44
|
export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
|
|
45
|
-
//# sourceMappingURL=carousel-
|
|
45
|
+
//# sourceMappingURL=carousel-D0jTbSoW.d.cts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as Button } from "./button-
|
|
1
|
+
import { t as Button } from "./button-DQLIL8K2.mjs";
|
|
2
2
|
import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
|
|
3
3
|
//#region packages/components/ui/carousel.d.ts
|
|
4
4
|
type CarouselApi = UseEmblaCarouselType[1];
|
|
@@ -42,4 +42,4 @@ declare function CarouselPrevious({ className, variant, size, ...props }: React.
|
|
|
42
42
|
declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react").JSX.Element;
|
|
43
43
|
//#endregion
|
|
44
44
|
export { CarouselNext as a, CarouselItem as i, CarouselApi as n, CarouselPrevious as o, CarouselContent as r, Carousel as t };
|
|
45
|
-
//# sourceMappingURL=carousel-
|
|
45
|
+
//# sourceMappingURL=carousel-qH6YsFKK.d.mts.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{t as e}from"./dist-CtTonIm8.mjs";import{Button as t}from"./ui/button.mjs";import"./ui/skeleton.mjs";import{Tooltip as n,TooltipContent as r,TooltipProvider as i,TooltipTrigger as a}from"./ui/tooltip.mjs";import{Avatar as o,AvatarFallback as s,AvatarImage as c}from"./ui/avatar.mjs";import{LunasLogo as l}from"./features/logo/index.mjs";import{DropdownMenu as u,DropdownMenuContent as d,DropdownMenuGroup as f,DropdownMenuItem as p,DropdownMenuSeparator as m,DropdownMenuTrigger as h}from"./ui/dropdown-menu.mjs";import{Input as g}from"./ui/input.mjs";import{Separator as _}from"./ui/separator.mjs";import{EarthIcon as v,LogOutIcon as y,MenuIcon as b,UserRoundIcon as x}from"lucide-react";import{createContext as S,memo as C,useCallback as w,useContext as T,useEffect as E,useMemo as D,useState as O}from"react";import{cn as k}from"@customafk/react-toolkit/utils";import{cva as A}from"class-variance-authority";import{Fragment as j,jsx as M,jsxs as N}from"react/jsx-runtime";import{colorHashLight as P}from"@customafk/react-toolkit/color-hash";const F=S(null);function I(){let e=T(F);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function L({defaultOpen:e=!0,open:t,onOpenChange:n,className:r,style:a,children:o,...s}){let[c,l]=O(e),u=t??c,d=w(e=>{let t=typeof e==`function`?e(u):e;n?n(t):l(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[n,u]),f=w(()=>{d(e=>!e)},[d]);E(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),f())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[f]);let p=u?`expanded`:`collapsed`,m=D(()=>({state:p,open:u,setOpen:d,toggleSidebar:f}),[p,u,d,f]);return M(F.Provider,{value:m,children:M(i,{delayDuration:0,children:M(`div`,{"data-slot":`layout-scroll-container`,className:`h-dvh w-full overflow-auto bg-sidebar`,children:M(`section`,{"data-slot":`layout-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:k(`group/sidebar-wrapper relative grid`,`h-dvh min-h-160 w-full min-w-264 max-w-svw`,`grid-cols-[auto_1fr] grid-rows-[auto_1fr]`,r),...s,children:o})})})})}const R=C(({side:e=`left`,className:t,children:n,...r})=>{let{state:i}=I();return N(`div`,{className:`group peer relative col-start-1 row-start-2 block bg-card text-sidebar-foreground`,"data-state":i,"data-collapsible":i===`collapsed`?`icon`:``,"data-side":e,"data-slot":`sidebar`,children:[M(`div`,{"data-slot":`sidebar-gap`,className:k(`relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear`,`group-data-[side=right]:rotate-180`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`)}),M(`div`,{"data-slot":`sidebar-container`,className:k(`absolute inset-y-0 z-10 flex w-(--sidebar-width) p-2 shadow-nav`,`transition-[left,right,width] duration-200 ease-linear`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`,e===`left`?`left-0`:`right-0`,t),...r,children:M(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`relative flex size-full flex-col`,children:n})})]})});R.displayName=`CMSLayoutSidebar`;const z=C(({className:e,children:t,...n})=>M(`main`,{"data-slot":`sidebar-inset`,className:k(`col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1`,e),...n,children:M(`div`,{className:`relative grid min-h-0 grid-cols-1 overflow-auto`,children:t})}));z.displayName=`CMSLayoutMain`;const B=C(({className:e,...t})=>M(g,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:k(`h-8 w-full bg-background shadow-none`,e),...t}));B.displayName=`SidebarInput`;const V=C(({className:e,...t})=>M(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:k(`flex flex-col gap-2 p-2`,e),...t}));V.displayName=`SidebarHeader`;const H=C(({className:e,...t})=>M(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:k(`flex flex-col gap-2`,e),...t}));H.displayName=`SidebarFooter`;const U=C(({className:e,...t})=>M(_,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:k(`mx-2 w-auto bg-sidebar-border`,e),...t}));U.displayName=`SidebarSeparator`;const W=C(({className:e,...t})=>M(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:k(`flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t}));W.displayName=`SidebarContent`;const G=C(({className:e,...t})=>M(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:k(`relative flex w-full flex-col`,e),...t}));G.displayName=`SidebarGroup`;const K=C(({className:t,asChild:n=!1,...r})=>M(n?e:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:k(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r}));K.displayName=`SidebarGroupLabel`;const q=C(({className:e,...t})=>M(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:k(`w-full text-sm`,e),...t}));q.displayName=`SidebarGroupContent`;const J=C(({className:e,...t})=>M(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:k(`flex w-full min-w-0 flex-col gap-1`,e),...t}));J.displayName=`SidebarMenu`;const Y=C(({className:e,...t})=>M(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:k(`group/menu-item relative`,e),...t}));Y.displayName=`SidebarMenuItem`;const X=A([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,background-color,width,height,padding]`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`disabled:pointer-events-none disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6 [&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}}),Z=C(({asChild:t=!1,isActive:i=!1,variant:o=`default`,size:s=`default`,tooltip:c,className:l,...u})=>{let d=t?e:`button`,{state:f}=I(),p=M(d,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":s,"data-active":i,className:k(X({variant:o,size:s}),l),...u});return c?(typeof c==`string`&&(c={children:c}),N(n,{children:[M(a,{asChild:!0,children:p}),M(r,{side:`right`,align:`center`,hidden:f!==`collapsed`,...c})]})):p});Z.displayName=`SidebarMenuButton`;const ee=({i18nText:e,onChangeToEnLocale:n,onChangeToViLocale:r,user:i,onLogout:a,logoutLabel:g=`Log out`,logo:_})=>{let{toggleSidebar:S}=I(),C=w(e=>{e.preventDefault(),e.stopPropagation(),S()},[S]),T=w(e=>{e.preventDefault(),e.stopPropagation(),n?.()},[n]),E=w(e=>{e.preventDefault(),e.stopPropagation(),r?.()},[r]),D=i?P.hex(i.name):void 0;return N(`header`,{"data-slot":`cms-layout-header`,className:k(`bg-card`,`h-(--header-height)`,`sm:h-(--header-height) sm:px-4 sm:pr-6`,`col-span-2 row-start-1 z-20 gap-2 px-2 pr-4.5`,`flex items-center shadow-nav`,`transition-[height] ease-linear`),children:[N(t,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`size-10 rounded-full transition-all hover:text-text-positive`,onClick:C,children:[M(b,{className:`size-6!`}),M(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),M(`div`,{className:`flex flex-1 items-center sm:ml-2.5`,children:_??M(l,{variant:`horizontal`,size:`xs`})}),N(`div`,{className:`flex items-center gap-1`,children:[i&&N(u,{children:[M(h,{asChild:!0,children:N(t,{variant:`ghost`,color:`muted`,className:`h-9 gap-2.5 rounded-full px-2 transition-all`,children:[N(o,{className:`size-7 shrink-0`,children:[M(c,{src:i.avatarUrl,alt:i.name}),M(s,{style:{backgroundColor:D},children:M(x,{size:14,className:`text-white`})})]}),N(`div`,{className:`hidden flex-col items-start sm:flex`,children:[M(`span`,{className:`max-w-36 truncate text-xs font-semibold leading-tight text-text-positive`,children:i.name}),i.email&&M(`span`,{className:`max-w-36 truncate text-xs leading-tight text-text-positive-weak`,children:i.email})]})]})}),N(d,{align:`end`,className:`w-60`,children:[N(`div`,{className:`flex flex-col items-center gap-2 px-4 py-4 text-center`,children:[N(o,{className:`size-12`,children:[M(c,{src:i.avatarUrl,alt:i.name}),M(s,{style:{backgroundColor:D},children:M(x,{size:22,className:`text-white`})})]}),N(`div`,{className:`flex min-w-0 w-full flex-col items-center gap-0.5`,children:[M(`p`,{className:`truncate text-sm font-semibold text-text-positive`,children:i.name}),i.email&&M(`p`,{className:`truncate text-xs text-text-positive-weak`,children:i.email}),i.role&&M(`span`,{className:`mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak`,children:i.role})]})]}),a&&N(j,{children:[M(m,{}),M(f,{children:N(p,{className:`text-danger focus:text-danger`,onClick:a,children:[M(y,{className:`size-4`}),g]})})]})]})]}),i&&(n||r)&&M(`div`,{className:`mx-1 h-5 w-px bg-border`}),(n||r)&&N(u,{children:[M(h,{asChild:!0,children:N(t,{"data-slot":`locale-trigger`,variant:`ghost`,color:`muted`,className:`gap-x-1 rounded-full transition-all hover:text-text-positive`,children:[M(v,{className:`size-6!`}),e]})}),M(d,{align:`end`,children:N(f,{children:[M(p,{onClick:T,children:`EN - English`}),M(p,{onClick:E,children:`VI - Vietnamese`})]})})]})]})]})},Q=C(({id:e,label:t,icon:n,activeNavItemId:r,onClick:i,renderAs:a})=>M(Y,{children:a?M(Z,{asChild:!0,isActive:e===r,children:a({icon:n,label:t})}):N(Z,{isActive:e===r,onClick:i,children:[n,t]})}));Q.displayName=`SidebarContentGroupItem`;const $=C(({id:e,label:t,children:n})=>N(G,{children:[M(K,{children:t}),M(q,{children:M(J,{children:n})})]}));$.displayName=`SidebarContentGroup`;const te=({i18nText:e,activeNavItemId:t,sidebar:n,children:r,onChangeToEnLocale:i,onChangeToViLocale:a,onLogout:o,logoutLabel:s=`Log out`,copyright:c=`Copyright © ${new Date().getFullYear()}, Lunas.`,user:l})=>{let u=n?.groupcontent??[];return N(L,{children:[M(ee,{i18nText:e,onChangeToEnLocale:i,onChangeToViLocale:a,user:l,onLogout:o,logoutLabel:s}),N(R,{children:[M(W,{children:u.map(e=>M($,{id:e.id,label:e.label,children:e.items.map(e=>M(Q,{id:e.id,activeNavItemId:t,label:e.label,icon:e.icon,renderAs:e.renderAs,onClick:e.onClick},e.id))},e.id))}),M(H,{children:N(J,{children:[M(Y,{children:N(Z,{className:`border border-border`,onClick:o,children:[M(y,{className:`text-text-positive-weak`}),s]})}),M(Y,{className:`mt-2 border-t border-t-border`,children:M(`p`,{className:`pt-2 text-center text-xs text-text-positive-subtle`,children:c})})]})})]}),M(z,{children:r})]})};export{te as t};
|
|
2
|
+
//# sourceMappingURL=cms-layout-Ba_5wSnr.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cms-layout-Ba_5wSnr.mjs","names":[],"sources":["../packages/components/layouts/cms-layout/components/sidebar.tsx","../packages/components/layouts/cms-layout/components/header.tsx","../packages/components/layouts/cms-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { PanelLeftIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n return context;\n}\n\nfunction CMSLayoutProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n // biome-ignore lint/suspicious/noDocumentCookie: persists sidebar state across page loads\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n const toggleSidebar = useCallback(() => {\n setOpen(open => !open);\n }, [setOpen]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(() => ({ state, open, setOpen, toggleSidebar }), [state, open, setOpen, toggleSidebar]);\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div data-slot=\"layout-scroll-container\" className=\"h-dvh w-full overflow-auto bg-sidebar\">\n <section\n data-slot=\"layout-wrapper\"\n style={{ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON, ...style } as React.CSSProperties}\n className={cn(\n 'group/sidebar-wrapper relative grid',\n 'h-dvh min-h-160 w-full min-w-264 max-w-svw',\n 'grid-cols-[auto_1fr] grid-rows-[auto_1fr]',\n className\n )}\n {...props}\n >\n {children}\n </section>\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nconst CMSLayoutSidebar = memo(\n ({\n side = 'left',\n className,\n children,\n ...props\n }: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n }) => {\n const { state } = useSidebar();\n\n return (\n <div\n className=\"group peer relative col-start-1 row-start-2 block bg-card text-sidebar-foreground\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? 'icon' : ''}\n data-side={side}\n data-slot=\"sidebar\"\n >\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n 'group-data-[side=right]:rotate-180',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'absolute inset-y-0 z-10 flex w-(--sidebar-width) p-2 shadow-nav',\n 'transition-[left,right,width] duration-200 ease-linear',\n 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]',\n side === 'left' ? 'left-0' : 'right-0',\n className\n )}\n {...props}\n >\n <div data-sidebar=\"sidebar\" data-slot=\"sidebar-inner\" className=\"relative flex size-full flex-col\">\n {children}\n </div>\n </div>\n </div>\n );\n }\n);\nCMSLayoutSidebar.displayName = 'CMSLayoutSidebar';\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nconst CMSLayoutMain = memo(({ className, children, ...props }: React.ComponentProps<'main'>) => {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1', className)} {...props}>\n <div className=\"relative grid min-h-0 grid-cols-1 overflow-auto\">{children}</div>\n </main>\n );\n});\nCMSLayoutMain.displayName = 'CMSLayoutMain';\n\nconst SidebarInput = memo(({ className, ...props }: React.ComponentProps<typeof Input>) => {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n});\nSidebarInput.displayName = 'SidebarInput';\n\nconst SidebarHeader = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n});\nSidebarHeader.displayName = 'SidebarHeader';\n\nconst SidebarFooter = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2', className)} {...props} />;\n});\nSidebarFooter.displayName = 'SidebarFooter';\n\nconst SidebarSeparator = memo(({ className, ...props }: React.ComponentProps<typeof Separator>) => {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n});\nSidebarSeparator.displayName = 'SidebarSeparator';\n\nconst SidebarContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n});\nSidebarContent.displayName = 'SidebarContent';\n\nconst SidebarGroup = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full flex-col', className)} {...props} />;\n});\nSidebarGroup.displayName = 'SidebarGroup';\n\nconst SidebarGroupLabel = memo(({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) => {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n});\nSidebarGroupLabel.displayName = 'SidebarGroupLabel';\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,transform] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',\n '[&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nconst SidebarGroupContent = memo(({ className, ...props }: React.ComponentProps<'div'>) => {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n});\nSidebarGroupContent.displayName = 'SidebarGroupContent';\n\nconst SidebarMenu = memo(({ className, ...props }: React.ComponentProps<'ul'>) => {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n});\nSidebarMenu.displayName = 'SidebarMenu';\n\nconst SidebarMenuItem = memo(({ className, ...props }: React.ComponentProps<'li'>) => {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n});\nSidebarMenuItem.displayName = 'SidebarMenuItem';\n\nconst sidebarMenuButtonVariants = cva(\n [\n 'peer/menu-button',\n 'cursor-pointer',\n 'flex w-full items-center gap-2',\n 'overflow-hidden rounded-md p-2 outline-hidden',\n 'truncate text-left font-normal',\n 'transition-[color,background-color,width,height,padding]',\n 'active:bg-sidebar-accent active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6 [&>svg]:shrink-0',\n '[&>span:last-child]:truncate',\n ],\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',\n outline:\n 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n },\n size: {\n default: 'h-10 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nconst SidebarMenuButton = memo(\n ({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n }: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n } & VariantProps<typeof sidebarMenuButtonVariants>) => {\n const Comp = asChild ? Slot : 'button';\n const { state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) return button;\n\n if (typeof tooltip === 'string') {\n tooltip = { children: tooltip };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed'} {...tooltip} />\n </Tooltip>\n );\n }\n);\nSidebarMenuButton.displayName = 'SidebarMenuButton';\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color,opacity] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums transition-colors',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n const width = useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);\n\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={{ '--skeleton-width': width } as React.CSSProperties}\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-[background-color,color] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n CMSLayoutMain,\n CMSLayoutProvider,\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","'use client';\n\nimport { useCallback } from 'react';\n\nimport { EarthIcon, LogOutIcon, MenuIcon, UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport { LunasLogo } from '@/components/features/logo';\n\nimport { useSidebar } from './sidebar';\n\nexport type CMSLayoutUser = {\n /** Display name shown in the header and user dropdown. */\n name: string;\n /** Email address shown below the name in the dropdown. */\n email?: string;\n /** Role or position shown as a muted label in the dropdown. */\n role?: string;\n /** Optional avatar image URL; falls back to a color-hashed icon. */\n avatarUrl?: string;\n};\n\nexport const CMSLayoutHeader: React.FC<{\n i18nText?: string;\n onChangeToEnLocale?: () => void;\n onChangeToViLocale?: () => void;\n user?: CMSLayoutUser;\n onLogout?: () => void;\n logoutLabel?: string;\n logo?: React.ReactNode;\n}> = ({ i18nText, onChangeToEnLocale, onChangeToViLocale, user, onLogout, logoutLabel = 'Log out', logo }) => {\n const { toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n toggleSidebar();\n },\n [toggleSidebar]\n );\n\n const handleEnLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToEnLocale?.();\n },\n [onChangeToEnLocale]\n );\n\n const handleViLocale = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onChangeToViLocale?.();\n },\n [onChangeToViLocale]\n );\n\n const avatarBg = user ? colorHashLight.hex(user.name) : undefined;\n\n return (\n <header\n data-slot=\"cms-layout-header\"\n className={cn(\n 'bg-card',\n 'h-(--header-height)',\n 'sm:h-(--header-height) sm:px-4 sm:pr-6',\n 'col-span-2 row-start-1 z-20 gap-2 px-2 pr-4.5',\n 'flex items-center shadow-nav',\n 'transition-[height] ease-linear'\n )}\n >\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n\n <div className=\"flex flex-1 items-center sm:ml-2.5\">{logo ?? <LunasLogo variant=\"horizontal\" size=\"xs\" />}</div>\n\n <div className=\"flex items-center gap-1\">\n {user && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" color=\"muted\" className=\"h-9 gap-2.5 rounded-full px-2 transition-all\">\n <Avatar className=\"size-7 shrink-0\">\n <AvatarImage src={user.avatarUrl} alt={user.name} />\n <AvatarFallback style={{ backgroundColor: avatarBg }}>\n <UserRoundIcon size={14} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n <div className=\"hidden flex-col items-start sm:flex\">\n <span className=\"max-w-36 truncate text-xs font-semibold leading-tight text-text-positive\">{user.name}</span>\n {user.email && <span className=\"max-w-36 truncate text-xs leading-tight text-text-positive-weak\">{user.email}</span>}\n </div>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-60\">\n <div className=\"flex flex-col items-center gap-2 px-4 py-4 text-center\">\n <Avatar className=\"size-12\">\n <AvatarImage src={user.avatarUrl} alt={user.name} />\n <AvatarFallback style={{ backgroundColor: avatarBg }}>\n <UserRoundIcon size={22} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n <div className=\"flex min-w-0 w-full flex-col items-center gap-0.5\">\n <p className=\"truncate text-sm font-semibold text-text-positive\">{user.name}</p>\n {user.email && <p className=\"truncate text-xs text-text-positive-weak\">{user.email}</p>}\n {user.role && (\n <span className=\"mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak\">\n {user.role}\n </span>\n )}\n </div>\n </div>\n {onLogout && (\n <>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem className=\"text-danger focus:text-danger\" onClick={onLogout}>\n <LogOutIcon className=\"size-4\" />\n {logoutLabel}\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </>\n )}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n\n {user && (onChangeToEnLocale || onChangeToViLocale) && <div className=\"mx-1 h-5 w-px bg-border\" />}\n\n {(onChangeToEnLocale || onChangeToViLocale) && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button data-slot=\"locale-trigger\" variant=\"ghost\" color=\"muted\" className=\"gap-x-1 rounded-full transition-all hover:text-text-positive\">\n <EarthIcon className=\"size-6!\" />\n {i18nText}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleEnLocale}>EN - English</DropdownMenuItem>\n <DropdownMenuItem onClick={handleViLocale}>VI - Vietnamese</DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </header>\n );\n};\n","'use client';\n\nimport { memo } from 'react';\n\nimport { LogOutIcon } from 'lucide-react';\n\nimport { CMSLayoutHeader, type CMSLayoutUser } from './components/header';\nimport {\n CMSLayoutMain,\n CMSLayoutProvider,\n CMSLayoutSidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from './components/sidebar';\n\ntype NavItem = {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. Use for simple programmatic navigation. */\n onClick?: () => void;\n /**\n * Renders the button as a custom element using the Radix Slot (asChild) pattern.\n * Return a single element (e.g. a TanStack Router `<Link>`) wrapping the icon + label content.\n *\n * @example\n * ```tsx\n * renderAs: ({ icon, label }) => <Link to=\"/dashboard\">{icon}{label}</Link>\n * ```\n */\n renderAs?: (content: { icon?: React.ReactNode; label: string }) => React.ReactElement;\n};\n\ntype NavGroup = {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n /** Navigation items that belong to this group. */\n items: NavItem[];\n};\n\nexport type { CMSLayoutUser };\n\nexport type CMSLayoutProps = {\n /** Text label used by the header for language-toggle or i18n display. */\n i18nText?: string;\n /** ID of the currently active navigation item; matched against `NavItem.id` to highlight the active button. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: { groupcontent: NavGroup[] };\n /** Callback fired when the logout button is clicked. */\n onLogout?: () => void;\n /** Callback fired when the user switches the UI locale to English. */\n onChangeToEnLocale?: () => void;\n /** Callback fired when the user switches the UI locale to Vietnamese. */\n onChangeToViLocale?: () => void;\n /**\n * Label displayed on the logout button.\n * @default 'Log out'\n */\n logoutLabel?: string;\n /**\n * Copyright string shown at the bottom of the sidebar.\n * @default `Copyright © <current year>, Lunas.`\n */\n copyright?: string;\n /** Authenticated user shown in the header avatar dropdown. Omit to hide the user menu. */\n user?: CMSLayoutUser;\n};\n\nconst SidebarContentGroupItem = memo<NavItem & { activeNavItemId?: string }>(({ id, label, icon, activeNavItemId, onClick, renderAs }) => (\n <SidebarMenuItem>\n {renderAs ? (\n <SidebarMenuButton asChild isActive={id === activeNavItemId}>\n {renderAs({ icon, label })}\n </SidebarMenuButton>\n ) : (\n <SidebarMenuButton isActive={id === activeNavItemId} onClick={onClick}>\n {icon}\n {label}\n </SidebarMenuButton>\n )}\n </SidebarMenuItem>\n));\nSidebarContentGroupItem.displayName = 'SidebarContentGroupItem';\n\nconst SidebarContentGroup = memo<React.PropsWithChildren<Omit<NavGroup, 'items'>>>(({ id, label, children }) => (\n <SidebarGroup>\n <SidebarGroupLabel>{label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>{children}</SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n));\nSidebarContentGroup.displayName = 'SidebarContentGroup';\n\n/**\n * Full-page CMS application shell with a collapsible inset sidebar, header, and main content area.\n *\n * @example\n * ```tsx\n * import { CMSLayout } from '@customafk/lunas-ui/layouts/cms-layout';\n * import { LayoutDashboardIcon } from 'lucide-react';\n *\n * <CMSLayout\n * activeNavItemId=\"dashboard\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'main',\n * label: 'Main',\n * items: [\n * {\n * id: 'dashboard',\n * label: 'Dashboard',\n * icon: <LayoutDashboardIcon />,\n * // Option A — TanStack Router Link (asChild/Slot pattern):\n * renderAs: ({ icon, label }) => <Link to=\"/\">{icon}{label}</Link>,\n * // Option B — simple click handler:\n * // onClick: () => router.navigate({ to: '/' }),\n * },\n * ],\n * },\n * ],\n * }}\n * onLogout={() => signOut()}\n * >\n * <DashboardPage />\n * </CMSLayout>\n * ```\n */\nexport const CMSLayout: React.FC<React.PropsWithChildren<CMSLayoutProps>> = ({\n i18nText,\n activeNavItemId,\n sidebar,\n children,\n onChangeToEnLocale,\n onChangeToViLocale,\n onLogout,\n logoutLabel = 'Log out',\n copyright = `Copyright © ${new Date().getFullYear()}, Lunas.`,\n user,\n}) => {\n const groups = sidebar?.groupcontent ?? [];\n\n return (\n <CMSLayoutProvider>\n <CMSLayoutHeader\n i18nText={i18nText}\n onChangeToEnLocale={onChangeToEnLocale}\n onChangeToViLocale={onChangeToViLocale}\n user={user}\n onLogout={onLogout}\n logoutLabel={logoutLabel}\n />\n <CMSLayoutSidebar>\n <SidebarContent>\n {groups.map(group => (\n <SidebarContentGroup key={group.id} id={group.id} label={group.label}>\n {group.items.map(item => (\n <SidebarContentGroupItem\n key={item.id}\n id={item.id}\n activeNavItemId={activeNavItemId}\n label={item.label}\n icon={item.icon}\n renderAs={item.renderAs}\n onClick={item.onClick}\n />\n ))}\n </SidebarContentGroup>\n ))}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton className=\"border border-border\" onClick={onLogout}>\n <LogOutIcon className=\"text-text-positive-weak\" />\n {logoutLabel}\n </SidebarMenuButton>\n </SidebarMenuItem>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-xs text-text-positive-subtle\">{copyright}</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </CMSLayoutSidebar>\n <CMSLayoutMain>{children}</CMSLayoutMain>\n </CMSLayoutProvider>\n );\n};\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=require("./dist-DzA--RwW.cjs"),t=require("./ui/button.cjs");require("./ui/skeleton.cjs");const n=require("./ui/tooltip.cjs"),r=require("./ui/avatar.cjs"),i=require("./features/logo/index.cjs"),a=require("./ui/dropdown-menu.cjs"),o=require("./ui/input.cjs"),s=require("./ui/separator.cjs");let c=require("lucide-react"),l=require("react"),u=require("@customafk/react-toolkit/utils"),d=require("class-variance-authority"),f=require("react/jsx-runtime"),p=require("@customafk/react-toolkit/color-hash");const m=(0,l.createContext)(null);function h(){let e=(0,l.useContext)(m);if(!e)throw Error(`useSidebar must be used within a SidebarProvider.`);return e}function g({defaultOpen:e=!0,open:t,onOpenChange:r,className:i,style:a,children:o,...s}){let[c,d]=(0,l.useState)(e),p=t??c,h=(0,l.useCallback)(e=>{let t=typeof e==`function`?e(p):e;r?r(t):d(t),document.cookie=`sidebar_state=${t}; path=/; max-age=604800`},[r,p]),g=(0,l.useCallback)(()=>{h(e=>!e)},[h]);(0,l.useEffect)(()=>{let e=e=>{e.key===`b`&&(e.metaKey||e.ctrlKey)&&(e.preventDefault(),g())};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[g]);let _=p?`expanded`:`collapsed`,v=(0,l.useMemo)(()=>({state:_,open:p,setOpen:h,toggleSidebar:g}),[_,p,h,g]);return(0,f.jsx)(m.Provider,{value:v,children:(0,f.jsx)(n.TooltipProvider,{delayDuration:0,children:(0,f.jsx)(`div`,{"data-slot":`layout-scroll-container`,className:`h-dvh w-full overflow-auto bg-sidebar`,children:(0,f.jsx)(`section`,{"data-slot":`layout-wrapper`,style:{"--sidebar-width":`16rem`,"--sidebar-width-icon":`3rem`,...a},className:(0,u.cn)(`group/sidebar-wrapper relative grid`,`h-dvh min-h-160 w-full min-w-264 max-w-svw`,`grid-cols-[auto_1fr] grid-rows-[auto_1fr]`,i),...s,children:o})})})})}const _=(0,l.memo)(({side:e=`left`,className:t,children:n,...r})=>{let{state:i}=h();return(0,f.jsxs)(`div`,{className:`group peer relative col-start-1 row-start-2 block bg-card text-sidebar-foreground`,"data-state":i,"data-collapsible":i===`collapsed`?`icon`:``,"data-side":e,"data-slot":`sidebar`,children:[(0,f.jsx)(`div`,{"data-slot":`sidebar-gap`,className:(0,u.cn)(`relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear`,`group-data-[side=right]:rotate-180`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`)}),(0,f.jsx)(`div`,{"data-slot":`sidebar-container`,className:(0,u.cn)(`absolute inset-y-0 z-10 flex w-(--sidebar-width) p-2 shadow-nav`,`transition-[left,right,width] duration-200 ease-linear`,`group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]`,e===`left`?`left-0`:`right-0`,t),...r,children:(0,f.jsx)(`div`,{"data-sidebar":`sidebar`,"data-slot":`sidebar-inner`,className:`relative flex size-full flex-col`,children:n})})]})});_.displayName=`CMSLayoutSidebar`;const v=(0,l.memo)(({className:e,children:t,...n})=>(0,f.jsx)(`main`,{"data-slot":`sidebar-inset`,className:(0,u.cn)(`col-start-2 row-start-2 grid min-h-0 min-w-0 grid-rows-1`,e),...n,children:(0,f.jsx)(`div`,{className:`relative grid min-h-0 grid-cols-1 overflow-auto`,children:t})}));v.displayName=`CMSLayoutMain`;const y=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(o.Input,{"data-slot":`sidebar-input`,"data-sidebar":`input`,className:(0,u.cn)(`h-8 w-full bg-background shadow-none`,e),...t}));y.displayName=`SidebarInput`;const b=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-header`,"data-sidebar":`header`,className:(0,u.cn)(`flex flex-col gap-2 p-2`,e),...t}));b.displayName=`SidebarHeader`;const x=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-footer`,"data-sidebar":`footer`,className:(0,u.cn)(`flex flex-col gap-2`,e),...t}));x.displayName=`SidebarFooter`;const S=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(s.Separator,{"data-slot":`sidebar-separator`,"data-sidebar":`separator`,className:(0,u.cn)(`mx-2 w-auto bg-sidebar-border`,e),...t}));S.displayName=`SidebarSeparator`;const C=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-content`,"data-sidebar":`content`,className:(0,u.cn)(`flex flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden`,e),...t}));C.displayName=`SidebarContent`;const w=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-group`,"data-sidebar":`group`,className:(0,u.cn)(`relative flex w-full flex-col`,e),...t}));w.displayName=`SidebarGroup`;const T=(0,l.memo)(({className:t,asChild:n=!1,...r})=>(0,f.jsx)(n?e.t:`div`,{"data-slot":`sidebar-group-label`,"data-sidebar":`group-label`,className:(0,u.cn)(`flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity,color] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0`,`group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0`,t),...r}));T.displayName=`SidebarGroupLabel`;const E=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`div`,{"data-slot":`sidebar-group-content`,"data-sidebar":`group-content`,className:(0,u.cn)(`w-full text-sm`,e),...t}));E.displayName=`SidebarGroupContent`;const D=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`ul`,{"data-slot":`sidebar-menu`,"data-sidebar":`menu`,className:(0,u.cn)(`flex w-full min-w-0 flex-col gap-1`,e),...t}));D.displayName=`SidebarMenu`;const O=(0,l.memo)(({className:e,...t})=>(0,f.jsx)(`li`,{"data-slot":`sidebar-menu-item`,"data-sidebar":`menu-item`,className:(0,u.cn)(`group/menu-item relative`,e),...t}));O.displayName=`SidebarMenuItem`;const k=(0,d.cva)([`peer/menu-button`,`cursor-pointer`,`flex w-full items-center gap-2`,`overflow-hidden rounded-md p-2 outline-hidden`,`truncate text-left font-normal`,`transition-[color,background-color,width,height,padding]`,`active:bg-sidebar-accent active:text-sidebar-accent-foreground`,`disabled:pointer-events-none disabled:opacity-50`,`group-has-data-[sidebar=menu-action]/menu-item:pr-8`,`aria-disabled:pointer-events-none aria-disabled:opacity-50`,`data-[active=true]:bg-sidebar-primary-muted data-[active=true]:text-sidebar-primary`,`data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground`,`group-data-[collapsible=icon]:size-12! group-data-[collapsible=icon]:p-3! group-data-[collapsible=icon]:gap-3!`,`[&>svg]:size-6 [&>svg]:shrink-0`,`[&>span:last-child]:truncate`],{variants:{variant:{default:`hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground`,outline:`bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]`},size:{default:`h-10 text-sm`,sm:`h-7 text-xs`,lg:`h-12 text-sm group-data-[collapsible=icon]:p-0!`}},defaultVariants:{variant:`default`,size:`default`}}),A=(0,l.memo)(({asChild:t=!1,isActive:r=!1,variant:i=`default`,size:a=`default`,tooltip:o,className:s,...c})=>{let l=t?e.t:`button`,{state:d}=h(),p=(0,f.jsx)(l,{"data-slot":`sidebar-menu-button`,"data-sidebar":`menu-button`,"data-size":a,"data-active":r,className:(0,u.cn)(k({variant:i,size:a}),s),...c});return o?(typeof o==`string`&&(o={children:o}),(0,f.jsxs)(n.Tooltip,{children:[(0,f.jsx)(n.TooltipTrigger,{asChild:!0,children:p}),(0,f.jsx)(n.TooltipContent,{side:`right`,align:`center`,hidden:d!==`collapsed`,...o})]})):p});A.displayName=`SidebarMenuButton`;const j=({i18nText:e,onChangeToEnLocale:n,onChangeToViLocale:o,user:s,onLogout:d,logoutLabel:m=`Log out`,logo:g})=>{let{toggleSidebar:_}=h(),v=(0,l.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),_()},[_]),y=(0,l.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),n?.()},[n]),b=(0,l.useCallback)(e=>{e.preventDefault(),e.stopPropagation(),o?.()},[o]),x=s?p.colorHashLight.hex(s.name):void 0;return(0,f.jsxs)(`header`,{"data-slot":`cms-layout-header`,className:(0,u.cn)(`bg-card`,`h-(--header-height)`,`sm:h-(--header-height) sm:px-4 sm:pr-6`,`col-span-2 row-start-1 z-20 gap-2 px-2 pr-4.5`,`flex items-center shadow-nav`,`transition-[height] ease-linear`),children:[(0,f.jsxs)(t.Button,{"data-sidebar":`trigger`,"data-slot":`sidebar-trigger`,variant:`ghost`,color:`muted`,size:`icon`,className:`size-10 rounded-full transition-all hover:text-text-positive`,onClick:v,children:[(0,f.jsx)(c.MenuIcon,{className:`size-6!`}),(0,f.jsx)(`span`,{className:`sr-only`,children:`Toggle Sidebar`})]}),(0,f.jsx)(`div`,{className:`flex flex-1 items-center sm:ml-2.5`,children:g??(0,f.jsx)(i.LunasLogo,{variant:`horizontal`,size:`xs`})}),(0,f.jsxs)(`div`,{className:`flex items-center gap-1`,children:[s&&(0,f.jsxs)(a.DropdownMenu,{children:[(0,f.jsx)(a.DropdownMenuTrigger,{asChild:!0,children:(0,f.jsxs)(t.Button,{variant:`ghost`,color:`muted`,className:`h-9 gap-2.5 rounded-full px-2 transition-all`,children:[(0,f.jsxs)(r.Avatar,{className:`size-7 shrink-0`,children:[(0,f.jsx)(r.AvatarImage,{src:s.avatarUrl,alt:s.name}),(0,f.jsx)(r.AvatarFallback,{style:{backgroundColor:x},children:(0,f.jsx)(c.UserRoundIcon,{size:14,className:`text-white`})})]}),(0,f.jsxs)(`div`,{className:`hidden flex-col items-start sm:flex`,children:[(0,f.jsx)(`span`,{className:`max-w-36 truncate text-xs font-semibold leading-tight text-text-positive`,children:s.name}),s.email&&(0,f.jsx)(`span`,{className:`max-w-36 truncate text-xs leading-tight text-text-positive-weak`,children:s.email})]})]})}),(0,f.jsxs)(a.DropdownMenuContent,{align:`end`,className:`w-60`,children:[(0,f.jsxs)(`div`,{className:`flex flex-col items-center gap-2 px-4 py-4 text-center`,children:[(0,f.jsxs)(r.Avatar,{className:`size-12`,children:[(0,f.jsx)(r.AvatarImage,{src:s.avatarUrl,alt:s.name}),(0,f.jsx)(r.AvatarFallback,{style:{backgroundColor:x},children:(0,f.jsx)(c.UserRoundIcon,{size:22,className:`text-white`})})]}),(0,f.jsxs)(`div`,{className:`flex min-w-0 w-full flex-col items-center gap-0.5`,children:[(0,f.jsx)(`p`,{className:`truncate text-sm font-semibold text-text-positive`,children:s.name}),s.email&&(0,f.jsx)(`p`,{className:`truncate text-xs text-text-positive-weak`,children:s.email}),s.role&&(0,f.jsx)(`span`,{className:`mt-1 w-fit rounded-sm border border-border bg-secondary-muted px-2 py-0.5 text-xs font-medium text-text-positive-weak`,children:s.role})]})]}),d&&(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(a.DropdownMenuSeparator,{}),(0,f.jsx)(a.DropdownMenuGroup,{children:(0,f.jsxs)(a.DropdownMenuItem,{className:`text-danger focus:text-danger`,onClick:d,children:[(0,f.jsx)(c.LogOutIcon,{className:`size-4`}),m]})})]})]})]}),s&&(n||o)&&(0,f.jsx)(`div`,{className:`mx-1 h-5 w-px bg-border`}),(n||o)&&(0,f.jsxs)(a.DropdownMenu,{children:[(0,f.jsx)(a.DropdownMenuTrigger,{asChild:!0,children:(0,f.jsxs)(t.Button,{"data-slot":`locale-trigger`,variant:`ghost`,color:`muted`,className:`gap-x-1 rounded-full transition-all hover:text-text-positive`,children:[(0,f.jsx)(c.EarthIcon,{className:`size-6!`}),e]})}),(0,f.jsx)(a.DropdownMenuContent,{align:`end`,children:(0,f.jsxs)(a.DropdownMenuGroup,{children:[(0,f.jsx)(a.DropdownMenuItem,{onClick:y,children:`EN - English`}),(0,f.jsx)(a.DropdownMenuItem,{onClick:b,children:`VI - Vietnamese`})]})})]})]})]})},M=(0,l.memo)(({id:e,label:t,icon:n,activeNavItemId:r,onClick:i,renderAs:a})=>(0,f.jsx)(O,{children:a?(0,f.jsx)(A,{asChild:!0,isActive:e===r,children:a({icon:n,label:t})}):(0,f.jsxs)(A,{isActive:e===r,onClick:i,children:[n,t]})}));M.displayName=`SidebarContentGroupItem`;const N=(0,l.memo)(({id:e,label:t,children:n})=>(0,f.jsxs)(w,{children:[(0,f.jsx)(T,{children:t}),(0,f.jsx)(E,{children:(0,f.jsx)(D,{children:n})})]}));N.displayName=`SidebarContentGroup`;const P=({i18nText:e,activeNavItemId:t,sidebar:n,children:r,onChangeToEnLocale:i,onChangeToViLocale:a,onLogout:o,logoutLabel:s=`Log out`,copyright:l=`Copyright © ${new Date().getFullYear()}, Lunas.`,user:u})=>{let d=n?.groupcontent??[];return(0,f.jsxs)(g,{children:[(0,f.jsx)(j,{i18nText:e,onChangeToEnLocale:i,onChangeToViLocale:a,user:u,onLogout:o,logoutLabel:s}),(0,f.jsxs)(_,{children:[(0,f.jsx)(C,{children:d.map(e=>(0,f.jsx)(N,{id:e.id,label:e.label,children:e.items.map(e=>(0,f.jsx)(M,{id:e.id,activeNavItemId:t,label:e.label,icon:e.icon,renderAs:e.renderAs,onClick:e.onClick},e.id))},e.id))}),(0,f.jsx)(x,{children:(0,f.jsxs)(D,{children:[(0,f.jsx)(O,{children:(0,f.jsxs)(A,{className:`border border-border`,onClick:o,children:[(0,f.jsx)(c.LogOutIcon,{className:`text-text-positive-weak`}),s]})}),(0,f.jsx)(O,{className:`mt-2 border-t border-t-border`,children:(0,f.jsx)(`p`,{className:`pt-2 text-center text-xs text-text-positive-subtle`,children:l})})]})})]}),(0,f.jsx)(v,{children:r})]})};Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return P}});
|
|
2
|
+
//# sourceMappingURL=cms-layout-DCJhB-GY.cjs.map
|