@thunderid/react 0.12.0 → 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 +10 -31
- 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 +75 -71
- 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/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 +7 -27
- 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 +68 -63
- 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/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":"DatePicker.styles.js","names":["inputStyles: string","errorInputStyles: string","disabledInputStyles: string","labelStyles: string"],"sources":["../../../../src/components/primitives/DatePicker/DatePicker.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.js","names":["inputStyles: string","errorInputStyles: string","disabledInputStyles: string","labelStyles: string"],"sources":["../../../../src/components/primitives/DatePicker/DatePicker.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 DatePicker 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 hasError - Whether the date picker has an error state\n * @param disabled - Whether the date picker is disabled\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, disabled: boolean): Record<string, string> =>\n useMemo(() => {\n const inputStyles: string = css`\n width: 100%;\n padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n border: 1px solid ${theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n font-size: 1rem;\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${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: ${theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.primary.main};\n }\n\n &::placeholder {\n color: ${theme.vars.colors.text.secondary};\n }\n `;\n\n const errorInputStyles: 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 disabledInputStyles: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n color: ${theme.vars.colors.text.secondary};\n cursor: not-allowed;\n opacity: 0.6;\n\n &:hover,\n &:focus {\n border-color: ${theme.vars.colors.border};\n box-shadow: none;\n }\n `;\n\n const labelStyles: string = css`\n /* Label styles will be handled by InputLabel component */\n `;\n\n return {\n disabledInput: disabled ? disabledInputStyles : '',\n errorInput: hasError ? errorInputStyles : '',\n input: inputStyles,\n label: labelStyles,\n };\n }, [theme, colorScheme, hasError, disabled]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CACZ,MAAMA,cAAsB,GAAG;;iBAElB,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;;qBAErF,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAOvC,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;wBAIvC,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAItC,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI9C,MAAMC,mBAA2B,GAAG;sBAClB,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,sBAA8B,GAAG;0BACjB,MAAM,KAAK,OAAO,WAAW,SAAS;eACjD,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;wBAMxB,MAAM,KAAK,OAAO,OAAO;;;;CAK7C,MAAMC,cAAsB,GAAG;;;AAI/B,QAAO;EACL,eAAe,WAAW,sBAAsB;EAChD,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,gCAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Dialog/Dialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Dialog/Dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAWL,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,KAAK,oBAAoB,EAEzB,KAAK,QAAQ,EACb,KAAK,EAAE,EACP,KAAK,yBAAyB,EAC9B,KAAK,SAAS,EACd,KAAK,GAAG,EAER,KAAK,SAAS,EAEd,KAAK,aAAa,EAClB,KAAK,cAAc,EASpB,MAAM,OAAO,CAAC;AAOf,UAAU,aAAa;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,gBAAiB,SAAQ,iBAAiB,EAAE,qBAAqB;IACzE,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACzD,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,SAAS,CAAC,EACxB,WAAmB,EACnB,IAAI,EAAE,cAAc,EACpB,YAAY,EAAE,iBAAiB,GAChC,GAAE,aAAkB,GAAG,gBAAgB,CAoCvC;AAWD,eAAO,MAAM,gBAAgB,QAAO,gBAMnC,CAAC;AAGF,wBAAgB,MAAM,CAAC,EAAC,QAAQ,EAAE,GAAG,OAAO,EAAC,EAAE;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,GAAG,aAAa,GAAG,GAAG,CAAC,OAAO,CAGjG;AAED,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,yBAAyB,CACnD,SAAS,CAAC,WAAW,CAAC,GAAG,kBAAkB,GAAG,aAAa,CAAC,WAAW,CAAC,CAyBzE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,yBAAyB,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,aAAa,CAAC,cAAc,CAAC,CA+B5G,CAAC;AAEJ,eAAO,MAAM,aAAa,EAAE,yBAAyB,CACnD,SAAS,CAAC,kBAAkB,CAAC,GAAG,aAAa,CAAC,kBAAkB,CAAC,CAwClE,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,yBAAyB,CACvD,SAAS,CAAC,oBAAoB,CAAC,GAAG,aAAa,CAAC,oBAAoB,CAAC,CA0BtE,CAAC;AAEF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,yBAAyB,CACjD,oBAAoB,CAAC,iBAAiB,CAAC,GAAG,gBAAgB,GAAG,aAAa,CAAC,iBAAiB,CAAC,CAoC9F,CAAC;AAeF,MAAM,WAAW,eAAgB,SAAQ,EAAE,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,GAAG,aAAa,CAAC;IAChF,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,WAAW,EAAE,OAAO,iBAAiB,CAAC;IACtC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,OAAO,EAAE,OAAO,aAAa,CAAC;CAC/B;wBAEwB,eAAe;AAAxC,wBAAyC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { cx } from "../../../styles/emotion.js";
|
|
1
2
|
import useTheme_default from "../../../contexts/Theme/useTheme.js";
|
|
2
3
|
import Button_default from "../Button/Button.js";
|
|
3
4
|
import X_default from "../Icons/X.js";
|
|
@@ -5,7 +6,6 @@ import Dialog_styles_default from "./Dialog.styles.js";
|
|
|
5
6
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
6
7
|
import { cloneElement, createContext, forwardRef, isValidElement, useContext, useLayoutEffect, useMemo, useState } from "react";
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { cx } from "@emotion/css";
|
|
9
9
|
import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useId as useId$1, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
|
|
10
10
|
|
|
11
11
|
//#region src/components/primitives/Dialog/Dialog.tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","names":["open: boolean","setOpen: (openVal: boolean) => void","data: UseFloatingReturn","interactions: UseInteractionsReturn","DialogContext: Context<DialogContextType>","context: DialogContextType","dialog: DialogHookReturn","DialogTrigger: ForwardRefExoticComponent<\n HTMLProps<HTMLElement> & DialogTriggerProps & RefAttributes<HTMLElement>\n>","context: DialogHookReturn","childrenRef: Ref<HTMLElement>","ref: ReturnType<typeof useMergeRefs>","DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement> & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","DialogHeading: ForwardRefExoticComponent<\n HTMLProps<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>\n>","id: string | undefined","useId","Button","X","DialogDescription: ForwardRefExoticComponent<\n HTMLProps<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>\n>","DialogClose: ForwardRefExoticComponent<\n ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & RefAttributes<HTMLButtonElement>\n>","childrenRef: Ref<HTMLButtonElement>"],"sources":["../../../../src/components/primitives/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {\n useFloating,\n useClick,\n useDismiss,\n useRole,\n useInteractions,\n useMergeRefs,\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useId,\n UseFloatingReturn,\n UseInteractionsReturn,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n type ButtonHTMLAttributes,\n type Context,\n type Dispatch,\n type FC,\n type ForwardRefExoticComponent,\n type HTMLProps,\n type JSX,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type RefAttributes,\n type SetStateAction,\n cloneElement,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport useStyles from './Dialog.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Button from '../Button/Button';\nimport {X} from '../Icons';\n\ninterface DialogOptions {\n initialOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n open?: boolean;\n}\n\ninterface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {\n descriptionId: string | undefined;\n labelId: string | undefined;\n open: boolean;\n setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n setLabelId: Dispatch<SetStateAction<string | undefined>>;\n setOpen: (open: boolean) => void;\n}\n\nexport function useDialog({\n initialOpen = false,\n open: controlledOpen,\n onOpenChange: setControlledOpen,\n}: DialogOptions = {}): DialogHookReturn {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);\n const [labelId, setLabelId] = useState<string | undefined>();\n const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n const open: boolean = controlledOpen ?? uncontrolledOpen;\n const setOpen: (openVal: boolean) => void = setControlledOpen ?? setUncontrolledOpen;\n\n const data: UseFloatingReturn = useFloating({\n onOpenChange: setOpen,\n open,\n });\n\n const {context} = data;\n\n const click: ReturnType<typeof useClick> = useClick(context, {\n enabled: controlledOpen == null,\n });\n const dismiss: ReturnType<typeof useDismiss> = useDismiss(context, {outsidePressEvent: 'mousedown'});\n const role: ReturnType<typeof useRole> = useRole(context);\n\n const interactions: UseInteractionsReturn = useInteractions([click, dismiss, role]);\n\n return useMemo(\n () => ({\n open,\n setOpen,\n ...interactions,\n ...data,\n descriptionId,\n labelId,\n setDescriptionId,\n setLabelId,\n }),\n [open, setOpen, interactions, data, labelId, descriptionId],\n );\n}\n\ntype DialogContextType =\n | (DialogHookReturn & {\n setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n setLabelId: Dispatch<SetStateAction<string | undefined>>;\n })\n | null;\n\nconst DialogContext: Context<DialogContextType> = createContext<DialogContextType>(null);\n\nexport const useDialogContext = (): DialogHookReturn => {\n const context: DialogContextType = useContext(DialogContext);\n if (context == null) {\n throw new Error('Dialog components must be wrapped in <Dialog />');\n }\n return context;\n};\n\n// Dialog Components (Modal)\nexport function Dialog({children, ...options}: {children: ReactNode} & DialogOptions): JSX.Element {\n const dialog: DialogHookReturn = useDialog(options);\n return <DialogContext.Provider value={dialog}>{children}</DialogContext.Provider>;\n}\n\ninterface DialogTriggerProps {\n asChild?: boolean;\n children: ReactNode;\n}\n\nexport const DialogTrigger: ForwardRefExoticComponent<\n HTMLProps<HTMLElement> & DialogTriggerProps & RefAttributes<HTMLElement>\n> = forwardRef<HTMLElement, HTMLProps<HTMLElement> & DialogTriggerProps>(\n ({children, asChild = false, ...props}: HTMLProps<HTMLElement> & DialogTriggerProps, propRef: Ref<HTMLElement>) => {\n const context: DialogHookReturn = useDialogContext();\n const childrenRef: Ref<HTMLElement> = (children as any).ref;\n const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n if (asChild && isValidElement(children)) {\n return cloneElement(\n children,\n context.getReferenceProps({\n ref,\n ...props,\n ...(children.props as any),\n 'data-state': context.open ? 'open' : 'closed',\n }),\n );\n }\n\n return (\n <button ref={ref} data-state={context.open ? 'open' : 'closed'} {...context.getReferenceProps(props)}>\n {children}\n </button>\n );\n },\n);\n\nexport const DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement> & RefAttributes<HTMLDivElement>> =\n forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(\n (props: HTMLProps<HTMLDivElement>, propRef: Ref<HTMLDivElement>) => {\n const {context: floatingContext, ...context} = useDialogContext();\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([context.refs.setFloating, propRef]);\n\n if (!floatingContext.open) return null;\n\n return (\n <FloatingPortal>\n <FloatingOverlay\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'overlay')), styles['overlay'])}\n lockScroll\n >\n <FloatingFocusManager context={floatingContext} initialFocus={-1}>\n <div\n ref={ref}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'content')), styles['content'], props.className)}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n {...context.getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingOverlay>\n </FloatingPortal>\n );\n },\n );\n\nexport const DialogHeading: ForwardRefExoticComponent<\n HTMLProps<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>\n> = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement>>(\n ({children, ...props}: HTMLProps<HTMLHeadingElement>, ref: Ref<HTMLHeadingElement>) => {\n const context: DialogHookReturn = useDialogContext();\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const id: string | undefined = useId();\n\n useLayoutEffect((): (() => void) => {\n context.setLabelId(id);\n return (): void => {\n context.setLabelId(undefined);\n };\n }, [id, context.setLabelId]);\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('dialog', 'header')), styles['header'])}>\n <h2\n {...props}\n ref={ref}\n id={id}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'title')), styles['headerTitle'])}\n >\n {children}\n </h2>\n <Button\n color=\"tertiary\"\n variant=\"icon\"\n size=\"small\"\n shape=\"round\"\n onClick={(): void => {\n context.setOpen(false);\n }}\n aria-label=\"Close\"\n >\n <X width={16} height={16} />\n </Button>\n </div>\n );\n },\n);\n\nexport const DialogDescription: ForwardRefExoticComponent<\n HTMLProps<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>\n> = forwardRef<HTMLParagraphElement, HTMLProps<HTMLParagraphElement>>(\n ({children, ...props}: HTMLProps<HTMLParagraphElement>, ref: Ref<HTMLParagraphElement>) => {\n const context: DialogHookReturn = useDialogContext();\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const id: string | undefined = useId();\n\n useLayoutEffect((): (() => void) => {\n context.setDescriptionId(id);\n return (): void => {\n context.setDescriptionId(undefined);\n };\n }, [id, context.setDescriptionId]);\n\n return (\n <p\n {...props}\n ref={ref}\n id={id}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'description')), styles['description'], props.className)}\n >\n {children}\n </p>\n );\n },\n);\n\ninterface DialogCloseProps {\n asChild?: boolean;\n children?: ReactNode;\n}\n\nexport const DialogClose: ForwardRefExoticComponent<\n ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & RefAttributes<HTMLButtonElement>\n> = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps>(\n (\n {children, asChild = false, ...props}: ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps,\n propRef: Ref<HTMLButtonElement>,\n ) => {\n const context: DialogHookReturn = useDialogContext();\n const childrenRef: Ref<HTMLButtonElement> = (children as any)?.ref;\n const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([propRef, childrenRef]);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n context.setOpen(false);\n props.onClick?.(event);\n };\n\n if (asChild && isValidElement(children)) {\n return cloneElement(children, {\n ref,\n ...props,\n ...(children.props as any),\n onClick: handleClick,\n });\n }\n\n return (\n <Button\n {...props}\n ref={ref}\n onClick={handleClick}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'close')), props.className)}\n variant=\"text\"\n >\n {children}\n </Button>\n );\n },\n);\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogContent.displayName = 'DialogContent';\nDialogHeading.displayName = 'DialogHeading';\nDialogDescription.displayName = 'DialogDescription';\nDialogClose.displayName = 'DialogClose';\n\n// Attach subcomponents to Dialog\n(Dialog as any).Trigger = DialogTrigger;\n(Dialog as any).Content = DialogContent;\n(Dialog as any).Heading = DialogHeading;\n(Dialog as any).Description = DialogDescription;\n(Dialog as any).Close = DialogClose;\n\nexport interface DialogComponent extends FC<{children: ReactNode} & DialogOptions> {\n Close: typeof DialogClose;\n Content: typeof DialogContent;\n Description: typeof DialogDescription;\n Heading: typeof DialogHeading;\n Trigger: typeof DialogTrigger;\n}\n\nexport default Dialog as DialogComponent;\n"],"mappings":";;;;;;;;;;;AA6DA,SAAgB,UAAU,EACxB,cAAc,OACd,MAAM,gBACN,cAAc,sBACG,EAAE,EAAoB;CACvC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,YAAY;CACrE,MAAM,CAAC,SAAS,cAAc,UAA8B;CAC5D,MAAM,CAAC,eAAe,oBAAoB,UAA8B;CAExE,MAAMA,OAAgB,kBAAkB;CACxC,MAAMC,UAAsC,qBAAqB;CAEjE,MAAMC,OAA0B,YAAY;EAC1C,cAAc;EACd;EACD,CAAC;CAEF,MAAM,EAAC,YAAW;CAQlB,MAAMC,eAAsC,gBAAgB;EANjB,SAAS,SAAS,EAC3D,SAAS,kBAAkB,MAC5B,CAAC;EAC6C,WAAW,SAAS,EAAC,mBAAmB,aAAY,CAAC;EAC3D,QAAQ,QAAQ;EAEyB,CAAC;AAEnF,QAAO,eACE;EACL;EACA;EACA,GAAG;EACH,GAAG;EACH;EACA;EACA;EACA;EACD,GACD;EAAC;EAAM;EAAS;EAAc;EAAM;EAAS;EAAc,CAC5D;;AAUH,MAAMC,gBAA4C,cAAiC,KAAK;AAExF,MAAa,yBAA2C;CACtD,MAAMC,UAA6B,WAAW,cAAc;AAC5D,KAAI,WAAW,KACb,OAAM,IAAI,MAAM,kDAAkD;AAEpE,QAAO;;AAIT,SAAgB,OAAO,EAAC,SAAU,GAAG,WAA8D;CACjG,MAAMC,SAA2B,UAAU,QAAQ;AACnD,QAAO,oBAAC,cAAc;EAAS,OAAO;EAAS;GAAkC;;AAQnF,MAAaC,gBAET,YACD,EAAC,UAAU,UAAU,MAAO,GAAG,SAAqD,YAA8B;CACjH,MAAMC,UAA4B,kBAAkB;CACpD,MAAMC,cAAiC,SAAiB;CACxD,MAAMC,MAAuC,aAAa;EAAC,QAAQ,KAAK;EAAc;EAAS;EAAY,CAAC;AAE5G,KAAI,WAAW,eAAe,SAAS,CACrC,QAAO,aACL,UACA,QAAQ,kBAAkB;EACxB;EACA,GAAG;EACH,GAAI,SAAS;EACb,cAAc,QAAQ,OAAO,SAAS;EACvC,CAAC,CACH;AAGH,QACE,oBAAC;EAAY;EAAK,cAAY,QAAQ,OAAO,SAAS;EAAU,GAAI,QAAQ,kBAAkB,MAAM;EACjG;GACM;EAGd;AAED,MAAaC,gBACX,YACG,OAAkC,YAAiC;CAClE,MAAM,EAAC,SAAS,gBAAiB,GAAG,YAAW,kBAAkB;CACjE,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,sBAAU,OAAO,YAAY;CACpE,MAAMJ,MAAuC,aAAa,CAAC,QAAQ,KAAK,aAAa,QAAQ,CAAC;AAE9F,KAAI,CAAC,gBAAgB,KAAM,QAAO;AAElC,QACE,oBAAC,4BACC,oBAAC;EACC,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;EACpF;YAEA,oBAAC;GAAqB,SAAS;GAAiB,cAAc;aAC5D,oBAAC;IACM;IACL,WAAW,GAAG,yBAAyB,IAAI,UAAU,UAAU,CAAC,EAAE,OAAO,YAAY,MAAM,UAAU;IACrG,mBAAiB,QAAQ;IACzB,oBAAkB,QAAQ;IAC1B,GAAI,QAAQ,iBAAiB,MAAM;cAElC,MAAM;KACH;IACe;GACP,GACH;EAGtB;AAEH,MAAaK,gBAET,YACD,EAAC,SAAU,GAAG,SAAuC,QAAiC;CACrF,MAAMP,UAA4B,kBAAkB;CACpD,MAAM,EAAC,OAAO,gBAA4CI,kBAAU;CACpE,MAAMC,SAAiCC,sBAAU,OAAO,YAAY;CACpE,MAAME,KAAyBC,SAAO;AAEtC,uBAAoC;AAClC,UAAQ,WAAW,GAAG;AACtB,eAAmB;AACjB,WAAQ,WAAW,OAAU;;IAE9B,CAAC,IAAI,QAAQ,WAAW,CAAC;AAE5B,QACE,qBAAC;EAAI,WAAW,GAAG,yBAAyB,IAAI,UAAU,SAAS,CAAC,EAAE,OAAO,UAAU;aACrF,oBAAC;GACC,GAAI;GACC;GACD;GACJ,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,eAAe;GAErF;IACE,EACL,oBAACC;GACC,OAAM;GACN,SAAQ;GACR,MAAK;GACL,OAAM;GACN,eAAqB;AACnB,YAAQ,QAAQ,MAAM;;GAExB,cAAW;aAEX,oBAACC;IAAE,OAAO;IAAI,QAAQ;KAAM;IACrB;GACL;EAGX;AAED,MAAaC,oBAET,YACD,EAAC,SAAU,GAAG,SAAyC,QAAmC;CACzF,MAAMZ,UAA4B,kBAAkB;CACpD,MAAM,EAAC,OAAO,gBAA4CI,kBAAU;CACpE,MAAMC,SAAiCC,sBAAU,OAAO,YAAY;CACpE,MAAME,KAAyBC,SAAO;AAEtC,uBAAoC;AAClC,UAAQ,iBAAiB,GAAG;AAC5B,eAAmB;AACjB,WAAQ,iBAAiB,OAAU;;IAEpC,CAAC,IAAI,QAAQ,iBAAiB,CAAC;AAElC,QACE,oBAAC;EACC,GAAI;EACC;EACD;EACJ,WAAW,GAAG,yBAAyB,IAAI,UAAU,cAAc,CAAC,EAAE,OAAO,gBAAgB,MAAM,UAAU;EAE5G;GACC;EAGT;AAOD,MAAaI,cAET,YAEA,EAAC,UAAU,UAAU,MAAO,GAAG,SAC/B,YACG;CACH,MAAMb,UAA4B,kBAAkB;CACpD,MAAMc,cAAuC,UAAkB;CAC/D,MAAMZ,MAAuC,aAAa,CAAC,SAAS,YAAY,CAAC;CAEjF,MAAM,eAAe,UAA+C;AAClE,UAAQ,QAAQ,MAAM;AACtB,QAAM,UAAU,MAAM;;AAGxB,KAAI,WAAW,eAAe,SAAS,CACrC,QAAO,aAAa,UAAU;EAC5B;EACA,GAAG;EACH,GAAI,SAAS;EACb,SAAS;EACV,CAAC;AAGJ,QACE,oBAACQ;EACC,GAAI;EACC;EACL,SAAS;EACT,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,MAAM,UAAU;EAChF,SAAQ;EAEP;GACM;EAGd;AAED,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,kBAAkB,cAAc;AAChC,YAAY,cAAc;AAG1B,AAAC,OAAe,UAAU;AAC1B,AAAC,OAAe,UAAU;AAC1B,AAAC,OAAe,UAAU;AAC1B,AAAC,OAAe,cAAc;AAC9B,AAAC,OAAe,QAAQ;AAUxB,qBAAe"}
|
|
1
|
+
{"version":3,"file":"Dialog.js","names":["open: boolean","setOpen: (openVal: boolean) => void","data: UseFloatingReturn","interactions: UseInteractionsReturn","DialogContext: Context<DialogContextType>","context: DialogContextType","dialog: DialogHookReturn","DialogTrigger: ForwardRefExoticComponent<\n HTMLProps<HTMLElement> & DialogTriggerProps & RefAttributes<HTMLElement>\n>","context: DialogHookReturn","childrenRef: Ref<HTMLElement>","ref: ReturnType<typeof useMergeRefs>","DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement> & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","DialogHeading: ForwardRefExoticComponent<\n HTMLProps<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>\n>","id: string | undefined","useId","Button","X","DialogDescription: ForwardRefExoticComponent<\n HTMLProps<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>\n>","DialogClose: ForwardRefExoticComponent<\n ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & RefAttributes<HTMLButtonElement>\n>","childrenRef: Ref<HTMLButtonElement>"],"sources":["../../../../src/components/primitives/Dialog/Dialog.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n useFloating,\n useClick,\n useDismiss,\n useRole,\n useInteractions,\n useMergeRefs,\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useId,\n UseFloatingReturn,\n UseInteractionsReturn,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n type ButtonHTMLAttributes,\n type Context,\n type Dispatch,\n type FC,\n type ForwardRefExoticComponent,\n type HTMLProps,\n type JSX,\n type MouseEvent,\n type ReactNode,\n type Ref,\n type RefAttributes,\n type SetStateAction,\n cloneElement,\n createContext,\n forwardRef,\n isValidElement,\n useContext,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport useStyles from './Dialog.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Button from '../Button/Button';\nimport {X} from '../Icons';\n\ninterface DialogOptions {\n initialOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n open?: boolean;\n}\n\ninterface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {\n descriptionId: string | undefined;\n labelId: string | undefined;\n open: boolean;\n setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n setLabelId: Dispatch<SetStateAction<string | undefined>>;\n setOpen: (open: boolean) => void;\n}\n\nexport function useDialog({\n initialOpen = false,\n open: controlledOpen,\n onOpenChange: setControlledOpen,\n}: DialogOptions = {}): DialogHookReturn {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);\n const [labelId, setLabelId] = useState<string | undefined>();\n const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n const open: boolean = controlledOpen ?? uncontrolledOpen;\n const setOpen: (openVal: boolean) => void = setControlledOpen ?? setUncontrolledOpen;\n\n const data: UseFloatingReturn = useFloating({\n onOpenChange: setOpen,\n open,\n });\n\n const {context} = data;\n\n const click: ReturnType<typeof useClick> = useClick(context, {\n enabled: controlledOpen == null,\n });\n const dismiss: ReturnType<typeof useDismiss> = useDismiss(context, {outsidePressEvent: 'mousedown'});\n const role: ReturnType<typeof useRole> = useRole(context);\n\n const interactions: UseInteractionsReturn = useInteractions([click, dismiss, role]);\n\n return useMemo(\n () => ({\n open,\n setOpen,\n ...interactions,\n ...data,\n descriptionId,\n labelId,\n setDescriptionId,\n setLabelId,\n }),\n [open, setOpen, interactions, data, labelId, descriptionId],\n );\n}\n\ntype DialogContextType =\n | (DialogHookReturn & {\n setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n setLabelId: Dispatch<SetStateAction<string | undefined>>;\n })\n | null;\n\nconst DialogContext: Context<DialogContextType> = createContext<DialogContextType>(null);\n\nexport const useDialogContext = (): DialogHookReturn => {\n const context: DialogContextType = useContext(DialogContext);\n if (context == null) {\n throw new Error('Dialog components must be wrapped in <Dialog />');\n }\n return context;\n};\n\n// Dialog Components (Modal)\nexport function Dialog({children, ...options}: {children: ReactNode} & DialogOptions): JSX.Element {\n const dialog: DialogHookReturn = useDialog(options);\n return <DialogContext.Provider value={dialog}>{children}</DialogContext.Provider>;\n}\n\ninterface DialogTriggerProps {\n asChild?: boolean;\n children: ReactNode;\n}\n\nexport const DialogTrigger: ForwardRefExoticComponent<\n HTMLProps<HTMLElement> & DialogTriggerProps & RefAttributes<HTMLElement>\n> = forwardRef<HTMLElement, HTMLProps<HTMLElement> & DialogTriggerProps>(\n ({children, asChild = false, ...props}: HTMLProps<HTMLElement> & DialogTriggerProps, propRef: Ref<HTMLElement>) => {\n const context: DialogHookReturn = useDialogContext();\n const childrenRef: Ref<HTMLElement> = (children as any).ref;\n const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n if (asChild && isValidElement(children)) {\n return cloneElement(\n children,\n context.getReferenceProps({\n ref,\n ...props,\n ...(children.props as any),\n 'data-state': context.open ? 'open' : 'closed',\n }),\n );\n }\n\n return (\n <button ref={ref} data-state={context.open ? 'open' : 'closed'} {...context.getReferenceProps(props)}>\n {children}\n </button>\n );\n },\n);\n\nexport const DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement> & RefAttributes<HTMLDivElement>> =\n forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(\n (props: HTMLProps<HTMLDivElement>, propRef: Ref<HTMLDivElement>) => {\n const {context: floatingContext, ...context} = useDialogContext();\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([context.refs.setFloating, propRef]);\n\n if (!floatingContext.open) return null;\n\n return (\n <FloatingPortal>\n <FloatingOverlay\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'overlay')), styles['overlay'])}\n lockScroll\n >\n <FloatingFocusManager context={floatingContext} initialFocus={-1}>\n <div\n ref={ref}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'content')), styles['content'], props.className)}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n {...context.getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingOverlay>\n </FloatingPortal>\n );\n },\n );\n\nexport const DialogHeading: ForwardRefExoticComponent<\n HTMLProps<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>\n> = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement>>(\n ({children, ...props}: HTMLProps<HTMLHeadingElement>, ref: Ref<HTMLHeadingElement>) => {\n const context: DialogHookReturn = useDialogContext();\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const id: string | undefined = useId();\n\n useLayoutEffect((): (() => void) => {\n context.setLabelId(id);\n return (): void => {\n context.setLabelId(undefined);\n };\n }, [id, context.setLabelId]);\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('dialog', 'header')), styles['header'])}>\n <h2\n {...props}\n ref={ref}\n id={id}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'title')), styles['headerTitle'])}\n >\n {children}\n </h2>\n <Button\n color=\"tertiary\"\n variant=\"icon\"\n size=\"small\"\n shape=\"round\"\n onClick={(): void => {\n context.setOpen(false);\n }}\n aria-label=\"Close\"\n >\n <X width={16} height={16} />\n </Button>\n </div>\n );\n },\n);\n\nexport const DialogDescription: ForwardRefExoticComponent<\n HTMLProps<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>\n> = forwardRef<HTMLParagraphElement, HTMLProps<HTMLParagraphElement>>(\n ({children, ...props}: HTMLProps<HTMLParagraphElement>, ref: Ref<HTMLParagraphElement>) => {\n const context: DialogHookReturn = useDialogContext();\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme);\n const id: string | undefined = useId();\n\n useLayoutEffect((): (() => void) => {\n context.setDescriptionId(id);\n return (): void => {\n context.setDescriptionId(undefined);\n };\n }, [id, context.setDescriptionId]);\n\n return (\n <p\n {...props}\n ref={ref}\n id={id}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'description')), styles['description'], props.className)}\n >\n {children}\n </p>\n );\n },\n);\n\ninterface DialogCloseProps {\n asChild?: boolean;\n children?: ReactNode;\n}\n\nexport const DialogClose: ForwardRefExoticComponent<\n ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & RefAttributes<HTMLButtonElement>\n> = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps>(\n (\n {children, asChild = false, ...props}: ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps,\n propRef: Ref<HTMLButtonElement>,\n ) => {\n const context: DialogHookReturn = useDialogContext();\n const childrenRef: Ref<HTMLButtonElement> = (children as any)?.ref;\n const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([propRef, childrenRef]);\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n context.setOpen(false);\n props.onClick?.(event);\n };\n\n if (asChild && isValidElement(children)) {\n return cloneElement(children, {\n ref,\n ...props,\n ...(children.props as any),\n onClick: handleClick,\n });\n }\n\n return (\n <Button\n {...props}\n ref={ref}\n onClick={handleClick}\n className={cx(withVendorCSSClassPrefix(bem('dialog', 'close')), props.className)}\n variant=\"text\"\n >\n {children}\n </Button>\n );\n },\n);\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogContent.displayName = 'DialogContent';\nDialogHeading.displayName = 'DialogHeading';\nDialogDescription.displayName = 'DialogDescription';\nDialogClose.displayName = 'DialogClose';\n\n// Attach subcomponents to Dialog\n(Dialog as any).Trigger = DialogTrigger;\n(Dialog as any).Content = DialogContent;\n(Dialog as any).Heading = DialogHeading;\n(Dialog as any).Description = DialogDescription;\n(Dialog as any).Close = DialogClose;\n\nexport interface DialogComponent extends FC<{children: ReactNode} & DialogOptions> {\n Close: typeof DialogClose;\n Content: typeof DialogContent;\n Description: typeof DialogDescription;\n Heading: typeof DialogHeading;\n Trigger: typeof DialogTrigger;\n}\n\nexport default Dialog as DialogComponent;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Dialog/Dialog.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;GAKG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAkElD,CAAC;AAE3B,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.styles.js","names":["overlay: string","content: string","dropdownContent: string","header: string","headerTitle: string"],"sources":["../../../../src/components/primitives/Dialog/Dialog.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Dialog.styles.js","names":["overlay: string","content: string","dropdownContent: string","header: string","headerTitle: string"],"sources":["../../../../src/components/primitives/Dialog/Dialog.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 Dialog component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n useMemo(() => {\n const overlay: string = css`\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n `;\n\n const content: string = css`\n background: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.large};\n box-shadow: 0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'};\n font-family: ${theme.vars.typography.fontFamily};\n outline: none;\n overflow-y: auto;\n z-index: 10000;\n `;\n\n const dropdownContent: string = css`\n background: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.large};\n box-shadow: 0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'};\n outline: none;\n max-width: 90vw;\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n `;\n\n const header: string = css`\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(${theme.vars.spacing.unit} * 3) calc(${theme.vars.spacing.unit} * 4.5);\n border-bottom: 1px solid ${theme.vars.colors.border};\n `;\n\n const headerTitle: string = css`\n margin: 0;\n font-size: 1.2rem;\n font-weight: 600;\n color: ${theme.vars.colors.text.primary};\n `;\n\n const contentBody: string = css`\n padding: calc(${theme.vars.spacing.unit} * 2);\n `;\n\n const description: string = css`\n margin: 0;\n color: ${theme.vars.colors.text.secondary};\n font-size: ${theme.vars.typography.fontSizes.sm};\n line-height: 1.5;\n `;\n\n return {\n content,\n contentBody,\n description,\n dropdownContent,\n header,\n headerTitle,\n overlay,\n };\n }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,UAAkB,GAAG;;;;;;;CAQ3B,MAAMC,UAAkB,GAAG;oBACX,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;8BACvB,gBAAgB,SAAS,uBAAuB,sBAAsB;qBAC/E,MAAM,KAAK,WAAW,WAAW;;;;;CAMlD,MAAMC,kBAA0B,GAAG;oBACnB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;8BACvB,gBAAgB,SAAS,uBAAuB,sBAAsB;;;;;;;CAQhG,MAAMC,SAAiB,GAAG;;;;sBAIR,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;iCAClD,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,cAAsB,GAAG;;;;eAIpB,MAAM,KAAK,OAAO,KAAK,QAAQ;;AAc1C,QAAO;EACL;EACA,aAb0B,GAAG;sBACb,MAAM,KAAK,QAAQ,KAAK;;EAaxC,aAV0B,GAAG;;eAEpB,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;EAQhD;EACA;EACA;EACA;EACD;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,4BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Divider/Divider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Divider/Divider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMpD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA2E7B,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 Typography_default from "../Typography/Typography.js";
|
|
3
4
|
import Divider_styles_default from "./Divider.styles.js";
|
|
4
5
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { cx } from "@emotion/css";
|
|
7
7
|
|
|
8
8
|
//#region src/components/primitives/Divider/Divider.tsx
|
|
9
9
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.js","names":["Divider: FC<DividerProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../src/components/primitives/Divider/Divider.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Divider.js","names":["Divider: FC<DividerProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../src/components/primitives/Divider/Divider.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, HTMLAttributes, ReactNode} from 'react';\nimport useStyles from './Divider.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Typography from '../Typography/Typography';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Text to display in the center of the divider\n */\n children?: ReactNode;\n\n /**\n * Custom color for the divider\n */\n color?: string;\n\n /**\n * The orientation of the divider\n */\n orientation?: DividerOrientation;\n\n /**\n * The variant style of the divider\n */\n variant?: DividerVariant;\n}\n\n/**\n * Divider component for separating content sections.\n *\n * @example\n * ```tsx\n * // Basic horizontal divider\n * <Divider />\n *\n * // Divider with text\n * <Divider>OR</Divider>\n *\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n *\n * // Custom styled divider\n * <Divider variant=\"dashed\" color=\"#ccc\">Continue with</Divider>\n * ```\n */\nconst Divider: FC<DividerProps> = ({\n orientation = 'horizontal',\n variant = 'solid',\n children,\n color,\n className,\n style,\n ...rest\n}: DividerProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, orientation, variant, color, !!children);\n\n if (orientation === 'vertical') {\n return (\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('divider')),\n withVendorCSSClassPrefix(bem('divider', 'vertical')),\n styles['divider'],\n styles['vertical'],\n className,\n )}\n style={style}\n role=\"separator\"\n aria-orientation=\"vertical\"\n {...rest}\n />\n );\n }\n\n if (children) {\n return (\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('divider')),\n withVendorCSSClassPrefix(bem('divider', 'horizontal')),\n withVendorCSSClassPrefix(bem('divider', 'with-text')),\n styles['divider'],\n styles['horizontal'],\n className,\n )}\n style={style}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n {...rest}\n >\n <div className={cx(withVendorCSSClassPrefix(bem('divider', 'line')), styles['line'])} />\n <Typography\n variant=\"body2\"\n color=\"textSecondary\"\n className={cx(withVendorCSSClassPrefix(bem('divider', 'text')), styles['text'])}\n inline\n >\n {children}\n </Typography>\n <div className={cx(withVendorCSSClassPrefix(bem('divider', 'line')), styles['line'])} />\n </div>\n );\n }\n\n return (\n <div\n className={cx(\n withVendorCSSClassPrefix(bem('divider')),\n withVendorCSSClassPrefix(bem('divider', 'horizontal')),\n styles['divider'],\n styles['horizontal'],\n className,\n )}\n style={style}\n role=\"separator\"\n aria-orientation=\"horizontal\"\n {...rest}\n />\n );\n};\n\nexport default Divider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAMA,WAA6B,EACjC,cAAc,cACd,UAAU,SACV,UACA,OACA,WACA,MACA,GAAG,WACe;CAClB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,aAAa,aAAa,SAAS,OAAO,CAAC,CAAC,SAAS;AAE7G,KAAI,gBAAgB,WAClB,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,UAAU,CAAC,EACxC,yBAAyB,IAAI,WAAW,WAAW,CAAC,EACpD,OAAO,YACP,OAAO,aACP,UACD;EACM;EACP,MAAK;EACL,oBAAiB;EACjB,GAAI;GACJ;AAIN,KAAI,SACF,QACE,qBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,UAAU,CAAC,EACxC,yBAAyB,IAAI,WAAW,aAAa,CAAC,EACtD,yBAAyB,IAAI,WAAW,YAAY,CAAC,EACrD,OAAO,YACP,OAAO,eACP,UACD;EACM;EACP,MAAK;EACL,oBAAiB;EACjB,GAAI;;GAEJ,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,WAAW,OAAO,CAAC,EAAE,OAAO,QAAQ,GAAI;GACxF,oBAACC;IACC,SAAQ;IACR,OAAM;IACN,WAAW,GAAG,yBAAyB,IAAI,WAAW,OAAO,CAAC,EAAE,OAAO,QAAQ;IAC/E;IAEC;KACU;GACb,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,WAAW,OAAO,CAAC,EAAE,OAAO,QAAQ,GAAI;;GACpF;AAIV,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,UAAU,CAAC,EACxC,yBAAyB,IAAI,WAAW,aAAa,CAAC,EACtD,OAAO,YACP,OAAO,eACP,UACD;EACM;EACP,MAAK;EACL,oBAAiB;EACjB,GAAI;GACJ;;AAIN,sBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Divider/Divider.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Divider.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Divider/Divider.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,aAAa,kBAAkB,EAC/B,SAAS,cAAc,EACvB,QAAQ,MAAM,EACd,cAAc,OAAO,KACpB,MAAM,CAAC,MAAM,EAAE,MAAM,CAyD4C,CAAC;AAErE,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.styles.js","names":["baseColor: string","borderStyle: string","baseDivider: string","verticalDivider: string"],"sources":["../../../../src/components/primitives/Divider/Divider.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"Divider.styles.js","names":["baseColor: string","borderStyle: string","baseDivider: string","verticalDivider: string"],"sources":["../../../../src/components/primitives/Divider/Divider.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\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\n\n/**\n * Creates styles for the Divider 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 orientation - The divider orientation\n * @param variant - The divider variant\n * @param color - Custom color for the divider\n * @param hasChildren - Whether the divider has children (text)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n orientation: DividerOrientation,\n variant: DividerVariant,\n color?: string,\n hasChildren?: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const baseColor: string = color || theme.colors.border;\n let borderStyle: string;\n if (variant === 'solid') {\n borderStyle = 'solid';\n } else if (variant === 'dashed') {\n borderStyle = 'dashed';\n } else {\n borderStyle = 'dotted';\n }\n\n const baseDivider: string = css`\n margin: calc(${theme.vars.spacing.unit} * 2) 0;\n `;\n\n const verticalDivider: string = css`\n display: inline-block;\n height: 100%;\n min-height: calc(${theme.vars.spacing.unit} * 2);\n width: 1px;\n border-inline-start: 1px ${borderStyle} ${baseColor};\n margin-block: 0;\n margin-inline: calc(${theme.vars.spacing.unit} * 1);\n `;\n\n const horizontalDivider: string = css`\n display: flex;\n align-items: center;\n width: 100%;\n ${!hasChildren &&\n css`\n height: 1px;\n border-top: 1px ${borderStyle} ${baseColor};\n `}\n `;\n\n const dividerLine: string = css`\n flex: 1;\n height: 1px;\n border-top: 1px ${borderStyle} ${baseColor};\n `;\n\n const dividerText: string = css`\n background-color: ${theme.vars.colors.background.surface};\n font-family: ${theme.vars.typography.fontFamily};\n padding: 0 calc(${theme.vars.spacing.unit} * 1);\n white-space: nowrap;\n `;\n\n return {\n divider: baseDivider,\n horizontal: horizontalDivider,\n line: dividerLine,\n text: dividerText,\n vertical: verticalDivider,\n };\n }, [theme, colorScheme, orientation, variant, color, hasChildren]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,aACA,SACA,OACA,gBAEA,cAAc;CACZ,MAAMA,YAAoB,SAAS,MAAM,OAAO;CAChD,IAAIC;AACJ,KAAI,YAAY,QACd,eAAc;UACL,YAAY,SACrB,eAAc;KAEd,eAAc;CAGhB,MAAMC,cAAsB,GAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,kBAA0B,GAAG;;;yBAGd,MAAM,KAAK,QAAQ,KAAK;;iCAEhB,YAAY,GAAG,UAAU;;4BAE9B,MAAM,KAAK,QAAQ,KAAK;;AA2BhD,QAAO;EACL,SAAS;EACT,YA1BgC,GAAG;;;;QAIjC,CAAC,eACH,GAAG;;0BAEiB,YAAY,GAAG,UAAU;QAC3C;;EAmBF,MAhB0B,GAAG;;;wBAGX,YAAY,GAAG,UAAU;;EAc3C,MAX0B,GAAG;0BACT,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;wBAC9B,MAAM,KAAK,QAAQ,KAAK;;;EAS1C,UAAU;EACX;GACA;CAAC;CAAO;CAAa;CAAa;CAAS;CAAO;CAAY,CAAC;AAEpE,6BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6BrC,CAAC;AAEF,eAAe,WAAW,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 Typography_default from "../Typography/Typography.js";
|
|
3
4
|
import FormControl_styles_default from "./FormControl.styles.js";
|
|
4
5
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { cx } from "@emotion/css";
|
|
7
7
|
|
|
8
8
|
//#region src/components/primitives/FormControl/FormControl.tsx
|
|
9
9
|
const FormControl = ({ children, error, helperText, className, id, helperTextAlign = "left", helperTextMarginLeft }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControl.js","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"FormControl.js","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode} from 'react';\nimport useStyles from './FormControl.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Typography from '../Typography/Typography';\n\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\nexport interface FormControlProps {\n /**\n * The content to be wrapped by the form control\n */\n children: ReactNode;\n /**\n * Additional CSS class names\n */\n className?: string;\n /**\n * Error message to display below the content\n */\n error?: string;\n /**\n * Helper text to display below the content\n */\n helperText?: string;\n /**\n * Custom alignment for helper text (default: left, center for OTP)\n */\n helperTextAlign?: FormControlHelperTextAlign;\n /**\n * Custom margin left for helper text (for components like Checkbox)\n */\n helperTextMarginLeft?: string;\n /**\n * HTML id attribute\n */\n id?: string;\n /**\n * Custom container style\n */\n style?: CSSProperties;\n}\n\nconst FormControl: FC<FormControlProps> = ({\n children,\n error,\n helperText,\n className,\n id,\n helperTextAlign = 'left',\n helperTextMarginLeft,\n}: FormControlProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);\n\n return (\n <div id={id} className={cx(withVendorCSSClassPrefix(bem('form-control')), styles['formControl'], className)}>\n {children}\n {(error || helperText) && (\n <Typography\n variant=\"caption\"\n color={error ? 'error' : 'textSecondary'}\n className={cx(withVendorCSSClassPrefix(bem('form-control', 'helper-text')), styles['helperText'], {\n [withVendorCSSClassPrefix(bem('form-control', 'helper-text', 'error'))]: !!error,\n [styles['helperTextError']]: !!error,\n })}\n >\n {error || helperText}\n </Typography>\n )}\n </div>\n );\n};\n\nexport default FormControl;\n"],"mappings":";;;;;;;;AA+CA,MAAMA,eAAqC,EACzC,UACA,OACA,YACA,WACA,IACA,kBAAkB,QAClB,2BACsB;CACtB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,2BAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,qBAAC;EAAQ;EAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,oBAACC;GACC,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAW,GAAG,yBAAyB,IAAI,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;KAC/F,yBAAyB,IAAI,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControl.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/FormControl/FormControl.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormControl.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/FormControl/FormControl.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE3D;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,iBAAiB,0BAA0B,EAC3C,uBAAuB,MAAM,EAC7B,WAAW,OAAO,KACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAsBmD,CAAC;AAE5E,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormControl.styles.js","names":[],"sources":["../../../../src/components/primitives/FormControl/FormControl.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"FormControl.styles.js","names":[],"sources":["../../../../src/components/primitives/FormControl/FormControl.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\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\n/**\n * Creates styles for the FormControl 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 helperTextAlign - The alignment for helper text\n * @param helperTextMarginLeft - Custom margin left for helper text\n * @param hasError - Whether the form control has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n helperTextAlign: FormControlHelperTextAlign,\n helperTextMarginLeft?: string,\n hasError?: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const formControl: string = css`\n text-align: start;\n font-family: ${theme.vars.typography.fontFamily};\n `;\n\n const helperText: string = css`\n margin-top: calc(${theme.vars.spacing.unit} / 2);\n text-align: ${helperTextAlign === 'left' ? 'start' : helperTextAlign};\n ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}\n `;\n\n const helperTextError: string = css`\n color: ${theme.vars.colors.error.main};\n `;\n\n return {\n formControl,\n helperText,\n helperTextError,\n };\n }, [theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,iBACA,sBACA,aAEA,cAAc;AAgBZ,QAAO;EACL,aAhB0B,GAAG;;qBAEd,MAAM,KAAK,WAAW,WAAW;;EAehD,YAZyB,GAAG;yBACT,MAAM,KAAK,QAAQ,KAAK;oBAC7B,oBAAoB,SAAS,UAAU,gBAAgB;QACnE,wBAAwB,wBAAwB,qBAAqB,GAAG;;EAU1E,iBAP8B,GAAG;eACxB,MAAM,KAAK,OAAO,MAAM,KAAK;;EAOvC;GACA;CAAC;CAAO;CAAa;CAAiB;CAAsB;CAAS,CAAC;AAE3E,iCAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/InputLabel/InputLabel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/InputLabel/InputLabel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAKxE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3F;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAqCnC,CAAC;AAEF,eAAe,UAAU,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 InputLabel_styles_default from "./InputLabel.styles.js";
|
|
3
4
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
-
import { cx } from "@emotion/css";
|
|
6
6
|
|
|
7
7
|
//#region src/components/primitives/InputLabel/InputLabel.tsx
|
|
8
8
|
const InputLabel = ({ children, required = false, error = false, variant = "block", marginBottom, className, style = {},...rest }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.js","names":["InputLabel: FC<InputLabelProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/InputLabel/InputLabel.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"InputLabel.js","names":["InputLabel: FC<InputLabelProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../src/components/primitives/InputLabel/InputLabel.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, LabelHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './InputLabel.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport type InputLabelVariant = 'block' | 'inline';\n\nexport interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {\n /**\n * Label text or content\n */\n children: ReactNode;\n /**\n * Additional CSS class names\n */\n className?: string;\n /**\n * Whether there's an error state\n */\n error?: boolean;\n /**\n * Custom margin bottom (useful for different form layouts)\n */\n marginBottom?: string;\n /**\n * Whether the field is required\n */\n required?: boolean;\n /**\n * Custom style overrides\n */\n style?: CSSProperties;\n /**\n * Display type for label positioning\n */\n variant?: InputLabelVariant;\n}\n\nconst InputLabel: FC<InputLabelProps> = ({\n children,\n required = false,\n error = false,\n variant = 'block',\n marginBottom,\n className,\n style = {},\n ...rest\n}: InputLabelProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, variant, error, marginBottom);\n\n return (\n <label\n className={cx(\n withVendorCSSClassPrefix(bem('input-label')),\n withVendorCSSClassPrefix(bem('input-label', variant)),\n styles['label'],\n variant === 'block' ? styles['block'] : styles['inline'],\n {\n [withVendorCSSClassPrefix(bem('input-label', 'error'))]: error,\n [styles['error']]: error,\n },\n className,\n )}\n style={style}\n {...rest}\n >\n {children}\n {required && (\n <span className={cx(withVendorCSSClassPrefix(bem('input-label', 'required')), styles['requiredIndicator'])}>\n {' *'}\n </span>\n )}\n </label>\n );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;AA0CA,MAAMA,cAAmC,EACvC,UACA,WAAW,OACX,QAAQ,OACR,UAAU,SACV,cACA,WACA,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,0BAAU,OAAO,aAAa,SAAS,OAAO,aAAa;AAElG,QACE,qBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,cAAc,CAAC,EAC5C,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,YAAY,UAAU,OAAO,WAAW,OAAO,WAC/C;IACG,yBAAyB,IAAI,eAAe,QAAQ,CAAC,GAAG;IACxD,OAAO,WAAW;GACpB,EACD,UACD;EACM;EACP,GAAI;aAEH,UACA,YACC,oBAAC;GAAK,WAAW,GAAG,yBAAyB,IAAI,eAAe,WAAW,CAAC,EAAE,OAAO,qBAAqB;aACvG;IACI;GAEH;;AAIZ,yBAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/InputLabel/InputLabel.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputLabel.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/InputLabel/InputLabel.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnD;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,SAAS,iBAAiB,EAC1B,OAAO,OAAO,EACd,eAAe,MAAM,KACpB,MAAM,CAAC,MAAM,EAAE,MAAM,CAsCgC,CAAC;AAEzD,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.styles.js","names":["baseLabel: string","errorLabel: string","requiredIndicator: string"],"sources":["../../../../src/components/primitives/InputLabel/InputLabel.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"InputLabel.styles.js","names":["baseLabel: string","errorLabel: string","requiredIndicator: string"],"sources":["../../../../src/components/primitives/InputLabel/InputLabel.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\nexport type InputLabelVariant = 'block' | 'inline';\n\n/**\n * Creates styles for the InputLabel 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 variant - The display variant of the label\n * @param error - Whether the label has an error state\n * @param marginBottom - Custom margin bottom value\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n variant: InputLabelVariant,\n error: boolean,\n marginBottom?: string,\n): Record<string, string> =>\n useMemo(() => {\n const baseLabel: string = css`\n display: ${variant};\n margin-bottom: ${marginBottom || (variant === 'block' ? `calc(${theme.vars.spacing.unit} + 1px)` : '0')};\n color: ${error ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n font-size: ${theme.vars.typography.fontSizes.sm};\n font-family: ${theme.vars.typography.fontFamily};\n font-weight: ${variant === 'block' ? 500 : 'normal'};\n `;\n\n const errorLabel: string = css`\n color: ${theme.vars.colors.error.main};\n `;\n\n const requiredIndicator: string = css`\n color: ${theme.vars.colors.error.main};\n `;\n\n const blockVariant: string = css`\n display: block;\n font-weight: 500;\n margin-bottom: ${marginBottom || `calc(${theme.vars.spacing.unit} + 1px)`};\n `;\n\n const inlineVariant: string = css`\n display: inline;\n font-weight: normal;\n margin-bottom: 0;\n `;\n\n return {\n block: blockVariant,\n error: errorLabel,\n inline: inlineVariant,\n label: baseLabel,\n requiredIndicator,\n };\n }, [theme, colorScheme, variant, error, marginBottom]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,SACA,OACA,iBAEA,cAAc;CACZ,MAAMA,YAAoB,GAAG;iBAChB,QAAQ;uBACF,iBAAiB,YAAY,UAAU,QAAQ,MAAM,KAAK,QAAQ,KAAK,WAAW,KAAK;eAC/F,QAAQ,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;mBACpE,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;qBACjC,YAAY,UAAU,MAAM,SAAS;;CAGtD,MAAMC,aAAqB,GAAG;eACnB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,oBAA4B,GAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;AAexC,QAAO;EACL,OAb2B,GAAG;;;uBAGb,gBAAgB,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAAS;;EAW1E,OAAO;EACP,QAT4B,GAAG;;;;;EAU/B,OAAO;EACP;EACD;GACA;CAAC;CAAO;CAAa;CAAS;CAAO;CAAa,CAAC;AAExD,gCAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyValueInput.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"KeyValueInput.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,EAAE,EAAwE,MAAM,OAAO,CAAC;AAO7G,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAErC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvD;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,YAAY,EAAE,CAAC;IAE7C;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgOzC,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 Plus_default from "../Icons/Plus.js";
|
|
3
4
|
import X_default from "../Icons/X.js";
|
|
@@ -6,7 +7,6 @@ import KeyValueInput_styles_default from "./KeyValueInput.styles.js";
|
|
|
6
7
|
import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
|
|
7
8
|
import { useCallback, useState } from "react";
|
|
8
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { cx } from "@emotion/css";
|
|
10
10
|
|
|
11
11
|
//#region src/components/primitives/KeyValueInput/KeyValueInput.tsx
|
|
12
12
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyValueInput.js","names":["KeyValueInput: FC<KeyValueInputProps>","useTheme","styles: Record<string, string>","useStyles","handleAddPair: ReturnType<typeof useCallback>","newPair: KeyValuePair","updatedPairs: KeyValuePair[]","handleRemovePair: ReturnType<typeof useCallback>","pairToRemove: KeyValuePair","handleUpdatePair: ReturnType<typeof useCallback>","canAddMore: boolean","isAddDisabled: boolean","TextField","X","Plus"],"sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, KeyboardEvent, MouseEventHandler, ReactElement, useState, useCallback} from 'react';\nimport useStyles from './KeyValueInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {Plus, X} from '../Icons';\nimport TextField from '../TextField/TextField';\n\nexport interface KeyValuePair {\n key: string;\n value: string;\n}\n\nexport interface KeyValueInputProps {\n /**\n * CSS class name for styling the component.\n */\n className?: string;\n\n /**\n * Whether the input is disabled.\n */\n disabled?: boolean;\n\n /**\n * Error message to display.\n */\n error?: string;\n\n /**\n * Help text to display below the input.\n */\n helperText?: string;\n\n /**\n * Label for the key input field.\n */\n keyLabel?: string;\n\n /**\n * Placeholder text for the key input field.\n */\n keyPlaceholder?: string;\n\n /**\n * Label for the component.\n */\n label?: string;\n\n /**\n * Maximum number of key-value pairs allowed.\n */\n maxPairs?: number;\n /**\n * Callback fired when a pair is added.\n */\n onAdd?: (pair: KeyValuePair) => void;\n\n /**\n * Callback fired when the key-value pairs change.\n */\n onChange?: (pairs: KeyValuePair[]) => void;\n\n /**\n * Callback fired when a pair is removed.\n */\n onRemove?: (pair: KeyValuePair, index: number) => void;\n\n /**\n * Whether the component is in read-only mode.\n */\n readOnly?: boolean;\n\n /**\n * Text for the remove button.\n */\n removeButtonText?: string;\n\n /**\n * Whether the component is required.\n */\n required?: boolean;\n\n /**\n * Current key-value pairs.\n */\n value?: Record<string, any> | KeyValuePair[];\n\n /**\n * Label for the value input field.\n */\n valueLabel?: string;\n\n /**\n * Placeholder text for the value input field.\n */\n valuePlaceholder?: string;\n}\n\n/**\n * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.\n * It provides a user-friendly interface for editing organization attributes or similar data structures.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <KeyValueInput\n * label=\"Organization Attributes\"\n * onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With initial values\n * <KeyValueInput\n * label=\"Organization Attributes\"\n * value={{department: 'IT', location: 'New York'}}\n * onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With add/remove callbacks\n * <KeyValueInput\n * label=\"Custom Attributes\"\n * value={attributes}\n * onChange={(pairs) => setAttributes(pairs)}\n * onAdd={(pair) => console.log('Added:', pair)}\n * onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}\n * />\n * ```\n */\nconst KeyValueInput: FC<KeyValueInputProps> = ({\n className = '',\n disabled = false,\n error,\n helperText,\n keyLabel = 'Key',\n keyPlaceholder = 'Enter key',\n label,\n maxPairs,\n onChange,\n onAdd,\n onRemove,\n readOnly = false,\n removeButtonText = 'Remove',\n required = false,\n value = {},\n valueLabel = 'Value',\n valuePlaceholder = 'Enter value',\n}: KeyValueInputProps): ReactElement => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, disabled, readOnly, !!error);\n\n // Convert value to array format\n const initialPairs: KeyValuePair[] = Array.isArray(value)\n ? value\n : Object.entries(value).map(([key, val]: [string, any]) => ({key, value: String(val)}));\n\n const [pairs, setPairs] = useState<KeyValuePair[]>(initialPairs);\n const [newKey, setNewKey] = useState('');\n const [newValue, setNewValue] = useState('');\n\n const handleAddPair: ReturnType<typeof useCallback> = useCallback(() => {\n if (!newKey.trim() || !newValue.trim()) return;\n if (maxPairs && pairs.length >= maxPairs) return;\n\n const newPair: KeyValuePair = {\n key: newKey.trim(),\n value: newValue.trim(),\n };\n\n const updatedPairs: KeyValuePair[] = [...pairs, newPair];\n setPairs(updatedPairs);\n setNewKey('');\n setNewValue('');\n\n if (onChange) {\n onChange(updatedPairs);\n }\n\n if (onAdd) {\n onAdd(newPair);\n }\n }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);\n\n const handleRemovePair: ReturnType<typeof useCallback> = useCallback(\n (index: number) => {\n const pairToRemove: KeyValuePair = pairs[index];\n const updatedPairs: KeyValuePair[] = pairs.filter((_: KeyValuePair, i: number) => i !== index);\n setPairs(updatedPairs);\n\n if (onChange) {\n onChange(updatedPairs);\n }\n\n if (onRemove) {\n onRemove(pairToRemove, index);\n }\n },\n [pairs, onChange, onRemove],\n );\n\n const handleUpdatePair: ReturnType<typeof useCallback> = useCallback(\n (index: number, field: 'key' | 'value', newVal: string) => {\n const updatedPairs: KeyValuePair[] = pairs.map((pair: KeyValuePair, i: number) => {\n if (i === index) {\n return {...pair, [field]: newVal};\n }\n return pair;\n });\n setPairs(updatedPairs);\n\n if (onChange) {\n onChange(updatedPairs);\n }\n },\n [pairs, onChange],\n );\n\n const canAddMore: boolean = !maxPairs || pairs.length < maxPairs;\n const isAddDisabled: boolean = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();\n\n const renderReadOnlyContent = (): ReactElement | ReactElement[] => {\n if (pairs.length === 0) {\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'empty-state')), styles['emptyState'])}>\n No attributes defined\n </div>\n );\n }\n\n return pairs.map((pair: KeyValuePair, index: number) => (\n <div\n key={`${pair.key}-${index}`}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-pair')), styles['readOnlyPair'])}\n >\n <span className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-key')), styles['readOnlyKey'])}>\n {pair.key}:\n </span>\n <span\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-value')), styles['readOnlyValue'])}\n >\n {pair.value}\n </span>\n </div>\n ));\n };\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input')), styles['container'], className)}>\n {label && (\n <label className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'label')), styles['label'])}>\n {label}\n {required && (\n <span\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'required')), styles['requiredIndicator'])}\n >\n {' *'}\n </span>\n )}\n </label>\n )}\n\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pairs-list')), styles['pairsList'])}>\n {readOnly\n ? renderReadOnlyContent()\n : pairs.map((pair: KeyValuePair, index: number) => (\n <div\n key={`${pair.key}-${index}`}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-row')), styles['pairRow'])}\n >\n <TextField\n placeholder={keyPlaceholder}\n value={pair.key}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUpdatePair(index, 'key', e.target.value)}\n disabled={disabled || readOnly}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label={`${keyLabel} ${index + 1}`}\n />\n <TextField\n placeholder={valuePlaceholder}\n value={pair.value}\n onChange={(e: ChangeEvent<HTMLInputElement>): void =>\n handleUpdatePair(index, 'value', e.target.value)\n }\n disabled={disabled || readOnly}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label={`${valueLabel} ${index + 1}`}\n />\n {!readOnly && (\n <button\n type=\"button\"\n onClick={(): void => handleRemovePair(index)}\n disabled={disabled}\n className={cx(\n withVendorCSSClassPrefix(bem('key-value-input', 'remove-button')),\n styles['removeButton'],\n )}\n aria-label={`${removeButtonText} ${pair.key}`}\n >\n <X width={16} height={16} />\n </button>\n )}\n </div>\n ))}\n\n {!readOnly && (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-row')), styles['addRow'])}>\n <TextField\n placeholder={keyPlaceholder}\n value={newKey}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewKey(e.target.value)}\n disabled={disabled}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label=\"New key\"\n />\n <TextField\n placeholder={valuePlaceholder}\n value={newValue}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewValue(e.target.value)}\n disabled={disabled}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label=\"New value\"\n onKeyPress={(e: KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === 'Enter' && !isAddDisabled) {\n handleAddPair();\n }\n }}\n />\n <button\n type=\"button\"\n onClick={handleAddPair as MouseEventHandler<HTMLButtonElement>}\n disabled={isAddDisabled}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-button')), styles['addButton'])}\n aria-label=\"Add new key-value pair\"\n >\n <Plus width={16} height={16} />\n </button>\n </div>\n )}\n </div>\n\n {(helperText || error) && (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'helper-text')), styles['helperText'])}>\n {error || helperText}\n </div>\n )}\n\n {maxPairs && (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'counter')), styles['counterText'])}>\n {pairs.length} of {maxPairs} pairs used\n </div>\n )}\n </div>\n );\n};\n\nexport default KeyValueInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"KeyValueInput.js","names":["KeyValueInput: FC<KeyValueInputProps>","useTheme","styles: Record<string, string>","useStyles","handleAddPair: ReturnType<typeof useCallback>","newPair: KeyValuePair","updatedPairs: KeyValuePair[]","handleRemovePair: ReturnType<typeof useCallback>","pairToRemove: KeyValuePair","handleUpdatePair: ReturnType<typeof useCallback>","canAddMore: boolean","isAddDisabled: boolean","TextField","X","Plus"],"sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, KeyboardEvent, MouseEventHandler, ReactElement, useState, useCallback} from 'react';\nimport useStyles from './KeyValueInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport {Plus, X} from '../Icons';\nimport TextField from '../TextField/TextField';\n\nexport interface KeyValuePair {\n key: string;\n value: string;\n}\n\nexport interface KeyValueInputProps {\n /**\n * CSS class name for styling the component.\n */\n className?: string;\n\n /**\n * Whether the input is disabled.\n */\n disabled?: boolean;\n\n /**\n * Error message to display.\n */\n error?: string;\n\n /**\n * Help text to display below the input.\n */\n helperText?: string;\n\n /**\n * Label for the key input field.\n */\n keyLabel?: string;\n\n /**\n * Placeholder text for the key input field.\n */\n keyPlaceholder?: string;\n\n /**\n * Label for the component.\n */\n label?: string;\n\n /**\n * Maximum number of key-value pairs allowed.\n */\n maxPairs?: number;\n /**\n * Callback fired when a pair is added.\n */\n onAdd?: (pair: KeyValuePair) => void;\n\n /**\n * Callback fired when the key-value pairs change.\n */\n onChange?: (pairs: KeyValuePair[]) => void;\n\n /**\n * Callback fired when a pair is removed.\n */\n onRemove?: (pair: KeyValuePair, index: number) => void;\n\n /**\n * Whether the component is in read-only mode.\n */\n readOnly?: boolean;\n\n /**\n * Text for the remove button.\n */\n removeButtonText?: string;\n\n /**\n * Whether the component is required.\n */\n required?: boolean;\n\n /**\n * Current key-value pairs.\n */\n value?: Record<string, any> | KeyValuePair[];\n\n /**\n * Label for the value input field.\n */\n valueLabel?: string;\n\n /**\n * Placeholder text for the value input field.\n */\n valuePlaceholder?: string;\n}\n\n/**\n * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.\n * It provides a user-friendly interface for editing organization attributes or similar data structures.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <KeyValueInput\n * label=\"Organization Attributes\"\n * onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With initial values\n * <KeyValueInput\n * label=\"Organization Attributes\"\n * value={{department: 'IT', location: 'New York'}}\n * onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With add/remove callbacks\n * <KeyValueInput\n * label=\"Custom Attributes\"\n * value={attributes}\n * onChange={(pairs) => setAttributes(pairs)}\n * onAdd={(pair) => console.log('Added:', pair)}\n * onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}\n * />\n * ```\n */\nconst KeyValueInput: FC<KeyValueInputProps> = ({\n className = '',\n disabled = false,\n error,\n helperText,\n keyLabel = 'Key',\n keyPlaceholder = 'Enter key',\n label,\n maxPairs,\n onChange,\n onAdd,\n onRemove,\n readOnly = false,\n removeButtonText = 'Remove',\n required = false,\n value = {},\n valueLabel = 'Value',\n valuePlaceholder = 'Enter value',\n}: KeyValueInputProps): ReactElement => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, disabled, readOnly, !!error);\n\n // Convert value to array format\n const initialPairs: KeyValuePair[] = Array.isArray(value)\n ? value\n : Object.entries(value).map(([key, val]: [string, any]) => ({key, value: String(val)}));\n\n const [pairs, setPairs] = useState<KeyValuePair[]>(initialPairs);\n const [newKey, setNewKey] = useState('');\n const [newValue, setNewValue] = useState('');\n\n const handleAddPair: ReturnType<typeof useCallback> = useCallback(() => {\n if (!newKey.trim() || !newValue.trim()) return;\n if (maxPairs && pairs.length >= maxPairs) return;\n\n const newPair: KeyValuePair = {\n key: newKey.trim(),\n value: newValue.trim(),\n };\n\n const updatedPairs: KeyValuePair[] = [...pairs, newPair];\n setPairs(updatedPairs);\n setNewKey('');\n setNewValue('');\n\n if (onChange) {\n onChange(updatedPairs);\n }\n\n if (onAdd) {\n onAdd(newPair);\n }\n }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);\n\n const handleRemovePair: ReturnType<typeof useCallback> = useCallback(\n (index: number) => {\n const pairToRemove: KeyValuePair = pairs[index];\n const updatedPairs: KeyValuePair[] = pairs.filter((_: KeyValuePair, i: number) => i !== index);\n setPairs(updatedPairs);\n\n if (onChange) {\n onChange(updatedPairs);\n }\n\n if (onRemove) {\n onRemove(pairToRemove, index);\n }\n },\n [pairs, onChange, onRemove],\n );\n\n const handleUpdatePair: ReturnType<typeof useCallback> = useCallback(\n (index: number, field: 'key' | 'value', newVal: string) => {\n const updatedPairs: KeyValuePair[] = pairs.map((pair: KeyValuePair, i: number) => {\n if (i === index) {\n return {...pair, [field]: newVal};\n }\n return pair;\n });\n setPairs(updatedPairs);\n\n if (onChange) {\n onChange(updatedPairs);\n }\n },\n [pairs, onChange],\n );\n\n const canAddMore: boolean = !maxPairs || pairs.length < maxPairs;\n const isAddDisabled: boolean = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();\n\n const renderReadOnlyContent = (): ReactElement | ReactElement[] => {\n if (pairs.length === 0) {\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'empty-state')), styles['emptyState'])}>\n No attributes defined\n </div>\n );\n }\n\n return pairs.map((pair: KeyValuePair, index: number) => (\n <div\n key={`${pair.key}-${index}`}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-pair')), styles['readOnlyPair'])}\n >\n <span className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-key')), styles['readOnlyKey'])}>\n {pair.key}:\n </span>\n <span\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-value')), styles['readOnlyValue'])}\n >\n {pair.value}\n </span>\n </div>\n ));\n };\n\n return (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input')), styles['container'], className)}>\n {label && (\n <label className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'label')), styles['label'])}>\n {label}\n {required && (\n <span\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'required')), styles['requiredIndicator'])}\n >\n {' *'}\n </span>\n )}\n </label>\n )}\n\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pairs-list')), styles['pairsList'])}>\n {readOnly\n ? renderReadOnlyContent()\n : pairs.map((pair: KeyValuePair, index: number) => (\n <div\n key={`${pair.key}-${index}`}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-row')), styles['pairRow'])}\n >\n <TextField\n placeholder={keyPlaceholder}\n value={pair.key}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUpdatePair(index, 'key', e.target.value)}\n disabled={disabled || readOnly}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label={`${keyLabel} ${index + 1}`}\n />\n <TextField\n placeholder={valuePlaceholder}\n value={pair.value}\n onChange={(e: ChangeEvent<HTMLInputElement>): void =>\n handleUpdatePair(index, 'value', e.target.value)\n }\n disabled={disabled || readOnly}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label={`${valueLabel} ${index + 1}`}\n />\n {!readOnly && (\n <button\n type=\"button\"\n onClick={(): void => handleRemovePair(index)}\n disabled={disabled}\n className={cx(\n withVendorCSSClassPrefix(bem('key-value-input', 'remove-button')),\n styles['removeButton'],\n )}\n aria-label={`${removeButtonText} ${pair.key}`}\n >\n <X width={16} height={16} />\n </button>\n )}\n </div>\n ))}\n\n {!readOnly && (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-row')), styles['addRow'])}>\n <TextField\n placeholder={keyPlaceholder}\n value={newKey}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewKey(e.target.value)}\n disabled={disabled}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label=\"New key\"\n />\n <TextField\n placeholder={valuePlaceholder}\n value={newValue}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewValue(e.target.value)}\n disabled={disabled}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n aria-label=\"New value\"\n onKeyPress={(e: KeyboardEvent<HTMLInputElement>): void => {\n if (e.key === 'Enter' && !isAddDisabled) {\n handleAddPair();\n }\n }}\n />\n <button\n type=\"button\"\n onClick={handleAddPair as MouseEventHandler<HTMLButtonElement>}\n disabled={isAddDisabled}\n className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-button')), styles['addButton'])}\n aria-label=\"Add new key-value pair\"\n >\n <Plus width={16} height={16} />\n </button>\n </div>\n )}\n </div>\n\n {(helperText || error) && (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'helper-text')), styles['helperText'])}>\n {error || helperText}\n </div>\n )}\n\n {maxPairs && (\n <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'counter')), styles['counterText'])}>\n {pairs.length} of {maxPairs} pairs used\n </div>\n )}\n </div>\n );\n};\n\nexport default KeyValueInput;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyValueInput.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"KeyValueInput.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.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,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,UAAU,OAAO,KAChB,MAAM,CAAC,MAAM,EAAE,MAAM,CAoKgC,CAAC;AAEzD,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyValueInput.styles.js","names":["container: string","label: string","requiredIndicator: string","pairsList: string","pairRow: string","pairInput: string","addRow: string","removeButton: string","addButton: string","helperText: string","emptyState: string","readOnlyPair: string","readOnlyKey: string","readOnlyValue: string"],"sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {
|
|
1
|
+
{"version":3,"file":"KeyValueInput.styles.js","names":["container: string","label: string","requiredIndicator: string","pairsList: string","pairRow: string","pairInput: string","addRow: string","removeButton: string","addButton: string","helperText: string","emptyState: string","readOnlyPair: string","readOnlyKey: string","readOnlyValue: string"],"sources":["../../../../src/components/primitives/KeyValueInput/KeyValueInput.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 KeyValueInput 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 readOnly - Whether the component is read-only\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 disabled: boolean,\n readOnly: boolean,\n hasError: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const container: string = css`\n display: flex;\n flex-direction: column;\n font-family: ${theme.vars.typography.fontFamily};\n gap: calc(${theme.vars.spacing.unit} / 2);\n `;\n\n const label: string = css`\n font-size: 0.875rem;\n font-weight: 500;\n color: ${theme.vars.colors.text.primary};\n margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n `;\n\n const requiredIndicator: string = css`\n color: ${theme.vars.colors.error.main};\n `;\n\n const pairsList: string = css`\n display: flex;\n flex-direction: column;\n gap: calc(${theme.vars.spacing.unit} / 4);\n `;\n\n const pairRow: string = css`\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} / 2);\n padding: calc(${theme.vars.spacing.unit} / 2);\n border-radius: ${theme.vars.borderRadius.small};\n background-color: transparent;\n border: none;\n\n &:hover {\n background-color: ${theme.vars.colors.action.hover};\n }\n `;\n\n const pairInput: string = css`\n flex: 1;\n min-width: 0;\n `;\n\n const addRow: string = css`\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} / 2);\n padding: calc(${theme.vars.spacing.unit} / 2);\n border: none;\n border-radius: ${theme.vars.borderRadius.small};\n background-color: transparent;\n margin-top: calc(${theme.vars.spacing.unit} / 2);\n `;\n\n const removeButton: string = css`\n min-width: auto;\n width: 24px;\n height: 24px;\n padding: 0;\n background-color: transparent;\n color: ${theme.vars.colors.text.secondary};\n border: none;\n border-radius: ${theme.vars.borderRadius.small};\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.action.hover};\n color: ${theme.vars.colors.error.main};\n }\n\n &:disabled {\n opacity: 0.6;\n }\n `;\n\n const addButton: string = css`\n min-width: auto;\n width: 24px;\n height: 24px;\n padding: 0;\n background-color: transparent;\n color: ${theme.vars.colors.primary.main};\n border: none;\n border-radius: ${theme.vars.borderRadius.small};\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n }\n\n &:disabled {\n opacity: 0.6;\n }\n `;\n\n const helperText: string = css`\n font-size: 0.75rem;\n color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n margin-top: calc(${theme.vars.spacing.unit} / 2);\n `;\n\n const emptyState: string = css`\n padding: ${theme.vars.spacing.unit};\n text-align: center;\n color: ${theme.vars.colors.text.secondary};\n font-style: italic;\n font-size: 0.75rem;\n `;\n\n const readOnlyPair: string = css`\n display: flex;\n align-items: center;\n gap: calc(${theme.vars.spacing.unit} / 2);\n padding: calc(${theme.vars.spacing.unit} / 4) 0;\n min-height: 20px;\n `;\n\n const readOnlyKey: string = css`\n font-size: 0.75rem;\n font-weight: 500;\n color: ${theme.vars.colors.text.secondary};\n min-width: 80px;\n flex-shrink: 0;\n `;\n\n const readOnlyValue: string = css`\n font-size: 0.75rem;\n color: ${theme.vars.colors.text.primary};\n word-break: break-word;\n flex: 1;\n `;\n\n const counterText: string = css`\n font-size: 0.75rem;\n color: ${theme.vars.colors.text.secondary};\n margin-top: calc(${theme.vars.spacing.unit} / 2);\n `;\n\n return {\n addButton,\n addRow,\n container,\n counterText,\n emptyState,\n helperText,\n label,\n pairInput,\n pairRow,\n pairsList,\n readOnlyKey,\n readOnlyPair,\n readOnlyValue,\n removeButton,\n requiredIndicator,\n };\n }, [theme, colorScheme, disabled, readOnly, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,aACJ,OACA,aACA,UACA,UACA,aAEA,cAAc;CACZ,MAAMA,YAAoB,GAAG;;;qBAGZ,MAAM,KAAK,WAAW,WAAW;kBACpC,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,QAAgB,GAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,oBAA4B,GAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,YAAoB,GAAG;;;kBAGf,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,UAAkB,GAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,MAAM;;;;;4BAKzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;CAIvD,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;yBAE5B,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,eAAuB,GAAG;;;;;;eAMrB,MAAM,KAAK,OAAO,KAAK,UAAU;;uBAEzB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,OAAO,MAAM;iBAC1C,MAAM,KAAK,OAAO,MAAM,KAAK;;;;;;;CAQ1C,MAAMC,YAAoB,GAAG;;;;;;eAMlB,MAAM,KAAK,OAAO,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;;;;;CAQpD,MAAMC,aAAqB,GAAG;;eAEnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;yBACjE,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,aAAqB,GAAG;iBACjB,MAAM,KAAK,QAAQ,KAAK;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,eAAuB,GAAG;;;kBAGlB,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;;CAI1C,MAAMC,cAAsB,GAAG;;;eAGpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,gBAAwB,GAAG;;eAEtB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;AAW1C,QAAO;EACL;EACA;EACA;EACA,aAV0B,GAAG;;eAEpB,MAAM,KAAK,OAAO,KAAK,UAAU;yBACvB,MAAM,KAAK,QAAQ,KAAK;;EAQ3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAS,CAAC;AAExD,mCAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAC,MAAM,OAAO,CAAC;AAKzB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAmDvB,CAAC;AAEF,eAAe,IAAI,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 Logo_styles_default from "./Logo.styles.js";
|
|
3
4
|
import { bem, resolveLogoUri, 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/Logo/Logo.tsx
|
|
8
8
|
/**
|