eidos-ui 3.8.1 → 4.1.0
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/README.md +21 -11
- package/dist/{SegmentedControl.types-D_gHYL9X.d.cts → SegmentedControl.types-50fprBiO.d.cts} +9 -0
- package/dist/{SegmentedControl.types-CHtjABQM.d.ts → SegmentedControl.types-DKlamnBZ.d.ts} +9 -0
- package/dist/{ThemeProvider.types-DgXN0gEH.d.cts → ThemeProvider.types-CI9P1anY.d.cts} +53 -2
- package/dist/{ThemeProvider.types-DgXN0gEH.d.ts → ThemeProvider.types-CI9P1anY.d.ts} +53 -2
- package/dist/alert/index.cjs +5 -5
- package/dist/alert/index.js +4 -4
- package/dist/button/index.cjs +4 -4
- package/dist/button/index.js +3 -3
- package/dist/chip/index.cjs +4 -4
- package/dist/chip/index.js +3 -3
- package/dist/{chunk-V5CM5TH3.js → chunk-2OBOD3GO.js} +3 -3
- package/dist/{chunk-CFVUUMQA.cjs → chunk-2URFSWJT.cjs} +6 -8
- package/dist/chunk-2URFSWJT.cjs.map +1 -0
- package/dist/{chunk-4S57PE43.js → chunk-2WDL2ZVP.js} +6 -7
- package/dist/chunk-2WDL2ZVP.js.map +1 -0
- package/dist/{chunk-LWCFT5SP.cjs → chunk-3QBMSZSE.cjs} +3 -3
- package/dist/{chunk-LWCFT5SP.cjs.map → chunk-3QBMSZSE.cjs.map} +1 -1
- package/dist/{chunk-IC2PIK3E.js → chunk-43DJ3GGR.js} +4 -4
- package/dist/{chunk-L6ERHCQ2.js → chunk-57BVERWD.js} +3 -3
- package/dist/{chunk-AUNDBUHM.cjs → chunk-5HRVHEHE.cjs} +3 -3
- package/dist/{chunk-AUNDBUHM.cjs.map → chunk-5HRVHEHE.cjs.map} +1 -1
- package/dist/{chunk-6IB27I5K.cjs → chunk-6JYXGRJ3.cjs} +8 -8
- package/dist/{chunk-6IB27I5K.cjs.map → chunk-6JYXGRJ3.cjs.map} +1 -1
- package/dist/{chunk-NERASTO2.cjs → chunk-6ZFXIYH7.cjs} +3 -3
- package/dist/{chunk-NERASTO2.cjs.map → chunk-6ZFXIYH7.cjs.map} +1 -1
- package/dist/{chunk-IKXXXVUO.js → chunk-7TQUJ6BJ.js} +3 -3
- package/dist/{chunk-544RAXWO.cjs → chunk-7VMF6LIC.cjs} +19 -19
- package/dist/{chunk-544RAXWO.cjs.map → chunk-7VMF6LIC.cjs.map} +1 -1
- package/dist/{chunk-WTFEMOV5.cjs → chunk-ADB7QRX5.cjs} +16 -16
- package/dist/{chunk-WTFEMOV5.cjs.map → chunk-ADB7QRX5.cjs.map} +1 -1
- package/dist/{chunk-6CW5QSYV.cjs → chunk-AFGC62AL.cjs} +7 -7
- package/dist/{chunk-6CW5QSYV.cjs.map → chunk-AFGC62AL.cjs.map} +1 -1
- package/dist/{chunk-U4SVBE2M.js → chunk-AWPJH3UB.js} +4 -4
- package/dist/{chunk-V64DICJK.js → chunk-BHZ76J2K.js} +45 -33
- package/dist/chunk-BHZ76J2K.js.map +1 -0
- package/dist/{chunk-B2OHBIAL.cjs → chunk-BKUZF7CW.cjs} +10 -11
- package/dist/chunk-BKUZF7CW.cjs.map +1 -0
- package/dist/{chunk-WR77IZUU.cjs → chunk-BPVOQLCA.cjs} +7 -7
- package/dist/{chunk-WR77IZUU.cjs.map → chunk-BPVOQLCA.cjs.map} +1 -1
- package/dist/{chunk-MCPGI6EI.js → chunk-BUSMGQJ4.js} +2 -2
- package/dist/{chunk-H3C6YECZ.js → chunk-D2PXPX56.js} +6 -6
- package/dist/{chunk-L6YJ6QTZ.js → chunk-DCUIT7SI.js} +2 -2
- package/dist/{chunk-FE7S4RSK.js → chunk-DHOBGYRD.js} +164 -34
- package/dist/chunk-DHOBGYRD.js.map +1 -0
- package/dist/{chunk-JFV56ISS.cjs → chunk-E7BFBU6K.cjs} +45 -33
- package/dist/chunk-E7BFBU6K.cjs.map +1 -0
- package/dist/{chunk-HYRLK462.js → chunk-EDPCI2JC.js} +2 -2
- package/dist/{chunk-Z3IJWYUD.js → chunk-EJWEG66P.js} +226 -42
- package/dist/chunk-EJWEG66P.js.map +1 -0
- package/dist/{chunk-DPTTDHZ5.js → chunk-FAGQGGT3.js} +3 -3
- package/dist/{chunk-CNTG7OOO.js → chunk-FFYPSLQV.js} +12 -12
- package/dist/{chunk-7NUVLVSL.cjs → chunk-FJSK2RT7.cjs} +5 -5
- package/dist/{chunk-7NUVLVSL.cjs.map → chunk-FJSK2RT7.cjs.map} +1 -1
- package/dist/{chunk-P6OJQ2RN.js → chunk-FSX7DDLO.js} +8 -9
- package/dist/chunk-FSX7DDLO.js.map +1 -0
- package/dist/{chunk-XIUZT4TO.js → chunk-GE3QCXT7.js} +6 -7
- package/dist/chunk-GE3QCXT7.js.map +1 -0
- package/dist/{chunk-JY77VJAZ.js → chunk-GHUEVNNU.js} +3 -3
- package/dist/{chunk-4V2XYUQL.js → chunk-GLEPKX2R.js} +2 -2
- package/dist/{chunk-GZDT2AHJ.cjs → chunk-GRKC4PIX.cjs} +7 -7
- package/dist/{chunk-GZDT2AHJ.cjs.map → chunk-GRKC4PIX.cjs.map} +1 -1
- package/dist/{chunk-SLHIVEFW.cjs → chunk-HKLLKNRQ.cjs} +6 -9
- package/dist/chunk-HKLLKNRQ.cjs.map +1 -0
- package/dist/{chunk-2TIMJD4K.js → chunk-IBT535UH.js} +3 -3
- package/dist/{chunk-HR5MWA3B.cjs → chunk-IJW6YCJB.cjs} +5 -5
- package/dist/{chunk-HR5MWA3B.cjs.map → chunk-IJW6YCJB.cjs.map} +1 -1
- package/dist/{chunk-OGGZIFTI.cjs → chunk-JO4NDJRA.cjs} +192 -62
- package/dist/chunk-JO4NDJRA.cjs.map +1 -0
- package/dist/{chunk-NNAEQR3Y.cjs → chunk-K6VEUJLY.cjs} +30 -30
- package/dist/{chunk-NNAEQR3Y.cjs.map → chunk-K6VEUJLY.cjs.map} +1 -1
- package/dist/{chunk-F5IRMMZ2.cjs → chunk-K73JO4FK.cjs} +7 -7
- package/dist/{chunk-F5IRMMZ2.cjs.map → chunk-K73JO4FK.cjs.map} +1 -1
- package/dist/{chunk-4HZIXRAJ.cjs → chunk-KF2OGUAD.cjs} +11 -12
- package/dist/chunk-KF2OGUAD.cjs.map +1 -0
- package/dist/{chunk-TJQNGJHP.js → chunk-KLHC5BHS.js} +4 -4
- package/dist/{chunk-XWMXEJVZ.js → chunk-KZKBZ2AV.js} +5 -7
- package/dist/chunk-KZKBZ2AV.js.map +1 -0
- package/dist/{chunk-DG3O5NV4.cjs → chunk-LLHR6QW3.cjs} +3 -3
- package/dist/{chunk-DG3O5NV4.cjs.map → chunk-LLHR6QW3.cjs.map} +1 -1
- package/dist/{chunk-GDRLVX2A.js → chunk-LXRNFQEI.js} +4 -4
- package/dist/{chunk-VXC7Z7XB.cjs → chunk-MKQVDEHI.cjs} +5 -6
- package/dist/chunk-MKQVDEHI.cjs.map +1 -0
- package/dist/{chunk-TNQ2ZZ7W.cjs → chunk-MUMTPMWD.cjs} +7 -7
- package/dist/{chunk-TNQ2ZZ7W.cjs.map → chunk-MUMTPMWD.cjs.map} +1 -1
- package/dist/{chunk-RHWZX7PB.js → chunk-NONYIHXD.js} +4 -4
- package/dist/{chunk-XPG56DLQ.cjs → chunk-NSA7ASZ7.cjs} +8 -8
- package/dist/{chunk-XPG56DLQ.cjs.map → chunk-NSA7ASZ7.cjs.map} +1 -1
- package/dist/{chunk-6NAOAKII.js → chunk-NWFGXLQP.js} +2 -2
- package/dist/{chunk-H46ZLPNJ.cjs → chunk-O45W57Y4.cjs} +233 -49
- package/dist/chunk-O45W57Y4.cjs.map +1 -0
- package/dist/{chunk-UUT2VEN5.cjs → chunk-OC2OBBGM.cjs} +7 -8
- package/dist/chunk-OC2OBBGM.cjs.map +1 -0
- package/dist/{chunk-3X6QVHTD.js → chunk-OERK3T7E.js} +3 -4
- package/dist/chunk-OERK3T7E.js.map +1 -0
- package/dist/{chunk-ZJWQPZ7E.js → chunk-OQWG7NLI.js} +3 -11
- package/dist/chunk-OQWG7NLI.js.map +1 -0
- package/dist/{chunk-U34INRFO.js → chunk-PP6HS4GR.js} +5 -16
- package/dist/chunk-PP6HS4GR.js.map +1 -0
- package/dist/{chunk-ENMDOQQO.cjs → chunk-R5WI5IGR.cjs} +6 -17
- package/dist/{chunk-ENMDOQQO.cjs.map → chunk-R5WI5IGR.cjs.map} +1 -1
- package/dist/{chunk-UTYY35QX.cjs → chunk-RZMQCVAS.cjs} +3 -3
- package/dist/{chunk-UTYY35QX.cjs.map → chunk-RZMQCVAS.cjs.map} +1 -1
- package/dist/{chunk-7FV2X62W.cjs → chunk-SJKD3WCV.cjs} +7 -7
- package/dist/{chunk-7FV2X62W.cjs.map → chunk-SJKD3WCV.cjs.map} +1 -1
- package/dist/{chunk-LUDK44NZ.cjs → chunk-SJPCBRKR.cjs} +3 -3
- package/dist/{chunk-LUDK44NZ.cjs.map → chunk-SJPCBRKR.cjs.map} +1 -1
- package/dist/{chunk-3TF2GZSG.js → chunk-SONL2RCW.js} +7 -7
- package/dist/{chunk-2IXCEKLI.js → chunk-SOS4K7VC.js} +2 -2
- package/dist/{chunk-WHQGJHMD.js → chunk-TOLNPD7S.js} +4 -4
- package/dist/{chunk-FHOD3FUN.js → chunk-UTOTOWPS.js} +4 -4
- package/dist/{chunk-YIOHKQ6Y.cjs → chunk-VCG647BY.cjs} +5 -13
- package/dist/chunk-VCG647BY.cjs.map +1 -0
- package/dist/{chunk-HLI4SOH3.cjs → chunk-VGMRIXW4.cjs} +45 -45
- package/dist/{chunk-HLI4SOH3.cjs.map → chunk-VGMRIXW4.cjs.map} +1 -1
- package/dist/{chunk-N5NXKVFJ.cjs → chunk-VPN7AR7T.cjs} +10 -10
- package/dist/{chunk-N5NXKVFJ.cjs.map → chunk-VPN7AR7T.cjs.map} +1 -1
- package/dist/{chunk-6FXFKMJ5.js → chunk-XBIMNWE6.js} +3 -3
- package/dist/{chunk-3VXUOAIJ.cjs → chunk-XR72A66Q.cjs} +3 -7
- package/dist/chunk-XR72A66Q.cjs.map +1 -0
- package/dist/{chunk-ULKWUKD2.cjs → chunk-YHSCUPP6.cjs} +22 -23
- package/dist/chunk-YHSCUPP6.cjs.map +1 -0
- package/dist/{chunk-S5CMZFX6.js → chunk-YPEJH57Z.js} +6 -7
- package/dist/chunk-YPEJH57Z.js.map +1 -0
- package/dist/{chunk-BO3KK3ZQ.js → chunk-YPPG7NLW.js} +2 -6
- package/dist/chunk-YPPG7NLW.js.map +1 -0
- package/dist/{chunk-PE2SLXUS.cjs → chunk-YWXS4IPH.cjs} +5 -5
- package/dist/{chunk-PE2SLXUS.cjs.map → chunk-YWXS4IPH.cjs.map} +1 -1
- package/dist/{chunk-UC4NYF6T.js → chunk-YYA5SWXD.js} +2 -2
- package/dist/{chunk-IHPSRTVW.js → chunk-Z3OEYDNI.js} +4 -7
- package/dist/chunk-Z3OEYDNI.js.map +1 -0
- package/dist/{chunk-MKC6V3SY.cjs → chunk-Z6FZ7GI5.cjs} +6 -6
- package/dist/{chunk-MKC6V3SY.cjs.map → chunk-Z6FZ7GI5.cjs.map} +1 -1
- package/dist/{chunk-NFD7MPX4.cjs → chunk-ZVA5KJAJ.cjs} +11 -11
- package/dist/{chunk-NFD7MPX4.cjs.map → chunk-ZVA5KJAJ.cjs.map} +1 -1
- package/dist/color-picker/index.cjs +4 -4
- package/dist/color-picker/index.js +3 -3
- package/dist/combobox/index.cjs +6 -6
- package/dist/combobox/index.js +5 -5
- package/dist/command-palette/index.cjs +3 -3
- package/dist/command-palette/index.js +2 -2
- package/dist/context-menu/index.cjs +6 -6
- package/dist/context-menu/index.js +5 -5
- package/dist/conversation/index.cjs +8 -8
- package/dist/conversation/index.js +7 -7
- package/dist/data-grid/index.cjs +15 -15
- package/dist/data-grid/index.d.cts +1 -1
- package/dist/data-grid/index.d.ts +1 -1
- package/dist/data-grid/index.js +14 -14
- package/dist/date-picker/index.cjs +8 -8
- package/dist/date-picker/index.js +7 -7
- package/dist/drawer/index.cjs +5 -5
- package/dist/drawer/index.js +4 -4
- package/dist/dropdown/index.cjs +3 -3
- package/dist/dropdown/index.js +2 -2
- package/dist/header/index.cjs +6 -6
- package/dist/header/index.js +5 -5
- package/dist/index.cjs +39 -39
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +345 -205
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +40 -40
- package/dist/inline-edit/index.cjs +5 -5
- package/dist/inline-edit/index.js +4 -4
- package/dist/input/index.cjs +4 -4
- package/dist/input/index.js +3 -3
- package/dist/menu/index.cjs +5 -5
- package/dist/menu/index.js +4 -4
- package/dist/modal/index.cjs +5 -5
- package/dist/modal/index.js +4 -4
- package/dist/navigation/index.cjs +5 -5
- package/dist/navigation/index.js +4 -4
- package/dist/number-input/index.cjs +2 -4
- package/dist/number-input/index.cjs.map +1 -1
- package/dist/number-input/index.js +1 -3
- package/dist/page-layout/index.cjs +12 -12
- package/dist/page-layout/index.js +11 -11
- package/dist/pagination/index.cjs +8 -8
- package/dist/pagination/index.js +7 -7
- package/dist/popover/index.cjs +3 -3
- package/dist/popover/index.d.cts +1 -3
- package/dist/popover/index.d.ts +1 -3
- package/dist/popover/index.js +2 -2
- package/dist/segmented-control/index.cjs +4 -4
- package/dist/segmented-control/index.d.cts +2 -2
- package/dist/segmented-control/index.d.ts +2 -2
- package/dist/segmented-control/index.js +3 -3
- package/dist/select/index.cjs +6 -6
- package/dist/select/index.js +5 -5
- package/dist/snackbar/index.cjs +5 -5
- package/dist/snackbar/index.js +4 -4
- package/dist/split-button/index.cjs +6 -6
- package/dist/split-button/index.js +5 -5
- package/dist/split-chip/index.cjs +5 -5
- package/dist/split-chip/index.js +4 -4
- package/dist/table/index.cjs +13 -13
- package/dist/table/index.js +12 -12
- package/dist/tabs/index.cjs +3 -3
- package/dist/tabs/index.js +2 -2
- package/dist/tag-input/index.cjs +6 -6
- package/dist/tag-input/index.js +5 -5
- package/dist/textarea/index.cjs +4 -4
- package/dist/textarea/index.js +3 -3
- package/dist/theme-editor/index.cjs +13 -11
- package/dist/theme-editor/index.cjs.map +1 -1
- package/dist/theme-editor/index.d.cts +1 -1
- package/dist/theme-editor/index.d.ts +1 -1
- package/dist/theme-editor/index.js +12 -10
- package/dist/theme-provider/index.cjs +3 -3
- package/dist/theme-provider/index.d.cts +2 -2
- package/dist/theme-provider/index.d.ts +2 -2
- package/dist/theme-provider/index.js +2 -2
- package/dist/toolbar/index.cjs +8 -8
- package/dist/toolbar/index.js +7 -7
- package/dist/tooltip/index.cjs +3 -3
- package/dist/tooltip/index.js +2 -2
- package/package.json +4 -2
- package/dist/chunk-3VXUOAIJ.cjs.map +0 -1
- package/dist/chunk-3X6QVHTD.js.map +0 -1
- package/dist/chunk-4HZIXRAJ.cjs.map +0 -1
- package/dist/chunk-4S57PE43.js.map +0 -1
- package/dist/chunk-B2OHBIAL.cjs.map +0 -1
- package/dist/chunk-BO3KK3ZQ.js.map +0 -1
- package/dist/chunk-CFVUUMQA.cjs.map +0 -1
- package/dist/chunk-FE7S4RSK.js.map +0 -1
- package/dist/chunk-H46ZLPNJ.cjs.map +0 -1
- package/dist/chunk-IHPSRTVW.js.map +0 -1
- package/dist/chunk-JFV56ISS.cjs.map +0 -1
- package/dist/chunk-OGGZIFTI.cjs.map +0 -1
- package/dist/chunk-P6OJQ2RN.js.map +0 -1
- package/dist/chunk-S5CMZFX6.js.map +0 -1
- package/dist/chunk-SLHIVEFW.cjs.map +0 -1
- package/dist/chunk-U34INRFO.js.map +0 -1
- package/dist/chunk-ULKWUKD2.cjs.map +0 -1
- package/dist/chunk-UUT2VEN5.cjs.map +0 -1
- package/dist/chunk-V64DICJK.js.map +0 -1
- package/dist/chunk-VXC7Z7XB.cjs.map +0 -1
- package/dist/chunk-XIUZT4TO.js.map +0 -1
- package/dist/chunk-XWMXEJVZ.js.map +0 -1
- package/dist/chunk-YIOHKQ6Y.cjs.map +0 -1
- package/dist/chunk-Z3IJWYUD.js.map +0 -1
- package/dist/chunk-ZJWQPZ7E.js.map +0 -1
- /package/dist/{chunk-V5CM5TH3.js.map → chunk-2OBOD3GO.js.map} +0 -0
- /package/dist/{chunk-IC2PIK3E.js.map → chunk-43DJ3GGR.js.map} +0 -0
- /package/dist/{chunk-L6ERHCQ2.js.map → chunk-57BVERWD.js.map} +0 -0
- /package/dist/{chunk-IKXXXVUO.js.map → chunk-7TQUJ6BJ.js.map} +0 -0
- /package/dist/{chunk-U4SVBE2M.js.map → chunk-AWPJH3UB.js.map} +0 -0
- /package/dist/{chunk-MCPGI6EI.js.map → chunk-BUSMGQJ4.js.map} +0 -0
- /package/dist/{chunk-H3C6YECZ.js.map → chunk-D2PXPX56.js.map} +0 -0
- /package/dist/{chunk-L6YJ6QTZ.js.map → chunk-DCUIT7SI.js.map} +0 -0
- /package/dist/{chunk-HYRLK462.js.map → chunk-EDPCI2JC.js.map} +0 -0
- /package/dist/{chunk-DPTTDHZ5.js.map → chunk-FAGQGGT3.js.map} +0 -0
- /package/dist/{chunk-CNTG7OOO.js.map → chunk-FFYPSLQV.js.map} +0 -0
- /package/dist/{chunk-JY77VJAZ.js.map → chunk-GHUEVNNU.js.map} +0 -0
- /package/dist/{chunk-4V2XYUQL.js.map → chunk-GLEPKX2R.js.map} +0 -0
- /package/dist/{chunk-2TIMJD4K.js.map → chunk-IBT535UH.js.map} +0 -0
- /package/dist/{chunk-TJQNGJHP.js.map → chunk-KLHC5BHS.js.map} +0 -0
- /package/dist/{chunk-GDRLVX2A.js.map → chunk-LXRNFQEI.js.map} +0 -0
- /package/dist/{chunk-RHWZX7PB.js.map → chunk-NONYIHXD.js.map} +0 -0
- /package/dist/{chunk-6NAOAKII.js.map → chunk-NWFGXLQP.js.map} +0 -0
- /package/dist/{chunk-3TF2GZSG.js.map → chunk-SONL2RCW.js.map} +0 -0
- /package/dist/{chunk-2IXCEKLI.js.map → chunk-SOS4K7VC.js.map} +0 -0
- /package/dist/{chunk-WHQGJHMD.js.map → chunk-TOLNPD7S.js.map} +0 -0
- /package/dist/{chunk-FHOD3FUN.js.map → chunk-UTOTOWPS.js.map} +0 -0
- /package/dist/{chunk-6FXFKMJ5.js.map → chunk-XBIMNWE6.js.map} +0 -0
- /package/dist/{chunk-UC4NYF6T.js.map → chunk-YYA5SWXD.js.map} +0 -0
package/README.md
CHANGED
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
|
|
20
20
|
## Features
|
|
21
21
|
|
|
22
|
-
| |
|
|
23
|
-
| ------------------- |
|
|
24
|
-
| **Themeable** | Every design token is a CSS custom property. Override them statically, or let users change the palette and typography at runtime with `ThemeProvider`. |
|
|
25
|
-
| **Type-safe** | Written in TypeScript with full prop typings exported for every component.
|
|
26
|
-
| **Tree-shakeable** | Per-component entry points (`eidos-ui/button`, `eidos-ui/table`, ...) keep bundles lean.
|
|
27
|
-
| **Icon-agnostic** | Works with any icon library - Lucide, MUI Icons, Font Awesome, Remix Icons, or your own.
|
|
28
|
-
| **Accessible** | Built with keyboard navigation and ARIA semantics in mind.
|
|
29
|
-
| **Optimized build** | Bundled with tsup, shipping both ESM and CJS with source maps and `.d.ts` files.
|
|
22
|
+
| | |
|
|
23
|
+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
24
|
+
| **Themeable** | Every design token is a CSS custom property. Override them statically, or let users change the palette and typography at runtime with `ThemeProvider`. Light, dark and system colour schemes, AA in both. |
|
|
25
|
+
| **Type-safe** | Written in TypeScript with full prop typings exported for every component. |
|
|
26
|
+
| **Tree-shakeable** | Per-component entry points (`eidos-ui/button`, `eidos-ui/table`, ...) keep bundles lean. |
|
|
27
|
+
| **Icon-agnostic** | Works with any icon library - Lucide, MUI Icons, Font Awesome, Remix Icons, or your own. |
|
|
28
|
+
| **Accessible** | Built with keyboard navigation and ARIA semantics in mind. |
|
|
29
|
+
| **Optimized build** | Bundled with tsup, shipping both ESM and CJS with source maps and `.d.ts` files. |
|
|
30
30
|
|
|
31
31
|
## Installation
|
|
32
32
|
|
|
@@ -82,8 +82,8 @@ registerIcons({ Plus, Download });
|
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
`import 'eidos-ui/lucide-icons'` registers every Lucide icon by name, at the cost of
|
|
85
|
-
the whole icon set in your bundle.
|
|
86
|
-
|
|
85
|
+
the whole icon set in your bundle. An unregistered name is treated as icon-font
|
|
86
|
+
classes.
|
|
87
87
|
|
|
88
88
|
## Components
|
|
89
89
|
|
|
@@ -244,6 +244,16 @@ Individual components can also be targeted directly, following each component's
|
|
|
244
244
|
}
|
|
245
245
|
```
|
|
246
246
|
|
|
247
|
+
### Light and dark
|
|
248
|
+
|
|
249
|
+
Set `data-color-scheme` on `<html>` - `light` (the default), `dark`, or `system` to follow the operating system:
|
|
250
|
+
|
|
251
|
+
```html
|
|
252
|
+
<html data-color-scheme="system"></html>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
Or let `ThemeProvider` manage it with `colorScheme` / `defaultColorScheme`. `system` is a media query, so it needs no JavaScript and cannot flash the wrong scheme on load. Custom colours apply to both schemes: in dark each one is lightened until it reads on the dark page, so a themed app's dark mode stays AA without a second palette. For your own CSS, use `--surface`, `--surface-raised` and `--text-default` - the literals (`--white`, `--dark-color`) keep their values in both schemes.
|
|
256
|
+
|
|
247
257
|
### Runtime theming
|
|
248
258
|
|
|
249
259
|
`ThemeProvider` applies a theme at runtime - for a settings screen, a per-tenant palette, or a colour a user picks. Supply one base colour per family and the shades, tints, ramp steps and accessible foregrounds are derived from it:
|
|
@@ -267,7 +277,7 @@ import { ThemeProvider, ThemeEditor } from 'eidos-ui';
|
|
|
267
277
|
|
|
268
278
|
Ten things are editable - seven colour bases, two font stacks, and a font scale. Tokens are written through the CSSOM to `document.documentElement`, which needs **no Content Security Policy allowance** and covers portaled overlays too. A theme equal to the preset writes nothing at all.
|
|
269
279
|
|
|
270
|
-
Use `useTheme()` to read or change it from your own UI, and `toCss()` to export the resolved tokens
|
|
280
|
+
Use `useTheme()` to read or change it from your own UI (including `setColorScheme`), and `toCss()` to export the resolved tokens - light and dark - as CSS you can paste into a stylesheet, useful for baking a theme in at build time.
|
|
271
281
|
|
|
272
282
|
### Fonts
|
|
273
283
|
|
package/dist/{SegmentedControl.types-D_gHYL9X.d.cts → SegmentedControl.types-50fprBiO.d.cts}
RENAMED
|
@@ -44,6 +44,15 @@ interface SegmentedControlProps {
|
|
|
44
44
|
* Scroll affordance for a track too wide for its container. @default 'auto'
|
|
45
45
|
*/
|
|
46
46
|
scrollButtons?: SegmentedControlScrollButtonsProps;
|
|
47
|
+
/**
|
|
48
|
+
* Accessible name for the group - what the choice is *about* ("Colour
|
|
49
|
+
* scheme"). The segments name the options; without this a screen reader
|
|
50
|
+
* announces an unnamed radio group. Prefer `aria-labelledby` when a
|
|
51
|
+
* visible label already exists.
|
|
52
|
+
*/
|
|
53
|
+
ariaLabel?: string;
|
|
54
|
+
/** Id of a visible element naming the group. */
|
|
55
|
+
'aria-labelledby'?: string;
|
|
47
56
|
className?: string;
|
|
48
57
|
}
|
|
49
58
|
|
|
@@ -44,6 +44,15 @@ interface SegmentedControlProps {
|
|
|
44
44
|
* Scroll affordance for a track too wide for its container. @default 'auto'
|
|
45
45
|
*/
|
|
46
46
|
scrollButtons?: SegmentedControlScrollButtonsProps;
|
|
47
|
+
/**
|
|
48
|
+
* Accessible name for the group - what the choice is *about* ("Colour
|
|
49
|
+
* scheme"). The segments name the options; without this a screen reader
|
|
50
|
+
* announces an unnamed radio group. Prefer `aria-labelledby` when a
|
|
51
|
+
* visible label already exists.
|
|
52
|
+
*/
|
|
53
|
+
ariaLabel?: string;
|
|
54
|
+
/** Id of a visible element naming the group. */
|
|
55
|
+
'aria-labelledby'?: string;
|
|
47
56
|
className?: string;
|
|
48
57
|
}
|
|
49
58
|
|
|
@@ -44,9 +44,31 @@ interface ThemeTypography {
|
|
|
44
44
|
* exported by MUI, styled-components and others in a consumer's namespace.
|
|
45
45
|
*/
|
|
46
46
|
interface ThemeConfig {
|
|
47
|
+
/**
|
|
48
|
+
* The palette, applied to **both** colour schemes. In the dark scheme each
|
|
49
|
+
* colour is tone-shifted automatically - lightened until it clears 5:1
|
|
50
|
+
* against the dark surfaces, with a dark foreground on it - so one brand
|
|
51
|
+
* palette stays accessible in light and dark.
|
|
52
|
+
*/
|
|
47
53
|
colors?: ThemeColors;
|
|
48
54
|
typography?: ThemeTypography;
|
|
55
|
+
/**
|
|
56
|
+
* Exact dark-scheme colours, for a brand that has its own dark palette.
|
|
57
|
+
* Each one replaces the colour derived from `colors` for that family only.
|
|
58
|
+
* A value that falls below 4.5:1 against the dark surfaces is still used,
|
|
59
|
+
* with a development warning - text in that colour will fail AA there.
|
|
60
|
+
*/
|
|
61
|
+
dark?: {
|
|
62
|
+
colors?: ThemeColors;
|
|
63
|
+
};
|
|
49
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* Which colour scheme to use. `system` follows the operating system's
|
|
67
|
+
* `prefers-color-scheme`, and keeps following it as it changes.
|
|
68
|
+
*/
|
|
69
|
+
type ColorScheme = 'light' | 'dark' | 'system';
|
|
70
|
+
/** The scheme actually in effect once `system` is resolved. */
|
|
71
|
+
type ResolvedColorScheme = 'light' | 'dark';
|
|
50
72
|
/** A theme with every field populated - what the provider actually applies. */
|
|
51
73
|
interface ResolvedTheme {
|
|
52
74
|
colors: Record<ThemeColorKey, {
|
|
@@ -54,6 +76,13 @@ interface ResolvedTheme {
|
|
|
54
76
|
contrast?: string;
|
|
55
77
|
}>;
|
|
56
78
|
typography: Required<ThemeTypography>;
|
|
79
|
+
/** The dark-scheme colours: an explicit `dark.colors` entry, or derived from `colors`. */
|
|
80
|
+
dark: {
|
|
81
|
+
colors: Record<ThemeColorKey, {
|
|
82
|
+
base: string;
|
|
83
|
+
contrast?: string;
|
|
84
|
+
}>;
|
|
85
|
+
};
|
|
57
86
|
}
|
|
58
87
|
interface ThemeContextValue {
|
|
59
88
|
/** The theme as supplied, with omitted fields left absent. */
|
|
@@ -68,8 +97,17 @@ interface ThemeContextValue {
|
|
|
68
97
|
resetTheme: () => void;
|
|
69
98
|
/** True when nothing differs from the preset, so no tokens are being written. */
|
|
70
99
|
isDefault: boolean;
|
|
71
|
-
/**
|
|
100
|
+
/**
|
|
101
|
+
* The resolved theme as CSS: a `:root { … }` block for the light scheme and
|
|
102
|
+
* the matching blocks for the dark and `system` schemes.
|
|
103
|
+
*/
|
|
72
104
|
toCss: () => string;
|
|
105
|
+
/** The scheme requested - `light` unless one has been set. */
|
|
106
|
+
colorScheme: ColorScheme;
|
|
107
|
+
/** The scheme in effect, with `system` resolved against the OS setting. */
|
|
108
|
+
resolvedColorScheme: ResolvedColorScheme;
|
|
109
|
+
/** Switches the scheme. In controlled mode this only calls `onColorSchemeChange`. */
|
|
110
|
+
setColorScheme: (scheme: ColorScheme) => void;
|
|
73
111
|
}
|
|
74
112
|
interface ThemeProviderProps {
|
|
75
113
|
children: React__default.ReactNode;
|
|
@@ -83,6 +121,19 @@ interface ThemeProviderProps {
|
|
|
83
121
|
defaultTheme?: ThemeConfig;
|
|
84
122
|
/** Fires whenever the theme changes, in both controlled and uncontrolled mode. */
|
|
85
123
|
onThemeChange?: (theme: ThemeConfig) => void;
|
|
124
|
+
/**
|
|
125
|
+
* Controlled colour scheme, written to `<html data-color-scheme>`. Pair with
|
|
126
|
+
* `onColorSchemeChange` and persist it yourself.
|
|
127
|
+
*
|
|
128
|
+
* Leave both this and `defaultColorScheme` unset to have the provider leave
|
|
129
|
+
* the attribute alone - for an app that server-renders it to avoid a flash
|
|
130
|
+
* of the wrong scheme. The provider then reads the scheme from the page.
|
|
131
|
+
*/
|
|
132
|
+
colorScheme?: ColorScheme;
|
|
133
|
+
/** Initial scheme for uncontrolled usage. Ignored when `colorScheme` is supplied. */
|
|
134
|
+
defaultColorScheme?: ColorScheme;
|
|
135
|
+
/** Fires whenever the scheme is changed through `setColorScheme`. */
|
|
136
|
+
onColorSchemeChange?: (scheme: ColorScheme) => void;
|
|
86
137
|
}
|
|
87
138
|
|
|
88
|
-
export type {
|
|
139
|
+
export type { ColorScheme as C, ResolvedColorScheme as R, ThemeColorKey as T, ResolvedTheme as a, ThemeColorValue as b, ThemeColors as c, ThemeConfig as d, ThemeContextValue as e, ThemeFontOption as f, ThemeProviderProps as g, ThemeTypography as h };
|
|
@@ -44,9 +44,31 @@ interface ThemeTypography {
|
|
|
44
44
|
* exported by MUI, styled-components and others in a consumer's namespace.
|
|
45
45
|
*/
|
|
46
46
|
interface ThemeConfig {
|
|
47
|
+
/**
|
|
48
|
+
* The palette, applied to **both** colour schemes. In the dark scheme each
|
|
49
|
+
* colour is tone-shifted automatically - lightened until it clears 5:1
|
|
50
|
+
* against the dark surfaces, with a dark foreground on it - so one brand
|
|
51
|
+
* palette stays accessible in light and dark.
|
|
52
|
+
*/
|
|
47
53
|
colors?: ThemeColors;
|
|
48
54
|
typography?: ThemeTypography;
|
|
55
|
+
/**
|
|
56
|
+
* Exact dark-scheme colours, for a brand that has its own dark palette.
|
|
57
|
+
* Each one replaces the colour derived from `colors` for that family only.
|
|
58
|
+
* A value that falls below 4.5:1 against the dark surfaces is still used,
|
|
59
|
+
* with a development warning - text in that colour will fail AA there.
|
|
60
|
+
*/
|
|
61
|
+
dark?: {
|
|
62
|
+
colors?: ThemeColors;
|
|
63
|
+
};
|
|
49
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* Which colour scheme to use. `system` follows the operating system's
|
|
67
|
+
* `prefers-color-scheme`, and keeps following it as it changes.
|
|
68
|
+
*/
|
|
69
|
+
type ColorScheme = 'light' | 'dark' | 'system';
|
|
70
|
+
/** The scheme actually in effect once `system` is resolved. */
|
|
71
|
+
type ResolvedColorScheme = 'light' | 'dark';
|
|
50
72
|
/** A theme with every field populated - what the provider actually applies. */
|
|
51
73
|
interface ResolvedTheme {
|
|
52
74
|
colors: Record<ThemeColorKey, {
|
|
@@ -54,6 +76,13 @@ interface ResolvedTheme {
|
|
|
54
76
|
contrast?: string;
|
|
55
77
|
}>;
|
|
56
78
|
typography: Required<ThemeTypography>;
|
|
79
|
+
/** The dark-scheme colours: an explicit `dark.colors` entry, or derived from `colors`. */
|
|
80
|
+
dark: {
|
|
81
|
+
colors: Record<ThemeColorKey, {
|
|
82
|
+
base: string;
|
|
83
|
+
contrast?: string;
|
|
84
|
+
}>;
|
|
85
|
+
};
|
|
57
86
|
}
|
|
58
87
|
interface ThemeContextValue {
|
|
59
88
|
/** The theme as supplied, with omitted fields left absent. */
|
|
@@ -68,8 +97,17 @@ interface ThemeContextValue {
|
|
|
68
97
|
resetTheme: () => void;
|
|
69
98
|
/** True when nothing differs from the preset, so no tokens are being written. */
|
|
70
99
|
isDefault: boolean;
|
|
71
|
-
/**
|
|
100
|
+
/**
|
|
101
|
+
* The resolved theme as CSS: a `:root { … }` block for the light scheme and
|
|
102
|
+
* the matching blocks for the dark and `system` schemes.
|
|
103
|
+
*/
|
|
72
104
|
toCss: () => string;
|
|
105
|
+
/** The scheme requested - `light` unless one has been set. */
|
|
106
|
+
colorScheme: ColorScheme;
|
|
107
|
+
/** The scheme in effect, with `system` resolved against the OS setting. */
|
|
108
|
+
resolvedColorScheme: ResolvedColorScheme;
|
|
109
|
+
/** Switches the scheme. In controlled mode this only calls `onColorSchemeChange`. */
|
|
110
|
+
setColorScheme: (scheme: ColorScheme) => void;
|
|
73
111
|
}
|
|
74
112
|
interface ThemeProviderProps {
|
|
75
113
|
children: React__default.ReactNode;
|
|
@@ -83,6 +121,19 @@ interface ThemeProviderProps {
|
|
|
83
121
|
defaultTheme?: ThemeConfig;
|
|
84
122
|
/** Fires whenever the theme changes, in both controlled and uncontrolled mode. */
|
|
85
123
|
onThemeChange?: (theme: ThemeConfig) => void;
|
|
124
|
+
/**
|
|
125
|
+
* Controlled colour scheme, written to `<html data-color-scheme>`. Pair with
|
|
126
|
+
* `onColorSchemeChange` and persist it yourself.
|
|
127
|
+
*
|
|
128
|
+
* Leave both this and `defaultColorScheme` unset to have the provider leave
|
|
129
|
+
* the attribute alone - for an app that server-renders it to avoid a flash
|
|
130
|
+
* of the wrong scheme. The provider then reads the scheme from the page.
|
|
131
|
+
*/
|
|
132
|
+
colorScheme?: ColorScheme;
|
|
133
|
+
/** Initial scheme for uncontrolled usage. Ignored when `colorScheme` is supplied. */
|
|
134
|
+
defaultColorScheme?: ColorScheme;
|
|
135
|
+
/** Fires whenever the scheme is changed through `setColorScheme`. */
|
|
136
|
+
onColorSchemeChange?: (scheme: ColorScheme) => void;
|
|
86
137
|
}
|
|
87
138
|
|
|
88
|
-
export type {
|
|
139
|
+
export type { ColorScheme as C, ResolvedColorScheme as R, ThemeColorKey as T, ResolvedTheme as a, ThemeColorValue as b, ThemeColors as c, ThemeConfig as d, ThemeContextValue as e, ThemeFontOption as f, ThemeProviderProps as g, ThemeTypography as h };
|
package/dist/alert/index.cjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
require('../chunk-
|
|
3
|
+
var _chunkYWXS4IPHcjs = require('../chunk-YWXS4IPH.cjs');
|
|
4
|
+
require('../chunk-NSA7ASZ7.cjs');
|
|
5
5
|
require('../chunk-I6UOIS4J.cjs');
|
|
6
|
-
require('../chunk-
|
|
7
|
-
require('../chunk-
|
|
6
|
+
require('../chunk-RZMQCVAS.cjs');
|
|
7
|
+
require('../chunk-R5WI5IGR.cjs');
|
|
8
8
|
require('../chunk-CJT7L764.cjs');
|
|
9
9
|
require('../chunk-KXDGW6LJ.cjs');
|
|
10
10
|
require('../chunk-75Q5OS7L.cjs');
|
|
11
11
|
require('../chunk-DZUJEN5N.cjs');
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
exports.Alert =
|
|
14
|
+
exports.Alert = _chunkYWXS4IPHcjs.Alert;
|
|
15
15
|
//# sourceMappingURL=index.cjs.map
|
package/dist/alert/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Alert
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-
|
|
3
|
+
} from "../chunk-XBIMNWE6.js";
|
|
4
|
+
import "../chunk-GHUEVNNU.js";
|
|
5
5
|
import "../chunk-66R54X6R.js";
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-BUSMGQJ4.js";
|
|
7
|
+
import "../chunk-PP6HS4GR.js";
|
|
8
8
|
import "../chunk-V3T7RO4F.js";
|
|
9
9
|
import "../chunk-BDH2MXJW.js";
|
|
10
10
|
import "../chunk-U32K2H3N.js";
|
package/dist/button/index.cjs
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _chunkNSA7ASZ7cjs = require('../chunk-NSA7ASZ7.cjs');
|
|
6
6
|
require('../chunk-I6UOIS4J.cjs');
|
|
7
|
-
require('../chunk-
|
|
8
|
-
require('../chunk-
|
|
7
|
+
require('../chunk-RZMQCVAS.cjs');
|
|
8
|
+
require('../chunk-R5WI5IGR.cjs');
|
|
9
9
|
require('../chunk-CJT7L764.cjs');
|
|
10
10
|
require('../chunk-KXDGW6LJ.cjs');
|
|
11
11
|
require('../chunk-75Q5OS7L.cjs');
|
|
@@ -13,5 +13,5 @@ require('../chunk-DZUJEN5N.cjs');
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
exports.Button =
|
|
16
|
+
exports.Button = _chunkNSA7ASZ7cjs.Button; exports.IconButton = _chunkNSA7ASZ7cjs.IconButton;
|
|
17
17
|
//# sourceMappingURL=index.cjs.map
|
package/dist/button/index.js
CHANGED
|
@@ -2,10 +2,10 @@ import "../chunk-N5JDL4VE.js";
|
|
|
2
2
|
import {
|
|
3
3
|
Button,
|
|
4
4
|
IconButton
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-GHUEVNNU.js";
|
|
6
6
|
import "../chunk-66R54X6R.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-BUSMGQJ4.js";
|
|
8
|
+
import "../chunk-PP6HS4GR.js";
|
|
9
9
|
import "../chunk-V3T7RO4F.js";
|
|
10
10
|
import "../chunk-BDH2MXJW.js";
|
|
11
11
|
import "../chunk-U32K2H3N.js";
|
package/dist/chip/index.cjs
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-FQZ6F7FQ.cjs');
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
require('../chunk-
|
|
6
|
-
require('../chunk-
|
|
4
|
+
var _chunkBPVOQLCAcjs = require('../chunk-BPVOQLCA.cjs');
|
|
5
|
+
require('../chunk-RZMQCVAS.cjs');
|
|
6
|
+
require('../chunk-R5WI5IGR.cjs');
|
|
7
7
|
require('../chunk-CJT7L764.cjs');
|
|
8
8
|
require('../chunk-KXDGW6LJ.cjs');
|
|
9
9
|
require('../chunk-75Q5OS7L.cjs');
|
|
10
10
|
require('../chunk-DZUJEN5N.cjs');
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
exports.Chip =
|
|
13
|
+
exports.Chip = _chunkBPVOQLCAcjs.Chip;
|
|
14
14
|
//# sourceMappingURL=index.cjs.map
|
package/dist/chip/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import "../chunk-TPNCV7KA.js";
|
|
2
2
|
import {
|
|
3
3
|
Chip
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
6
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-IBT535UH.js";
|
|
5
|
+
import "../chunk-BUSMGQJ4.js";
|
|
6
|
+
import "../chunk-PP6HS4GR.js";
|
|
7
7
|
import "../chunk-V3T7RO4F.js";
|
|
8
8
|
import "../chunk-BDH2MXJW.js";
|
|
9
9
|
import "../chunk-U32K2H3N.js";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Button
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-GHUEVNNU.js";
|
|
4
4
|
import {
|
|
5
5
|
renderIcon,
|
|
6
6
|
useDialogFocus,
|
|
7
7
|
useIsClient
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-PP6HS4GR.js";
|
|
9
9
|
|
|
10
10
|
// src/components/Modal/Modal.component.tsx
|
|
11
11
|
import { useEffect, useCallback, useId, useRef, useState } from "react";
|
|
@@ -120,4 +120,4 @@ Modal.displayName = "Modal";
|
|
|
120
120
|
export {
|
|
121
121
|
Modal
|
|
122
122
|
};
|
|
123
|
-
//# sourceMappingURL=chunk-
|
|
123
|
+
//# sourceMappingURL=chunk-2OBOD3GO.js.map
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var _chunkENMDOQQOcjs = require('./chunk-ENMDOQQO.cjs');
|
|
3
|
+
var _chunkR5WI5IGRcjs = require('./chunk-R5WI5IGR.cjs');
|
|
6
4
|
|
|
7
5
|
// src/components/Tabs/Tabs.component.tsx
|
|
8
6
|
var _react = require('react'); var _react2 = _interopRequireDefault(_react);
|
|
@@ -47,7 +45,7 @@ var Tab = ({
|
|
|
47
45
|
`eidos-tab--${size}`,
|
|
48
46
|
isActive && "eidos-tab--active",
|
|
49
47
|
disabled && "eidos-tab--disabled",
|
|
50
|
-
fullWidth &&
|
|
48
|
+
fullWidth && "eidos-tab--full-width",
|
|
51
49
|
className
|
|
52
50
|
].filter(Boolean).join(" ");
|
|
53
51
|
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
@@ -64,7 +62,7 @@ var Tab = ({
|
|
|
64
62
|
onKeyDown: handleKeyDown,
|
|
65
63
|
type: "button",
|
|
66
64
|
children: [
|
|
67
|
-
icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-tab-icon", children:
|
|
65
|
+
icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-tab-icon", children: _chunkR5WI5IGRcjs.renderIcon.call(void 0, icon, "eidos-tab-icon-svg") }),
|
|
68
66
|
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-tab-label", children })
|
|
69
67
|
]
|
|
70
68
|
}
|
|
@@ -188,11 +186,11 @@ var Tabs = ({
|
|
|
188
186
|
const listClasses = [
|
|
189
187
|
"eidos-tabs-list",
|
|
190
188
|
`eidos-tabs-list--${size}`,
|
|
191
|
-
fullWidth &&
|
|
189
|
+
fullWidth && "eidos-tabs-list--full-width",
|
|
192
190
|
// With buttons, they are the affordance - a native scrollbar underneath
|
|
193
191
|
// them is redundant, and on a space-taking one it would also sit over the
|
|
194
192
|
// `line` variant's rule.
|
|
195
|
-
hasScrollButtons &&
|
|
193
|
+
hasScrollButtons && "eidos-tabs-list--hide-scrollbar"
|
|
196
194
|
].filter(Boolean).join(" ");
|
|
197
195
|
const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;
|
|
198
196
|
const showNextButton = hasScrollButtons && scrollState.canScrollNext;
|
|
@@ -251,4 +249,4 @@ Tabs.displayName = "Tabs";
|
|
|
251
249
|
|
|
252
250
|
|
|
253
251
|
exports.Tab = Tab; exports.TabPanel = TabPanel; exports.Tabs = Tabs;
|
|
254
|
-
//# sourceMappingURL=chunk-
|
|
252
|
+
//# sourceMappingURL=chunk-2URFSWJT.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-2URFSWJT.cjs","../src/components/Tabs/Tabs.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-2URFSWJT.cjs","sourcesContent":[null,"import React, { useState, useRef, useContext, useEffect, useLayoutEffect } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { renderIcon } from '../../utils';\nimport type { TabsProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = (): TabsContextValue => {\n const ctx = useContext(TabsContext);\n if (!ctx) throw new Error('Tab/TabPanel must be used inside <Tabs>');\n return ctx;\n};\n\n// ============================================================================\n// TAB - individual tab trigger button\n// Defined before Tabs so Tabs can use `child.type === Tab` for child separation.\n// ============================================================================\n\nexport const Tab: React.FC<TabProps> = ({\n value,\n children,\n disabled = false,\n icon,\n className = '',\n}) => {\n const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();\n const isActive = activeValue === value;\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n const list = listRef.current;\n if (!list) return;\n\n const allTabs = Array.from(\n list.querySelectorAll('[role=\"tab\"]:not([disabled])'),\n ) as HTMLElement[];\n const currentIndex = allTabs.indexOf(e.currentTarget);\n if (currentIndex === -1) return;\n\n let targetIndex = -1;\n if (e.key === 'ArrowRight') targetIndex = (currentIndex + 1) % allTabs.length;\n else if (e.key === 'ArrowLeft')\n targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;\n else if (e.key === 'Home') targetIndex = 0;\n else if (e.key === 'End') targetIndex = allTabs.length - 1;\n\n if (targetIndex !== -1) {\n e.preventDefault();\n allTabs[targetIndex].focus();\n }\n };\n\n const tabClasses = [\n 'eidos-tab',\n `eidos-tab--${size}`,\n isActive && 'eidos-tab--active',\n disabled && 'eidos-tab--disabled',\n fullWidth && 'eidos-tab--full-width',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n id={`eidos-tab-${value}`}\n role=\"tab\"\n aria-selected={isActive}\n aria-controls={`eidos-tabpanel-${value}`}\n tabIndex={isActive ? 0 : -1}\n disabled={disabled}\n className={tabClasses}\n onClick={() => !disabled && onSelect(value)}\n onKeyDown={handleKeyDown}\n type=\"button\"\n >\n {icon && <span className=\"eidos-tab-icon\">{renderIcon(icon, 'eidos-tab-icon-svg')}</span>}\n <span className=\"eidos-tab-label\">{children}</span>\n </button>\n );\n};\n\nTab.displayName = 'Tab';\n\n// ============================================================================\n// TAB PANEL - content region shown when its value matches the active tab\n// Defined before Tabs for the same `child.type === TabPanel` check.\n// ============================================================================\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ value, children, className = '' }) => {\n const { activeValue } = useTabsContext();\n const isActive = activeValue === value;\n\n if (!isActive) return null;\n\n return (\n <div\n id={`eidos-tabpanel-${value}`}\n role=\"tabpanel\"\n aria-labelledby={`eidos-tab-${value}`}\n tabIndex={0}\n className={['eidos-tab-panel', className].filter(Boolean).join(' ')}\n >\n {children}\n </div>\n );\n};\n\nTabPanel.displayName = 'TabPanel';\n\n// ============================================================================\n// TABS - root container; provides context, separates tab/panel children\n// ============================================================================\n\nexport const Tabs: React.FC<TabsProps> = ({\n value,\n defaultValue,\n onChange,\n variant = 'line',\n size = 'md',\n color = 'primary',\n fullWidth = false,\n scrollButtons = 'auto',\n className = '',\n children,\n}) => {\n const isControlled = value !== undefined;\n const [localValue, setLocalValue] = useState(defaultValue ?? '');\n const activeValue = isControlled ? value! : localValue;\n\n // Separate Tab and TabPanel children so the list and panels render in\n // distinct DOM regions, regardless of how the consumer orders them.\n const tabChildren: React.ReactElement[] = [];\n const panelChildren: React.ReactElement[] = [];\n\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type === Tab) {\n tabChildren.push(child);\n } else if (child.type === TabPanel) {\n panelChildren.push(child);\n }\n });\n\n const listRef = useRef<HTMLDivElement>(null);\n const indicatorRef = useRef<HTMLSpanElement>(null);\n // Tracks whether the indicator has been positioned at least once so we can\n // skip the CSS transition on the very first render and avoid it animating\n // from the top-left corner to the initial tab.\n const hasPositioned = useRef(false);\n\n useLayoutEffect(() => {\n if (variant !== 'line') return;\n const list = listRef.current;\n const indicator = indicatorRef.current;\n if (!list || !indicator) return;\n\n const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n if (!activeTab) return;\n\n // Suppress the CSS transition on the initial paint so the indicator snaps\n // into place rather than sliding from 0.\n if (!hasPositioned.current) {\n indicator.style.transition = 'none';\n }\n\n indicator.style.left = `${activeTab.offsetLeft}px`;\n indicator.style.width = `${activeTab.offsetWidth}px`;\n\n if (!hasPositioned.current) {\n // Force a synchronous reflow so the browser commits the no-transition\n // position before we re-enable the transition for future clicks.\n void indicator.offsetWidth;\n indicator.style.transition = '';\n hasPositioned.current = true;\n }\n }, [activeValue, variant, fullWidth]);\n\n // The list scrolls horizontally when the strip is wider than its container,\n // so an activated tab can sit outside the scrollport - reachable by keyboard\n // (`End`) or by a controlled `value` change, but invisible. `scrollLeft` is\n // adjusted directly rather than via `scrollIntoView`, which walks the whole\n // ancestor chain and would scroll the page vertically when the strip is below\n // the fold.\n useLayoutEffect(() => {\n const list = listRef.current;\n if (!list) return;\n\n const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n if (!activeTab) return;\n\n const left = activeTab.offsetLeft;\n const right = left + activeTab.offsetWidth;\n\n if (left < list.scrollLeft) {\n list.scrollLeft = left;\n } else if (right > list.scrollLeft + list.clientWidth) {\n list.scrollLeft = right - list.clientWidth;\n }\n }, [activeValue]);\n\n // Whether either end of the strip has content hidden past it. Drives both\n // the presence of the scroll buttons (neither end scrollable = the strip\n // fits, so no buttons) and their disabled state at the extremes.\n const [scrollState, setScrollState] = useState({ canScrollPrev: false, canScrollNext: false });\n const hasScrollButtons = scrollButtons !== 'none';\n\n useEffect(() => {\n if (!hasScrollButtons) return;\n const list = listRef.current;\n if (!list) return;\n\n const update = () => {\n const maxScroll = list.scrollWidth - list.clientWidth;\n // 1px of tolerance: fractional layout widths leave a sub-pixel remainder\n // at either end that would otherwise keep a button enabled for a scroll\n // that can no longer move anything.\n const canScrollPrev = list.scrollLeft > 1;\n const canScrollNext = list.scrollLeft < maxScroll - 1;\n setScrollState((previous) =>\n previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext\n ? previous\n : { canScrollPrev, canScrollNext },\n );\n };\n\n update();\n list.addEventListener('scroll', update, { passive: true });\n\n // The list's own box stays the same width when a tab's label reflows or a\n // font finishes loading, so the tabs have to be observed as well as the\n // container - only their sizes tell us the strip started overflowing.\n const observer = new ResizeObserver(update);\n observer.observe(list);\n Array.from(list.children).forEach((child) => observer.observe(child));\n\n return () => {\n list.removeEventListener('scroll', update);\n observer.disconnect();\n };\n }, [hasScrollButtons, tabChildren.length, size, variant, fullWidth]);\n\n const scrollByStep = (direction: -1 | 1) => {\n const list = listRef.current;\n if (!list) return;\n\n // A step just short of a full page keeps a tab of context on screen, the\n // same way a paged scrollbar click does.\n const step = list.clientWidth * 0.8;\n const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n list.scrollBy({ left: direction * step, behavior: reducedMotion ? 'auto' : 'smooth' });\n };\n\n const onSelect = (newValue: string) => {\n if (!isControlled) {\n setLocalValue(newValue);\n }\n onChange?.(newValue);\n };\n\n const rootClasses = ['eidos-tabs', `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className]\n .filter(Boolean)\n .join(' ');\n\n const listClasses = [\n 'eidos-tabs-list',\n `eidos-tabs-list--${size}`,\n fullWidth && 'eidos-tabs-list--full-width',\n // With buttons, they are the affordance - a native scrollbar underneath\n // them is redundant, and on a space-taking one it would also sit over the\n // `line` variant's rule.\n hasScrollButtons && 'eidos-tabs-list--hide-scrollbar',\n ]\n .filter(Boolean)\n .join(' ');\n\n // Each button exists only while its own direction has somewhere to go: none\n // at all when the strip fits, and none at the end you have reached. A\n // disabled button would be pointing at nothing. They are positioned\n // absolutely, so appearing and disappearing never moves the tabs.\n const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;\n const showNextButton = hasScrollButtons && scrollState.canScrollNext;\n\n const scrollButtonClasses = (direction: 'prev' | 'next') =>\n [\n 'eidos-tabs-scroll-button',\n `eidos-tabs-scroll-button--${direction}`,\n `eidos-tabs-scroll-button--${size}`,\n ].join(' ');\n\n const contextValue: TabsContextValue = {\n activeValue,\n onSelect,\n variant,\n size,\n color,\n fullWidth,\n listRef,\n };\n\n return (\n <TabsContext.Provider value={contextValue}>\n <div className={rootClasses}>\n {/* The buttons are siblings of the tab list, never children of it:\n `role=\"tablist\"` only accepts tabs. They are also hidden from\n assistive tech and skipped by Tab, because they are a pointer\n affordance for something the keyboard already does - arrow keys\n move between tabs and scroll the active one into view. */}\n <div className=\"eidos-tabs-bar\">\n {showPrevButton && (\n <button\n type=\"button\"\n className={scrollButtonClasses('prev')}\n onClick={() => scrollByStep(-1)}\n // `tabIndex={-1}` keeps these out of the tab order but does not\n // stop a click from focusing them, and focus inside an\n // `aria-hidden` subtree is an error the browser reports\n // (\"Blocked aria-hidden on an element because its descendant\n // retained focus\"). Suppressing the default mousedown keeps\n // them unfocusable by pointer too; the click still fires.\n // `inert` would prevent the click as well, so it is no help.\n onMouseDown={(event) => event.preventDefault()}\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <ChevronLeft className=\"eidos-tabs-scroll-button-icon\" />\n </button>\n )}\n\n <div ref={listRef} className={listClasses} role=\"tablist\">\n {tabChildren}\n {variant === 'line' && (\n <span ref={indicatorRef} className=\"eidos-tabs-indicator\" aria-hidden=\"true\" />\n )}\n </div>\n\n {showNextButton && (\n <button\n type=\"button\"\n className={scrollButtonClasses('next')}\n onClick={() => scrollByStep(1)}\n onMouseDown={(event) => event.preventDefault()} // see the prev button\n tabIndex={-1}\n aria-hidden=\"true\"\n >\n <ChevronRight className=\"eidos-tabs-scroll-button-icon\" />\n </button>\n )}\n </div>\n\n <div className=\"eidos-tabs-panels\">{panelChildren}</div>\n </div>\n </TabsContext.Provider>\n );\n};\n\nTabs.displayName = 'Tabs';\n"]}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Input
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-GE3QCXT7.js";
|
|
4
4
|
import {
|
|
5
5
|
Dropdown
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-OERK3T7E.js";
|
|
7
7
|
import {
|
|
8
8
|
devWarn,
|
|
9
|
-
fullWidthModifier,
|
|
10
9
|
renderIcon
|
|
11
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-PP6HS4GR.js";
|
|
12
11
|
|
|
13
12
|
// src/components/Select/Select.component.tsx
|
|
14
13
|
import React, { useState, useCallback, useRef, useEffect, useMemo } from "react";
|
|
@@ -292,7 +291,7 @@ var Select = React.forwardRef(
|
|
|
292
291
|
"div",
|
|
293
292
|
{
|
|
294
293
|
ref: triggerRef,
|
|
295
|
-
className: `eidos-select-trigger ${fullWidth ?
|
|
294
|
+
className: `eidos-select-trigger ${fullWidth ? "eidos-select-trigger--full-width" : ""}`,
|
|
296
295
|
onKeyDown: handleKeyDown,
|
|
297
296
|
tabIndex: disabled ? -1 : void 0,
|
|
298
297
|
role: "combobox",
|
|
@@ -327,7 +326,7 @@ var Select = React.forwardRef(
|
|
|
327
326
|
"div",
|
|
328
327
|
{
|
|
329
328
|
ref,
|
|
330
|
-
className: `${"eidos-select-container"} ${fullWidth ?
|
|
329
|
+
className: `${"eidos-select-container"} ${fullWidth ? "eidos-select-container--full-width" : ""} ${className}`,
|
|
331
330
|
children: /* @__PURE__ */ jsx(
|
|
332
331
|
Dropdown,
|
|
333
332
|
{
|
|
@@ -354,4 +353,4 @@ Select.displayName = "Select";
|
|
|
354
353
|
export {
|
|
355
354
|
Select
|
|
356
355
|
};
|
|
357
|
-
//# sourceMappingURL=chunk-
|
|
356
|
+
//# sourceMappingURL=chunk-2WDL2ZVP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Select/Select.component.tsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';\nimport { X, Check } from 'lucide-react';\nimport { Input } from '../Input/Input.component';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type { SelectProps, SelectOption } from './Select.types';\nimport { renderIcon, devWarn } from '../../utils';\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n value,\n defaultValue,\n onChange,\n className = '',\n multiple = false,\n label,\n placeholder = 'Select an option...',\n disabled = false,\n inputProps = {},\n name,\n id,\n required = false,\n fullWidth = false,\n minWidth,\n maxWidth,\n minHeight,\n maxHeight = '300px',\n autoWidth = true,\n clearable = true,\n autoOpen = false,\n dropdownProps = {},\n },\n ref,\n ) => {\n const isControlled = value !== undefined;\n\n // Lazy initializer: seed from defaultValue in uncontrolled mode.\n const [selectedValues, setSelectedValues] = useState<Set<string>>(() => {\n if (defaultValue !== undefined) {\n const vals = Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n return new Set(vals.filter((v) => v !== ''));\n }\n return new Set();\n });\n\n const [focusedIndex, setFocusedIndex] = useState(-1);\n // `Select` owns the open state and hands it to `Dropdown` as a controlled\n // value. It used to keep this flag *and* force the dropdown closed by\n // remounting it through a changing `key`, because `Dropdown`'s own state was\n // private - which meant this flag drove the ARIA attributes while reaching\n // nothing that renders, so the keyboard could not open the listbox at all.\n const [isOpen, setIsOpen] = useState(autoOpen);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useRef<HTMLDivElement>(null);\n const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n // Kept in sync every render so the mount-only callback ref below can\n // read the latest values without needing them in its dependency array\n // (see `handleOptionsMount`).\n const optionsRef = useRef(options);\n optionsRef.current = options;\n const selectedValuesRef = useRef(selectedValues);\n selectedValuesRef.current = selectedValues;\n\n useEffect(() => {\n if (value !== undefined) {\n const values = Array.isArray(value) ? value : [value];\n\n const validValues = values.filter((v) => v !== '');\n setSelectedValues(new Set(validValues));\n }\n }, [value]);\n\n useEffect(() => {\n setFocusedIndex(-1);\n }, [options]);\n\n useEffect(() => {\n optionRefs.current = optionRefs.current.slice(0, options.length);\n }, [options.length]);\n\n const handleOptionSelect = useCallback(\n (option: SelectOption) => {\n if (option.disabled) return;\n\n const newSelectedValues = new Set(selectedValues);\n\n if (multiple) {\n if (newSelectedValues.has(option.value)) {\n newSelectedValues.delete(option.value);\n } else {\n newSelectedValues.add(option.value);\n }\n } else {\n if (newSelectedValues.has(option.value)) {\n newSelectedValues.clear();\n } else {\n newSelectedValues.clear();\n newSelectedValues.add(option.value);\n }\n }\n\n // In uncontrolled mode, own the state directly.\n // In controlled mode, let the parent drive via value prop + useEffect sync.\n if (!isControlled) {\n setSelectedValues(newSelectedValues);\n }\n\n if (onChange) {\n const newValue = multiple\n ? Array.from(newSelectedValues)\n : Array.from(newSelectedValues)[0] || '';\n onChange(newValue);\n }\n\n if (!multiple) {\n setIsOpen(false);\n // Focus is returned explicitly because a click lands on an option\n // `div`, which is not focusable - without this, choosing with the\n // mouse would leave focus on `<body>` and the field would be\n // unreachable by keyboard until tabbed to again.\n inputRef.current?.focus();\n }\n },\n [multiple, onChange, selectedValues, isControlled],\n );\n\n const handleClear = useCallback(\n (e?: React.MouseEvent) => {\n if (e) {\n e.stopPropagation();\n }\n if (!isControlled) {\n setSelectedValues(new Set());\n }\n\n setIsOpen(false);\n inputRef.current?.focus();\n if (onChange) {\n onChange(multiple ? [] : '');\n }\n },\n [multiple, onChange, isControlled],\n );\n\n // A form control with no accessible name is announced as just \"combobox\".\n // `Select` was the only field in the library that could not be labelled\n // without knowing about `inputProps`, and three call sites duly shipped\n // without one - so the gap is closed from both ends: a first-class `label`\n // prop, and this warning.\n //\n // Measured from the DOM rather than from props, because a caller may name\n // the field with an external `<label for>` - `Pagination`'s page-size\n // picker does exactly that, and a props-only check would cry wolf at it.\n // `HTMLInputElement.labels` covers both wrapping and `for` labels.\n useEffect(() => {\n const element = inputRef.current;\n if (!element) return;\n const named =\n (element.labels?.length ?? 0) > 0 ||\n element.hasAttribute('aria-label') ||\n element.hasAttribute('aria-labelledby');\n if (!named) {\n devWarn(\n 'select-missing-label',\n 'Select: no accessible name. Pass `label` for a visible one, or `inputProps={{ \"aria-label\": \"...\" }}` where it must stay visually unlabelled - otherwise the field is announced as just \"combobox\". A placeholder is not a label, and disappears as soon as something is chosen.',\n );\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (disabled) return;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setFocusedIndex(0);\n } else {\n setFocusedIndex((prev) => {\n const nextIndex = prev < options.length - 1 ? prev + 1 : 0;\n\n setTimeout(() => {\n optionRefs.current[nextIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }, 0);\n return nextIndex;\n });\n }\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setFocusedIndex(options.length - 1);\n } else {\n setFocusedIndex((prev) => {\n const nextIndex = prev > 0 ? prev - 1 : options.length - 1;\n\n setTimeout(() => {\n optionRefs.current[nextIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }, 0);\n return nextIndex;\n });\n }\n break;\n\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (!isOpen) {\n setIsOpen(true);\n setFocusedIndex(0);\n } else if (focusedIndex >= 0 && focusedIndex < options.length) {\n const focusedOption = options[focusedIndex];\n handleOptionSelect(focusedOption);\n }\n break;\n\n case 'Escape':\n e.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n setFocusedIndex(-1);\n }\n break;\n\n case 'Home':\n e.preventDefault();\n if (isOpen) {\n setFocusedIndex(0);\n optionRefs.current[0]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }\n break;\n\n case 'End':\n e.preventDefault();\n if (isOpen) {\n const lastIndex = options.length - 1;\n setFocusedIndex(lastIndex);\n optionRefs.current[lastIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }\n break;\n\n default:\n if (isOpen && e.key.length === 1 && /[a-zA-Z0-9]/.test(e.key)) {\n const searchChar = e.key.toLowerCase();\n const foundIndex = options.findIndex(\n (option, index) =>\n index > focusedIndex && option.label.toLowerCase().startsWith(searchChar),\n );\n\n if (foundIndex !== -1) {\n setFocusedIndex(foundIndex);\n optionRefs.current[foundIndex]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n } else {\n const foundFromStart = options.findIndex((option) =>\n option.label.toLowerCase().startsWith(searchChar),\n );\n if (foundFromStart !== -1) {\n setFocusedIndex(foundFromStart);\n optionRefs.current[foundFromStart]?.scrollIntoView({\n block: 'nearest',\n behavior: 'smooth',\n });\n }\n }\n }\n break;\n }\n },\n [disabled, isOpen, options, focusedIndex, handleOptionSelect],\n );\n\n // Scrolls the first selected option into view. Attached as the options\n // list's own ref below with an empty dependency array, so its identity\n // never changes and React only invokes it on genuine DOM mount/unmount -\n // i.e. exactly when the dropdown opens/closes (Dropdown unmounts its\n // `content` entirely while closed), not on every re-render while open.\n const handleOptionsMount = useCallback((el: HTMLDivElement | null) => {\n if (!el) return;\n const idx = optionsRef.current.findIndex((option) =>\n selectedValuesRef.current.has(option.value),\n );\n if (idx === -1) return;\n optionRefs.current[idx]?.scrollIntoView({ block: 'nearest' });\n }, []);\n\n // Past this many selections the full comma-joined label list becomes\n // unreadable in the trigger, so we switch to a compact \"N selected\" label.\n const COMPACT_LABEL_THRESHOLD = 2;\n\n const displayValue = useMemo(() => {\n if (selectedValues.size === 0) return '';\n\n if (multiple && selectedValues.size > COMPACT_LABEL_THRESHOLD) {\n return `${selectedValues.size} selected`;\n }\n\n const selectedOptions = options.filter((option) => selectedValues.has(option.value));\n const text = selectedOptions.map((option) => option.label).join(', ');\n return text;\n }, [options, selectedValues, multiple]);\n\n const selectContent = useMemo(\n () => (\n <div className={'eidos-select-options'} ref={handleOptionsMount}>\n {options.map((option, index) => {\n const isSelected = selectedValues.has(option.value);\n const isFocused = index === focusedIndex;\n return (\n <div\n key={option.id}\n // The trigger points `aria-activedescendant` at\n // `${id}-option-${focusedIndex}`, and nothing carried that id -\n // so the moment an option was hovered or arrowed to, the\n // attribute referenced an element that did not exist\n // (`aria-valid-attr-value`, critical). Invisible to axe until a\n // story left the listbox open, because the attribute is only\n // set once something is focused.\n id={`${id || 'select'}-option-${index}`}\n ref={(el) => {\n optionRefs.current[index] = el;\n }}\n className={`\n\t\t\t\t\t\t\t\t\t\t${'eidos-select-option'}\n\t\t\t\t\t\t\t\t\t\t${isSelected ? 'eidos-select-option--selected' : ''}\n\t\t\t\t\t\t\t\t\t\t${option.disabled ? 'eidos-select-option--disabled' : ''}\n\t\t\t\t\t\t\t\t\t\t${isFocused ? 'eidos-select-option--focused' : ''}\n\t\t\t\t\t\t\t\t\t`.trim()}\n onClick={() => handleOptionSelect(option)}\n onMouseEnter={() => setFocusedIndex(index)}\n role=\"option\"\n aria-selected={isSelected}\n aria-disabled={option.disabled}\n >\n {option.icon && renderIcon(option.icon, 'eidos-select-option-icon')}\n <span className={'eidos-select-option-label'}>{option.label}</span>\n {isSelected && <Check className={'eidos-select-option-check-icon'} />}\n </div>\n );\n })}\n </div>\n ),\n [options, selectedValues, focusedIndex, handleOptionSelect, handleOptionsMount, id],\n );\n\n const triggerElement = (\n <div\n ref={triggerRef}\n className={`eidos-select-trigger ${fullWidth ? 'eidos-select-trigger--full-width' : ''}`}\n onKeyDown={handleKeyDown}\n tabIndex={disabled ? -1 : undefined}\n role=\"combobox\"\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n // Only while the listbox exists. An `aria-controls` pointing at an id\n // that is not in the document is invalid, and the listbox only renders\n // while open - `Combobox`, `TagInput` and `CommandPalette` already gate\n // theirs this way. It could not be gated here before, because `isOpen`\n // did not track whether the panel had actually rendered.\n aria-controls={isOpen ? `${id || 'select'}-options` : undefined}\n aria-activedescendant={\n focusedIndex >= 0 ? `${id || 'select'}-option-${focusedIndex}` : undefined\n }\n >\n <Input\n ref={inputRef}\n value={selectedValues.size > 0 ? displayValue : ''}\n placeholder={selectedValues.size === 0 ? placeholder : ''}\n posIcon={selectedValues.size > 0 && clearable ? X : undefined}\n posIconButton={selectedValues.size > 0 && clearable}\n onPosIconClick={selectedValues.size > 0 && clearable ? handleClear : undefined}\n posIconLabel=\"Clear selection\"\n disabled={disabled}\n readOnly={true}\n isSelect={true}\n label={label}\n name={name}\n id={id}\n required={required}\n fullWidth={fullWidth}\n {...inputProps}\n />\n </div>\n );\n\n return (\n <div\n ref={ref}\n className={`${'eidos-select-container'} ${\n fullWidth ? 'eidos-select-container--full-width' : ''\n } ${className}`}\n >\n <Dropdown\n open={isOpen}\n onOpenChange={setIsOpen}\n trigger={triggerElement}\n content={\n <div id={`${id || 'select'}-options`} role=\"listbox\" aria-multiselectable={multiple}>\n {selectContent}\n </div>\n }\n minWidth={minWidth}\n maxWidth={maxWidth}\n minHeight={minHeight}\n maxHeight={maxHeight}\n autoWidth={autoWidth}\n fullWidth={fullWidth}\n triggerRef={triggerRef as React.RefObject<HTMLElement | null>}\n {...dropdownProps}\n />\n </div>\n );\n },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":"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","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _chunkBPVOQLCAcjs = require('./chunk-BPVOQLCA.cjs');
|
|
4
4
|
|
|
5
5
|
// src/components/SplitChip/SplitChip.utils.ts
|
|
6
6
|
var hasVisibleBorder = (segment) => segment.variant === "outlined" || segment.disabled;
|
|
@@ -52,7 +52,7 @@ var SplitChip = ({
|
|
|
52
52
|
}));
|
|
53
53
|
const edges = resolveSegmentEdges(resolved, showDividers);
|
|
54
54
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classes, ...rest, children: segments.map((segment, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
55
|
-
|
|
55
|
+
_chunkBPVOQLCAcjs.Chip,
|
|
56
56
|
{
|
|
57
57
|
variant: resolved[index].variant,
|
|
58
58
|
color: _nullishCoalesce(segment.color, () => ( color)),
|
|
@@ -79,4 +79,4 @@ var SplitChip = ({
|
|
|
79
79
|
|
|
80
80
|
|
|
81
81
|
exports.SplitChip = SplitChip;
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-3QBMSZSE.cjs.map
|