@thunderid/react 1.5.0 → 1.6.0

package/dist/components/auth/flow/ConsentCheckboxList.styles.js

@@ -0,0 +1,44 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/auth/flow/ConsentCheckboxList.styles.ts
+const useStyles = (theme, colorScheme) => useMemo(() => ({
+	bullet: css`
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: #9e9e9e;
+        flex-shrink: 0;
+      `,
+	divider: css`
+        opacity: 0.5;
+        margin: 0.25rem 0;
+      `,
+	labelContainer: css`
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+      `,
+	listContainer: css`
+        display: flex;
+        flex-direction: column;
+      `,
+	listItem: css`
+        padding: 0 0.25rem;
+        margin-bottom: 4px;
+      `,
+	listRow: css`
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.125rem 0;
+      `,
+	typography: css`
+        margin: 0;
+      `
+}), [theme, colorScheme]);
+var ConsentCheckboxList_styles_default = useStyles;
+
+//#endregion
+export { ConsentCheckboxList_styles_default as default };
+//# sourceMappingURL=ConsentCheckboxList.styles.js.map

package/dist/components/auth/flow/ConsentCheckboxList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentCheckboxList.styles.js","names":[],"sources":["../../../../src/components/auth/flow/ConsentCheckboxList.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(\n    () => ({\n      bullet: css`\n        width: 5px;\n        height: 5px;\n        border-radius: 50%;\n        background-color: #9e9e9e;\n        flex-shrink: 0;\n      `,\n      divider: css`\n        opacity: 0.5;\n        margin: 0.25rem 0;\n      `,\n      labelContainer: css`\n        display: flex;\n        align-items: center;\n        gap: 0.4rem;\n      `,\n      listContainer: css`\n        display: flex;\n        flex-direction: column;\n      `,\n      listItem: css`\n        padding: 0 0.25rem;\n        margin-bottom: 4px;\n      `,\n      listRow: css`\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.125rem 0;\n      `,\n      typography: css`\n        margin: 0;\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;AAOA,MAAM,aAAa,OAAc,gBAC/B,eACS;CACL,QAAQ,GAAG;;;;;;;CAOX,SAAS,GAAG;;;;CAIZ,gBAAgB,GAAG;;;;;CAKnB,eAAe,GAAG;;;;CAIlB,UAAU,GAAG;;;;CAIb,SAAS,GAAG;;;;;;CAMZ,YAAY,GAAG;;;CAGhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,yCAAe"}

package/dist/components/auth/flow/FieldFactory.d.ts

@@ -0,0 +1,102 @@
+import { FieldType } from '@thunderid/browser';
+import { FC, ReactElement } from 'react';
+import { SelectOption } from '../../primitives/Select/Select';
+/**
+ * Interface for field configuration.
+ */
+export interface FieldConfig {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     * HTML id to apply to the rendered field.
+     */
+    id?: string;
+    /**
+     * Display name for the field.
+     */
+    label: string;
+    /**
+     * Number of characters for OTP fields.
+     */
+    length?: number;
+    /**
+     * The name of the field.
+     */
+    name: string;
+    /**
+     * Whether an OTP field accepts digits only. Defaults to true.
+     */
+    numericOnly?: boolean;
+    /**
+     * Callback function when the field loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * Callback function when the field value changes.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Additional options for multi-valued fields.
+     */
+    options?: SelectOption[];
+    /**
+     * Placeholder text for the field.
+     */
+    placeholder?: string;
+    /**
+     * Whether the field is required.
+     */
+    required: boolean;
+    /**
+     * Whether the field has been touched/interacted with by the user.
+     */
+    touched?: boolean;
+    /**
+     * The field type.
+     */
+    type: FieldType;
+    /**
+     * Current value of the field.
+     */
+    value: string;
+}
+/**
+ * Utility function to validate field values based on type
+ */
+export declare const validateFieldValue: (value: string, type: FieldType, required?: boolean, touched?: boolean) => string | null;
+/**
+ * Factory function to create form fields based on field type.
+ *
+ * @param config - The field configuration
+ * @returns The appropriate React component for the field type
+ *
+ * @example
+ * ```tsx
+ * const field = createField({
+ *   param: 'username',
+ *   type: FieldType.Text,
+ *   label: 'Username',
+ *   confidential: false,
+ *   required: true,
+ *   value: '',
+ *   onChange: (value) => console.log(value)
+ * });
+ * ```
+ */
+export declare const createField: (config: FieldConfig) => ReactElement;
+/**
+ * React component wrapper for the field factory.
+ */
+export declare const FieldFactory: FC<FieldConfig>;
+export default FieldFactory;
+//# sourceMappingURL=FieldFactory.d.ts.map

package/dist/components/auth/flow/FieldFactory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldFactory.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/FieldFactory.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAc,EAAE,EAAE,YAAY,EAAC,MAAM,OAAO,CAAC;AAKpD,OAAe,EAAC,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAGpE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,MAAM,SAAS,EACf,kBAAgB,EAChB,iBAAe,KACd,MAAM,GAAG,IAsBX,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,WAAW,KAAG,YAqIjD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,WAAW,CAA4D,CAAC;AAEtG,eAAe,YAAY,CAAC"}

package/dist/components/auth/flow/FieldFactory.js

@@ -0,0 +1,141 @@
+import Checkbox_default from "../../primitives/Checkbox/Checkbox.js";
+import DatePicker_default from "../../primitives/DatePicker/DatePicker.js";
+import OtpField_default from "../../primitives/OtpField/OtpField.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import PasswordField_default from "../../primitives/PasswordField/PasswordField.js";
+import Select_default from "../../primitives/Select/Select.js";
+import { FieldType } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/flow/FieldFactory.tsx
+/**
+* Utility function to validate field values based on type
+*/
+const validateFieldValue = (value, type, required = false, touched = false) => {
+	if (required && touched && (!value || value.trim() === "")) return "This field is required";
+	if (!value || value.trim() === "") return null;
+	switch (type) {
+		case FieldType.Number: {
+			const numValue = parseInt(value, 10);
+			if (Number.isNaN(numValue)) return "Please enter a valid number";
+			break;
+		}
+		default: break;
+	}
+	return null;
+};
+/**
+* Factory function to create form fields based on field type.
+*
+* @param config - The field configuration
+* @returns The appropriate React component for the field type
+*
+* @example
+* ```tsx
+* const field = createField({
+*   param: 'username',
+*   type: FieldType.Text,
+*   label: 'Username',
+*   confidential: false,
+*   required: true,
+*   value: '',
+*   onChange: (value) => console.log(value)
+* });
+* ```
+*/
+const createField = (config) => {
+	const { name, type, label, required, value, onChange, onBlur, disabled = false, error, className, id, options = [], touched = false, placeholder, length, numericOnly = true } = config;
+	const validationError = error || validateFieldValue(value, type, required, touched);
+	const commonProps = {
+		className,
+		"data-testid": `thunderid-signin-${name}`,
+		disabled,
+		error: validationError,
+		id,
+		label,
+		name,
+		onBlur,
+		placeholder,
+		required,
+		value
+	};
+	switch (type) {
+		case FieldType.Password: return /* @__PURE__ */ jsx(PasswordField_default, {
+			...commonProps,
+			onChange
+		});
+		case FieldType.Text: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "text",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "off"
+		});
+		case FieldType.Email: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "email",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "email"
+		});
+		case FieldType.Tel: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "tel",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "tel"
+		});
+		case FieldType.Date: return /* @__PURE__ */ jsx(DatePicker_default, {
+			...commonProps,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case FieldType.Checkbox: {
+			const isChecked = value === "true" || value === true;
+			return /* @__PURE__ */ jsx(Checkbox_default, {
+				...commonProps,
+				checked: isChecked,
+				onChange: (e) => onChange(e.target.checked.toString())
+			});
+		}
+		case FieldType.Otp: return /* @__PURE__ */ jsx(OtpField_default, {
+			...commonProps,
+			length,
+			type: numericOnly ? "number" : "text",
+			uppercase: !numericOnly,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case FieldType.Number: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "number",
+			onChange: (e) => onChange(e.target.value),
+			helperText: "Enter a numeric value"
+		});
+		case FieldType.Select: {
+			const fieldOptions = options.length > 0 ? options : [];
+			if (fieldOptions.length > 0) return /* @__PURE__ */ jsx(Select_default, {
+				...commonProps,
+				options: fieldOptions,
+				onChange: (e) => onChange(e.target.value),
+				helperText: "Select from available options"
+			});
+			return /* @__PURE__ */ jsx(TextField_default, {
+				...commonProps,
+				type: "text",
+				onChange: (e) => onChange(e.target.value),
+				helperText: "Enter multiple values separated by commas (e.g., value1, value2, value3)",
+				placeholder: "value1, value2, value3"
+			});
+		}
+		default: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "text",
+			onChange: (e) => onChange(e.target.value),
+			helperText: "Unknown field type, treating as text"
+		});
+	}
+};
+/**
+* React component wrapper for the field factory.
+*/
+const FieldFactory = (props) => createField(props);
+
+//#endregion
+export { FieldFactory, createField, validateFieldValue };
+//# sourceMappingURL=FieldFactory.js.map

package/dist/components/auth/flow/FieldFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldFactory.js","names":["numValue: number","validationError: string | null","commonProps: Record<string, any>","PasswordField","TextField","DatePicker","isChecked: boolean","Checkbox","OtpField","fieldOptions: SelectOption[]","Select","FieldFactory: FC<FieldConfig>"],"sources":["../../../../src/components/auth/flow/FieldFactory.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FieldType} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement} from 'react';\nimport Checkbox from '../../primitives/Checkbox/Checkbox';\nimport DatePicker from '../../primitives/DatePicker/DatePicker';\nimport OtpField from '../../primitives/OtpField/OtpField';\nimport PasswordField from '../../primitives/PasswordField/PasswordField';\nimport Select, {SelectOption} from '../../primitives/Select/Select';\nimport TextField from '../../primitives/TextField/TextField';\n\n/**\n * Interface for field configuration.\n */\nexport interface FieldConfig {\n  /**\n   * Additional CSS class name.\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display.\n   */\n  error?: string;\n  /**\n   * HTML id to apply to the rendered field.\n   */\n  id?: string;\n  /**\n   * Display name for the field.\n   */\n  label: string;\n  /**\n   * Number of characters for OTP fields.\n   */\n  length?: number;\n  /**\n   * The name of the field.\n   */\n  name: string;\n  /**\n   * Whether an OTP field accepts digits only. Defaults to true.\n   */\n  numericOnly?: boolean;\n  /**\n   * Callback function when the field loses focus.\n   */\n  onBlur?: () => void;\n  /**\n   * Callback function when the field value changes.\n   */\n  onChange: (value: string) => void;\n  /**\n   * Additional options for multi-valued fields.\n   */\n  options?: SelectOption[];\n  /**\n   * Placeholder text for the field.\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required.\n   */\n  required: boolean;\n  /**\n   * Whether the field has been touched/interacted with by the user.\n   */\n  touched?: boolean;\n  /**\n   * The field type.\n   */\n  type: FieldType;\n  /**\n   * Current value of the field.\n   */\n  value: string;\n}\n\n/**\n * Utility function to validate field values based on type\n */\nexport const validateFieldValue = (\n  value: string,\n  type: FieldType,\n  required = false,\n  touched = false,\n): string | null => {\n  if (required && touched && (!value || value.trim() === '')) {\n    return 'This field is required';\n  }\n\n  if (!value || value.trim() === '') {\n    return null;\n  }\n\n  switch (type) {\n    case FieldType.Number: {\n      const numValue: number = parseInt(value, 10);\n      if (Number.isNaN(numValue)) {\n        return 'Please enter a valid number';\n      }\n      break;\n    }\n    default:\n      break;\n  }\n\n  return null;\n};\n\n/**\n * Factory function to create form fields based on field type.\n *\n * @param config - The field configuration\n * @returns The appropriate React component for the field type\n *\n * @example\n * ```tsx\n * const field = createField({\n *   param: 'username',\n *   type: FieldType.Text,\n *   label: 'Username',\n *   confidential: false,\n *   required: true,\n *   value: '',\n *   onChange: (value) => console.log(value)\n * });\n * ```\n */\nexport const createField = (config: FieldConfig): ReactElement => {\n  const {\n    name,\n    type,\n    label,\n    required,\n    value,\n    onChange,\n    onBlur,\n    disabled = false,\n    error,\n    className,\n    id,\n    options = [],\n    touched = false,\n    placeholder,\n    length,\n    numericOnly = true,\n  } = config;\n\n  const validationError: string | null = error || validateFieldValue(value, type, required, touched);\n\n  const commonProps: Record<string, any> = {\n    className,\n    'data-testid': `thunderid-signin-${name}`,\n    disabled,\n    error: validationError,\n    id,\n    label,\n    name,\n    onBlur,\n    placeholder,\n    required,\n    value,\n  };\n\n  switch (type) {\n    case FieldType.Password:\n      return <PasswordField {...commonProps} onChange={onChange} />;\n    case FieldType.Text:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"off\"\n        />\n      );\n    case FieldType.Email:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"email\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"email\"\n        />\n      );\n    case FieldType.Tel:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"tel\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"tel\"\n        />\n      );\n    case FieldType.Date:\n      return (\n        <DatePicker {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n      );\n    case FieldType.Checkbox: {\n      const isChecked: boolean = value === 'true' || (value as any) === true;\n      return (\n        <Checkbox\n          {...commonProps}\n          checked={isChecked}\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.checked.toString())}\n        />\n      );\n    }\n    case FieldType.Otp:\n      return (\n        <OtpField\n          {...commonProps}\n          length={length}\n          type={numericOnly ? 'number' : 'text'}\n          uppercase={!numericOnly}\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n        />\n      );\n    case FieldType.Number:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"number\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Enter a numeric value\"\n        />\n      );\n    case FieldType.Select: {\n      const fieldOptions: SelectOption[] = options.length > 0 ? options : [];\n\n      if (fieldOptions.length > 0) {\n        return (\n          <Select\n            {...commonProps}\n            options={fieldOptions}\n            onChange={(e: ChangeEvent<HTMLSelectElement>): void => onChange(e.target.value)}\n            helperText=\"Select from available options\"\n          />\n        );\n      }\n\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Enter multiple values separated by commas (e.g., value1, value2, value3)\"\n          placeholder=\"value1, value2, value3\"\n        />\n      );\n    }\n    default:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Unknown field type, treating as text\"\n        />\n      );\n  }\n};\n\n/**\n * React component wrapper for the field factory.\n */\nexport const FieldFactory: FC<FieldConfig> = (props: FieldConfig): ReactElement => createField(props);\n\nexport default FieldFactory;\n"],"mappings":";;;;;;;;;;;;;AAqFA,MAAa,sBACX,OACA,MACA,WAAW,OACX,UAAU,UACQ;AAClB,KAAI,YAAY,YAAY,CAAC,SAAS,MAAM,MAAM,KAAK,IACrD,QAAO;AAGT,KAAI,CAAC,SAAS,MAAM,MAAM,KAAK,GAC7B,QAAO;AAGT,SAAQ,MAAR;EACE,KAAK,UAAU,QAAQ;GACrB,MAAMA,WAAmB,SAAS,OAAO,GAAG;AAC5C,OAAI,OAAO,MAAM,SAAS,CACxB,QAAO;AAET;;EAEF,QACE;;AAGJ,QAAO;;;;;;;;;;;;;;;;;;;;;AAsBT,MAAa,eAAe,WAAsC;CAChE,MAAM,EACJ,MACA,MACA,OACA,UACA,OACA,UACA,QACA,WAAW,OACX,OACA,WACA,IACA,UAAU,EAAE,EACZ,UAAU,OACV,aACA,QACA,cAAc,SACZ;CAEJ,MAAMC,kBAAiC,SAAS,mBAAmB,OAAO,MAAM,UAAU,QAAQ;CAElG,MAAMC,cAAmC;EACvC;EACA,eAAe,oBAAoB;EACnC;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,SAAQ,MAAR;EACE,KAAK,UAAU,SACb,QAAO,oBAACC;GAAc,GAAI;GAAuB;IAAY;EAC/D,KAAK,UAAU,KACb,QACE,oBAACC;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,MACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,IACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,KACb,QACE,oBAACC;GAAW,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEnH,KAAK,UAAU,UAAU;GACvB,MAAMC,YAAqB,UAAU,UAAW,UAAkB;AAClE,UACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA2C,SAAS,EAAE,OAAO,QAAQ,UAAU,CAAC;KAC3F;;EAGN,KAAK,UAAU,IACb,QACE,oBAACC;GACC,GAAI;GACI;GACR,MAAM,cAAc,WAAW;GAC/B,WAAW,CAAC;GACZ,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E;EAEN,KAAK,UAAU,OACb,QACE,oBAACJ;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;EAEN,KAAK,UAAU,QAAQ;GACrB,MAAMK,eAA+B,QAAQ,SAAS,IAAI,UAAU,EAAE;AAEtE,OAAI,aAAa,SAAS,EACxB,QACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA4C,SAAS,EAAE,OAAO,MAAM;IAC/E,YAAW;KACX;AAIN,UACE,oBAACN;IACC,GAAI;IACJ,MAAK;IACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E,YAAW;IACX,aAAY;KACZ;;EAGN,QACE,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;;;;;;AAQV,MAAaO,gBAAiC,UAAqC,YAAY,MAAM"}

package/dist/components/auth/flow/FlowTimer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowTimer.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/FlowTimer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AAGzD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,yEAAyE;IACzE,aAAa,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,SAAS,CAAC;IACtD,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAkDjC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/auth/flow/FlowTimer.js

@@ -0,0 +1,49 @@
+import Typography_default from "../../primitives/Typography/Typography.js";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/flow/FlowTimer.tsx
+/**
+* Flow countdown timer component.
+*
+* Displays a countdown from the given number of seconds. When the time expires,
+* shows "Timed out". Returns null if expiresIn <= 0.
+*/
+const FlowTimer = ({ expiresIn = 0, textTemplate = "Time remaining: {time}", children }) => {
+	const [remaining, setRemaining] = useState(expiresIn > 0 ? expiresIn : 0);
+	useEffect(() => {
+		if (expiresIn <= 0) return;
+		setRemaining(expiresIn);
+		const interval = setInterval(() => {
+			setRemaining((prev) => {
+				if (prev <= 1) {
+					clearInterval(interval);
+					return 0;
+				}
+				return prev - 1;
+			});
+		}, 1e3);
+		return () => clearInterval(interval);
+	}, [expiresIn]);
+	if (expiresIn <= 0) return null;
+	const formatTime = (seconds) => {
+		if (seconds <= 0) return "Timed out";
+		return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
+	};
+	const isExpired = remaining <= 0;
+	const formattedTime = formatTime(remaining);
+	if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children({
+		formattedTime,
+		isExpired,
+		remaining
+	}) });
+	return /* @__PURE__ */ jsx(Typography_default, {
+		variant: "body2",
+		children: isExpired ? "Timed out" : textTemplate.replace("{time}", formattedTime)
+	});
+};
+var FlowTimer_default = FlowTimer;
+
+//#endregion
+export { FlowTimer_default as default };
+//# sourceMappingURL=FlowTimer.js.map

package/dist/components/auth/flow/FlowTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowTimer.js","names":["FlowTimer: FC<FlowTimerProps>","interval: NodeJS.Timeout","isExpired: boolean","formattedTime: string","Typography"],"sources":["../../../../src/components/auth/flow/FlowTimer.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, ReactNode, useEffect, useState} from 'react';\nimport Typography from '../../primitives/Typography/Typography';\n\n/**\n * Render props exposed by FlowTimer when using the render-prop pattern.\n */\nexport interface FlowTimerRenderProps {\n  /** Human-readable formatted time string (e.g. \"2:30\" or \"Timed out\"). */\n  formattedTime: string;\n  /** Whether the timer has expired. */\n  isExpired: boolean;\n  /** Remaining time in seconds. 0 when expired. */\n  remaining: number;\n}\n\n/**\n * Props for the FlowTimer component.\n */\nexport interface FlowTimerProps {\n  /**\n   * Render-props callback. When provided, the default countdown display is replaced\n   * with whatever JSX the callback returns.\n   *\n   * @example\n   * ```tsx\n   * <FlowTimer expiresIn={300}>\n   *   {({ remaining, isExpired, formattedTime }) => (\n   *     <span style={{ color: isExpired ? 'red' : 'inherit' }}>\n   *       {isExpired ? 'Session expired' : `Time left: ${formattedTime}`}\n   *     </span>\n   *   )}\n   * </FlowTimer>\n   * ```\n   */\n  children?: (props: FlowTimerRenderProps) => ReactNode;\n  /** Initial number of seconds for the countdown. 0 or negative means no timer. */\n  expiresIn?: number;\n  /** Text template for the countdown display. Use {time} as a placeholder. */\n  textTemplate?: string;\n}\n\n/**\n * Flow countdown timer component.\n *\n * Displays a countdown from the given number of seconds. When the time expires,\n * shows \"Timed out\". Returns null if expiresIn <= 0.\n */\nconst FlowTimer: FC<FlowTimerProps> = ({\n  expiresIn = 0,\n  textTemplate = 'Time remaining: {time}',\n  children,\n}: FlowTimerProps) => {\n  const [remaining, setRemaining] = useState<number>(expiresIn > 0 ? expiresIn : 0);\n\n  useEffect(() => {\n    if (expiresIn <= 0) {\n      return undefined;\n    }\n\n    setRemaining(expiresIn);\n\n    const interval: NodeJS.Timeout = setInterval(() => {\n      setRemaining((prev: number) => {\n        if (prev <= 1) {\n          clearInterval(interval);\n          return 0;\n        }\n        return prev - 1;\n      });\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [expiresIn]);\n\n  if (expiresIn <= 0) {\n    return null;\n  }\n\n  const formatTime = (seconds: number): string => {\n    if (seconds <= 0) {\n      return 'Timed out';\n    }\n    const m: number = Math.floor(seconds / 60);\n    const s: number = seconds % 60;\n    return `${m}:${s.toString().padStart(2, '0')}`;\n  };\n\n  const isExpired: boolean = remaining <= 0;\n  const formattedTime: string = formatTime(remaining);\n\n  if (children) {\n    return <>{children({formattedTime, isExpired, remaining})}</>;\n  }\n\n  const displayText: string = isExpired ? 'Timed out' : textTemplate.replace('{time}', formattedTime);\n\n  return <Typography variant=\"body2\">{displayText}</Typography>;\n};\n\nexport default FlowTimer;\n"],"mappings":";;;;;;;;;;;AAkDA,MAAMA,aAAiC,EACrC,YAAY,GACZ,eAAe,0BACf,eACoB;CACpB,MAAM,CAAC,WAAW,gBAAgB,SAAiB,YAAY,IAAI,YAAY,EAAE;AAEjF,iBAAgB;AACd,MAAI,aAAa,EACf;AAGF,eAAa,UAAU;EAEvB,MAAMC,WAA2B,kBAAkB;AACjD,iBAAc,SAAiB;AAC7B,QAAI,QAAQ,GAAG;AACb,mBAAc,SAAS;AACvB,YAAO;;AAET,WAAO,OAAO;KACd;KACD,IAAK;AAER,eAAa,cAAc,SAAS;IACnC,CAAC,UAAU,CAAC;AAEf,KAAI,aAAa,EACf,QAAO;CAGT,MAAM,cAAc,YAA4B;AAC9C,MAAI,WAAW,EACb,QAAO;AAIT,SAAO,GAFW,KAAK,MAAM,UAAU,GAAG,CAE9B,IADM,UAAU,IACX,UAAU,CAAC,SAAS,GAAG,IAAI;;CAG9C,MAAMC,YAAqB,aAAa;CACxC,MAAMC,gBAAwB,WAAW,UAAU;AAEnD,KAAI,SACF,QAAO,4CAAG,SAAS;EAAC;EAAe;EAAW;EAAU,CAAC,GAAI;AAK/D,QAAO,oBAACC;EAAW,SAAQ;YAFC,YAAY,cAAc,aAAa,QAAQ,UAAU,cAAc;GAEtC;;AAG/D,wBAAe"}

package/dist/components/auth/flow/ImageComponent.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { AdapterProps } from '../../../models/adapters';
+/**
+ * Image component for sign-up forms.
+ */
+declare const ImageComponent: FC<AdapterProps>;
+export default ImageComponent;
+//# sourceMappingURL=ImageComponent.d.ts.map

package/dist/components/auth/flow/ImageComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/flow/ImageComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAiB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAKtD;;GAEG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,CAyFpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/auth/flow/ImageComponent.js

@@ -0,0 +1,79 @@
+import { css } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import { resolveLogoUri } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/flow/ImageComponent.tsx
+const DEFAULT_EMOJI_CONTAINER_HEIGHT = "4em";
+/**
+* Image component for sign-up forms.
+*/
+const ImageComponent = ({ component }) => {
+	const { theme } = useTheme_default();
+	const centerClass = css({ textAlign: "center" });
+	const emojiGlyphClass = css({
+		fontSize: "100cqmin",
+		lineHeight: 1
+	});
+	const config = component.config || {};
+	const src = config["src"] || "";
+	const alt = config["alt"] || config["label"] || "Image";
+	const width = config["width"] || "100%";
+	const height = config["height"] || "auto";
+	const variant = component.variant?.toLowerCase() || "image_block";
+	const imageStyle = {
+		borderRadius: theme.vars.borderRadius.small,
+		display: "block",
+		margin: variant === "image_block" ? "1rem auto" : "0"
+	};
+	const imageClass = css(imageStyle);
+	if (!src) return null;
+	const resolvedIcon = resolveLogoUri(src, alt);
+	if (resolvedIcon.kind === "emoji") {
+		const toCSSLength = (value) => /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+		const cssWidth = toCSSLength(width);
+		const cssHeight = toCSSLength(height);
+		const isConcrete = (v) => v !== "auto" && !v.endsWith("%");
+		let containerHeight;
+		if (isConcrete(cssHeight)) containerHeight = cssHeight;
+		else if (isConcrete(cssWidth)) containerHeight = cssWidth;
+		else containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;
+		return /* @__PURE__ */ jsx("div", {
+			className: centerClass,
+			children: /* @__PURE__ */ jsx("span", {
+				className: css({
+					...imageStyle,
+					containerType: "size",
+					display: "inline-grid",
+					height: containerHeight,
+					placeItems: "center",
+					width: cssWidth
+				}),
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-label": alt,
+					role: "img",
+					className: emojiGlyphClass,
+					children: resolvedIcon.glyph
+				})
+			})
+		}, component.id);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: centerClass,
+		children: /* @__PURE__ */ jsx("img", {
+			src: resolvedIcon.imgSrc,
+			alt,
+			height,
+			width,
+			className: imageClass,
+			onError: (e) => {
+				e.currentTarget.style.display = "none";
+			}
+		})
+	}, component.id);
+};
+var ImageComponent_default = ImageComponent;
+
+//#endregion
+export { ImageComponent_default as default };
+//# sourceMappingURL=ImageComponent.js.map

package/dist/components/auth/flow/ImageComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageComponent.js","names":["ImageComponent: FC<AdapterProps>","useTheme","centerClass: string","emojiGlyphClass: string","config: Record<string, unknown>","src: string","alt: string","width: string","height: string","variant: string","imageClass: string","resolvedIcon: ResolvedLogo","cssWidth: string","cssHeight: string","containerHeight: string"],"sources":["../../../../src/components/auth/flow/ImageComponent.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, SyntheticEvent} from 'react';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {AdapterProps} from '../../../models/adapters';\nimport {css} from '../../../styles/emotion';\n\nconst DEFAULT_EMOJI_CONTAINER_HEIGHT = '4em';\n\n/**\n * Image component for sign-up forms.\n */\nconst ImageComponent: FC<AdapterProps> = ({component}: AdapterProps) => {\n  const {theme} = useTheme();\n  // Computed per render (not at module scope): a CSP nonce configured on <ThunderIDProvider>\n  // isn't known until the provider renders, and Emotion needs it applied before any style\n  // insertion happens. These are static, so Emotion's own cache dedupes the repeat calls to a\n  // no-op after the first render — this isn't a real per-render cost.\n  const centerClass: string = css({textAlign: 'center'});\n  const emojiGlyphClass: string = css({fontSize: '100cqmin', lineHeight: 1});\n  const config: Record<string, unknown> = component.config || {};\n  const src: string = (config['src'] as string) || '';\n  const alt: string = (config['alt'] as string) || (config['label'] as string) || 'Image';\n  const width: string = (config['width'] as string) || '100%';\n  const height: string = (config['height'] as string) || 'auto';\n  const variant: string = component.variant?.toLowerCase() || 'image_block';\n\n  const imageStyle = {\n    borderRadius: theme.vars.borderRadius.small,\n    display: 'block',\n    margin: variant === 'image_block' ? '1rem auto' : '0',\n  };\n\n  const imageClass: string = css(imageStyle);\n\n  if (!src) {\n    return null;\n  }\n\n  const resolvedIcon: ResolvedLogo = resolveLogoUri(src, alt);\n\n  if (resolvedIcon.kind === 'emoji') {\n    // Bare numbers (e.g. \"48\") are valid for <img> width/height attributes but\n    // are unit-less and ignored as CSS properties — normalize them to px.\n    const toCSSLength = (value: string): string => (/^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value);\n    const cssWidth: string = toCSSLength(width);\n    const cssHeight: string = toCSSLength(height);\n\n    // container-type: size needs a concrete block dimension — percentage and\n    // 'auto' values both collapse to 0 when the parent has no defined height.\n    // Priority: explicit height → explicit width (square) → fallback constant.\n    const isConcrete = (v: string): boolean => v !== 'auto' && !v.endsWith('%');\n    let containerHeight: string;\n    if (isConcrete(cssHeight)) {\n      containerHeight = cssHeight;\n    } else if (isConcrete(cssWidth)) {\n      containerHeight = cssWidth;\n    } else {\n      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;\n    }\n\n    const emojiContainerClass: string = css({\n      ...imageStyle,\n      containerType: 'size',\n      display: 'inline-grid',\n      height: containerHeight,\n      placeItems: 'center',\n      width: cssWidth,\n    });\n\n    return (\n      <div key={component.id} className={centerClass}>\n        {/*\n         * container-type: size lets the inner span use cqmin (= min(cqw, cqh))\n         * so the emoji font-size tracks the rendered container dimensions\n         * rather than the parent's font-size.\n         */}\n        <span className={emojiContainerClass}>\n          <span aria-label={alt} role=\"img\" className={emojiGlyphClass}>\n            {resolvedIcon.glyph}\n          </span>\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div key={component.id} className={centerClass}>\n      <img\n        src={resolvedIcon.imgSrc}\n        alt={alt}\n        height={height}\n        width={width}\n        className={imageClass}\n        onError={(e: SyntheticEvent<HTMLImageElement>): void => {\n          // Hide broken images\n          e.currentTarget.style.display = 'none';\n        }}\n      />\n    </div>\n  );\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;;AASA,MAAM,iCAAiC;;;;AAKvC,MAAMA,kBAAoC,EAAC,gBAA6B;CACtE,MAAM,EAAC,UAASC,kBAAU;CAK1B,MAAMC,cAAsB,IAAI,EAAC,WAAW,UAAS,CAAC;CACtD,MAAMC,kBAA0B,IAAI;EAAC,UAAU;EAAY,YAAY;EAAE,CAAC;CAC1E,MAAMC,SAAkC,UAAU,UAAU,EAAE;CAC9D,MAAMC,MAAe,OAAO,UAAqB;CACjD,MAAMC,MAAe,OAAO,UAAsB,OAAO,YAAuB;CAChF,MAAMC,QAAiB,OAAO,YAAuB;CACrD,MAAMC,SAAkB,OAAO,aAAwB;CACvD,MAAMC,UAAkB,UAAU,SAAS,aAAa,IAAI;CAE5D,MAAM,aAAa;EACjB,cAAc,MAAM,KAAK,aAAa;EACtC,SAAS;EACT,QAAQ,YAAY,gBAAgB,cAAc;EACnD;CAED,MAAMC,aAAqB,IAAI,WAAW;AAE1C,KAAI,CAAC,IACH,QAAO;CAGT,MAAMC,eAA6B,eAAe,KAAK,IAAI;AAE3D,KAAI,aAAa,SAAS,SAAS;EAGjC,MAAM,eAAe,UAA2B,gBAAgB,KAAK,MAAM,GAAG,GAAG,MAAM,MAAM;EAC7F,MAAMC,WAAmB,YAAY,MAAM;EAC3C,MAAMC,YAAoB,YAAY,OAAO;EAK7C,MAAM,cAAc,MAAuB,MAAM,UAAU,CAAC,EAAE,SAAS,IAAI;EAC3E,IAAIC;AACJ,MAAI,WAAW,UAAU,CACvB,mBAAkB;WACT,WAAW,SAAS,CAC7B,mBAAkB;MAElB,mBAAkB;AAYpB,SACE,oBAAC;GAAuB,WAAW;aAMjC,oBAAC;IAAK,WAhB0B,IAAI;KACtC,GAAG;KACH,eAAe;KACf,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,OAAO;KACR,CAAC;cAUI,oBAAC;KAAK,cAAY;KAAK,MAAK;KAAM,WAAW;eAC1C,aAAa;MACT;KACF;KAVC,UAAU,GAWd;;AAIV,QACE,oBAAC;EAAuB,WAAW;YACjC,oBAAC;GACC,KAAK,aAAa;GACb;GACG;GACD;GACP,WAAW;GACX,UAAU,MAA8C;AAEtD,MAAE,cAAc,MAAM,UAAU;;IAElC;IAXM,UAAU,GAYd;;AAIV,6BAAe"}

package/dist/components/auth/guards/Loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/guards/Loading.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGvD;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAQhD,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/components/auth/guards/Loading.js

@@ -0,0 +1,33 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/guards/Loading.tsx
+/**
+* A component that only renders its children when the ThunderID is loading.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { Loading } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <Loading fallback={<p>Finished Loading...</p>}>
+*       <p>Loading...</p>
+*     </Loading>
+*   );
+* }
+* ```
+*/
+const Loading = ({ children, fallback = null }) => {
+	const { isLoading } = useThunderID_default();
+	if (!isLoading) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+Loading.displayName = "Loading";
+var Loading_default = Loading;
+
+//#endregion
+export { Loading_default as default };
+//# sourceMappingURL=Loading.js.map

package/dist/components/auth/guards/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","names":["Loading: FC<PropsWithChildren<LoadingProps>>","useThunderID"],"sources":["../../../../src/components/auth/guards/Loading.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the Loading component.\n */\nexport interface LoadingProps {\n  /**\n   * Content to show when the user is not signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the ThunderID is loading.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { Loading } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <Loading fallback={<p>Finished Loading...</p>}>\n *       <p>Loading...</p>\n *     </Loading>\n *   );\n * }\n * ```\n */\nconst Loading: FC<PropsWithChildren<LoadingProps>> = ({children, fallback = null}: PropsWithChildren<LoadingProps>) => {\n  const {isLoading} = useThunderID();\n\n  if (!isLoading) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children}</>;\n};\n\nLoading.displayName = 'Loading';\n\nexport default Loading;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,WAAgD,EAAC,UAAU,WAAW,WAA2C;CACrH,MAAM,EAAC,cAAaC,sBAAc;AAElC,KAAI,CAAC,UACH,QAAO,0CAAG,WAAY;AAGxB,QAAO,gCAAG,WAAY;;AAGxB,QAAQ,cAAc;AAEtB,sBAAe"}

package/dist/components/auth/guards/SignedIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedIn.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/guards/SignedIn.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGvD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAWlD,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/components/auth/guards/SignedIn.js

@@ -0,0 +1,33 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/guards/SignedIn.tsx
+/**
+* A component that only renders its children when the user is signed in.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { SignedIn } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <SignedIn fallback={<p>Please sign in to continue</p>}>
+*       <p>Welcome! You are signed in.</p>
+*     </SignedIn>
+*   );
+* }
+* ```
+*/
+const SignedIn = ({ children, fallback = null }) => {
+	const { isSignedIn } = useThunderID_default();
+	if (!isSignedIn) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+SignedIn.displayName = "SignedIn";
+var SignedIn_default = SignedIn;
+
+//#endregion
+export { SignedIn_default as default };
+//# sourceMappingURL=SignedIn.js.map

package/dist/components/auth/guards/SignedIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedIn.js","names":["SignedIn: FC<PropsWithChildren<SignedInProps>>","useThunderID"],"sources":["../../../../src/components/auth/guards/SignedIn.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedIn component.\n */\nexport interface SignedInProps {\n  /**\n   * Content to show when the user is not signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed in.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedIn } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedIn fallback={<p>Please sign in to continue</p>}>\n *       <p>Welcome! You are signed in.</p>\n *     </SignedIn>\n *   );\n * }\n * ```\n */\nconst SignedIn: FC<PropsWithChildren<SignedInProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedInProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children}</>;\n};\n\nSignedIn.displayName = 'SignedIn';\n\nexport default SignedIn;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,YAAkD,EACtD,UACA,WAAW,WAC2B;CACtC,MAAM,EAAC,eAAcC,sBAAc;AAEnC,KAAI,CAAC,WACH,QAAO,0CAAG,WAAY;AAGxB,QAAO,gCAAG,WAAY;;AAGxB,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/components/auth/guards/SignedOut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedOut.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/guards/SignedOut.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGvD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAWpD,CAAC;AAIF,eAAe,SAAS,CAAC"}

package/dist/components/auth/guards/SignedOut.js

@@ -0,0 +1,33 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/guards/SignedOut.tsx
+/**
+* A component that only renders its children when the user is signed out.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { SignedOut } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <SignedOut fallback={<p>You are already signed in</p>}>
+*       <p>Please sign in to continue</p>
+*     </SignedOut>
+*   );
+* }
+* ```
+*/
+const SignedOut = ({ children, fallback = null }) => {
+	const { isSignedIn } = useThunderID_default();
+	if (!isSignedIn) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+};
+SignedOut.displayName = "SignedOut";
+var SignedOut_default = SignedOut;
+
+//#endregion
+export { SignedOut_default as default };
+//# sourceMappingURL=SignedOut.js.map

package/dist/components/auth/guards/SignedOut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedOut.js","names":["SignedOut: FC<PropsWithChildren<SignedOutProps>>","useThunderID"],"sources":["../../../../src/components/auth/guards/SignedOut.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedOut component.\n */\nexport interface SignedOutProps {\n  /**\n   * Content to show when the user is signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed out.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedOut } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedOut fallback={<p>You are already signed in</p>}>\n *       <p>Please sign in to continue</p>\n *     </SignedOut>\n *   );\n * }\n * ```\n */\nconst SignedOut: FC<PropsWithChildren<SignedOutProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedOutProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{children}</>;\n  }\n\n  return <>{fallback}</>;\n};\n\nSignedOut.displayName = 'SignedOut';\n\nexport default SignedOut;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAMA,aAAoD,EACxD,UACA,WAAW,WAC4B;CACvC,MAAM,EAAC,eAAcC,sBAAc;AAEnC,KAAI,CAAC,WACH,QAAO,gCAAG,WAAY;AAGxB,QAAO,0CAAG,WAAY;;AAGxB,UAAU,cAAc;AAExB,wBAAe"}