@ory/elements-react 0.0.0-pr.7af5f16 → 0.0.0-pr.96c07cce

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/README.md +253 -4
  3. package/dist/index.d.mts +58 -25
  4. package/dist/index.d.ts +58 -25
  5. package/dist/index.js +443 -319
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +444 -320
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/theme/default/index.css +12 -6
  10. package/dist/theme/default/index.css.map +1 -1
  11. package/dist/theme/default/index.js +3400 -3230
  12. package/dist/theme/default/index.js.map +1 -1
  13. package/dist/theme/default/index.mjs +3415 -3242
  14. package/dist/theme/default/index.mjs.map +1 -1
  15. package/package.json +6 -5
  16. package/tsconfig.json +2 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,77 @@
1
+ ## 1.0.0-rc.2 (2025-04-30)
2
+
3
+ ### 🚀 Features
4
+
5
+ - method translation for totp, code, webauthn ([#500](https://github.com/ory/elements/pull/500))
6
+ - add all missing stories ([#480](https://github.com/ory/elements/pull/480))
7
+ - preview deployments for example apps ([#488](https://github.com/ory/elements/pull/488))
8
+ - add back button to settings page ([#464](https://github.com/ory/elements/pull/464))
9
+
10
+ ### 🩹 Fixes
11
+
12
+ - ⚠️ align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
13
+ - sort captcha before submit button ([#507](https://github.com/ory/elements/pull/507))
14
+ - cors credentials in default client ([#508](https://github.com/ory/elements/pull/508))
15
+ - back button should return to application ([#465](https://github.com/ory/elements/pull/465))
16
+ - adjust design of generic OIDC provider ([#492](https://github.com/ory/elements/pull/492))
17
+ - use proper id for react element arrays ([#495](https://github.com/ory/elements/pull/495))
18
+ - add test id to header messages ([#489](https://github.com/ory/elements/pull/489))
19
+ - re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
20
+ - resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
21
+ - add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
22
+ - resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
23
+
24
+ ### ⚠️ Breaking Changes
25
+
26
+ - ⚠️ align configuration types to Ory Network APIs ([#423](https://github.com/ory/elements/pull/423))
27
+
28
+ ### ❤️ Thank You
29
+
30
+ - hackerman @aeneasr
31
+ - Jonas Hungershausen
32
+
33
+ ## 1.0.0-rc.1 (2025-04-21)
34
+
35
+ ### 🩹 Fixes
36
+
37
+ - re-add missing error message when no methods provided ([#460](https://github.com/ory/elements/pull/460))
38
+ - resend not working for registration ([#468](https://github.com/ory/elements/pull/468))
39
+ - add missing color class to registration footer ([#473](https://github.com/ory/elements/pull/473))
40
+ - resend not working for registration ([#467](https://github.com/ory/elements/pull/467))
41
+
42
+ ### ❤️ Thank You
43
+
44
+ - hackerman @aeneasr
45
+ - Jonas Hungershausen
46
+
47
+ ## 1.0.0-rc.0 (2025-04-17)
48
+
49
+ ### 🚀 Features
50
+
51
+ - add missing translations for de, es and fr ([#456](https://github.com/ory/elements/pull/456))
52
+
53
+ ### 🩹 Fixes
54
+
55
+ - correctly set input field value ([#447](https://github.com/ory/elements/pull/447))
56
+ - add missing settings padding ([#446](https://github.com/ory/elements/pull/446))
57
+ - always omit conflicting keys ([#444](https://github.com/ory/elements/pull/444))
58
+
59
+ ### ❤️ Thank You
60
+
61
+ - hackerman @aeneasr
62
+ - Jonas Hungershausen
63
+
64
+ ## 1.0.0-next.46 (2025-04-16)
65
+
66
+ ### 🩹 Fixes
67
+
68
+ - missing hidden field regression ([#439](https://github.com/ory/elements/pull/439))
69
+ - use correct testid ([#438](https://github.com/ory/elements/pull/438))
70
+
71
+ ### ❤️ Thank You
72
+
73
+ - hackerman @aeneasr
74
+
1
75
  ## 1.0.0-next.45 (2025-04-15)
2
76
 
3
77
  ### 🩹 Fixes
package/README.md CHANGED
@@ -202,16 +202,243 @@ import "@ory/elements-react/theme/styles.css"
202
202
 
203
203
  ### Theming
204
204
 
205
- Most styling can be overwritten, by providing your own custom CSS variables:
205
+ The styling for specific elements or groups of elements in the UI can be
206
+ overwritten by providing your own custom CSS variables. For more complex
207
+ customizations see the [Component System](#component-system).
206
208
 
207
209
  ```css
208
210
  :root {
209
- /* To override the text color of the primary buttons */
210
- --button-primary-fg-default: #fffeee;
211
+ /* primitives */
212
+ /* Overriding these may affect more variables "down stream" */
213
+ --ui-100: #f1f5f9;
214
+ --ui-200: #e2e8f0;
215
+ --ui-300: #cbd5e1;
216
+ --ui-400: #94a3b8;
217
+ --ui-50: #f8fafc;
218
+ --ui-500: #64748b;
219
+ --ui-600: #475569;
220
+ --ui-700: #334155;
221
+ --ui-800: #1e293b;
222
+ --ui-900: #0f172a;
223
+ --ui-950: #020617;
224
+ --ui-black: #000000;
225
+ --ui-danger: #dc2626;
226
+ --ui-success: #22c55e;
227
+ --ui-transparent: #ffffff00;
228
+ --ui-warning: #eab308;
229
+ --ui-white: #ffffff;
230
+ /* primitives end */
231
+
232
+ /* brand */
233
+ --brand-100: var(--ui-100);
234
+ --brand-200: var(--ui-300);
235
+ --brand-300: var(--ui-500);
236
+ --brand-400: var(--ui-700);
237
+ --brand-50: var(--ui-50);
238
+ --brand-500: var(--ui-900);
239
+ --brand-600: var(--ui-white);
240
+ --brand-700: var(--ui-200);
241
+ --brand-800: var(--ui-400);
242
+ --brand-900: var(--ui-600);
243
+ --brand-950: var(--ui-800);
244
+ /* brand end */
245
+
246
+ /* interface */
247
+ /* These variables affect "groups" of variables, and are re-used in the more specific variables below */
248
+ --interface-background-brand-primary: var(--brand-500);
249
+ --interface-background-brand-primary-hover: var(--brand-400);
250
+ --interface-background-brand-secondary: var(--brand-50);
251
+ --interface-background-brand-secondary-hover: var(--brand-100);
252
+ --interface-background-default-inverted: var(--ui-900);
253
+ --interface-background-default-inverted-hover: var(--ui-800);
254
+ --interface-background-default-none: var(--ui-transparent);
255
+ --interface-background-default-primary: var(--ui-white);
256
+ --interface-background-default-primary-hover: var(--ui-50);
257
+ --interface-background-default-secondary: var(--ui-50);
258
+ --interface-background-default-secondary-hover: var(--ui-200);
259
+ --interface-background-default-tertiary: var(--ui-200);
260
+ --interface-background-default-tertiary-hover: var(--ui-300);
261
+ --interface-background-disabled-disabled: var(--ui-200);
262
+ --interface-background-validation-danger: var(--ui-danger);
263
+ --interface-background-validation-success: var(--ui-success);
264
+ --interface-background-validation-warning: var(--ui-warning);
265
+ --interface-border-brand-brand: var(--brand-500);
266
+ --interface-border-default-inverted: var(--ui-700);
267
+ --interface-border-default-none: var(--ui-transparent);
268
+ --interface-border-default-primary: var(--ui-300);
269
+ --interface-border-disabled-disabled: var(--ui-300);
270
+ --interface-border-validation-danger: var(--ui-danger);
271
+ --interface-border-validation-success: var(--ui-success);
272
+ --interface-border-validation-warning: var(--ui-warning);
273
+ --interface-foreground-brand-on-primary: var(--brand-50);
274
+ --interface-foreground-brand-on-secondary: var(--brand-950);
275
+ --interface-foreground-brand-primary: var(--brand-500);
276
+ --interface-foreground-brand-secondary: var(--brand-50);
277
+ --interface-foreground-default-inverted: var(--ui-white);
278
+ --interface-foreground-default-primary: var(--ui-900);
279
+ --interface-foreground-default-secondary: var(--ui-700);
280
+ --interface-foreground-default-tertiary: var(--ui-500);
281
+ --interface-foreground-disabled-disabled: var(--ui-300);
282
+ --interface-foreground-disabled-on-disabled: var(--ui-400);
283
+ --interface-foreground-validation-danger: var(--ui-danger);
284
+ --interface-foreground-validation-success: var(--ui-success);
285
+ --interface-foreground-validation-warning: var(--ui-warning);
286
+ /* interface end */
287
+
288
+ /* Specific elements */
289
+ --button-identifier-background-default: var(
290
+ --interface-background-brand-secondary
291
+ );
292
+ --button-identifier-background-hover: var(
293
+ --interface-background-brand-secondary-hover
294
+ );
295
+ --button-identifier-border-border-default: var(
296
+ --interface-border-brand-brand
297
+ );
298
+ --button-identifier-border-border-hover: var(--interface-border-brand-brand);
299
+ --button-identifier-foreground-default: var(
300
+ --interface-foreground-brand-on-secondary
301
+ );
302
+ --button-identifier-foreground-hover: var(
303
+ --interface-foreground-brand-on-secondary
304
+ );
305
+ --button-link-brand-brand: var(--interface-foreground-brand-primary);
306
+ --button-link-brand-brand-hover: var(--interface-foreground-default-primary);
307
+ --button-link-default-primary: var(--interface-foreground-default-primary);
308
+ --button-link-default-primary-hover: var(
309
+ --interface-foreground-brand-primary
310
+ );
311
+ --button-link-default-secondary: var(
312
+ --interface-foreground-default-secondary
313
+ );
314
+ --button-link-default-secondary-hover: var(
315
+ --interface-foreground-default-tertiary
316
+ );
317
+ --button-link-disabled-disabled: var(
318
+ --interface-foreground-disabled-disabled
319
+ );
320
+ --button-primary-background-default: var(
321
+ --interface-background-brand-primary
322
+ );
323
+ --button-primary-background-disabled: var(
324
+ --interface-background-disabled-disabled
325
+ );
326
+ --button-primary-background-hover: var(
327
+ --interface-background-brand-primary-hover
328
+ );
329
+ --button-primary-border-default: var(--interface-border-default-none);
330
+ --button-primary-border-disabled: var(--interface-border-disabled-disabled);
331
+ --button-primary-border-hover: var(--interface-border-default-none);
332
+ --button-primary-foreground-default: var(
333
+ --interface-foreground-brand-on-primary
334
+ );
335
+ --button-primary-foreground-disabled: var(
336
+ --interface-foreground-disabled-on-disabled
337
+ );
338
+ --button-primary-foreground-hover: var(
339
+ --interface-foreground-brand-on-primary
340
+ );
341
+ --button-secondary-background-default: var(
342
+ --interface-background-default-primary
343
+ );
344
+ --button-secondary-background-disabled: var(
345
+ --interface-background-disabled-disabled
346
+ );
347
+ --button-secondary-background-hover: var(
348
+ --interface-background-default-primary-hover
349
+ );
350
+ --button-secondary-border-default: var(--interface-border-default-primary);
351
+ --button-secondary-border-disabled: var(--interface-border-disabled-disabled);
352
+ --button-secondary-border-hover: var(--interface-border-default-primary);
353
+ --button-secondary-foreground-default: var(
354
+ --interface-foreground-default-primary
355
+ );
356
+ --button-secondary-foreground-disabled: var(
357
+ --interface-foreground-disabled-on-disabled
358
+ );
359
+ --button-secondary-foreground-hover: var(
360
+ --interface-foreground-default-secondary
361
+ );
362
+ --button-social-background-default: var(
363
+ --interface-background-default-primary
364
+ );
365
+ --button-social-background-disabled: var(
366
+ --interface-background-disabled-disabled
367
+ );
368
+ --button-social-background-generic-provider: var(
369
+ --interface-background-default-inverted
370
+ );
371
+ --button-social-background-hover: var(
372
+ --interface-background-default-primary-hover
373
+ );
374
+ --button-social-border-default: var(--interface-border-default-primary);
375
+ --button-social-border-disabled: var(--interface-border-disabled-disabled);
376
+ --button-social-border-generic-provider: var(--interface-border-default-none);
377
+ --button-social-border-hover: var(--interface-border-default-primary);
378
+ --button-social-foreground-default: var(
379
+ --interface-foreground-default-primary
380
+ );
381
+ --button-social-foreground-disabled: var(
382
+ --interface-foreground-disabled-on-disabled
383
+ );
384
+ --button-social-foreground-generic-provider: var(
385
+ --interface-foreground-default-inverted
386
+ );
387
+ --button-social-foreground-hover: var(
388
+ --interface-foreground-default-secondary
389
+ );
390
+ --checkbox-background-checked: var(--interface-background-brand-primary);
391
+ --checkbox-background-default: var(--interface-background-default-secondary);
392
+ --checkbox-border-checkbox-border-checked: var(
393
+ --interface-border-brand-brand
394
+ );
395
+ --checkbox-border-checkbox-border-default: var(
396
+ --interface-border-default-primary
397
+ );
398
+ --checkbox-foreground-checked: var(--interface-foreground-brand-on-primary);
399
+ --checkbox-foreground-default: var(--interface-foreground-default-primary);
400
+ --form-background-default: var(--interface-background-default-primary);
401
+ --form-border-default: var(--interface-border-default-primary);
402
+ --input-background-default: var(--interface-background-default-primary);
403
+ --input-background-disabled: var(--interface-background-disabled-disabled);
404
+ --input-background-hover: var(--interface-background-default-primary-hover);
405
+ --input-border-default: var(--interface-border-default-primary);
406
+ --input-border-disabled: var(--interface-border-disabled-disabled);
407
+ --input-border-focus: var(--interface-border-brand-brand);
408
+ --input-border-hover: var(--interface-border-default-primary);
409
+ --input-foreground-disabled: var(--interface-foreground-disabled-on-disabled);
410
+ --input-foreground-primary: var(--interface-foreground-default-primary);
411
+ --input-foreground-secondary: var(--interface-foreground-default-secondary);
412
+ --input-foreground-tertiary: var(--interface-foreground-default-tertiary);
413
+ --ory-background-default: var(--interface-background-default-primary);
414
+ --ory-border-default: var(--interface-border-default-primary);
415
+ --ory-foreground-default: var(--interface-foreground-default-primary);
416
+ --radio-background-checked: var(--interface-background-brand-primary);
417
+ --radio-background-default: var(--interface-background-default-secondary);
418
+ --radio-border-checked: var(--interface-border-brand-brand);
419
+ --radio-border-default: var(--interface-border-default-primary);
420
+ --radio-foreground-checked: var(--interface-foreground-brand-on-primary);
421
+ --radio-foreground-default: var(--interface-foreground-default-primary);
422
+ --toggle-background-checked: var(--interface-background-brand-primary);
423
+ --toggle-background-default: var(--interface-background-default-secondary);
424
+ --toggle-border-checked: var(--interface-border-default-none);
425
+ --toggle-border-default: var(--interface-border-default-primary);
426
+ --toggle-foreground-checked: var(--interface-foreground-brand-on-primary);
427
+ --toggle-foreground-default: var(--interface-foreground-brand-primary);
428
+ /* Specific elements end */
429
+
430
+ /* border radius */
431
+ --border-radius-buttons: 0.25rem;
432
+ --border-radius-forms: 0.25rem;
433
+ --border-radius-general: 0.25rem;
434
+ --border-radius-branding: 0.5rem;
435
+ --border-radius-cards: 0.75rem;
436
+ --border-radius-identifier: 62.4375rem;
437
+ /* border radius end*/
211
438
  }
212
439
  ```
213
440
 
214
- ### Component overrides
441
+ ### Component system
215
442
 
216
443
  Many components in Ory Elements can be overriden with your own implementation.
217
444
  Ory Elements also provides useful hooks that be used inside of your custom
@@ -249,6 +476,28 @@ export default async function RegistrationPage({ searchParams }: PageProps) {
249
476
  }
250
477
  ```
251
478
 
479
+ ### internationalization (i18n)
480
+
481
+ `@ory/elements-react` comes with default translations for many languages.
482
+ Additionally, it provides a way to override the default messages, through the
483
+ `locale` property of the `OryClientConfiguration`.
484
+
485
+ ```ts
486
+ const config = {
487
+ intl: {
488
+ locale: "en", // Or any of the other supported locales.
489
+ customTranslations: {
490
+ en: {
491
+ "identities.messages.1040006": "This is a custom translation",
492
+ },
493
+ },
494
+ },
495
+ }
496
+ ```
497
+
498
+ For a full list of messages, see
499
+ [en.json](https://github.com/ory/elements/blob/main/packages/elements-react/src/locales/en.json).
500
+
252
501
  ## Development
253
502
 
254
503
  See [DEVELOPMENT.md](./DEVELOPMENT.md).
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
1
+ import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, AccountExperienceConfiguration, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
2
2
  import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
3
3
  import * as class_variance_authority_types from 'class-variance-authority/types';
4
4
  import { VariantProps } from 'class-variance-authority';
@@ -394,33 +394,60 @@ type IntlContextProps = {
394
394
  };
395
395
 
396
396
  type IntlConfig = IntlContextProps;
397
+ /**
398
+ * The configuration for Ory Elements.
399
+ *
400
+ * This configuration is used to customize the behavior and appearance of Ory Elements.
401
+ *
402
+ * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
403
+ *
404
+ * You can also set the name of the application, the logo URL, and the SDK configuration.
405
+ * By default, the name and logo are displayed in the card's header.
406
+ */
397
407
  type OryClientConfiguration = {
398
- /**
399
- * The name of the application the user is logging in to.
400
- */
401
- name: string;
402
408
  /**
403
409
  * An optional logo URL to display in the UI instead of the name.
410
+ * @deprecated Use `project.logo_light_url` instead.
404
411
  */
405
412
  logoUrl?: string;
406
- stylesheet?: string;
407
- favicon?: string;
413
+ /**
414
+ * The SDK configuration.
415
+ * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
416
+ */
408
417
  sdk: {
409
418
  url: string;
410
419
  options?: Partial<ConfigurationParameters>;
411
420
  };
412
- project: {
413
- registration_enabled: boolean;
414
- verification_enabled: boolean;
415
- recovery_enabled: boolean;
416
- recovery_ui_url: string;
417
- registration_ui_url: string;
418
- verification_ui_url: string;
419
- login_ui_url: string;
420
- default_redirect_url?: string;
421
- };
421
+ /**
422
+ * The internationalization configuration.
423
+ * This configuration is used to set the locale and any additional options used for the i18n library.
424
+ * The locale is used to determine the language of the UI.
425
+ * The default locale is "en".
426
+ */
422
427
  intl?: IntlConfig;
423
- };
428
+ } & ({
429
+ /**
430
+ * The name of the application the user is logging in to.
431
+ * @deprecated Use `project.name` instead.
432
+ */
433
+ name: string;
434
+ /**
435
+ * The configuration for the project.
436
+ */
437
+ project: Omit<AccountExperienceConfiguration, "name"> & {
438
+ name?: string;
439
+ };
440
+ } | {
441
+ /**
442
+ * The name of the application the user is logging in to.
443
+ * @deprecated Use `project.name` instead.
444
+ */
445
+ name?: string;
446
+ /**
447
+ * The configuration for the project.
448
+ */
449
+ project: AccountExperienceConfiguration;
450
+ });
424
451
 
425
452
  /**
426
453
  * A generic flow container, containing a flowType, the flow itself and the config object
@@ -486,6 +513,7 @@ type ConsentFlow = {
486
513
  ui: UiContainer;
487
514
  consent_request: OAuth2ConsentRequest;
488
515
  session: Session;
516
+ return_to?: string;
489
517
  };
490
518
  type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
491
519
  /**
@@ -561,18 +589,23 @@ type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlow
561
589
  * @param message - the UiText message to generate a test id for
562
590
  * @returns a unique, stable test id for the message
563
591
  */
564
- declare function messageTestId(message: UiText): {
592
+ declare function messageTestId(message: {
593
+ id: number | string;
594
+ }): {
565
595
  "data-testid": string;
566
596
  };
567
597
 
568
- type FormState = {
569
- current: "provide_identifier";
570
- } | {
598
+ type FormStateSelectMethod = {
571
599
  current: "select_method";
572
- } | {
600
+ };
601
+ type FormStateProvideIdentifier = {
602
+ current: "provide_identifier";
603
+ };
604
+ type FormStateMethodActive = {
573
605
  current: "method_active";
574
606
  method: UiNodeGroupEnum;
575
- } | {
607
+ };
608
+ type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
576
609
  current: "success_screen";
577
610
  } | {
578
611
  current: "settings";
@@ -619,4 +652,4 @@ type OryProviderProps = {
619
652
  } & OryFlowContainer & PropsWithChildren;
620
653
  declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
621
654
 
622
- export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
655
+ export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
1
+ import { UiNodeInputAttributes, UiNode, UiNodeAnchorAttributes, UiNodeTextAttributes, UiNodeImageAttributes, UiNodeGroupEnum, UiText, ConfigurationParameters, AccountExperienceConfiguration, FlowType, LoginFlow, RegistrationFlow, RecoveryFlow, VerificationFlow, SettingsFlow, UiContainer, OAuth2ConsentRequest, Session, FlowError, UpdateLoginFlowBody, UpdateRegistrationFlowBody, UpdateVerificationFlowBody, UpdateRecoveryFlowBody, UpdateSettingsFlowBody, OnRedirectHandler } from '@ory/client-fetch';
2
2
  import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, PropsWithChildren, DetailedHTMLProps, HTMLAttributes, ComponentType, Dispatch } from 'react';
3
3
  import * as class_variance_authority_types from 'class-variance-authority/types';
4
4
  import { VariantProps } from 'class-variance-authority';
@@ -394,33 +394,60 @@ type IntlContextProps = {
394
394
  };
395
395
 
396
396
  type IntlConfig = IntlContextProps;
397
+ /**
398
+ * The configuration for Ory Elements.
399
+ *
400
+ * This configuration is used to customize the behavior and appearance of Ory Elements.
401
+ *
402
+ * By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
403
+ *
404
+ * You can also set the name of the application, the logo URL, and the SDK configuration.
405
+ * By default, the name and logo are displayed in the card's header.
406
+ */
397
407
  type OryClientConfiguration = {
398
- /**
399
- * The name of the application the user is logging in to.
400
- */
401
- name: string;
402
408
  /**
403
409
  * An optional logo URL to display in the UI instead of the name.
410
+ * @deprecated Use `project.logo_light_url` instead.
404
411
  */
405
412
  logoUrl?: string;
406
- stylesheet?: string;
407
- favicon?: string;
413
+ /**
414
+ * The SDK configuration.
415
+ * This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK client.
416
+ */
408
417
  sdk: {
409
418
  url: string;
410
419
  options?: Partial<ConfigurationParameters>;
411
420
  };
412
- project: {
413
- registration_enabled: boolean;
414
- verification_enabled: boolean;
415
- recovery_enabled: boolean;
416
- recovery_ui_url: string;
417
- registration_ui_url: string;
418
- verification_ui_url: string;
419
- login_ui_url: string;
420
- default_redirect_url?: string;
421
- };
421
+ /**
422
+ * The internationalization configuration.
423
+ * This configuration is used to set the locale and any additional options used for the i18n library.
424
+ * The locale is used to determine the language of the UI.
425
+ * The default locale is "en".
426
+ */
422
427
  intl?: IntlConfig;
423
- };
428
+ } & ({
429
+ /**
430
+ * The name of the application the user is logging in to.
431
+ * @deprecated Use `project.name` instead.
432
+ */
433
+ name: string;
434
+ /**
435
+ * The configuration for the project.
436
+ */
437
+ project: Omit<AccountExperienceConfiguration, "name"> & {
438
+ name?: string;
439
+ };
440
+ } | {
441
+ /**
442
+ * The name of the application the user is logging in to.
443
+ * @deprecated Use `project.name` instead.
444
+ */
445
+ name?: string;
446
+ /**
447
+ * The configuration for the project.
448
+ */
449
+ project: AccountExperienceConfiguration;
450
+ });
424
451
 
425
452
  /**
426
453
  * A generic flow container, containing a flowType, the flow itself and the config object
@@ -486,6 +513,7 @@ type ConsentFlow = {
486
513
  ui: UiContainer;
487
514
  consent_request: OAuth2ConsentRequest;
488
515
  session: Session;
516
+ return_to?: string;
489
517
  };
490
518
  type ConsentFlowContainer = OryFlow<FlowType.OAuth2Consent, ConsentFlow>;
491
519
  /**
@@ -561,18 +589,23 @@ type OnSubmitHandlerProps<T extends UpdateLoginFlowBody | UpdateRegistrationFlow
561
589
  * @param message - the UiText message to generate a test id for
562
590
  * @returns a unique, stable test id for the message
563
591
  */
564
- declare function messageTestId(message: UiText): {
592
+ declare function messageTestId(message: {
593
+ id: number | string;
594
+ }): {
565
595
  "data-testid": string;
566
596
  };
567
597
 
568
- type FormState = {
569
- current: "provide_identifier";
570
- } | {
598
+ type FormStateSelectMethod = {
571
599
  current: "select_method";
572
- } | {
600
+ };
601
+ type FormStateProvideIdentifier = {
602
+ current: "provide_identifier";
603
+ };
604
+ type FormStateMethodActive = {
573
605
  current: "method_active";
574
606
  method: UiNodeGroupEnum;
575
- } | {
607
+ };
608
+ type FormState = FormStateSelectMethod | FormStateProvideIdentifier | FormStateMethodActive | {
576
609
  current: "success_screen";
577
610
  } | {
578
611
  current: "settings";
@@ -619,4 +652,4 @@ type OryProviderProps = {
619
652
  } & OryFlowContainer & PropsWithChildren;
620
653
  declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
621
654
 
622
- export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
655
+ export { type ConsentFlow, type ConsentFlowContainer, type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormStateMethodActive, type FormStateProvideIdentifier, type FormStateSelectMethod, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, OryConsentCard, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeCaptchaProps, type OryNodeConsentScopeCheckboxProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };