@strands.gg/accui 0.0.3 → 0.0.5

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 (46) hide show
  1. package/README.md +249 -20
  2. package/dist/accui.css +1 -0
  3. package/dist/index.d.ts +4 -10
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/nuxt/module.d.ts +2 -1
  6. package/dist/nuxt/module.d.ts.map +1 -1
  7. package/dist/nuxt/types.d.ts +1 -0
  8. package/dist/nuxt/types.d.ts.map +1 -1
  9. package/dist/strands-auth-ui.es.js +1735 -1231
  10. package/dist/strands-auth-ui.es.js.map +1 -1
  11. package/dist/strands-auth-ui.umd.js +1 -1
  12. package/dist/strands-auth-ui.umd.js.map +1 -1
  13. package/dist/vue/components/StrandsAuth.vue.d.ts +8 -6
  14. package/dist/vue/components/StrandsAuth.vue.d.ts.map +1 -1
  15. package/dist/vue/components/StrandsConfigProvider.vue.d.ts +22 -0
  16. package/dist/vue/components/StrandsConfigProvider.vue.d.ts.map +1 -0
  17. package/dist/vue/components/StrandsPasswordReset.vue.d.ts.map +1 -1
  18. package/dist/vue/components/StrandsSignIn.vue.d.ts +4 -2
  19. package/dist/vue/components/StrandsSignIn.vue.d.ts.map +1 -1
  20. package/dist/vue/components/StrandsSignUp.vue.d.ts +4 -2
  21. package/dist/vue/components/StrandsSignUp.vue.d.ts.map +1 -1
  22. package/dist/vue/components/index.d.ts +1 -1
  23. package/dist/vue/components/index.d.ts.map +1 -1
  24. package/dist/vue/composables/useOAuthProviders.d.ts +71 -0
  25. package/dist/vue/composables/useOAuthProviders.d.ts.map +1 -0
  26. package/dist/vue/composables/useStrandsConfig.d.ts +35 -0
  27. package/dist/vue/composables/useStrandsConfig.d.ts.map +1 -0
  28. package/dist/vue/index.d.ts +2 -0
  29. package/dist/vue/index.d.ts.map +1 -1
  30. package/dist/vue/ui/UiAlert.vue.d.ts +31 -0
  31. package/dist/vue/ui/UiAlert.vue.d.ts.map +1 -0
  32. package/dist/vue/ui/UiButton.vue.d.ts +39 -0
  33. package/dist/vue/ui/UiButton.vue.d.ts.map +1 -0
  34. package/dist/vue/ui/UiCard.vue.d.ts +29 -0
  35. package/dist/vue/ui/UiCard.vue.d.ts.map +1 -0
  36. package/dist/vue/ui/UiInput.vue.d.ts +41 -0
  37. package/dist/vue/ui/UiInput.vue.d.ts.map +1 -0
  38. package/dist/vue/ui/UiLink.vue.d.ts +35 -0
  39. package/dist/vue/ui/UiLink.vue.d.ts.map +1 -0
  40. package/dist/vue/ui/UiTabs.vue.d.ts +17 -0
  41. package/dist/vue/ui/UiTabs.vue.d.ts.map +1 -0
  42. package/dist/vue/ui/index.d.ts +13 -0
  43. package/dist/vue/ui/index.d.ts.map +1 -0
  44. package/package.json +1 -1
  45. package/dist/vue/components/StrandsDeviceManager.vue.d.ts +0 -3
  46. package/dist/vue/components/StrandsDeviceManager.vue.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,49 +1,278 @@
1
1
  # @strands.gg/accui
2
2
 
3
- Strands Authentication UI Components for Vue 3
3
+ Modern authentication UI components for Vue 3 with magic link support and OAuth integration.
4
4
 
5
- ## Installation
5
+ ## 🚀 Features
6
+
7
+ - **Magic Link Authentication** - Passwordless signup flow
8
+ - **OAuth Providers** - Dynamic OAuth provider discovery from API
9
+ - **Vue 3 Composition API** - Built with modern Vue patterns
10
+ - **TypeScript Support** - Full type safety
11
+ - **Nuxt Module** - First-class Nuxt 3 support
12
+ - **Customizable UI** - Consistent design system with Tailwind CSS
13
+ - **Responsive Design** - Mobile-first approach
14
+
15
+ ## 📦 Installation
6
16
 
7
17
  ```bash
8
18
  npm install @strands.gg/accui
9
19
  ```
10
20
 
11
- ## Usage
21
+ ### Import Styles
22
+
23
+ ```javascript
24
+ // Import the CSS in your main.js or app.vue
25
+ import '@strands.gg/accui/style.css'
26
+ ```
27
+
28
+ ## 🎯 Quick Start
29
+
30
+ ### Basic Vue 3 Usage
12
31
 
13
32
  ```vue
14
33
  <template>
15
34
  <div>
35
+ <!-- Combined Auth Component with tabs -->
36
+ <StrandsAuth
37
+ @success="handleSuccess"
38
+ @error="handleError"
39
+ redirect-url="/dashboard"
40
+ />
41
+
42
+ <!-- Or use individual components -->
16
43
  <StrandsSignIn @success="handleSignInSuccess" />
44
+ <StrandsSignUp @success="handleSignUpSuccess" />
17
45
  </div>
18
46
  </template>
19
47
 
20
48
  <script setup lang="ts">
21
- import { StrandsSignIn } from "@strands.gg/accui";
49
+ import {
50
+ StrandsAuth,
51
+ StrandsSignIn,
52
+ StrandsSignUp,
53
+ useStrandsAuth
54
+ } from "@strands.gg/accui"
55
+
56
+ // Access auth state globally
57
+ const { user, isAuthenticated, signOut } = useStrandsAuth()
58
+
59
+ const handleSuccess = (userData: any) => {
60
+ console.log("Authentication successful:", userData)
61
+ }
62
+
63
+ const handleError = (error: string) => {
64
+ console.error("Authentication error:", error)
65
+ }
66
+
67
+ const handleSignUpSuccess = (data: { email: string }) => {
68
+ console.log("Magic link sent to:", data.email)
69
+ }
70
+ </script>
71
+ ```
72
+
73
+ ### Nuxt 3 Module
74
+
75
+ Add the module to your `nuxt.config.ts`:
76
+
77
+ ```typescript
78
+ export default defineNuxtConfig({
79
+ modules: ['@strands.gg/accui/nuxt'],
80
+ strandsAuth: {
81
+ apiBaseUrl: 'https://your-api.com',
82
+ // Other configuration options
83
+ }
84
+ })
85
+ ```
86
+
87
+ ## 🧩 Components
88
+
89
+ ### Authentication Components
90
+
91
+ | Component | Description | Use Case |
92
+ |-----------|-------------|----------|
93
+ | `StrandsAuth` | Combined auth with tabs | All-in-one solution |
94
+ | `StrandsSignIn` | Email + password sign in | Traditional login |
95
+ | `StrandsSignUp` | Magic link signup | Passwordless registration |
96
+ | `StrandsPasswordReset` | Password reset form | Recovery flow |
97
+ | `StrandsUserProfile` | Profile management | User settings |
98
+ | `StrandsMFASetup` | Multi-factor auth setup | Security enhancement |
99
+
100
+ ### Utility Components
101
+
102
+ | Component | Description |
103
+ |-----------|-------------|
104
+ | `SignedIn` | Conditional rendering for authenticated users |
105
+ | `SignedOut` | Conditional rendering for unauthenticated users |
106
+ | `StrandsConfigProvider` | Scoped configuration provider |
107
+ | `StrandsLogo` | Strands branding logo |
108
+ | `StrandsSecuredFooter` | "Secured by Strands" footer |
109
+
110
+ ### UI Components
111
+
112
+ | Component | Description | Props |
113
+ |-----------|-------------|-------|
114
+ | `UiButton` | Styled button | `variant`, `size`, `loading`, `disabled` |
115
+ | `UiInput` | Form input field | `type`, `label`, `error`, `placeholder` |
116
+ | `UiCard` | Container card | `variant`, `shadow`, `padding` |
117
+ | `UiTabs` | Tab navigation | `tabs`, `modelValue` |
118
+ | `UiAlert` | Status messages | `variant`, `message` |
119
+ | `UiLink` | Styled link | `variant`, `size` |
120
+
121
+ ## 🔧 Composables
122
+
123
+ ### `useStrandsAuth()`
124
+
125
+ Global authentication state management:
126
+
127
+ ```typescript
128
+ const {
129
+ user, // Current user object
130
+ isAuthenticated, // Boolean auth status
131
+ isLoading, // Loading state
132
+ signOut, // Sign out function
133
+ refreshUser // Refresh user data
134
+ } = useStrandsAuth()
135
+ ```
136
+
137
+ ### `useStrandsConfig()`
138
+
139
+ Configuration management:
140
+
141
+ ```typescript
142
+ const {
143
+ config, // Current configuration
144
+ getUrl // Helper to build API URLs
145
+ } = useStrandsConfig()
146
+ ```
147
+
148
+ ### `useOAuthProviders()`
149
+
150
+ OAuth provider management:
151
+
152
+ ```typescript
153
+ const {
154
+ enabledProviders, // Available OAuth providers
155
+ loading, // Loading state
156
+ error, // Error state
157
+ fetchProviders, // Fetch providers from API
158
+ redirectToProvider // Initiate OAuth flow
159
+ } = useOAuthProviders()
160
+ ```
161
+
162
+ ## 🎨 Magic Link Flow
163
+
164
+ The signup component uses a modern magic link approach:
165
+
166
+ ```vue
167
+ <template>
168
+ <!-- User enters email only -->
169
+ <StrandsSignUp @success="handleMagicLinkSent" />
170
+ </template>
171
+
172
+ <script setup lang="ts">
173
+ // User receives magic link via email
174
+ // Clicking link completes registration
175
+ const handleMagicLinkSent = (data: { email: string }) => {
176
+ // Show success message
177
+ console.log(`Magic link sent to ${data.email}`)
178
+ }
179
+ </script>
180
+ ```
181
+
182
+ ## 🔐 Configuration
183
+
184
+ ### Global Configuration
185
+
186
+ ```typescript
187
+ import { setStrandsConfig } from '@strands.gg/accui'
22
188
 
23
- const handleSignInSuccess = (user: any) => {
24
- console.log("User signed in:", user);
25
- };
189
+ setStrandsConfig({
190
+ apiBaseUrl: 'https://your-api.com',
191
+ clientId: 'your-client-id',
192
+ // Additional options
193
+ })
194
+ ```
195
+
196
+ ### Scoped Configuration
197
+
198
+ ```vue
199
+ <template>
200
+ <StrandsConfigProvider :config="scopedConfig">
201
+ <StrandsAuth />
202
+ </StrandsConfigProvider>
203
+ </template>
204
+
205
+ <script setup lang="ts">
206
+ const scopedConfig = {
207
+ apiBaseUrl: 'https://different-api.com'
208
+ }
26
209
  </script>
27
210
  ```
