@customafk/lunas-ui 0.0.72 → 0.0.73
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/{add-new-C7ZMHWcR.cjs → add-new-BaA0yy6U.cjs} +2 -2
- package/dist/{add-new-C7ZMHWcR.cjs.map → add-new-BaA0yy6U.cjs.map} +1 -1
- package/dist/{add-new-Czl4AL65.js → add-new-_5opEbrI.js} +2 -2
- package/dist/{add-new-Czl4AL65.js.map → add-new-_5opEbrI.js.map} +1 -1
- package/dist/{alert-dialog-BGXInZ89.js → alert-dialog-DcQKEgVC.js} +1 -1
- package/dist/{alert-dialog-BGXInZ89.js.map → alert-dialog-DcQKEgVC.js.map} +1 -1
- package/dist/{alert-dialog-DO5oai_F.cjs → alert-dialog-brXudt77.cjs} +1 -1
- package/dist/{alert-dialog-DO5oai_F.cjs.map → alert-dialog-brXudt77.cjs.map} +1 -1
- package/dist/{avatar-Do65Vzm-.cjs → avatar-B4pklWJt.cjs} +1 -1
- package/dist/{avatar-Do65Vzm-.cjs.map → avatar-B4pklWJt.cjs.map} +1 -1
- package/dist/{avatar-BDeoLWSP.js → avatar-iX5Jhj8E.js} +1 -1
- package/dist/{avatar-BDeoLWSP.js.map → avatar-iX5Jhj8E.js.map} +1 -1
- package/dist/{badge-i1kDdcPx.cjs → badge-CsA-JCDX.cjs} +1 -1
- package/dist/{badge-i1kDdcPx.cjs.map → badge-CsA-JCDX.cjs.map} +1 -1
- package/dist/{badge-BsaF-oBX.js → badge-tjlLdDGl.js} +1 -1
- package/dist/{badge-BsaF-oBX.js.map → badge-tjlLdDGl.js.map} +1 -1
- package/dist/{button-CcW3s4Yg.d.ts → button-DikL7zwS.d.ts} +3 -3
- package/dist/{button-CXKXt24w.d.cts → button-DoAx4aaD.d.cts} +3 -3
- package/dist/{calendar-CaZB4tkk.cjs → calendar-DGqBIV7n.cjs} +1 -1
- package/dist/{calendar-CaZB4tkk.cjs.map → calendar-DGqBIV7n.cjs.map} +1 -1
- package/dist/{calendar-BHFsJa4w.js → calendar-DdIUj5Dk.js} +1 -1
- package/dist/{calendar-BHFsJa4w.js.map → calendar-DdIUj5Dk.js.map} +1 -1
- package/dist/cards/simple-card.d.ts +2 -2
- package/dist/{command-DYwws5ny.d.ts → command-BUBPlGK4.d.ts} +12 -12
- package/dist/{command-55V9WeIE.cjs → command-BaW_SRkQ.cjs} +2 -2
- package/dist/{command-55V9WeIE.cjs.map → command-BaW_SRkQ.cjs.map} +1 -1
- package/dist/{command-BvHe__3s.js → command-CRNFM6Sb.js} +2 -2
- package/dist/{command-BvHe__3s.js.map → command-CRNFM6Sb.js.map} +1 -1
- package/dist/{command-CbW3sxOZ.d.cts → command-rxs0v832.d.cts} +12 -12
- package/dist/data-display/country.cjs +1 -1
- package/dist/data-display/country.js +1 -1
- package/dist/data-display/data-list.cjs +1 -1
- package/dist/data-display/data-list.js +1 -1
- package/dist/data-display/date-tooltip.cjs +1 -1
- package/dist/data-display/date-tooltip.js +1 -1
- package/dist/data-display/date.cjs +1 -1
- package/dist/data-display/date.js +1 -1
- package/dist/data-display/empty.cjs +1 -1
- package/dist/data-display/empty.d.cts +2 -2
- package/dist/data-display/empty.d.ts +2 -2
- package/dist/data-display/empty.js +1 -1
- package/dist/data-display/name.cjs +1 -1
- package/dist/data-display/name.js +1 -1
- package/dist/data-display/phone-number.cjs +1 -1
- package/dist/data-display/phone-number.js +1 -1
- package/dist/data-display/role-badge.cjs +1 -1
- package/dist/data-display/role-badge.js +1 -1
- package/dist/data-display/statistic.cjs +1 -1
- package/dist/data-display/statistic.d.cts +2 -2
- package/dist/data-display/statistic.d.ts +2 -2
- package/dist/data-display/statistic.js +1 -1
- package/dist/data-display/user.cjs +1 -1
- package/dist/data-display/user.js +1 -1
- package/dist/{date-BeXyaUes.cjs → date-2wue8L-1.cjs} +1 -1
- package/dist/{date-BeXyaUes.cjs.map → date-2wue8L-1.cjs.map} +1 -1
- package/dist/{date-B4Sx6C5P.js → date-BuPl--Fc.js} +1 -1
- package/dist/{date-B4Sx6C5P.js.map → date-BuPl--Fc.js.map} +1 -1
- package/dist/{dialog-MCM90IpD.d.cts → dialog-BBDmpwtY.d.cts} +12 -12
- package/dist/{dialog-YRbIPpUZ.cjs → dialog-DGbWt3A4.cjs} +1 -1
- package/dist/{dialog-YRbIPpUZ.cjs.map → dialog-DGbWt3A4.cjs.map} +1 -1
- package/dist/{dialog-umfxj9v3.d.ts → dialog-DUEQa9I5.d.ts} +12 -12
- package/dist/{dialog-OTHc6G5i.js → dialog-SbX5GvMK.js} +1 -1
- package/dist/{dialog-OTHc6G5i.js.map → dialog-SbX5GvMK.js.map} +1 -1
- package/dist/dialogs/confirm-dialog.cjs +1 -1
- package/dist/dialogs/confirm-dialog.js +1 -1
- package/dist/dialogs/detail-dialog/component/sidebar.cjs +1 -1
- package/dist/dialogs/detail-dialog/component/sidebar.d.cts +28 -28
- package/dist/dialogs/detail-dialog/component/sidebar.d.ts +3 -3
- package/dist/dialogs/detail-dialog/component/sidebar.js +1 -1
- package/dist/dialogs/detail-dialog/index.cjs +1 -1
- package/dist/dialogs/detail-dialog/index.js +1 -1
- package/dist/dialogs/error-dialog.cjs +1 -1
- package/dist/dialogs/error-dialog.js +1 -1
- package/dist/dialogs/form-dialog.cjs +1 -1
- package/dist/dialogs/form-dialog.d.cts +2 -2
- package/dist/dialogs/form-dialog.d.ts +2 -2
- package/dist/dialogs/form-dialog.js +1 -1
- package/dist/dialogs/loading-dialog.cjs +1 -1
- package/dist/dialogs/loading-dialog.js +1 -1
- package/dist/{drawer-CY1b-uAY.cjs → drawer-CaX-sUvZ.cjs} +1 -1
- package/dist/{drawer-CY1b-uAY.cjs.map → drawer-CaX-sUvZ.cjs.map} +1 -1
- package/dist/{drawer-DRC3X2-U.js → drawer-hi51Beoq.js} +1 -1
- package/dist/{drawer-DRC3X2-U.js.map → drawer-hi51Beoq.js.map} +1 -1
- package/dist/{error-dialog-C-QmLnGd.js → error-dialog-BeYJOtSH.js} +2 -2
- package/dist/{error-dialog-C-QmLnGd.js.map → error-dialog-BeYJOtSH.js.map} +1 -1
- package/dist/{error-dialog-CKAUvqn7.cjs → error-dialog-DMbJhWyk.cjs} +2 -2
- package/dist/{error-dialog-CKAUvqn7.cjs.map → error-dialog-DMbJhWyk.cjs.map} +1 -1
- package/dist/{flex-Dngi9Umy.js → flex-D6XrXRQW.js} +1 -1
- package/dist/{flex-Dngi9Umy.js.map → flex-D6XrXRQW.js.map} +1 -1
- package/dist/{flex-tfa5B9qc.cjs → flex-DS4mxjtf.cjs} +1 -1
- package/dist/{flex-tfa5B9qc.cjs.map → flex-DS4mxjtf.cjs.map} +1 -1
- package/dist/{form-nFp50GQa.js → form-BT1TbgK6.js} +2 -2
- package/dist/{form-nFp50GQa.js.map → form-BT1TbgK6.js.map} +1 -1
- package/dist/{form-LlBR5CH6.cjs → form-DyH5iWq7.cjs} +2 -2
- package/dist/{form-LlBR5CH6.cjs.map → form-DyH5iWq7.cjs.map} +1 -1
- package/dist/{form-wrapper-DIsYQSTr.js → form-wrapper-CFcpJdfv.js} +2 -2
- package/dist/{form-wrapper-DIsYQSTr.js.map → form-wrapper-CFcpJdfv.js.map} +1 -1
- package/dist/{form-wrapper-BEPDnGJT.cjs → form-wrapper-bC0IEtWT.cjs} +2 -2
- package/dist/{form-wrapper-BEPDnGJT.cjs.map → form-wrapper-bC0IEtWT.cjs.map} +1 -1
- package/dist/forms/combobox-field.cjs +1 -1
- package/dist/forms/combobox-field.d.cts +2 -2
- package/dist/forms/combobox-field.js +1 -1
- package/dist/forms/date-field.cjs +1 -1
- package/dist/forms/date-field.d.cts +2 -2
- package/dist/forms/date-field.d.ts +2 -2
- package/dist/forms/date-field.js +1 -1
- package/dist/forms/form-wrapper.cjs +1 -1
- package/dist/forms/form-wrapper.d.cts +2 -2
- package/dist/forms/form-wrapper.d.ts +2 -2
- package/dist/forms/form-wrapper.js +1 -1
- package/dist/forms/multi-select-field.cjs +1 -1
- package/dist/forms/multi-select-field.cjs.map +1 -1
- package/dist/forms/multi-select-field.d.cts +2 -2
- package/dist/forms/multi-select-field.d.ts +2 -2
- package/dist/forms/multi-select-field.js +1 -1
- package/dist/forms/number-field.cjs +1 -1
- package/dist/forms/number-field.d.cts +2 -2
- package/dist/forms/number-field.d.ts +2 -2
- package/dist/forms/number-field.js +1 -1
- package/dist/forms/password-field.cjs +1 -1
- package/dist/forms/password-field.d.cts +2 -2
- package/dist/forms/password-field.d.ts +2 -2
- package/dist/forms/password-field.js +1 -1
- package/dist/forms/select-field.cjs +1 -1
- package/dist/forms/select-field.d.cts +2 -2
- package/dist/forms/select-field.d.ts +2 -2
- package/dist/forms/select-field.js +1 -1
- package/dist/forms/switch-field.cjs +1 -1
- package/dist/forms/switch-field.d.cts +2 -2
- package/dist/forms/switch-field.d.ts +2 -2
- package/dist/forms/switch-field.js +1 -1
- package/dist/forms/text-field.cjs +1 -1
- package/dist/forms/text-field.d.cts +2 -2
- package/dist/forms/text-field.d.ts +2 -2
- package/dist/forms/text-field.js +1 -1
- package/dist/forms/textarea-field.cjs +1 -1
- package/dist/forms/textarea-field.d.cts +2 -2
- package/dist/forms/textarea-field.d.ts +2 -2
- package/dist/forms/textarea-field.js +1 -1
- package/dist/{input-C5NrcQAm.d.cts → input-DomGaN2h.d.ts} +3 -3
- package/dist/{input-DkiBw_X9.d.ts → input-DvX75CSu.d.cts} +3 -3
- package/dist/{input-jNmC92mW.cjs → input-GHXBt6hz.cjs} +1 -1
- package/dist/{input-jNmC92mW.cjs.map → input-GHXBt6hz.cjs.map} +1 -1
- package/dist/{input-CBsg9Cmq.js → input-ZyZ1HKHN.js} +1 -1
- package/dist/{input-CBsg9Cmq.js.map → input-ZyZ1HKHN.js.map} +1 -1
- package/dist/{label-BR3QQSIp.cjs → label-CHNSlaoz.cjs} +1 -1
- package/dist/{label-BR3QQSIp.cjs.map → label-CHNSlaoz.cjs.map} +1 -1
- package/dist/{label-CRhvNQY4.js → label-CdrxlBJ8.js} +1 -1
- package/dist/{label-CRhvNQY4.js.map → label-CdrxlBJ8.js.map} +1 -1
- package/dist/layouts/app-layout/index.cjs +1 -1
- package/dist/layouts/app-layout/index.d.cts +28 -28
- package/dist/layouts/app-layout/index.d.ts +2 -2
- package/dist/layouts/app-layout/index.js +1 -1
- package/dist/layouts/flex.cjs +1 -1
- package/dist/layouts/flex.d.cts +2 -2
- package/dist/layouts/flex.d.ts +2 -2
- package/dist/layouts/flex.js +1 -1
- package/dist/layouts/service-layout/index.cjs +1 -1
- package/dist/layouts/service-layout/index.d.cts +15 -15
- package/dist/layouts/service-layout/index.d.ts +2 -2
- package/dist/layouts/service-layout/index.js +1 -1
- package/dist/layouts/service-layout/index.js.map +1 -1
- package/dist/{multi-select-C-ZC1KVO.cjs → multi-select-DIZCHmU4.cjs} +2 -2
- package/dist/{multi-select-C-ZC1KVO.cjs.map → multi-select-DIZCHmU4.cjs.map} +1 -1
- package/dist/{multi-select-s7a7w_UG.js → multi-select-DzKtuSER.js} +2 -2
- package/dist/{multi-select-s7a7w_UG.js.map → multi-select-DzKtuSER.js.map} +1 -1
- package/dist/{paragraph-CaBn7ADD.js → paragraph-B9fp9JaI.js} +1 -1
- package/dist/{paragraph-CaBn7ADD.js.map → paragraph-B9fp9JaI.js.map} +1 -1
- package/dist/{paragraph-DHasUGpR.cjs → paragraph-BLvW7xdo.cjs} +1 -1
- package/dist/{paragraph-DHasUGpR.cjs.map → paragraph-BLvW7xdo.cjs.map} +1 -1
- package/dist/{popover-DTO7qZcM.cjs → popover-DLbTz02b.cjs} +1 -1
- package/dist/{popover-DTO7qZcM.cjs.map → popover-DLbTz02b.cjs.map} +1 -1
- package/dist/{popover-C_4MwCJv.js → popover-DvXi2pyH.js} +1 -1
- package/dist/{popover-C_4MwCJv.js.map → popover-DvXi2pyH.js.map} +1 -1
- package/dist/{refresh-DTTjph2a.js → refresh-BHjc0ETv.js} +2 -2
- package/dist/{refresh-DTTjph2a.js.map → refresh-BHjc0ETv.js.map} +1 -1
- package/dist/{refresh-N_fOqhT5.cjs → refresh-Bt9GEyuC.cjs} +2 -2
- package/dist/{refresh-N_fOqhT5.cjs.map → refresh-Bt9GEyuC.cjs.map} +1 -1
- package/dist/scroll-area-BKJYk4zH.js +2 -0
- package/dist/scroll-area-BKJYk4zH.js.map +1 -0
- package/dist/scroll-area-bTF4NokG.cjs +2 -0
- package/dist/scroll-area-bTF4NokG.cjs.map +1 -0
- package/dist/{search-input-DP1Cjt6h.cjs → search-input-DFgHJyOp.cjs} +2 -2
- package/dist/{search-input-DP1Cjt6h.cjs.map → search-input-DFgHJyOp.cjs.map} +1 -1
- package/dist/{search-input-BZfmsfdx.js → search-input-DM9ePMxA.js} +2 -2
- package/dist/{search-input-BZfmsfdx.js.map → search-input-DM9ePMxA.js.map} +1 -1
- package/dist/{select-D1_qKCK7.js → select---jN6Yy0.js} +1 -1
- package/dist/{select-D1_qKCK7.js.map → select---jN6Yy0.js.map} +1 -1
- package/dist/{select-CmbH9nni.cjs → select-CvPIAeWb.cjs} +1 -1
- package/dist/{select-CmbH9nni.cjs.map → select-CvPIAeWb.cjs.map} +1 -1
- package/dist/{separator-B3UjKJ91.d.cts → separator-B0ekl2cm.d.cts} +3 -3
- package/dist/{sidebar-jB4Qk0gk.cjs → sidebar-BF_5REY5.cjs} +2 -2
- package/dist/{sidebar-jB4Qk0gk.cjs.map → sidebar-BF_5REY5.cjs.map} +1 -1
- package/dist/{sidebar-D4pxYfhY.js → sidebar-BgOz0zZh.js} +2 -2
- package/dist/{sidebar-D4pxYfhY.js.map → sidebar-BgOz0zZh.js.map} +1 -1
- package/dist/{switch-ClwAKGC0.cjs → switch-BLfDkOOl.cjs} +1 -1
- package/dist/{switch-ClwAKGC0.cjs.map → switch-BLfDkOOl.cjs.map} +1 -1
- package/dist/{switch-BWRzY3i2.js → switch-C8OMYLfj.js} +1 -1
- package/dist/{switch-BWRzY3i2.js.map → switch-C8OMYLfj.js.map} +1 -1
- package/dist/table/index.cjs +1 -1
- package/dist/table/index.cjs.map +1 -1
- package/dist/table/index.d.cts +2 -0
- package/dist/table/index.d.ts +4 -2
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/{textarea-Rob6xodm.js → textarea-Br_DX1wm.js} +1 -1
- package/dist/{textarea-Rob6xodm.js.map → textarea-Br_DX1wm.js.map} +1 -1
- package/dist/{textarea-B0agR4V-.cjs → textarea-jrCmozqt.cjs} +1 -1
- package/dist/{textarea-B0agR4V-.cjs.map → textarea-jrCmozqt.cjs.map} +1 -1
- package/dist/{toggle-BuzXQXHg.d.cts → toggle-C2H0HKpd.d.cts} +5 -5
- package/dist/{toggle-Cs4NAdZh.d.ts → toggle-vH-BH18X.d.ts} +5 -5
- package/dist/{tooltip-B6P3IKFE.js → tooltip-BTrjCwd8.js} +1 -1
- package/dist/{tooltip-B6P3IKFE.js.map → tooltip-BTrjCwd8.js.map} +1 -1
- package/dist/{tooltip-BxTaXvVn.d.cts → tooltip-BhypOt39.d.cts} +6 -6
- package/dist/{tooltip-B6BWVv0X.cjs → tooltip-DXvcPsvM.cjs} +1 -1
- package/dist/{tooltip-B6BWVv0X.cjs.map → tooltip-DXvcPsvM.cjs.map} +1 -1
- package/dist/{tooltip-Bi4jcrSu.d.ts → tooltip-Dibm3gcf.d.ts} +6 -6
- package/dist/{types-BjbTiGi6.js → types-BiiGENwa.js} +1 -1
- package/dist/{types-BjbTiGi6.js.map → types-BiiGENwa.js.map} +1 -1
- package/dist/{types-D4UBBo-V.cjs → types-D32qXHff.cjs} +1 -1
- package/dist/{types-D4UBBo-V.cjs.map → types-D32qXHff.cjs.map} +1 -1
- package/dist/typography/paragraph.cjs +1 -1
- package/dist/typography/paragraph.d.cts +2 -2
- package/dist/typography/paragraph.d.ts +2 -2
- package/dist/typography/paragraph.js +1 -1
- package/dist/typography/title.d.cts +2 -2
- package/dist/typography/title.d.ts +2 -2
- package/dist/ui/alert-dialog.cjs +1 -1
- package/dist/ui/alert-dialog.d.cts +12 -12
- package/dist/ui/alert-dialog.d.ts +12 -12
- package/dist/ui/alert-dialog.js +1 -1
- package/dist/ui/alert.d.cts +4 -4
- package/dist/ui/alert.d.ts +4 -4
- package/dist/ui/aspect-ratio.d.cts +2 -2
- package/dist/ui/aspect-ratio.d.ts +2 -2
- package/dist/ui/avatar.cjs +1 -1
- package/dist/ui/avatar.d.cts +4 -4
- package/dist/ui/avatar.d.ts +4 -4
- package/dist/ui/avatar.js +1 -1
- package/dist/ui/badge.cjs +1 -1
- package/dist/ui/badge.d.cts +2 -2
- package/dist/ui/badge.d.ts +2 -2
- package/dist/ui/badge.js +1 -1
- package/dist/ui/breadcrumb.d.cts +8 -8
- package/dist/ui/button.d.cts +1 -1
- package/dist/ui/button.d.ts +1 -1
- package/dist/ui/buttons/add-new.cjs +1 -1
- package/dist/ui/buttons/add-new.js +1 -1
- package/dist/ui/buttons/refresh.cjs +1 -1
- package/dist/ui/buttons/refresh.js +1 -1
- package/dist/ui/calendar.cjs +1 -1
- package/dist/ui/calendar.d.cts +4 -4
- package/dist/ui/calendar.d.ts +4 -4
- package/dist/ui/calendar.js +1 -1
- package/dist/ui/card.d.cts +8 -8
- package/dist/ui/card.d.ts +8 -8
- package/dist/ui/carousel.d.cts +7 -7
- package/dist/ui/carousel.d.ts +7 -7
- package/dist/ui/collapsible.d.cts +4 -4
- package/dist/ui/collapsible.d.ts +4 -4
- package/dist/ui/command.cjs +1 -1
- package/dist/ui/command.d.cts +2 -2
- package/dist/ui/command.d.ts +2 -2
- package/dist/ui/command.js +1 -1
- package/dist/ui/context-menu.d.cts +16 -16
- package/dist/ui/context-menu.d.ts +16 -16
- package/dist/ui/dialog.cjs +1 -1
- package/dist/ui/dialog.d.cts +1 -1
- package/dist/ui/dialog.d.ts +1 -1
- package/dist/ui/dialog.js +1 -1
- package/dist/ui/dropdown-menu.d.cts +16 -16
- package/dist/ui/dropdown-menu.d.ts +16 -16
- package/dist/ui/file-uploader.d.cts +2 -2
- package/dist/ui/file-uploader.d.ts +2 -2
- package/dist/ui/form.cjs +1 -1
- package/dist/ui/form.d.cts +7 -7
- package/dist/ui/form.d.ts +7 -7
- package/dist/ui/form.js +1 -1
- package/dist/ui/hover-card.d.cts +4 -4
- package/dist/ui/hover-card.d.ts +4 -4
- package/dist/ui/input-otp.d.cts +5 -5
- package/dist/ui/input-otp.d.ts +5 -5
- package/dist/ui/input.cjs +1 -1
- package/dist/ui/input.d.cts +1 -1
- package/dist/ui/input.d.ts +1 -1
- package/dist/ui/input.js +1 -1
- package/dist/ui/inputs/search-input.cjs +1 -1
- package/dist/ui/inputs/search-input.d.cts +3 -3
- package/dist/ui/inputs/search-input.d.ts +1 -1
- package/dist/ui/inputs/search-input.js +1 -1
- package/dist/ui/label.cjs +1 -1
- package/dist/ui/label.d.cts +2 -2
- package/dist/ui/label.d.ts +2 -2
- package/dist/ui/label.js +1 -1
- package/dist/ui/menubar.d.cts +17 -17
- package/dist/ui/menubar.d.ts +17 -17
- package/dist/ui/multi-select.cjs +1 -1
- package/dist/ui/multi-select.d.cts +2 -2
- package/dist/ui/multi-select.d.ts +2 -2
- package/dist/ui/multi-select.js +1 -1
- package/dist/ui/navigation-menu.d.cts +11 -11
- package/dist/ui/navigation-menu.d.ts +9 -9
- package/dist/ui/pagination.d.cts +9 -9
- package/dist/ui/pagination.d.ts +9 -9
- package/dist/ui/popover.cjs +1 -1
- package/dist/ui/popover.d.cts +5 -5
- package/dist/ui/popover.d.ts +5 -5
- package/dist/ui/popover.js +1 -1
- package/dist/ui/progress.d.cts +2 -2
- package/dist/ui/progress.d.ts +2 -2
- package/dist/ui/radio-group.d.cts +3 -3
- package/dist/ui/radio-group.d.ts +3 -3
- package/dist/ui/resizable.d.cts +4 -4
- package/dist/ui/resizable.d.ts +4 -4
- package/dist/ui/scroll-area.cjs +1 -1
- package/dist/ui/scroll-area.d.cts +4 -3
- package/dist/ui/scroll-area.d.ts +4 -3
- package/dist/ui/scroll-area.js +1 -1
- package/dist/ui/select.cjs +1 -1
- package/dist/ui/select.d.cts +11 -11
- package/dist/ui/select.js +1 -1
- package/dist/ui/separator.d.cts +1 -1
- package/dist/ui/sheet.d.cts +9 -9
- package/dist/ui/sidebar.cjs +1 -1
- package/dist/ui/sidebar.d.cts +28 -28
- package/dist/ui/sidebar.d.ts +29 -29
- package/dist/ui/sidebar.js +1 -1
- package/dist/ui/skeleton.d.cts +2 -2
- package/dist/ui/skeleton.d.ts +2 -2
- package/dist/ui/slider.d.cts +2 -2
- package/dist/ui/slider.d.ts +2 -2
- package/dist/ui/sonner.d.cts +2 -2
- package/dist/ui/switch.cjs +1 -1
- package/dist/ui/switch.d.cts +2 -2
- package/dist/ui/switch.d.ts +2 -2
- package/dist/ui/switch.js +1 -1
- package/dist/ui/table.d.cts +9 -9
- package/dist/ui/table.d.ts +9 -9
- package/dist/ui/tabs.d.cts +5 -5
- package/dist/ui/tabs.d.ts +5 -5
- package/dist/ui/textarea.cjs +1 -1
- package/dist/ui/textarea.d.cts +2 -2
- package/dist/ui/textarea.d.ts +2 -2
- package/dist/ui/textarea.js +1 -1
- package/dist/ui/toggle-group.d.cts +4 -4
- package/dist/ui/toggle-group.d.ts +4 -4
- package/dist/ui/toggle.d.cts +1 -1
- package/dist/ui/toggle.d.ts +1 -1
- package/dist/ui/tooltip.cjs +1 -1
- package/dist/ui/tooltip.d.cts +1 -1
- package/dist/ui/tooltip.d.ts +1 -1
- package/dist/ui/tooltip.js +1 -1
- package/package.json +1 -1
- package/dist/scroll-area-BFGH4GB0.cjs +0 -2
- package/dist/scroll-area-BFGH4GB0.cjs.map +0 -1
- package/dist/scroll-area-Dx6r4DRY.js +0 -2
- package/dist/scroll-area-Dx6r4DRY.js.map +0 -1
package/dist/table/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["ChevronUp","ChevronDown","Button","PinOffIcon","DropdownMenu","DropdownMenuTrigger","EllipsisIcon","DropdownMenuContent","DropdownMenuItem","ArrowLeftToLineIcon","ArrowRightToLineIcon","TableRow","TableCell","ScrollArea","Table","TableHeader","TableHead","TableBody","TableFooter","LoaderIcon","ScrollBar","DataTableHeader: React.FC<Props>","Flex","SearchInput","AddNewBtn","RefreshBtn","Flex"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 120 && !isFetching && allowFetchMore && onFetchNextPage) {\n onFetchNextPage()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\">\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({ data, totalCount, isLoading, columns, onAdd, onRefresh, onClickRow, onFetchNextPage }: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable table={table} isLoading={isLoading} onClickRow={onClickRow} onFetchNextPage={onFetchNextPage} />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["ChevronUp","ChevronDown","Button","PinOffIcon","DropdownMenu","DropdownMenuTrigger","EllipsisIcon","DropdownMenuContent","DropdownMenuItem","ArrowLeftToLineIcon","ArrowRightToLineIcon","TableRow","TableCell","ScrollArea","Table","TableHeader","TableHead","TableBody","TableFooter","LoaderIcon","ScrollBar","DataTableHeader: React.FC<Props>","Flex","SearchInput","AddNewBtn","RefreshBtn","Flex"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && allowFetchMore && onFetchNextPage) {\n onFetchNextPage()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Handle scroll events to check if more data should be loaded\n const handleScroll = useCallback(\n (ev: React.UIEvent<HTMLDivElement>) => {\n fetchMoreOnBottomReached(ev.currentTarget)\n },\n [fetchMoreOnBottomReached],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\" onScroll={handleScroll}>\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n isFetching?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({\n data,\n totalCount,\n isLoading,\n isFetching,\n columns,\n onAdd,\n onRefresh,\n onClickRow,\n onFetchNextPage,\n}: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable table={table} isLoading={isLoading} isFetching={isFetching} onClickRow={onClickRow} onFetchNextPage={onFetchNextPage} />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
|
package/dist/table/index.d.cts
CHANGED
|
@@ -6,6 +6,7 @@ type Props<T> = {
|
|
|
6
6
|
data: T[];
|
|
7
7
|
totalCount?: number;
|
|
8
8
|
isLoading?: boolean;
|
|
9
|
+
isFetching?: boolean;
|
|
9
10
|
columns: ColumnDef<T>[];
|
|
10
11
|
onAdd?: () => void;
|
|
11
12
|
onRefresh?: () => void;
|
|
@@ -16,6 +17,7 @@ declare function Table<T extends Record<string, unknown>>({
|
|
|
16
17
|
data,
|
|
17
18
|
totalCount,
|
|
18
19
|
isLoading,
|
|
20
|
+
isFetching,
|
|
19
21
|
columns,
|
|
20
22
|
onAdd,
|
|
21
23
|
onRefresh,
|
package/dist/table/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime14 from "react/jsx-runtime";
|
|
2
2
|
import { ColumnDef } from "@tanstack/react-table";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/table/index.d.ts
|
|
@@ -6,6 +6,7 @@ type Props<T> = {
|
|
|
6
6
|
data: T[];
|
|
7
7
|
totalCount?: number;
|
|
8
8
|
isLoading?: boolean;
|
|
9
|
+
isFetching?: boolean;
|
|
9
10
|
columns: ColumnDef<T>[];
|
|
10
11
|
onAdd?: () => void;
|
|
11
12
|
onRefresh?: () => void;
|
|
@@ -16,12 +17,13 @@ declare function Table<T extends Record<string, unknown>>({
|
|
|
16
17
|
data,
|
|
17
18
|
totalCount,
|
|
18
19
|
isLoading,
|
|
20
|
+
isFetching,
|
|
19
21
|
columns,
|
|
20
22
|
onAdd,
|
|
21
23
|
onRefresh,
|
|
22
24
|
onClickRow,
|
|
23
25
|
onFetchNextPage
|
|
24
|
-
}: Props<T>):
|
|
26
|
+
}: Props<T>): react_jsx_runtime14.JSX.Element;
|
|
25
27
|
//#endregion
|
|
26
28
|
export { Table };
|
|
27
29
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/table/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-DhQJ9Ey8.js";import
|
|
1
|
+
import"../dist-CkzytVha.js";import"../button-variants-Y1GTBayz.js";import{Button as e}from"../button-DhQJ9Ey8.js";import{Flex as t}from"../flex-D6XrXRQW.js";import"../paragraph-B9fp9JaI.js";import"../input-ZyZ1HKHN.js";import{DropdownMenu as n,DropdownMenuContent as r,DropdownMenuItem as i,DropdownMenuTrigger as a}from"../dropdown-menu-DS1A05D0.js";import{ScrollArea as o,ScrollBar as s}from"../scroll-area-BKJYk4zH.js";import{Table as c,TableBody as l,TableCell as u,TableFooter as d,TableHead as f,TableHeader as p,TableRow as m}from"../table-B7a9Rpsg.js";import{AddNewBtn as h}from"../add-new-_5opEbrI.js";import{RefreshBtn as g}from"../refresh-BHjc0ETv.js";import{SearchInput as _}from"../search-input-DM9ePMxA.js";import{ArrowLeftToLineIcon as v,ArrowRightToLineIcon as y,ChevronDown as b,ChevronUp as x,EllipsisIcon as S,LoaderIcon as C,PinOffIcon as w}from"lucide-react";import{cn as T}from"@customafk/react-toolkit/utils";import{memo as E,useCallback as D,useEffect as O,useMemo as k,useRef as A,useState as j}from"react";import{Fragment as M,jsx as N,jsxs as P}from"react/jsx-runtime";import{flexRender as F,getCoreRowModel as I,getFacetedRowModel as L,getFacetedUniqueValues as R,getFilteredRowModel as z,getSortedRowModel as B,useReactTable as V}from"@tanstack/react-table";import{useVirtualizer as H}from"@tanstack/react-virtual";const U=e=>{let t=e.getIsPinned();return{left:t===`left`?`${e.getStart(`left`)}px`:void 0,right:t===`right`?`${e.getAfter(`right`)}px`:void 0,position:t?`sticky`:`relative`,width:e.getSize(),zIndex:t?1:0}},W=E(({column:e})=>{let t=e.getIsSorted(),n=k(()=>({asc:N(x,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`}),desc:N(b,{className:`shrink-0 opacity-60`,size:16,strokeWidth:2,"aria-hidden":`true`})}),[]);return t?n[t]:null});W.displayName=`SortingIndicator`;const G=E(({column:t})=>{let o=typeof t.columnDef.header==`string`?t.columnDef.header:`Column`,s=D(()=>t.pin(!1),[t]),c=D(()=>t.pin(`left`),[t]),l=D(()=>t.pin(`right`),[t]);return t.getCanPin()?t.getIsPinned()?N(e,{size:`icon`,variant:`ghost`,color:`secondary`,className:`hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none`,"aria-label":`Unpin ${o} column`,title:`Unpin ${o} column`,onClick:s,children:N(w,{className:`opacity-60`,size:16,"aria-hidden":`true`})}):P(n,{children:[N(a,{asChild:!0,children:N(e,{size:`icon`,variant:`ghost`,color:`secondary`,className:`size-7 shadow-none`,"aria-label":`Pin options for ${o} column`,title:`Pin options for ${o} column`,children:N(S,{className:`opacity-60`,size:16,"aria-hidden":`true`})})}),P(r,{align:`end`,children:[P(i,{onClick:c,children:[N(v,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to left`]}),P(i,{onClick:l,children:[N(y,{size:16,className:`opacity-60`,"aria-hidden":`true`}),`Stick to right`]})]})]}):null});G.displayName=`PinControls`;const K=E(({header:e})=>{let{column:t}=e,n=D(e=>{t.getCanSort()&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),t.getToggleSortingHandler()?.(e))},[t]),r=t.getToggleSortingHandler();return e.isPlaceholder?N(`div`,{className:`flex items-center justify-between gap-2 truncate`}):P(`div`,{className:`flex items-center justify-between gap-2 truncate`,children:[P(`div`,{className:T(t.getCanSort()&&`flex h-full cursor-pointer items-center justify-between gap-2 select-none`),onClick:r,onKeyDown:n,tabIndex:t.getCanSort()?0:void 0,role:t.getCanSort()?`button`:void 0,children:[N(`span`,{className:`truncate`,children:F(t.columnDef.header,e.getContext())}),N(W,{column:t})]}),N(G,{column:t})]})});K.displayName=`HeaderContent`;const q=E(({row:e,measureElement:t,virtualRow:n,onClickRow:r})=>{let i=D(()=>{r&&r(e.id)},[e.id,r]);return N(m,{"data-index":n.index,ref:e=>t(e),className:`absolute flex w-full cursor-pointer focus:outline-none`,style:{transform:`translateY(${n.start}px)`},onClick:i,tabIndex:r?0:void 0,role:r?`button`:void 0,children:e.getVisibleCells().map(e=>{let t=e.column.getIsPinned(),n=t===`left`&&e.column.getIsLastColumn(`left`),r=t===`right`&&e.column.getIsFirstColumn(`right`);return N(u,{"data-pinned":t||void 0,"data-last-col":n?`left`:r?`right`:void 0,style:{...U(e.column),width:e.column.getSize()},className:T(`flex overflow-hidden py-2.5`,`data-pinned:bg-background/90`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right][data-last-col=right]]:border-l`),children:F(e.column.columnDef.cell,e.getContext())},e.id)})})});q.displayName=`DataTableRow`;const J=({table:e,isLoading:t,isFetching:n,allowFetchMore:r=!0,onClickRow:i,onFetchNextPage:a})=>{let h=A(null),{rows:g}=e.getRowModel(),_=H({count:g.length,getScrollElement:()=>h.current,estimateSize:()=>37,measureElement:e=>e?.getBoundingClientRect().height??void 0,overscan:5}),v=D(e=>{if(!e)return;let{scrollHeight:t,scrollTop:i,clientHeight:o}=e;t-i-o<500&&!n&&r&&a&&a()},[r,n,a]),y=D(e=>{v(e.currentTarget)},[v]);return O(()=>{let e=setTimeout(()=>{v(h.current)},100);return()=>clearTimeout(e)},[v]),P(o,{ref:h,className:`border-border-weak bg-background relative w-full overflow-auto rounded-lg border`,onScroll:y,children:[P(c,{className:T(`!w-full`,`grid`,`border-separate border-spacing-0`,`[&_td]:border-border-weak`,`[&_th]:border-border-weak`,`[&_th]:border-b`,`[&_th]:border-b-border-weak`,`[&_tfoot_td]:border-t`),children:[N(p,{className:`sticky top-0 z-10 backdrop-blur-xs`,children:e.getHeaderGroups().map(e=>N(m,{className:`flex w-full border-none`,children:e.headers.map(e=>{let{column:t}=e,n=t.getIsPinned(),r=n===`left`&&t.getIsLastColumn(`left`),i=n===`right`&&t.getIsFirstColumn(`right`),a=n||void 0,o=r?`left`:i?`right`:void 0,s={width:e.getSize(),...U(e.column)};return N(f,{"data-pinned":a,"data-last-col":o,className:T(`relative flex h-9 font-semibold select-none`,`data-pinned:backdrop-blur-xs`,`data-pinned:bg-muted-weak`,`[&>.cursor-col-resize]:last:opacity-0`,`[&[data-pinned][data-last-col]]:border-border-weak`,`[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=left][data-last-col=left]]:border-r`,`[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0`,`[&[data-pinned=right][data-last-col=right]]:border-l`),colSpan:e.colSpan,style:s,children:N(K,{header:e})},e.id)})},e.id))}),N(l,{style:{height:`${_.getTotalSize()}px`},className:T(`relative grid w-full`,t&&`h-36`,g?.length===0&&`h-48`),children:t?N(m,{className:`absolute top-9 flex h-36 w-full items-center justify-center`,children:N(u,{children:`loading...`})}):N(M,{children:_.getVirtualItems().map(e=>{let t=g[e.index],n=t?.id||(t.original&&`id`in t.original?String(t.original.id):null)||(t.original&&`uuid`in t.original?String(t.original.uuid):null);return N(q,{id:n??String(e.index),row:t,measureElement:_.measureElement,virtualRow:e,onClickRow:i},n??e.index)})})}),n&&N(d,{children:N(`div`,{className:`flex w-full justify-center py-2`,children:N(C,{size:16,className:`animate-spin`,"aria-label":`Loading more data`})})})]}),N(s,{orientation:`horizontal`})]})},Y=({onAdd:e,onRefresh:n})=>P(t,{justify:`between`,padding:`none`,width:`full`,className:`flex-0`,children:[N(`div`,{className:`max-sm:flex-1`,children:N(_,{placeholder:`Search...`})}),P(t,{wrap:!1,className:`flex-0 px-0`,children:[!!e&&N(h,{onClick:e}),N(g,{onClick:n})]})]});function X({data:e,totalCount:n,isLoading:r,isFetching:i,columns:a,onAdd:o,onRefresh:s,onClickRow:c,onFetchNextPage:l}){"use no memo";let[u,d]=j({}),[f,p]=j([]),[m,h]=j([]),[g,_]=j({}),v=k(()=>({columnPinning:{right:[`actions`,`update`,`delete`]}}),[]),y=V({initialState:v,data:e,columns:a,rowCount:n,columnResizeMode:`onChange`,enableColumnResizing:!1,enableMultiRowSelection:!1,getCoreRowModel:I(),getSortedRowModel:B(),getFilteredRowModel:z(),getFacetedRowModel:L(),getFacetedUniqueValues:R(),getRowId:e=>e.id||e.uuid,state:{rowSelection:u,sorting:f,columnVisibility:g,columnFilters:m},onRowSelectionChange:d,onSortingChange:p,onColumnVisibilityChange:_,onColumnFiltersChange:h});return P(t,{vertical:!0,wrap:!1,gap:`sm`,align:`start`,className:`size-full overflow-y-auto pt-1`,children:[N(Y,{onAdd:o,onRefresh:s}),N(t,{padding:`none`,vertical:!0,wrap:!1,width:`full`,className:`flex-1 overflow-auto pb-4`,children:N(J,{table:y,isLoading:r,isFetching:i,onClickRow:c,onFetchNextPage:l})})]})}export{X as Table};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/table/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Table","DataTableHeader: React.FC<Props>"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 120 && !isFetching && allowFetchMore && onFetchNextPage) {\n onFetchNextPage()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\">\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({ data, totalCount, isLoading, columns, onAdd, onRefresh, onClickRow, onFetchNextPage }: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable table={table} isLoading={isLoading} onClickRow={onClickRow} onFetchNextPage={onFetchNextPage} />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["Table","DataTableHeader: React.FC<Props>"],"sources":["../../packages/components/table/data-table.tsx","../../packages/components/table/data-table-header.tsx","../../packages/components/table/index.tsx"],"sourcesContent":["import { memo, useCallback, useEffect, useMemo, useRef } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { type Column, flexRender, type Header, type Row, type Table as ReactTable } from '@tanstack/react-table'\nimport { ArrowLeftToLineIcon, ArrowRightToLineIcon, ChevronDown, ChevronUp, EllipsisIcon, LoaderIcon, PinOffIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport type { AnyEntity } from '@/types'\nimport { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual'\n\n/**\n * Computes styles for pinned columns\n * @param column Table column\n * @returns CSS styles for pinned columns\n */\nconst getPinningStyles = (column: Column<AnyEntity>): React.CSSProperties => {\n const isPinned = column.getIsPinned()\n return {\n left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n position: isPinned ? 'sticky' : 'relative',\n width: column.getSize(),\n zIndex: isPinned ? 1 : 0,\n }\n}\n\nconst SortingIndicator = memo(({ column }: { column: Column<AnyEntity> }) => {\n const sortDirection = column.getIsSorted()\n\n const icons = useMemo(\n () => ({\n asc: <ChevronUp className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n desc: <ChevronDown className=\"shrink-0 opacity-60\" size={16} strokeWidth={2} aria-hidden=\"true\" />,\n }),\n [],\n )\n\n return sortDirection ? icons[sortDirection] : null\n})\n\nSortingIndicator.displayName = 'SortingIndicator'\n\nconst PinControls = memo(({ column }: { column: Column<AnyEntity> }) => {\n const columnHeader = typeof column.columnDef.header === 'string' ? column.columnDef.header : 'Column'\n\n const handleUnpin = useCallback(() => column.pin(false), [column])\n const handlePinLeft = useCallback(() => column.pin('left'), [column])\n const handlePinRight = useCallback(() => column.pin('right'), [column])\n\n if (!column.getCanPin()) return null\n\n if (column.getIsPinned()) {\n return (\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"hover:[&_svg]:text-secondary-foreground -mr-1 size-7 shadow-none\"\n aria-label={`Unpin ${columnHeader} column`}\n title={`Unpin ${columnHeader} column`}\n onClick={handleUnpin}\n >\n <PinOffIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n )\n }\n\n return (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n color=\"secondary\"\n className=\"size-7 shadow-none\"\n aria-label={`Pin options for ${columnHeader} column`}\n title={`Pin options for ${columnHeader} column`}\n >\n <EllipsisIcon className=\"opacity-60\" size={16} aria-hidden=\"true\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={handlePinLeft}>\n <ArrowLeftToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to left\n </DropdownMenuItem>\n <DropdownMenuItem onClick={handlePinRight}>\n <ArrowRightToLineIcon size={16} className=\"opacity-60\" aria-hidden=\"true\" />\n Stick to right\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n )\n})\n\nPinControls.displayName = 'PinControls'\n\nconst HeaderContent = memo(({ header }: { header: Header<AnyEntity, unknown> }) => {\n const { column } = header\n\n const handleSort = useCallback(\n (e: React.KeyboardEvent) => {\n if (column.getCanSort() && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault()\n column.getToggleSortingHandler()?.(e)\n }\n },\n [column],\n )\n\n const toggleSortHandler = column.getToggleSortingHandler()\n\n if (header.isPlaceholder) {\n return <div className=\"flex items-center justify-between gap-2 truncate\" />\n }\n\n return (\n <div className=\"flex items-center justify-between gap-2 truncate\">\n <div\n className={cn(column.getCanSort() && 'flex h-full cursor-pointer items-center justify-between gap-2 select-none')}\n onClick={toggleSortHandler}\n onKeyDown={handleSort}\n tabIndex={column.getCanSort() ? 0 : undefined}\n role={column.getCanSort() ? 'button' : undefined}\n >\n <span className=\"truncate\">{flexRender(column.columnDef.header, header.getContext())}</span>\n <SortingIndicator column={column} />\n </div>\n <PinControls column={column} />\n </div>\n )\n})\n\nHeaderContent.displayName = 'HeaderContent'\n\ntype DataTableRowProps = {\n id: string\n row: Row<AnyEntity>\n measureElement: (element?: HTMLTableRowElement | null | undefined) => void\n virtualRow: VirtualItem\n onClickRow?: (id: string) => void\n}\nconst DataTableRow = memo(({ row, measureElement, virtualRow, onClickRow }: DataTableRowProps) => {\n const handleClick = useCallback(() => {\n if (!onClickRow) return\n onClickRow(row.id)\n }, [row.id, onClickRow])\n return (\n <TableRow\n data-index={virtualRow.index}\n ref={(node) => measureElement(node)}\n className=\"absolute flex w-full cursor-pointer focus:outline-none\"\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n onClick={handleClick}\n tabIndex={onClickRow ? 0 : undefined}\n role={onClickRow ? 'button' : undefined}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = cell.column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && cell.column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && cell.column.getIsFirstColumn('right')\n\n return (\n <TableCell\n key={cell.id}\n data-pinned={isPinned || undefined}\n data-last-col={isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined}\n style={{\n ...getPinningStyles(cell.column),\n width: cell.column.getSize(),\n }}\n className={cn(\n 'flex overflow-hidden py-2.5',\n 'data-pinned:bg-background/90',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n )\n })}\n </TableRow>\n )\n})\nDataTableRow.displayName = 'DataTableRow'\n\ninterface DataTableProps {\n table: ReactTable<AnyEntity>\n columnsLength?: number\n isLoading?: boolean\n isFetching?: boolean\n allowFetchMore?: boolean\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\n\nexport const DataTable = ({ table, isLoading, isFetching, allowFetchMore = true, onClickRow, onFetchNextPage }: DataTableProps) => {\n // 'use no memo'\n\n const tableContainerRef = useRef<HTMLDivElement>(null)\n\n const { rows } = table.getRowModel()\n\n // Configure virtualization for performance with large datasets\n const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({\n count: rows.length,\n getScrollElement: () => tableContainerRef.current,\n estimateSize: () => 37, // estimated row height\n measureElement: (element) => element?.getBoundingClientRect().height ?? undefined,\n overscan: 5, // Render additional rows beyond viewport for smoother scrolling\n })\n\n // Fetch more data when user approaches bottom of table\n const fetchMoreOnBottomReached = useCallback(\n (refEl: HTMLDivElement | null) => {\n if (!refEl) return\n const { scrollHeight, scrollTop, clientHeight } = refEl\n // Threshold of 120px from bottom to trigger load more\n if (scrollHeight - scrollTop - clientHeight < 500 && !isFetching && allowFetchMore && onFetchNextPage) {\n onFetchNextPage()\n }\n },\n [allowFetchMore, isFetching, onFetchNextPage],\n )\n\n // Handle scroll events to check if more data should be loaded\n const handleScroll = useCallback(\n (ev: React.UIEvent<HTMLDivElement>) => {\n fetchMoreOnBottomReached(ev.currentTarget)\n },\n [fetchMoreOnBottomReached],\n )\n\n // Check for more data on mount and when dependencies change\n useEffect(() => {\n const timer = setTimeout(() => {\n fetchMoreOnBottomReached(tableContainerRef.current)\n }, 100)\n return () => clearTimeout(timer)\n }, [fetchMoreOnBottomReached])\n\n return (\n <ScrollArea ref={tableContainerRef} className=\"border-border-weak bg-background relative w-full overflow-auto rounded-lg border\" onScroll={handleScroll}>\n <Table\n className={cn(\n '!w-full',\n 'grid',\n 'border-separate border-spacing-0',\n '[&_td]:border-border-weak',\n '[&_th]:border-border-weak',\n '[&_th]:border-b',\n '[&_th]:border-b-border-weak',\n '[&_tfoot_td]:border-t',\n )}\n >\n <TableHeader className=\"sticky top-0 z-10 backdrop-blur-xs\">\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id} className=\"flex w-full border-none\">\n {headerGroup.headers.map((header) => {\n const { column } = header\n const isPinned = column.getIsPinned()\n const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left')\n const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right')\n const pinningState = isPinned || undefined\n const lastColState = isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined\n\n const headerStyles = {\n width: header.getSize(),\n ...getPinningStyles(header.column),\n }\n\n return (\n <TableHead\n key={header.id}\n data-pinned={pinningState}\n data-last-col={lastColState}\n className={cn(\n 'relative flex h-9 font-semibold select-none',\n 'data-pinned:backdrop-blur-xs',\n 'data-pinned:bg-muted-weak',\n '[&>.cursor-col-resize]:last:opacity-0',\n '[&[data-pinned][data-last-col]]:border-border-weak',\n '[&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=left][data-last-col=left]]:border-r',\n '[&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0',\n '[&[data-pinned=right][data-last-col=right]]:border-l',\n )}\n colSpan={header.colSpan}\n style={headerStyles}\n >\n <HeaderContent header={header} />\n </TableHead>\n )\n })}\n </TableRow>\n ))}\n </TableHeader>\n\n <TableBody\n style={{\n height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n }}\n className={cn('relative grid w-full', isLoading && 'h-36', rows?.length === 0 && 'h-48')}\n >\n {isLoading ? (\n <TableRow className=\"absolute top-9 flex h-36 w-full items-center justify-center\">\n <TableCell>loading...</TableCell>\n </TableRow>\n ) : (\n <>\n {rowVirtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n const rowId =\n row?.id ||\n (row.original && 'id' in row.original ? String(row.original.id) : null) ||\n (row.original && 'uuid' in row.original ? String(row.original.uuid) : null)\n return (\n <DataTableRow\n key={rowId ?? virtualRow.index}\n id={rowId ?? String(virtualRow.index)}\n row={row}\n measureElement={rowVirtualizer.measureElement}\n virtualRow={virtualRow}\n onClickRow={onClickRow}\n />\n )\n })}\n </>\n )}\n </TableBody>\n {isFetching && (\n <TableFooter>\n <div className=\"flex w-full justify-center py-2\">\n <LoaderIcon size={16} className=\"animate-spin\" aria-label=\"Loading more data\" />\n </div>\n </TableFooter>\n )}\n </Table>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n )\n}\n","import { Flex } from '@/components/layouts/flex'\nimport { AddNewBtn } from '@/components/ui/buttons/add-new'\nimport { RefreshBtn } from '@/components/ui/buttons/refresh'\nimport { SearchInput } from '@/components/ui/inputs/search-input'\n\ntype Props = {\n onAdd?: () => void\n onRefresh?: () => void\n}\n\nexport const DataTableHeader: React.FC<Props> = ({ onAdd, onRefresh }) => {\n return (\n <Flex justify=\"between\" padding=\"none\" width=\"full\" className=\"flex-0\">\n <div className=\"max-sm:flex-1\">\n <SearchInput placeholder=\"Search...\" />\n </div>\n <Flex wrap={false} className=\"flex-0 px-0\">\n {!!onAdd && <AddNewBtn onClick={onAdd} />}\n <RefreshBtn onClick={onRefresh} />\n </Flex>\n </Flex>\n )\n}\n","import { useMemo, useState } from 'react'\n\nimport type { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table'\nimport { getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'\n\nimport { DataTable } from './data-table'\nimport { DataTableHeader } from './data-table-header'\nimport { Flex } from '../layouts/flex'\n\ntype Props<T> = {\n data: T[]\n totalCount?: number\n isLoading?: boolean\n isFetching?: boolean\n columns: ColumnDef<T>[]\n onAdd?: () => void\n onRefresh?: () => void\n onClickRow?: (id: string) => void\n onFetchNextPage?: () => void\n}\nexport function Table<T extends Record<string, unknown>>({\n data,\n totalCount,\n isLoading,\n isFetching,\n columns,\n onAdd,\n onRefresh,\n onClickRow,\n onFetchNextPage,\n}: Props<T>) {\n 'use no memo'\n\n const [rowSelection, setRowSelection] = useState<RowSelectionState>({})\n const [sorting, setSorting] = useState<SortingState>([])\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n\n const initialState = useMemo(\n () => ({\n columnPinning: { right: ['actions', 'update', 'delete'] },\n }),\n [],\n )\n\n const table = useReactTable<T>({\n initialState,\n data,\n columns,\n rowCount: totalCount,\n columnResizeMode: 'onChange',\n enableColumnResizing: false,\n enableMultiRowSelection: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n getRowId: (row) => (row.id as string) || (row.uuid as string),\n state: {\n rowSelection,\n sorting,\n columnVisibility,\n columnFilters,\n },\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnVisibilityChange: setColumnVisibility,\n onColumnFiltersChange: setColumnFilters,\n })\n\n return (\n <Flex vertical wrap={false} gap=\"sm\" align=\"start\" className=\"size-full overflow-y-auto pt-1\">\n <DataTableHeader onAdd={onAdd} onRefresh={onRefresh} />\n <Flex padding=\"none\" vertical wrap={false} width=\"full\" className=\"flex-1 overflow-auto pb-4\">\n <DataTable table={table} isLoading={isLoading} isFetching={isFetching} onClickRow={onClickRow} onFetchNextPage={onFetchNextPage} />\n </Flex>\n </Flex>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{cn as e}from"@customafk/react-toolkit/utils";import{useCallback as t}from"react";import{jsx as n}from"react/jsx-runtime";function r({className:r,onChange:i,onValueChange:a,...o}){let s=t(e=>{i?.(e),a?.(e.target.value)},[i,a]);return n(`textarea`,{"data-slot":`textarea`,className:e(`flex min-h-24 w-full px-3 py-2`,`rounded-md border transition-all duration-200`,`text-text-positive-strong bg-transparent text-sm`,`field-sizing-content resize-y`,`border-border-weak shadow-input`,`caret-primary outline-none`,`placeholder:text-text-positive-muted`,`hover:border-border hover:shadow-input`,`focus:border-primary-strong focus:shadow-none`,`focus-visible:ring-primary-muted focus-visible:ring-4`,`aria-invalid:border-danger aria-invalid:ring-danger-muted`,`aria-invalid:hover:border-danger-strong`,`disabled:cursor-not-allowed disabled:opacity-50`,`disabled:pointer-events-none`,`disabled:border-border-weak/50 disabled:bg-secondary-muted/10`,r),...o,onChange:s})}export{r as Textarea};
|
|
2
|
-
//# sourceMappingURL=textarea-
|
|
2
|
+
//# sourceMappingURL=textarea-Br_DX1wm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-
|
|
1
|
+
{"version":3,"file":"textarea-Br_DX1wm.js","names":[],"sources":["../packages/components/ui/textarea.tsx"],"sourcesContent":["'use client'\nimport { useCallback } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nfunction Textarea({\n className,\n onChange,\n onValueChange,\n ...props\n}: React.ComponentProps<'textarea'> & {\n onValueChange?: (value: string) => void\n}) {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e)\n onValueChange?.(e.target.value)\n },\n [onChange, onValueChange],\n )\n return (\n <textarea\n data-slot=\"textarea\"\n className={cn(\n // Base styles\n 'flex min-h-24 w-full px-3 py-2',\n 'rounded-md border transition-all duration-200',\n 'text-text-positive-strong bg-transparent text-sm',\n 'field-sizing-content resize-y',\n\n // Border and shadow styles\n 'border-border-weak shadow-input',\n 'caret-primary outline-none',\n\n // Placeholder styling\n 'placeholder:text-text-positive-muted',\n\n // State styles\n 'hover:border-border hover:shadow-input',\n 'focus:border-primary-strong focus:shadow-none',\n 'focus-visible:ring-primary-muted focus-visible:ring-4',\n\n // Invalid state\n 'aria-invalid:border-danger aria-invalid:ring-danger-muted',\n 'aria-invalid:hover:border-danger-strong',\n\n // Disabled state\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'disabled:pointer-events-none',\n 'disabled:border-border-weak/50 disabled:bg-secondary-muted/10',\n\n // Additional custom styling\n className,\n )}\n {...props}\n onChange={handleChange}\n />\n )\n}\n\nexport { Textarea }\n"],"mappings":"gIAIA,SAAS,EAAS,CAChB,YACA,WACA,gBACA,GAAG,GAGF,CACD,IAAM,EAAe,EAClB,GAA8C,CAC7C,IAAW,GACX,IAAgB,EAAE,OAAO,QAE3B,CAAC,EAAU,IAEb,OACE,EAAC,WAAA,CACC,YAAU,WACV,UAAW,EAET,iCACA,gDACA,mDACA,gCAGA,kCACA,6BAGA,uCAGA,yCACA,gDACA,wDAGA,4DACA,0CAGA,kDACA,+BACA,gEAGA,GAEF,GAAI,EACJ,SAAU"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const e=require(`./chunk-CUT6urMc.cjs`),t=e.__toESM(require(`@customafk/react-toolkit/utils`)),n=e.__toESM(require(`react`)),r=e.__toESM(require(`react/jsx-runtime`));function i({className:e,onChange:i,onValueChange:a,...o}){let s=(0,n.useCallback)(e=>{i?.(e),a?.(e.target.value)},[i,a]);return(0,r.jsx)(`textarea`,{"data-slot":`textarea`,className:(0,t.cn)(`flex min-h-24 w-full px-3 py-2`,`rounded-md border transition-all duration-200`,`text-text-positive-strong bg-transparent text-sm`,`field-sizing-content resize-y`,`border-border-weak shadow-input`,`caret-primary outline-none`,`placeholder:text-text-positive-muted`,`hover:border-border hover:shadow-input`,`focus:border-primary-strong focus:shadow-none`,`focus-visible:ring-primary-muted focus-visible:ring-4`,`aria-invalid:border-danger aria-invalid:ring-danger-muted`,`aria-invalid:hover:border-danger-strong`,`disabled:cursor-not-allowed disabled:opacity-50`,`disabled:pointer-events-none`,`disabled:border-border-weak/50 disabled:bg-secondary-muted/10`,e),...o,onChange:s})}Object.defineProperty(exports,`Textarea`,{enumerable:!0,get:function(){return i}});
|
|
2
|
-
//# sourceMappingURL=textarea-
|
|
2
|
+
//# sourceMappingURL=textarea-jrCmozqt.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-
|
|
1
|
+
{"version":3,"file":"textarea-jrCmozqt.cjs","names":[],"sources":["../packages/components/ui/textarea.tsx"],"sourcesContent":["'use client'\nimport { useCallback } from 'react'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nfunction Textarea({\n className,\n onChange,\n onValueChange,\n ...props\n}: React.ComponentProps<'textarea'> & {\n onValueChange?: (value: string) => void\n}) {\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e)\n onValueChange?.(e.target.value)\n },\n [onChange, onValueChange],\n )\n return (\n <textarea\n data-slot=\"textarea\"\n className={cn(\n // Base styles\n 'flex min-h-24 w-full px-3 py-2',\n 'rounded-md border transition-all duration-200',\n 'text-text-positive-strong bg-transparent text-sm',\n 'field-sizing-content resize-y',\n\n // Border and shadow styles\n 'border-border-weak shadow-input',\n 'caret-primary outline-none',\n\n // Placeholder styling\n 'placeholder:text-text-positive-muted',\n\n // State styles\n 'hover:border-border hover:shadow-input',\n 'focus:border-primary-strong focus:shadow-none',\n 'focus-visible:ring-primary-muted focus-visible:ring-4',\n\n // Invalid state\n 'aria-invalid:border-danger aria-invalid:ring-danger-muted',\n 'aria-invalid:hover:border-danger-strong',\n\n // Disabled state\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'disabled:pointer-events-none',\n 'disabled:border-border-weak/50 disabled:bg-secondary-muted/10',\n\n // Additional custom styling\n className,\n )}\n {...props}\n onChange={handleChange}\n />\n )\n}\n\nexport { Textarea }\n"],"mappings":"uKAIA,SAAS,EAAS,CAChB,YACA,WACA,gBACA,GAAG,GAGF,CACD,IAAM,GAAA,EAAA,EAAA,aACH,GAA8C,CAC7C,IAAW,GACX,IAAgB,EAAE,OAAO,QAE3B,CAAC,EAAU,IAEb,OACE,EAAA,EAAA,KAAC,WAAA,CACC,YAAU,WACV,WAAA,EAAA,EAAA,IAEE,iCACA,gDACA,mDACA,gCAGA,kCACA,6BAGA,uCAGA,yCACA,gDACA,wDAGA,4DACA,0CAGA,kDACA,+BACA,gEAGA,GAEF,GAAI,EACJ,SAAU"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime217 from "react/jsx-runtime";
|
|
2
|
+
import * as class_variance_authority_types3 from "class-variance-authority/types";
|
|
3
3
|
import { VariantProps } from "class-variance-authority";
|
|
4
4
|
import { Toggle } from "radix-ui";
|
|
5
5
|
|
|
@@ -7,13 +7,13 @@ import { Toggle } from "radix-ui";
|
|
|
7
7
|
declare const toggleVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | null | undefined;
|
|
9
9
|
size?: "sm" | "lg" | "default" | null | undefined;
|
|
10
|
-
} &
|
|
10
|
+
} & class_variance_authority_types3.ClassProp) | undefined) => string;
|
|
11
11
|
declare function Toggle$1({
|
|
12
12
|
className,
|
|
13
13
|
variant,
|
|
14
14
|
size,
|
|
15
15
|
...props
|
|
16
|
-
}: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>):
|
|
16
|
+
}: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime217.JSX.Element;
|
|
17
17
|
//#endregion
|
|
18
18
|
export { Toggle$1 as Toggle, toggleVariants };
|
|
19
|
-
//# sourceMappingURL=toggle-
|
|
19
|
+
//# sourceMappingURL=toggle-C2H0HKpd.d.cts.map
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime234 from "react/jsx-runtime";
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
import { Toggle } from "radix-ui";
|
|
4
|
-
import * as
|
|
4
|
+
import * as class_variance_authority_types3 from "class-variance-authority/types";
|
|
5
5
|
|
|
6
6
|
//#region packages/components/ui/toggle.d.ts
|
|
7
7
|
declare const toggleVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | null | undefined;
|
|
9
9
|
size?: "sm" | "lg" | "default" | null | undefined;
|
|
10
|
-
} &
|
|
10
|
+
} & class_variance_authority_types3.ClassProp) | undefined) => string;
|
|
11
11
|
declare function Toggle$1({
|
|
12
12
|
className,
|
|
13
13
|
variant,
|
|
14
14
|
size,
|
|
15
15
|
...props
|
|
16
|
-
}: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>):
|
|
16
|
+
}: React.ComponentProps<typeof Toggle.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime234.JSX.Element;
|
|
17
17
|
//#endregion
|
|
18
18
|
export { Toggle$1 as Toggle, toggleVariants };
|
|
19
|
-
//# sourceMappingURL=toggle-
|
|
19
|
+
//# sourceMappingURL=toggle-vH-BH18X.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import{cn as e}from"@customafk/react-toolkit/utils";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Tooltip as r}from"radix-ui";function i({delayDuration:e=0,...n}){return t(r.Provider,{"data-slot":`tooltip-provider`,delayDuration:e,...n})}function a({...e}){return t(i,{children:t(r.Root,{"data-slot":`tooltip`,...e})})}function o({...e}){return t(r.Trigger,{"data-slot":`tooltip-trigger`,...e})}function s({className:i,sideOffset:a=0,children:o,...s}){return t(r.Portal,{children:n(r.Content,{"data-slot":`tooltip-content`,sideOffset:a,className:e(`bg-secondary-strong text-text-negative-intense shadow-dropdown outline-none`,`animate-in fade-in-0 zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-95`,`data-[side=bottom]:slide-in-from-top-2`,`data-[side=left]:slide-in-from-right-2`,`data-[side=right]:slide-in-from-left-2`,`data-[side=top]:slide-in-from-bottom-2`,`z-50 w-fit`,`origin-(--radix-tooltip-content-transform-origin)`,`rounded-lg px-3 py-1.5 text-xs text-balance`,i),...s,children:[o,t(r.Arrow,{className:`bg-secondary-strong fill-secondary-strong z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]`})]})})}export{a as Tooltip,s as TooltipContent,i as TooltipProvider,o as TooltipTrigger};
|
|
2
|
-
//# sourceMappingURL=tooltip-
|
|
2
|
+
//# sourceMappingURL=tooltip-BTrjCwd8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-
|
|
1
|
+
{"version":3,"file":"tooltip-BTrjCwd8.js","names":["TooltipPrimitive","Tooltip"],"sources":["../packages/components/ui/tooltip.tsx"],"sourcesContent":["'use client'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { Tooltip as TooltipPrimitive } from 'radix-ui'\n\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n )\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-secondary-strong text-text-negative-intense shadow-dropdown outline-none',\n 'animate-in fade-in-0 zoom-in-95',\n 'data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0',\n 'data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'z-50 w-fit',\n 'origin-(--radix-tooltip-content-transform-origin)',\n 'rounded-lg px-3 py-1.5 text-xs text-balance',\n className,\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-secondary-strong fill-secondary-strong z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n"],"mappings":"yIAKA,SAAS,EAAgB,CAAE,gBAAgB,EAAG,GAAG,GAAiE,CAChH,OAAO,EAACA,EAAiB,SAAA,CAAS,YAAU,mBAAkC,gBAAe,GAAI,IAGnG,SAASC,EAAQ,CAAE,GAAG,GAA6D,CACjF,OACE,EAAC,EAAA,CAAA,SACC,EAACD,EAAiB,KAAA,CAAK,YAAU,UAAU,GAAI,MAKrD,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAACA,EAAiB,QAAA,CAAQ,YAAU,kBAAkB,GAAI,IAGnE,SAAS,EAAe,CAAE,YAAW,aAAa,EAAG,WAAU,GAAG,GAAgE,CAChI,OACE,EAACA,EAAiB,OAAA,CAAA,SAChB,EAACA,EAAiB,QAAA,CAChB,YAAU,kBACE,aACZ,UAAW,EACT,8EACA,kCACA,kCACA,iCACA,kCACA,yCACA,yCACA,yCACA,yCACA,aACA,oDACA,8CACA,GAEF,GAAI,YAEH,EACD,EAACA,EAAiB,MAAA,CAAM,UAAU"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime204 from "react/jsx-runtime";
|
|
2
2
|
import { Tooltip } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/tooltip.d.ts
|
|
5
5
|
declare function TooltipProvider({
|
|
6
6
|
delayDuration,
|
|
7
7
|
...props
|
|
8
|
-
}: React.ComponentProps<typeof Tooltip.Provider>):
|
|
8
|
+
}: React.ComponentProps<typeof Tooltip.Provider>): react_jsx_runtime204.JSX.Element;
|
|
9
9
|
declare function Tooltip$1({
|
|
10
10
|
...props
|
|
11
|
-
}: React.ComponentProps<typeof Tooltip.Root>):
|
|
11
|
+
}: React.ComponentProps<typeof Tooltip.Root>): react_jsx_runtime204.JSX.Element;
|
|
12
12
|
declare function TooltipTrigger({
|
|
13
13
|
...props
|
|
14
|
-
}: React.ComponentProps<typeof Tooltip.Trigger>):
|
|
14
|
+
}: React.ComponentProps<typeof Tooltip.Trigger>): react_jsx_runtime204.JSX.Element;
|
|
15
15
|
declare function TooltipContent({
|
|
16
16
|
className,
|
|
17
17
|
sideOffset,
|
|
18
18
|
children,
|
|
19
19
|
...props
|
|
20
|
-
}: React.ComponentProps<typeof Tooltip.Content>):
|
|
20
|
+
}: React.ComponentProps<typeof Tooltip.Content>): react_jsx_runtime204.JSX.Element;
|
|
21
21
|
//#endregion
|
|
22
22
|
export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
23
|
-
//# sourceMappingURL=tooltip-
|
|
23
|
+
//# sourceMappingURL=tooltip-BhypOt39.d.cts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const e=require(`./chunk-CUT6urMc.cjs`),t=e.__toESM(require(`@customafk/react-toolkit/utils`)),n=e.__toESM(require(`react/jsx-runtime`)),r=e.__toESM(require(`radix-ui`));function i({delayDuration:e=0,...t}){return(0,n.jsx)(r.Tooltip.Provider,{"data-slot":`tooltip-provider`,delayDuration:e,...t})}function a({...e}){return(0,n.jsx)(i,{children:(0,n.jsx)(r.Tooltip.Root,{"data-slot":`tooltip`,...e})})}function o({...e}){return(0,n.jsx)(r.Tooltip.Trigger,{"data-slot":`tooltip-trigger`,...e})}function s({className:e,sideOffset:i=0,children:a,...o}){return(0,n.jsx)(r.Tooltip.Portal,{children:(0,n.jsxs)(r.Tooltip.Content,{"data-slot":`tooltip-content`,sideOffset:i,className:(0,t.cn)(`bg-secondary-strong text-text-negative-intense shadow-dropdown outline-none`,`animate-in fade-in-0 zoom-in-95`,`data-[state=closed]:animate-out`,`data-[state=closed]:fade-out-0`,`data-[state=closed]:zoom-out-95`,`data-[side=bottom]:slide-in-from-top-2`,`data-[side=left]:slide-in-from-right-2`,`data-[side=right]:slide-in-from-left-2`,`data-[side=top]:slide-in-from-bottom-2`,`z-50 w-fit`,`origin-(--radix-tooltip-content-transform-origin)`,`rounded-lg px-3 py-1.5 text-xs text-balance`,e),...o,children:[a,(0,n.jsx)(r.Tooltip.Arrow,{className:`bg-secondary-strong fill-secondary-strong z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]`})]})})}Object.defineProperty(exports,`Tooltip`,{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,`TooltipContent`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`TooltipProvider`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`TooltipTrigger`,{enumerable:!0,get:function(){return o}});
|
|
2
|
-
//# sourceMappingURL=tooltip-
|
|
2
|
+
//# sourceMappingURL=tooltip-DXvcPsvM.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-
|
|
1
|
+
{"version":3,"file":"tooltip-DXvcPsvM.cjs","names":["TooltipPrimitive"],"sources":["../packages/components/ui/tooltip.tsx"],"sourcesContent":["'use client'\nimport { cn } from '@customafk/react-toolkit/utils'\n\nimport { Tooltip as TooltipPrimitive } from 'radix-ui'\n\nfunction TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" delayDuration={delayDuration} {...props} />\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n )\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'bg-secondary-strong text-text-negative-intense shadow-dropdown outline-none',\n 'animate-in fade-in-0 zoom-in-95',\n 'data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0',\n 'data-[state=closed]:zoom-out-95',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'z-50 w-fit',\n 'origin-(--radix-tooltip-content-transform-origin)',\n 'rounded-lg px-3 py-1.5 text-xs text-balance',\n className,\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"bg-secondary-strong fill-secondary-strong z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n"],"mappings":"0KAKA,SAAS,EAAgB,CAAE,gBAAgB,EAAG,GAAG,GAAiE,CAChH,OAAO,EAAA,EAAA,KAACA,EAAAA,QAAiB,SAAA,CAAS,YAAU,mBAAkC,gBAAe,GAAI,IAGnG,SAAS,EAAQ,CAAE,GAAG,GAA6D,CACjF,OACE,EAAA,EAAA,KAAC,EAAA,CAAA,UACC,EAAA,EAAA,KAACA,EAAAA,QAAiB,KAAA,CAAK,YAAU,UAAU,GAAI,MAKrD,SAAS,EAAe,CAAE,GAAG,GAAgE,CAC3F,OAAO,EAAA,EAAA,KAACA,EAAAA,QAAiB,QAAA,CAAQ,YAAU,kBAAkB,GAAI,IAGnE,SAAS,EAAe,CAAE,YAAW,aAAa,EAAG,WAAU,GAAG,GAAgE,CAChI,OACE,EAAA,EAAA,KAACA,EAAAA,QAAiB,OAAA,CAAA,UAChB,EAAA,EAAA,MAACA,EAAAA,QAAiB,QAAA,CAChB,YAAU,kBACE,aACZ,WAAA,EAAA,EAAA,IACE,8EACA,kCACA,kCACA,iCACA,kCACA,yCACA,yCACA,yCACA,yCACA,aACA,oDACA,8CACA,GAEF,GAAI,YAEH,GACD,EAAA,EAAA,KAACA,EAAAA,QAAiB,MAAA,CAAM,UAAU"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime230 from "react/jsx-runtime";
|
|
2
2
|
import { Tooltip } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/tooltip.d.ts
|
|
5
5
|
declare function TooltipProvider({
|
|
6
6
|
delayDuration,
|
|
7
7
|
...props
|
|
8
|
-
}: React.ComponentProps<typeof Tooltip.Provider>):
|
|
8
|
+
}: React.ComponentProps<typeof Tooltip.Provider>): react_jsx_runtime230.JSX.Element;
|
|
9
9
|
declare function Tooltip$1({
|
|
10
10
|
...props
|
|
11
|
-
}: React.ComponentProps<typeof Tooltip.Root>):
|
|
11
|
+
}: React.ComponentProps<typeof Tooltip.Root>): react_jsx_runtime230.JSX.Element;
|
|
12
12
|
declare function TooltipTrigger({
|
|
13
13
|
...props
|
|
14
|
-
}: React.ComponentProps<typeof Tooltip.Trigger>):
|
|
14
|
+
}: React.ComponentProps<typeof Tooltip.Trigger>): react_jsx_runtime230.JSX.Element;
|
|
15
15
|
declare function TooltipContent({
|
|
16
16
|
className,
|
|
17
17
|
sideOffset,
|
|
18
18
|
children,
|
|
19
19
|
...props
|
|
20
|
-
}: React.ComponentProps<typeof Tooltip.Content>):
|
|
20
|
+
}: React.ComponentProps<typeof Tooltip.Content>): react_jsx_runtime230.JSX.Element;
|
|
21
21
|
//#endregion
|
|
22
22
|
export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
23
|
-
//# sourceMappingURL=tooltip-
|
|
23
|
+
//# sourceMappingURL=tooltip-Dibm3gcf.d.ts.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
let e=function(e){return e.SUPER_ADMIN=`SUPER_ADMIN`,e.ADMIN=`ADMIN`,e.MODERATOR=`MODERATOR`,e.STAFF=`STAFF`,e.USER=`USER`,e}({}),t=function(e){return e.VIETNAM=`Vietnam`,e.USA=`USA`,e.JAPAN=`Japan`,e.KOREA=`Korea`,e.CHINA=`China`,e.TAIWAN=`Taiwan`,e.THAILAND=`Thailand`,e.MALAYSIA=`Malaysia`,e.SINGAPORE=`Singapore`,e.INDONESIA=`Indonesia`,e}({});export{t as ECountry,e as ERole};
|
|
2
|
-
//# sourceMappingURL=types-
|
|
2
|
+
//# sourceMappingURL=types-BiiGENwa.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types-
|
|
1
|
+
{"version":3,"file":"types-BiiGENwa.js","names":[],"sources":["../packages/types.ts"],"sourcesContent":["export enum ERole {\n SUPER_ADMIN = 'SUPER_ADMIN',\n ADMIN = 'ADMIN',\n MODERATOR = 'MODERATOR',\n STAFF = 'STAFF',\n USER = 'USER',\n}\n\nexport enum ECountry {\n VIETNAM = 'Vietnam',\n USA = 'USA',\n JAPAN = 'Japan',\n KOREA = 'Korea',\n CHINA = 'China',\n TAIWAN = 'Taiwan',\n THAILAND = 'Thailand',\n MALAYSIA = 'Malaysia',\n SINGAPORE = 'Singapore',\n INDONESIA = 'Indonesia',\n}\n\nexport enum EWeightUnit {\n KG = 'kg',\n G = 'g',\n LB = 'lb',\n OZ = 'oz',\n}\n\nexport enum EDimensionUnit {\n CM = 'cm',\n M = 'm',\n INCH = 'inch',\n FT = 'ft',\n}\n\nexport enum EProductStatus {\n DRAFT = 'draft',\n REVIEW = 'review',\n ACTIVE = 'active',\n INACTIVE = 'inactive',\n CANCELLED = 'cancelled',\n}\n\nexport enum EProductInventoryStatus {\n IN_STOCK = 'in_stock',\n OUT_OF_STOCK = 'out_of_stock',\n PREORDER = 'preorder',\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyEntity = any\n"],"mappings":"AAAA,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,YAAA,cACA,EAAA,MAAA,QACA,EAAA,UAAA,YACA,EAAA,MAAA,QACA,EAAA,KAAA,cAGU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,IAAA,MACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,SAAA,WACA,EAAA,SAAA,WACA,EAAA,UAAA,YACA,EAAA,UAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
let e=function(e){return e.SUPER_ADMIN=`SUPER_ADMIN`,e.ADMIN=`ADMIN`,e.MODERATOR=`MODERATOR`,e.STAFF=`STAFF`,e.USER=`USER`,e}({}),t=function(e){return e.VIETNAM=`Vietnam`,e.USA=`USA`,e.JAPAN=`Japan`,e.KOREA=`Korea`,e.CHINA=`China`,e.TAIWAN=`Taiwan`,e.THAILAND=`Thailand`,e.MALAYSIA=`Malaysia`,e.SINGAPORE=`Singapore`,e.INDONESIA=`Indonesia`,e}({});Object.defineProperty(exports,`ECountry`,{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,`ERole`,{enumerable:!0,get:function(){return e}});
|
|
2
|
-
//# sourceMappingURL=types-
|
|
2
|
+
//# sourceMappingURL=types-D32qXHff.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types-
|
|
1
|
+
{"version":3,"file":"types-D32qXHff.cjs","names":[],"sources":["../packages/types.ts"],"sourcesContent":["export enum ERole {\n SUPER_ADMIN = 'SUPER_ADMIN',\n ADMIN = 'ADMIN',\n MODERATOR = 'MODERATOR',\n STAFF = 'STAFF',\n USER = 'USER',\n}\n\nexport enum ECountry {\n VIETNAM = 'Vietnam',\n USA = 'USA',\n JAPAN = 'Japan',\n KOREA = 'Korea',\n CHINA = 'China',\n TAIWAN = 'Taiwan',\n THAILAND = 'Thailand',\n MALAYSIA = 'Malaysia',\n SINGAPORE = 'Singapore',\n INDONESIA = 'Indonesia',\n}\n\nexport enum EWeightUnit {\n KG = 'kg',\n G = 'g',\n LB = 'lb',\n OZ = 'oz',\n}\n\nexport enum EDimensionUnit {\n CM = 'cm',\n M = 'm',\n INCH = 'inch',\n FT = 'ft',\n}\n\nexport enum EProductStatus {\n DRAFT = 'draft',\n REVIEW = 'review',\n ACTIVE = 'active',\n INACTIVE = 'inactive',\n CANCELLED = 'cancelled',\n}\n\nexport enum EProductInventoryStatus {\n IN_STOCK = 'in_stock',\n OUT_OF_STOCK = 'out_of_stock',\n PREORDER = 'preorder',\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyEntity = any\n"],"mappings":"AAAA,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,YAAA,cACA,EAAA,MAAA,QACA,EAAA,UAAA,YACA,EAAA,MAAA,QACA,EAAA,KAAA,cAGU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,IAAA,MACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,SAAA,WACA,EAAA,SAAA,WACA,EAAA,UAAA,YACA,EAAA,UAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";const e=require(`../paragraph-
|
|
1
|
+
"use client";const e=require(`../paragraph-BLvW7xdo.cjs`);exports.Paragraph=e.Paragraph;
|