@thunderid/react 0.11.4 → 0.13.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/cjs/components/actions/SignInButton/BaseSignInButton.cjs +2 -3
- package/dist/cjs/components/actions/SignInButton/BaseSignInButton.cjs.map +1 -1
- package/dist/cjs/components/actions/SignOutButton/BaseSignOutButton.cjs +2 -3
- package/dist/cjs/components/actions/SignOutButton/BaseSignOutButton.cjs.map +1 -1
- package/dist/cjs/components/actions/SignUpButton/BaseSignUpButton.cjs +2 -3
- package/dist/cjs/components/actions/SignUpButton/BaseSignUpButton.cjs.map +1 -1
- package/dist/cjs/components/adapters/Consent.cjs +34 -27
- package/dist/cjs/components/adapters/Consent.cjs.map +1 -1
- package/dist/cjs/components/adapters/ConsentCheckboxList.cjs +7 -8
- package/dist/cjs/components/adapters/ConsentCheckboxList.cjs.map +1 -1
- package/dist/cjs/components/adapters/ConsentCheckboxList.styles.cjs +8 -9
- package/dist/cjs/components/adapters/ConsentCheckboxList.styles.cjs.map +1 -1
- package/dist/cjs/components/adapters/ImageComponent.cjs +13 -9
- package/dist/cjs/components/adapters/ImageComponent.cjs.map +1 -1
- package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.cjs +3 -4
- package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.cjs.map +1 -1
- package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.cjs +11 -12
- package/dist/cjs/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.cjs.map +1 -1
- package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs +12 -16
- package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.cjs.map +1 -1
- package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.styles.cjs +18 -15
- package/dist/cjs/components/presentation/UserDropdown/BaseUserDropdown.styles.cjs.map +1 -1
- package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.cjs +5 -6
- package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.cjs.map +1 -1
- package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.styles.cjs +25 -26
- package/dist/cjs/components/presentation/UserProfile/BaseUserProfile.styles.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/AcceptInvite/BaseAcceptInvite.cjs +25 -42
- package/dist/cjs/components/presentation/auth/AcceptInvite/BaseAcceptInvite.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/AcceptInvite/BaseAcceptInvite.styles.cjs +41 -9
- package/dist/cjs/components/presentation/auth/AcceptInvite/BaseAcceptInvite.styles.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/AuthOptionFactory.cjs +88 -80
- package/dist/cjs/components/presentation/auth/AuthOptionFactory.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/InviteUser/BaseInviteUser.cjs +9 -22
- package/dist/cjs/components/presentation/auth/InviteUser/BaseInviteUser.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/InviteUser/BaseInviteUser.styles.cjs +22 -9
- package/dist/cjs/components/presentation/auth/InviteUser/BaseInviteUser.styles.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/Recovery/BaseRecovery.cjs +11 -12
- package/dist/cjs/components/presentation/auth/Recovery/BaseRecovery.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/SignIn/BaseSignIn.cjs +11 -16
- package/dist/cjs/components/presentation/auth/SignIn/BaseSignIn.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/SignIn/BaseSignIn.styles.cjs +32 -27
- package/dist/cjs/components/presentation/auth/SignIn/BaseSignIn.styles.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/SignIn/SignIn.cjs +78 -39
- package/dist/cjs/components/presentation/auth/SignIn/SignIn.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.cjs +11 -12
- package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.cjs.map +1 -1
- package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.styles.cjs +25 -26
- package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/AffixedField/AffixedField.cjs +6 -7
- package/dist/cjs/components/primitives/AffixedField/AffixedField.cjs.map +1 -1
- package/dist/cjs/components/primitives/AffixedField/AffixedField.styles.cjs +9 -10
- package/dist/cjs/components/primitives/AffixedField/AffixedField.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Alert/Alert.cjs +6 -7
- package/dist/cjs/components/primitives/Alert/Alert.cjs.map +1 -1
- package/dist/cjs/components/primitives/Alert/Alert.styles.cjs +10 -11
- package/dist/cjs/components/primitives/Alert/Alert.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Avatar/Avatar.cjs +5 -6
- package/dist/cjs/components/primitives/Avatar/Avatar.cjs.map +1 -1
- package/dist/cjs/components/primitives/Avatar/Avatar.styles.cjs +7 -8
- package/dist/cjs/components/primitives/Avatar/Avatar.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Button/Button.cjs +8 -12
- package/dist/cjs/components/primitives/Button/Button.cjs.map +1 -1
- package/dist/cjs/components/primitives/Button/Button.styles.cjs +23 -24
- package/dist/cjs/components/primitives/Button/Button.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Card/Card.cjs +8 -9
- package/dist/cjs/components/primitives/Card/Card.cjs.map +1 -1
- package/dist/cjs/components/primitives/Card/Card.styles.cjs +12 -13
- package/dist/cjs/components/primitives/Card/Card.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Checkbox/Checkbox.cjs +5 -6
- package/dist/cjs/components/primitives/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/cjs/components/primitives/Checkbox/Checkbox.styles.cjs +7 -8
- package/dist/cjs/components/primitives/Checkbox/Checkbox.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/CopyableText/CopyableText.styles.cjs +6 -7
- package/dist/cjs/components/primitives/CopyableText/CopyableText.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/DatePicker/DatePicker.cjs +4 -5
- package/dist/cjs/components/primitives/DatePicker/DatePicker.cjs.map +1 -1
- package/dist/cjs/components/primitives/DatePicker/DatePicker.styles.cjs +5 -6
- package/dist/cjs/components/primitives/DatePicker/DatePicker.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Dialog/Dialog.cjs +7 -8
- package/dist/cjs/components/primitives/Dialog/Dialog.cjs.map +1 -1
- package/dist/cjs/components/primitives/Dialog/Dialog.styles.cjs +8 -9
- package/dist/cjs/components/primitives/Dialog/Dialog.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Divider/Divider.cjs +7 -8
- package/dist/cjs/components/primitives/Divider/Divider.cjs.map +1 -1
- package/dist/cjs/components/primitives/Divider/Divider.styles.cjs +7 -8
- package/dist/cjs/components/primitives/Divider/Divider.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/FormControl/FormControl.cjs +3 -4
- package/dist/cjs/components/primitives/FormControl/FormControl.cjs.map +1 -1
- package/dist/cjs/components/primitives/FormControl/FormControl.styles.cjs +4 -5
- package/dist/cjs/components/primitives/FormControl/FormControl.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/InputLabel/InputLabel.cjs +3 -4
- package/dist/cjs/components/primitives/InputLabel/InputLabel.cjs.map +1 -1
- package/dist/cjs/components/primitives/InputLabel/InputLabel.styles.cjs +6 -7
- package/dist/cjs/components/primitives/InputLabel/InputLabel.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.cjs +19 -20
- package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.cjs.map +1 -1
- package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.styles.cjs +16 -17
- package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Logo/Logo.cjs +3 -4
- package/dist/cjs/components/primitives/Logo/Logo.cjs.map +1 -1
- package/dist/cjs/components/primitives/Logo/Logo.styles.cjs +9 -10
- package/dist/cjs/components/primitives/Logo/Logo.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs +11 -12
- package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs.map +1 -1
- package/dist/cjs/components/primitives/MultiInput/MultiInput.styles.cjs +10 -11
- package/dist/cjs/components/primitives/MultiInput/MultiInput.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/OtpField/OtpField.cjs +4 -5
- package/dist/cjs/components/primitives/OtpField/OtpField.cjs.map +1 -1
- package/dist/cjs/components/primitives/OtpField/OtpField.styles.cjs +5 -6
- package/dist/cjs/components/primitives/OtpField/OtpField.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs +3 -4
- package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs.map +1 -1
- package/dist/cjs/components/primitives/PasswordField/PasswordField.styles.cjs +4 -5
- package/dist/cjs/components/primitives/PasswordField/PasswordField.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Select/Select.cjs +3 -4
- package/dist/cjs/components/primitives/Select/Select.cjs.map +1 -1
- package/dist/cjs/components/primitives/Select/Select.styles.cjs +5 -6
- package/dist/cjs/components/primitives/Select/Select.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Spinner/Spinner.cjs +4 -6
- package/dist/cjs/components/primitives/Spinner/Spinner.cjs.map +1 -1
- package/dist/cjs/components/primitives/Spinner/Spinner.styles.cjs +20 -12
- package/dist/cjs/components/primitives/Spinner/Spinner.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/TextField/TextField.cjs +6 -7
- package/dist/cjs/components/primitives/TextField/TextField.cjs.map +1 -1
- package/dist/cjs/components/primitives/TextField/TextField.styles.cjs +8 -9
- package/dist/cjs/components/primitives/TextField/TextField.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Toggle/Toggle.cjs +7 -8
- package/dist/cjs/components/primitives/Toggle/Toggle.cjs.map +1 -1
- package/dist/cjs/components/primitives/Toggle/Toggle.styles.cjs +7 -8
- package/dist/cjs/components/primitives/Toggle/Toggle.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Tooltip/Tooltip.cjs +4 -5
- package/dist/cjs/components/primitives/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/cjs/components/primitives/Tooltip/Tooltip.styles.cjs +13 -14
- package/dist/cjs/components/primitives/Tooltip/Tooltip.styles.cjs.map +1 -1
- package/dist/cjs/components/primitives/Typography/Typography.cjs +2 -3
- package/dist/cjs/components/primitives/Typography/Typography.cjs.map +1 -1
- package/dist/cjs/components/primitives/Typography/Typography.styles.cjs +18 -19
- package/dist/cjs/components/primitives/Typography/Typography.styles.cjs.map +1 -1
- package/dist/cjs/contexts/ThunderID/ThunderIDProvider.cjs +4 -1
- package/dist/cjs/contexts/ThunderID/ThunderIDProvider.cjs.map +1 -1
- package/dist/cjs/styles/emotion.cjs +64 -0
- package/dist/cjs/styles/emotion.cjs.map +1 -0
- package/dist/components/actions/SignInButton/BaseSignInButton.d.ts.map +1 -1
- package/dist/components/actions/SignInButton/BaseSignInButton.js +1 -1
- package/dist/components/actions/SignInButton/BaseSignInButton.js.map +1 -1
- package/dist/components/actions/SignOutButton/BaseSignOutButton.d.ts.map +1 -1
- package/dist/components/actions/SignOutButton/BaseSignOutButton.js +1 -1
- package/dist/components/actions/SignOutButton/BaseSignOutButton.js.map +1 -1
- package/dist/components/actions/SignUpButton/BaseSignUpButton.d.ts.map +1 -1
- package/dist/components/actions/SignUpButton/BaseSignUpButton.js +1 -1
- package/dist/components/actions/SignUpButton/BaseSignUpButton.js.map +1 -1
- package/dist/components/adapters/Consent.d.ts.map +1 -1
- package/dist/components/adapters/Consent.js +34 -27
- package/dist/components/adapters/Consent.js.map +1 -1
- package/dist/components/adapters/ConsentCheckboxList.d.ts.map +1 -1
- package/dist/components/adapters/ConsentCheckboxList.js +1 -1
- package/dist/components/adapters/ConsentCheckboxList.js.map +1 -1
- package/dist/components/adapters/ConsentCheckboxList.styles.d.ts.map +1 -1
- package/dist/components/adapters/ConsentCheckboxList.styles.js +1 -1
- package/dist/components/adapters/ConsentCheckboxList.styles.js.map +1 -1
- package/dist/components/adapters/ImageComponent.d.ts.map +1 -1
- package/dist/components/adapters/ImageComponent.js +13 -9
- package/dist/components/adapters/ImageComponent.js.map +1 -1
- package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.d.ts.map +1 -1
- package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.js +1 -1
- package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.js.map +1 -1
- package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.d.ts.map +1 -1
- package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.js +1 -1
- package/dist/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.js.map +1 -1
- package/dist/components/presentation/UserDropdown/BaseUserDropdown.d.ts.map +1 -1
- package/dist/components/presentation/UserDropdown/BaseUserDropdown.js +5 -8
- package/dist/components/presentation/UserDropdown/BaseUserDropdown.js.map +1 -1
- package/dist/components/presentation/UserDropdown/BaseUserDropdown.styles.d.ts.map +1 -1
- package/dist/components/presentation/UserDropdown/BaseUserDropdown.styles.js +5 -1
- package/dist/components/presentation/UserDropdown/BaseUserDropdown.styles.js.map +1 -1
- package/dist/components/presentation/UserProfile/BaseUserProfile.d.ts.map +1 -1
- package/dist/components/presentation/UserProfile/BaseUserProfile.js +1 -1
- package/dist/components/presentation/UserProfile/BaseUserProfile.js.map +1 -1
- package/dist/components/presentation/UserProfile/BaseUserProfile.styles.d.ts.map +1 -1
- package/dist/components/presentation/UserProfile/BaseUserProfile.styles.js +1 -1
- package/dist/components/presentation/UserProfile/BaseUserProfile.styles.js.map +1 -1
- package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.d.ts.map +1 -1
- package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.js +23 -39
- package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.js.map +1 -1
- package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.styles.d.ts.map +1 -1
- package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.styles.js +38 -5
- package/dist/components/presentation/auth/AcceptInvite/BaseAcceptInvite.styles.js.map +1 -1
- package/dist/components/presentation/auth/AuthOptionFactory.d.ts.map +1 -1
- package/dist/components/presentation/auth/AuthOptionFactory.js +82 -73
- package/dist/components/presentation/auth/AuthOptionFactory.js.map +1 -1
- package/dist/components/presentation/auth/InviteUser/BaseInviteUser.d.ts.map +1 -1
- package/dist/components/presentation/auth/InviteUser/BaseInviteUser.js +5 -17
- package/dist/components/presentation/auth/InviteUser/BaseInviteUser.js.map +1 -1
- package/dist/components/presentation/auth/InviteUser/BaseInviteUser.styles.d.ts.map +1 -1
- package/dist/components/presentation/auth/InviteUser/BaseInviteUser.styles.js +19 -5
- package/dist/components/presentation/auth/InviteUser/BaseInviteUser.styles.js.map +1 -1
- package/dist/components/presentation/auth/Recovery/BaseRecovery.d.ts.map +1 -1
- package/dist/components/presentation/auth/Recovery/BaseRecovery.js +1 -1
- package/dist/components/presentation/auth/Recovery/BaseRecovery.js.map +1 -1
- package/dist/components/presentation/auth/SignIn/BaseSignIn.d.ts.map +1 -1
- package/dist/components/presentation/auth/SignIn/BaseSignIn.js +2 -6
- package/dist/components/presentation/auth/SignIn/BaseSignIn.js.map +1 -1
- package/dist/components/presentation/auth/SignIn/BaseSignIn.styles.d.ts.map +1 -1
- package/dist/components/presentation/auth/SignIn/BaseSignIn.styles.js +7 -1
- package/dist/components/presentation/auth/SignIn/BaseSignIn.styles.js.map +1 -1
- package/dist/components/presentation/auth/SignIn/SignIn.d.ts.map +1 -1
- package/dist/components/presentation/auth/SignIn/SignIn.js +79 -40
- package/dist/components/presentation/auth/SignIn/SignIn.js.map +1 -1
- package/dist/components/presentation/auth/SignUp/BaseSignUp.d.ts.map +1 -1
- package/dist/components/presentation/auth/SignUp/BaseSignUp.js +1 -1
- package/dist/components/presentation/auth/SignUp/BaseSignUp.js.map +1 -1
- package/dist/components/presentation/auth/SignUp/BaseSignUp.styles.d.ts.map +1 -1
- package/dist/components/presentation/auth/SignUp/BaseSignUp.styles.js +1 -1
- package/dist/components/presentation/auth/SignUp/BaseSignUp.styles.js.map +1 -1
- package/dist/components/primitives/AffixedField/AffixedField.d.ts.map +1 -1
- package/dist/components/primitives/AffixedField/AffixedField.js +1 -1
- package/dist/components/primitives/AffixedField/AffixedField.js.map +1 -1
- package/dist/components/primitives/AffixedField/AffixedField.styles.d.ts.map +1 -1
- package/dist/components/primitives/AffixedField/AffixedField.styles.js +1 -1
- package/dist/components/primitives/AffixedField/AffixedField.styles.js.map +1 -1
- package/dist/components/primitives/Alert/Alert.d.ts.map +1 -1
- package/dist/components/primitives/Alert/Alert.js +1 -1
- package/dist/components/primitives/Alert/Alert.js.map +1 -1
- package/dist/components/primitives/Alert/Alert.styles.d.ts.map +1 -1
- package/dist/components/primitives/Alert/Alert.styles.js +1 -1
- package/dist/components/primitives/Alert/Alert.styles.js.map +1 -1
- package/dist/components/primitives/Avatar/Avatar.d.ts.map +1 -1
- package/dist/components/primitives/Avatar/Avatar.js +1 -1
- package/dist/components/primitives/Avatar/Avatar.js.map +1 -1
- package/dist/components/primitives/Avatar/Avatar.styles.d.ts.map +1 -1
- package/dist/components/primitives/Avatar/Avatar.styles.js +1 -1
- package/dist/components/primitives/Avatar/Avatar.styles.js.map +1 -1
- package/dist/components/primitives/Button/Button.d.ts.map +1 -1
- package/dist/components/primitives/Button/Button.js +2 -5
- package/dist/components/primitives/Button/Button.js.map +1 -1
- package/dist/components/primitives/Button/Button.styles.d.ts.map +1 -1
- package/dist/components/primitives/Button/Button.styles.js +1 -1
- package/dist/components/primitives/Button/Button.styles.js.map +1 -1
- package/dist/components/primitives/Card/Card.d.ts.map +1 -1
- package/dist/components/primitives/Card/Card.js +1 -1
- package/dist/components/primitives/Card/Card.js.map +1 -1
- package/dist/components/primitives/Card/Card.styles.d.ts.map +1 -1
- package/dist/components/primitives/Card/Card.styles.js +1 -1
- package/dist/components/primitives/Card/Card.styles.js.map +1 -1
- package/dist/components/primitives/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/primitives/Checkbox/Checkbox.js +1 -1
- package/dist/components/primitives/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/primitives/Checkbox/Checkbox.styles.d.ts.map +1 -1
- package/dist/components/primitives/Checkbox/Checkbox.styles.js +1 -1
- package/dist/components/primitives/Checkbox/Checkbox.styles.js.map +1 -1
- package/dist/components/primitives/CopyableText/CopyableText.styles.d.ts.map +1 -1
- package/dist/components/primitives/CopyableText/CopyableText.styles.js +1 -1
- package/dist/components/primitives/CopyableText/CopyableText.styles.js.map +1 -1
- package/dist/components/primitives/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/primitives/DatePicker/DatePicker.js +1 -1
- package/dist/components/primitives/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/primitives/DatePicker/DatePicker.styles.d.ts.map +1 -1
- package/dist/components/primitives/DatePicker/DatePicker.styles.js +1 -1
- package/dist/components/primitives/DatePicker/DatePicker.styles.js.map +1 -1
- package/dist/components/primitives/Dialog/Dialog.d.ts.map +1 -1
- package/dist/components/primitives/Dialog/Dialog.js +1 -1
- package/dist/components/primitives/Dialog/Dialog.js.map +1 -1
- package/dist/components/primitives/Dialog/Dialog.styles.d.ts.map +1 -1
- package/dist/components/primitives/Dialog/Dialog.styles.js +1 -1
- package/dist/components/primitives/Dialog/Dialog.styles.js.map +1 -1
- package/dist/components/primitives/Divider/Divider.d.ts.map +1 -1
- package/dist/components/primitives/Divider/Divider.js +1 -1
- package/dist/components/primitives/Divider/Divider.js.map +1 -1
- package/dist/components/primitives/Divider/Divider.styles.d.ts.map +1 -1
- package/dist/components/primitives/Divider/Divider.styles.js +1 -1
- package/dist/components/primitives/Divider/Divider.styles.js.map +1 -1
- package/dist/components/primitives/FormControl/FormControl.d.ts.map +1 -1
- package/dist/components/primitives/FormControl/FormControl.js +1 -1
- package/dist/components/primitives/FormControl/FormControl.js.map +1 -1
- package/dist/components/primitives/FormControl/FormControl.styles.d.ts.map +1 -1
- package/dist/components/primitives/FormControl/FormControl.styles.js +1 -1
- package/dist/components/primitives/FormControl/FormControl.styles.js.map +1 -1
- package/dist/components/primitives/InputLabel/InputLabel.d.ts.map +1 -1
- package/dist/components/primitives/InputLabel/InputLabel.js +1 -1
- package/dist/components/primitives/InputLabel/InputLabel.js.map +1 -1
- package/dist/components/primitives/InputLabel/InputLabel.styles.d.ts.map +1 -1
- package/dist/components/primitives/InputLabel/InputLabel.styles.js +1 -1
- package/dist/components/primitives/InputLabel/InputLabel.styles.js.map +1 -1
- package/dist/components/primitives/KeyValueInput/KeyValueInput.d.ts.map +1 -1
- package/dist/components/primitives/KeyValueInput/KeyValueInput.js +1 -1
- package/dist/components/primitives/KeyValueInput/KeyValueInput.js.map +1 -1
- package/dist/components/primitives/KeyValueInput/KeyValueInput.styles.d.ts.map +1 -1
- package/dist/components/primitives/KeyValueInput/KeyValueInput.styles.js +1 -1
- package/dist/components/primitives/KeyValueInput/KeyValueInput.styles.js.map +1 -1
- package/dist/components/primitives/Logo/Logo.d.ts.map +1 -1
- package/dist/components/primitives/Logo/Logo.js +1 -1
- package/dist/components/primitives/Logo/Logo.js.map +1 -1
- package/dist/components/primitives/Logo/Logo.styles.d.ts.map +1 -1
- package/dist/components/primitives/Logo/Logo.styles.js +1 -1
- package/dist/components/primitives/Logo/Logo.styles.js.map +1 -1
- package/dist/components/primitives/MultiInput/MultiInput.d.ts.map +1 -1
- package/dist/components/primitives/MultiInput/MultiInput.js +1 -1
- package/dist/components/primitives/MultiInput/MultiInput.js.map +1 -1
- package/dist/components/primitives/MultiInput/MultiInput.styles.d.ts.map +1 -1
- package/dist/components/primitives/MultiInput/MultiInput.styles.js +1 -1
- package/dist/components/primitives/MultiInput/MultiInput.styles.js.map +1 -1
- package/dist/components/primitives/OtpField/OtpField.d.ts.map +1 -1
- package/dist/components/primitives/OtpField/OtpField.js +1 -1
- package/dist/components/primitives/OtpField/OtpField.js.map +1 -1
- package/dist/components/primitives/OtpField/OtpField.styles.d.ts.map +1 -1
- package/dist/components/primitives/OtpField/OtpField.styles.js +1 -1
- package/dist/components/primitives/OtpField/OtpField.styles.js.map +1 -1
- package/dist/components/primitives/PasswordField/PasswordField.d.ts.map +1 -1
- package/dist/components/primitives/PasswordField/PasswordField.js +1 -1
- package/dist/components/primitives/PasswordField/PasswordField.js.map +1 -1
- package/dist/components/primitives/PasswordField/PasswordField.styles.d.ts.map +1 -1
- package/dist/components/primitives/PasswordField/PasswordField.styles.js +1 -1
- package/dist/components/primitives/PasswordField/PasswordField.styles.js.map +1 -1
- package/dist/components/primitives/Select/Select.d.ts.map +1 -1
- package/dist/components/primitives/Select/Select.js +1 -1
- package/dist/components/primitives/Select/Select.js.map +1 -1
- package/dist/components/primitives/Select/Select.styles.d.ts.map +1 -1
- package/dist/components/primitives/Select/Select.styles.js +1 -1
- package/dist/components/primitives/Select/Select.styles.js.map +1 -1
- package/dist/components/primitives/Spinner/Spinner.d.ts +5 -3
- package/dist/components/primitives/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/primitives/Spinner/Spinner.js +4 -5
- package/dist/components/primitives/Spinner/Spinner.js.map +1 -1
- package/dist/components/primitives/Spinner/Spinner.styles.d.ts +4 -1
- package/dist/components/primitives/Spinner/Spinner.styles.d.ts.map +1 -1
- package/dist/components/primitives/Spinner/Spinner.styles.js +16 -7
- package/dist/components/primitives/Spinner/Spinner.styles.js.map +1 -1
- package/dist/components/primitives/TextField/TextField.d.ts.map +1 -1
- package/dist/components/primitives/TextField/TextField.js +1 -1
- package/dist/components/primitives/TextField/TextField.js.map +1 -1
- package/dist/components/primitives/TextField/TextField.styles.d.ts.map +1 -1
- package/dist/components/primitives/TextField/TextField.styles.js +1 -1
- package/dist/components/primitives/TextField/TextField.styles.js.map +1 -1
- package/dist/components/primitives/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/primitives/Toggle/Toggle.js +1 -1
- package/dist/components/primitives/Toggle/Toggle.js.map +1 -1
- package/dist/components/primitives/Toggle/Toggle.styles.d.ts.map +1 -1
- package/dist/components/primitives/Toggle/Toggle.styles.js +1 -1
- package/dist/components/primitives/Toggle/Toggle.styles.js.map +1 -1
- package/dist/components/primitives/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/primitives/Tooltip/Tooltip.js +1 -1
- package/dist/components/primitives/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/primitives/Tooltip/Tooltip.styles.d.ts.map +1 -1
- package/dist/components/primitives/Tooltip/Tooltip.styles.js +1 -1
- package/dist/components/primitives/Tooltip/Tooltip.styles.js.map +1 -1
- package/dist/components/primitives/Typography/Typography.d.ts.map +1 -1
- package/dist/components/primitives/Typography/Typography.js +1 -1
- package/dist/components/primitives/Typography/Typography.js.map +1 -1
- package/dist/components/primitives/Typography/Typography.styles.d.ts.map +1 -1
- package/dist/components/primitives/Typography/Typography.styles.js +1 -1
- package/dist/components/primitives/Typography/Typography.styles.js.map +1 -1
- package/dist/contexts/ThunderID/ThunderIDProvider.d.ts.map +1 -1
- package/dist/contexts/ThunderID/ThunderIDProvider.js +4 -1
- package/dist/contexts/ThunderID/ThunderIDProvider.js.map +1 -1
- package/dist/models/config.d.ts +10 -1
- package/dist/models/config.d.ts.map +1 -1
- package/dist/styles/emotion.d.ts +36 -0
- package/dist/styles/emotion.d.ts.map +1 -0
- package/dist/styles/emotion.js +58 -0
- package/dist/styles/emotion.js.map +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAM1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAClH;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import Eye_default from "../Icons/Eye.js";
|
|
3
4
|
import EyeOff_default from "../Icons/EyeOff.js";
|
|
@@ -6,7 +7,6 @@ import TextField_default from "../TextField/TextField.js";
|
|
|
6
7
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
7
8
|
import { useState } from "react";
|
|
8
9
|
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
import { cx } from "@emotion/css";
|
|
10
10
|
|
|
11
11
|
//#region src/components/primitives/PasswordField/PasswordField.tsx
|
|
12
12
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {\n /**\n * Callback function when the field value changes\n */\n onChange: (value: string) => void;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n onChange,\n className,\n disabled,\n error,\n ...textFieldProps\n}: PasswordFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const [showPassword, setShowPassword] = useState(false);\n const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n const togglePasswordVisibility = (): void => {\n if (!disabled) {\n setShowPassword(!showPassword);\n }\n };\n\n const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n return (\n <TextField\n {...textFieldProps}\n className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n type={showPassword ? 'text' : 'password'}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"current-password\"\n disabled={disabled}\n error={error}\n endIcon={\n <IconComponent\n width={16}\n height={16}\n className={cx(\n withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n styles['toggleIcon'],\n showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n )}\n />\n }\n onEndIconClick={togglePasswordVisibility}\n />\n );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAMA,iBAAyC,EAC7C,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PasswordField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,cAAc,OAAO,EACrB,UAAU,OAAO,EACjB,UAAU,OAAO,KAChB,MAAM,CAAC,MAAM,EAAE,MAAM,CA0BoC,CAAC;AAE7D,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PasswordField.styles.js","names":["toggleIcon: string","visibleIcon: string"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"PasswordField.styles.js","names":["toggleIcon: string","visibleIcon: string"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the PasswordField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param showPassword - Whether the password is currently visible\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n showPassword: boolean,\n disabled: boolean,\n hasError: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const toggleIcon: string = css`\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n color: ${theme.vars.colors.text.secondary};\n opacity: ${disabled ? 0.6 : 1};\n transition: color 0.2s ease;\n\n &:hover {\n color: ${!disabled ? theme.vars.colors.text.primary : theme.vars.colors.text.secondary};\n }\n `;\n\n const visibleIcon: string = css`\n color: ${theme.vars.colors.primary.main};\n `;\n\n const hiddenIcon: string = css`\n color: ${theme.vars.colors.text.secondary};\n `;\n\n return {\n hiddenIcon,\n toggleIcon,\n visibleIcon,\n };\n }, [theme, colorScheme, showPassword, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,aACJ,OACA,aACA,cACA,UACA,aAEA,cAAc;CACZ,MAAMA,aAAqB,GAAG;gBAClB,WAAW,gBAAgB,UAAU;eACtC,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;iBAInB,CAAC,WAAW,MAAM,KAAK,OAAO,KAAK,UAAU,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI3F,MAAMC,cAAsB,GAAG;eACpB,MAAM,KAAK,OAAO,QAAQ,KAAK;;AAO1C,QAAO;EACL,YALyB,GAAG;eACnB,MAAM,KAAK,OAAO,KAAK,UAAU;;EAK1C;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAc;CAAU;CAAS,CAAC;AAE5D,mCAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,oBAAoB,EAAC,MAAM,OAAO,CAAC;AAO/C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuD3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import FormControl_default from "../FormControl/FormControl.js";
|
|
3
4
|
import InputLabel_default from "../InputLabel/InputLabel.js";
|
|
4
5
|
import Select_styles_default from "./Select.styles.js";
|
|
5
6
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { cx } from "@emotion/css";
|
|
8
8
|
|
|
9
9
|
//#region src/components/primitives/Select/Select.tsx
|
|
10
10
|
const Select = ({ label, error, className, required, disabled, helperText, placeholder, options, style = {},...rest }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Select.js","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, SelectHTMLAttributes} from 'react';\nimport useStyles from './Select.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface SelectOption {\n /**\n * The text that will be displayed in the select\n */\n label: string;\n /**\n * The value that will be submitted with the form\n */\n value: string;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n /**\n * Additional CSS class names\n */\n className?: string;\n /**\n * Whether the field is disabled\n */\n disabled?: boolean;\n /**\n * Error message to display below the select\n */\n error?: string;\n /**\n * Helper text to display below the select\n */\n helperText?: string;\n /**\n * Label text to display above the select\n */\n label?: string;\n /**\n * The options to display in the select\n */\n options: SelectOption[];\n /**\n * Placeholder text for the default/empty option\n */\n placeholder?: string;\n /**\n * Whether the field is required\n */\n required?: boolean;\n}\n\nconst Select: FC<SelectProps> = ({\n label,\n error,\n className,\n required,\n disabled,\n helperText,\n placeholder,\n options,\n style = {},\n ...rest\n}: SelectProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n\n const selectClassName: string = cx(\n withVendorCSSClassPrefix(bem('select', 'input')),\n styles['select'],\n hasError && styles['selectError'],\n disabled && styles['selectDisabled'],\n );\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n style={style}\n >\n {label && (\n <InputLabel required={required} error={hasError}>\n {label}\n </InputLabel>\n )}\n <select\n className={selectClassName}\n disabled={disabled}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n >\n {placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {options.map((option: SelectOption) => (\n <option key={option.value} value={option.value} className={styles['option']}>\n {option.label}\n </option>\n ))}\n </select>\n </FormControl>\n );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;AAyDA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,SACA,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,kBAA0B,GAC9B,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,oBAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,oBAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,UAAU,OAAO,EAAE,UAAU,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAgFpE,CAAC;AAE/C,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.styles.js","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Select.styles.js","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the Select component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n useMemo(() => {\n const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n const select: string = css`\n width: 100%;\n padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n font-size: ${theme.vars.typography.fontSizes.md};\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n appearance: none;\n background-image: url('${dropdownArrow}');\n background-repeat: no-repeat;\n background-position: right 0.7em top 50%;\n background-size: 0.65em auto;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &:hover:not(:disabled) {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n }\n `;\n\n const selectError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.error.main};\n }\n `;\n\n const selectDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n opacity: 0.6;\n cursor: not-allowed;\n `;\n\n const option: string = css`\n padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n color: ${theme.vars.colors.text.primary};\n background-color: ${theme.vars.colors.background.surface};\n\n &:hover {\n background-color: ${theme.vars.colors.action.hover};\n }\n\n &:checked {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n }\n `;\n\n return {\n option,\n select,\n selectDisabled,\n selectError,\n };\n }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,GAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI7F,MAAMC,cAAsB,GAAG;sBACb,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,iBAAyB,GAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,GAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;EAMlD;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
export type SpinnerSize = 'small' | 'medium' | 'large';
|
|
3
3
|
export interface SpinnerProps {
|
|
4
4
|
/**
|
|
@@ -14,9 +14,11 @@ export interface SpinnerProps {
|
|
|
14
14
|
*/
|
|
15
15
|
size?: SpinnerSize;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Optional explicit width/height (CSS length, e.g. `'24px'` or `'calc(...)'`) that overrides
|
|
18
|
+
* the `size`-based default dimensions. Generates its own Emotion class internally rather than
|
|
19
|
+
* accepting an inline `style` object, so it participates in the shared CSP nonce automatically.
|
|
18
20
|
*/
|
|
19
|
-
|
|
21
|
+
widthOverride?: string;
|
|
20
22
|
}
|
|
21
23
|
/**
|
|
22
24
|
* Spinner component for loading states
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Spinner/Spinner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAKzB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAe7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import Spinner_styles_default from "./Spinner.styles.js";
|
|
3
4
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { cx } from "@emotion/css";
|
|
6
6
|
|
|
7
7
|
//#region src/components/primitives/Spinner/Spinner.tsx
|
|
8
8
|
/**
|
|
@@ -20,12 +20,11 @@ import { cx } from "@emotion/css";
|
|
|
20
20
|
* <Spinner size="small" />
|
|
21
21
|
* ```
|
|
22
22
|
*/
|
|
23
|
-
const Spinner = ({ size = "medium", color, className,
|
|
23
|
+
const Spinner = ({ size = "medium", color, className, widthOverride = void 0 }) => {
|
|
24
24
|
const { theme, colorScheme } = useTheme_default();
|
|
25
|
-
const styles = Spinner_styles_default(theme, colorScheme, size, color);
|
|
25
|
+
const styles = Spinner_styles_default(theme, colorScheme, size, color, widthOverride);
|
|
26
26
|
return /* @__PURE__ */ jsx("span", {
|
|
27
|
-
className: cx(withVendorCSSClassPrefix(bem("spinner")), styles["spinner"], size === "small" && styles["spinnerSmall"], size === "medium" && styles["spinnerMedium"], size === "large" && styles["spinnerLarge"], className),
|
|
28
|
-
style,
|
|
27
|
+
className: cx(withVendorCSSClassPrefix(bem("spinner")), styles["spinner"], size === "small" && styles["spinnerSmall"], size === "medium" && styles["spinnerMedium"], size === "large" && styles["spinnerLarge"], widthOverride && styles["spinnerCustomSize"], className),
|
|
29
28
|
role: "status",
|
|
30
29
|
"aria-label": "Loading"
|
|
31
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/Spinner/Spinner.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Spinner.js","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/Spinner/Spinner.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Spinner.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\nexport interface SpinnerProps {\n /**\n * Additional CSS class names\n */\n className?: string;\n /**\n * Custom color for the spinner\n */\n color?: string;\n /**\n * Size of the spinner\n */\n size?: SpinnerSize;\n /**\n * Optional explicit width/height (CSS length, e.g. `'24px'` or `'calc(...)'`) that overrides\n * the `size`-based default dimensions. Generates its own Emotion class internally rather than\n * accepting an inline `style` object, so it participates in the shared CSP nonce automatically.\n */\n widthOverride?: string;\n}\n\n/**\n * Spinner component for loading states\n *\n * @example\n * ```tsx\n * // Basic spinner\n * <Spinner />\n *\n * // Large spinner with custom color\n * <Spinner size=\"large\" color=\"#3b82f6\" />\n *\n * // Small spinner\n * <Spinner size=\"small\" />\n * ```\n */\nconst Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, widthOverride = undefined}: SpinnerProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, size, color, widthOverride);\n\n const spinnerClassName: string = cx(\n withVendorCSSClassPrefix(bem('spinner')),\n styles['spinner'],\n size === 'small' && styles['spinnerSmall'],\n size === 'medium' && styles['spinnerMedium'],\n size === 'large' && styles['spinnerLarge'],\n widthOverride && styles['spinnerCustomSize'],\n className,\n );\n\n return <span className={spinnerClassName} role=\"status\" aria-label=\"Loading\" />;\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAMA,WAA6B,EAAC,OAAO,UAAU,OAAO,WAAW,gBAAgB,aAA6B;CAClH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,aAAa,MAAM,OAAO,cAAc;AAYhG,QAAO,oBAAC;EAAK,WAVoB,GAC/B,yBAAyB,IAAI,UAAU,CAAC,EACxC,OAAO,YACP,SAAS,WAAW,OAAO,iBAC3B,SAAS,YAAY,OAAO,kBAC5B,SAAS,WAAW,OAAO,iBAC3B,iBAAiB,OAAO,sBACxB,UACD;EAEyC,MAAK;EAAS,cAAW;GAAY;;AAGjF,sBAAe"}
|
|
@@ -6,8 +6,11 @@ export type SpinnerSize = 'small' | 'medium' | 'large';
|
|
|
6
6
|
* @param colorScheme - The current color scheme (used for memoization)
|
|
7
7
|
* @param size - The size of the spinner
|
|
8
8
|
* @param color - The color of the spinner
|
|
9
|
+
* @param customSize - Optional explicit width/height (CSS length) that overrides the size-based
|
|
10
|
+
* default, e.g. when a parent component (like `Button`) needs the spinner to track a
|
|
11
|
+
* theme-derived dimension instead of one of the fixed `size` presets.
|
|
9
12
|
* @returns Object containing CSS class names for component styling
|
|
10
13
|
*/
|
|
11
|
-
declare const useStyles: (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string) => Record<string, string>;
|
|
14
|
+
declare const useStyles: (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string, customSize?: string) => Record<string, string>;
|
|
12
15
|
export default useStyles;
|
|
13
16
|
//# sourceMappingURL=Spinner.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Spinner.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,MAAM,WAAW,EACjB,QAAQ,MAAM,EACd,aAAa,MAAM,KAClB,MAAM,CAAC,MAAM,EAAE,MAAM,CA4D2B,CAAC;AAEpD,eAAe,SAAS,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { css, keyframes } from "../../../styles/emotion.js";
|
|
1
2
|
import { useMemo } from "react";
|
|
2
|
-
import { css, keyframes } from "@emotion/css";
|
|
3
3
|
|
|
4
4
|
//#region src/components/primitives/Spinner/Spinner.styles.ts
|
|
5
5
|
/**
|
|
@@ -8,9 +8,12 @@ import { css, keyframes } from "@emotion/css";
|
|
|
8
8
|
* @param colorScheme - The current color scheme (used for memoization)
|
|
9
9
|
* @param size - The size of the spinner
|
|
10
10
|
* @param color - The color of the spinner
|
|
11
|
+
* @param customSize - Optional explicit width/height (CSS length) that overrides the size-based
|
|
12
|
+
* default, e.g. when a parent component (like `Button`) needs the spinner to track a
|
|
13
|
+
* theme-derived dimension instead of one of the fixed `size` presets.
|
|
11
14
|
* @returns Object containing CSS class names for component styling
|
|
12
15
|
*/
|
|
13
|
-
const useStyles = (theme, colorScheme, size, color) => useMemo(() => {
|
|
16
|
+
const useStyles = (theme, colorScheme, size, color, customSize) => useMemo(() => {
|
|
14
17
|
const spinnerColor = color || theme.vars.colors.primary.main;
|
|
15
18
|
const spinnerSizes = {
|
|
16
19
|
large: "32px",
|
|
@@ -42,12 +45,17 @@ const useStyles = (theme, colorScheme, size, color) => useMemo(() => {
|
|
|
42
45
|
width: ${spinnerSizes["medium"]};
|
|
43
46
|
height: ${spinnerSizes["medium"]};
|
|
44
47
|
`;
|
|
45
|
-
|
|
46
|
-
spinner,
|
|
47
|
-
spinnerLarge: css`
|
|
48
|
+
const spinnerLarge = css`
|
|
48
49
|
width: ${spinnerSizes["large"]};
|
|
49
50
|
height: ${spinnerSizes["large"]};
|
|
50
|
-
|
|
51
|
+
`;
|
|
52
|
+
return {
|
|
53
|
+
spinner,
|
|
54
|
+
spinnerCustomSize: customSize ? css`
|
|
55
|
+
width: ${customSize};
|
|
56
|
+
height: ${customSize};
|
|
57
|
+
` : "",
|
|
58
|
+
spinnerLarge,
|
|
51
59
|
spinnerMedium,
|
|
52
60
|
spinnerSmall
|
|
53
61
|
};
|
|
@@ -55,7 +63,8 @@ const useStyles = (theme, colorScheme, size, color) => useMemo(() => {
|
|
|
55
63
|
theme,
|
|
56
64
|
colorScheme,
|
|
57
65
|
size,
|
|
58
|
-
color
|
|
66
|
+
color,
|
|
67
|
+
customSize
|
|
59
68
|
]);
|
|
60
69
|
var Spinner_styles_default = useStyles;
|
|
61
70
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.styles.js","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string"],"sources":["../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Spinner.styles.js","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string","spinnerLarge: string"],"sources":["../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css, keyframes} from '../../../styles/emotion';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Spinner component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the spinner\n * @param color - The color of the spinner\n * @param customSize - Optional explicit width/height (CSS length) that overrides the size-based\n * default, e.g. when a parent component (like `Button`) needs the spinner to track a\n * theme-derived dimension instead of one of the fixed `size` presets.\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n size: SpinnerSize,\n color?: string,\n customSize?: string,\n): Record<string, string> =>\n useMemo(() => {\n const spinnerColor: string = color || theme.vars.colors.primary.main;\n\n const spinnerSizes: Record<string, string> = {\n large: '32px',\n medium: '20px',\n small: '16px',\n };\n\n const spinnerSize: string = spinnerSizes[size];\n\n const spinAnimation: string = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n `;\n\n const spinner: string = css`\n width: ${spinnerSize};\n height: ${spinnerSize};\n border: 2px solid transparent;\n border-top: 2px solid ${spinnerColor};\n border-radius: 50%;\n animation: ${spinAnimation} 1s linear infinite;\n display: inline-block;\n `;\n\n const spinnerSmall: string = css`\n width: ${spinnerSizes['small']};\n height: ${spinnerSizes['small']};\n `;\n\n const spinnerMedium: string = css`\n width: ${spinnerSizes['medium']};\n height: ${spinnerSizes['medium']};\n `;\n\n const spinnerLarge: string = css`\n width: ${spinnerSizes['large']};\n height: ${spinnerSizes['large']};\n `;\n\n const spinnerCustomSize: string = customSize\n ? css`\n width: ${customSize};\n height: ${customSize};\n `\n : '';\n\n return {\n spinner,\n spinnerCustomSize,\n spinnerLarge,\n spinnerMedium,\n spinnerSmall,\n };\n }, [theme, colorScheme, size, color, customSize]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,MACA,OACA,eAEA,cAAc;CACZ,MAAMA,eAAuB,SAAS,MAAM,KAAK,OAAO,QAAQ;CAEhE,MAAMC,eAAuC;EAC3C,OAAO;EACP,QAAQ;EACR,OAAO;EACR;CAED,MAAMC,cAAsB,aAAa;CAWzC,MAAMC,UAAkB,GAAG;eAChB,YAAY;gBACX,YAAY;;8BAEE,aAAa;;mBAbT,SAAS;;;;;;;MAeV;;;CAI7B,MAAMC,eAAuB,GAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;CAGlC,MAAMC,gBAAwB,GAAG;eACtB,aAAa,UAAU;gBACtB,aAAa,UAAU;;CAGnC,MAAMC,eAAuB,GAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;AAUlC,QAAO;EACL;EACA,mBATgC,aAC9B,GAAG;mBACQ,WAAW;oBACV,WAAW;YAEvB;EAKF;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAM;CAAO;CAAW,CAAC;AAEnD,6BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAOzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC9F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA0FjC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import FormControl_default from "../FormControl/FormControl.js";
|
|
3
4
|
import InputLabel_default from "../InputLabel/InputLabel.js";
|
|
4
5
|
import TextField_styles_default from "./TextField.styles.js";
|
|
5
6
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { cx } from "@emotion/css";
|
|
8
8
|
|
|
9
9
|
//#region src/components/primitives/TextField/TextField.tsx
|
|
10
10
|
const TextField = ({ label, error, required, className, disabled, helperText, startIcon, endIcon, onStartIconClick, onEndIconClick, type = "text", style = {},...rest }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"TextField.js","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n /**\n * Additional CSS class names\n */\n className?: string;\n /**\n * Whether the field is disabled\n */\n disabled?: boolean;\n /**\n * Icon to display at the end (right) of the input\n */\n endIcon?: ReactNode;\n /**\n * Error message to display below the input\n */\n error?: string;\n /**\n * Helper text to display below the input\n */\n helperText?: string;\n /**\n * Label text to display above the input\n */\n label?: string;\n /**\n * Click handler for the end icon\n */\n onEndIconClick?: () => void;\n /**\n * Click handler for the start icon\n */\n onStartIconClick?: () => void;\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * Icon to display at the start (left) of the input\n */\n startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n label,\n error,\n required,\n className,\n disabled,\n helperText,\n startIcon,\n endIcon,\n onStartIconClick,\n onEndIconClick,\n type = 'text',\n style = {},\n ...rest\n}: TextFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const hasStartIcon = !!startIcon;\n const hasEndIcon = !!endIcon;\n const styles: Record<string, string> = useStyles(\n theme,\n colorScheme,\n disabled ?? false,\n hasError,\n hasStartIcon,\n hasEndIcon,\n );\n\n const inputClassName: string = cx(\n withVendorCSSClassPrefix(bem('text-field', 'input')),\n styles['input'],\n hasError && styles['inputError'],\n disabled && styles['inputDisabled'],\n );\n\n const containerClassName: string = cx(\n withVendorCSSClassPrefix(bem('text-field', 'container')),\n styles['inputContainer'],\n );\n\n const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n style={style}\n >\n {label && (\n <InputLabel required={required} error={hasError}>\n {label}\n </InputLabel>\n )}\n <div className={containerClassName}>\n {startIcon && (\n <div\n className={startIconClassName}\n onClick={onStartIconClick}\n role={onStartIconClick ? 'button' : undefined}\n tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n aria-label=\"Start icon\"\n >\n {startIcon}\n </div>\n )}\n <input\n className={inputClassName}\n type={type}\n disabled={disabled}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n />\n {endIcon && (\n <div\n className={endIconClassName}\n onClick={onEndIconClick}\n role={onEndIconClick ? 'button' : undefined}\n tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n aria-label=\"End icon\"\n >\n {endIcon}\n </div>\n )}\n </div>\n </FormControl>\n );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;AAsDA,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,yBACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,iBAAyB,GAC7B,yBAAyB,IAAI,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6B,GACjC,yBAAyB,IAAI,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,qBAA6B,GAAG,yBAAyB,IAAI,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,mBAA2B,GAAG,yBAAyB,IAAI,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GAAI,WAAW;;IACb,aACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,oBAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,oBAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,cAAc,OAAO,EACrB,YAAY,OAAO,KAClB,MAAM,CAAC,MAAM,EAAE,MAAM,CAoHgD,CAAC;AAEzE,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.styles.js","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"TextField.styles.js","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the TextField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n hasStartIcon: boolean,\n hasEndIcon: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const inlineStartPadding: string = hasStartIcon\n ? `calc(${theme.vars.spacing.unit} * 5)`\n : `calc(${theme.vars.spacing.unit} * 1.5)`;\n const inlineEndPadding: string = hasEndIcon\n ? `calc(${theme.vars.spacing.unit} * 5)`\n : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n const inputContainer: string = css`\n position: relative;\n display: flex;\n align-items: center;\n `;\n\n const input: string = css`\n width: 100%;\n padding-block: ${theme.vars.spacing.unit};\n padding-inline-start: ${inlineStartPadding};\n padding-inline-end: ${inlineEndPadding};\n border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n font-size: ${theme.vars.typography.fontSizes.md};\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &:hover:not(:disabled) {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n }\n\n &::placeholder {\n color: ${theme.vars.colors.text.secondary};\n opacity: 0.7;\n }\n `;\n\n const inputError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.error.main};\n }\n `;\n\n const inputDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n opacity: 0.6;\n cursor: not-allowed;\n `;\n\n const icon: string = css`\n position: absolute;\n background: none;\n border: none;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n padding: calc(${theme.vars.spacing.unit} / 2);\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${theme.vars.colors.text.secondary};\n opacity: ${disabled ? 0.5 : 1};\n top: 50%;\n transform: translateY(-50%);\n transition:\n color 0.2s ease,\n opacity 0.2s ease;\n\n &:hover:not(:disabled) {\n color: ${theme.vars.colors.text.primary};\n }\n\n &:focus {\n outline: 2px solid ${theme.vars.colors.primary.main};\n outline-offset: 2px;\n }\n `;\n\n const startIcon: string = css`\n ${icon};\n inset-inline-start: ${theme.vars.spacing.unit};\n `;\n\n const endIcon: string = css`\n ${icon};\n inset-inline-end: ${theme.vars.spacing.unit};\n `;\n\n return {\n endIcon,\n icon,\n input,\n inputContainer,\n inputDisabled,\n inputError,\n startIcon,\n };\n }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,eAEA,cAAc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,GAAG;;;;;CAMlC,MAAMC,QAAgB,GAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,gBAAwB,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,GAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,GAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,GAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Toggle/Toggle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Toggle/Toggle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAC,MAAM,OAAO,CAAC;AAO9C;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuC3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import Toggle_styles_default from "./Toggle.styles.js";
|
|
3
4
|
import FormControl_default from "../FormControl/FormControl.js";
|
|
4
5
|
import InputLabel_default from "../InputLabel/InputLabel.js";
|
|
5
6
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { cx } from "@emotion/css";
|
|
8
8
|
|
|
9
9
|
//#region src/components/primitives/Toggle/Toggle.tsx
|
|
10
10
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Toggle.js","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n className?: string;\n error?: string;\n helperText?: string;\n label?: string;\n required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('toggle')), className)}\n helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n >\n <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n />\n <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n </div>\n {label && (\n <InputLabel\n required={required}\n error={hasError}\n variant=\"inline\"\n className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n })}\n >\n {label}\n </InputLabel>\n )}\n </label>\n </FormControl>\n );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,oBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,qBAAC;GAAa;GAAO,WAAW,GAAG,yBAAyB,IAAI,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,oBAAC;KACC,MAAK;KACL,MAAK;KACL,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACF,oBAAC;KAAI,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,oBAAC,UAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,oBAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACpG,yBAAyB,IAAI,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Toggle/Toggle.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,UAAU,OAAO,EAAE,UAAU,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA0FpE,CAAC;AAE/C,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.js","names":["containerStyles: string","inputStyles: string","trackStyles: string","thumbStyles: string","labelStyles: string","errorLabelStyles: string"],"sources":["../../../../src/components/primitives/Toggle/Toggle.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Toggle.styles.js","names":["containerStyles: string","inputStyles: string","trackStyles: string","thumbStyles: string","labelStyles: string","errorLabelStyles: string"],"sources":["../../../../src/components/primitives/Toggle/Toggle.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n useMemo(() => {\n const containerStyles: string = css`\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n `;\n\n const inputStyles: string = css`\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n white-space: nowrap;\n\n &:focus-visible + div {\n outline: 2px solid ${theme.vars.colors.primary.main};\n outline-offset: 2px;\n }\n\n &:disabled + div {\n cursor: not-allowed;\n opacity: 0.6;\n }\n `;\n\n const trackStyles: string = css`\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 36px;\n height: 20px;\n background-color: ${theme.vars.colors.text.secondary};\n opacity: 0.2;\n border-radius: 9999px;\n transition: all 0.2s ease-in-out;\n\n input:checked + & {\n background-color: ${theme.vars.colors.primary.main};\n opacity: 1;\n }\n\n input:disabled + & {\n opacity: 0.4;\n }\n `;\n\n const thumbStyles: string = css`\n position: absolute;\n left: 2px;\n width: 16px;\n height: 16px;\n background-color: #fff;\n border-radius: 50%;\n transition: transform 0.2s ease-in-out;\n\n input:checked + * > & {\n transform: translateX(16px);\n }\n `;\n\n const labelStyles: string = css`\n margin-left: calc(${theme.vars.spacing.unit} * 1.5);\n color: ${theme.vars.colors.text.primary};\n font-size: ${theme.vars.typography.fontSizes.sm};\n font-family: ${theme.vars.typography.fontFamily};\n cursor: pointer;\n\n input:disabled ~ & {\n cursor: not-allowed;\n opacity: 0.6;\n }\n `;\n\n const errorLabelStyles: string = css`\n color: ${theme.vars.colors.error.main};\n `;\n\n return {\n container: containerStyles,\n errorLabel: hasError ? errorLabelStyles : '',\n input: inputStyles,\n label: labelStyles,\n thumb: thumbStyles,\n track: trackStyles,\n };\n }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;AAOA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CACZ,MAAMA,kBAA0B,GAAG;;;;;CAMnC,MAAMC,cAAsB,GAAG;;;;;;;;;;;;6BAYN,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,cAAsB,GAAG;;;;;;0BAMT,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;4BAM/B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;CASvD,MAAMC,cAAsB,GAAG;;;;;;;;;;;;;CAc/B,MAAMC,cAAsB,GAAG;0BACT,MAAM,KAAK,QAAQ,KAAK;eACnC,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;;;;;CASlD,MAAMC,mBAA2B,GAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;AAGxC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAC;AAKzF;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,WAAW,CAmE5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import Tooltip_styles_default from "./Tooltip.styles.js";
|
|
3
4
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
4
5
|
import { useId, useState } from "react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { cx } from "@emotion/css";
|
|
7
7
|
|
|
8
8
|
//#region src/components/primitives/Tooltip/Tooltip.tsx
|
|
9
9
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["Tooltip: FC<Tooltiprops>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["Tooltip: FC<Tooltiprops>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode, useId, useState, KeyboardEvent} from 'react';\nimport useStyles from './Tooltip.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\n/**\n * Props for the Tooltip component.\n */\nexport interface Tooltiprops extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n className?: string;\n helperText?: string;\n position?: 'top' | 'bottom' | 'left' | 'right';\n children?: ReactNode;\n ariaLabel?: string;\n}\n\n/**\n * A Tooltip component that convert any react or html element to a tooltip.\n * When a user hover on it, they will see a small tooltip with some info.\n *\n * It will take a children, which can be a react element or html element.\n *\n * @param props - Props for the Tooltip component\n * @returns A JSX element representing the Tooltip\n */\nconst Tooltip: FC<Tooltiprops> = ({\n className = '',\n helperText = '',\n style = {},\n position = 'bottom',\n children = null,\n ariaLabel = 'More Info',\n ...rest\n}: Tooltiprops) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n // Unique ID to connect trigger button to tooltip box via ARIA\n const tooltipId = useId();\n\n // Close tooltip if user presses ESC while focused\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape' && isVisible) {\n setIsVisible(false);\n }\n\n // Optional: Prevent Space key from scrolling the page\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault();\n setIsVisible((prev) => !prev);\n }\n };\n return (\n <div\n tabIndex={0}\n role=\"button\"\n aria-label={ariaLabel}\n aria-describedby={isVisible && helperText ? tooltipId : undefined}\n className={cx(withVendorCSSClassPrefix(bem('tooltip', 'container')), className, styles['container'])}\n style={style}\n onMouseEnter={() => setIsVisible(true)}\n onMouseLeave={() => setIsVisible(false)}\n onFocus={() => setIsVisible(true)} /* Trigger on Tab Focus */\n onBlur={() => setIsVisible(false)} /* Hide on Tab Blur */\n onKeyDown={handleKeyDown} /* Allow ESC to dismiss */\n {...rest}\n >\n {children}\n {isVisible && helperText && (\n <div\n id={tooltipId}\n role=\"tooltip\"\n className={cx(\n withVendorCSSClassPrefix(bem('tooltip', 'box')),\n withVendorCSSClassPrefix(bem('tooltip', position)),\n styles['box'],\n styles[position || 'bottom'],\n )}\n >\n {helperText}\n <span\n className={cx(\n withVendorCSSClassPrefix(bem('tooltip', 'arrow')),\n styles['arrow'],\n styles[`${position}-arrow`],\n )}\n />\n </div>\n )}\n </div>\n );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAMA,WAA4B,EAChC,YAAY,IACZ,aAAa,IACb,QAAQ,EAAE,EACV,WAAW,UACX,WAAW,MACX,YAAY,YACZ,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,YAAY;CACpE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAG1D,MAAM,YAAY,OAAO;CAGzB,MAAM,iBAAiB,MAAqC;AAC1D,MAAI,EAAE,QAAQ,YAAY,UACxB,cAAa,MAAM;AAIrB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,KAAE,gBAAgB;AAClB,iBAAc,SAAS,CAAC,KAAK;;;AAGjC,QACE,qBAAC;EACC,UAAU;EACV,MAAK;EACL,cAAY;EACZ,oBAAkB,aAAa,aAAa,YAAY;EACxD,WAAW,GAAG,yBAAyB,IAAI,WAAW,YAAY,CAAC,EAAE,WAAW,OAAO,aAAa;EAC7F;EACP,oBAAoB,aAAa,KAAK;EACtC,oBAAoB,aAAa,MAAM;EACvC,eAAe,aAAa,KAAK;EACjC,cAAc,aAAa,MAAM;EACjC,WAAW;EACX,GAAI;aAEH,UACA,aAAa,cACZ,qBAAC;GACC,IAAI;GACJ,MAAK;GACL,WAAW,GACT,yBAAyB,IAAI,WAAW,MAAM,CAAC,EAC/C,yBAAyB,IAAI,WAAW,SAAS,CAAC,EAClD,OAAO,QACP,OAAO,YAAY,UACpB;cAEA,YACD,oBAAC,UACC,WAAW,GACT,yBAAyB,IAAI,WAAW,QAAQ,CAAC,EACjD,OAAO,UACP,OAAO,GAAG,SAAS,SACpB,GACD;IACE;GAEJ;;AAIV,sBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA+GlD,CAAC;AAE3B,eAAe,SAAS,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { css, keyframes } from "../../../styles/emotion.js";
|
|
1
2
|
import { useMemo } from "react";
|
|
2
|
-
import { css, keyframes } from "@emotion/css";
|
|
3
3
|
|
|
4
4
|
//#region src/components/primitives/Tooltip/Tooltip.styles.ts
|
|
5
5
|
const useStyles = (theme, colorScheme) => useMemo(() => {
|