28
211
 
29
- ## Available Components
212
+ ## 🎯 OAuth Integration
213
+
214
+ OAuth providers are dynamically loaded from your API endpoint:
215
+
216
+ ```javascript
217
+ // GET /api/v1/oauth/providers
218
+ {
219
+ "providers": [
220
+ {
221
+ "id": "google",
222
+ "name": "Google",
223
+ "displayName": "Google",
224
+ "iconUrl": "https://example.com/google-icon.svg",
225
+ "enabled": true
226
+ }
227
+ ]
228
+ }
229
+ ```
230
+
231
+ ## 📱 Responsive Design
232
+
233
+ All components are mobile-first and responsive:
30
234
 
31
- - `StrandsSignIn` - Sign in form component
32
- - `StrandsSignUp` - Sign up form component
33
- - `StrandsUserProfile` - User profile management component
34
- - `StrandsPasswordReset` - Password reset component
35
- - `StrandsMFASetup` - Multi-factor authentication setup
36
- - `StrandsDeviceManager` - Device management component
235
+ - **Mobile**: Optimized touch targets and layouts
236
+ - **Tablet**: Adaptive spacing and sizing
237
+ - **Desktop**: Full-featured experience
238
+
239
+ ## 🎨 Theming
240
+
241
+ Components use CSS custom properties for theming:
242
+
243
+ ```css
244
+ :root {
245
+ --strands-primary: #your-brand-color;
246
+ --strands-secondary: #your-secondary-color;
247
+ /* Additional theme variables */
248
+ }
249
+ ```
250
+
251
+ ## 📋 TypeScript Support
252
+
253
+ Full TypeScript definitions included:
254
+
255
+ ```typescript
256
+ import type {
257
+ StrandsUser,
258
+ StrandsSession,
259
+ StrandsAuthConfig,
260
+ ButtonVariant,
261
+ InputType
262
+ } from '@strands.gg/accui'
263
+ ```
37
264
 
