@thunderid/react 1.11.3 → 1.13.0

package/dist/components/primitives/OtpField/OtpField.styles.js

@@ -11,17 +11,18 @@ import { useMemo } from "react";
 * @param length - Number of OTP input fields
 * @returns Object containing CSS class names for component styling
 */
-const useStyles = (theme, colorScheme, disabled, hasError, length) => useMemo(() => {
+const useStyles = (theme, colorScheme, disabled, hasError, length, separatorAfter) => useMemo(() => {
+	const isGrouped = separatorAfter !== void 0 && separatorAfter > 0 && separatorAfter < length;
 	const inputContainer = css`
       display: flex;
-      gap: ${theme.vars.spacing.unit};
-      justify-content: space-between;
+      gap: calc(${theme.vars.spacing.unit} * ${isGrouped ? .5 : 1});
+      justify-content: ${isGrouped ? "center" : "space-between"};
       align-items: center;
-      flex-wrap: wrap;
+      flex-wrap: ${isGrouped ? "nowrap" : "wrap"};
     `;
 	const input = css`
-      width: calc(${theme.vars.spacing.unit} * 6);
-      height: calc(${theme.vars.spacing.unit} * 6);
+      width: calc(${theme.vars.spacing.unit} * ${isGrouped ? 3.5 : 6});
+      height: calc(${theme.vars.spacing.unit} * ${isGrouped ? 4.5 : 6});
       text-align: center;
       font-size: ${theme.vars.typography.fontSizes.xl};
       font-family: ${theme.vars.typography.fontFamily};
@@ -66,14 +67,21 @@ const useStyles = (theme, colorScheme, disabled, hasError, length) => useMemo(()
       cursor: not-allowed;
       opacity: 0.6;
     `,
-		inputError
+		inputError,
+		separator: css`
+      flex: none;
+      color: ${theme.vars.colors.text.secondary};
+      font-size: ${theme.vars.typography.fontSizes.xl};
+      font-weight: 500;
+    `
 	};
 }, [
 	theme,
 	colorScheme,
 	disabled,
 	hasError,
-	length
+	length,
+	separatorAfter
 ]);
 var OtpField_styles_default = useStyles;
 

package/dist/components/primitives/OtpField/OtpField.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"OtpField.styles.js","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../src/components/primitives/OtpField/OtpField.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 OtpFieldType = 'text' | 'number' | 'password';\n\n/**\n * Creates styles for the OtpField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param length - Number of OTP input fields\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  length: number,\n): Record<string, string> =>\n  useMemo(() => {\n    const inputContainer: string = css`\n      display: flex;\n      gap: ${theme.vars.spacing.unit};\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n    `;\n\n    const input: string = css`\n      width: calc(${theme.vars.spacing.unit} * 6);\n      height: calc(${theme.vars.spacing.unit} * 6);\n      text-align: center;\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 500;\n      border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n    `;\n\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      cursor: not-allowed;\n      opacity: 0.6;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n    };\n  }, [theme, colorScheme, disabled, hasError, length]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,UACA,UACA,WAEA,cAAc;CACZ,MAAMA,iBAAyB,GAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,GAAG;oBACT,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;;mBAE1B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;iBAStG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}
+{"version":3,"file":"OtpField.styles.js","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../src/components/primitives/OtpField/OtpField.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 OtpFieldType = 'text' | 'number' | 'password';\n\n/**\n * Creates styles for the OtpField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param length - Number of OTP input fields\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  length: number,\n  separatorAfter?: number,\n): Record<string, string> =>\n  useMemo(() => {\n    const isGrouped = separatorAfter !== undefined && separatorAfter > 0 && separatorAfter < length;\n    const inputContainer: string = css`\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * ${isGrouped ? 0.5 : 1});\n      justify-content: ${isGrouped ? 'center' : 'space-between'};\n      align-items: center;\n      flex-wrap: ${isGrouped ? 'nowrap' : 'wrap'};\n    `;\n\n    const input: string = css`\n      width: calc(${theme.vars.spacing.unit} * ${isGrouped ? 3.5 : 6});\n      height: calc(${theme.vars.spacing.unit} * ${isGrouped ? 4.5 : 6});\n      text-align: center;\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 500;\n      border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n    `;\n\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      cursor: not-allowed;\n      opacity: 0.6;\n    `;\n\n    const separator: string = css`\n      flex: none;\n      color: ${theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-weight: 500;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n      separator,\n    };\n  }, [theme, colorScheme, disabled, hasError, length, separatorAfter]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,UACA,UACA,QACA,mBAEA,cAAc;CACZ,MAAM,YAAY,mBAAmB,UAAa,iBAAiB,KAAK,iBAAiB;CACzF,MAAMA,iBAAyB,GAAG;;kBAEpB,MAAM,KAAK,QAAQ,KAAK,KAAK,YAAY,KAAM,EAAE;yBAC1C,YAAY,WAAW,gBAAgB;;mBAE7C,YAAY,WAAW,OAAO;;CAG7C,MAAMC,QAAgB,GAAG;oBACT,MAAM,KAAK,QAAQ,KAAK,KAAK,YAAY,MAAM,EAAE;qBAChD,MAAM,KAAK,QAAQ,KAAK,KAAK,YAAY,MAAM,EAAE;;mBAEnD,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;iBAStG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAiBzD,QAAO;EACL;EACA;EACA,eAhB4B,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAgB1D;EACA,WAZwB,GAAG;;eAElB,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;EAUjD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAQ;CAAe,CAAC;AAEtE,8BAAe"}

package/dist/index.js

@@ -82,8 +82,8 @@ import MicrosoftButton_default from "./components/auth/buttons/MicrosoftButton.j
 import SignInWithEthereumButton_default from "./components/auth/buttons/SignInWithEthereumButton.js";
 import BaseSignIn_default from "./components/auth/SignIn/BaseSignIn.js";
 import BaseDeviceGrant_default from "./components/auth/DeviceGrant/BaseDeviceGrant.js";
-import DeviceGrant_default from "./components/auth/DeviceGrant/DeviceGrant.js";
 import { useOAuthCallback } from "./hooks/auth/useOAuthCallback.js";
+import DeviceGrant_default from "./components/auth/DeviceGrant/DeviceGrant.js";
 import SignIn_default from "./components/auth/SignIn/SignIn.js";
 import Logo_default from "./components/primitives/Logo/Logo.js";
 import BaseSignUp_default from "./components/auth/SignUp/BaseSignUp.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thunderid/react",
-  "version": "1.11.3",
+  "version": "1.13.0",
   "description": "React SDK for ThunderID",
   "keywords": [
     "thunderid",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@emotion/css": "11.13.5",
     "@floating-ui/react": "0.27.12",
-    "@thunderid/browser": "^1.9.3",
+    "@thunderid/browser": "^1.10.0",
     "dompurify": "3.4.17",
     "tslib": "2.8.1"
   },