@ory/elements-react 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/.eslintrc.js +49 -0
  2. package/README.md +23 -0
  3. package/dist/index.d.mts +1771 -0
  4. package/dist/index.d.ts +1771 -0
  5. package/dist/index.js +6942 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +6893 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/dist/theme/default/index.css +854 -0
  10. package/dist/theme/default/index.css.map +1 -0
  11. package/dist/theme/default/index.d.mts +187 -0
  12. package/dist/theme/default/index.d.ts +187 -0
  13. package/dist/theme/default/index.js +8007 -0
  14. package/dist/theme/default/index.js.map +1 -0
  15. package/dist/theme/default/index.mjs +8029 -0
  16. package/dist/theme/default/index.mjs.map +1 -0
  17. package/package.json +60 -0
  18. package/postcss.config.ts +6 -0
  19. package/tailwind.config.ts +51 -0
  20. package/tsconfig.json +24 -0
  21. package/variables-processed.json +193 -0
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "@ory/elements-react",
3
+ "version": "0.0.0",
4
+ "exports": {
5
+ ".": {
6
+ "types": "./dist/index.d.ts",
7
+ "import": "./dist/index.mjs",
8
+ "require": "./dist/index.js"
9
+ },
10
+ "./theme": {
11
+ "types": "./dist/theme/default/index.d.ts",
12
+ "import": "./dist/theme/default/index.mjs",
13
+ "require": "./dist/theme/default/index.js"
14
+ },
15
+ "./theme/styles.css": "./dist/theme/default/index.css"
16
+ },
17
+ "main": "./dist/index.js",
18
+ "module": "./dist/index.mjs",
19
+ "types": "./dist/index.d.ts",
20
+ "dependencies": {
21
+ "@ory/client-fetch": "1.15.0-next.0",
22
+ "clsx": "2.1.1",
23
+ "input-otp": "1.2.4",
24
+ "react-hook-form": "7.52.1",
25
+ "tailwind-merge": "2.4.0"
26
+ },
27
+ "peerDependencies": {
28
+ "react": "18.3.1",
29
+ "react-dom": "18.3.1"
30
+ },
31
+ "devDependencies": {
32
+ "esbuild-plugin-svgr": "2.1.0",
33
+ "eslint-plugin-react": "7.35.0",
34
+ "postcss": "8.4.40",
35
+ "tailwindcss": "3.4.7",
36
+ "tsup": "8.2.3"
37
+ },
38
+ "keywords": [
39
+ "ory",
40
+ "auth",
41
+ "react",
42
+ "passwordless",
43
+ "authentication"
44
+ ],
45
+ "repository": {
46
+ "type": "git",
47
+ "url": "git+ssh://git@github.com/ory/elements.git",
48
+ "directory": "packages/elements-react"
49
+ },
50
+ "bugs": {
51
+ "url": "https://github.com/ory/elements/issues"
52
+ },
53
+ "homepage": "https://github.com/ory/elements#readme",
54
+ "author": "Ory Corp",
55
+ "license": "Apache License 2.0",
56
+ "description": "Ory Elements React - a collection of React components for authentication UIs.",
57
+ "publishConfig": {
58
+ "access": "public"
59
+ }
60
+ }
package/postcss.config.ts ADDED
@@ -0,0 +1,6 @@
1
+ // Copyright © 2024 Ory Corp
2
+ // SPDX-License-Identifier: Apache-2.0
3
+
4
+ module.exports = {
5
+ plugins: [require("tailwindcss")(), require("autoprefixer")()],
6
+ }
package/tailwind.config.ts ADDED
@@ -0,0 +1,51 @@
1
+ // Copyright © 2024 Ory Corp
2
+ // SPDX-License-Identifier: Apache-2.0
3
+
4
+ import type { Config } from "tailwindcss"
5
+
6
+ import variables from "./variables-processed.json"
7
+
8
+ const config: Config = {
9
+ content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
10
+ theme: {
11
+ extend: {
12
+ keyframes: {
13
+ "caret-blink": {
14
+ "0%,70%,100%": { opacity: "1" },
15
+ "20%,50%": { opacity: "0" },
16
+ },
17
+ },
18
+ animation: {
19
+ "caret-blink": "caret-blink 1.25s ease-out infinite",
20
+ },
21
+ backgroundImage: {
22
+ "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
23
+ "gradient-conic":
24
+ "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
25
+ },
26
+ padding: {
27
+ "4.5": "1.125rem",
28
+ },
29
+ /* We need the default border radius as well in some cases. */
30
+ borderRadius: variables.borderRadius,
31
+ },
32
+ fontFamily: {
33
+ sans: ['"Inter var", sans-serif'],
34
+ },
35
+ colors: {
36
+ ...variables.colors.light,
37
+ },
38
+ backgroundColor: {
39
+ ...variables.colors.light,
40
+ },
41
+ borderColor: {
42
+ ...variables.colors.light,
43
+ },
44
+ fill: {
45
+ ...variables.colors.light,
46
+ },
47
+ },
48
+ plugins: [],
49
+ }
50
+
51
+ export default config
package/tsconfig.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2019",
4
+ "esModuleInterop": true,
5
+ "forceConsistentCasingInFileNames": true,
6
+ "isolatedModules": true,
7
+ "moduleResolution": "Bundler",
8
+ "module": "ESNext",
9
+ "preserveWatchOutput": true,
10
+ "skipLibCheck": true,
11
+ "strict": true,
12
+ "emitDeclarationOnly": true,
13
+ "declaration": true,
14
+ "declarationMap": true,
15
+ "outDir": "dist",
16
+ "resolveJsonModule": true,
17
+ "declarationDir": "dist/types",
18
+ "jsx": "react-jsx",
19
+ "lib": ["ES6", "DOM", "WebWorker"],
20
+ "rootDir": "src"
21
+ },
22
+ "exclude": ["node_modules"],
23
+ "include": ["src/**/*.ts", "src/**/*.tsx", "src/global.d.ts"]
24
+ }
package/variables-processed.json ADDED
@@ -0,0 +1,193 @@
1
+ {
2
+ "colors": {
3
+ "light": {
4
+ "accent": "var(--accent, #4f46e5)",
5
+ "bg-default": "var(--bg-default, #f8fafc)",
6
+ "branding-bg-default": "#4f46e5",
7
+ "branding-bg-hover": "#f8fafc",
8
+ "branding-border-hover": "#e2e8f0",
9
+ "branding-fg-default": "#ffffff",
10
+ "branding-fg-hover": "#0f172a",
11
+ "button-identifier-bg-default": "var(--button-identifier-bg-default, #ffffff)",
12
+ "button-identifier-bg-hover": "var(--button-identifier-bg-hover, #f8fafc)",
13
+ "button-identifier-border-default": "var(--button-identifier-border-default, #e2e8f0)",
14
+ "button-identifier-border-hover": "var(--button-identifier-border-hover, #e2e8f0)",
15
+ "button-identifier-fg-default": "var(--button-identifier-fg-default, #0f172a)",
16
+ "button-identifier-fg-subtle": "var(--button-identifier-fg-subtle, #334155)",
17
+ "button-primary-bg-default": "var(--button-primary-bg-default, #1e293b)",
18
+ "button-primary-bg-disabled": "var(--button-primary-bg-disabled, #64748b)",
19
+ "button-primary-bg-hover": "var(--button-primary-bg-hover, #0f172a)",
20
+ "button-primary-border-default": "var(--button-primary-border-default, #ffffff00)",
21
+ "button-primary-border-disabled": "var(--button-primary-border-disabled, #ffffff00)",
22
+ "button-primary-border-hover": "var(--button-primary-border-hover, #ffffff00)",
23
+ "button-primary-fg-default": "var(--button-primary-fg-default, #ffffff)",
24
+ "button-primary-fg-disabled": "var(--button-primary-fg-disabled, #94a3b8)",
25
+ "button-primary-fg-hover": "var(--button-primary-fg-hover, #ffffff)",
26
+ "button-secondary-bg-default": "var(--button-secondary-bg-default, #ffffff)",
27
+ "button-secondary-bg-disabled": "var(--button-secondary-bg-disabled, #f8fafc)",
28
+ "button-secondary-bg-hover": "var(--button-secondary-bg-hover, #f8fafc)",
29
+ "button-secondary-border-default": "var(--button-secondary-border-default, #e2e8f0)",
30
+ "button-secondary-border-disabled": "var(--button-secondary-border-disabled, #e2e8f0)",
31
+ "button-secondary-border-hover": "var(--button-secondary-border-hover, #e2e8f0)",
32
+ "button-secondary-fg-default": "var(--button-secondary-fg-default, #0f172a)",
33
+ "button-secondary-fg-disabled": "var(--button-secondary-fg-disabled, #94a3b8)",
34
+ "button-secondary-fg-hover": "var(--button-secondary-fg-hover, #334155)",
35
+ "button-social-bg-default": "var(--button-social-bg-default, #ffffff)",
36
+ "button-social-bg-disabled": "var(--button-social-bg-disabled, #f8fafc)",
37
+ "button-social-bg-hover": "var(--button-social-bg-hover, #f8fafc)",
38
+ "button-social-border-default": "var(--button-social-border-default, #e2e8f0)",
39
+ "button-social-border-disabled": "var(--button-social-border-disabled, #e2e8f0)",
40
+ "button-social-border-hover": "var(--button-social-border-hover, #e2e8f0)",
41
+ "button-social-fg-default": "var(--button-social-fg-default, #0f172a)",
42
+ "button-social-fg-disabled": "var(--button-social-fg-disabled, #94a3b8)",
43
+ "button-social-fg-hover": "var(--button-social-fg-hover, #334155)",
44
+ "dialog-bg-default": "var(--dialog-bg-default, #ffffff)",
45
+ "dialog-bg-subtle": "var(--dialog-bg-subtle, #f8fafc)",
46
+ "dialog-border-default": "var(--dialog-border-default, #e2e8f0)",
47
+ "dialog-fg-default": "var(--dialog-fg-default, #0f172a)",
48
+ "dialog-fg-mute": "var(--dialog-fg-mute, #64748b)",
49
+ "dialog-fg-subtle": "var(--dialog-fg-subtle, #334155)",
50
+ "forms-bg-default": "var(--forms-bg-default, #ffffff)",
51
+ "forms-bg-disabled": "var(--forms-bg-disabled, #f8fafc)",
52
+ "forms-bg-hover": "var(--forms-bg-hover, #f8fafc)",
53
+ "forms-border-default": "var(--forms-border-default, #e2e8f0)",
54
+ "forms-border-disabled": "var(--forms-border-disabled, #e2e8f0)",
55
+ "forms-border-error": "var(--forms-border-error, #ef4444)",
56
+ "forms-border-focus": "var(--forms-border-focus, #0f172a)",
57
+ "forms-border-hover": "var(--forms-border-hover, #e2e8f0)",
58
+ "forms-border-success": "var(--forms-border-success, #22c55e)",
59
+ "forms-fg-default": "var(--forms-fg-default, #0f172a)",
60
+ "forms-fg-disabled": "var(--forms-fg-disabled, #94a3b8)",
61
+ "forms-fg-error": "var(--forms-fg-error, #ef4444)",
62
+ "forms-fg-mute": "var(--forms-fg-mute, #64748b)",
63
+ "forms-fg-placeholder": "var(--forms-fg-placeholder, #64748b)",
64
+ "forms-fg-subtle": "var(--forms-fg-subtle, #334155)",
65
+ "forms-fg-success": "var(--forms-fg-success, #22c55e)",
66
+ "forms-checkbox-checkbox-bg-checked": "var(--forms-checkbox-checkbox-bg-checked, #0f172a)",
67
+ "forms-checkbox-checkbox-bg-default": "var(--forms-checkbox-checkbox-bg-default, #f8fafc)",
68
+ "forms-checkbox-checkbox-border-checked": "var(--forms-checkbox-checkbox-border-checked, #ffffff00)",
69
+ "forms-checkbox-checkbox-border-default": "var(--forms-checkbox-checkbox-border-default, #e2e8f0)",
70
+ "forms-checkbox-checkbox-fg-checked": "var(--forms-checkbox-checkbox-fg-checked, #ffffff)",
71
+ "forms-radio-radio-bg-checked": "var(--forms-radio-radio-bg-checked, #0f172a)",
72
+ "forms-radio-radio-bg-default": "var(--forms-radio-radio-bg-default, #f8fafc)",
73
+ "forms-radio-radio-border-checked": "var(--forms-radio-radio-border-checked, #ffffff00)",
74
+ "forms-radio-radio-border-default": "var(--forms-radio-radio-border-default, #e2e8f0)",
75
+ "forms-radio-radio-fg-checked": "var(--forms-radio-radio-fg-checked, #ffffff)",
76
+ "forms-toggle-toggle-bg-checked": "var(--forms-toggle-toggle-bg-checked, #0f172a)",
77
+ "forms-toggle-toggle-bg-default": "var(--forms-toggle-toggle-bg-default, #f8fafc)",
78
+ "forms-toggle-toggle-border-checked": "var(--forms-toggle-toggle-border-checked, #ffffff00)",
79
+ "forms-toggle-toggle-border-default": "var(--forms-toggle-toggle-border-default, #e2e8f0)",
80
+ "forms-toggle-toggle-fg-checked": "var(--forms-toggle-toggle-fg-checked, #ffffff)",
81
+ "forms-toggle-toggle-fg-default": "var(--forms-toggle-toggle-fg-default, #0f172a)",
82
+ "links-link-default": "var(--links-link-default, #4f46e5)",
83
+ "links-link-disabled": "var(--links-link-disabled, #94a3b8)",
84
+ "links-link-hover": "var(--links-link-hover, #0f172a)",
85
+ "links-link-inverted-default": "var(--links-link-inverted-default, #0f172a)",
86
+ "links-link-inverted-hover": "var(--links-link-inverted-hover, #4f46e5)",
87
+ "links-link-mute-default": "var(--links-link-mute-default, #64748b)",
88
+ "links-link-mute-hover": "var(--links-link-mute-hover, #0f172a)",
89
+ "syntax-syntax": "var(--syntax-syntax, #64748b)",
90
+ "syntax-syntax-key": "var(--syntax-syntax-key, #9a3412)",
91
+ "syntax-syntax-num": "var(--syntax-syntax-num, #15803d)",
92
+ "syntax-syntax-value": "var(--syntax-syntax-value, #4f46e5)"
93
+ },
94
+ "dark": {
95
+ "accent": "var(--accent, #22d3ee)",
96
+ "bg-default": "var(--bg-default, #020617)",
97
+ "branding-bg-default": "#4f46e5",
98
+ "branding-bg-hover": "#1e293b",
99
+ "branding-border-hover": "#334155",
100
+ "branding-fg-default": "#ffffff",
101
+ "branding-fg-hover": "#ffffff",
102
+ "button-identifier-bg-default": "var(--button-identifier-bg-default, #0f172a)",
103
+ "button-identifier-bg-hover": "var(--button-identifier-bg-hover, #1e293b)",
104
+ "button-identifier-border-default": "var(--button-identifier-border-default, #334155)",
105
+ "button-identifier-border-hover": "var(--button-identifier-border-hover, #334155)",
106
+ "button-identifier-fg-default": "var(--button-identifier-fg-default, #ffffff)",
107
+ "button-identifier-fg-subtle": "var(--button-identifier-fg-subtle, #e2e8f0)",
108
+ "button-primary-bg-default": "var(--button-primary-bg-default, #ffffff)",
109
+ "button-primary-bg-disabled": "var(--button-primary-bg-disabled, #94a3b8)",
110
+ "button-primary-bg-hover": "var(--button-primary-bg-hover, #e2e8f0)",
111
+ "button-primary-border-default": "var(--button-primary-border-default, #ffffff00)",
112
+ "button-primary-border-disabled": "var(--button-primary-border-disabled, #ffffff00)",
113
+ "button-primary-border-hover": "var(--button-primary-border-hover, #ffffff00)",
114
+ "button-primary-fg-default": "var(--button-primary-fg-default, #0f172a)",
115
+ "button-primary-fg-disabled": "var(--button-primary-fg-disabled, #64748b)",
116
+ "button-primary-fg-hover": "var(--button-primary-fg-hover, #0f172a)",
117
+ "button-secondary-bg-default": "var(--button-secondary-bg-default, #0f172a)",
118
+ "button-secondary-bg-disabled": "var(--button-secondary-bg-disabled, #1e293b)",
119
+ "button-secondary-bg-hover": "var(--button-secondary-bg-hover, #1e293b)",
120
+ "button-secondary-border-default": "var(--button-secondary-border-default, #334155)",
121
+ "button-secondary-border-disabled": "var(--button-secondary-border-disabled, #334155)",
122
+ "button-secondary-border-hover": "var(--button-secondary-border-hover, #334155)",
123
+ "button-secondary-fg-default": "var(--button-secondary-fg-default, #ffffff)",
124
+ "button-secondary-fg-disabled": "var(--button-secondary-fg-disabled, #64748b)",
125
+ "button-secondary-fg-hover": "var(--button-secondary-fg-hover, #e2e8f0)",
126
+ "button-social-bg-default": "var(--button-social-bg-default, #0f172a)",
127
+ "button-social-bg-disabled": "var(--button-social-bg-disabled, #1e293b)",
128
+ "button-social-bg-hover": "var(--button-social-bg-hover, #1e293b)",
129
+ "button-social-border-default": "var(--button-social-border-default, #334155)",
130
+ "button-social-border-disabled": "var(--button-social-border-disabled, #334155)",
131
+ "button-social-border-hover": "var(--button-social-border-hover, #334155)",
132
+ "button-social-fg-default": "var(--button-social-fg-default, #ffffff)",
133
+ "button-social-fg-disabled": "var(--button-social-fg-disabled, #64748b)",
134
+ "button-social-fg-hover": "var(--button-social-fg-hover, #e2e8f0)",
135
+ "dialog-bg-default": "var(--dialog-bg-default, #0f172a)",
136
+ "dialog-bg-subtle": "var(--dialog-bg-subtle, #020617)",
137
+ "dialog-border-default": "var(--dialog-border-default, #334155)",
138
+ "dialog-fg-default": "var(--dialog-fg-default, #ffffff)",
139
+ "dialog-fg-mute": "var(--dialog-fg-mute, #94a3b8)",
140
+ "dialog-fg-subtle": "var(--dialog-fg-subtle, #e2e8f0)",
141
+ "forms-bg-default": "var(--forms-bg-default, #0f172a)",
142
+ "forms-bg-disabled": "var(--forms-bg-disabled, #1e293b)",
143
+ "forms-bg-hover": "var(--forms-bg-hover, #1e293b)",
144
+ "forms-border-default": "var(--forms-border-default, #334155)",
145
+ "forms-border-disabled": "var(--forms-border-disabled, #334155)",
146
+ "forms-border-error": "var(--forms-border-error, #ef4444)",
147
+ "forms-border-focus": "var(--forms-border-focus, #ffffff)",
148
+ "forms-border-hover": "var(--forms-border-hover, #334155)",
149
+ "forms-border-success": "var(--forms-border-success, #22c55e)",
150
+ "forms-fg-default": "var(--forms-fg-default, #ffffff)",
151
+ "forms-fg-disabled": "var(--forms-fg-disabled, #64748b)",
152
+ "forms-fg-error": "var(--forms-fg-error, #ef4444)",
153
+ "forms-fg-mute": "var(--forms-fg-mute, #94a3b8)",
154
+ "forms-fg-placeholder": "var(--forms-fg-placeholder, #94a3b8)",
155
+ "forms-fg-subtle": "var(--forms-fg-subtle, #e2e8f0)",
156
+ "forms-fg-success": "var(--forms-fg-success, #22c55e)",
157
+ "forms-checkbox-checkbox-bg-checked": "var(--forms-checkbox-checkbox-bg-checked, #ffffff)",
158
+ "forms-checkbox-checkbox-bg-default": "var(--forms-checkbox-checkbox-bg-default, #1e293b)",
159
+ "forms-checkbox-checkbox-border-checked": "var(--forms-checkbox-checkbox-border-checked, #ffffff00)",
160
+ "forms-checkbox-checkbox-border-default": "var(--forms-checkbox-checkbox-border-default, #334155)",
161
+ "forms-checkbox-checkbox-fg-checked": "var(--forms-checkbox-checkbox-fg-checked, #0f172a)",
162
+ "forms-radio-radio-bg-checked": "var(--forms-radio-radio-bg-checked, #ffffff)",
163
+ "forms-radio-radio-bg-default": "var(--forms-radio-radio-bg-default, #1e293b)",
164
+ "forms-radio-radio-border-checked": "var(--forms-radio-radio-border-checked, #ffffff00)",
165
+ "forms-radio-radio-border-default": "var(--forms-radio-radio-border-default, #334155)",
166
+ "forms-radio-radio-fg-checked": "var(--forms-radio-radio-fg-checked, #0f172a)",
167
+ "forms-toggle-toggle-bg-checked": "var(--forms-toggle-toggle-bg-checked, #ffffff)",
168
+ "forms-toggle-toggle-bg-default": "var(--forms-toggle-toggle-bg-default, #1e293b)",
169
+ "forms-toggle-toggle-border-checked": "var(--forms-toggle-toggle-border-checked, #ffffff00)",
170
+ "forms-toggle-toggle-border-default": "var(--forms-toggle-toggle-border-default, #334155)",
171
+ "forms-toggle-toggle-fg-checked": "var(--forms-toggle-toggle-fg-checked, #0f172a)",
172
+ "forms-toggle-toggle-fg-default": "var(--forms-toggle-toggle-fg-default, #ffffff)",
173
+ "links-link-default": "var(--links-link-default, #4f46e5)",
174
+ "links-link-disabled": "var(--links-link-disabled, #64748b)",
175
+ "links-link-hover": "var(--links-link-hover, #ffffff)",
176
+ "links-link-inverted-default": "var(--links-link-inverted-default, #0f172a)",
177
+ "links-link-inverted-hover": "var(--links-link-inverted-hover, #4f46e5)",
178
+ "links-link-mute-default": "var(--links-link-mute-default, #64748b)",
179
+ "links-link-mute-hover": "var(--links-link-mute-hover, #0f172a)",
180
+ "syntax-syntax": "var(--syntax-syntax, #64748b)",
181
+ "syntax-syntax-key": "var(--syntax-syntax-key, #4f46e5)",
182
+ "syntax-syntax-num": "var(--syntax-syntax-num, #93c5fd)",
183
+ "syntax-syntax-value": "var(--syntax-syntax-value, #fdba74)"
184
+ }
185
+ },
186
+ "borderRadius": {
187
+ "border-radius-buttons": "var(--border-radius-buttons, 0.25rem)",
188
+ "border-radius-forms": "var(--border-radius-forms, 0.25rem)",
189
+ "border-radius-general": "var(--border-radius-general, 0.25rem)",
190
+ "border-radius-branding": "0.5rem",
191
+ "border-radius-cards": "var(--border-radius-cards, 0.75rem)"
192
+ }
193
+ }