38
- ## Composables
265
+ ## 🔧 Requirements
39
266
 
40
- - `useStrandsAuth` - Authentication state management composable
267
+ - **Vue**: 3.5+
268
+ - **Node**: 16+
269
+ - **TypeScript**: 5+ (optional but recommended)
41
270
 
42
- ## Requirements
271
+ ## 📄 License
43
272
 
44
- - Vue 3.4+
273
+ MIT © Strands Services Limited
45
274
 
46
- ## License
275
+ ---
47
276
 
48
- MIT
277
+ **Need help?** Check out our [documentation](https://docs.strands.gg) or open an issue on GitHub.
49
278
 
package/dist/accui.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-600:oklch(59.6% .145 163.225);--color-blue-50:oklch(97% .014 254.604);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-neutral-50:oklch(98.5% 0 0);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-600:oklch(43.9% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-lg:16px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-strands-50:#fdf2f8;--color-strands-100:#fce7f3;--color-strands-400:#f472b6;--color-strands-500:#ea00a8;--color-strands-600:#db2777;--color-strands-700:#be185d}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{.btn-primary{border-radius:var(--radius-lg);background-color:var(--color-strands-500);padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*2);color:var(--color-white);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.btn-primary:hover{background-color:var(--color-strands-600)}}.btn-secondary{border-radius:var(--radius-lg);background-color:var(--color-gray-200);padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*2);color:var(--color-gray-800);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.btn-secondary:hover{background-color:var(--color-gray-300)}}.btn-oauth{justify-content:center;align-items:center;gap:calc(var(--spacing)*3);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300);background-color:var(--color-white);width:100%;padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*3);color:var(--color-gray-700);transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;display:flex}@media (hover:hover){.btn-oauth:hover{border-color:var(--color-strands-500);background-color:var(--color-gray-50)}}.card-modern{border-radius:var(--radius-2xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-200);background-color:var(--color-white);padding:calc(var(--spacing)*8);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.text-gradient{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:var(--color-strands-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));--tw-gradient-to:var(--color-strands-600);color:#0000;-webkit-background-clip:text;background-clip:text}.animate-slide-up{animation:.3s ease-out slideUp}.animate-fade-in{animation:.2s ease-out fadeIn}}@layer utilities{.pointer-events-none{pointer-events:none}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.bottom-\[-2px\]{bottom:-2px}.left-0{left:calc(var(--spacing)*0)}.float-right{float:right}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.-mb-4{margin-bottom:calc(var(--spacing)*-4)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-24{height:calc(var(--spacing)*24)}.h-\[3px\]{height:3px}.min-h-screen{min-height:100vh}.\!w-auto{width:auto!important}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-16{width:calc(var(--spacing)*16)}.w-24{width:calc(var(--spacing)*24)}.w-auto{width:auto}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*12)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-blue-200{border-color:var(--color-blue-200)}.border-emerald-300{border-color:var(--color-emerald-300)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-green-200{border-color:var(--color-green-200)}.border-neutral-200{border-color:var(--color-neutral-200)}.border-red-200{border-color:var(--color-red-200)}.border-red-300{border-color:var(--color-red-300)}.border-strands-500{border-color:var(--color-strands-500)}.border-yellow-200{border-color:var(--color-yellow-200)}.border-yellow-300{border-color:var(--color-yellow-300)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-neutral-50{background-color:var(--color-neutral-50)}.bg-neutral-100{background-color:var(--color-neutral-100)}.bg-neutral-200{background-color:var(--color-neutral-200)}.bg-neutral-300{background-color:var(--color-neutral-300)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-400{background-color:var(--color-red-400)}.bg-strands-100{background-color:var(--color-strands-100)}.bg-strands-500{background-color:var(--color-strands-500)}.bg-white{background-color:var(--color-white)}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-neutral-50{--tw-gradient-from:var(--color-neutral-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-strands-400{--tw-gradient-from:var(--color-strands-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-neutral-100{--tw-gradient-to:var(--color-neutral-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-strands-600{--tw-gradient-to:var(--color-strands-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-8{padding-block:calc(var(--spacing)*8)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-6{padding-top:calc(var(--spacing)*6)}.pr-3{padding-right:calc(var(--spacing)*3)}.pr-10{padding-right:calc(var(--spacing)*10)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-400{color:var(--color-blue-400)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-600{color:var(--color-emerald-600)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.text-neutral-400{color:var(--color-neutral-400)}.text-neutral-500{color:var(--color-neutral-500)}.text-neutral-600{color:var(--color-neutral-600)}.text-neutral-700{color:var(--color-neutral-700)}.text-neutral-900{color:var(--color-neutral-900)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-strands-500{color:var(--color-strands-500)}.text-strands-600{color:var(--color-strands-600)}.text-white{color:var(--color-white)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.underline{text-decoration-line:underline}.decoration-strands-500{text-decoration-color:var(--color-strands-500)}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-lg{--tw-backdrop-blur:blur(var(--blur-lg));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-\[cubic-bezier\(0\.25\,0\.46\,0\.45\,0\.94\)\]{--tw-ease:cubic-bezier(.25,.46,.45,.94);transition-timing-function:cubic-bezier(.25,.46,.45,.94)}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-neutral-50:hover{background-color:var(--color-neutral-50)}.hover\:bg-strands-50:hover{background-color:var(--color-strands-50)}.hover\:bg-strands-500:hover{background-color:var(--color-strands-500)}.hover\:bg-strands-600:hover{background-color:var(--color-strands-600)}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-gray-800:hover{color:var(--color-gray-800)}.hover\:text-green-500:hover{color:var(--color-green-500)}.hover\:text-neutral-700:hover{color:var(--color-neutral-700)}.hover\:text-red-500:hover{color:var(--color-red-500)}.hover\:text-strands-600:hover{color:var(--color-strands-600)}.hover\:text-strands-700:hover{color:var(--color-strands-700)}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-yellow-500:hover{color:var(--color-yellow-500)}}.focus-visible\:border-red-500:focus-visible{border-color:var(--color-red-500)}.focus-visible\:border-strands-500:focus-visible{border-color:var(--color-strands-500)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-red-500:focus-visible{--tw-ring-color:var(--color-red-500)}.focus-visible\:ring-strands-500:focus-visible{--tw-ring-color:var(--color-strands-500)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus-visible\:ring-offset-white:focus-visible{--tw-ring-offset-color:var(--color-white)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-50:disabled{background-color:var(--color-gray-50)}.disabled\:text-gray-500:disabled{color:var(--color-gray-500)}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:flex-row{flex-direction:row}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}.fade-enter-active[data-v-7f6add9f],.fade-leave-active[data-v-7f6add9f]{transition:opacity .15s ease}.fade-enter-from[data-v-7f6add9f],.fade-leave-to[data-v-7f6add9f]{opacity:0}.height-fade-enter-active[data-v-7f6add9f]{transition:all .25s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.height-fade-leave-active[data-v-7f6add9f]{transition:all .2s cubic-bezier(.25,.46,.45,.94);overflow:hidden}.height-fade-enter-from[data-v-7f6add9f],.height-fade-leave-to[data-v-7f6add9f]{opacity:0;max-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translateY(-10px)}.height-fade-enter-to[data-v-7f6add9f],.height-fade-leave-from[data-v-7f6add9f]{opacity:1;max-height:500px;transform:translateY(0)}.slide-fade-enter-active[data-v-7f6add9f]{transition:all .2s cubic-bezier(.4,0,.2,1)}.slide-fade-leave-active[data-v-7f6add9f]{transition:all .15s cubic-bezier(.4,0,.2,1)}.slide-fade-enter-from[data-v-7f6add9f]{transform:translateY(25px);opacity:0}.slide-fade-leave-to[data-v-7f6add9f]{transform:translateY(-15px);opacity:0}.expand-enter-active[data-v-7f6add9f],.expand-leave-active[data-v-7f6add9f]{transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden}.expand-enter-from[data-v-7f6add9f],.expand-leave-to[data-v-7f6add9f]{max-height:0;opacity:0;transform:translateY(-15px)}.expand-enter-to[data-v-7f6add9f],.expand-leave-from[data-v-7f6add9f]{max-height:300px;opacity:1;transform:translateY(0)}.content-switch-enter-active[data-v-7f6add9f]{transition:all .2s cubic-bezier(.4,0,.2,1)}.content-switch-leave-active[data-v-7f6add9f]{transition:all .15s cubic-bezier(.4,0,.2,1)}.content-switch-enter-from[data-v-7f6add9f]{transform:translateY(30px);opacity:0}.content-switch-leave-to[data-v-7f6add9f]{transform:translateY(-20px);opacity:0}
package/dist/index.d.ts CHANGED
@@ -1,13 +1,7 @@
1
- export { default as StrandsAuth } from './vue/components/StrandsAuth.vue';
2
- export { default as StrandsSignIn } from './vue/components/StrandsSignIn.vue';
3
- export { default as StrandsSignUp } from './vue/components/StrandsSignUp.vue';
4
- export { default as StrandsUserProfile } from './vue/components/StrandsUserProfile.vue';
5
- export { default as StrandsPasswordReset } from './vue/components/StrandsPasswordReset.vue';
6
- export { default as StrandsMFASetup } from './vue/components/StrandsMFASetup.vue';
7
- export { default as StrandsDeviceManager } from './vue/components/StrandsDeviceManager.vue';
8
- export { default as SignedIn } from './vue/components/SignedIn.vue';
9
- export { default as SignedOut } from './vue/components/SignedOut.vue';
1
+ export * from './vue/components';
2
+ export * from './vue/ui';
10
3
  export { useStrandsAuth } from './vue/composables/useStrandsAuth';
4
+ export { useStrandsConfig, setStrandsConfig, provideStrandsConfig } from './vue/composables/useStrandsConfig';
5
+ export { useOAuthProviders } from './vue/composables/useOAuthProviders';
11
6
  export type * from './types/index';
12
- export { StrandsAuth as Auth, StrandsSignIn as SignIn, StrandsSignUp as SignUp, StrandsUserProfile as UserProfile, StrandsPasswordReset as PasswordReset, StrandsMFASetup as MFASetup, StrandsDeviceManager as DeviceManager, } from './vue/components/index';
13
7
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../apps/accounts-ui/src/index.ts"],"names":[],"mappings":"AACA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2CAA2C,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACjF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,2CAA2C,CAAA;AAC3F,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gCAAgC,CAAA;AAGrE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAGjE,mBAAmB,eAAe,CAAA;AAGlC,OAAO,EAEL,WAAW,IAAI,IAAI,EACnB,aAAa,IAAI,MAAM,EACvB,aAAa,IAAI,MAAM,EACvB,kBAAkB,IAAI,WAAW,EACjC,oBAAoB,IAAI,aAAa,EACrC,eAAe,IAAI,QAAQ,EAC3B,oBAAoB,IAAI,aAAa,GACtC,MAAM,wBAAwB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../apps/accounts-ui/src/index.ts"],"names":[],"mappings":"AACA,OAAO,mBAAmB,CAAA;AAG1B,cAAc,kBAAkB,CAAA;AAGhC,cAAc,UAAU,CAAA;AAGxB,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAGvE,mBAAmB,eAAe,CAAA"}
@@ -1,7 +1,7 @@
1
1
  export interface StrandsAuthConfig {
2
2
  /**
3
3
  * Base URL for the Strands Auth API
4
- * @default 'https://accounts.strands.dev'
4
+ * @default 'https://your-api.example.com'
5
5
  */
6
6
  baseUrl?: string;
7
7
  /**
@@ -34,6 +34,7 @@ export interface StrandsAuthConfig {
34
34
  onSignOutUrl?: string;
35
35
  /**
36
36
  * OAuth providers to enable
37
+ * @deprecated OAuth providers are now dynamically fetched from API
37
38
  * @default []
38
39
  */
39
40
  oauthProviders?: string[];
@@ -1 +1 @@
1
- {"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/module.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;;AAED,wBAyHE"}
1
+ {"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/module.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;;AAED,wBAyHE"}
@@ -26,6 +26,7 @@ declare module '@nuxt/schema' {
26
26
  redirectUrl?: string;
27
27
  onSignInUrl?: string;
28
28
  onSignOutUrl?: string;
29
+ /** @deprecated OAuth providers are now dynamically fetched from API */
29
30
  oauthProviders?: string[];
30
31
  autoRefresh?: boolean;
31
32
  refreshInterval?: number;
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,IAAI,CAAA;IACf,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,mBAAmB;QAC3B,WAAW,CAAC,EAAE;YACZ,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,aAAa,CAAC,EAAE,MAAM,CAAA;YACtB,SAAS,CAAC,EAAE,MAAM,CAAA;YAClB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,YAAY,CAAC,EAAE,MAAM,CAAA;YACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;YACzB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,eAAe,CAAC,EAAE,MAAM,CAAA;YACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;YAC1B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;YAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;SAClB,CAAA;KACF;CACF;AAED,OAAO,QAAQ,UAAU,CAAC;IACxB,UAAU,OAAO;QACf,YAAY,EAAE;YACZ,WAAW,EAAE,MAAM,CAAA;SACpB,CAAA;KACF;CACF;AAED,OAAO,EAAE,CAAA"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../apps/accounts-ui/src/nuxt/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,IAAI,CAAA;IACf,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,mBAAmB;QAC3B,WAAW,CAAC,EAAE;YACZ,OAAO,CAAC,EAAE,MAAM,CAAA;YAChB,aAAa,CAAC,EAAE,MAAM,CAAA;YACtB,SAAS,CAAC,EAAE,MAAM,CAAA;YAClB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,WAAW,CAAC,EAAE,MAAM,CAAA;YACpB,YAAY,CAAC,EAAE,MAAM,CAAA;YACrB,uEAAuE;YACvE,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;YACzB,WAAW,CAAC,EAAE,OAAO,CAAA;YACrB,eAAe,CAAC,EAAE,MAAM,CAAA;YACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;YAC1B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;YAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;SAClB,CAAA;KACF;CACF;AAED,OAAO,QAAQ,UAAU,CAAC;IACxB,UAAU,OAAO;QACf,YAAY,EAAE;YACZ,WAAW,EAAE,MAAM,CAAA;SACpB,CAAA;KACF;CACF;AAED,OAAO,EAAE,CAAA"}