@banzamel/mineralui 1.2.0 → 1.4.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 +1 -1
- package/dist/MAvatar-B0uPeciT.js +57 -0
- package/dist/MAvatar-B0uPeciT.js.map +1 -0
- package/dist/MAvatar-DlFdIi6R.cjs +2 -0
- package/dist/MAvatar-DlFdIi6R.cjs.map +1 -0
- package/dist/MBadge-5PivwWxe.js +19 -0
- package/dist/MBadge-5PivwWxe.js.map +1 -0
- package/dist/MBadge-DNqOptef.cjs +2 -0
- package/dist/MBadge-DNqOptef.cjs.map +1 -0
- package/dist/MButton-Bfe4iq51.js +113 -0
- package/dist/{MButton-BmTDe5Oa.js.map → MButton-Bfe4iq51.js.map} +1 -1
- package/dist/MButton-CtEFKjYZ.cjs +2 -0
- package/dist/{MButton-B8rXmFX9.cjs.map → MButton-CtEFKjYZ.cjs.map} +1 -1
- package/dist/{MDataTable-BI7wFZYN.cjs → MDataTable-CVwnVouZ.cjs} +2 -2
- package/dist/{MDataTable-BI7wFZYN.cjs.map → MDataTable-CVwnVouZ.cjs.map} +1 -1
- package/dist/{MDataTable-Cqwkiq7A.js → MDataTable-D0ONRmcC.js} +3 -3
- package/dist/{MDataTable-Cqwkiq7A.js.map → MDataTable-D0ONRmcC.js.map} +1 -1
- package/dist/{MDrawer-DXHtAckQ.js → MDrawer-C7rLXC_O.js} +2 -2
- package/dist/{MDrawer-DXHtAckQ.js.map → MDrawer-C7rLXC_O.js.map} +1 -1
- package/dist/{MDrawer-CSvjLrhB.cjs → MDrawer-DF42-zF2.cjs} +2 -2
- package/dist/{MDrawer-CSvjLrhB.cjs.map → MDrawer-DF42-zF2.cjs.map} +1 -1
- package/dist/MHeading-DBS5Kytw.js +21 -0
- package/dist/MHeading-DBS5Kytw.js.map +1 -0
- package/dist/MHeading-XCMJNMYB.cjs +2 -0
- package/dist/MHeading-XCMJNMYB.cjs.map +1 -0
- package/dist/MImage-2Xztd_N6.cjs +2 -0
- package/dist/MImage-2Xztd_N6.cjs.map +1 -0
- package/dist/MImage-UmiZwzDJ.js +53 -0
- package/dist/MImage-UmiZwzDJ.js.map +1 -0
- package/dist/MInline-BYsbmfkz.js +41 -0
- package/dist/MInline-BYsbmfkz.js.map +1 -0
- package/dist/MInline-oCvhfJwM.cjs +2 -0
- package/dist/MInline-oCvhfJwM.cjs.map +1 -0
- package/dist/{MInput-W7DJQ_ng.cjs → MInput-CpEJQ9SV.cjs} +2 -2
- package/dist/{MInput-W7DJQ_ng.cjs.map → MInput-CpEJQ9SV.cjs.map} +1 -1
- package/dist/{MInput-BSaKw0Uc.js → MInput-iKIeefss.js} +2 -2
- package/dist/{MInput-BSaKw0Uc.js.map → MInput-iKIeefss.js.map} +1 -1
- package/dist/{MInputCVC-Dqbl1zG9.js → MInputCVC-BpGTqkQx.js} +2 -2
- package/dist/{MInputCVC-Dqbl1zG9.js.map → MInputCVC-BpGTqkQx.js.map} +1 -1
- package/dist/{MInputCVC-DH_bjV5R.cjs → MInputCVC-BuGwm7fv.cjs} +2 -2
- package/dist/{MInputCVC-DH_bjV5R.cjs.map → MInputCVC-BuGwm7fv.cjs.map} +1 -1
- package/dist/{MInputSearch-C7betxTa.cjs → MInputSearch-B-Lqr-QG.cjs} +2 -2
- package/dist/{MInputSearch-C7betxTa.cjs.map → MInputSearch-B-Lqr-QG.cjs.map} +1 -1
- package/dist/{MInputSearch-CH5ZcjLq.js → MInputSearch-y3_ihYRj.js} +2 -2
- package/dist/{MInputSearch-CH5ZcjLq.js.map → MInputSearch-y3_ihYRj.js.map} +1 -1
- package/dist/MLink-7hndQLKM.cjs +2 -0
- package/dist/{MLink-DHryXq_D.cjs.map → MLink-7hndQLKM.cjs.map} +1 -1
- package/dist/MLink-tcICJfPn.js +31 -0
- package/dist/{MLink-ODytrwne.js.map → MLink-tcICJfPn.js.map} +1 -1
- package/dist/{MModal-pMcPs3pw.cjs → MModal-DlnT3BBp.cjs} +2 -2
- package/dist/{MModal-pMcPs3pw.cjs.map → MModal-DlnT3BBp.cjs.map} +1 -1
- package/dist/{MModal-DShADuLw.js → MModal-___Rw8YK.js} +2 -2
- package/dist/{MModal-DShADuLw.js.map → MModal-___Rw8YK.js.map} +1 -1
- package/dist/{MPagination-BWHAVgWN.cjs → MPagination-CTtr_L-Q.cjs} +2 -2
- package/dist/{MPagination-BWHAVgWN.cjs.map → MPagination-CTtr_L-Q.cjs.map} +1 -1
- package/dist/{MPagination-B7aho7rQ.js → MPagination-CzJGko3i.js} +2 -2
- package/dist/{MPagination-B7aho7rQ.js.map → MPagination-CzJGko3i.js.map} +1 -1
- package/dist/{MQrCode-6Cz9B7Qy.js → MQrCode-B7jbpcUj.js} +2 -2
- package/dist/{MQrCode-6Cz9B7Qy.js.map → MQrCode-B7jbpcUj.js.map} +1 -1
- package/dist/{MQrCode-Bp2CWpmX.cjs → MQrCode-Cha7657D.cjs} +2 -2
- package/dist/{MQrCode-Bp2CWpmX.cjs.map → MQrCode-Cha7657D.cjs.map} +1 -1
- package/dist/{MSkeleton-BfRBJ6ku.cjs → MSkeleton-BAkzwxOS.cjs} +2 -2
- package/dist/{MSkeleton-BfRBJ6ku.cjs.map → MSkeleton-BAkzwxOS.cjs.map} +1 -1
- package/dist/{MSkeleton-CauCfkzj.js → MSkeleton-Cwa-JRxo.js} +2 -2
- package/dist/{MSkeleton-CauCfkzj.js.map → MSkeleton-Cwa-JRxo.js.map} +1 -1
- package/dist/MStack-Bp1x4woD.cjs +2 -0
- package/dist/MStack-Bp1x4woD.cjs.map +1 -0
- package/dist/MStack-DVOFZo1L.js +41 -0
- package/dist/MStack-DVOFZo1L.js.map +1 -0
- package/dist/MSubText-CHvUFOlt.js +17 -0
- package/dist/MSubText-CHvUFOlt.js.map +1 -0
- package/dist/MSubText-Dg3PKnwI.cjs +2 -0
- package/dist/MSubText-Dg3PKnwI.cjs.map +1 -0
- package/dist/MSurface-ClPdv7a4.cjs +2 -0
- package/dist/MSurface-ClPdv7a4.cjs.map +1 -0
- package/dist/MSurface-FEfWBJFx.js +41 -0
- package/dist/MSurface-FEfWBJFx.js.map +1 -0
- package/dist/MTag-BxoSuAOj.cjs +2 -0
- package/dist/MTag-BxoSuAOj.cjs.map +1 -0
- package/dist/MTag-CjaE6vPj.js +39 -0
- package/dist/MTag-CjaE6vPj.js.map +1 -0
- package/dist/MText-CWHwmjs8.cjs +2 -0
- package/dist/MText-CWHwmjs8.cjs.map +1 -0
- package/dist/MText-hHMgVJ4-.js +45 -0
- package/dist/MText-hHMgVJ4-.js.map +1 -0
- package/dist/{cards-BE77zKTI.js → cards-1--Cy-KV.js} +10 -10
- package/dist/{cards-BE77zKTI.js.map → cards-1--Cy-KV.js.map} +1 -1
- package/dist/{cards-BINs-dmS.cjs → cards-CTegCxIA.cjs} +2 -2
- package/dist/{cards-BINs-dmS.cjs.map → cards-CTegCxIA.cjs.map} +1 -1
- package/dist/cards.cjs +1 -1
- package/dist/cards.js +2 -2
- package/dist/components/controls/MButton/MButton.types.d.ts +2 -2
- package/dist/components/feedback/MAlert/MAlert.d.ts +1 -1
- package/dist/components/feedback/MAlert/MAlert.types.d.ts +2 -2
- package/dist/components/feedback/MBadge/MBadge.d.ts +1 -1
- package/dist/components/feedback/MBadge/MBadge.types.d.ts +2 -2
- package/dist/components/feedback/MBanner/MBanner.d.ts +1 -1
- package/dist/components/feedback/MBanner/MBanner.types.d.ts +2 -2
- package/dist/components/feedback/MTag/MTag.d.ts +1 -1
- package/dist/components/feedback/MTag/MTag.types.d.ts +2 -2
- package/dist/components/layout/MContainer/MContainer.d.ts +1 -1
- package/dist/components/layout/MContainer/MContainer.types.d.ts +2 -1
- package/dist/components/layout/MDivider/MDivider.d.ts +1 -1
- package/dist/components/layout/MDivider/MDivider.types.d.ts +2 -1
- package/dist/components/layout/MFooter/MFooter.d.ts +1 -1
- package/dist/components/layout/MFooter/MFooter.types.d.ts +2 -1
- package/dist/components/layout/MGrid/MGrid.d.ts +2 -2
- package/dist/components/layout/MGrid/MGrid.types.d.ts +4 -2
- package/dist/components/layout/MHeader/MHeader.d.ts +1 -1
- package/dist/components/layout/MHeader/MHeader.types.d.ts +2 -1
- package/dist/components/layout/MInline/MInline.d.ts +1 -1
- package/dist/components/layout/MInline/MInline.types.d.ts +2 -1
- package/dist/components/layout/MNavbar/MNavbar.d.ts +1 -1
- package/dist/components/layout/MNavbar/MNavbar.types.d.ts +3 -1
- package/dist/components/layout/MNavs/index.d.ts +1 -1
- package/dist/components/layout/MSection/MSection.d.ts +1 -1
- package/dist/components/layout/MSection/MSection.types.d.ts +2 -1
- package/dist/components/layout/MSidebar/MSidebar.d.ts +1 -1
- package/dist/components/layout/MSidebar/MSidebar.types.d.ts +1 -0
- package/dist/components/layout/MStack/MStack.d.ts +1 -1
- package/dist/components/layout/MStack/MStack.types.d.ts +2 -1
- package/dist/components/layout/MSurface/MSurface.d.ts +1 -1
- package/dist/components/layout/MSurface/MSurface.types.d.ts +2 -1
- package/dist/components/layout/MTopbar/MTopbar.d.ts +1 -1
- package/dist/components/layout/MTopbar/MTopbar.types.d.ts +3 -2
- package/dist/components/media/MAvatar/MAvatar.d.ts +1 -1
- package/dist/components/media/MAvatar/MAvatar.types.d.ts +2 -2
- package/dist/components/media/MAvatarStack/MAvatarStack.d.ts +1 -1
- package/dist/components/media/MAvatarStack/MAvatarStack.types.d.ts +2 -2
- package/dist/components/media/MImage/MImage.d.ts +1 -1
- package/dist/components/media/MImage/MImage.types.d.ts +2 -1
- package/dist/components/typography/MHeading/MHeading.d.ts +563 -2
- package/dist/components/typography/MHeading/MHeading.types.d.ts +2 -2
- package/dist/components/typography/MLink/MLink.types.d.ts +2 -1
- package/dist/components/typography/MSubText/MSubText.d.ts +1 -1
- package/dist/components/typography/MSubText/MSubText.types.d.ts +2 -2
- package/dist/components/typography/MText/MText.d.ts +1 -1
- package/dist/components/typography/MText/MText.types.d.ts +2 -2
- package/dist/{controls-BMwQ3C1R.js → controls-C0qr_vMu.js} +145 -143
- package/dist/{controls-BMwQ3C1R.js.map → controls-C0qr_vMu.js.map} +1 -1
- package/dist/controls-CAab2nyg.cjs +2 -0
- package/dist/{controls-DwL1-nVC.cjs.map → controls-CAab2nyg.cjs.map} +1 -1
- package/dist/controls.cjs +1 -1
- package/dist/controls.js +2 -2
- package/dist/data-Uy_XSs32.cjs +2 -0
- package/dist/data-Uy_XSs32.cjs.map +1 -0
- package/dist/{data-s8Hkht1B.js → data-z3Uc9FSI.js} +751 -750
- package/dist/data-z3Uc9FSI.js.map +1 -0
- package/dist/data.cjs +1 -1
- package/dist/data.js +2 -2
- package/dist/{display-DuBRiEKr.js → display-GygMuO4c.js} +3 -3
- package/dist/{display-DuBRiEKr.js.map → display-GygMuO4c.js.map} +1 -1
- package/dist/{display-B0lpgApV.cjs → display-WS1tupQD.cjs} +2 -2
- package/dist/{display-B0lpgApV.cjs.map → display-WS1tupQD.cjs.map} +1 -1
- package/dist/display.cjs +1 -1
- package/dist/display.js +2 -2
- package/dist/{dropdowns-CK-oxd62.cjs → dropdowns-CzqyYQwR.cjs} +2 -2
- package/dist/{dropdowns-CK-oxd62.cjs.map → dropdowns-CzqyYQwR.cjs.map} +1 -1
- package/dist/{dropdowns-BcVrUMPE.js → dropdowns-FQlxsOYd.js} +4 -4
- package/dist/{dropdowns-BcVrUMPE.js.map → dropdowns-FQlxsOYd.js.map} +1 -1
- package/dist/dropdowns.cjs +1 -1
- package/dist/dropdowns.js +1 -1
- package/dist/feedback-C9z4MZ-V.cjs +2 -0
- package/dist/feedback-C9z4MZ-V.cjs.map +1 -0
- package/dist/{feedback-D3LLKNlY.js → feedback-xtBDPbzP.js} +304 -301
- package/dist/feedback-xtBDPbzP.js.map +1 -0
- package/dist/feedback.cjs +1 -1
- package/dist/feedback.js +5 -5
- package/dist/index.cjs +1 -1
- package/dist/index.js +59 -59
- package/dist/{inputs-bCxSLz-U.js → inputs-gB1ET0dG.js} +3 -3
- package/dist/{inputs-bCxSLz-U.js.map → inputs-gB1ET0dG.js.map} +1 -1
- package/dist/{inputs-Dcj6C_Fn.cjs → inputs-z84nU7A8.cjs} +2 -2
- package/dist/{inputs-Dcj6C_Fn.cjs.map → inputs-z84nU7A8.cjs.map} +1 -1
- package/dist/inputs.cjs +1 -1
- package/dist/inputs.js +4 -4
- package/dist/layout-BIPyHdYN.cjs +2 -0
- package/dist/layout-BIPyHdYN.cjs.map +1 -0
- package/dist/layout-DHVIqY-O.js +904 -0
- package/dist/layout-DHVIqY-O.js.map +1 -0
- package/dist/layout.cjs +1 -1
- package/dist/layout.js +5 -5
- package/dist/media-Ch3Fyf4K.cjs +2 -0
- package/dist/{media-D5YGOTm7.cjs.map → media-Ch3Fyf4K.cjs.map} +1 -1
- package/dist/{media-8aMOtckF.js → media-DV58aS3j.js} +145 -143
- package/dist/{media-8aMOtckF.js.map → media-DV58aS3j.js.map} +1 -1
- package/dist/media.cjs +1 -1
- package/dist/media.js +3 -3
- package/dist/{overlays-DCj-oV2H.cjs → overlays-7HBAQneO.cjs} +2 -2
- package/dist/{overlays-DCj-oV2H.cjs.map → overlays-7HBAQneO.cjs.map} +1 -1
- package/dist/{overlays-gjg00CAf.js → overlays-_zOs7GGk.js} +3 -3
- package/dist/{overlays-gjg00CAf.js.map → overlays-_zOs7GGk.js.map} +1 -1
- package/dist/overlays.cjs +1 -1
- package/dist/overlays.js +3 -3
- package/dist/style-runtime.cjs +1 -1
- package/dist/style-runtime.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme/MTheme.types.d.ts +6 -0
- package/dist/theme/index.d.ts +2 -1
- package/dist/theme/responsive.d.ts +23 -0
- package/dist/{theme-DLorpkJc.cjs → theme-B9iSuxqh.cjs} +2 -2
- package/dist/theme-B9iSuxqh.cjs.map +1 -0
- package/dist/{theme-BV4qkzZU.js → theme-XRUdoLqw.js} +25 -2
- package/dist/theme-XRUdoLqw.js.map +1 -0
- package/dist/theme.cjs +1 -1
- package/dist/theme.js +2 -2
- package/dist/{typography-qbFGv1gA.cjs → typography-D0dyVQlP.cjs} +2 -2
- package/dist/{typography-qbFGv1gA.cjs.map → typography-D0dyVQlP.cjs.map} +1 -1
- package/dist/{typography-DKdr1Tds.js → typography-Db_SHI0H.js} +2 -2
- package/dist/{typography-DKdr1Tds.js.map → typography-Db_SHI0H.js.map} +1 -1
- package/dist/typography.cjs +1 -1
- package/dist/typography.js +5 -5
- package/package.json +1 -1
- package/dist/MAvatar-BoO51a6m.js +0 -55
- package/dist/MAvatar-BoO51a6m.js.map +0 -1
- package/dist/MAvatar-DJKtca9j.cjs +0 -2
- package/dist/MAvatar-DJKtca9j.cjs.map +0 -1
- package/dist/MBadge-CexVV675.cjs +0 -2
- package/dist/MBadge-CexVV675.cjs.map +0 -1
- package/dist/MBadge-Y1JnZiIC.js +0 -17
- package/dist/MBadge-Y1JnZiIC.js.map +0 -1
- package/dist/MButton-B8rXmFX9.cjs +0 -2
- package/dist/MButton-BmTDe5Oa.js +0 -111
- package/dist/MHeading-C3IgV22T.js +0 -19
- package/dist/MHeading-C3IgV22T.js.map +0 -1
- package/dist/MHeading-DqvWKia1.cjs +0 -2
- package/dist/MHeading-DqvWKia1.cjs.map +0 -1
- package/dist/MImage-BDcrV6IC.js +0 -49
- package/dist/MImage-BDcrV6IC.js.map +0 -1
- package/dist/MImage-BsQJ_eYf.cjs +0 -2
- package/dist/MImage-BsQJ_eYf.cjs.map +0 -1
- package/dist/MInline-BAhu2zT-.cjs +0 -2
- package/dist/MInline-BAhu2zT-.cjs.map +0 -1
- package/dist/MInline-Dfy3Lrjs.js +0 -39
- package/dist/MInline-Dfy3Lrjs.js.map +0 -1
- package/dist/MLink-DHryXq_D.cjs +0 -2
- package/dist/MLink-ODytrwne.js +0 -29
- package/dist/MStack-Cifiqeb2.js +0 -39
- package/dist/MStack-Cifiqeb2.js.map +0 -1
- package/dist/MStack-lrvy7l3w.cjs +0 -2
- package/dist/MStack-lrvy7l3w.cjs.map +0 -1
- package/dist/MSubText-78oYdJQy.cjs +0 -2
- package/dist/MSubText-78oYdJQy.cjs.map +0 -1
- package/dist/MSubText-C2oxXwKT.js +0 -15
- package/dist/MSubText-C2oxXwKT.js.map +0 -1
- package/dist/MSurface-B1LXFczo.js +0 -39
- package/dist/MSurface-B1LXFczo.js.map +0 -1
- package/dist/MSurface-BgZ86iYn.cjs +0 -2
- package/dist/MSurface-BgZ86iYn.cjs.map +0 -1
- package/dist/MTag-C4_rBj4b.cjs +0 -2
- package/dist/MTag-C4_rBj4b.cjs.map +0 -1
- package/dist/MTag-DOcKm3c2.js +0 -37
- package/dist/MTag-DOcKm3c2.js.map +0 -1
- package/dist/MText-CxSZ2md0.cjs +0 -2
- package/dist/MText-CxSZ2md0.cjs.map +0 -1
- package/dist/MText-DX9O7gh7.js +0 -43
- package/dist/MText-DX9O7gh7.js.map +0 -1
- package/dist/controls-DwL1-nVC.cjs +0 -2
- package/dist/data-BESfox0z.cjs +0 -2
- package/dist/data-BESfox0z.cjs.map +0 -1
- package/dist/data-s8Hkht1B.js.map +0 -1
- package/dist/feedback-D3LLKNlY.js.map +0 -1
- package/dist/feedback-DYjg0Dbp.cjs +0 -2
- package/dist/feedback-DYjg0Dbp.cjs.map +0 -1
- package/dist/layout-Cb94o3oU.js +0 -891
- package/dist/layout-Cb94o3oU.js.map +0 -1
- package/dist/layout-DgfsQ-Tn.cjs +0 -2
- package/dist/layout-DgfsQ-Tn.cjs.map +0 -1
- package/dist/media-D5YGOTm7.cjs +0 -2
- package/dist/theme-BV4qkzZU.js.map +0 -1
- package/dist/theme-DLorpkJc.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MDrawer-
|
|
1
|
+
{"version":3,"file":"MDrawer-C7rLXC_O.js","names":[],"sources":["../src/components/overlays/MDrawer/MDrawer.tsx"],"sourcesContent":["import {Children, isValidElement, useEffect, useState, useRef} from 'react'\nimport type {MouseEvent, ReactElement, ReactNode} from 'react'\nimport type {MDrawerProps, MDrawerSectionProps} from './MDrawer.types'\nimport {MPortal} from '../../primitives'\nimport {MButton} from '../../controls'\nimport {MCloseIcon} from '../../../icons'\nimport {cn} from '../../../utils/cn'\nimport './MDrawer.css'\n\nconst EXIT_DURATION = 600\n\ntype DrawerSlotElement = ReactElement<MDrawerSectionProps>\n\nfunction isDrawerHeader(child: ReactNode): child is DrawerSlotElement {\n return isValidElement(child) && !!(child.type as any).__drawerHeader\n}\n\nfunction isDrawerBody(child: ReactNode): child is DrawerSlotElement {\n return isValidElement(child) && !!(child.type as any).__drawerBody\n}\n\nfunction isDrawerFooter(child: ReactNode): child is DrawerSlotElement {\n return isValidElement(child) && !!(child.type as any).__drawerFooter\n}\n\nexport function MDrawerHeader({children}: MDrawerSectionProps) {\n return <>{children}</>\n}\n;(MDrawerHeader as any).__drawerHeader = true\n\nexport function MDrawerBody({children}: MDrawerSectionProps) {\n return <>{children}</>\n}\n;(MDrawerBody as any).__drawerBody = true\n\nexport function MDrawerFooter({children}: MDrawerSectionProps) {\n return <>{children}</>\n}\n;(MDrawerFooter as any).__drawerFooter = true\n\nexport function MDrawer({\n open,\n onClose,\n side = 'right',\n size = 'md',\n overlay = true,\n closeOnBackdrop = true,\n closeOnEscape = true,\n className,\n children,\n ...rest\n}: MDrawerProps) {\n const [mounted, setMounted] = useState(false)\n const [closing, setClosing] = useState(false)\n const backdropRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (open) {\n setMounted(true)\n setClosing(false)\n }\n }, [open])\n\n useEffect(() => {\n if (!open && mounted) {\n setClosing(true)\n const timer = setTimeout(() => {\n setMounted(false)\n setClosing(false)\n }, EXIT_DURATION)\n return () => clearTimeout(timer)\n }\n }, [open, mounted])\n\n useEffect(() => {\n if (!open || !closeOnEscape) return\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [open, closeOnEscape, onClose])\n\n useEffect(() => {\n if (!mounted) return\n\n const prev = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n return () => {\n document.body.style.overflow = prev\n }\n }, [mounted])\n\n if (!mounted) return null\n\n const handleBackdropClick = (e: MouseEvent<HTMLDivElement>) => {\n if (closeOnBackdrop && e.target === e.currentTarget) onClose()\n }\n\n let header: ReactNode = null\n let headerProps: MDrawerSectionProps | null = null\n let bodyProps: MDrawerSectionProps | null = null\n let footer: ReactNode = null\n let footerProps: MDrawerSectionProps | null = null\n const body: ReactNode[] = []\n\n Children.forEach(children, (child) => {\n if (isDrawerHeader(child)) {\n header = child.props.children\n headerProps = child.props\n return\n }\n\n if (isDrawerBody(child)) {\n bodyProps = child.props\n body.push(child.props.children)\n return\n }\n\n if (isDrawerFooter(child)) {\n footer = child.props.children\n footerProps = child.props\n return\n }\n\n body.push(child)\n })\n\n const headerSection = headerProps ?? ({children: undefined} as MDrawerSectionProps)\n const bodySection = bodyProps ?? ({children: undefined} as MDrawerSectionProps)\n const footerSection = footerProps ?? ({children: undefined} as MDrawerSectionProps)\n const {\n children: _headerChildren,\n className: headerClassName,\n bordered: headerBordered = false,\n ...headerRest\n } = headerSection\n const {children: _bodyChildren, className: bodyClassName, ...bodyRest} = bodySection\n const {\n children: _footerChildren,\n className: footerClassName,\n bordered: footerBordered = false,\n ...footerRest\n } = footerSection\n\n return (\n <MPortal>\n <div\n ref={backdropRef}\n className={cn('mineral-backdrop', 'drawer-backdrop', !overlay && 'no-overlay', closing && 'closing')}\n onMouseDown={handleBackdropClick}\n >\n <div className={cn('drawer', side, size, className)} role=\"dialog\" aria-modal=\"true\" {...rest}>\n {header && (\n <div\n {...headerRest}\n className={cn('drawer-header', headerBordered && 'bordered', headerClassName)}\n >\n <div className=\"drawer-title\">{header}</div>\n <MButton\n variant=\"link\"\n color=\"neutral\"\n iconOnly\n size=\"sm\"\n onClick={onClose}\n aria-label=\"Close\"\n className=\"close\"\n >\n <MCloseIcon />\n </MButton>\n </div>\n )}\n <div {...bodyRest} className={cn('drawer-body', bodyClassName)}>\n {body}\n </div>\n {footer && (\n <div\n {...footerRest}\n className={cn('drawer-footer', footerBordered && 'bordered', footerClassName)}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n </MPortal>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MPortal-PyRKsZxc.cjs`),r=require(`./MButton-
|
|
2
|
-
//# sourceMappingURL=MDrawer-
|
|
1
|
+
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MPortal-PyRKsZxc.cjs`),r=require(`./MButton-CtEFKjYZ.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);var o=600;function s(e){return(0,i.isValidElement)(e)&&!!e.type.__drawerHeader}function c(e){return(0,i.isValidElement)(e)&&!!e.type.__drawerBody}function l(e){return(0,i.isValidElement)(e)&&!!e.type.__drawerFooter}function u({children:e}){return(0,a.jsx)(a.Fragment,{children:e})}u.__drawerHeader=!0;function d({children:e}){return(0,a.jsx)(a.Fragment,{children:e})}d.__drawerBody=!0;function f({children:e}){return(0,a.jsx)(a.Fragment,{children:e})}f.__drawerFooter=!0;function p({open:u,onClose:d,side:f=`right`,size:p=`md`,overlay:m=!0,closeOnBackdrop:h=!0,closeOnEscape:g=!0,className:_,children:v,...y}){let[b,x]=(0,i.useState)(!1),[S,C]=(0,i.useState)(!1),w=(0,i.useRef)(null);if((0,i.useEffect)(()=>{u&&(x(!0),C(!1))},[u]),(0,i.useEffect)(()=>{if(!u&&b){C(!0);let e=setTimeout(()=>{x(!1),C(!1)},o);return()=>clearTimeout(e)}},[u,b]),(0,i.useEffect)(()=>{if(!u||!g)return;let e=e=>{e.key===`Escape`&&d()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[u,g,d]),(0,i.useEffect)(()=>{if(!b)return;let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}},[b]),!b)return null;let T=e=>{h&&e.target===e.currentTarget&&d()},E=null,D=null,O=null,k=null,A=null,j=[];i.Children.forEach(v,e=>{if(s(e)){E=e.props.children,D=e.props;return}if(c(e)){O=e.props,j.push(e.props.children);return}if(l(e)){k=e.props.children,A=e.props;return}j.push(e)});let M=D??{children:void 0},N=O??{children:void 0},P=A??{children:void 0},{children:F,className:I,bordered:L=!1,...R}=M,{children:z,className:B,...V}=N,{children:H,className:U,bordered:W=!1,...G}=P;return(0,a.jsx)(n.t,{children:(0,a.jsx)(`div`,{ref:w,className:t.t(`mineral-backdrop`,`drawer-backdrop`,!m&&`no-overlay`,S&&`closing`),onMouseDown:T,children:(0,a.jsxs)(`div`,{className:t.t(`drawer`,f,p,_),role:`dialog`,"aria-modal":`true`,...y,children:[E&&(0,a.jsxs)(`div`,{...R,className:t.t(`drawer-header`,L&&`bordered`,I),children:[(0,a.jsx)(`div`,{className:`drawer-title`,children:E}),(0,a.jsx)(r.t,{variant:`link`,color:`neutral`,iconOnly:!0,size:`sm`,onClick:d,"aria-label":`Close`,className:`close`,children:(0,a.jsx)(e.Ii,{})})]}),(0,a.jsx)(`div`,{...V,className:t.t(`drawer-body`,B),children:j}),k&&(0,a.jsx)(`div`,{...G,className:t.t(`drawer-footer`,W&&`bordered`,U),children:k})]})})})}Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
|
|
2
|
+
//# sourceMappingURL=MDrawer-DF42-zF2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MDrawer-
|
|
1
|
+
{"version":3,"file":"MDrawer-DF42-zF2.cjs","names":[],"sources":["../src/components/overlays/MDrawer/MDrawer.tsx"],"sourcesContent":["import {Children, isValidElement, useEffect, useState, useRef} from 'react'\nimport type {MouseEvent, ReactElement, ReactNode} from 'react'\nimport type {MDrawerProps, MDrawerSectionProps} from './MDrawer.types'\nimport {MPortal} from '../../primitives'\nimport {MButton} from '../../controls'\nimport {MCloseIcon} from '../../../icons'\nimport {cn} from '../../../utils/cn'\nimport './MDrawer.css'\n\nconst EXIT_DURATION = 600\n\ntype DrawerSlotElement = ReactElement<MDrawerSectionProps>\n\nfunction isDrawerHeader(child: ReactNode): child is DrawerSlotElement {\n return isValidElement(child) && !!(child.type as any).__drawerHeader\n}\n\nfunction isDrawerBody(child: ReactNode): child is DrawerSlotElement {\n return isValidElement(child) && !!(child.type as any).__drawerBody\n}\n\nfunction isDrawerFooter(child: ReactNode): child is DrawerSlotElement {\n return isValidElement(child) && !!(child.type as any).__drawerFooter\n}\n\nexport function MDrawerHeader({children}: MDrawerSectionProps) {\n return <>{children}</>\n}\n;(MDrawerHeader as any).__drawerHeader = true\n\nexport function MDrawerBody({children}: MDrawerSectionProps) {\n return <>{children}</>\n}\n;(MDrawerBody as any).__drawerBody = true\n\nexport function MDrawerFooter({children}: MDrawerSectionProps) {\n return <>{children}</>\n}\n;(MDrawerFooter as any).__drawerFooter = true\n\nexport function MDrawer({\n open,\n onClose,\n side = 'right',\n size = 'md',\n overlay = true,\n closeOnBackdrop = true,\n closeOnEscape = true,\n className,\n children,\n ...rest\n}: MDrawerProps) {\n const [mounted, setMounted] = useState(false)\n const [closing, setClosing] = useState(false)\n const backdropRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (open) {\n setMounted(true)\n setClosing(false)\n }\n }, [open])\n\n useEffect(() => {\n if (!open && mounted) {\n setClosing(true)\n const timer = setTimeout(() => {\n setMounted(false)\n setClosing(false)\n }, EXIT_DURATION)\n return () => clearTimeout(timer)\n }\n }, [open, mounted])\n\n useEffect(() => {\n if (!open || !closeOnEscape) return\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('keydown', handleKeyDown)\n return () => document.removeEventListener('keydown', handleKeyDown)\n }, [open, closeOnEscape, onClose])\n\n useEffect(() => {\n if (!mounted) return\n\n const prev = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n return () => {\n document.body.style.overflow = prev\n }\n }, [mounted])\n\n if (!mounted) return null\n\n const handleBackdropClick = (e: MouseEvent<HTMLDivElement>) => {\n if (closeOnBackdrop && e.target === e.currentTarget) onClose()\n }\n\n let header: ReactNode = null\n let headerProps: MDrawerSectionProps | null = null\n let bodyProps: MDrawerSectionProps | null = null\n let footer: ReactNode = null\n let footerProps: MDrawerSectionProps | null = null\n const body: ReactNode[] = []\n\n Children.forEach(children, (child) => {\n if (isDrawerHeader(child)) {\n header = child.props.children\n headerProps = child.props\n return\n }\n\n if (isDrawerBody(child)) {\n bodyProps = child.props\n body.push(child.props.children)\n return\n }\n\n if (isDrawerFooter(child)) {\n footer = child.props.children\n footerProps = child.props\n return\n }\n\n body.push(child)\n })\n\n const headerSection = headerProps ?? ({children: undefined} as MDrawerSectionProps)\n const bodySection = bodyProps ?? ({children: undefined} as MDrawerSectionProps)\n const footerSection = footerProps ?? ({children: undefined} as MDrawerSectionProps)\n const {\n children: _headerChildren,\n className: headerClassName,\n bordered: headerBordered = false,\n ...headerRest\n } = headerSection\n const {children: _bodyChildren, className: bodyClassName, ...bodyRest} = bodySection\n const {\n children: _footerChildren,\n className: footerClassName,\n bordered: footerBordered = false,\n ...footerRest\n } = footerSection\n\n return (\n <MPortal>\n <div\n ref={backdropRef}\n className={cn('mineral-backdrop', 'drawer-backdrop', !overlay && 'no-overlay', closing && 'closing')}\n onMouseDown={handleBackdropClick}\n >\n <div className={cn('drawer', side, size, className)} role=\"dialog\" aria-modal=\"true\" {...rest}>\n {header && (\n <div\n {...headerRest}\n className={cn('drawer-header', headerBordered && 'bordered', headerClassName)}\n >\n <div className=\"drawer-title\">{header}</div>\n <MButton\n variant=\"link\"\n color=\"neutral\"\n iconOnly\n size=\"sm\"\n onClick={onClose}\n aria-label=\"Close\"\n className=\"close\"\n >\n <MCloseIcon />\n </MButton>\n </div>\n )}\n <div {...bodyRest} className={cn('drawer-body', bodyClassName)}>\n {body}\n </div>\n {footer && (\n <div\n {...footerRest}\n className={cn('drawer-footer', footerBordered && 'bordered', footerClassName)}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n </MPortal>\n )\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { r as e } from "./theme-XRUdoLqw.js";
|
|
2
|
+
import { t } from "./cn-YER3QsV1.js";
|
|
3
|
+
import { n } from "./MText-hHMgVJ4-.js";
|
|
4
|
+
import { createElement as r } from "react";
|
|
5
|
+
//#region src/components/typography/MHeading/MHeading.tsx
|
|
6
|
+
function i({ level: i = 2, tone: a = "default", hidden: o, color: s, truncate: c, className: l, style: u, children: d, ...f }) {
|
|
7
|
+
let p = typeof c == "number" ? c : void 0;
|
|
8
|
+
return r(`h${i}`, {
|
|
9
|
+
className: t("heading", `h${i}`, !s && a, c === !0 && "truncate", p != null && "line-clamp", ...n({ color: s }), l),
|
|
10
|
+
style: p ? {
|
|
11
|
+
"--line-clamp": p,
|
|
12
|
+
...u
|
|
13
|
+
} : u,
|
|
14
|
+
...e(o),
|
|
15
|
+
...f
|
|
16
|
+
}, d);
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
export { i as t };
|
|
20
|
+
|
|
21
|
+
//# sourceMappingURL=MHeading-DBS5Kytw.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MHeading-DBS5Kytw.js","names":[],"sources":["../src/components/typography/MHeading/MHeading.tsx"],"sourcesContent":["import {createElement} from 'react'\nimport type {CSSProperties} from 'react'\nimport type {MHeadingProps} from './MHeading.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport {getAppearanceClassNames} from '../../../utils/appearanceProps'\nimport './MHeading.css'\n\n// Render semantic heading levels with shared MineralUI typography tokens.\nexport function MHeading({\n level = 2,\n tone = 'default',\n hidden,\n color,\n truncate,\n className,\n style,\n children,\n ...rest\n}: MHeadingProps) {\n const lines = typeof truncate === 'number' ? truncate : undefined\n\n return createElement(\n `h${level}`,\n {\n className: cn(\n 'heading',\n `h${level}`,\n !color && tone,\n truncate === true && 'truncate',\n lines != null && 'line-clamp',\n ...getAppearanceClassNames({color}),\n className\n ),\n style: lines ? ({'--line-clamp': lines, ...style} as CSSProperties) : style,\n ...getHiddenProps(hidden),\n ...rest,\n },\n children\n )\n}\n"],"mappings":";;;;;AASA,SAAgB,EAAS,EACrB,WAAQ,GACR,UAAO,WACP,WACA,UACA,aACA,cACA,UACA,aACA,GAAG,KACW;CACd,IAAM,IAAQ,OAAO,KAAa,WAAW,IAAW,KAAA;AAExD,QAAO,EACH,IAAI,KACJ;EACI,WAAW,EACP,WACA,IAAI,KACJ,CAAC,KAAS,GACV,MAAa,MAAQ,YACrB,KAAS,QAAQ,cACjB,GAAG,EAAwB,EAAC,UAAM,CAAC,EACnC,EACH;EACD,OAAO,IAAS;GAAC,gBAAgB;GAAO,GAAG;GAAM,GAAqB;EACtE,GAAG,EAAe,EAAO;EACzB,GAAG;EACN,EACD,EACH"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=require(`./theme-B9iSuxqh.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./MText-CWHwmjs8.cjs`);let r=require(`react`);function i({level:i=2,tone:a=`default`,hidden:o,color:s,truncate:c,className:l,style:u,children:d,...f}){let p=typeof c==`number`?c:void 0;return(0,r.createElement)(`h${i}`,{className:t.t(`heading`,`h${i}`,!s&&a,c===!0&&`truncate`,p!=null&&`line-clamp`,...n.n({color:s}),l),style:p?{"--line-clamp":p,...u}:u,...e.r(o),...f},d)}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});
|
|
2
|
+
//# sourceMappingURL=MHeading-XCMJNMYB.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MHeading-XCMJNMYB.cjs","names":[],"sources":["../src/components/typography/MHeading/MHeading.tsx"],"sourcesContent":["import {createElement} from 'react'\nimport type {CSSProperties} from 'react'\nimport type {MHeadingProps} from './MHeading.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport {getAppearanceClassNames} from '../../../utils/appearanceProps'\nimport './MHeading.css'\n\n// Render semantic heading levels with shared MineralUI typography tokens.\nexport function MHeading({\n level = 2,\n tone = 'default',\n hidden,\n color,\n truncate,\n className,\n style,\n children,\n ...rest\n}: MHeadingProps) {\n const lines = typeof truncate === 'number' ? truncate : undefined\n\n return createElement(\n `h${level}`,\n {\n className: cn(\n 'heading',\n `h${level}`,\n !color && tone,\n truncate === true && 'truncate',\n lines != null && 'line-clamp',\n ...getAppearanceClassNames({color}),\n className\n ),\n style: lines ? ({'--line-clamp': lines, ...style} as CSSProperties) : style,\n ...getHiddenProps(hidden),\n ...rest,\n },\n children\n )\n}\n"],"mappings":"gIASA,SAAgB,EAAS,CACrB,QAAQ,EACR,OAAO,UACP,SACA,QACA,WACA,YACA,QACA,WACA,GAAG,GACW,CACd,IAAM,EAAQ,OAAO,GAAa,SAAW,EAAW,IAAA,GAExD,OAAA,EAAA,EAAA,eACI,IAAI,IACJ,CACI,UAAW,EAAA,EACP,UACA,IAAI,IACJ,CAAC,GAAS,EACV,IAAa,IAAQ,WACrB,GAAS,MAAQ,aACjB,GAAG,EAAA,EAAwB,CAAC,QAAM,CAAC,CACnC,EACH,CACD,MAAO,EAAS,CAAC,eAAgB,EAAO,GAAG,EAAM,CAAqB,EACtE,GAAG,EAAA,EAAe,EAAO,CACzB,GAAG,EACN,CACD,EACH"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=require(`./theme-B9iSuxqh.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./useInteractionEffect-DnEfbCrX.cjs`),r=require(`./MSkeleton-BAkzwxOS.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);var o={"1:1":`1 / 1`,"4:3":`4 / 3`,"16:9":`16 / 9`,"21:9":`21 / 9`};function s({fit:s=`cover`,ratio:c=`auto`,hidden:l,rounded:u=!1,bordered:d=!1,shadow:f=!1,clickEffect:p=`none`,fallback:m,skeleton:h=!1,className:g,style:_,alt:v,onError:y,...b}){let[x,S]=(0,i.useState)(!1),{effectClassName:C,effectLayer:w,handlePointerDown:T}=n.t({effect:h?`none`:p}),E=e=>{m&&!x&&(S(!0),e.currentTarget.src=m),y?.(e)},D=c!==`auto`&&!!o[c],O=D?{aspectRatio:o[c],..._}:_;if(h)return(0,a.jsx)(r.t,{variant:`rectangle`,animate:`pulse`,className:t.t(`image-skeleton`,u&&`rounded`,d&&`bordered`,g),style:O,"aria-label":`Loading`,...e.r(l)});let k=t.t(`image`,s,!w&&u&&`rounded`,!w&&d&&`bordered`,!w&&f&&`shadow`);return w?(0,a.jsxs)(`span`,{className:t.t(`image-wrap`,D&&`has-ratio`,u&&`rounded`,d&&`bordered`,f&&`shadow`,C,g),style:O,onPointerDown:T,...e.r(l),children:[w,(0,a.jsx)(`img`,{className:k,onError:E,...b,alt:v??``})]}):(0,a.jsx)(`img`,{className:t.t(k,g),style:O,onError:E,...e.r(l),...b,alt:v??``})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
|
|
2
|
+
//# sourceMappingURL=MImage-2Xztd_N6.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MImage-2Xztd_N6.cjs","names":[],"sources":["../src/components/media/MImage/MImage.tsx"],"sourcesContent":["import {useState} from 'react'\nimport type * as React from 'react'\nimport type {MImageProps} from './MImage.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport {useInteractionEffect} from '../../../utils/useInteractionEffect'\nimport {MSkeleton} from '../../feedback'\nimport './MImage.css'\n\nconst RATIO_MAP: Record<string, string> = {\n '1:1': '1 / 1',\n '4:3': '4 / 3',\n '16:9': '16 / 9',\n '21:9': '21 / 9',\n}\n\n// Render a styled image with aspect ratio, fit, and optional fallback.\nexport function MImage({\n fit = 'cover',\n ratio = 'auto',\n hidden,\n rounded = false,\n bordered = false,\n shadow = false,\n clickEffect = 'none',\n fallback,\n skeleton = false,\n className,\n style,\n alt,\n onError,\n ...rest\n}: MImageProps) {\n const [errored, setErrored] = useState(false)\n const {effectClassName, effectLayer, handlePointerDown} = useInteractionEffect<HTMLSpanElement>({\n effect: skeleton ? 'none' : clickEffect,\n })\n\n const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n if (fallback && !errored) {\n setErrored(true)\n e.currentTarget.src = fallback\n }\n onError?.(e)\n }\n\n const hasFixedRatio = ratio !== 'auto' && !!RATIO_MAP[ratio]\n const ratioStyle = hasFixedRatio ? {aspectRatio: RATIO_MAP[ratio], ...style} : style\n\n // Skeleton placeholder\n if (skeleton) {\n return (\n <MSkeleton\n variant=\"rectangle\"\n animate=\"pulse\"\n className={cn('image-skeleton', rounded && 'rounded', bordered && 'bordered', className)}\n style={ratioStyle}\n aria-label=\"Loading\"\n {...getHiddenProps(hidden)}\n />\n )\n }\n\n const imgClassName = cn(\n 'image',\n fit,\n !effectLayer && rounded && 'rounded',\n !effectLayer && bordered && 'bordered',\n !effectLayer && shadow && 'shadow'\n )\n\n if (effectLayer) {\n return (\n <span\n className={cn(\n 'image-wrap',\n hasFixedRatio && 'has-ratio',\n rounded && 'rounded',\n bordered && 'bordered',\n shadow && 'shadow',\n effectClassName,\n className\n )}\n style={ratioStyle}\n onPointerDown={handlePointerDown}\n {...getHiddenProps(hidden)}\n >\n {effectLayer}\n <img className={imgClassName} onError={handleError} {...rest} alt={alt ?? ''} />\n </span>\n )\n }\n\n return (\n <img\n className={cn(imgClassName, className)}\n style={ratioStyle}\n onError={handleError}\n {...getHiddenProps(hidden)}\n {...rest}\n alt={alt ?? ''}\n />\n )\n}\n"],"mappings":"oNASA,IAAM,EAAoC,CACtC,MAAO,QACP,MAAO,QACP,OAAQ,SACR,OAAQ,SACX,CAGD,SAAgB,EAAO,CACnB,MAAM,QACN,QAAQ,OACR,SACA,UAAU,GACV,WAAW,GACX,SAAS,GACT,cAAc,OACd,WACA,WAAW,GACX,YACA,QACA,MACA,UACA,GAAG,GACS,CACZ,GAAM,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,CAAC,kBAAiB,cAAa,qBAAqB,EAAA,EAAsC,CAC5F,OAAQ,EAAW,OAAS,EAC/B,CAAC,CAEI,EAAe,GAA8C,CAC3D,GAAY,CAAC,IACb,EAAW,GAAK,CAChB,EAAE,cAAc,IAAM,GAE1B,IAAU,EAAE,EAGV,EAAgB,IAAU,QAAU,CAAC,CAAC,EAAU,GAChD,EAAa,EAAgB,CAAC,YAAa,EAAU,GAAQ,GAAG,EAAM,CAAG,EAG/E,GAAI,EACA,OACI,EAAA,EAAA,KAAC,EAAA,EAAD,CACI,QAAQ,YACR,QAAQ,QACR,UAAW,EAAA,EAAG,iBAAkB,GAAW,UAAW,GAAY,WAAY,EAAU,CACxF,MAAO,EACP,aAAW,UACX,GAAI,EAAA,EAAe,EAAO,CAC5B,CAAA,CAIV,IAAM,EAAe,EAAA,EACjB,QACA,EACA,CAAC,GAAe,GAAW,UAC3B,CAAC,GAAe,GAAY,WAC5B,CAAC,GAAe,GAAU,SAC7B,CAwBD,OAtBI,GAEI,EAAA,EAAA,MAAC,OAAD,CACI,UAAW,EAAA,EACP,aACA,GAAiB,YACjB,GAAW,UACX,GAAY,WACZ,GAAU,SACV,EACA,EACH,CACD,MAAO,EACP,cAAe,EACf,GAAI,EAAA,EAAe,EAAO,UAZ9B,CAcK,GACD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAc,QAAS,EAAa,GAAI,EAAM,IAAK,GAAO,GAAM,CAAA,CAC7E,IAKX,EAAA,EAAA,KAAC,MAAD,CACI,UAAW,EAAA,EAAG,EAAc,EAAU,CACtC,MAAO,EACP,QAAS,EACT,GAAI,EAAA,EAAe,EAAO,CAC1B,GAAI,EACJ,IAAK,GAAO,GACd,CAAA"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { r as e } from "./theme-XRUdoLqw.js";
|
|
2
|
+
import { t } from "./cn-YER3QsV1.js";
|
|
3
|
+
import { t as n } from "./useInteractionEffect-DtpbVd77.js";
|
|
4
|
+
import { t as r } from "./MSkeleton-Cwa-JRxo.js";
|
|
5
|
+
import { useState as i } from "react";
|
|
6
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/media/MImage/MImage.tsx
|
|
8
|
+
var s = {
|
|
9
|
+
"1:1": "1 / 1",
|
|
10
|
+
"4:3": "4 / 3",
|
|
11
|
+
"16:9": "16 / 9",
|
|
12
|
+
"21:9": "21 / 9"
|
|
13
|
+
};
|
|
14
|
+
function c({ fit: c = "cover", ratio: l = "auto", hidden: u, rounded: d = !1, bordered: f = !1, shadow: p = !1, clickEffect: m = "none", fallback: h, skeleton: g = !1, className: _, style: v, alt: y, onError: b, ...x }) {
|
|
15
|
+
let [S, C] = i(!1), { effectClassName: w, effectLayer: T, handlePointerDown: E } = n({ effect: g ? "none" : m }), D = (e) => {
|
|
16
|
+
h && !S && (C(!0), e.currentTarget.src = h), b?.(e);
|
|
17
|
+
}, O = l !== "auto" && !!s[l], k = O ? {
|
|
18
|
+
aspectRatio: s[l],
|
|
19
|
+
...v
|
|
20
|
+
} : v;
|
|
21
|
+
if (g) return /* @__PURE__ */ a(r, {
|
|
22
|
+
variant: "rectangle",
|
|
23
|
+
animate: "pulse",
|
|
24
|
+
className: t("image-skeleton", d && "rounded", f && "bordered", _),
|
|
25
|
+
style: k,
|
|
26
|
+
"aria-label": "Loading",
|
|
27
|
+
...e(u)
|
|
28
|
+
});
|
|
29
|
+
let A = t("image", c, !T && d && "rounded", !T && f && "bordered", !T && p && "shadow");
|
|
30
|
+
return T ? /* @__PURE__ */ o("span", {
|
|
31
|
+
className: t("image-wrap", O && "has-ratio", d && "rounded", f && "bordered", p && "shadow", w, _),
|
|
32
|
+
style: k,
|
|
33
|
+
onPointerDown: E,
|
|
34
|
+
...e(u),
|
|
35
|
+
children: [T, /* @__PURE__ */ a("img", {
|
|
36
|
+
className: A,
|
|
37
|
+
onError: D,
|
|
38
|
+
...x,
|
|
39
|
+
alt: y ?? ""
|
|
40
|
+
})]
|
|
41
|
+
}) : /* @__PURE__ */ a("img", {
|
|
42
|
+
className: t(A, _),
|
|
43
|
+
style: k,
|
|
44
|
+
onError: D,
|
|
45
|
+
...e(u),
|
|
46
|
+
...x,
|
|
47
|
+
alt: y ?? ""
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
//#endregion
|
|
51
|
+
export { c as t };
|
|
52
|
+
|
|
53
|
+
//# sourceMappingURL=MImage-UmiZwzDJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MImage-UmiZwzDJ.js","names":[],"sources":["../src/components/media/MImage/MImage.tsx"],"sourcesContent":["import {useState} from 'react'\nimport type * as React from 'react'\nimport type {MImageProps} from './MImage.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport {useInteractionEffect} from '../../../utils/useInteractionEffect'\nimport {MSkeleton} from '../../feedback'\nimport './MImage.css'\n\nconst RATIO_MAP: Record<string, string> = {\n '1:1': '1 / 1',\n '4:3': '4 / 3',\n '16:9': '16 / 9',\n '21:9': '21 / 9',\n}\n\n// Render a styled image with aspect ratio, fit, and optional fallback.\nexport function MImage({\n fit = 'cover',\n ratio = 'auto',\n hidden,\n rounded = false,\n bordered = false,\n shadow = false,\n clickEffect = 'none',\n fallback,\n skeleton = false,\n className,\n style,\n alt,\n onError,\n ...rest\n}: MImageProps) {\n const [errored, setErrored] = useState(false)\n const {effectClassName, effectLayer, handlePointerDown} = useInteractionEffect<HTMLSpanElement>({\n effect: skeleton ? 'none' : clickEffect,\n })\n\n const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n if (fallback && !errored) {\n setErrored(true)\n e.currentTarget.src = fallback\n }\n onError?.(e)\n }\n\n const hasFixedRatio = ratio !== 'auto' && !!RATIO_MAP[ratio]\n const ratioStyle = hasFixedRatio ? {aspectRatio: RATIO_MAP[ratio], ...style} : style\n\n // Skeleton placeholder\n if (skeleton) {\n return (\n <MSkeleton\n variant=\"rectangle\"\n animate=\"pulse\"\n className={cn('image-skeleton', rounded && 'rounded', bordered && 'bordered', className)}\n style={ratioStyle}\n aria-label=\"Loading\"\n {...getHiddenProps(hidden)}\n />\n )\n }\n\n const imgClassName = cn(\n 'image',\n fit,\n !effectLayer && rounded && 'rounded',\n !effectLayer && bordered && 'bordered',\n !effectLayer && shadow && 'shadow'\n )\n\n if (effectLayer) {\n return (\n <span\n className={cn(\n 'image-wrap',\n hasFixedRatio && 'has-ratio',\n rounded && 'rounded',\n bordered && 'bordered',\n shadow && 'shadow',\n effectClassName,\n className\n )}\n style={ratioStyle}\n onPointerDown={handlePointerDown}\n {...getHiddenProps(hidden)}\n >\n {effectLayer}\n <img className={imgClassName} onError={handleError} {...rest} alt={alt ?? ''} />\n </span>\n )\n }\n\n return (\n <img\n className={cn(imgClassName, className)}\n style={ratioStyle}\n onError={handleError}\n {...getHiddenProps(hidden)}\n {...rest}\n alt={alt ?? ''}\n />\n )\n}\n"],"mappings":";;;;;;;AASA,IAAM,IAAoC;CACtC,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACX;AAGD,SAAgB,EAAO,EACnB,SAAM,SACN,WAAQ,QACR,WACA,aAAU,IACV,cAAW,IACX,YAAS,IACT,iBAAc,QACd,aACA,cAAW,IACX,cACA,UACA,QACA,YACA,GAAG,KACS;CACZ,IAAM,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,EAAC,oBAAiB,gBAAa,yBAAqB,EAAsC,EAC5F,QAAQ,IAAW,SAAS,GAC/B,CAAC,EAEI,KAAe,MAA8C;AAK/D,EAJI,KAAY,CAAC,MACb,EAAW,GAAK,EAChB,EAAE,cAAc,MAAM,IAE1B,IAAU,EAAE;IAGV,IAAgB,MAAU,UAAU,CAAC,CAAC,EAAU,IAChD,IAAa,IAAgB;EAAC,aAAa,EAAU;EAAQ,GAAG;EAAM,GAAG;AAG/E,KAAI,EACA,QACI,kBAAC,GAAD;EACI,SAAQ;EACR,SAAQ;EACR,WAAW,EAAG,kBAAkB,KAAW,WAAW,KAAY,YAAY,EAAU;EACxF,OAAO;EACP,cAAW;EACX,GAAI,EAAe,EAAO;EAC5B,CAAA;CAIV,IAAM,IAAe,EACjB,SACA,GACA,CAAC,KAAe,KAAW,WAC3B,CAAC,KAAe,KAAY,YAC5B,CAAC,KAAe,KAAU,SAC7B;AAwBD,QAtBI,IAEI,kBAAC,QAAD;EACI,WAAW,EACP,cACA,KAAiB,aACjB,KAAW,WACX,KAAY,YACZ,KAAU,UACV,GACA,EACH;EACD,OAAO;EACP,eAAe;EACf,GAAI,EAAe,EAAO;YAZ9B,CAcK,GACD,kBAAC,OAAD;GAAK,WAAW;GAAc,SAAS;GAAa,GAAI;GAAM,KAAK,KAAO;GAAM,CAAA,CAC7E;MAKX,kBAAC,OAAD;EACI,WAAW,EAAG,GAAc,EAAU;EACtC,OAAO;EACP,SAAS;EACT,GAAI,EAAe,EAAO;EAC1B,GAAI;EACJ,KAAK,KAAO;EACd,CAAA"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { r as e } from "./theme-XRUdoLqw.js";
|
|
2
|
+
import { t } from "./cn-YER3QsV1.js";
|
|
3
|
+
import { t as n } from "./useReveal-BJ59usiL.js";
|
|
4
|
+
import { n as r, t as i } from "./layoutProps-Cl6d1KmH.js";
|
|
5
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/layout/MInline/MInline.tsx
|
|
7
|
+
function o({ align: o = "center", justify: s = "start", wrap: c = "wrap", hidden: l, reveal: u, spacing: d, padding: f, fsize: p, mt: m, mb: h, ml: g, mr: _, mx: v, my: y, pt: b, pb: x, pl: S, pr: C, px: w, py: T, fullWidth: E, className: D, style: O, children: k, ...A }) {
|
|
8
|
+
let j = r({ fsize: p }), M = n(u);
|
|
9
|
+
return /* @__PURE__ */ a("div", {
|
|
10
|
+
ref: u !== void 0 && u !== !1 ? M : void 0,
|
|
11
|
+
className: t("inline", o, `justify-${s}`, c, u !== void 0 && u !== !1 && "reveal", ...i({
|
|
12
|
+
spacing: d,
|
|
13
|
+
padding: f,
|
|
14
|
+
fsize: p,
|
|
15
|
+
mt: m,
|
|
16
|
+
mb: h,
|
|
17
|
+
ml: g,
|
|
18
|
+
mr: _,
|
|
19
|
+
mx: v,
|
|
20
|
+
my: y,
|
|
21
|
+
pt: b,
|
|
22
|
+
pb: x,
|
|
23
|
+
pl: S,
|
|
24
|
+
pr: C,
|
|
25
|
+
px: w,
|
|
26
|
+
py: T,
|
|
27
|
+
fullWidth: E
|
|
28
|
+
}), D),
|
|
29
|
+
style: {
|
|
30
|
+
...j,
|
|
31
|
+
...O
|
|
32
|
+
},
|
|
33
|
+
...e(l),
|
|
34
|
+
...A,
|
|
35
|
+
children: k
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
//#endregion
|
|
39
|
+
export { o as t };
|
|
40
|
+
|
|
41
|
+
//# sourceMappingURL=MInline-BYsbmfkz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MInline-BYsbmfkz.js","names":[],"sources":["../src/components/layout/MInline/MInline.tsx"],"sourcesContent":["import type {MInlineProps} from './MInline.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport {getLayoutUtilityClassNames, getLayoutUtilityStyles} from '../../../utils/layoutProps'\nimport {useReveal} from '../../../utils/useReveal'\nimport './MInline.css'\n\n// Arrange children horizontally with shared alignment and wrapping helpers.\nexport function MInline({\n align = 'center',\n justify = 'start',\n wrap = 'wrap',\n hidden,\n reveal,\n spacing,\n padding,\n fsize,\n mt,\n mb,\n ml,\n mr,\n mx,\n my,\n pt,\n pb,\n pl,\n pr,\n px,\n py,\n fullWidth,\n className,\n style,\n children,\n ...rest\n}: MInlineProps) {\n const utilityStyle = getLayoutUtilityStyles({fsize})\n const revealRef = useReveal<HTMLDivElement>(reveal)\n\n return (\n <div\n ref={reveal !== undefined && reveal !== false ? revealRef : undefined}\n className={cn(\n 'inline',\n align,\n `justify-${justify}`,\n wrap,\n reveal !== undefined && reveal !== false && 'reveal',\n ...getLayoutUtilityClassNames({\n spacing,\n padding,\n fsize,\n mt,\n mb,\n ml,\n mr,\n mx,\n my,\n pt,\n pb,\n pl,\n pr,\n px,\n py,\n fullWidth,\n }),\n className\n )}\n style={{...utilityStyle, ...style}}\n {...getHiddenProps(hidden)}\n {...rest}\n >\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;;AAQA,SAAgB,EAAQ,EACpB,WAAQ,UACR,aAAU,SACV,UAAO,QACP,WACA,WACA,YACA,YACA,UACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,cACA,UACA,aACA,GAAG,KACU;CACb,IAAM,IAAe,EAAuB,EAAC,UAAM,CAAC,EAC9C,IAAY,EAA0B,EAAO;AAEnD,QACI,kBAAC,OAAD;EACI,KAAK,MAAW,KAAA,KAAa,MAAW,KAAQ,IAAY,KAAA;EAC5D,WAAW,EACP,UACA,GACA,WAAW,KACX,GACA,MAAW,KAAA,KAAa,MAAW,MAAS,UAC5C,GAAG,EAA2B;GAC1B;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACH,CAAC,EACF,EACH;EACD,OAAO;GAAC,GAAG;GAAc,GAAG;GAAM;EAClC,GAAI,EAAe,EAAO;EAC1B,GAAI;EAEH;EACC,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const e=require(`./theme-B9iSuxqh.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./useReveal-B_17PI89.cjs`),r=require(`./layoutProps-Ck4VtGm9.cjs`);let i=require(`react/jsx-runtime`);function a({align:a=`center`,justify:o=`start`,wrap:s=`wrap`,hidden:c,reveal:l,spacing:u,padding:d,fsize:f,mt:p,mb:m,ml:h,mr:g,mx:_,my:v,pt:y,pb:b,pl:x,pr:S,px:C,py:w,fullWidth:T,className:E,style:D,children:O,...k}){let A=r.n({fsize:f}),j=n.t(l);return(0,i.jsx)(`div`,{ref:l!==void 0&&l!==!1?j:void 0,className:t.t(`inline`,a,`justify-${o}`,s,l!==void 0&&l!==!1&&`reveal`,...r.t({spacing:u,padding:d,fsize:f,mt:p,mb:m,ml:h,mr:g,mx:_,my:v,pt:y,pb:b,pl:x,pr:S,px:C,py:w,fullWidth:T}),E),style:{...A,...D},...e.r(c),...k,children:O})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
|
|
2
|
+
//# sourceMappingURL=MInline-oCvhfJwM.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MInline-oCvhfJwM.cjs","names":[],"sources":["../src/components/layout/MInline/MInline.tsx"],"sourcesContent":["import type {MInlineProps} from './MInline.types'\nimport {getHiddenProps} from '../../../theme'\nimport {cn} from '../../../utils/cn'\nimport {getLayoutUtilityClassNames, getLayoutUtilityStyles} from '../../../utils/layoutProps'\nimport {useReveal} from '../../../utils/useReveal'\nimport './MInline.css'\n\n// Arrange children horizontally with shared alignment and wrapping helpers.\nexport function MInline({\n align = 'center',\n justify = 'start',\n wrap = 'wrap',\n hidden,\n reveal,\n spacing,\n padding,\n fsize,\n mt,\n mb,\n ml,\n mr,\n mx,\n my,\n pt,\n pb,\n pl,\n pr,\n px,\n py,\n fullWidth,\n className,\n style,\n children,\n ...rest\n}: MInlineProps) {\n const utilityStyle = getLayoutUtilityStyles({fsize})\n const revealRef = useReveal<HTMLDivElement>(reveal)\n\n return (\n <div\n ref={reveal !== undefined && reveal !== false ? revealRef : undefined}\n className={cn(\n 'inline',\n align,\n `justify-${justify}`,\n wrap,\n reveal !== undefined && reveal !== false && 'reveal',\n ...getLayoutUtilityClassNames({\n spacing,\n padding,\n fsize,\n mt,\n mb,\n ml,\n mr,\n mx,\n my,\n pt,\n pb,\n pl,\n pr,\n px,\n py,\n fullWidth,\n }),\n className\n )}\n style={{...utilityStyle, ...style}}\n {...getHiddenProps(hidden)}\n {...rest}\n >\n {children}\n </div>\n )\n}\n"],"mappings":"wLAQA,SAAgB,EAAQ,CACpB,QAAQ,SACR,UAAU,QACV,OAAO,OACP,SACA,SACA,UACA,UACA,QACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,YACA,YACA,QACA,WACA,GAAG,GACU,CACb,IAAM,EAAe,EAAA,EAAuB,CAAC,QAAM,CAAC,CAC9C,EAAY,EAAA,EAA0B,EAAO,CAEnD,OACI,EAAA,EAAA,KAAC,MAAD,CACI,IAAK,IAAW,IAAA,IAAa,IAAW,GAAQ,EAAY,IAAA,GAC5D,UAAW,EAAA,EACP,SACA,EACA,WAAW,IACX,EACA,IAAW,IAAA,IAAa,IAAW,IAAS,SAC5C,GAAG,EAAA,EAA2B,CAC1B,UACA,UACA,QACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,YACH,CAAC,CACF,EACH,CACD,MAAO,CAAC,GAAG,EAAc,GAAG,EAAM,CAClC,GAAI,EAAA,EAAe,EAAO,CAC1B,GAAI,EAEH,WACC,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./useGhostText-QMdO_HK6.cjs`),r=require(`./useInteractionEffect-DnEfbCrX.cjs`),i=require(`./MButton-
|
|
2
|
-
//# sourceMappingURL=MInput-
|
|
1
|
+
const e=require(`./icons-Dv1T-cF4.cjs`),t=require(`./cn-CU5TNITO.cjs`),n=require(`./useGhostText-QMdO_HK6.cjs`),r=require(`./useInteractionEffect-DnEfbCrX.cjs`),i=require(`./MButton-CtEFKjYZ.cjs`);let a=require(`react`),o=require(`react/jsx-runtime`);function s(e){return e==null?``:e.toString()}function c(e,t){let[n,r]=(0,a.useState)(()=>s(t)),i=e!==void 0;return{isControlled:i,currentValue:i?s(e):n,setCurrentValue:(0,a.useCallback)(e=>{i||r(e)},[i])}}var l=(0,a.forwardRef)(function({type:s=`text`,value:l,defaultValue:u,name:d,id:f,placeholder:p,disabled:m=!1,readOnly:h=!1,required:g=!1,autoFocus:_=!1,autoComplete:v,inputMode:y,variant:ee=`outlined`,size:te=`md`,color:b,fullWidth:ne=!1,rounded:re=!1,label:x,helperText:S,errorText:C,startIcon:w,endIcon:T,clearable:E=!1,error:D=!1,success:O=!1,maxLength:k,showCharCount:A=!1,onChange:j,onFocus:M,onBlur:N,onKeyDown:P,onClear:F,ghostOptions:I,ghostMinChars:ie=2,onGhostAccept:L,loading:R=!1,clickEffect:z=`ripple`,rippleColor:B,className:ae,style:oe,inputClassName:V,labelClassName:se},H){let[U,W]=(0,a.useState)(!1),G=(0,a.useRef)(null),{effectClassName:ce,effectLayer:le,handlePointerDown:ue}=r.t({effect:z,disabled:m||h,color:B}),{isControlled:de,currentValue:K,setCurrentValue:q}=c(l,u),J=n.t({options:I??[],value:K,minChars:ie}),Y=D||!!C,fe=K.length>0,X=Y?`color-error`:b?`color-${b}`:void 0,Z=(0,a.useCallback)(e=>{W(!0),M?.(e)},[M]),Q=(0,a.useCallback)(e=>{W(!1),N?.(e)},[N]),$=(0,a.useCallback)(e=>{q(e.target.value),j?.(e),J.reset()},[j,q,J.reset]),pe=(0,a.useCallback)(e=>{if(I&&J.hint&&J.onKeyDown(e)){let e=J.accept();q(e.value),L?.(e.value);let t=H?.current??G.current;t&&((Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set)?.call(t,e.value),t.dispatchEvent(new Event(`input`,{bubbles:!0})));return}P?.(e)},[I,J,q,L,P,H]),me=(0,a.useCallback)(()=>{q(``);let e=H?.current??G.current;e&&((Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`)?.set)?.call(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0}))),F?.(),e?.focus()},[F,H,q]),he=t.t(`container`,`field-${ee}`,`field-${te}`,U&&`focused`,Y&&`input-error`,O&&!Y&&`input-success`,X,m&&`disabled`,re&&`rounded`,ce);return(0,o.jsxs)(`div`,{className:t.t(`input`,X,ne&&`full-width`,ae),style:oe,children:[x&&(0,o.jsx)(`label`,{htmlFor:f,className:t.t(`field-label`,U&&`focused`,Y&&`error`,O&&!Y&&`success`,g&&`required`,se),children:x}),(0,o.jsxs)(`div`,{className:he,onPointerDown:ue,children:[le,w&&(0,o.jsx)(`span`,{className:`start-icon`,children:w}),I?(0,o.jsxs)(`div`,{className:`ghost-text-field`,children:[(0,o.jsx)(`input`,{ref:H??G,type:s,value:K,name:d,id:f,placeholder:p,disabled:m,readOnly:h,required:g,autoFocus:_,autoComplete:v??`off`,inputMode:y,maxLength:k,className:t.t(`field`,V),onChange:$,onFocus:Z,onBlur:Q,onKeyDown:pe,"aria-invalid":Y||void 0,"aria-describedby":C?`${f}-error`:S?`${f}-helper`:void 0}),U&&J.hint&&(0,o.jsxs)(`span`,{className:`ghost-text-overlay`,"aria-hidden":`true`,children:[(0,o.jsx)(`span`,{className:`ghost-text-typed`,children:K}),(0,o.jsx)(`span`,{className:`ghost-text-hint`,children:J.hint})]})]}):(0,o.jsx)(`input`,{ref:H??G,type:s,value:K,name:d,id:f,placeholder:p,disabled:m,readOnly:h,required:g,autoFocus:_,autoComplete:v,inputMode:y,maxLength:k,className:t.t(`field`,V),onChange:$,onFocus:Z,onBlur:Q,onKeyDown:P,"aria-invalid":Y||void 0,"aria-describedby":C?`${f}-error`:S?`${f}-helper`:void 0}),R&&(0,o.jsx)(i.r,{size:`sm`,color:b}),E&&fe&&!R&&!m&&(0,o.jsx)(`button`,{type:`button`,className:`clear-btn clear-btn-base`,onClick:me,tabIndex:-1,"aria-label":`Clear input`,children:(0,o.jsx)(e.Ii,{})}),T&&!R&&(0,o.jsx)(`span`,{className:`end-icon`,children:T})]}),(C||S||A)&&(0,o.jsxs)(`div`,{className:`bottom-row`,children:[(0,o.jsxs)(`span`,{children:[C&&(0,o.jsx)(`span`,{id:f?`${f}-error`:void 0,className:`field-error`,role:`alert`,children:C}),!C&&S&&(0,o.jsx)(`span`,{id:f?`${f}-helper`:void 0,className:`field-helper`,children:S})]}),A&&k&&(0,o.jsxs)(`span`,{className:t.t(`char-count`,K.length>k&&`over`),children:[K.length,`/`,k]})]})]})});Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});
|
|
2
|
+
//# sourceMappingURL=MInput-CpEJQ9SV.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInput-W7DJQ_ng.cjs","names":[],"sources":["../src/utils/useControllableString.ts","../src/components/inputs/MInput/MInput.tsx"],"sourcesContent":["import {useCallback, useState} from 'react'\n\ntype ControllableStringLike = string | number | readonly string[] | null | undefined\n\n// Normalize mixed input values so text-like controls always work with strings.\nfunction normalizeStringValue(value: ControllableStringLike) {\n if (value === null || value === undefined) {\n return ''\n }\n\n return value.toString()\n}\n\n// Share controlled and uncontrolled string state logic between text-like primitives.\nexport function useControllableString(value: ControllableStringLike, defaultValue?: ControllableStringLike) {\n const [internalValue, setInternalValue] = useState(() => normalizeStringValue(defaultValue))\n const isControlled = value !== undefined\n const currentValue = isControlled ? normalizeStringValue(value) : internalValue\n\n const setCurrentValue = useCallback(\n (nextValue: string) => {\n if (!isControlled) {\n setInternalValue(nextValue)\n }\n },\n [isControlled]\n )\n\n return {\n isControlled,\n currentValue,\n setCurrentValue,\n }\n}\n","import {forwardRef, useCallback, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputProps} from './MInput.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport {useInteractionEffect} from '../../../utils/useInteractionEffect'\nimport {useGhostText} from '../../../utils/useGhostText'\nimport {MSpinner} from '../../feedback'\nimport {MCloseIcon} from '../../../icons'\nimport './MInput.css'\n\n// Render the base text input used by all specialized input wrappers.\nexport const MInput = forwardRef<HTMLInputElement, MInputProps>(function MInput(\n {\n type = 'text',\n value,\n defaultValue,\n name,\n id,\n placeholder,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n autoComplete,\n inputMode,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success = false,\n maxLength,\n showCharCount = false,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onClear,\n ghostOptions,\n ghostMinChars = 2,\n onGhostAccept,\n loading = false,\n clickEffect = 'ripple',\n rippleColor,\n className,\n style,\n inputClassName,\n labelClassName,\n },\n ref\n) {\n const [focused, setFocused] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n const {effectClassName, effectLayer, handlePointerDown} = useInteractionEffect<HTMLDivElement>({\n effect: clickEffect,\n disabled: disabled || readOnly,\n color: rippleColor,\n })\n\n const {isControlled, currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const ghost = useGhostText({\n options: ghostOptions ?? [],\n value: currentValue,\n minChars: ghostMinChars,\n })\n const hasError = error || !!errorText\n const hasContent = currentValue.length > 0\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n // Mirror focus state so the wrapper can style the input consistently.\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true)\n onFocus?.(event)\n },\n [onFocus]\n )\n\n // Clear focus styles before delegating to the caller.\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(false)\n onBlur?.(event)\n },\n [onBlur]\n )\n\n // Keep uncontrolled usage working without blocking controlled integrations.\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value)\n onChange?.(event)\n ghost.reset()\n },\n [onChange, setCurrentValue, ghost.reset]\n )\n\n // Intercept keyboard events for ghost text acceptance before delegating.\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (ghostOptions && ghost.hint) {\n const accepted = ghost.onKeyDown(event)\n if (accepted) {\n const result = ghost.accept()\n setCurrentValue(result.value)\n onGhostAccept?.(result.value)\n // Fire synthetic change so controlled parents stay in sync.\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, result.value)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n return\n }\n }\n onKeyDown?.(event)\n },\n [ghostOptions, ghost, setCurrentValue, onGhostAccept, onKeyDown, ref]\n )\n\n // Reset the visible value while preserving focus for quick repeated input.\n const handleClear = useCallback(() => {\n setCurrentValue('')\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, '')\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n\n onClear?.()\n input?.focus()\n }, [onClear, ref, setCurrentValue])\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n success && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded',\n effectClassName\n )\n\n return (\n <div className={cn('input', resolvedColorClass, fullWidth && 'full-width', className)} style={style}>\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n success && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onPointerDown={handlePointerDown}>\n {effectLayer}\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n {ghostOptions ? (\n <div className=\"ghost-text-field\">\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete ?? 'off'}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n {focused && ghost.hint && (\n <span className=\"ghost-text-overlay\" aria-hidden=\"true\">\n <span className=\"ghost-text-typed\">{currentValue}</span>\n <span className=\"ghost-text-hint\">{ghost.hint}</span>\n </span>\n )}\n </div>\n ) : (\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n )}\n\n {loading && <MSpinner size=\"sm\" color={color} />}\n\n {clearable && hasContent && !loading && !disabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={handleClear}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && !loading && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(errorText || helperText || showCharCount) && (\n <div className=\"bottom-row\">\n <span>\n {errorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {errorText}\n </span>\n )}\n {!errorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n {showCharCount && maxLength && (\n <span className={cn('char-count', currentValue.length > maxLength && 'over')}>\n {currentValue.length}/{maxLength}\n </span>\n )}\n </div>\n )}\n </div>\n )\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MInput-CpEJQ9SV.cjs","names":[],"sources":["../src/utils/useControllableString.ts","../src/components/inputs/MInput/MInput.tsx"],"sourcesContent":["import {useCallback, useState} from 'react'\n\ntype ControllableStringLike = string | number | readonly string[] | null | undefined\n\n// Normalize mixed input values so text-like controls always work with strings.\nfunction normalizeStringValue(value: ControllableStringLike) {\n if (value === null || value === undefined) {\n return ''\n }\n\n return value.toString()\n}\n\n// Share controlled and uncontrolled string state logic between text-like primitives.\nexport function useControllableString(value: ControllableStringLike, defaultValue?: ControllableStringLike) {\n const [internalValue, setInternalValue] = useState(() => normalizeStringValue(defaultValue))\n const isControlled = value !== undefined\n const currentValue = isControlled ? normalizeStringValue(value) : internalValue\n\n const setCurrentValue = useCallback(\n (nextValue: string) => {\n if (!isControlled) {\n setInternalValue(nextValue)\n }\n },\n [isControlled]\n )\n\n return {\n isControlled,\n currentValue,\n setCurrentValue,\n }\n}\n","import {forwardRef, useCallback, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputProps} from './MInput.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport {useInteractionEffect} from '../../../utils/useInteractionEffect'\nimport {useGhostText} from '../../../utils/useGhostText'\nimport {MSpinner} from '../../feedback'\nimport {MCloseIcon} from '../../../icons'\nimport './MInput.css'\n\n// Render the base text input used by all specialized input wrappers.\nexport const MInput = forwardRef<HTMLInputElement, MInputProps>(function MInput(\n {\n type = 'text',\n value,\n defaultValue,\n name,\n id,\n placeholder,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n autoComplete,\n inputMode,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success = false,\n maxLength,\n showCharCount = false,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onClear,\n ghostOptions,\n ghostMinChars = 2,\n onGhostAccept,\n loading = false,\n clickEffect = 'ripple',\n rippleColor,\n className,\n style,\n inputClassName,\n labelClassName,\n },\n ref\n) {\n const [focused, setFocused] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n const {effectClassName, effectLayer, handlePointerDown} = useInteractionEffect<HTMLDivElement>({\n effect: clickEffect,\n disabled: disabled || readOnly,\n color: rippleColor,\n })\n\n const {isControlled, currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const ghost = useGhostText({\n options: ghostOptions ?? [],\n value: currentValue,\n minChars: ghostMinChars,\n })\n const hasError = error || !!errorText\n const hasContent = currentValue.length > 0\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n // Mirror focus state so the wrapper can style the input consistently.\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true)\n onFocus?.(event)\n },\n [onFocus]\n )\n\n // Clear focus styles before delegating to the caller.\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(false)\n onBlur?.(event)\n },\n [onBlur]\n )\n\n // Keep uncontrolled usage working without blocking controlled integrations.\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value)\n onChange?.(event)\n ghost.reset()\n },\n [onChange, setCurrentValue, ghost.reset]\n )\n\n // Intercept keyboard events for ghost text acceptance before delegating.\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (ghostOptions && ghost.hint) {\n const accepted = ghost.onKeyDown(event)\n if (accepted) {\n const result = ghost.accept()\n setCurrentValue(result.value)\n onGhostAccept?.(result.value)\n // Fire synthetic change so controlled parents stay in sync.\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, result.value)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n return\n }\n }\n onKeyDown?.(event)\n },\n [ghostOptions, ghost, setCurrentValue, onGhostAccept, onKeyDown, ref]\n )\n\n // Reset the visible value while preserving focus for quick repeated input.\n const handleClear = useCallback(() => {\n setCurrentValue('')\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, '')\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n\n onClear?.()\n input?.focus()\n }, [onClear, ref, setCurrentValue])\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n success && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded',\n effectClassName\n )\n\n return (\n <div className={cn('input', resolvedColorClass, fullWidth && 'full-width', className)} style={style}>\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n success && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onPointerDown={handlePointerDown}>\n {effectLayer}\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n {ghostOptions ? (\n <div className=\"ghost-text-field\">\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete ?? 'off'}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n {focused && ghost.hint && (\n <span className=\"ghost-text-overlay\" aria-hidden=\"true\">\n <span className=\"ghost-text-typed\">{currentValue}</span>\n <span className=\"ghost-text-hint\">{ghost.hint}</span>\n </span>\n )}\n </div>\n ) : (\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n )}\n\n {loading && <MSpinner size=\"sm\" color={color} />}\n\n {clearable && hasContent && !loading && !disabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={handleClear}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && !loading && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(errorText || helperText || showCharCount) && (\n <div className=\"bottom-row\">\n <span>\n {errorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {errorText}\n </span>\n )}\n {!errorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n {showCharCount && maxLength && (\n <span className={cn('char-count', currentValue.length > maxLength && 'over')}>\n {currentValue.length}/{maxLength}\n </span>\n )}\n </div>\n )}\n </div>\n )\n})\n"],"mappings":"2PAKA,SAAS,EAAqB,EAA+B,CAKzD,OAJI,GAAU,KACH,GAGJ,EAAM,UAAU,CAI3B,SAAgB,EAAsB,EAA+B,EAAuC,CACxG,GAAM,CAAC,EAAe,IAAA,EAAA,EAAA,cAAmC,EAAqB,EAAa,CAAC,CACtF,EAAe,IAAU,IAAA,GAY/B,MAAO,CACH,eACA,aAbiB,EAAe,EAAqB,EAAM,CAAG,EAc9D,iBAAA,EAAA,EAAA,aAXC,GAAsB,CACd,GACD,EAAiB,EAAU,EAGnC,CAAC,EAAa,CACjB,CAMA,CCpBL,IAAa,GAAA,EAAA,EAAA,YAAmD,SAC5D,CACI,OAAO,OACP,QACA,eACA,OACA,KACA,cACA,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,eACA,YACA,WAAU,WACV,QAAO,KACP,QACA,aAAY,GACZ,WAAU,GACV,QACA,aACA,YACA,YACA,UACA,YAAY,GACZ,QAAQ,GACR,UAAU,GACV,YACA,gBAAgB,GAChB,WACA,UACA,SACA,YACA,UACA,eACA,iBAAgB,EAChB,gBACA,UAAU,GACV,cAAc,SACd,cACA,aACA,SACA,iBACA,mBAEJ,EACF,CACE,GAAM,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,CAAC,mBAAiB,eAAa,sBAAqB,EAAA,EAAqC,CAC3F,OAAQ,EACR,SAAU,GAAY,EACtB,MAAO,EACV,CAAC,CAEI,CAAC,gBAAc,eAAc,mBAAmB,EAAsB,EAAO,EAAa,CAC1F,EAAQ,EAAA,EAAa,CACvB,QAAS,GAAgB,EAAE,CAC3B,MAAO,EACP,SAAU,GACb,CAAC,CACI,EAAW,GAAS,CAAC,CAAC,EACtB,GAAa,EAAa,OAAS,EACnC,EAAqB,EAAW,cAAgB,EAAQ,SAAS,IAAU,IAAA,GAG3E,GAAA,EAAA,EAAA,aACD,GAA8C,CAC3C,EAAW,GAAK,CAChB,IAAU,EAAM,EAEpB,CAAC,EAAQ,CACZ,CAGK,GAAA,EAAA,EAAA,aACD,GAA8C,CAC3C,EAAW,GAAM,CACjB,IAAS,EAAM,EAEnB,CAAC,EAAO,CACX,CAGK,GAAA,EAAA,EAAA,aACD,GAA+C,CAC5C,EAAgB,EAAM,OAAO,MAAM,CACnC,IAAW,EAAM,CACjB,EAAM,OAAO,EAEjB,CAAC,EAAU,EAAiB,EAAM,MAAM,CAC3C,CAGK,IAAA,EAAA,EAAA,aACD,GAAiD,CAC9C,GAAI,GAAgB,EAAM,MACL,EAAM,UAAU,EAAM,CACzB,CACV,IAAM,EAAS,EAAM,QAAQ,CAC7B,EAAgB,EAAO,MAAM,CAC7B,IAAgB,EAAO,MAAM,CAE7B,IAAM,EAAS,GAA2C,SAAW,EAAS,QAC1E,KACkB,OAAO,yBAAyB,iBAAiB,UAAW,QAAQ,EAAE,MAC7E,KAAK,EAAO,EAAO,MAAM,CACpC,EAAM,cAAc,IAAI,MAAM,QAAS,CAAC,QAAS,GAAK,CAAC,CAAC,EAE5D,OAGR,IAAY,EAAM,EAEtB,CAAC,EAAc,EAAO,EAAiB,EAAe,EAAW,EAAI,CACxE,CAGK,IAAA,EAAA,EAAA,iBAAgC,CAClC,EAAgB,GAAG,CAEnB,IAAM,EAAS,GAA2C,SAAW,EAAS,QAC1E,KACkB,OAAO,yBAAyB,iBAAiB,UAAW,QAAQ,EAAE,MAC7E,KAAK,EAAO,GAAG,CAC1B,EAAM,cAAc,IAAI,MAAM,QAAS,CAAC,QAAS,GAAK,CAAC,CAAC,EAG5D,KAAW,CACX,GAAO,OAAO,EACf,CAAC,EAAS,EAAK,EAAgB,CAAC,CAE7B,GAAmB,EAAA,EACrB,YACA,SAAS,KACT,SAAS,KACT,GAAW,UACX,GAAY,cACZ,GAAW,CAAC,GAAY,gBACxB,EACA,GAAY,WACZ,IAAW,UACX,GACH,CAED,OACI,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,EAAG,QAAS,EAAoB,IAAa,aAAc,GAAU,CAAS,kBAA9F,CACK,IACG,EAAA,EAAA,KAAC,QAAD,CACI,QAAS,EACT,UAAW,EAAA,EACP,cACA,GAAW,UACX,GAAY,QACZ,GAAW,CAAC,GAAY,UACxB,GAAY,WACZ,GACH,UAEA,EACG,CAAA,EAGZ,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,GAAkB,cAAe,YAAjD,CACK,GACA,IAAa,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,sBAAc,EAAiB,CAAA,CAE5D,GACG,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,4BAAf,EACI,EAAA,EAAA,KAAC,QAAD,CACI,IAAK,GAAO,EACN,OACN,MAAO,EACD,OACF,KACS,cACH,WACA,WACA,WACC,YACX,aAAc,GAAgB,MACnB,YACA,YACX,UAAW,EAAA,EAAG,QAAS,EAAe,CACtC,SAAU,EACV,QAAS,EACT,OAAQ,EACR,UAAW,GACX,eAAc,GAAY,IAAA,GAC1B,mBAAkB,EAAY,GAAG,EAAG,QAAU,EAAa,GAAG,EAAG,SAAW,IAAA,GAC9E,CAAA,CACD,GAAW,EAAM,OACd,EAAA,EAAA,MAAC,OAAD,CAAM,UAAU,qBAAqB,cAAY,gBAAjD,EACI,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BAAoB,EAAoB,CAAA,EACxD,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,2BAAmB,EAAM,KAAY,CAAA,CAClD,GAET,IAEN,EAAA,EAAA,KAAC,QAAD,CACI,IAAK,GAAO,EACN,OACN,MAAO,EACD,OACF,KACS,cACH,WACA,WACA,WACC,YACG,eACH,YACA,YACX,UAAW,EAAA,EAAG,QAAS,EAAe,CACtC,SAAU,EACV,QAAS,EACT,OAAQ,EACG,YACX,eAAc,GAAY,IAAA,GAC1B,mBAAkB,EAAY,GAAG,EAAG,QAAU,EAAa,GAAG,EAAG,SAAW,IAAA,GAC9E,CAAA,CAGL,IAAW,EAAA,EAAA,KAAC,EAAA,EAAD,CAAU,KAAK,KAAY,QAAS,CAAA,CAE/C,GAAa,IAAc,CAAC,GAAW,CAAC,IACrC,EAAA,EAAA,KAAC,SAAD,CACI,KAAK,SACL,UAAU,2BACV,QAAS,GACT,SAAU,GACV,aAAW,wBAEX,EAAA,EAAA,KAAC,EAAA,GAAD,EAAc,CAAA,CACT,CAAA,CAGZ,GAAW,CAAC,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,oBAAY,EAAe,CAAA,CACjE,IAEJ,GAAa,GAAc,KACzB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,sBAAf,EACI,EAAA,EAAA,MAAC,OAAD,CAAA,SAAA,CACK,IACG,EAAA,EAAA,KAAC,OAAD,CAAM,GAAI,EAAK,GAAG,EAAG,QAAU,IAAA,GAAW,UAAU,cAAc,KAAK,iBAClE,EACE,CAAA,CAEV,CAAC,GAAa,IACX,EAAA,EAAA,KAAC,OAAD,CAAM,GAAI,EAAK,GAAG,EAAG,SAAW,IAAA,GAAW,UAAU,wBAChD,EACE,CAAA,CAER,CAAA,CAAA,CACN,GAAiB,IACd,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,EAAG,aAAc,EAAa,OAAS,GAAa,OAAO,UAA5E,CACK,EAAa,OAAO,IAAE,EACpB,GAET,GAER,IAEZ"}
|
|
@@ -2,7 +2,7 @@ import { Ii as e } from "./icons-D5DK-J2C.js";
|
|
|
2
2
|
import { t } from "./cn-YER3QsV1.js";
|
|
3
3
|
import { t as n } from "./useGhostText-DG0bzcao.js";
|
|
4
4
|
import { t as r } from "./useInteractionEffect-DtpbVd77.js";
|
|
5
|
-
import { r as i } from "./MButton-
|
|
5
|
+
import { r as i } from "./MButton-Bfe4iq51.js";
|
|
6
6
|
import { forwardRef as a, useCallback as o, useRef as ee, useState as s } from "react";
|
|
7
7
|
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
8
8
|
//#region src/utils/useControllableString.ts
|
|
@@ -183,4 +183,4 @@ var f = a(function({ type: a = "text", value: u, defaultValue: f, name: p, id: m
|
|
|
183
183
|
//#endregion
|
|
184
184
|
export { d as n, f as t };
|
|
185
185
|
|
|
186
|
-
//# sourceMappingURL=MInput-
|
|
186
|
+
//# sourceMappingURL=MInput-iKIeefss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MInput-BSaKw0Uc.js","names":[],"sources":["../src/utils/useControllableString.ts","../src/components/inputs/MInput/MInput.tsx"],"sourcesContent":["import {useCallback, useState} from 'react'\n\ntype ControllableStringLike = string | number | readonly string[] | null | undefined\n\n// Normalize mixed input values so text-like controls always work with strings.\nfunction normalizeStringValue(value: ControllableStringLike) {\n if (value === null || value === undefined) {\n return ''\n }\n\n return value.toString()\n}\n\n// Share controlled and uncontrolled string state logic between text-like primitives.\nexport function useControllableString(value: ControllableStringLike, defaultValue?: ControllableStringLike) {\n const [internalValue, setInternalValue] = useState(() => normalizeStringValue(defaultValue))\n const isControlled = value !== undefined\n const currentValue = isControlled ? normalizeStringValue(value) : internalValue\n\n const setCurrentValue = useCallback(\n (nextValue: string) => {\n if (!isControlled) {\n setInternalValue(nextValue)\n }\n },\n [isControlled]\n )\n\n return {\n isControlled,\n currentValue,\n setCurrentValue,\n }\n}\n","import {forwardRef, useCallback, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputProps} from './MInput.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport {useInteractionEffect} from '../../../utils/useInteractionEffect'\nimport {useGhostText} from '../../../utils/useGhostText'\nimport {MSpinner} from '../../feedback'\nimport {MCloseIcon} from '../../../icons'\nimport './MInput.css'\n\n// Render the base text input used by all specialized input wrappers.\nexport const MInput = forwardRef<HTMLInputElement, MInputProps>(function MInput(\n {\n type = 'text',\n value,\n defaultValue,\n name,\n id,\n placeholder,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n autoComplete,\n inputMode,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success = false,\n maxLength,\n showCharCount = false,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onClear,\n ghostOptions,\n ghostMinChars = 2,\n onGhostAccept,\n loading = false,\n clickEffect = 'ripple',\n rippleColor,\n className,\n style,\n inputClassName,\n labelClassName,\n },\n ref\n) {\n const [focused, setFocused] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n const {effectClassName, effectLayer, handlePointerDown} = useInteractionEffect<HTMLDivElement>({\n effect: clickEffect,\n disabled: disabled || readOnly,\n color: rippleColor,\n })\n\n const {isControlled, currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const ghost = useGhostText({\n options: ghostOptions ?? [],\n value: currentValue,\n minChars: ghostMinChars,\n })\n const hasError = error || !!errorText\n const hasContent = currentValue.length > 0\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n // Mirror focus state so the wrapper can style the input consistently.\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true)\n onFocus?.(event)\n },\n [onFocus]\n )\n\n // Clear focus styles before delegating to the caller.\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(false)\n onBlur?.(event)\n },\n [onBlur]\n )\n\n // Keep uncontrolled usage working without blocking controlled integrations.\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value)\n onChange?.(event)\n ghost.reset()\n },\n [onChange, setCurrentValue, ghost.reset]\n )\n\n // Intercept keyboard events for ghost text acceptance before delegating.\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (ghostOptions && ghost.hint) {\n const accepted = ghost.onKeyDown(event)\n if (accepted) {\n const result = ghost.accept()\n setCurrentValue(result.value)\n onGhostAccept?.(result.value)\n // Fire synthetic change so controlled parents stay in sync.\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, result.value)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n return\n }\n }\n onKeyDown?.(event)\n },\n [ghostOptions, ghost, setCurrentValue, onGhostAccept, onKeyDown, ref]\n )\n\n // Reset the visible value while preserving focus for quick repeated input.\n const handleClear = useCallback(() => {\n setCurrentValue('')\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, '')\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n\n onClear?.()\n input?.focus()\n }, [onClear, ref, setCurrentValue])\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n success && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded',\n effectClassName\n )\n\n return (\n <div className={cn('input', resolvedColorClass, fullWidth && 'full-width', className)} style={style}>\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n success && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onPointerDown={handlePointerDown}>\n {effectLayer}\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n {ghostOptions ? (\n <div className=\"ghost-text-field\">\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete ?? 'off'}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n {focused && ghost.hint && (\n <span className=\"ghost-text-overlay\" aria-hidden=\"true\">\n <span className=\"ghost-text-typed\">{currentValue}</span>\n <span className=\"ghost-text-hint\">{ghost.hint}</span>\n </span>\n )}\n </div>\n ) : (\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n )}\n\n {loading && <MSpinner size=\"sm\" color={color} />}\n\n {clearable && hasContent && !loading && !disabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={handleClear}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && !loading && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(errorText || helperText || showCharCount) && (\n <div className=\"bottom-row\">\n <span>\n {errorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {errorText}\n </span>\n )}\n {!errorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n {showCharCount && maxLength && (\n <span className={cn('char-count', currentValue.length > maxLength && 'over')}>\n {currentValue.length}/{maxLength}\n </span>\n )}\n </div>\n )}\n </div>\n )\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MInput-iKIeefss.js","names":[],"sources":["../src/utils/useControllableString.ts","../src/components/inputs/MInput/MInput.tsx"],"sourcesContent":["import {useCallback, useState} from 'react'\n\ntype ControllableStringLike = string | number | readonly string[] | null | undefined\n\n// Normalize mixed input values so text-like controls always work with strings.\nfunction normalizeStringValue(value: ControllableStringLike) {\n if (value === null || value === undefined) {\n return ''\n }\n\n return value.toString()\n}\n\n// Share controlled and uncontrolled string state logic between text-like primitives.\nexport function useControllableString(value: ControllableStringLike, defaultValue?: ControllableStringLike) {\n const [internalValue, setInternalValue] = useState(() => normalizeStringValue(defaultValue))\n const isControlled = value !== undefined\n const currentValue = isControlled ? normalizeStringValue(value) : internalValue\n\n const setCurrentValue = useCallback(\n (nextValue: string) => {\n if (!isControlled) {\n setInternalValue(nextValue)\n }\n },\n [isControlled]\n )\n\n return {\n isControlled,\n currentValue,\n setCurrentValue,\n }\n}\n","import {forwardRef, useCallback, useRef, useState} from 'react'\nimport type * as React from 'react'\nimport type {MInputProps} from './MInput.types'\nimport {cn} from '../../../utils/cn'\nimport {useControllableString} from '../../../utils/useControllableString'\nimport {useInteractionEffect} from '../../../utils/useInteractionEffect'\nimport {useGhostText} from '../../../utils/useGhostText'\nimport {MSpinner} from '../../feedback'\nimport {MCloseIcon} from '../../../icons'\nimport './MInput.css'\n\n// Render the base text input used by all specialized input wrappers.\nexport const MInput = forwardRef<HTMLInputElement, MInputProps>(function MInput(\n {\n type = 'text',\n value,\n defaultValue,\n name,\n id,\n placeholder,\n disabled = false,\n readOnly = false,\n required = false,\n autoFocus = false,\n autoComplete,\n inputMode,\n variant = 'outlined',\n size = 'md',\n color,\n fullWidth = false,\n rounded = false,\n label,\n helperText,\n errorText,\n startIcon,\n endIcon,\n clearable = false,\n error = false,\n success = false,\n maxLength,\n showCharCount = false,\n onChange,\n onFocus,\n onBlur,\n onKeyDown,\n onClear,\n ghostOptions,\n ghostMinChars = 2,\n onGhostAccept,\n loading = false,\n clickEffect = 'ripple',\n rippleColor,\n className,\n style,\n inputClassName,\n labelClassName,\n },\n ref\n) {\n const [focused, setFocused] = useState(false)\n const inputRef = useRef<HTMLInputElement>(null)\n const {effectClassName, effectLayer, handlePointerDown} = useInteractionEffect<HTMLDivElement>({\n effect: clickEffect,\n disabled: disabled || readOnly,\n color: rippleColor,\n })\n\n const {isControlled, currentValue, setCurrentValue} = useControllableString(value, defaultValue)\n const ghost = useGhostText({\n options: ghostOptions ?? [],\n value: currentValue,\n minChars: ghostMinChars,\n })\n const hasError = error || !!errorText\n const hasContent = currentValue.length > 0\n const resolvedColorClass = hasError ? 'color-error' : color ? `color-${color}` : undefined\n\n // Mirror focus state so the wrapper can style the input consistently.\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(true)\n onFocus?.(event)\n },\n [onFocus]\n )\n\n // Clear focus styles before delegating to the caller.\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLInputElement>) => {\n setFocused(false)\n onBlur?.(event)\n },\n [onBlur]\n )\n\n // Keep uncontrolled usage working without blocking controlled integrations.\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value)\n onChange?.(event)\n ghost.reset()\n },\n [onChange, setCurrentValue, ghost.reset]\n )\n\n // Intercept keyboard events for ghost text acceptance before delegating.\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (ghostOptions && ghost.hint) {\n const accepted = ghost.onKeyDown(event)\n if (accepted) {\n const result = ghost.accept()\n setCurrentValue(result.value)\n onGhostAccept?.(result.value)\n // Fire synthetic change so controlled parents stay in sync.\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, result.value)\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n return\n }\n }\n onKeyDown?.(event)\n },\n [ghostOptions, ghost, setCurrentValue, onGhostAccept, onKeyDown, ref]\n )\n\n // Reset the visible value while preserving focus for quick repeated input.\n const handleClear = useCallback(() => {\n setCurrentValue('')\n\n const input = (ref as React.RefObject<HTMLInputElement>)?.current ?? inputRef.current\n if (input) {\n const nativeSet = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set\n nativeSet?.call(input, '')\n input.dispatchEvent(new Event('input', {bubbles: true}))\n }\n\n onClear?.()\n input?.focus()\n }, [onClear, ref, setCurrentValue])\n\n const containerClasses = cn(\n 'container',\n `field-${variant}`,\n `field-${size}`,\n focused && 'focused',\n hasError && 'input-error',\n success && !hasError && 'input-success',\n resolvedColorClass,\n disabled && 'disabled',\n rounded && 'rounded',\n effectClassName\n )\n\n return (\n <div className={cn('input', resolvedColorClass, fullWidth && 'full-width', className)} style={style}>\n {label && (\n <label\n htmlFor={id}\n className={cn(\n 'field-label',\n focused && 'focused',\n hasError && 'error',\n success && !hasError && 'success',\n required && 'required',\n labelClassName\n )}\n >\n {label}\n </label>\n )}\n\n <div className={containerClasses} onPointerDown={handlePointerDown}>\n {effectLayer}\n {startIcon && <span className=\"start-icon\">{startIcon}</span>}\n\n {ghostOptions ? (\n <div className=\"ghost-text-field\">\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete ?? 'off'}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n {focused && ghost.hint && (\n <span className=\"ghost-text-overlay\" aria-hidden=\"true\">\n <span className=\"ghost-text-typed\">{currentValue}</span>\n <span className=\"ghost-text-hint\">{ghost.hint}</span>\n </span>\n )}\n </div>\n ) : (\n <input\n ref={ref ?? inputRef}\n type={type}\n value={currentValue}\n name={name}\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n autoFocus={autoFocus}\n autoComplete={autoComplete}\n inputMode={inputMode}\n maxLength={maxLength}\n className={cn('field', inputClassName)}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={onKeyDown}\n aria-invalid={hasError || undefined}\n aria-describedby={errorText ? `${id}-error` : helperText ? `${id}-helper` : undefined}\n />\n )}\n\n {loading && <MSpinner size=\"sm\" color={color} />}\n\n {clearable && hasContent && !loading && !disabled && (\n <button\n type=\"button\"\n className=\"clear-btn clear-btn-base\"\n onClick={handleClear}\n tabIndex={-1}\n aria-label=\"Clear input\"\n >\n <MCloseIcon />\n </button>\n )}\n\n {endIcon && !loading && <span className=\"end-icon\">{endIcon}</span>}\n </div>\n\n {(errorText || helperText || showCharCount) && (\n <div className=\"bottom-row\">\n <span>\n {errorText && (\n <span id={id ? `${id}-error` : undefined} className=\"field-error\" role=\"alert\">\n {errorText}\n </span>\n )}\n {!errorText && helperText && (\n <span id={id ? `${id}-helper` : undefined} className=\"field-helper\">\n {helperText}\n </span>\n )}\n </span>\n {showCharCount && maxLength && (\n <span className={cn('char-count', currentValue.length > maxLength && 'over')}>\n {currentValue.length}/{maxLength}\n </span>\n )}\n </div>\n )}\n </div>\n )\n})\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Fi as e, Ii as t, Mi as n } from "./icons-D5DK-J2C.js";
|
|
2
2
|
import { t as r } from "./cn-YER3QsV1.js";
|
|
3
|
-
import { n as i, t as a } from "./MInput-
|
|
3
|
+
import { n as i, t as a } from "./MInput-iKIeefss.js";
|
|
4
4
|
import { i as o, r as s } from "./MDropdownMenu-CxBhYxQb.js";
|
|
5
5
|
import { forwardRef as c, useCallback as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
6
6
|
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
@@ -317,4 +317,4 @@ var w = c(function({ length: t = 3, validateOnBlur: n = !0, validateOnChange: i
|
|
|
317
317
|
//#endregion
|
|
318
318
|
export { x as n, w as t };
|
|
319
319
|
|
|
320
|
-
//# sourceMappingURL=MInputCVC-
|
|
320
|
+
//# sourceMappingURL=MInputCVC-BpGTqkQx.js.map
|