@12-apps/ui 6.15.0 → 6.16.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/dist/_internal/components/data-display/AsyncStateContainer/AsyncStateContainer.js +4 -4
- package/dist/_internal/components/data-display/CardKit/CardKebab.js +3 -3
- package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js +3 -3
- package/dist/_internal/components/data-display/CardKit/use-row-confirm.js +3 -3
- package/dist/_internal/components/data-display/Chart/Chart.js +4 -4
- package/dist/_internal/components/data-display/Chart/SpecChart.js +5 -5
- package/dist/_internal/components/data-display/Chart/chart-context.js +2 -2
- package/dist/_internal/components/data-display/Chart/chart-renderers.js +3 -3
- package/dist/_internal/components/data-display/DataGrid/DataGrid.js +1 -1
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +30 -29
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +40 -39
- package/dist/_internal/components/data-display/DataViews/DeleteViewDialog.js +3 -3
- package/dist/_internal/components/data-display/DataViews/ManageViewsDialog.js +4 -4
- package/dist/_internal/components/data-display/DataViews/SaveViewModal.js +6 -5
- package/dist/_internal/components/data-display/DataViews/base-list-card-geometry.js +2 -2
- package/dist/_internal/components/data-display/DataViews/base-list-card.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-category-pill.js +11 -10
- package/dist/_internal/components/data-display/DataViews/data-views-columns.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-display-panel.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-empty.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-export.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-filter-panel.js +12 -11
- package/dist/_internal/components/data-display/DataViews/data-views-grid-bodies.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-grid-helpers.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +27 -26
- package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +15 -14
- package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +1 -1
- package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-select-all-strip.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +9 -9
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +10 -9
- package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +8 -8
- package/dist/_internal/components/data-display/DataViews/data-views-view-nav.js +3 -3
- package/dist/_internal/components/data-display/DataViews/use-data-views-state.js +5 -5
- package/dist/_internal/components/data-display/DataViews/use-saved-views-controller.js +2 -2
- package/dist/_internal/components/data-display/InteractiveTooltip/InteractiveTooltip.js +2 -2
- package/dist/_internal/components/data-display/LazyImage/LazyImage.js +3 -3
- package/dist/_internal/components/data-display/Lightbox/Lightbox.js +3 -3
- package/dist/_internal/components/data-display/LoadingState/LoadingState.js +3 -3
- package/dist/_internal/components/data-display/Sheet/Sheet.hooks.js +2 -2
- package/dist/_internal/components/data-display/Sheet/Sheet.js +4 -4
- package/dist/_internal/components/data-display/StatCard/StatCard.js +3 -3
- package/dist/_internal/components/data-display/index.js +21 -21
- package/dist/_internal/components/feedback/ConfirmAction/ConfirmButton.js +3 -3
- package/dist/_internal/components/feedback/TutorialOverlay/TutorialOverlay.js +2 -2
- package/dist/_internal/components/feedback/index.js +7 -7
- package/dist/_internal/components/form/AddressAutocomplete/AddressAutocomplete.hooks.js +4 -4
- package/dist/_internal/components/form/AddressAutocomplete/AddressAutocomplete.js +10 -9
- package/dist/_internal/components/form/AddressAutocomplete/AddressAutocompleteField.js +4 -3
- package/dist/_internal/components/form/AddressAutocomplete/AddressFallbackField.js +3 -2
- package/dist/_internal/components/form/AddressAutocomplete/AddressInputField.js +3 -2
- package/dist/_internal/components/form/AddressAutocomplete/AddressTextField.js +2 -1
- package/dist/_internal/components/form/Button/Button.js +2 -2
- package/dist/_internal/components/form/Calendar/Calendar.js +4 -4
- package/dist/_internal/components/form/Calendar/CalendarDayCell.js +2 -2
- package/dist/_internal/components/form/Calendar/CalendarMonth.js +3 -3
- package/dist/_internal/components/form/CategorySelect/CategoryPanel.js +7 -6
- package/dist/_internal/components/form/CategorySelect/CategoryPanelFoot.js +3 -2
- package/dist/_internal/components/form/CategorySelect/CategoryPanelHead.js +3 -2
- package/dist/_internal/components/form/CategorySelect/CategoryPanelList.js +4 -3
- package/dist/_internal/components/form/CategorySelect/CategoryRows.js +3 -2
- package/dist/_internal/components/form/CategorySelect/CategorySelect.js +9 -8
- package/dist/_internal/components/form/CategorySelect/CategorySelect.styles.js +2 -1
- package/dist/_internal/components/form/CategorySelect/CategoryTrigger.js +3 -2
- package/dist/_internal/components/form/CepField/CepField.js +4 -3
- package/dist/_internal/components/form/CodeEditor/CodeEditor.js +2 -1
- package/dist/_internal/components/form/CreatableSelect/CreatableSelect.js +2 -1
- package/dist/_internal/components/form/DateRangePicker/DateRangePicker.js +6 -6
- package/dist/_internal/components/form/Input/Input.js +3 -2
- package/dist/_internal/components/form/Input/Input.styles.js +2 -1
- package/dist/_internal/components/form/InputOTP/InputOTP.js +3 -2
- package/dist/_internal/components/form/InputOTP/InputOTP.styles.js +2 -1
- package/dist/_internal/components/form/PhoneInput/PhoneInput.hooks.js +2 -2
- package/dist/_internal/components/form/PhoneInput/PhoneInput.js +4 -3
- package/dist/_internal/components/form/RadioGroup/RadioGroup.js +4 -3
- package/dist/_internal/components/form/RadioGroup/RadioGroup.styles.js +2 -1
- package/dist/_internal/components/form/RadioGroup/RadioGroup.variants.js +3 -2
- package/dist/_internal/components/form/RichTextEditor/RichTextEditor.js +3 -2
- package/dist/_internal/components/form/Select/Select.js +2 -1
- package/dist/_internal/components/form/Textarea/Textarea.js +3 -2
- package/dist/_internal/components/form/Textarea/Textarea.styles.js +2 -1
- package/dist/_internal/components/form/Textarea/TextareaRichEditor.js +5 -2
- package/dist/_internal/components/form/Textarea/TextareaRichEditor.js.map +1 -1
- package/dist/_internal/components/form/Toggle/Toggle.js +3 -2
- package/dist/_internal/components/form/Toggle/Toggle.styles.js +2 -1
- package/dist/_internal/components/form/index.js +37 -36
- package/dist/_internal/components/form/total-form/Fields/CategoryField.js +10 -9
- package/dist/_internal/components/form/total-form/Fields/CepField.js +5 -4
- package/dist/_internal/components/form/total-form/Fields/SelectField.js +3 -2
- package/dist/_internal/components/form/total-form/Fields/TextField.js +4 -3
- package/dist/_internal/components/form/total-form/Fields/index.js +20 -19
- package/dist/_internal/components/form/total-form/SubmitButton.js +3 -3
- package/dist/_internal/components/index.js +69 -68
- package/dist/_internal/components/layout/Skeleton/Skeleton.js +2 -2
- package/dist/_internal/components/layout/index.js +5 -5
- package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js +7 -7
- package/dist/_internal/components/navigation/CommandPalette/CommandPalette.js +2 -2
- package/dist/_internal/components/navigation/index.js +9 -9
- package/dist/_internal/en-US.form.js +3 -1
- package/dist/_internal/pt-BR.form.js +3 -1
- package/dist/_internal/social-login-button/social-login-button.js +4 -3
- package/dist/_internal/tokens/field-edge.js +10 -0
- package/dist/_internal/tokens/field-edge.js.map +1 -0
- package/dist/_internal/user-avatar/user-avatar.js +3 -3
- package/dist/charts.js +5 -5
- package/dist/{chunk-4VPCZFF3.js → chunk-2W4CIWTW.js} +7 -4
- package/dist/chunk-2W4CIWTW.js.map +1 -0
- package/dist/{chunk-BQYIJOKS.js → chunk-2ZDTGI5V.js} +2 -2
- package/dist/{chunk-VLNM4BTH.js → chunk-3LO5JWTC.js} +3 -3
- package/dist/{chunk-MYOFULG4.js → chunk-3ORFVLI3.js} +2 -2
- package/dist/{chunk-J72KWTHC.js → chunk-45N6LXUU.js} +5 -3
- package/dist/chunk-45N6LXUU.js.map +1 -0
- package/dist/{chunk-MJOXIENM.js → chunk-45OIUWGO.js} +7 -7
- package/dist/{chunk-S7CAXRRP.js → chunk-4Y65Q3CR.js} +2 -2
- package/dist/{chunk-XN5AYC5S.js → chunk-5SYD23V4.js} +7 -4
- package/dist/chunk-5SYD23V4.js.map +1 -0
- package/dist/{chunk-ZLNKBKUB.js → chunk-5VVM2PPV.js} +3 -3
- package/dist/{chunk-4KNJQFDJ.js → chunk-64IEKEMQ.js} +5 -2
- package/dist/chunk-64IEKEMQ.js.map +1 -0
- package/dist/{chunk-CRHQN42I.js → chunk-6CBYPMYQ.js} +4 -4
- package/dist/{chunk-WXVHZHSJ.js → chunk-6RFL7HGI.js} +3 -3
- package/dist/{chunk-GDUIT5I6.js → chunk-6TYSEAAT.js} +2 -2
- package/dist/{chunk-FXMZMX5E.js → chunk-6XPNJLXE.js} +6 -2
- package/dist/chunk-6XPNJLXE.js.map +1 -0
- package/dist/{chunk-C34GFGA5.js → chunk-72NOM3O2.js} +2 -2
- package/dist/{chunk-LNQ6QMKG.js → chunk-7DBFEZRC.js} +6 -3
- package/dist/chunk-7DBFEZRC.js.map +1 -0
- package/dist/{chunk-3BR2CLAM.js → chunk-A3KY6NUA.js} +2 -2
- package/dist/{chunk-5QQWAIZO.js → chunk-ACDYA5WC.js} +6 -2
- package/dist/chunk-ACDYA5WC.js.map +1 -0
- package/dist/{chunk-2I5B5NNT.js → chunk-AX7UFG2U.js} +2 -2
- package/dist/{chunk-PXH24VIP.js → chunk-B6IURHSZ.js} +4 -4
- package/dist/{chunk-TXHJX2NG.js → chunk-BGYLL467.js} +4 -4
- package/dist/{chunk-CZJLWCEG.js → chunk-BPYPUEM5.js} +2 -2
- package/dist/{chunk-QISJKBCM.js → chunk-CDJPDZCA.js} +2 -2
- package/dist/{chunk-5VZPVDUF.js → chunk-COSJTD6Z.js} +2 -2
- package/dist/{chunk-Q6KXTTC4.js → chunk-CXA6UNFF.js} +5 -5
- package/dist/{chunk-MNZ2NT5A.js → chunk-DCEMUZJQ.js} +6 -2
- package/dist/chunk-DCEMUZJQ.js.map +1 -0
- package/dist/{chunk-NKCKIGRL.js → chunk-DGMR3IMM.js} +3 -3
- package/dist/{chunk-MUFI3ZXS.js → chunk-DQIQKIEA.js} +2 -2
- package/dist/{chunk-747HBFGH.js → chunk-EE2LBAJH.js} +7 -7
- package/dist/{chunk-RXYSP56G.js → chunk-ELYLG4F7.js} +3 -3
- package/dist/{chunk-6YFMGNSA.js → chunk-ENK4XGKF.js} +2 -2
- package/dist/{chunk-QTPKACVO.js → chunk-EY4LPLIR.js} +2 -2
- package/dist/{chunk-XCT2ZLA6.js → chunk-FCOEJCUP.js} +6 -2
- package/dist/chunk-FCOEJCUP.js.map +1 -0
- package/dist/{chunk-LDMXHDZ5.js → chunk-FF55LRSV.js} +2 -2
- package/dist/{chunk-HGBZZDP6.js → chunk-FJHNNSD3.js} +3 -3
- package/dist/{chunk-ONZPM6FP.js → chunk-G7CFUI4I.js} +2 -2
- package/dist/{chunk-KDIWFARU.js → chunk-GBB6XQ56.js} +2 -2
- package/dist/{chunk-WWNXJMBX.js → chunk-GFBNUWT5.js} +3 -3
- package/dist/{chunk-PLOOVF43.js → chunk-GGE7Y53F.js} +2 -2
- package/dist/{chunk-7SZ3PFZW.js → chunk-HBAPVB7T.js} +2 -2
- package/dist/{chunk-V7TPSQOH.js → chunk-HBZIN6IQ.js} +2 -2
- package/dist/{chunk-LS42VJAI.js → chunk-HEDOL2RV.js} +2 -2
- package/dist/{chunk-3AOOI2NR.js → chunk-HR7YTBR7.js} +4 -4
- package/dist/{chunk-6HLRXICF.js → chunk-IAQFQNBL.js} +4 -4
- package/dist/{chunk-6B5VS2ER.js → chunk-INGPH3YQ.js} +8 -2
- package/dist/chunk-INGPH3YQ.js.map +1 -0
- package/dist/{chunk-PUBPZOQJ.js → chunk-IPE5FFFD.js} +2 -2
- package/dist/{chunk-NVOQLMYF.js → chunk-IRDGC7FK.js} +4 -4
- package/dist/{chunk-YVX7GGS4.js → chunk-JPDKRGYI.js} +2 -2
- package/dist/{chunk-LFB4H7Y6.js → chunk-KNNBIXWJ.js} +2 -2
- package/dist/{chunk-47DCYF4G.js → chunk-KSF7TLXH.js} +3 -3
- package/dist/{chunk-I2S2GHEG.js → chunk-LUWATXU4.js} +4 -4
- package/dist/{chunk-J7VY6KNP.js → chunk-M3RIC6JI.js} +2 -2
- package/dist/{chunk-434EDUHY.js → chunk-MHFJBNDP.js} +8 -8
- package/dist/chunk-MLOWPVVW.js +44 -0
- package/dist/chunk-MLOWPVVW.js.map +1 -0
- package/dist/{chunk-5KZESOK6.js → chunk-MUAVYVDJ.js} +6 -6
- package/dist/{chunk-PRAGFBHW.js → chunk-N4WANJI3.js} +2 -2
- package/dist/{chunk-LR2ECQSZ.js → chunk-O3OU2PPT.js} +2 -2
- package/dist/{chunk-YROTCW42.js → chunk-O6J4CKS5.js} +2 -2
- package/dist/{chunk-FSMQF5P5.js → chunk-P2U7C2S7.js} +16 -7
- package/dist/chunk-P2U7C2S7.js.map +1 -0
- package/dist/{chunk-UPR7F3ML.js → chunk-PKJKA4CU.js} +2 -2
- package/dist/{chunk-NI2ISQZI.js → chunk-PLK7UGO6.js} +3 -3
- package/dist/{chunk-U7SO3N42.js → chunk-PMFW55F5.js} +3 -3
- package/dist/{chunk-GPVB3FQP.js → chunk-PU3AAKRR.js} +2 -2
- package/dist/{chunk-UN5D73A4.js → chunk-QETBO7EC.js} +2 -2
- package/dist/{chunk-OLZTGVBT.js → chunk-REMK55JI.js} +4 -4
- package/dist/{chunk-3AEY5TYV.js → chunk-RMSH2I3O.js} +8 -4
- package/dist/chunk-RMSH2I3O.js.map +1 -0
- package/dist/{chunk-CPNSVIIB.js → chunk-RP3W6IQO.js} +5 -5
- package/dist/{chunk-4QQVIGRG.js → chunk-RQ4EQ5FJ.js} +2 -2
- package/dist/{chunk-QL7L6RHR.js → chunk-RX6DWIIW.js} +2 -2
- package/dist/{chunk-RGBS6N72.js → chunk-SEH7KOVG.js} +2 -2
- package/dist/{chunk-LUMF63BM.js → chunk-SFAP5EH5.js} +4 -4
- package/dist/{chunk-GJQYM3PM.js → chunk-SHQWIDD5.js} +4 -4
- package/dist/{chunk-NQCYVYP3.js → chunk-SLYZMJEL.js} +2 -2
- package/dist/{chunk-HKROKM3Z.js → chunk-SM3NRN7L.js} +2 -2
- package/dist/{chunk-XSJWN3WH.js → chunk-T53L42XW.js} +7 -7
- package/dist/{chunk-NJS4WCHA.js → chunk-TPUIIZN2.js} +10 -10
- package/dist/{chunk-ZPIFVTJA.js → chunk-TUAIPMU7.js} +5 -5
- package/dist/{chunk-SQAU5QUY.js → chunk-UMDXGIRZ.js} +6 -3
- package/dist/chunk-UMDXGIRZ.js.map +1 -0
- package/dist/{chunk-ZYRW7FVY.js → chunk-URWGRPL7.js} +6 -2
- package/dist/chunk-URWGRPL7.js.map +1 -0
- package/dist/{chunk-B5LNUTGZ.js → chunk-VJKRJYZL.js} +2 -2
- package/dist/{chunk-Q6HJMJBH.js → chunk-VSLUFBMT.js} +7 -3
- package/dist/chunk-VSLUFBMT.js.map +1 -0
- package/dist/{chunk-7EGHRNIA.js → chunk-VVXRIPV5.js} +8 -8
- package/dist/{chunk-HOJL2GKW.js → chunk-WC3W36AM.js} +4 -4
- package/dist/{chunk-ARI5ZU75.js → chunk-WEH5TCPE.js} +5 -5
- package/dist/{chunk-CESQKLIR.js → chunk-WFX5GASM.js} +2 -2
- package/dist/{chunk-HIZCBYEP.js → chunk-WR6F6J43.js} +5 -5
- package/dist/{chunk-MHJ52VJE.js → chunk-XSKVBGCZ.js} +5 -5
- package/dist/{chunk-SE4Z3P6D.js → chunk-XULTDO56.js} +2 -2
- package/dist/{chunk-H54E2ZGJ.js → chunk-YLSDFW5O.js} +8 -2
- package/dist/chunk-YLSDFW5O.js.map +1 -0
- package/dist/{chunk-K25MT3GZ.js → chunk-YVW7VPK4.js} +2 -2
- package/dist/{chunk-XQ2BNVXL.js → chunk-ZBNTFWTG.js} +2 -2
- package/dist/data-display/AsyncStateContainer.js +4 -4
- package/dist/data-display/CardKit.js +7 -7
- package/dist/data-display/Chart.js +5 -5
- package/dist/data-display/DataGrid.js +1 -1
- package/dist/data-display/DataViews.js +46 -45
- package/dist/data-display/InteractiveTooltip.js +2 -2
- package/dist/data-display/LazyImage.js +3 -3
- package/dist/data-display/Lightbox.js +3 -3
- package/dist/data-display/LoadingState.js +3 -3
- package/dist/data-display/Sheet.js +4 -4
- package/dist/data-display/StatCard.js +3 -3
- package/dist/en-US.js +11 -9
- package/dist/feedback/ConfirmAction.js +5 -5
- package/dist/feedback/TutorialOverlay.js +2 -2
- package/dist/form/AddressAutocomplete.js +10 -9
- package/dist/form/Button.js +2 -2
- package/dist/form/Calendar.js +4 -4
- package/dist/form/CategorySelect.js +9 -8
- package/dist/form/CepField.js +4 -3
- package/dist/form/CodeEditor.js +2 -1
- package/dist/form/CreatableSelect.js +2 -1
- package/dist/form/DateRangePicker.js +6 -6
- package/dist/form/Input.js +3 -2
- package/dist/form/InputOTP.js +3 -2
- package/dist/form/PhoneInput.js +4 -3
- package/dist/form/RadioGroup.js +4 -3
- package/dist/form/RichTextEditor.js +3 -2
- package/dist/form/Select.js +2 -1
- package/dist/form/Textarea.js +3 -2
- package/dist/form/Toggle.js +3 -2
- package/dist/form/total-form.js +23 -22
- package/dist/layout/ContentToolbar.js +3 -3
- package/dist/layout/Skeleton.js +2 -2
- package/dist/locales.js +17 -10
- package/dist/locales.js.map +1 -1
- package/dist/navigation/AppHeader.js +7 -7
- package/dist/navigation/CommandPalette.js +2 -2
- package/dist/pt-BR.js +3 -1
- package/dist/social-login-button.js +4 -3
- package/dist/types/components/form/AddressAutocomplete/AddressTextField.d.ts.map +1 -1
- package/dist/types/components/form/CategorySelect/CategorySelect.styles.d.ts.map +1 -1
- package/dist/types/components/form/CodeEditor/CodeEditor.d.ts.map +1 -1
- package/dist/types/components/form/CreatableSelect/CreatableSelect.d.ts.map +1 -1
- package/dist/types/components/form/Input/Input.styles.d.ts.map +1 -1
- package/dist/types/components/form/InputOTP/InputOTP.styles.d.ts.map +1 -1
- package/dist/types/components/form/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/dist/types/components/form/RadioGroup/RadioGroup.styles.d.ts.map +1 -1
- package/dist/types/components/form/RichTextEditor/RichTextEditor.d.ts.map +1 -1
- package/dist/types/components/form/Select/Select.d.ts.map +1 -1
- package/dist/types/components/form/Textarea/Textarea.d.ts.map +1 -1
- package/dist/types/components/form/Textarea/Textarea.styles.d.ts.map +1 -1
- package/dist/types/components/form/Textarea/TextareaRichEditor.d.ts.map +1 -1
- package/dist/types/components/form/Toggle/Toggle.styles.d.ts.map +1 -1
- package/dist/types/copy/form.d.ts +12 -0
- package/dist/types/copy/form.d.ts.map +1 -1
- package/dist/types/en-US.form.d.ts +2 -1
- package/dist/types/en-US.form.d.ts.map +1 -1
- package/dist/types/locales.d.ts +2 -1
- package/dist/types/locales.d.ts.map +1 -1
- package/dist/types/pt-BR.form.d.ts +2 -1
- package/dist/types/pt-BR.form.d.ts.map +1 -1
- package/dist/types/social-login-button/social-login-button.d.ts +24 -0
- package/dist/types/social-login-button/social-login-button.d.ts.map +1 -1
- package/dist/types/tokens/field-edge.d.ts +80 -0
- package/dist/types/tokens/field-edge.d.ts.map +1 -0
- package/dist/user-avatar.js +3 -3
- package/package.json +1 -1
- package/src/components/form/AddressAutocomplete/AddressTextField.tsx +3 -1
- package/src/components/form/CategorySelect/CategorySelect.styles.ts +3 -1
- package/src/components/form/CodeEditor/CodeEditor.tsx +3 -1
- package/src/components/form/CreatableSelect/CreatableSelect.tsx +4 -2
- package/src/components/form/Input/Input.styles.ts +5 -3
- package/src/components/form/InputOTP/InputOTP.styles.ts +3 -1
- package/src/components/form/PhoneInput/PhoneInput.tsx +3 -1
- package/src/components/form/RadioGroup/RadioGroup.styles.ts +4 -2
- package/src/components/form/RichTextEditor/RichTextEditor.tsx +3 -1
- package/src/components/form/Select/Select.tsx +4 -2
- package/src/components/form/Textarea/Textarea.styles.ts +3 -1
- package/src/components/form/Textarea/Textarea.tsx +4 -2
- package/src/components/form/Textarea/TextareaRichEditor.tsx +3 -1
- package/src/components/form/Toggle/Toggle.styles.ts +3 -1
- package/src/copy/form.ts +13 -0
- package/src/en-US.form.ts +7 -0
- package/src/locales.ts +6 -1
- package/src/pt-BR.form.ts +7 -0
- package/src/social-login-button/social-login-button.tsx +39 -6
- package/src/tokens/field-edge.ts +141 -0
- package/dist/chunk-3AEY5TYV.js.map +0 -1
- package/dist/chunk-4KNJQFDJ.js.map +0 -1
- package/dist/chunk-4VPCZFF3.js.map +0 -1
- package/dist/chunk-5QQWAIZO.js.map +0 -1
- package/dist/chunk-6B5VS2ER.js.map +0 -1
- package/dist/chunk-FSMQF5P5.js.map +0 -1
- package/dist/chunk-FXMZMX5E.js.map +0 -1
- package/dist/chunk-H54E2ZGJ.js.map +0 -1
- package/dist/chunk-J72KWTHC.js.map +0 -1
- package/dist/chunk-LNQ6QMKG.js.map +0 -1
- package/dist/chunk-MNZ2NT5A.js.map +0 -1
- package/dist/chunk-Q6HJMJBH.js.map +0 -1
- package/dist/chunk-SQAU5QUY.js.map +0 -1
- package/dist/chunk-XCT2ZLA6.js.map +0 -1
- package/dist/chunk-XN5AYC5S.js.map +0 -1
- package/dist/chunk-ZYRW7FVY.js.map +0 -1
- /package/dist/{chunk-BQYIJOKS.js.map → chunk-2ZDTGI5V.js.map} +0 -0
- /package/dist/{chunk-VLNM4BTH.js.map → chunk-3LO5JWTC.js.map} +0 -0
- /package/dist/{chunk-MYOFULG4.js.map → chunk-3ORFVLI3.js.map} +0 -0
- /package/dist/{chunk-MJOXIENM.js.map → chunk-45OIUWGO.js.map} +0 -0
- /package/dist/{chunk-S7CAXRRP.js.map → chunk-4Y65Q3CR.js.map} +0 -0
- /package/dist/{chunk-ZLNKBKUB.js.map → chunk-5VVM2PPV.js.map} +0 -0
- /package/dist/{chunk-CRHQN42I.js.map → chunk-6CBYPMYQ.js.map} +0 -0
- /package/dist/{chunk-WXVHZHSJ.js.map → chunk-6RFL7HGI.js.map} +0 -0
- /package/dist/{chunk-GDUIT5I6.js.map → chunk-6TYSEAAT.js.map} +0 -0
- /package/dist/{chunk-C34GFGA5.js.map → chunk-72NOM3O2.js.map} +0 -0
- /package/dist/{chunk-3BR2CLAM.js.map → chunk-A3KY6NUA.js.map} +0 -0
- /package/dist/{chunk-2I5B5NNT.js.map → chunk-AX7UFG2U.js.map} +0 -0
- /package/dist/{chunk-PXH24VIP.js.map → chunk-B6IURHSZ.js.map} +0 -0
- /package/dist/{chunk-TXHJX2NG.js.map → chunk-BGYLL467.js.map} +0 -0
- /package/dist/{chunk-CZJLWCEG.js.map → chunk-BPYPUEM5.js.map} +0 -0
- /package/dist/{chunk-QISJKBCM.js.map → chunk-CDJPDZCA.js.map} +0 -0
- /package/dist/{chunk-5VZPVDUF.js.map → chunk-COSJTD6Z.js.map} +0 -0
- /package/dist/{chunk-Q6KXTTC4.js.map → chunk-CXA6UNFF.js.map} +0 -0
- /package/dist/{chunk-NKCKIGRL.js.map → chunk-DGMR3IMM.js.map} +0 -0
- /package/dist/{chunk-MUFI3ZXS.js.map → chunk-DQIQKIEA.js.map} +0 -0
- /package/dist/{chunk-747HBFGH.js.map → chunk-EE2LBAJH.js.map} +0 -0
- /package/dist/{chunk-RXYSP56G.js.map → chunk-ELYLG4F7.js.map} +0 -0
- /package/dist/{chunk-6YFMGNSA.js.map → chunk-ENK4XGKF.js.map} +0 -0
- /package/dist/{chunk-QTPKACVO.js.map → chunk-EY4LPLIR.js.map} +0 -0
- /package/dist/{chunk-LDMXHDZ5.js.map → chunk-FF55LRSV.js.map} +0 -0
- /package/dist/{chunk-HGBZZDP6.js.map → chunk-FJHNNSD3.js.map} +0 -0
- /package/dist/{chunk-ONZPM6FP.js.map → chunk-G7CFUI4I.js.map} +0 -0
- /package/dist/{chunk-KDIWFARU.js.map → chunk-GBB6XQ56.js.map} +0 -0
- /package/dist/{chunk-WWNXJMBX.js.map → chunk-GFBNUWT5.js.map} +0 -0
- /package/dist/{chunk-PLOOVF43.js.map → chunk-GGE7Y53F.js.map} +0 -0
- /package/dist/{chunk-7SZ3PFZW.js.map → chunk-HBAPVB7T.js.map} +0 -0
- /package/dist/{chunk-V7TPSQOH.js.map → chunk-HBZIN6IQ.js.map} +0 -0
- /package/dist/{chunk-LS42VJAI.js.map → chunk-HEDOL2RV.js.map} +0 -0
- /package/dist/{chunk-3AOOI2NR.js.map → chunk-HR7YTBR7.js.map} +0 -0
- /package/dist/{chunk-6HLRXICF.js.map → chunk-IAQFQNBL.js.map} +0 -0
- /package/dist/{chunk-PUBPZOQJ.js.map → chunk-IPE5FFFD.js.map} +0 -0
- /package/dist/{chunk-NVOQLMYF.js.map → chunk-IRDGC7FK.js.map} +0 -0
- /package/dist/{chunk-YVX7GGS4.js.map → chunk-JPDKRGYI.js.map} +0 -0
- /package/dist/{chunk-LFB4H7Y6.js.map → chunk-KNNBIXWJ.js.map} +0 -0
- /package/dist/{chunk-47DCYF4G.js.map → chunk-KSF7TLXH.js.map} +0 -0
- /package/dist/{chunk-I2S2GHEG.js.map → chunk-LUWATXU4.js.map} +0 -0
- /package/dist/{chunk-J7VY6KNP.js.map → chunk-M3RIC6JI.js.map} +0 -0
- /package/dist/{chunk-434EDUHY.js.map → chunk-MHFJBNDP.js.map} +0 -0
- /package/dist/{chunk-5KZESOK6.js.map → chunk-MUAVYVDJ.js.map} +0 -0
- /package/dist/{chunk-PRAGFBHW.js.map → chunk-N4WANJI3.js.map} +0 -0
- /package/dist/{chunk-LR2ECQSZ.js.map → chunk-O3OU2PPT.js.map} +0 -0
- /package/dist/{chunk-YROTCW42.js.map → chunk-O6J4CKS5.js.map} +0 -0
- /package/dist/{chunk-UPR7F3ML.js.map → chunk-PKJKA4CU.js.map} +0 -0
- /package/dist/{chunk-NI2ISQZI.js.map → chunk-PLK7UGO6.js.map} +0 -0
- /package/dist/{chunk-U7SO3N42.js.map → chunk-PMFW55F5.js.map} +0 -0
- /package/dist/{chunk-GPVB3FQP.js.map → chunk-PU3AAKRR.js.map} +0 -0
- /package/dist/{chunk-UN5D73A4.js.map → chunk-QETBO7EC.js.map} +0 -0
- /package/dist/{chunk-OLZTGVBT.js.map → chunk-REMK55JI.js.map} +0 -0
- /package/dist/{chunk-CPNSVIIB.js.map → chunk-RP3W6IQO.js.map} +0 -0
- /package/dist/{chunk-4QQVIGRG.js.map → chunk-RQ4EQ5FJ.js.map} +0 -0
- /package/dist/{chunk-QL7L6RHR.js.map → chunk-RX6DWIIW.js.map} +0 -0
- /package/dist/{chunk-RGBS6N72.js.map → chunk-SEH7KOVG.js.map} +0 -0
- /package/dist/{chunk-LUMF63BM.js.map → chunk-SFAP5EH5.js.map} +0 -0
- /package/dist/{chunk-GJQYM3PM.js.map → chunk-SHQWIDD5.js.map} +0 -0
- /package/dist/{chunk-NQCYVYP3.js.map → chunk-SLYZMJEL.js.map} +0 -0
- /package/dist/{chunk-HKROKM3Z.js.map → chunk-SM3NRN7L.js.map} +0 -0
- /package/dist/{chunk-XSJWN3WH.js.map → chunk-T53L42XW.js.map} +0 -0
- /package/dist/{chunk-NJS4WCHA.js.map → chunk-TPUIIZN2.js.map} +0 -0
- /package/dist/{chunk-ZPIFVTJA.js.map → chunk-TUAIPMU7.js.map} +0 -0
- /package/dist/{chunk-B5LNUTGZ.js.map → chunk-VJKRJYZL.js.map} +0 -0
- /package/dist/{chunk-7EGHRNIA.js.map → chunk-VVXRIPV5.js.map} +0 -0
- /package/dist/{chunk-HOJL2GKW.js.map → chunk-WC3W36AM.js.map} +0 -0
- /package/dist/{chunk-ARI5ZU75.js.map → chunk-WEH5TCPE.js.map} +0 -0
- /package/dist/{chunk-CESQKLIR.js.map → chunk-WFX5GASM.js.map} +0 -0
- /package/dist/{chunk-HIZCBYEP.js.map → chunk-WR6F6J43.js.map} +0 -0
- /package/dist/{chunk-MHJ52VJE.js.map → chunk-XSKVBGCZ.js.map} +0 -0
- /package/dist/{chunk-SE4Z3P6D.js.map → chunk-XULTDO56.js.map} +0 -0
- /package/dist/{chunk-K25MT3GZ.js.map → chunk-YVW7VPK4.js.map} +0 -0
- /package/dist/{chunk-XQ2BNVXL.js.map → chunk-ZBNTFWTG.js.map} +0 -0
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import {
|
|
2
|
+
darken,
|
|
3
|
+
decomposeColor,
|
|
4
|
+
getContrastRatio,
|
|
5
|
+
getLuminance,
|
|
6
|
+
hslToRgb,
|
|
7
|
+
lighten,
|
|
8
|
+
recomposeColor,
|
|
9
|
+
} from '@mui/material/styles/index.js';
|
|
10
|
+
import type { Theme } from '@mui/material/styles/index.js';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* THE EDGE THAT TELLS YOU WHERE A FIELD IS.
|
|
14
|
+
*
|
|
15
|
+
* Every outlined control in this package drew its resting border from
|
|
16
|
+
* `alpha(theme.palette.divider, 0.23)` — or 0.2, or 0.18, or 0.42 for the
|
|
17
|
+
* underline. On the MUI default theme that expression is harmless, and that is
|
|
18
|
+
* exactly why it survived: MUI's own light `divider` is `rgba(0, 0, 0, 0.12)`,
|
|
19
|
+
* and `alpha()` REPLACES the alpha channel rather than multiplying it, so
|
|
20
|
+
* `alpha(divider, 0.23)` resolves to `rgba(0, 0, 0, 0.23)` — byte for byte the
|
|
21
|
+
* border MUI's own `OutlinedInput` ships. The line reads like a restatement of
|
|
22
|
+
* the default because, against the default, it is one.
|
|
23
|
+
*
|
|
24
|
+
* Give it a theme whose `divider` is an OPAQUE hex and the same expression
|
|
25
|
+
* collapses. A themed divider is already a hairline — a pale warm cream, a pale
|
|
26
|
+
* green-grey — chosen to separate two rows INSIDE a card. Fading that to 23%
|
|
27
|
+
* over the card it sits on leaves a border the same colour as the card:
|
|
28
|
+
*
|
|
29
|
+
* | theme | resolved border | ratio |
|
|
30
|
+
* |--------------------------------|-----------------|-------|
|
|
31
|
+
* | MUI default (`rgba(0,0,0,.12)`)| `#C4C4C4` | 1.74:1|
|
|
32
|
+
* | a warm hairline `#EBD9C7` | `#FAF6F2` | 1.08:1|
|
|
33
|
+
* | a cool hairline `#D7DDD5` | `#EDF0EC` | 1.06:1|
|
|
34
|
+
*
|
|
35
|
+
* 1.06:1 is not a faint border, it is no border: the field is invisible until
|
|
36
|
+
* you click into it. Both failing rows are real adopter themes, and neither
|
|
37
|
+
* adopter did anything wrong — they set `palette.divider`, which is what a theme
|
|
38
|
+
* is for.
|
|
39
|
+
*
|
|
40
|
+
* **So the fault is using `divider` for this at all**, not the alpha on top of
|
|
41
|
+
* it. Even at FULL strength those hairlines are 1.26:1 and 1.27:1 against their
|
|
42
|
+
* own paper. A row separator and a control boundary are different jobs with
|
|
43
|
+
* different floors, and only one of them has a number in the spec.
|
|
44
|
+
*
|
|
45
|
+
* ## The floor, and why it is measured rather than picked
|
|
46
|
+
*
|
|
47
|
+
* WCAG 2.1 SC 1.4.11 (Non-text Contrast) puts a control's own boundary at
|
|
48
|
+
* {@link MIN_UI_CONTRAST}. A hex cannot satisfy that on its own, because the
|
|
49
|
+
* ratio is a fact about a PAIR — the same border is fine on white and gone on a
|
|
50
|
+
* dark card. So {@link fieldEdge} takes the theme's hairline as a SEED and walks
|
|
51
|
+
* it away from the surface until it clears, which means:
|
|
52
|
+
*
|
|
53
|
+
* - a theme whose divider already clears keeps its own colour, untouched;
|
|
54
|
+
* - one that does not gets the nearest tone of ITS OWN hairline that does, so
|
|
55
|
+
* the border still looks like the theme's, just visible;
|
|
56
|
+
* - dark mode needs no second table — the walk lightens on a dark surface for
|
|
57
|
+
* the same reason it darkens on a light one.
|
|
58
|
+
*
|
|
59
|
+
* This is the argument `readableInk` makes for text in `@12-apps/app-shell`,
|
|
60
|
+
* applied to the boundary rather than the ink. It is not imported from there:
|
|
61
|
+
* that package depends on THIS one, so the edge would be a cycle.
|
|
62
|
+
*
|
|
63
|
+
* ## What this does NOT touch
|
|
64
|
+
*
|
|
65
|
+
* Hover and focus, which every control already draws in `primary.main` — a
|
|
66
|
+
* corrected brand colour that clears the floor by construction. The resting
|
|
67
|
+
* state was the only one you could not see, and it is the one that matters,
|
|
68
|
+
* because it is the state a field is in before anyone has found it.
|
|
69
|
+
*/
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* WCAG 2.1 SC 1.4.11 — the contrast a control's own boundary owes the surface
|
|
73
|
+
* behind it.
|
|
74
|
+
*
|
|
75
|
+
* 3:1 rather than the 4.5:1 the same spec asks of body text: a border is a
|
|
76
|
+
* shape, not a glyph, so it stays findable at a lower ratio. It is a FLOOR and
|
|
77
|
+
* not a target — {@link fieldEdge} stops at the first tone that clears it, so a
|
|
78
|
+
* theme with a stronger hairline keeps the stronger one.
|
|
79
|
+
*/
|
|
80
|
+
export const MIN_UI_CONTRAST = 3;
|
|
81
|
+
|
|
82
|
+
/** How far one step of the walk moves, and how many steps before it gives up. */
|
|
83
|
+
const STEP = 0.05;
|
|
84
|
+
const MAX_STEPS = 20;
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* A colour as an opaque `rgb()`, with any translucency resolved against
|
|
88
|
+
* `surface`.
|
|
89
|
+
*
|
|
90
|
+
* Needed because `getContrastRatio` reads the channels it is given and ignores
|
|
91
|
+
* the alpha, so handing it an `rgba()` measures a colour nobody sees. Every
|
|
92
|
+
* failing border above was translucent, so skipping this would compute the ratio
|
|
93
|
+
* of the hairline itself — 1.26:1, still a failure, but the wrong number for the
|
|
94
|
+
* wrong reason.
|
|
95
|
+
*/
|
|
96
|
+
function flatten(colour: string, surface: string): string {
|
|
97
|
+
const decomposed = decomposeColor(colour);
|
|
98
|
+
const rgb = decomposed.type.startsWith('hsl')
|
|
99
|
+
? decomposeColor(hslToRgb(colour))
|
|
100
|
+
: decomposed;
|
|
101
|
+
const [r, g, b] = rgb.values;
|
|
102
|
+
const alpha = rgb.values[3] ?? 1;
|
|
103
|
+
if (alpha >= 1) return recomposeColor({ type: 'rgb', values: [r, g, b] });
|
|
104
|
+
|
|
105
|
+
const behind = decomposeColor(surface);
|
|
106
|
+
const base = behind.type.startsWith('hsl') ? decomposeColor(hslToRgb(surface)) : behind;
|
|
107
|
+
const blend = (fg: number, bg: number): number => Math.round(alpha * fg + (1 - alpha) * bg);
|
|
108
|
+
return recomposeColor({
|
|
109
|
+
type: 'rgb',
|
|
110
|
+
values: [blend(r, base.values[0]), blend(g, base.values[1]), blend(b, base.values[2])],
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* The resting boundary for a form control on `surface`.
|
|
116
|
+
*
|
|
117
|
+
* `surface` defaults to `background.paper` because that is what a field sits on
|
|
118
|
+
* in the overwhelming majority of cases — a dialog, a card, a form panel. A
|
|
119
|
+
* control on a deliberately different ground (a tinted strip, a glass pane over
|
|
120
|
+
* a photo) should pass the ground it is actually on; the answer is only as good
|
|
121
|
+
* as the pair it is given.
|
|
122
|
+
*/
|
|
123
|
+
export function fieldEdge(theme: Theme, surface?: string): string {
|
|
124
|
+
const ground = flatten(surface ?? theme.palette.background.paper, '#FFFFFF');
|
|
125
|
+
const seed = flatten(theme.palette.divider, ground);
|
|
126
|
+
if (getContrastRatio(seed, ground) >= MIN_UI_CONTRAST) return seed;
|
|
127
|
+
|
|
128
|
+
// Away from the surface, whichever way that is — so one rule serves both
|
|
129
|
+
// modes, and a dark card in a light theme is still handled by the pair rather
|
|
130
|
+
// than by `palette.mode`.
|
|
131
|
+
const away = getLuminance(ground) > 0.5 ? darken : lighten;
|
|
132
|
+
for (let step = 1; step <= MAX_STEPS; step += 1) {
|
|
133
|
+
// From the SEED each time rather than compounding the previous result, so
|
|
134
|
+
// the walk lands on the nearest passing tone instead of overshooting past it.
|
|
135
|
+
const candidate = away(seed, step * STEP);
|
|
136
|
+
if (getContrastRatio(candidate, ground) >= MIN_UI_CONTRAST) return candidate;
|
|
137
|
+
}
|
|
138
|
+
// Unreachable for any real surface — black clears 21:1 on white and white
|
|
139
|
+
// clears it on black — but a caller must never be handed `undefined`.
|
|
140
|
+
return getLuminance(ground) > 0.5 ? '#000000' : '#FFFFFF';
|
|
141
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/Input/Input.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { InputProps } from './Input.types';\n\ntype InputVariant = NonNullable<InputProps['variant']>;\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 10px currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\n/** Our four variants map onto MUI's three; `glass` and `gradient` restyle an outline. */\nexport const muiVariantFor = (variant: InputVariant): 'outlined' | 'filled' | 'standard' => {\n switch (variant) {\n case 'underline':\n return 'standard';\n case 'glass':\n case 'gradient':\n return 'outlined';\n default:\n return variant as 'outlined' | 'filled' | 'standard';\n }\n};\n\n// MUI gives a text field two heights, so the five house stops are drawn as two\n// plus padding: `xs` tightens below small, `lg`/`xl` open up above medium.\nexport const SIZE_MAP = {\n xs: { size: 'small' as const, sx: { '& .MuiInputBase-input': { padding: '6px 10px' } } },\n sm: { size: 'small' as const },\n md: { size: 'medium' as const },\n lg: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '16px 14px' } } },\n xl: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '20px 16px' } } },\n};\n\nexport const glowStyles = (theme: Theme): CSSObject => ({\n '& .MuiInputBase-root': {\n boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,\n '&.Mui-focused': {\n boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,\n },\n },\n});\n\n// A bar behind the field rather than a border on it, so it can pulse outward\n// without the input resizing.\nexport const pulseStyles = (theme: Theme): CSSObject => ({\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '0',\n right: '0',\n height: '56px',\n transform: 'translateY(-50%)',\n borderRadius: theme.spacing(0.5),\n backgroundColor: theme.palette.primary.main,\n opacity: 0.3,\n animation: `${pulseAnimation} 2s infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n },\n});\n\nexport const floatingLabelStyles = (theme: Theme): CSSObject => ({\n '& .MuiInputLabel-root': {\n transform: 'translate(14px, 16px) scale(1)',\n '&.MuiInputLabel-shrink': {\n transform: 'translate(14px, -9px) scale(0.75)',\n backgroundColor: theme.palette.background.paper,\n padding: '0 4px',\n },\n },\n});\n\nexport const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject => {\n switch (variant) {\n case 'glass':\n return {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n '&:hover': {\n backgroundColor: alpha(theme.palette.background.paper, 0.15),\n borderColor: alpha(theme.palette.primary.main, 0.3),\n },\n '&.Mui-focused': {\n backgroundColor: alpha(theme.palette.background.paper, 0.2),\n borderColor: theme.palette.primary.main,\n boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,\n },\n };\n case 'underline':\n return {\n '&:before': {\n borderBottomColor: alpha(theme.palette.divider, 0.42),\n },\n '&:hover:not(.Mui-disabled):before': {\n borderBottomColor: theme.palette.primary.main,\n },\n '&:after': {\n borderBottomColor: theme.palette.primary.main,\n },\n };\n case 'gradient':\n return gradientStyles(theme);\n default:\n return {};\n }\n};\n\n// The border is a gradient painted behind the field and masked to a 2px ring,\n// since CSS cannot put a gradient on `border-color` directly.\nconst gradientStyles = (theme: Theme): CSSObject => ({\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n border: `2px solid transparent`,\n backgroundOrigin: 'border-box',\n backgroundClip: 'padding-box, border-box',\n position: 'relative',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n maskComposite: 'exclude',\n padding: '2px',\n zIndex: -1,\n },\n '&:hover': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`,\n },\n '&.Mui-focused': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,\n '&::before': {\n background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n },\n },\n});\n\nexport const outlinedStyles = (theme: Theme): CSSObject => ({\n '& fieldset': {\n borderColor: alpha(theme.palette.divider, 0.23),\n },\n '&:hover fieldset': {\n borderColor: theme.palette.primary.main,\n },\n '&.Mui-focused fieldset': {\n borderColor: theme.palette.primary.main,\n borderWidth: 2,\n },\n '&.Mui-error fieldset': {\n borderColor: theme.palette.error.main,\n },\n});\n\nexport const filledStyles = (theme: Theme): CSSObject => ({\n backgroundColor: alpha(theme.palette.action.hover, 0.04),\n '&:hover': {\n backgroundColor: alpha(theme.palette.action.hover, 0.08),\n },\n '&.Mui-focused': {\n backgroundColor: alpha(theme.palette.action.hover, 0.12),\n },\n});\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/CodeEditor/CodeEditor.tsx"],"sourcesContent":["import Editor from '@monaco-editor/react';\nimport Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { editor } from 'monaco-editor';\nimport type { FC} from 'react';\nimport React, { } from 'react';\n\nimport { makeTestId, resolveCodeEditorProps } from './CodeEditor.helpers';\nimport { useCodeEditor } from './CodeEditor.hooks';\nimport type { CodeEditorProps } from './CodeEditor.types';\nimport { EditorToolbar } from './CodeEditorToolbar';\n\n// Styled components\nconst EditorContainer = styled(Paper)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n backdropFilter: 'blur(10px)',\n WebkitBackdropFilter: 'blur(10px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n borderRadius: theme.shape.borderRadius * 2,\n overflow: 'hidden' }));\n\nconst EditorWrapper = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'fullscreen' })<{ fullscreen: boolean }>(({ theme, fullscreen }) => ({\n position: 'relative',\n flex: 1,\n minHeight: 200,\n ...(fullscreen && {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: theme.zIndex.modal,\n background: theme.palette.background.paper }) }));\n\nconst PlaceholderOverlay = styled(Box)(({ theme }) => ({\n position: 'absolute',\n top: theme.spacing(2),\n left: theme.spacing(8),\n color: theme.palette.text.disabled,\n fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", Consolas, source-code-pro, monospace',\n fontSize: '0.875rem',\n pointerEvents: 'none',\n userSelect: 'none' }));\n\n// Monaco editor themes\nconst EditorLoading: FC<{ label: string }> = ({ label }) => (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n color: 'text.secondary' }}\n >\n <Typography variant=\"body2\">{label}</Typography>\n </Box>\n);\n\nconst buildEditorOptions = ({\n minimap,\n fontSize,\n isWrapped,\n lineNumbers,\n readOnly }: {\n minimap?: boolean;\n fontSize: number;\n isWrapped: boolean;\n lineNumbers: boolean;\n readOnly: boolean;\n}): editor.IStandaloneEditorConstructionOptions => ({\n readOnly,\n // Explicitly convert minimap to boolean to ensure Monaco receives a definitive value\n // This prevents undefined from being interpreted differently in various environments\n minimap: { enabled: minimap === true },\n fontSize,\n wordWrap: isWrapped ? 'on' : 'off',\n lineNumbers: lineNumbers ? 'on' : 'off',\n scrollBeyondLastLine: false,\n automaticLayout: true,\n tabSize: 2,\n insertSpaces: true,\n folding: true,\n foldingStrategy: 'indentation',\n showFoldingControls: 'mouseover',\n smoothScrolling: true,\n cursorBlinking: 'smooth',\n cursorSmoothCaretAnimation: 'on',\n renderWhitespace: 'selection',\n renderLineHighlight: 'all',\n selectOnLineNumbers: true,\n roundedSelection: true,\n padding: { top: 16, bottom: 16 },\n fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", Consolas, source-code-pro, monospace',\n fontLigatures: true });\n\nexport const CodeEditor: FC<CodeEditorProps> = (componentProps) => {\n const {\n language,\n height,\n theme: themeProp,\n value,\n onChange,\n readOnly,\n lineNumbers,\n minimap,\n fontSize,\n wordWrap,\n showToolbar,\n autoFormat,\n placeholder,\n onSave,\n dataTestId,\n copy } = resolveCodeEditorProps(componentProps);\n\n const testId = makeTestId(dataTestId);\n const editor = useCodeEditor({ themeProp, wordWrap, autoFormat, readOnly, onSave });\n\n const editorOptions = buildEditorOptions({\n minimap,\n fontSize,\n isWrapped: editor.isWrapped,\n lineNumbers,\n readOnly });\n\n return (\n <EditorContainer elevation={2} data-testid={dataTestId || 'code-editor'}>\n {showToolbar && (\n <EditorToolbar\n copy={copy}\n language={language}\n readOnly={readOnly}\n isWrapped={editor.isWrapped}\n isCopied={editor.isCopied}\n isFullscreen={editor.isFullscreen}\n dataTestId={dataTestId}\n onFormat={editor.handleFormat}\n onCopy={editor.handleCopy}\n onWrapToggle={editor.handleWrapToggle}\n onFullscreenToggle={editor.handleFullscreenToggle}\n />\n )}\n\n <EditorWrapper fullscreen={editor.isFullscreen} data-testid={testId('editor-wrapper')}>\n {placeholder && !value && (\n <PlaceholderOverlay data-testid={testId('placeholder')}>{placeholder}</PlaceholderOverlay>\n )}\n\n <Editor\n height={editor.isFullscreen ? '100vh' : height}\n language={language}\n value={value}\n onChange={(newValue) => onChange?.(newValue || '')}\n theme={editor.editorTheme}\n options={editorOptions}\n onMount={editor.handleEditorDidMount}\n loading={<EditorLoading label={copy.loading} />}\n />\n </EditorWrapper>\n </EditorContainer>\n );\n};\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/Textarea/Textarea.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport TextareaAutosize from '@mui/material/TextareaAutosize/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { lazy, Suspense, useState } from 'react';\n\nimport {\n getColorFromTheme,\n textareaEmphasisStyles } from './Textarea.styles';\n\n/**\n * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).\n *\n * It renders only for `variant === 'rich'`, but a static import made every\n * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the\n * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That\n * is not theoretical: an adopting storefront imports this entry for a one-line\n * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here\n * while nothing on that critical path renders a tooltip at all.\n *\n * `variant` is a prop, so the branch cannot be decided at build time and no\n * amount of tree-shaking removes it. A lazy boundary is what expresses \"only\n * the rich variant pays\", and it costs the rich variant one microtask it can\n * afford — it is a text editor a user has already chosen to open, never a\n * first-paint element.\n */\nconst TextareaRichEditor = lazy(async () => ({\n default: (await import('./TextareaRichEditor')).TextareaRichEditor }));\nimport type { TextareaProps } from './Textarea.types';\n\n// Interface for styled component props\ninterface StyledTextareaProps {\n customVariant?: string;\n customColor?: string;\n customSize?: string;\n glow?: boolean;\n glass?: boolean;\n gradient?: boolean;\n error?: boolean;\n theme?: Theme;\n}\n\n// Glow animation for enhanced visual effects\nconst StyledTextarea = styled(TextareaAutosize, {\n shouldForwardProp: (prop) =>\n !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient', 'error'].includes(\n prop as string,\n ) })<StyledTextareaProps>(({\n theme,\n customVariant,\n customColor = 'primary',\n customSize = 'md',\n glow,\n glass,\n gradient,\n error }) => {\n if (!theme) return {};\n const colorPalette = getColorFromTheme(theme, customColor);\n const errorColor = theme.palette.error;\n\n const sizeMap = {\n xs: { padding: '6px 8px', fontSize: '0.75rem', minHeight: '60px' },\n sm: { padding: '8px 10px', fontSize: '0.875rem', minHeight: '80px' },\n md: { padding: '10px 12px', fontSize: '1rem', minHeight: '100px' },\n lg: { padding: '12px 14px', fontSize: '1.125rem', minHeight: '120px' },\n xl: { padding: '14px 16px', fontSize: '1.25rem', minHeight: '140px' } };\n\n const baseStyles = {\n width: '100%',\n fontFamily: theme.typography.fontFamily,\n borderRadius: theme.spacing(1),\n border: `2px solid ${error ? errorColor.main : theme.palette.divider}`,\n backgroundColor: theme.palette.background.paper,\n color: theme.palette.text.primary,\n transition: 'all 0.3s ease',\n resize: customVariant === 'resizable' ? 'vertical' : 'none',\n outline: 'none',\n ...sizeMap[customSize as keyof typeof sizeMap],\n\n '&::placeholder': {\n color: theme.palette.text.secondary,\n opacity: 0.7 },\n\n '&:hover': {\n borderColor: error ? errorColor.dark : colorPalette.main,\n backgroundColor: alpha(theme.palette.background.paper, 0.8) },\n\n '&:focus': {\n borderColor: error ? errorColor.main : colorPalette.main,\n backgroundColor: theme.palette.background.paper,\n boxShadow: `0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };\n\n // Glass morphism effect\n return {\n ...baseStyles,\n ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow }) };\n});\n\nconst StyledLabel = styled(InputLabel, {\n shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string) })<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n marginBottom: theme.spacing(1),\n fontWeight: 500,\n color: error ? theme.palette.error.main : theme.palette.text.primary,\n ...(glass && {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(10px)',\n padding: '4px 8px',\n borderRadius: '4px',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n display: 'inline-block' }) }));\n\n// IconWrapper - replaced with inline Box component for better TypeScript compatibility\n// const IconWrapper = styled(Box)<{ position: 'start' | 'end' }>(({ theme, position }) => {\n// const positionStyles = position === 'start' ? { left: '12px' } : { right: '12px' };\n// return {\n// position: 'absolute' as const,\n// top: '12px',\n// ...positionStyles,\n// color: theme.palette.text.secondary,\n// pointerEvents: 'none' as const,\n// zIndex: 1,\n// };\n// });\n\n// Rich text toolbar styling\n\nconst ICON_GUTTER = '40px';\n\nconst TEXTAREA_DEFAULTS = {\n variant: 'default',\n color: 'primary',\n size: 'md',\n error: false,\n glassLabel: false,\n glow: false,\n glass: false,\n gradient: false,\n iconPosition: 'start',\n minRows: 3 } satisfies Partial<TextareaProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TextareaProps): Partial<TextareaProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<TextareaProps>;\n\n// Label above, helper text below — identical for the plain and rich variants,\n// which previously duplicated both.\nconst TextareaShell: React.FC<{\n testId?: string;\n label?: React.ReactNode;\n glassLabel: boolean;\n error: boolean;\n helperText?: React.ReactNode;\n children: React.ReactNode;\n}> = ({ testId, label, glassLabel, error, helperText, children }) => (\n <Box\n sx={{ position: 'relative', width: '100%' }}\n data-testid={testId ? `${testId}-wrapper` : undefined}\n >\n {label && (\n <StyledLabel glass={glassLabel} error={error}>\n {label}\n </StyledLabel>\n )}\n\n {children}\n\n {helperText && (\n <FormHelperText error={error} sx={{ mt: 1 }}>\n {helperText}\n </FormHelperText>\n )}\n </Box>\n);\n\nconst TextareaIcon: React.FC<{\n icon?: React.ReactNode;\n iconPosition: 'start' | 'end';\n}> = ({ icon, iconPosition }) => (\n <Box\n sx={{\n position: 'absolute',\n top: '12px',\n ...(iconPosition === 'start' ? { left: '12px' } : { right: '12px' }),\n color: 'text.secondary',\n pointerEvents: 'none',\n zIndex: 1 }}\n >\n {icon}\n </Box>\n);\n\n/**\n * The rich variant, kept out of the main component's body.\n *\n * Two reasons rather than one: the `Suspense` boundary and its props belong\n * together with the lazy import above, and the component that renders every\n * OTHER variant stays inside the size the complexity gate allows without\n * anything being suppressed.\n */\nfunction RichVariant({\n shell,\n editor }: {\n shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;\n editor: React.ComponentProps<typeof TextareaRichEditor>;\n}): React.JSX.Element {\n return (\n <TextareaShell {...shell}>\n {/*\n `null` rather than a spinner: the editor resolves from the same document\n the caller is already rendering, so a fallback would flash for a frame\n and read as a glitch rather than as loading.\n */}\n <Suspense fallback={null}>\n <TextareaRichEditor {...editor} />\n </Suspense>\n </TextareaShell>\n );\n}\n\nexport const Textarea: React.FC<TextareaProps> = (textareaProps) => {\n const {\n variant,\n color,\n size,\n error,\n helperText,\n label,\n glassLabel,\n glow,\n glass,\n gradient,\n icon,\n iconPosition,\n minRows,\n maxRows,\n style,\n 'data-testid': dataTestId,\n dataTestId: dataTestIdCamelCase,\n ...props\n } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };\n\n // Read off the props rather than the merged object: the spread widens every\n // key to optional, which would lose what the variant union already proved.\n const { richEditorCopy } = textareaProps;\n\n const [richTextValue, setRichTextValue] = useState('');\n const hasIcon = Boolean(icon);\n const testId = dataTestId || dataTestIdCamelCase;\n\n const textareaStyle = {\n ...style,\n // Same gap either side; only which side it applies to changes. The previous\n // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose\n // two branches were identical.\n ...(hasIcon && {\n [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };\n\n // If rich text variant, use the rich text editor\n if (variant === 'rich' && richEditorCopy) {\n return (\n <RichVariant\n shell={{ testId, label, glassLabel, error, helperText }}\n editor={{\n copy: richEditorCopy,\n value: richTextValue,\n onChange: setRichTextValue,\n placeholder: props.placeholder,\n error,\n glass,\n color,\n characterLimit: props.maxLength }}\n />\n );\n }\n\n return (\n <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n <Box sx={{ position: 'relative' }}>\n {hasIcon && <TextareaIcon icon={icon} iconPosition={iconPosition} />}\n\n <StyledTextarea\n customVariant={variant}\n customColor={color}\n customSize={size}\n glow={glow}\n glass={glass}\n gradient={gradient}\n error={error}\n minRows={variant === 'autosize' ? minRows : undefined}\n maxRows={variant === 'autosize' ? maxRows : undefined}\n style={textareaStyle}\n aria-label={label || props['aria-label']}\n data-testid={testId}\n {...props}\n />\n </Box>\n </TextareaShell>\n );\n};\n\nTextarea.displayName = 'Textarea';\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\ninterface ColorPalette {\n main: string;\n dark?: string;\n light?: string;\n contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\n main: theme.palette.grey[700],\n dark: theme.palette.grey[800],\n light: theme.palette.grey[500],\n contrastText: '#fff',\n});\n\n/** `danger` is this component's name for the error palette. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n const colorMap: Record<string, ColorPalette> = {\n primary: theme.palette.primary,\n secondary: theme.palette.secondary,\n success: theme.palette.success,\n warning: theme.palette.warning,\n info: theme.palette.info,\n danger: theme.palette.error,\n };\n\n return colorMap[color] || theme.palette.primary;\n};\n\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n if (color === 'neutral') {\n return neutralPalette(theme);\n }\n\n const palette = namedPalette(theme, color);\n const { primary } = theme.palette;\n\n return {\n main: palette.main || primary.main,\n dark: palette.dark || palette.main || primary.dark,\n light: palette.light || palette.main || primary.light,\n contrastText: palette.contrastText || '#fff',\n };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Each slot is a square, so width and height always match. */\nconst SIZES: Record<SizeKey, { side: string; fontSize: string }> = {\n xs: { side: '32px', fontSize: '0.75rem' },\n sm: { side: '40px', fontSize: '0.875rem' },\n md: { side: '48px', fontSize: '1rem' },\n lg: { side: '56px', fontSize: '1.125rem' },\n xl: { side: '64px', fontSize: '1.25rem' },\n};\n\nexport interface OtpSlotFlags {\n customColor?: string;\n customSize?: string;\n glass?: boolean;\n gradient?: boolean;\n}\n\nexport const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {\n const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;\n const palette = getColorFromTheme(theme, customColor);\n const { side, fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;\n\n return {\n width: side,\n height: side,\n '& .MuiOutlinedInput-root': {\n width: side,\n height: side,\n fontSize,\n fontWeight: 600,\n textAlign: 'center',\n borderRadius: theme.spacing(1),\n ...(glass && {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n '& fieldset': { border: `1px solid ${alpha(theme.palette.divider, 0.2)}` },\n }),\n ...(gradient && {\n '&.Mui-focused fieldset': {\n background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,\n borderWidth: '2px',\n },\n }),\n '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },\n '&:hover fieldset': { borderColor: palette.main },\n '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },\n },\n };\n};\n"],"mappings":";AAAA,SAAS,aAAa;AAWtB,IAAM,iBAAiB,CAAC,WAAgC;AAAA,EACtD,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,EAC5B,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,EAC5B,OAAO,MAAM,QAAQ,KAAK,GAAG;AAAA,EAC7B,cAAc;AAChB;AAGA,IAAM,eAAe,CAAC,OAAc,UAAgC;AAClE,QAAM,WAAyC;AAAA,IAC7C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAEA,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AACvE,MAAI,UAAU,WAAW;AACvB,WAAO,eAAe,KAAK;AAAA,EAC7B;AAEA,QAAM,UAAU,aAAa,OAAO,KAAK;AACzC,QAAM,EAAE,QAAQ,IAAI,MAAM;AAE1B,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,IAC9C,OAAO,QAAQ,SAAS,QAAQ,QAAQ,QAAQ;AAAA,IAChD,cAAc,QAAQ,gBAAgB;AAAA,EACxC;AACF;AAKA,IAAM,QAA6D;AAAA,EACjE,IAAI,EAAE,MAAM,QAAQ,UAAU,UAAU;AAAA,EACxC,IAAI,EAAE,MAAM,QAAQ,UAAU,WAAW;AAAA,EACzC,IAAI,EAAE,MAAM,QAAQ,UAAU,OAAO;AAAA,EACrC,IAAI,EAAE,MAAM,QAAQ,UAAU,WAAW;AAAA,EACzC,IAAI,EAAE,MAAM,QAAQ,UAAU,UAAU;AAC1C;AASO,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,cAAc,WAAW,aAAa,MAAM,OAAO,SAAS,IAAI;AACxE,QAAM,UAAU,kBAAkB,OAAO,WAAW;AACpD,QAAM,EAAE,MAAM,SAAS,IAAI,MAAM,UAAqB,KAAK,MAAM;AAEjE,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,4BAA4B;AAAA,MAC1B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc,MAAM,QAAQ,CAAC;AAAA,MAC7B,GAAI,SAAS;AAAA,QACX,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB;AAAA,QAChB,cAAc,EAAE,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC,GAAG;AAAA,MAC3E;AAAA,MACA,GAAI,YAAY;AAAA,QACd,0BAA0B;AAAA,UACxB,YAAY,2BAA2B,QAAQ,IAAI,KAAK,QAAQ,KAAK;AAAA,UACrE,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,WAAW,EAAE,WAAW,UAAU,SAAS,GAAG,YAAY,UAAU;AAAA,MACpE,oBAAoB,EAAE,aAAa,QAAQ,KAAK;AAAA,MAChD,0BAA0B,EAAE,aAAa,QAAQ,MAAM,aAAa,MAAM;AAAA,IAC5E;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/en-US.form.ts"],"sourcesContent":["/**\n * The en-US pack for the form family. Split the same way `pt-BR.form.ts` is —\n * see `en-US.ts` for why.\n */\nimport type {\n AddressAutocompleteCopy,\n AutocompleteCopy,\n CodeEditorCopy,\n PasswordStrengthCopy,\n PhoneInputCopy,\n RichEditorToolbarCopy,\n UploadButtonCopy,\n} from './copy';\n\nexport const EN_US_ADDRESS_AUTOCOMPLETE_COPY: AddressAutocompleteCopy = {\n loadingMaps: \"Loading Google Maps…\",\n mapsLoadFailed:\n \"Could not load the Google Maps API. Check the API key and the internet connection.\",\n useCurrentLocation: \"Use my current location\",\n};\n\nexport const EN_US_AUTOCOMPLETE_COPY: AutocompleteCopy = {\n loading: \"Loading…\",\n noResults: \"No results found\",\n placeholder: \"Type to search…\",\n};\n\nexport const EN_US_CODE_EDITOR_COPY: CodeEditorCopy = {\n loading: \"Loading the editor…\",\n readOnly: \"Read only\",\n // The shortcut is the editor's own binding and is not translated — it is what\n // the reader must press, not something they read.\n formatCode: \"Format code (Ctrl+Shift+F)\",\n enableWrap: \"Wrap lines\",\n disableWrap: \"Do not wrap lines\",\n copyToClipboard: \"Copy to clipboard\",\n copied: \"Copied!\",\n enterFullscreen: \"Full screen\",\n exitFullscreen: \"Leave full screen\",\n};\n\nexport const EN_US_PASSWORD_STRENGTH_COPY: PasswordStrengthCopy = {\n strengthHeading: \"Password strength\",\n requirementsHeading: \"Requirements:\",\n suggestionsHeading: \"Suggestions:\",\n bands: {\n veryWeak: \"Very weak\",\n weak: \"Weak\",\n fair: \"Fair\",\n good: \"Good\",\n strong: \"Strong\",\n },\n requirements: {\n // The count is the HOST's configured minimum, interpolated rather than\n // written out: a host raising it must not end up with a requirement naming\n // the old number.\n minLength: (count) => `At least ${count} characters`,\n uppercase: \"One uppercase letter\",\n lowercase: \"One lowercase letter\",\n numbers: \"One number\",\n special: \"One special character\",\n },\n suggestions: {\n minLength: (count) => `Use at least ${count} characters`,\n uppercase: \"Add uppercase letters\",\n lowercase: \"Add lowercase letters\",\n numbers: \"Include numbers\",\n special: \"Add special characters\",\n },\n};\n\nexport const EN_US_RICH_EDITOR_TOOLBAR_COPY: RichEditorToolbarCopy = {\n bold: \"Bold\",\n italic: \"Italic\",\n underline: \"Underline\",\n bulletList: \"Bulleted list\",\n numberedList: \"Numbered list\",\n quote: \"Quote\",\n code: \"Code\",\n insertLink: \"Insert link\",\n textColor: \"Text colour\",\n backgroundColor: \"Background colour\",\n linkPrompt: \"Enter the URL:\",\n};\n\nexport const EN_US_PHONE_INPUT_COPY: PhoneInputCopy = {\n selectCountry: \"Select country\",\n invalidNumber: (countryName) => `Not a valid phone number for ${countryName}`,\n // Substituted into the sentence above when no country is chosen, so it has to\n // read as a noun phrase inside it rather than as a sentence of its own.\n unknownCountry: \"the selected country\",\n};\n\nexport const EN_US_UPLOAD_BUTTON_COPY: UploadButtonCopy = {\n buttonLabel: \"Upload a file\",\n dropzoneHint: \"Drop the file here, or click to choose one\",\n dropzoneRole: (label) => `File upload area. ${label}`,\n uploading: \"Uploading…\",\n dropReady: \"File ready to drop\",\n percentUploaded: (percent) => `${percent}% uploaded`,\n uploadInProgress: (percent) => `Upload in progress: ${percent}%`,\n errorAnnouncement: (message) => `Error: ${message}`,\n};\n"],"mappings":";AAcO,IAAM,kCAA2D;AAAA,EACtE,aAAa;AAAA,EACb,gBACE;AAAA,EACF,oBAAoB;AACtB;AAEO,IAAM,0BAA4C;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAEO,IAAM,yBAAyC;AAAA,EACpD,SAAS;AAAA,EACT,UAAU;AAAA;AAAA;AAAA,EAGV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;AAEO,IAAM,+BAAqD;AAAA,EAChE,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA;AAAA;AAAA;AAAA,IAIZ,WAAW,CAAC,UAAU,YAAY,KAAK;AAAA,IACvC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,WAAW,CAAC,UAAU,gBAAgB,KAAK;AAAA,IAC3C,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF;AAEO,IAAM,iCAAwD;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AAAA,EACP,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,YAAY;AACd;AAEO,IAAM,yBAAyC;AAAA,EACpD,eAAe;AAAA,EACf,eAAe,CAAC,gBAAgB,gCAAgC,WAAW;AAAA;AAAA;AAAA,EAG3E,gBAAgB;AAClB;AAEO,IAAM,2BAA6C;AAAA,EACxD,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc,CAAC,UAAU,qBAAqB,KAAK;AAAA,EACnD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,iBAAiB,CAAC,YAAY,GAAG,OAAO;AAAA,EACxC,kBAAkB,CAAC,YAAY,uBAAuB,OAAO;AAAA,EAC7D,mBAAmB,CAAC,YAAY,UAAU,OAAO;AACnD;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/social-login-button/social-login-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { Button } from '../components/form/Button';\nimport { Card, CardContent } from '../components/layout/Card';\nimport { Heading } from '../components/typography/Heading';\nimport { Text } from '../components/typography/Text';\nimport { Separator } from '../components/layout/Separator';\n\nexport type SocialProvider = 'google' | 'facebook' | 'apple';\n\n/**\n * SVG Icons for social providers\n */\nconst GoogleIcon = (): React.ReactElement => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n fill=\"#4285F4\"\n />\n <path\n d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n fill=\"#34A853\"\n />\n <path\n d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n fill=\"#FBBC05\"\n />\n <path\n d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n fill=\"#EA4335\"\n />\n </svg>\n);\n\nconst FacebookIcon = (): React.ReactElement => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n fill=\"#1877F2\"\n />\n </svg>\n);\n\nconst AppleIcon = (): React.ReactElement => (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z\" />\n </svg>\n);\n\ninterface ProviderConfig {\n label: string;\n Icon: () => React.ReactElement;\n variant: 'solid' | 'outline' | 'ghost';\n color: 'primary' | 'secondary' | 'neutral';\n sx?: object;\n}\n\nconst providerConfig: Record<SocialProvider, ProviderConfig> = {\n google: {\n label: \"Continue with Google\",\n Icon: GoogleIcon,\n variant: 'outline',\n color: 'neutral',\n sx: {\n backgroundColor: '#ffffff',\n color: '#1f1f1f',\n borderColor: '#dadce0',\n '&:hover': {\n backgroundColor: '#f5f5f5',\n borderColor: '#dadce0',\n },\n },\n },\n facebook: {\n label: \"Continue with Facebook\",\n Icon: FacebookIcon,\n variant: 'solid',\n color: 'primary',\n sx: {\n backgroundColor: '#1877F2',\n color: '#ffffff',\n '&:hover': {\n backgroundColor: '#166fe5',\n },\n },\n },\n apple: {\n label: \"Continue with Apple\",\n Icon: AppleIcon,\n variant: 'solid',\n color: 'neutral',\n sx: {\n backgroundColor: '#000000',\n color: '#ffffff',\n '&:hover': {\n backgroundColor: '#1a1a1a',\n },\n },\n },\n};\n\nexport interface SocialLoginButtonProps {\n provider: SocialProvider;\n onClick?: () => void;\n loading?: boolean;\n disabled?: boolean;\n fullWidth?: boolean;\n}\n\n/**\n * Social login button using UI package Button component\n */\nexport const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLoginButtonProps>(\n ({ provider, onClick, loading = false, disabled = false, fullWidth = true }, ref) => {\n const config = providerConfig[provider];\n\n return (\n <Button\n ref={ref}\n variant={config.variant}\n color={config.color}\n size=\"lg\"\n loading={loading}\n disabled={disabled}\n onClick={onClick}\n icon={<config.Icon />}\n fullWidth={fullWidth}\n sx={{\n minHeight: 48,\n justifyContent: 'flex-start',\n gap: 2,\n ...config.sx,\n }}\n >\n {config.label}\n </Button>\n );\n }\n);\n\nSocialLoginButton.displayName = 'SocialLoginButton';\n\n/**\n * Container for social login buttons with optional divider\n */\nexport interface SocialLoginContainerProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n showDivider?: boolean;\n dividerText?: string;\n /**\n * How wide the card is allowed to get. Defaults to the 400 it has always\n * intended, so nothing that does not ask for a width moves.\n *\n * Worth passing for a card holding a FORM rather than a row of provider\n * buttons: 400 was chosen for the latter, and an e-mail + password pair reads\n * cramped in it.\n */\n maxWidth?: number | string;\n}\n\nexport function SocialLoginContainer({\n children,\n title = \"Sign in to continue\",\n subtitle,\n showDivider = false,\n dividerText = \"or\",\n maxWidth = 400,\n}: SocialLoginContainerProps): React.ReactElement {\n return (\n // `width: 100%` is what makes the cap below mean anything. Every caller\n // centres this card in a flex column (`Container variant=\"centered\"` does),\n // and a flex item under `align-items: center` sizes to its CONTENT — so the\n // card sat at whatever the longest label happened to need, ~267px, at every\n // viewport from 390 to 1280. The 400 was never reached, which is why raising\n // it would have changed nothing; the card had no width to cap.\n <Card variant=\"elevated\" borderRadius=\"lg\" sx={{ width: '100%', maxWidth }}>\n <CardContent>\n <Stack spacing={3} sx={{ width: '100%' }}>\n {title && (\n <Box sx={{ textAlign: 'center' }}>\n <Heading level=\"h2\">\n {title}\n </Heading>\n {subtitle && (\n <Text color=\"secondary\" size=\"sm\">\n {subtitle}\n </Text>\n )}\n </Box>\n )}\n\n <Stack spacing={2}>\n {children}\n </Stack>\n\n {showDivider && (\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n <Separator />\n <Text color=\"secondary\" size=\"sm\">\n {dividerText}\n </Text>\n <Separator />\n </Box>\n )}\n </Stack>\n </CardContent>\n </Card>\n );\n}\n\nexport { GoogleIcon, FacebookIcon, AppleIcon };\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/Textarea/Textarea.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nconst glowAnimation = keyframes`\n 0% {\n box-shadow: 0 0 5px currentColor;\n }\n 50% {\n box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;\n }\n 100% {\n box-shadow: 0 0 5px currentColor;\n }\n`;\n\n// Ripple animation for buttons (commented out - not currently used)\n// const rippleAnimation = keyframes`\n// 0% {\n// transform: scale(0);\n// opacity: 1;\n// }\n// 100% {\n// transform: scale(4);\n// opacity: 0;\n// }\n// `;\n\n// Float animation for rich text toolbar\nexport const floatAnimation = keyframes`\n 0% {\n transform: translateY(0px);\n }\n 50% {\n transform: translateY(-3px);\n }\n 100% {\n transform: translateY(0px);\n }\n`;\n\ntype ResolvedPalette = {\n main: string;\n dark: string;\n light: string;\n contrastText: string;\n};\n\ntype PartialPalette = { main: string; dark?: string; light?: string; contrastText?: string };\n\n// grey is indexed by weight rather than main/dark/light, so neutral is built by\n// hand. The literals are the MUI grey values, used if the theme omits a weight.\nconst neutralPalette = (theme: Theme): ResolvedPalette => {\n const grey = theme.palette.grey as unknown as Record<number, string>;\n\n return {\n main: grey?.[700] || '#616161',\n dark: grey?.[800] || '#424242',\n light: grey?.[500] || '#9e9e9e',\n contrastText: '#fff',\n };\n};\n\n// Each slot falls back to the palette's own main, then to primary — a custom\n// theme can define main without dark or light.\nconst pick = (...candidates: Array<string | undefined>): string =>\n candidates.find(Boolean) ?? '';\n\nconst withFallbacks = (theme: Theme, palette: PartialPalette): ResolvedPalette => ({\n main: pick(palette?.main, theme.palette.primary.main),\n dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),\n light: pick(palette?.light, palette?.main, theme.palette.primary.light),\n contrastText: pick(palette?.contrastText, '#fff'),\n});\n\nexport const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette => {\n if (color === 'neutral') return neutralPalette(theme);\n\n const colorMap: Record<string, PartialPalette> = {\n primary: theme.palette.primary,\n secondary: theme.palette.secondary,\n success: theme.palette.success,\n warning: theme.palette.warning,\n info: theme.palette.info,\n danger: theme.palette.error,\n };\n\n return withFallbacks(theme, colorMap[color] || theme.palette.primary);\n};\n\n// glass, gradient and glow are independent flags that each layer styles onto the\n// base. Spelled out here rather than inline so the styled() callback keeps one\n// branch instead of three.\nexport const textareaEmphasisStyles = ({\n theme,\n colorPalette,\n glass,\n gradient,\n glow,\n}: {\n theme: Theme;\n colorPalette: { main: string; light?: string; dark?: string };\n glass?: boolean;\n gradient?: boolean;\n glow?: boolean;\n}): CSSObject => {\nconst glassStyles = glass\n ? {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n '&:hover': {\n backgroundColor: alpha(theme.palette.background.paper, 0.15),\n backdropFilter: 'blur(25px)',\n },\n '&:focus': {\n backgroundColor: alpha(theme.palette.background.paper, 0.2),\n backdropFilter: 'blur(30px)',\n },\n }\n : {};\n\n// Gradient border effect\nconst gradientStyles = gradient\n ? {\n background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,\n border: '2px solid transparent',\n '&:focus': {\n background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`,\n },\n }\n : {};\n\n// Glow effect\nconst glowStyles = glow\n ? {\n animation: `${glowAnimation} 2s ease-in-out infinite`,\n boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`,\n }\n : {};\n\n return { ...glassStyles, ...gradientStyles, ...glowStyles };\n};\n"],"mappings":";AAAA,SAAS,OAAO,iBAAiB;AAGjC,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBf,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuB9B,IAAM,iBAAiB,CAAC,UAAkC;AACxD,QAAM,OAAO,MAAM,QAAQ;AAE3B,SAAO;AAAA,IACL,MAAM,OAAO,GAAG,KAAK;AAAA,IACrB,MAAM,OAAO,GAAG,KAAK;AAAA,IACrB,OAAO,OAAO,GAAG,KAAK;AAAA,IACtB,cAAc;AAAA,EAChB;AACF;AAIA,IAAM,OAAO,IAAI,eACf,WAAW,KAAK,OAAO,KAAK;AAE9B,IAAM,gBAAgB,CAAC,OAAc,aAA8C;AAAA,EACjF,MAAM,KAAK,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACpD,MAAM,KAAK,SAAS,MAAM,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACnE,OAAO,KAAK,SAAS,OAAO,SAAS,MAAM,MAAM,QAAQ,QAAQ,KAAK;AAAA,EACtE,cAAc,KAAK,SAAS,cAAc,MAAM;AAClD;AAEO,IAAM,oBAAoB,CAAC,OAAc,UAAmC;AACjF,MAAI,UAAU,UAAW,QAAO,eAAe,KAAK;AAEpD,QAAM,WAA2C;AAAA,IAC/C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,cAAc,OAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,OAAO;AACtE;AAKO,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMiB;AACjB,QAAM,cAAc,QAChB;AAAA,IACE,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB;AAAA,IAChB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,IACtD,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,MAC3D,gBAAgB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB;AAAA,IAClB;AAAA,EACF,IACA,CAAC;AAGL,QAAM,iBAAiB,WACnB;AAAA,IACE,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,yCAC7D,aAAa,IAAI,KAAK,aAAa,KAAK;AAAA,IAC3E,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,2CAC7D,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,IAC5E;AAAA,EACF,IACA,CAAC;AAGL,QAAM,aAAa,OACf;AAAA,IACE,WAAW,GAAG,aAAa;AAAA,IAC3B,WAAW,YAAY,MAAM,aAAa,MAAM,GAAG,CAAC;AAAA,EACtD,IACA,CAAC;AAEH,SAAO,EAAE,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW;AAC5D;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pt-BR.form.ts"],"sourcesContent":["/**\n * The pt-BR pack for the form family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n AddressAutocompleteCopy,\n AutocompleteCopy,\n CodeEditorCopy,\n PasswordStrengthCopy,\n PhoneInputCopy,\n RichEditorToolbarCopy,\n UploadButtonCopy,\n} from './copy';\n\nexport const PT_BR_ADDRESS_AUTOCOMPLETE_COPY: AddressAutocompleteCopy = {\n loadingMaps: \"Carregando o Google Maps…\",\n mapsLoadFailed:\n \"Não foi possível carregar a API do Google Maps. Verifique a chave da API e a conexão com a internet.\",\n useCurrentLocation: \"Usar a localização atual\",\n};\n\nexport const PT_BR_AUTOCOMPLETE_COPY: AutocompleteCopy = {\n loading: \"Carregando…\",\n noResults: \"Nenhum resultado encontrado\",\n placeholder: \"Digite para buscar…\",\n};\n\nexport const PT_BR_CODE_EDITOR_COPY: CodeEditorCopy = {\n loading: \"Carregando o editor…\",\n readOnly: \"Somente leitura\",\n formatCode: \"Formatar o código (Ctrl+Shift+F)\",\n enableWrap: \"Quebrar as linhas\",\n disableWrap: \"Não quebrar as linhas\",\n copyToClipboard: \"Copiar para a área de transferência\",\n copied: \"Copiado!\",\n enterFullscreen: \"Tela cheia\",\n exitFullscreen: \"Sair da tela cheia\",\n};\n\nexport const PT_BR_PASSWORD_STRENGTH_COPY: PasswordStrengthCopy = {\n strengthHeading: \"Força da senha\",\n requirementsHeading: \"Requisitos:\",\n suggestionsHeading: \"Sugestões:\",\n bands: {\n veryWeak: \"Muito fraca\",\n weak: \"Fraca\",\n fair: \"Razoável\",\n good: \"Boa\",\n strong: \"Forte\",\n },\n requirements: {\n minLength: (count) => `Pelo menos ${count} caracteres`,\n uppercase: \"Uma letra maiúscula\",\n lowercase: \"Uma letra minúscula\",\n numbers: \"Um número\",\n special: \"Um caractere especial\",\n },\n suggestions: {\n minLength: (count) => `Use pelo menos ${count} caracteres`,\n uppercase: \"Adicione letras maiúsculas\",\n lowercase: \"Adicione letras minúsculas\",\n numbers: \"Inclua números\",\n special: \"Adicione caracteres especiais\",\n },\n};\n\nexport const PT_BR_RICH_EDITOR_TOOLBAR_COPY: RichEditorToolbarCopy = {\n bold: \"Negrito\",\n italic: \"Itálico\",\n underline: \"Sublinhado\",\n bulletList: \"Lista com marcadores\",\n numberedList: \"Lista numerada\",\n quote: \"Citação\",\n code: \"Código\",\n insertLink: \"Inserir link\",\n textColor: \"Cor do texto\",\n backgroundColor: \"Cor de fundo\",\n linkPrompt: \"Informe a URL:\",\n};\n\nexport const PT_BR_PHONE_INPUT_COPY: PhoneInputCopy = {\n selectCountry: \"Selecionar o país\",\n invalidNumber: (countryName) => `Telefone inválido para ${countryName}`,\n unknownCountry: \"o país selecionado\",\n};\n\nexport const PT_BR_UPLOAD_BUTTON_COPY: UploadButtonCopy = {\n buttonLabel: \"Enviar arquivo\",\n dropzoneHint: \"Solte o arquivo aqui ou clique para escolher\",\n dropzoneRole: (label) => `Área de upload de arquivo. ${label}`,\n uploading: \"Enviando…\",\n dropReady: \"Arquivo pronto para soltar\",\n percentUploaded: (percent) => `${percent}% enviado`,\n uploadInProgress: (percent) => `Envio em andamento: ${percent}%`,\n errorAnnouncement: (message) => `Erro: ${message}`,\n};\n"],"mappings":";AAcO,IAAM,kCAA2D;AAAA,EACtE,aAAa;AAAA,EACb,gBACE;AAAA,EACF,oBAAoB;AACtB;AAEO,IAAM,0BAA4C;AAAA,EACvD,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAEO,IAAM,yBAAyC;AAAA,EACpD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,gBAAgB;AAClB;AAEO,IAAM,+BAAqD;AAAA,EAChE,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA,cAAc;AAAA,IACZ,WAAW,CAAC,UAAU,cAAc,KAAK;AAAA,IACzC,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,WAAW,CAAC,UAAU,kBAAkB,KAAK;AAAA,IAC7C,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF;AAEO,IAAM,iCAAwD;AAAA,EACnE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,OAAO;AAAA,EACP,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,YAAY;AACd;AAEO,IAAM,yBAAyC;AAAA,EACpD,eAAe;AAAA,EACf,eAAe,CAAC,gBAAgB,6BAA0B,WAAW;AAAA,EACrE,gBAAgB;AAClB;AAEO,IAAM,2BAA6C;AAAA,EACxD,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc,CAAC,UAAU,iCAA8B,KAAK;AAAA,EAC5D,WAAW;AAAA,EACX,WAAW;AAAA,EACX,iBAAiB,CAAC,YAAY,GAAG,OAAO;AAAA,EACxC,kBAAkB,CAAC,YAAY,uBAAuB,OAAO;AAAA,EAC7D,mBAAmB,CAAC,YAAY,SAAS,OAAO;AAClD;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/CreatableSelect/CreatableSelect.tsx"],"sourcesContent":["'use client';\n\nimport { alpha } from '@mui/material/styles/index.js';\nimport Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete/index.js';\nimport type { AutocompleteRenderInputParams } from '@mui/material/Autocomplete/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { useId, useMemo } from 'react';\n\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\nimport { FormControl, FormLabel, FormMessage } from '../Form';\nimport type { CreatableSelectOption, CreatableSelectProps } from './CreatableSelect.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/** Internal option shape: a real option, or the synthetic \"create new\" row. */\ninterface InternalOption extends CreatableSelectOption {\n /** True for the synthetic row that triggers {@link CreatableSelectProps.onCreate}. */\n isCreate?: boolean;\n}\n\n/** Prefix that marks a synthetic create-row value so it can never collide with a real one. */\nconst CREATE_PREFIX = ' create:';\n\nconst filterOptions = createFilterOptions<InternalOption>();\n\n/** How far one nesting level indents a dropdown row, in px. */\nconst INDENT_STEP = 16;\n\n/** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */\n// All five house stops onto MUI's two. `xs`/`sm` draw small; `md` and up draw\n// medium, because an autocomplete field has no third or fourth height to give.\nconst MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'medium' } as const;\n\n/** Match the outlined border treatment of `Input` so siblings look identical. */\nconst fieldSx = {\n '& .MuiOutlinedInput-root': {\n '& fieldset': {\n borderColor: (theme: { palette: { divider: string } }) => alpha(theme.palette.divider, 0.23),\n },\n '&:hover fieldset': { borderColor: 'primary.main' },\n '&.Mui-focused fieldset': { borderColor: 'primary.main', borderWidth: 2 },\n '&.Mui-error fieldset': { borderColor: 'error.main' },\n },\n} as const;\n\n/**\n * The filter that appends the synthetic \"create\" row when the typed text matches\n * no existing option. Built per render from the two props it closes over.\n */\nfunction buildFilter(\n onCreate: CreatableSelectProps['onCreate'],\n createOptionLabel: (input: string) => string,\n) {\n return (available: InternalOption[], params: { inputValue: string }): InternalOption[] => {\n const filtered = filterOptions(available, params as Parameters<typeof filterOptions>[1]);\n const input = params.inputValue.trim();\n const alreadyExists = available.some(\n (option) => option.label.toLowerCase() === input.toLowerCase(),\n );\n if (input && !alreadyExists && onCreate) {\n filtered.push({\n value: `${CREATE_PREFIX}${input}`,\n label: createOptionLabel(input),\n isCreate: true,\n });\n }\n return filtered;\n };\n}\n\n/**\n * A nested option is indented on its ROW; the label itself stays the bare name,\n * so the closed field never shows the tree drawing (see `depth`).\n */\nfunction renderIndentedOption(\n props: React.HTMLAttributes<HTMLLIElement>,\n option: InternalOption,\n): React.JSX.Element {\n const { key, ...rest } = props as typeof props & { key?: string };\n return (\n <li\n key={key ?? option.value}\n {...rest}\n style={{ paddingLeft: INDENT_STEP * (1 + (option.depth ?? 0)) }}\n >\n {option.label}\n </li>\n );\n}\n\n/** The text field Autocomplete renders, with the library's border + a loading adornment. */\nfunction renderField(\n params: AutocompleteRenderInputParams,\n field: {\n inputId: string;\n placeholder?: string;\n error?: string;\n loading: boolean;\n size: SizeValue;\n dataTestId: string;\n },\n): React.JSX.Element {\n return (\n <TextField\n {...params}\n id={field.inputId}\n placeholder={field.placeholder}\n error={Boolean(field.error)}\n size={MUI_SIZE[field.size]}\n sx={fieldSx}\n inputProps={{ ...params.inputProps, 'data-testid': `${field.dataTestId}-input` }}\n slotProps={{\n input: {\n ...params.InputProps,\n endAdornment: (\n <>\n {field.loading ? <CircularProgress color=\"inherit\" size={18} /> : null}\n {params.InputProps.endAdornment}\n </>\n ),\n },\n }}\n />\n );\n}\n\n/**\n * The option list, plus the selected OBJECT MUI wants, from the controlled value.\n * `depth` is carried through: it is what {@link renderIndentedOption} draws.\n */\nfunction useInternalOptions(\n options: CreatableSelectOption[],\n value: string | null,\n): { items: InternalOption[]; selected: InternalOption | null } {\n const items = useMemo<InternalOption[]>(\n () => options.map(({ value: optionValue, label, depth }) => ({\n value: optionValue,\n label,\n depth,\n })),\n [options],\n );\n const selected = useMemo<InternalOption | null>(\n () => items.find((option) => option.value === value) ?? null,\n [items, value],\n );\n return { items, selected };\n}\n\n/** Route a picked row: cleared, the synthetic create row, or a real option. */\nfunction handlePick(\n next: InternalOption | null,\n onChange: CreatableSelectProps['onChange'],\n onCreate: CreatableSelectProps['onCreate'],\n): void {\n if (!next) {\n onChange(null);\n return;\n }\n if (next.isCreate) {\n void onCreate?.(next.value.slice(CREATE_PREFIX.length));\n return;\n }\n onChange(next.value);\n}\n\n/**\n * A single-select, searchable combobox that can create a new option on the fly.\n *\n * Type to filter {@link CreatableSelectProps.options}; when the typed text matches\n * no option and {@link CreatableSelectProps.onCreate} is provided, a \"create\" row\n * appears and selecting it (Enter or click) calls `onCreate` with the raw text —\n * the parent persists it, then feeds the new option back via `options`/`value`.\n *\n * Chrome matches the library's other form fields: an external {@link FormLabel}\n * above the control (not a floating label), the same outlined border treatment as\n * {@link Input} and the same `sm`/`md` scale, so it lines up with sibling fields\n * in a grid row.\n */\nexport function CreatableSelect({\n options,\n value,\n onChange,\n onCreate,\n label,\n error,\n placeholder,\n createOptionLabel,\n noOptionsText,\n disabled = false,\n loading = false,\n fullWidth = true,\n size = 'md',\n dataTestId = 'creatable-select',\n}: CreatableSelectProps): React.JSX.Element {\n const inputId = useId();\n const { items, selected } = useInternalOptions(options, value);\n\n return (\n <FormControl fullWidth={fullWidth} error={Boolean(error)}>\n {label && (\n <FormLabel htmlFor={inputId} error={Boolean(error)}>\n {label}\n </FormLabel>\n )}\n <Autocomplete<InternalOption, false, false, false>\n value={selected}\n options={items}\n disabled={disabled}\n loading={loading}\n fullWidth={fullWidth}\n size={MUI_SIZE[size]}\n handleHomeEndKeys\n selectOnFocus\n clearOnBlur\n data-testid={dataTestId}\n noOptionsText={noOptionsText}\n // Lift the dropdown above stacked modals: the default popup z-index is\n // `modal` (1300), but a stacked sheet at depth ≥2 sits at 1300 + depth*10,\n // which would otherwise cover the options. The height is the token's\n // now — this component used to be the only place the rule was written\n // down, which is how `CategorySelect` came to be missing it (12-57).\n slotProps={{ popper: { sx: { zIndex: stackedOverlayZIndex } } }}\n getOptionLabel={(option) => (typeof option === 'string' ? option : option.label)}\n isOptionEqualToValue={(option, current) => option.value === current.value}\n renderOption={renderIndentedOption}\n filterOptions={buildFilter(onCreate, createOptionLabel)}\n onChange={(_event, next) => handlePick(next, onChange, onCreate)}\n renderInput={(params) =>\n renderField(params, { inputId, placeholder, error, loading, size, dataTestId })\n }\n />\n {error && <FormMessage error dataTestId={`${dataTestId}-message`}>{error}</FormMessage>}\n </FormControl>\n );\n}\n"],"mappings":";;;;;;;;;;AAEA,SAAS,aAAa;AACtB,OAAO,gBAAgB,2BAA2B;AAElD,OAAO,sBAAsB;AAC7B,OAAO,eAAe;AACtB,SAAS,OAAO,eAAe;AAyE3B,SAmCQ,UAnCR,KAmCQ,YAnCR;AA3DJ,IAAM,gBAAgB;AAEtB,IAAM,gBAAgB,oBAAoC;AAG1D,IAAM,cAAc;AAKpB,IAAM,WAAW,EAAE,IAAI,SAAS,IAAI,SAAS,IAAI,UAAU,IAAI,UAAU,IAAI,SAAS;AAGtF,IAAM,UAAU;AAAA,EACd,4BAA4B;AAAA,IAC1B,cAAc;AAAA,MACZ,aAAa,CAAC,UAA4C,MAAM,MAAM,QAAQ,SAAS,IAAI;AAAA,IAC7F;AAAA,IACA,oBAAoB,EAAE,aAAa,eAAe;AAAA,IAClD,0BAA0B,EAAE,aAAa,gBAAgB,aAAa,EAAE;AAAA,IACxE,wBAAwB,EAAE,aAAa,aAAa;AAAA,EACtD;AACF;AAMA,SAAS,YACP,UACA,mBACA;AACA,SAAO,CAAC,WAA6B,WAAqD;AACxF,UAAM,WAAW,cAAc,WAAW,MAA6C;AACvF,UAAM,QAAQ,OAAO,WAAW,KAAK;AACrC,UAAM,gBAAgB,UAAU;AAAA,MAC9B,CAAC,WAAW,OAAO,MAAM,YAAY,MAAM,MAAM,YAAY;AAAA,IAC/D;AACA,QAAI,SAAS,CAAC,iBAAiB,UAAU;AACvC,eAAS,KAAK;AAAA,QACZ,OAAO,GAAG,aAAa,GAAG,KAAK;AAAA,QAC/B,OAAO,kBAAkB,KAAK;AAAA,QAC9B,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT;AACF;AAMA,SAAS,qBACP,OACA,QACmB;AACnB,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MAEE,GAAG;AAAA,MACJ,OAAO,EAAE,aAAa,eAAe,KAAK,OAAO,SAAS,IAAI;AAAA,MAE7D,iBAAO;AAAA;AAAA,IAJH,OAAO,OAAO;AAAA,EAKrB;AAEJ;AAGA,SAAS,YACP,QACA,OAQmB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,MAAM;AAAA,MACV,aAAa,MAAM;AAAA,MACnB,OAAO,QAAQ,MAAM,KAAK;AAAA,MAC1B,MAAM,SAAS,MAAM,IAAI;AAAA,MACzB,IAAI;AAAA,MACJ,YAAY,EAAE,GAAG,OAAO,YAAY,eAAe,GAAG,MAAM,UAAU,SAAS;AAAA,MAC/E,WAAW;AAAA,QACT,OAAO;AAAA,UACL,GAAG,OAAO;AAAA,UACV,cACE,iCACG;AAAA,kBAAM,UAAU,oBAAC,oBAAiB,OAAM,WAAU,MAAM,IAAI,IAAK;AAAA,YACjE,OAAO,WAAW;AAAA,aACrB;AAAA,QAEJ;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAMA,SAAS,mBACP,SACA,OAC8D;AAC9D,QAAM,QAAQ;AAAA,IACZ,MAAM,QAAQ,IAAI,CAAC,EAAE,OAAO,aAAa,OAAO,MAAM,OAAO;AAAA,MAC3D,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF,EAAE;AAAA,IACF,CAAC,OAAO;AAAA,EACV;AACA,QAAM,WAAW;AAAA,IACf,MAAM,MAAM,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,KAAK;AAAA,IACxD,CAAC,OAAO,KAAK;AAAA,EACf;AACA,SAAO,EAAE,OAAO,SAAS;AAC3B;AAGA,SAAS,WACP,MACA,UACA,UACM;AACN,MAAI,CAAC,MAAM;AACT,aAAS,IAAI;AACb;AAAA,EACF;AACA,MAAI,KAAK,UAAU;AACjB,SAAK,WAAW,KAAK,MAAM,MAAM,cAAc,MAAM,CAAC;AACtD;AAAA,EACF;AACA,WAAS,KAAK,KAAK;AACrB;AAeO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,aAAa;AACf,GAA4C;AAC1C,QAAM,UAAU,MAAM;AACtB,QAAM,EAAE,OAAO,SAAS,IAAI,mBAAmB,SAAS,KAAK;AAE7D,SACE,qBAAC,eAAY,WAAsB,OAAO,QAAQ,KAAK,GACpD;AAAA,aACC,oBAAC,aAAU,SAAS,SAAS,OAAO,QAAQ,KAAK,GAC9C,iBACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,SAAS,IAAI;AAAA,QACnB,mBAAiB;AAAA,QACjB,eAAa;AAAA,QACb,aAAW;AAAA,QACX,eAAa;AAAA,QACb;AAAA,QAMA,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,qBAAqB,EAAE,EAAE;AAAA,QAC9D,gBAAgB,CAAC,WAAY,OAAO,WAAW,WAAW,SAAS,OAAO;AAAA,QAC1E,sBAAsB,CAAC,QAAQ,YAAY,OAAO,UAAU,QAAQ;AAAA,QACpE,cAAc;AAAA,QACd,eAAe,YAAY,UAAU,iBAAiB;AAAA,QACtD,UAAU,CAAC,QAAQ,SAAS,WAAW,MAAM,UAAU,QAAQ;AAAA,QAC/D,aAAa,CAAC,WACZ,YAAY,QAAQ,EAAE,SAAS,aAAa,OAAO,SAAS,MAAM,WAAW,CAAC;AAAA;AAAA,IAElF;AAAA,IACC,SAAS,oBAAC,eAAY,OAAK,MAAC,YAAY,GAAG,UAAU,YAAa,iBAAM;AAAA,KAC3E;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/PhoneInput/PhoneInput.tsx"],"sourcesContent":["import ArrowDropDown from '@mui/icons-material/ArrowDropDown';\nimport PhoneIcon from '@mui/icons-material/Phone';\nimport Box from '@mui/material/Box/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC} from 'react';\nimport React, { } from 'react';\n\nimport { countries } from './countries';\nimport { usePhoneInput } from './PhoneInput.hooks';\nimport type { CountryData,PhoneInputProps } from './PhoneInput.types';\nimport type { PhoneInputCopy } from '../../../copy';\n\n// Country data with expanded support\n\n// Styled components\nconst GlassTextField = styled(TextField)(({ theme }) => ({\n '& .MuiOutlinedInput-root': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n backdropFilter: 'blur(10px)',\n WebkitBackdropFilter: 'blur(10px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),\n '&:hover': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,\n borderColor: theme.palette.primary.main },\n '&.Mui-focused': {\n background: theme.palette.background.paper,\n boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}` },\n '& fieldset': {\n border: 'none' } },\n '& .MuiInputLabel-root': {\n '&.Mui-focused': {\n color: theme.palette.primary.main } } }));\n\nconst CountrySelector = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n padding: theme.spacing(0.5, 1),\n borderRadius: theme.shape.borderRadius,\n cursor: 'pointer',\n transition: theme.transitions.create(['background-color']),\n '&:hover': {\n backgroundColor: alpha(theme.palette.primary.main, 0.08) } }));\n\nconst CountryMenu = styled(Menu)(({ theme }) => ({\n '& .MuiPaper-root': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,\n backdropFilter: 'blur(20px)',\n WebkitBackdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n maxHeight: 400 } }));\n\n// Helper functions with enhanced validation\n// The text field itself with its two adornments. Split out so PhoneInput is\n// prop defaults, the hook call and composition.\nconst PhoneField: React.FC<{\n TextFieldComponent: React.ElementType;\n variant: PhoneInputProps['variant'];\n label?: React.ReactNode;\n placeholder?: string;\n value: string;\n validation: { hasError: boolean; helperText?: React.ReactNode };\n disabled: boolean;\n required: boolean;\n fullWidth: boolean;\n icon?: React.ReactNode;\n isValid: boolean;\n selectedCountry?: CountryData;\n anchorEl: HTMLElement | null;\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n onFocus: () => void;\n onBlur: () => void;\n onCountryOpen: (event: React.MouseEvent<HTMLElement>) => void;\n onCountryOpenViaKeyboard: (element: HTMLElement) => void;\n copy: PhoneInputCopy;\n}> = ({\n TextFieldComponent,\n copy,\n variant,\n label,\n placeholder,\n value,\n validation,\n disabled,\n required,\n fullWidth,\n icon,\n isValid,\n selectedCountry,\n anchorEl,\n onChange,\n onFocus,\n onBlur,\n onCountryOpen,\n onCountryOpenViaKeyboard }) => (\n <TextFieldComponent\n variant={variant === 'glass' ? 'outlined' : variant}\n label={label}\n placeholder={placeholder}\n value={value}\n onChange={onChange}\n onFocus={onFocus}\n onBlur={onBlur}\n error={validation.hasError}\n helperText={validation.helperText}\n disabled={disabled}\n required={required}\n fullWidth={fullWidth}\n type=\"tel\"\n data-testid=\"phone-input-field\"\n InputProps={{\n startAdornment: (\n <CountryAdornment\n selectCountryLabel={copy.selectCountry}\n country={selectedCountry}\n menuOpen={Boolean(anchorEl)}\n onOpen={onCountryOpen}\n onOpenViaKeyboard={onCountryOpenViaKeyboard}\n />\n ),\n endAdornment: <ValidityAdornment icon={icon} isValid={isValid} /> }}\n sx={{\n '& input': {\n letterSpacing: '0.5px' } }}\n />\n);\n\nconst PHONE_INPUT_DEFAULTS = {\n variant: 'outlined',\n label: 'Phone Number',\n placeholder: 'Enter phone number',\n icon: <PhoneIcon />,\n defaultValue: '',\n countryCode: 'US',\n floating: false,\n error: false,\n disabled: false,\n required: false,\n fullWidth: true } satisfies Partial<PhoneInputProps>;\n\n// Drops explicitly-undefined props before the merge, so `prop={undefined}` falls\n// back to the default exactly as a destructuring default would. Eleven separate\n// destructuring defaults were most of this component's branch count.\nconst definedProps = (props: PhoneInputProps): Partial<PhoneInputProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<PhoneInputProps>;\n\nconst CountryAdornment: React.FC<{\n country?: CountryData;\n menuOpen: boolean;\n onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n onOpenViaKeyboard: (element: HTMLElement) => void;\n selectCountryLabel: string;\n}> = ({ country, menuOpen, onOpen, onOpenViaKeyboard, selectCountryLabel }) => (\n <InputAdornment position=\"start\" data-testid=\"phone-input-start-adornment\">\n <CountrySelector\n onClick={onOpen}\n role=\"button\"\n aria-label={selectCountryLabel}\n aria-expanded={menuOpen}\n tabIndex={0}\n data-testid=\"country-selector\"\n onKeyDown={(e) => {\n if (e.key !== 'Enter' && e.key !== ' ') return;\n e.preventDefault();\n onOpenViaKeyboard(e.currentTarget as HTMLElement);\n }}\n >\n <Typography variant=\"h6\" component=\"span\" sx={{ mr: 0.5 }} data-testid=\"country-flag\">\n {country?.flag}\n </Typography>\n <Typography\n variant=\"body2\"\n color=\"text.secondary\"\n sx={{ mr: 0.5 }}\n data-testid=\"country-dial-code\"\n >\n {country?.dial}\n </Typography>\n <ArrowDropDown fontSize=\"small\" data-testid=\"country-dropdown-icon\" />\n </CountrySelector>\n </InputAdornment>\n);\n\n// The trailing icon turns green once the number validates.\nconst ValidityAdornment: React.FC<{ icon?: React.ReactNode; isValid: boolean }> = ({\n icon,\n isValid }) => {\n const theme = useTheme();\n\n if (!icon) return null;\n\n return (\n <InputAdornment position=\"end\" data-testid=\"phone-input-end-adornment\">\n <Box\n sx={{\n color: isValid ? theme.palette.success.main : theme.palette.text.secondary,\n transition: 'color 0.3s ease' }}\n data-testid=\"phone-input-icon\"\n >\n {icon}\n </Box>\n </InputAdornment>\n );\n};\n\nconst CountryPicker: React.FC<{\n anchorEl: HTMLElement | null;\n selectedCode?: CountryData['code'];\n onClose: () => void;\n onSelect: (country: CountryData) => void;\n}> = ({ anchorEl, selectedCode, onClose, onSelect }) => {\n const theme = useTheme();\n\n return (\n <CountryMenu\n anchorEl={anchorEl}\n open={Boolean(anchorEl)}\n onClose={onClose}\n anchorOrigin={{\n vertical: 'bottom',\n horizontal: 'left' }}\n transformOrigin={{\n vertical: 'top',\n horizontal: 'left' }}\n data-testid=\"country-menu\"\n >\n {countries.map((country) => (\n <MenuItem\n key={country.code}\n onClick={() => onSelect(country)}\n selected={country.code === selectedCode}\n data-testid={`country-option-${country.code}`}\n sx={{\n '&:hover': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)` } }}\n >\n <ListItemIcon sx={{ minWidth: 36 }}>\n <Typography variant=\"h5\" component=\"span\">\n {country.flag}\n </Typography>\n </ListItemIcon>\n <ListItemText\n primary={country.name}\n secondary={country.dial}\n primaryTypographyProps={{ fontSize: '0.9rem' }}\n secondaryTypographyProps={{ fontSize: '0.8rem' }}\n />\n </MenuItem>\n ))}\n </CountryMenu>\n );\n};\n\n// The field shows an error either because the caller says so, or because what\n// has been typed does not validate and the user has moved on.\nconst resolveValidation = ({\n error,\n errorMessage,\n isValid,\n value,\n isFocused,\n helper,\n countryName,\n copy }: {\n error: boolean;\n errorMessage?: string;\n isValid: boolean;\n value: string;\n isFocused: boolean;\n helper?: React.ReactNode;\n countryName?: string;\n copy: PhoneInputCopy;\n}) => {\n const looksInvalid = !isValid && value !== '' && !isFocused;\n\n return {\n hasError: error || looksInvalid,\n helperText:\n errorMessage ||\n (looksInvalid ? copy.invalidNumber(countryName || copy.unknownCountry) : helper) };\n};\n\nexport const PhoneInput: FC<PhoneInputProps> = (props) => {\n const { copy } = props;\n const {\n variant,\n label,\n placeholder,\n icon,\n defaultValue,\n countryCode: initialCountryCode,\n floating,\n onChange,\n helper,\n error,\n errorMessage,\n disabled,\n required,\n fullWidth } = { ...PHONE_INPUT_DEFAULTS, ...definedProps(props) };\n const {\n value,\n selectedCountry,\n anchorEl,\n isValid,\n isFocused,\n setIsFocused,\n setAnchorEl,\n handleCountryClick,\n handleCountryClose,\n handleCountrySelect,\n handleChange,\n handleBlur } = usePhoneInput({ defaultValue, initialCountryCode, onChange });\n\n const validation = resolveValidation({\n error,\n errorMessage,\n isValid,\n value,\n isFocused,\n helper,\n countryName: selectedCountry?.name,\n copy });\n\n const TextFieldComponent = variant === 'glass' ? GlassTextField : TextField;\n\n return (\n <Box data-testid=\"phone-input-container\">\n <PhoneField\n copy={copy}\n TextFieldComponent={TextFieldComponent}\n variant={variant}\n label={floating ? undefined : label}\n placeholder={placeholder}\n value={value}\n validation={validation}\n disabled={disabled}\n required={required}\n fullWidth={fullWidth}\n icon={icon}\n isValid={isValid}\n selectedCountry={selectedCountry}\n anchorEl={anchorEl}\n onChange={handleChange}\n onFocus={() => setIsFocused(true)}\n onBlur={handleBlur}\n onCountryOpen={handleCountryClick}\n onCountryOpenViaKeyboard={setAnchorEl}\n />\n\n <CountryPicker\n anchorEl={anchorEl}\n selectedCode={selectedCountry?.code}\n onClose={handleCountryClose}\n onSelect={handleCountrySelect}\n />\n </Box>\n );\n};\n\n// Export default\nexport default PhoneInput;\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/Toggle/Toggle.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';\n\nconst glowAnimation = keyframes`\n 0% { box-shadow: 0 0 5px currentColor; }\n 50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }\n 100% { box-shadow: 0 0 5px currentColor; }\n`;\n\nconst floatAnimation = keyframes`\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-2px); }\n`;\n\ninterface TogglePalette {\n main: string;\n dark: string;\n light: string;\n contrastText: string;\n}\n\nconst neutralPalette = (theme: Theme): TogglePalette => ({\n main: theme.palette.grey?.[700] || '#616161',\n dark: theme.palette.grey?.[800] || '#424242',\n light: theme.palette.grey?.[500] || '#9e9e9e',\n contrastText: '#fff',\n});\n\n// A theme can be handed to us with shades missing, so each one falls back through\n// the palette's own main colour before reaching for primary.\nconst shade = (\n palette: PaletteColor | undefined,\n key: 'dark' | 'light',\n fallback: PaletteColor,\n): string => palette?.[key] || palette?.main || fallback[key];\n\nexport const getColorFromTheme = (theme: Theme, color: string): TogglePalette => {\n if (color === 'neutral') return neutralPalette(theme);\n\n const colorMap: Record<string, PaletteColor> = {\n primary: theme.palette.primary,\n secondary: theme.palette.secondary,\n success: theme.palette.success,\n warning: theme.palette.warning,\n info: theme.palette.info,\n danger: theme.palette.error,\n };\n\n const fallback = theme.palette.primary;\n const palette = colorMap[color] || fallback;\n\n return {\n main: palette?.main || fallback.main,\n dark: shade(palette, 'dark', fallback),\n light: shade(palette, 'light', fallback),\n contrastText: palette?.contrastText || '#fff',\n };\n};\n\nconst SIZE_MAP: Record<string, CSSObject> = {\n xs: { padding: '4px 8px', fontSize: '0.75rem' },\n sm: { padding: '6px 12px', fontSize: '0.875rem' },\n md: { padding: '8px 16px', fontSize: '1rem' },\n lg: { padding: '10px 20px', fontSize: '1.125rem' },\n xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport const baseStyles = (\n theme: Theme,\n colorPalette: TogglePalette,\n customSize: string,\n): CSSObject => ({\n textTransform: 'none',\n fontWeight: 500,\n borderRadius: theme.spacing(1),\n transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,\n color: theme.palette.text.primary,\n backgroundColor: 'transparent',\n position: 'relative',\n overflow: 'hidden',\n\n // A zero-sized circle that grows to fill the button on hover.\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n width: 0,\n height: 0,\n borderRadius: '50%',\n backgroundColor: alpha(colorPalette.main, 0.2),\n transform: 'translate(-50%, -50%)',\n transition: 'width 0.4s, height 0.4s',\n },\n\n '&:hover': {\n backgroundColor: alpha(colorPalette.main, 0.08),\n borderColor: colorPalette.main,\n transform: 'translateY(-1px)',\n boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,\n animation: `${floatAnimation} 2s ease-in-out infinite`,\n\n '&::before': {\n width: '100%',\n height: '100%',\n },\n },\n\n '&:active': {\n transform: 'scale(0.98)',\n },\n\n '&.Mui-selected': {\n backgroundColor: colorPalette.main,\n color: colorPalette.contrastText || '#fff',\n borderColor: colorPalette.main,\n boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: `linear-gradient(135deg, transparent, ${alpha('#fff', 0.1)})`,\n pointerEvents: 'none',\n },\n\n '&:hover': {\n backgroundColor: colorPalette.dark,\n transform: 'translateY(-2px) scale(1.02)',\n boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,\n },\n },\n\n // Size wins over everything above it.\n ...(SIZE_MAP[customSize] ?? {}),\n});\n\nexport const variantStyles = (\n customVariant: string | undefined,\n colorPalette: TogglePalette,\n): CSSObject => {\n switch (customVariant) {\n case 'outline':\n return {\n backgroundColor: 'transparent',\n border: `2px solid ${colorPalette.main}`,\n color: colorPalette.main,\n\n '&.Mui-selected': {\n backgroundColor: colorPalette.main,\n color: colorPalette.contrastText || '#fff',\n },\n };\n case 'soft':\n return {\n backgroundColor: alpha(colorPalette.main, 0.1),\n border: 'none',\n color: colorPalette.main,\n\n '&.Mui-selected': {\n backgroundColor: alpha(colorPalette.main, 0.2),\n color: colorPalette.main,\n },\n };\n default:\n return {};\n }\n};\n\ninterface ToggleEffects {\n glass?: boolean;\n gradient?: boolean;\n glow?: boolean;\n}\n\n// gradient and glow both target `.Mui-selected`; with both on, the later spread\n// wins, so glow's animation replaces gradient's.\nexport const effectStyles = (\n theme: Theme,\n colorPalette: TogglePalette,\n { glass, gradient, glow }: ToggleEffects,\n): CSSObject => ({\n ...(glass && {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n }),\n\n ...(gradient && {\n '&.Mui-selected': {\n background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,\n backgroundSize: '200% 200%',\n animation: `${floatAnimation} 3s ease-in-out infinite`,\n border: 'none',\n\n '&:hover': {\n backgroundPosition: '100% 100%',\n },\n },\n }),\n\n ...(glow && {\n '&.Mui-selected': {\n animation: `${glowAnimation} 2s ease-in-out infinite`,\n boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,\n },\n }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/Select/Select.tsx"],"sourcesContent":["import FormControl from '@mui/material/FormControl/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport MuiSelect from '@mui/material/Select/index.js';\nimport { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { SelectProps } from './Select.types';\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 10px currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\n/** Glow ring on the outlined input, keyed off the `glow` prop. */\nconst glowStyles = (theme: Theme): CSSObject => ({\n '& .MuiOutlinedInput-root': {\n boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,\n '&.Mui-focused': {\n boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,\n },\n },\n});\n\n/** Pulsing halo behind the control, keyed off the `pulse` prop. */\nconst pulseStyles = (theme: Theme): CSSObject => ({\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '0',\n right: '0',\n height: '56px',\n transform: 'translateY(-50%)',\n borderRadius: theme.spacing(0.5),\n backgroundColor: theme.palette.primary.main,\n opacity: 0.3,\n animation: `${pulseAnimation} 2s infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n },\n});\n\n/** `glass` variant: translucent, blurred background. */\nconst glassVariant = (theme: Theme): CSSObject => ({\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n '& fieldset': { border: 'none' },\n '&:hover': {\n backgroundColor: alpha(theme.palette.background.paper, 0.15),\n borderColor: alpha(theme.palette.primary.main, 0.3),\n },\n '&.Mui-focused': {\n backgroundColor: alpha(theme.palette.background.paper, 0.2),\n borderColor: theme.palette.primary.main,\n boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,\n },\n});\n\n/** `gradient` variant: gradient fill with a masked gradient border. */\nconst gradientVariant = (theme: Theme): CSSObject => ({\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n border: `2px solid transparent`,\n backgroundOrigin: 'border-box',\n backgroundClip: 'padding-box, border-box',\n position: 'relative',\n '& fieldset': { border: 'none' },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n maskComposite: 'exclude',\n padding: '2px',\n zIndex: -1,\n },\n '&:hover': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`,\n },\n '&.Mui-focused': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,\n '&::before': {\n background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n },\n },\n});\n\n/** `default` variant: standard outlined borders with hover/focus/error states. */\nconst defaultVariant = (theme: Theme): CSSObject => ({\n '& fieldset': { borderColor: alpha(theme.palette.divider, 0.23) },\n '&:hover fieldset': { borderColor: theme.palette.primary.main },\n '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: 2 },\n '&.Mui-error fieldset': { borderColor: theme.palette.error.main },\n});\n\n/** Pick the variant style block for the outlined input. */\nconst variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {\n if (variant === 'glass') return glassVariant(theme);\n if (variant === 'gradient') return gradientVariant(theme);\n return defaultVariant(theme);\n};\n\nconst StyledFormControl = styled(FormControl, {\n shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'glow' && prop !== 'pulse',\n})<{\n customVariant?: SelectProps['variant'];\n glow?: boolean;\n pulse?: boolean;\n}>(({ theme, customVariant, glow, pulse }) => ({\n position: 'relative',\n ...(glow ? glowStyles(theme) : {}),\n ...(pulse ? pulseStyles(theme) : {}),\n '& .MuiOutlinedInput-root': {\n transition: 'all 0.3s ease',\n ...variantStyles(theme, customVariant),\n },\n}));\n\n/**\n * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY\n * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,\n * which does not descend into Fragments — a Fragment would hide every option.\n */\nfunction renderMenuItems(\n options: SelectProps['options'],\n placeholder: string | undefined,\n dataTestId: string | undefined,\n): React.ReactNode[] {\n const optionTestId = (value: string | number): string =>\n dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;\n const items = options.map((option) => (\n <MenuItem\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n data-testid={optionTestId(option.value)}\n >\n {option.label}\n </MenuItem>\n ));\n if (placeholder) {\n items.unshift(\n <MenuItem key=\"__placeholder__\" value=\"\" disabled>\n {placeholder}\n </MenuItem>,\n );\n }\n return items;\n}\n\n/**\n * The house scale as a FormControl size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two. This component's scale is already narrowed to `sm | md`, so the map\n * is exact rather than lossy.\n */\nconst formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {\n if (size === undefined) return undefined;\n return size === 'sm' ? 'small' : 'medium';\n};\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined\n // resolves to the default variant, MUI's medium size, and no glow/pulse —\n // keeping this render function under the complexity budget.\n variant,\n options,\n label,\n helperText,\n fullWidth = true,\n size,\n error,\n placeholder,\n glow,\n pulse,\n 'data-testid': dataTestId,\n value,\n 'aria-label': ariaLabel,\n ...props\n },\n ref,\n ) => {\n const labelId = React.useId();\n const helperTextId = React.useId();\n const selectId = React.useId();\n\n return (\n <StyledFormControl\n fullWidth={fullWidth}\n size={formControlSize(size)}\n error={error}\n customVariant={variant}\n glow={glow}\n pulse={pulse}\n ref={ref}\n data-testid={dataTestId}\n >\n {label && (\n <InputLabel id={labelId} htmlFor={selectId}>\n {label}\n </InputLabel>\n )}\n <MuiSelect\n id={selectId}\n labelId={label ? labelId : undefined}\n label={label}\n displayEmpty={Boolean(placeholder)}\n aria-describedby={helperText ? helperTextId : undefined}\n data-testid={dataTestId ? `${dataTestId}-select` : 'select'}\n value={value ?? ''}\n {...props}\n /*\n * `role=\"combobox\"` sits on MUI's display DIV, not on the hidden\n * native input that `{...props}` reaches — so an `aria-label` passed\n * to this component never landed on the element carrying the role,\n * and MUI's `aria-labelledby` then fell back to that div's OWN id.\n * The control announced as its current value: a filter's field\n * select read \"Status\" instead of \"Filtro 1 — campo\".\n *\n * Forwarding it here names the right element. The explicit\n * `undefined` clears that self-referential `aria-labelledby`, which\n * would otherwise win — a labelledby always beats a label in the\n * accessible-name computation.\n */\n SelectDisplayProps={\n ariaLabel === undefined\n ? undefined\n : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }\n }\n >\n {renderMenuItems(options, placeholder, dataTestId)}\n </MuiSelect>\n {helperText && (\n <FormHelperText id={helperTextId} error={error}>\n {helperText}\n </FormHelperText>\n )}\n </StyledFormControl>\n );\n },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';\n\ninterface ColorPalette {\n main: string;\n dark?: string;\n light?: string;\n contrastText?: string;\n}\n\n/**\n * `neutral` is not a MUI palette entry, so it is built from the grey ramp. The\n * literal fallbacks cover a theme whose grey ramp has been replaced with one\n * that omits these steps.\n */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\n main: theme.palette.grey?.[700] || '#616161',\n dark: theme.palette.grey?.[800] || '#424242',\n light: theme.palette.grey?.[500] || '#9e9e9e',\n contrastText: '#fff',\n});\n\n/** `danger` is this component's name for the error palette; the rest map straight through. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n const colorMap: Record<string, ColorPalette> = {\n primary: theme.palette.primary,\n secondary: theme.palette.secondary,\n success: theme.palette.success,\n warning: theme.palette.warning,\n info: theme.palette.info,\n danger: theme.palette.error,\n };\n\n return colorMap[color] || theme.palette.primary;\n};\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette. Split into three so the\n * fallback chains do not all count against one function.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n if (color === 'neutral') {\n return neutralPalette(theme);\n }\n\n const palette = namedPalette(theme, color);\n const { primary } = theme.palette;\n\n // namedPalette always yields a palette, so these need no optional chaining;\n // each step still falls back to `main` and then to primary when the theme\n // leaves it out.\n return {\n main: palette.main || primary.main,\n dark: palette.dark || palette.main || primary.dark,\n light: palette.light || palette.main || primary.light,\n contrastText: palette.contrastText || '#fff',\n };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst pickSize = <T,>(map: Record<SizeKey, T>, size: string): T => map[size as SizeKey] ?? map.md;\n\nconst CARD_SIZES: Record<SizeKey, CSSObject> = {\n xs: { padding: '8px', minHeight: '60px' },\n sm: { padding: '12px', minHeight: '70px' },\n md: { padding: '16px', minHeight: '80px' },\n lg: { padding: '20px', minHeight: '90px' },\n xl: { padding: '24px', minHeight: '100px' },\n};\n\nconst BUTTON_SIZES: Record<SizeKey, CSSObject> = {\n xs: { padding: '6px 12px', fontSize: '0.75rem', minHeight: '32px' },\n sm: { padding: '8px 16px', fontSize: '0.875rem', minHeight: '36px' },\n md: { padding: '10px 20px', fontSize: '1rem', minHeight: '40px' },\n lg: { padding: '12px 24px', fontSize: '1.125rem', minHeight: '44px' },\n xl: { padding: '14px 28px', fontSize: '1.25rem', minHeight: '48px' },\n};\n\nconst SEGMENT_SIZES: Record<SizeKey, CSSObject> = {\n xs: { padding: '4px 8px', fontSize: '0.75rem' },\n sm: { padding: '6px 12px', fontSize: '0.875rem' },\n md: { padding: '8px 16px', fontSize: '1rem' },\n lg: { padding: '10px 20px', fontSize: '1.125rem' },\n xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport interface SurfaceFlags {\n selected?: boolean;\n customColor?: string;\n glass?: boolean;\n gradient?: boolean;\n glow?: boolean;\n customSize?: string;\n animated?: boolean;\n}\n\nexport const formLabelSx = (theme: Theme, glass?: boolean, error?: boolean): CSSObject => ({\n marginBottom: theme.spacing(2),\n fontWeight: 600,\n color: error ? theme.palette.error.main : theme.palette.text.primary,\n ...(glass && {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(10px)',\n padding: '8px 12px',\n borderRadius: '8px',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n display: 'inline-block',\n }),\n});\n\n/** The card's resting surface, before glass/gradient/glow override parts of it. */\nconst cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n const { selected, animated, customSize = 'md' } = flags;\n\n return {\n cursor: 'pointer',\n transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.3)}`,\n backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,\n position: 'relative' as const,\n overflow: 'hidden' as const,\n ...(animated && { animation: `${slideAnimation} 0.4s ease-out` }),\n // A radial wash that grows from the centre as the card is selected or hovered.\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n width: selected ? '100%' : '0',\n height: selected ? '100%' : '0',\n background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,\n transform: 'translate(-50%, -50%)',\n transition: 'all 0.5s ease',\n borderRadius: '50%',\n },\n '&:hover': {\n borderColor: palette.main,\n backgroundColor: alpha(palette.main, 0.02),\n transform: 'translateY(-2px) scale(1.02)',\n boxShadow: `${theme.shadows[4]}, 0 10px 30px -5px ${alpha(palette.main, 0.2)}`,\n '&::before': { width: '120%', height: '120%' },\n },\n '&:active': { transform: 'scale(0.98)' },\n ...pickSize(CARD_SIZES, customSize),\n };\n};\n\nexport const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n const { selected, customColor = 'primary', glass, gradient, glow } = flags;\n const palette = getColorFromTheme(theme, customColor);\n\n return {\n ...cardBase(theme, flags, palette),\n ...(glass && {\n backgroundColor: selected\n ? alpha(palette.main, 0.1)\n : alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n }),\n ...(gradient &&\n selected && {\n background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,\n borderColor: palette.main,\n }),\n ...(glow &&\n selected && {\n animation: `${glowAnimation} 2s ease-in-out infinite`,\n boxShadow: `0 0 15px ${alpha(palette.main, 0.4)}`,\n }),\n };\n};\n\n/** The pill button's resting surface, before glass/gradient override parts of it. */\nconst buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n const { selected, animated, customSize = 'md' } = flags;\n\n return {\n borderRadius: theme.spacing(1),\n transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n fontWeight: 500,\n border: `2px solid ${selected ? palette.main : alpha(theme.palette.divider, 0.5)}`,\n backgroundColor: selected ? palette.main : 'transparent',\n color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,\n position: 'relative' as const,\n overflow: 'hidden' as const,\n ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n // Sized to zero until pressed, when the ripple keyframes expand it.\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n width: 0,\n height: 0,\n borderRadius: '50%',\n backgroundColor: alpha(palette.contrastText || '#fff', 0.3),\n transform: 'translate(-50%, -50%)',\n pointerEvents: 'none' as const,\n },\n '&:active::after': {\n animation: `${rippleAnimation} 0.6s ease-out`,\n width: '100%',\n height: '100%',\n },\n '&:hover': {\n borderColor: palette.main,\n backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),\n transform: 'translateY(-1px) scale(1.02)',\n boxShadow: `0 4px 12px ${alpha(palette.main, 0.2)}`,\n },\n '&:active': { transform: 'scale(0.98)' },\n ...pickSize(BUTTON_SIZES, customSize),\n };\n};\n\nexport const buttonRadioSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n const { selected, customColor = 'primary', glass, gradient } = flags;\n const palette = getColorFromTheme(theme, customColor);\n\n return {\n ...buttonBase(theme, flags, palette),\n ...(glass && {\n backgroundColor: selected\n ? alpha(palette.main, 0.8)\n : alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n }),\n ...(gradient &&\n selected && {\n background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,\n border: 'none',\n }),\n };\n};\n\nexport const segmentContainerSx = (\n theme: Theme,\n glass?: boolean,\n customColor = 'primary',\n): CSSObject => {\n const palette = getColorFromTheme(theme, customColor);\n\n return {\n padding: '4px',\n borderRadius: theme.spacing(1.5),\n backgroundColor: glass\n ? alpha(theme.palette.background.paper, 0.1)\n : alpha(palette.main, 0.05),\n backdropFilter: glass ? 'blur(20px)' : 'none',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n display: 'flex',\n gap: '2px',\n };\n};\n\n/**\n * An underline that grows from the centre outwards, and is already full width\n * when the segment is the selected one.\n */\nconst segmentUnderline = (color: string, selected: boolean): CSSObject => ({\n content: '\"\"',\n position: 'absolute',\n bottom: 0,\n left: selected ? 0 : '50%',\n width: selected ? '100%' : 0,\n height: '2px',\n backgroundColor: color,\n transition: 'all 0.3s ease',\n transform: selected ? 'translateX(0)' : 'translateX(-50%)',\n});\n\nexport const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n const { selected, customColor = 'primary', customSize = 'md', animated } = flags;\n const palette = getColorFromTheme(theme, customColor);\n\n return {\n flex: 1,\n borderRadius: theme.spacing(1),\n transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n fontWeight: 500,\n backgroundColor: selected ? theme.palette.background.paper : 'transparent',\n color: selected ? palette.main : theme.palette.text.secondary,\n boxShadow: selected\n ? `${theme.shadows[2]}, inset 0 1px 3px ${alpha(palette.main, 0.1)}`\n : 'none',\n position: 'relative' as const,\n overflow: 'hidden' as const,\n ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n '&::before': segmentUnderline(palette.main, Boolean(selected)),\n '&:hover': {\n backgroundColor: selected\n ? theme.palette.background.paper\n : alpha(theme.palette.action.hover, 0.08),\n color: palette.main,\n '&::before': { width: '100%', left: 0, transform: 'translateX(0)' },\n },\n '&:active': { transform: 'scale(0.98)' },\n ...pickSize(SEGMENT_SIZES, customSize),\n };\n};\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/CategorySelect/CategorySelect.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';\n\n/**\n * The prototype's METRICS, verbatim.\n *\n * Every number here is lifted from the approved design and is intentionally\n * absolute rather than derived from `theme.spacing`: the design is specified on\n * a half-pixel type scale (13.5px rows, 1.5px checkbox borders) that an 8px\n * spacing grid cannot express without rounding the look away.\n *\n * COLOURS are the deliberate exception — they come from the theme, because a\n * tenant can white-label the palette (a hard-coded indigo would survive the\n * rebrand and the rest of the screen would not) and because the library ships a\n * dark mode. On the default light indigo theme the tokens below resolve to the\n * prototype's own values.\n */\nexport const METRICS = {\n triggerHeight: 38,\n triggerRadius: 10,\n panelWidth: 340,\n panelRadius: 14,\n listMaxHeight: 290,\n sheetListMaxHeight: 340,\n rowHeight: 36,\n sheetRowHeight: 42,\n rowRadius: 8,\n boxSize: 18,\n chevronButton: 22,\n footerButton: 32,\n sheetFooterButton: 38,\n /** Below this width the panel becomes a bottom sheet. */\n sheetBreakpoint: 480,\n} as const;\n\n/** Accent family, derived so a white-labelled palette carries through. */\nconst accent = (theme: Theme) => ({\n main: theme.palette.primary.main,\n ink: theme.palette.primary.dark,\n soft: alpha(theme.palette.primary.main, 0.08),\n edge: alpha(theme.palette.primary.main, 0.28),\n ring: alpha(theme.palette.primary.main, 0.15),\n});\n\n/** The closed control. `selected` swaps it to the accent-tinted \"has filter\" skin. */\nexport const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSObject => {\n const brand = accent(theme);\n return {\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n height: METRICS.triggerHeight,\n padding: '0 10px 0 12px',\n borderRadius: `${METRICS.triggerRadius}px`,\n border: `1px solid ${open || selected ? brand.edge : theme.palette.divider}`,\n background: selected ? brand.soft : theme.palette.background.paper,\n color: selected ? brand.ink : theme.palette.text.primary,\n font: 'inherit',\n fontSize: 13,\n cursor: 'pointer',\n maxWidth: '100%',\n transition: 'border-color .12s, box-shadow .12s',\n boxShadow: open ? `0 0 0 3px ${brand.ring}` : 'none',\n '&:hover': { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },\n '&:focus-visible': {\n outline: 'none',\n borderColor: brand.main,\n boxShadow: `0 0 0 3px ${alpha(brand.main, 0.18)}`,\n },\n '&:disabled': { opacity: 0.5, cursor: 'default' },\n };\n};\n\n/** The count pill inside the trigger. */\nexport const triggerCountSx = (theme: Theme): CSSObject => ({\n fontWeight: 600,\n fontSize: 11,\n lineHeight: 1,\n background: theme.palette.primary.main,\n color: theme.palette.primary.contrastText,\n borderRadius: '999px',\n padding: '3px 6px',\n minWidth: 18,\n textAlign: 'center',\n});\n\n/** The trigger's inline clear (×) and the chevron. */\nexport const triggerClearSx: CSSObject = {\n width: 20,\n height: 20,\n flex: '0 0 auto',\n border: 0,\n background: 'transparent',\n borderRadius: '5px',\n display: 'grid',\n placeItems: 'center',\n cursor: 'pointer',\n color: 'inherit',\n opacity: 0.6,\n padding: 0,\n '&:hover': { background: alpha('#000', 0.08), opacity: 1 },\n};\n\nexport const triggerChevronSx = (open: boolean): CSSObject => ({\n width: 14,\n height: 14,\n flex: '0 0 auto',\n opacity: 0.55,\n transition: 'transform .15s',\n transform: open ? 'rotate(180deg)' : 'none',\n});\n\n/** The floating panel. */\nexport const panelSx = (theme: Theme): CSSObject => ({\n width: METRICS.panelWidth,\n maxWidth: '100%',\n background: theme.palette.background.paper,\n border: `1px solid ${theme.palette.divider}`,\n borderRadius: `${METRICS.panelRadius}px`,\n boxShadow: '0 1px 2px rgba(16,20,35,.05), 0 18px 40px -12px rgba(16,20,35,.28)',\n display: 'flex',\n flexDirection: 'column',\n overflow: 'hidden',\n});\n\n/** Bottom-sheet skin, applied under {@link METRICS.sheetBreakpoint}. */\nexport const sheetSx = (theme: Theme): CSSObject => ({\n width: '100%',\n maxWidth: 'none',\n borderRadius: '18px 18px 0 0',\n borderBottom: 0,\n position: 'relative',\n paddingTop: '4px',\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 7,\n left: '50%',\n transform: 'translateX(-50%)',\n width: 36,\n height: 4,\n borderRadius: '2px',\n background: theme.palette.divider,\n },\n});\n\nexport const panelHeadSx = (theme: Theme, sheet: boolean): CSSObject => ({\n padding: sheet ? '18px 10px 8px' : '10px 10px 8px',\n borderBottom: `1px solid ${theme.palette.divider}`,\n});\n\nexport const pinnedSx = (theme: Theme): CSSObject => ({\n padding: '9px 10px',\n borderBottom: `1px solid ${theme.palette.divider}`,\n background: alpha(theme.palette.primary.main, 0.03),\n});\n\nexport const pinnedLabelSx = (theme: Theme): CSSObject => ({\n fontWeight: 600,\n fontSize: 10,\n lineHeight: 1,\n letterSpacing: '.08em',\n textTransform: 'uppercase',\n color: theme.palette.text.secondary,\n marginBottom: '7px',\n});\n\nexport const chipWrapSx: CSSObject = {\n display: 'flex',\n flexWrap: 'wrap',\n gap: '5px',\n maxHeight: 74,\n overflow: 'auto',\n};\n\n/** A selected-category chip, in the pinned tray and the applied bar alike. */\nexport const chipSx = (theme: Theme): CSSObject => {\n const brand = accent(theme);\n return {\n display: 'inline-flex',\n alignItems: 'center',\n gap: '5px',\n fontSize: 12,\n background: brand.soft,\n color: brand.ink,\n border: `1px solid ${brand.edge}`,\n borderRadius: '7px',\n padding: '3px 4px 3px 8px',\n '& button': {\n border: 0,\n background: 'transparent',\n color: 'inherit',\n cursor: 'pointer',\n padding: 0,\n width: 16,\n height: 16,\n borderRadius: '4px',\n display: 'grid',\n placeItems: 'center',\n opacity: 0.65,\n fontSize: 13,\n lineHeight: 1,\n '&:hover': { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 },\n },\n };\n};\n\nexport const listSx = (sheet: boolean): CSSObject => ({\n overflow: 'auto',\n maxHeight: sheet ? METRICS.sheetListMaxHeight : METRICS.listMaxHeight,\n padding: '6px 6px 8px',\n scrollPadding: '8px 0',\n overscrollBehavior: 'contain',\n});\n\n/** A row. `active` is the KEYBOARD cursor — deliberately distinct from hover. */\nexport const rowSx = (theme: Theme, active: boolean, sheet: boolean): CSSObject => ({\n display: 'flex',\n alignItems: 'center',\n gap: '8px',\n padding: '0 8px',\n height: sheet ? METRICS.sheetRowHeight : METRICS.rowHeight,\n borderRadius: `${METRICS.rowRadius}px`,\n cursor: 'pointer',\n userSelect: 'none',\n position: 'relative',\n width: '100%',\n border: 0,\n textAlign: 'left',\n font: 'inherit',\n background: active ? alpha(theme.palette.primary.main, 0.08) : 'transparent',\n boxShadow: active ? `inset 0 0 0 1px ${alpha(theme.palette.primary.main, 0.3)}` : 'none',\n '&:hover': {\n background: active\n ? alpha(theme.palette.primary.main, 0.08)\n : theme.palette.action.hover,\n },\n '&:focus-visible': { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 1 },\n});\n\nexport const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({\n flex: 1,\n minWidth: 0,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n fontSize: 13.5,\n fontWeight: isCategory ? 600 : 450,\n color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary,\n});\n\nexport const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({\n font: '500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace',\n color: selected ? theme.palette.primary.main : theme.palette.text.secondary,\n fontWeight: selected ? 600 : 500,\n flex: '0 0 auto',\n});\n\n/** The query hit inside a row label. */\nexport const markSx: CSSObject = {\n background: '#fff2a8',\n color: 'inherit',\n borderRadius: '2px',\n padding: '0 1px',\n};\n\nexport const chevronButtonSx = (theme: Theme, open: boolean): CSSObject => ({\n width: METRICS.chevronButton,\n height: METRICS.chevronButton,\n flex: '0 0 auto',\n border: 0,\n background: 'transparent',\n borderRadius: '6px',\n display: 'grid',\n placeItems: 'center',\n cursor: 'pointer',\n color: theme.palette.text.secondary,\n padding: 0,\n '&:hover': { background: theme.palette.action.hover, color: theme.palette.text.primary },\n '& svg': { width: 12, height: 12, transition: 'transform .15s', transform: open ? 'rotate(90deg)' : 'none' },\n});\n\n/** The tri-state checkbox: unchecked, checked, or the partial bar. */\nexport const checkboxSx = (theme: Theme, state: 'off' | 'partial' | 'on'): CSSObject => ({\n width: METRICS.boxSize,\n height: METRICS.boxSize,\n flex: '0 0 auto',\n border: `1.5px solid ${state === 'off' ? theme.palette.divider : theme.palette.primary.main}`,\n borderRadius: '5px',\n background: state === 'off' ? theme.palette.background.paper : theme.palette.primary.main,\n display: 'grid',\n placeItems: 'center',\n transition: 'background .1s, border-color .1s',\n '& svg': { width: 12, height: 12, color: theme.palette.primary.contrastText },\n});\n\n/** The partial bar drawn inside a half-selected checkbox. */\nexport const checkboxBarSx = (theme: Theme): CSSObject => ({\n width: 9,\n height: 2,\n background: theme.palette.primary.contrastText,\n borderRadius: '1px',\n});\n\nexport const radioSx = (theme: Theme, on: boolean): CSSObject => ({\n width: METRICS.boxSize,\n height: METRICS.boxSize,\n flex: '0 0 auto',\n borderRadius: '50%',\n background: theme.palette.background.paper,\n border: on\n ? `5.5px solid ${theme.palette.primary.main}`\n : `1.5px solid ${theme.palette.divider}`,\n boxSizing: 'border-box',\n});\n\nexport const sectionHeadSx = (theme: Theme): CSSObject => ({\n fontWeight: 600,\n fontSize: 10,\n lineHeight: 1,\n letterSpacing: '.08em',\n textTransform: 'uppercase',\n color: theme.palette.text.secondary,\n padding: '9px 8px 6px',\n});\n\nexport const footerSx = (theme: Theme): CSSObject => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '8px',\n padding: '9px 10px',\n borderTop: `1px solid ${theme.palette.divider}`,\n background: theme.palette.action.hover,\n});\n\nexport const emptySx = (theme: Theme): CSSObject => ({\n padding: '26px 18px',\n textAlign: 'center',\n color: theme.palette.text.secondary,\n '& strong': {\n display: 'block',\n color: theme.palette.text.primary,\n fontSize: 13.5,\n marginBottom: '4px',\n },\n '& p': { margin: '0 0 12px', fontSize: 12.5, lineHeight: 1.5 },\n});\n\n/** Skeleton row used while the catalogue loads. */\nexport const skeletonSx: CSSObject = {\n height: METRICS.rowHeight,\n margin: '4px 6px',\n borderRadius: `${METRICS.rowRadius}px`,\n};\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { Theme } from '@mui/material/styles/index.js';\nimport { useRichTextEditor } from './RichTextEditor.hooks';\nimport type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar';\n\nconst DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {\n bold: true,\n italic: true,\n underline: true,\n strikethrough: false,\n orderedList: true,\n unorderedList: true,\n link: true,\n image: false,\n codeBlock: false,\n quote: false,\n customItems: [] };\n\nconst RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {\n value: '',\n placeholder: 'Start typing...',\n disabled: false,\n readOnly: false,\n toolbar: {},\n height: 300 };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, v]) => v !== undefined),\n ) as Partial<RichTextEditorProps>;\n\n// Simple inline formats are a tag swap; lists and the value-carrying formats\n// need their own handling. This was one nine-case switch.\nconst editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({\n minHeight: typeof height === 'number' ? `${height}px` : height,\n p: 2,\n outline: 'none',\n cursor: disabled ? 'not-allowed' : 'text',\n '&:empty::before': {\n content: `\"${placeholder}\"`,\n color: theme.palette.text.disabled,\n pointerEvents: 'none' },\n '& p': {\n margin: '8px 0',\n '&:first-of-type': { marginTop: 0 },\n '&:last-of-type': { marginBottom: 0 } },\n '& ul, & ol': { marginLeft: theme.spacing(2) },\n '& blockquote': {\n borderLeft: `4px solid ${theme.palette.primary.main}`,\n paddingLeft: theme.spacing(2),\n margin: `${theme.spacing(1)} 0`,\n fontStyle: 'italic',\n backgroundColor: alpha(theme.palette.primary.main, 0.05) },\n '& pre': {\n backgroundColor: alpha(theme.palette.text.primary, 0.08),\n padding: theme.spacing(1),\n borderRadius: 1,\n fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n fontSize: '0.875rem',\n overflow: 'auto' },\n '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });\n\nconst shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({\n border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n borderRadius: 1,\n overflow: 'hidden',\n transition: 'border-color 0.2s ease-in-out',\n ...(isFocused && {\n borderColor: theme.palette.primary.main,\n boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),\n ...(disabled && {\n backgroundColor: theme.palette.action.disabledBackground,\n color: theme.palette.text.disabled }) });\n\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n (editorProps, ref) => {\n const {\n value,\n onChange,\n placeholder,\n disabled,\n readOnly,\n toolbar,\n height,\n maxLength,\n onFocus,\n onBlur,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedBy,\n ...props\n } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;\n\n const theme = useTheme();\n const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };\n const editor = useRichTextEditor({\n value,\n onChange,\n onFocus,\n onBlur,\n disabled,\n readOnly,\n maxLength });\n\n return (\n <Paper\n ref={ref}\n className={className}\n data-testid={testId || 'rich-text-editor'}\n elevation={1}\n sx={shellSx(theme, editor.isFocused, Boolean(disabled))}\n {...props}\n >\n <RichTextEditorToolbar\n config={toolbarConfig}\n disabled={Boolean(disabled)}\n readOnly={Boolean(readOnly)}\n maxLength={maxLength}\n characterCount={editor.characterCount}\n editorRef={editor.editorRef}\n onFormat={editor.applyFormat}\n />\n\n <Box\n ref={editor.editorRef}\n contentEditable={!disabled && !readOnly}\n onInput={editor.handleContentChange}\n onFocus={editor.handleFocus}\n onBlur={editor.handleBlur}\n role=\"textbox\"\n aria-label={ariaLabel || 'Rich text editor'}\n aria-describedby={ariaDescribedBy}\n aria-multiline=\"true\"\n tabIndex={disabled ? -1 : 0}\n data-testid=\"editor-content\"\n suppressContentEditableWarning\n sx={editorContentSx(theme, Boolean(disabled), placeholder, height)}\n />\n </Paper>\n );\n },\n);\n\nRichTextEditor.displayName = 'RichTextEditor';\n\nexport default RichTextEditor;"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form/AddressAutocomplete/AddressTextField.tsx"],"sourcesContent":["import type { TextFieldProps } from '@mui/material/TextField/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport type { AddressAutocompleteProps } from './AddressAutocomplete.types';\n\n// Kept module-local on purpose: the inferred type of a styled() component cannot\n// be named across a module boundary here (TS2742), so the plain component below\n// is what the rest of the folder imports.\nconst GlassTextField = styled(TextField)(({ theme }) => ({\n '& .MuiOutlinedInput-root': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,\n backdropFilter: 'blur(10px)',\n WebkitBackdropFilter: 'blur(10px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n transition: theme.transitions.create(['border-color', 'box-shadow', 'background']),\n '&:hover': {\n background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.7)} 100%)`,\n borderColor: theme.palette.primary.main,\n },\n '&.Mui-focused': {\n background: theme.palette.background.paper,\n boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.25)}`,\n },\n '& fieldset': {\n border: 'none',\n },\n },\n}));\n\nexport type AddressTextFieldProps = Omit<TextFieldProps, 'variant'> & {\n addressVariant: AddressAutocompleteProps['variant'];\n};\n\n// 'glass' is not a MUI variant: it renders the outlined field with the frosted\n// treatment on top.\nexport const AddressTextField: FC<AddressTextFieldProps> = ({ addressVariant, ...props }) =>\n addressVariant === 'glass' ? (\n <GlassTextField variant=\"outlined\" {...props} />\n ) : (\n <TextField variant={addressVariant} {...props} />\n );\n"],"mappings":";AACA,OAAO,eAAe;AACtB,SAAS,OAAO,cAAc;AAsC1B;AA7BJ,IAAM,iBAAiB,OAAO,SAAS,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACvD,4BAA4B;AAAA,IAC1B,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,IACnI,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,IACvD,YAAY,MAAM,YAAY,OAAO,CAAC,gBAAgB,cAAc,YAAY,CAAC;AAAA,IACjF,WAAW;AAAA,MACT,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,MACnI,aAAa,MAAM,QAAQ,QAAQ;AAAA,IACrC;AAAA,IACA,iBAAiB;AAAA,MACf,YAAY,MAAM,QAAQ,WAAW;AAAA,MACrC,WAAW,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,IACjE;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AACF,EAAE;AAQK,IAAM,mBAA8C,CAAC,EAAE,gBAAgB,GAAG,MAAM,MACrF,mBAAmB,UACjB,oBAAC,kBAAe,SAAQ,YAAY,GAAG,OAAO,IAE9C,oBAAC,aAAU,SAAS,gBAAiB,GAAG,OAAO;","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|