@thewhileloop/whileui 0.2.2 → 0.2.4
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.
- package/README.md +151 -93
- package/dist/blocks/auth/forgot-password-form.d.ts +9 -1
- package/dist/blocks/auth/forgot-password-form.d.ts.map +1 -1
- package/dist/blocks/auth/forgot-password-form.js +8 -2
- package/dist/blocks/auth/forgot-password-form.js.map +1 -1
- package/dist/blocks/auth/reset-password-form.d.ts +8 -1
- package/dist/blocks/auth/reset-password-form.d.ts.map +1 -1
- package/dist/blocks/auth/reset-password-form.js +8 -2
- package/dist/blocks/auth/reset-password-form.js.map +1 -1
- package/dist/blocks/auth/sign-in-form.d.ts +16 -1
- package/dist/blocks/auth/sign-in-form.d.ts.map +1 -1
- package/dist/blocks/auth/sign-in-form.js +9 -2
- package/dist/blocks/auth/sign-in-form.js.map +1 -1
- package/dist/blocks/auth/sign-up-form.d.ts +16 -1
- package/dist/blocks/auth/sign-up-form.d.ts.map +1 -1
- package/dist/blocks/auth/sign-up-form.js +11 -2
- package/dist/blocks/auth/sign-up-form.js.map +1 -1
- package/dist/blocks/auth/social-connections.d.ts +9 -1
- package/dist/blocks/auth/social-connections.d.ts.map +1 -1
- package/dist/blocks/auth/social-connections.js +2 -2
- package/dist/blocks/auth/social-connections.js.map +1 -1
- package/dist/blocks/auth/user-menu.d.ts +11 -1
- package/dist/blocks/auth/user-menu.d.ts.map +1 -1
- package/dist/blocks/auth/user-menu.js +2 -2
- package/dist/blocks/auth/user-menu.js.map +1 -1
- package/dist/blocks/auth/verify-email-form.d.ts +9 -1
- package/dist/blocks/auth/verify-email-form.d.ts.map +1 -1
- package/dist/blocks/auth/verify-email-form.js +8 -2
- package/dist/blocks/auth/verify-email-form.js.map +1 -1
- package/dist/blocks/commerce/index.d.ts +1 -0
- package/dist/blocks/commerce/index.d.ts.map +1 -1
- package/dist/blocks/commerce/index.js +1 -0
- package/dist/blocks/commerce/index.js.map +1 -1
- package/dist/blocks/commerce/metric-card.d.ts +54 -0
- package/dist/blocks/commerce/metric-card.d.ts.map +1 -0
- package/dist/blocks/commerce/metric-card.js +23 -0
- package/dist/blocks/commerce/metric-card.js.map +1 -0
- package/dist/blocks/layout/form-modal-screen.d.ts +22 -0
- package/dist/blocks/layout/form-modal-screen.d.ts.map +1 -0
- package/dist/blocks/layout/form-modal-screen.js +14 -0
- package/dist/blocks/layout/form-modal-screen.js.map +1 -0
- package/dist/blocks/layout/index.d.ts +1 -0
- package/dist/blocks/layout/index.d.ts.map +1 -1
- package/dist/blocks/layout/index.js +1 -0
- package/dist/blocks/layout/index.js.map +1 -1
- package/dist/blocks/layout/loading-screen.d.ts +3 -1
- package/dist/blocks/layout/loading-screen.d.ts.map +1 -1
- package/dist/blocks/layout/loading-screen.js +2 -2
- package/dist/blocks/layout/loading-screen.js.map +1 -1
- package/dist/blocks/layout/smart-image.d.ts +9 -0
- package/dist/blocks/layout/smart-image.d.ts.map +1 -0
- package/dist/blocks/layout/smart-image.js +23 -0
- package/dist/blocks/layout/smart-image.js.map +1 -0
- package/dist/blocks/lists/index.d.ts +1 -0
- package/dist/blocks/lists/index.d.ts.map +1 -1
- package/dist/blocks/lists/index.js +1 -0
- package/dist/blocks/lists/index.js.map +1 -1
- package/dist/blocks/lists/timeline-feed.d.ts +18 -0
- package/dist/blocks/lists/timeline-feed.d.ts.map +1 -0
- package/dist/blocks/lists/timeline-feed.js +9 -0
- package/dist/blocks/lists/timeline-feed.js.map +1 -0
- package/dist/blocks/media/index.d.ts +2 -0
- package/dist/blocks/media/index.d.ts.map +1 -0
- package/dist/blocks/media/index.js +2 -0
- package/dist/blocks/media/index.js.map +1 -0
- package/dist/blocks/media/smart-image.d.ts +123 -0
- package/dist/blocks/media/smart-image.d.ts.map +1 -0
- package/dist/blocks/media/smart-image.js +48 -0
- package/dist/blocks/media/smart-image.js.map +1 -0
- package/dist/blocks/navigation/drawer-menu.d.ts +3 -1
- package/dist/blocks/navigation/drawer-menu.d.ts.map +1 -1
- package/dist/blocks/navigation/drawer-menu.js +7 -4
- package/dist/blocks/navigation/drawer-menu.js.map +1 -1
- package/dist/components/badge/badge.d.ts +84 -0
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge/badge.js +12 -0
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/box/box.d.ts +143 -0
- package/dist/components/box/box.d.ts.map +1 -0
- package/dist/components/box/box.js +38 -0
- package/dist/components/box/box.js.map +1 -0
- package/dist/components/box/index.d.ts +2 -0
- package/dist/components/box/index.d.ts.map +1 -0
- package/dist/components/box/index.js +2 -0
- package/dist/components/box/index.js.map +1 -0
- package/dist/components/input/input.d.ts +3 -0
- package/dist/components/input/input.d.ts.map +1 -1
- package/dist/components/input/input.js +4 -4
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/layout/index.d.ts +2 -0
- package/dist/components/layout/index.d.ts.map +1 -0
- package/dist/components/layout/index.js +2 -0
- package/dist/components/layout/index.js.map +1 -0
- package/dist/components/layout/layout.d.ts +395 -0
- package/dist/components/layout/layout.d.ts.map +1 -0
- package/dist/components/layout/layout.js +93 -0
- package/dist/components/layout/layout.js.map +1 -0
- package/dist/components/numeric-input/numeric-input.js +1 -1
- package/dist/components/numeric-input/numeric-input.js.map +1 -1
- package/dist/components/row/index.d.ts +2 -0
- package/dist/components/row/index.d.ts.map +1 -0
- package/dist/components/row/index.js +2 -0
- package/dist/components/row/index.js.map +1 -0
- package/dist/components/row/row.d.ts +185 -0
- package/dist/components/row/row.d.ts.map +1 -0
- package/dist/components/row/row.js +45 -0
- package/dist/components/row/row.js.map +1 -0
- package/dist/components/skeleton/skeleton.js +1 -1
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/stack/index.d.ts +2 -0
- package/dist/components/stack/index.d.ts.map +1 -0
- package/dist/components/stack/index.js +2 -0
- package/dist/components/stack/index.js.map +1 -0
- package/dist/components/stack/stack.d.ts +185 -0
- package/dist/components/stack/stack.d.ts.map +1 -0
- package/dist/components/stack/stack.js +45 -0
- package/dist/components/stack/stack.js.map +1 -0
- package/dist/components/textarea/textarea.js +1 -1
- package/dist/components/textarea/textarea.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/package.json +11 -6
package/README.md
CHANGED
|
@@ -11,20 +11,20 @@ Current version: **0.2.1**
|
|
|
11
11
|
```bash
|
|
12
12
|
npm install @thewhileloop/whileui
|
|
13
13
|
# or
|
|
14
|
-
|
|
14
|
+
bun add @thewhileloop/whileui
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
### Required Peer Dependencies
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
bun add react@^19.0.0 react-native@^0.81.0 uniwind@^1.0.0 tailwindcss@^4.0.0
|
|
21
|
+
bun add react-native-reanimated react-native-safe-area-context react-native-screens
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
### Portal Dependencies (Select, Popover, Tooltip, HoverCard)
|
|
25
25
|
|
|
26
26
|
```bash
|
|
27
|
-
|
|
27
|
+
bun add @rn-primitives/portal @rn-primitives/hooks @rn-primitives/slot @rn-primitives/select @rn-primitives/popover @rn-primitives/tooltip @rn-primitives/hover-card
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
### Setup Uniwind (required)
|
|
@@ -174,6 +174,9 @@ function MyScreen() {
|
|
|
174
174
|
| **Text** | Themed text with variant support |
|
|
175
175
|
| **View** | Themed view wrapper |
|
|
176
176
|
| **Pressable** | Themed pressable wrapper |
|
|
177
|
+
| **Stack** | Vertical flex layout with gap |
|
|
178
|
+
| **Row** | Horizontal flex layout with gap |
|
|
179
|
+
| **Box** | Flexible container with variants |
|
|
177
180
|
|
|
178
181
|
### Form Controls
|
|
179
182
|
|
|
@@ -240,21 +243,21 @@ function MyScreen() {
|
|
|
240
243
|
|
|
241
244
|
### Auth
|
|
242
245
|
|
|
243
|
-
| Block | Description
|
|
244
|
-
| ---------------------- |
|
|
245
|
-
| **SignInForm** | Email/password sign in
|
|
246
|
-
| **SignUpForm** | Registration form
|
|
247
|
-
| **ForgotPasswordForm** | Password reset request
|
|
248
|
-
| **ResetPasswordForm** | Set new password
|
|
249
|
-
| **VerifyEmailForm** | Email verification code input
|
|
250
|
-
| **SocialConnections** | OAuth provider buttons
|
|
251
|
-
| **UserMenu** | Profile dropdown for auth flows
|
|
246
|
+
| Block | Description |
|
|
247
|
+
| ---------------------- | ------------------------------------- |
|
|
248
|
+
| **SignInForm** | Email/password sign in with callbacks |
|
|
249
|
+
| **SignUpForm** | Registration form with callbacks |
|
|
250
|
+
| **ForgotPasswordForm** | Password reset request |
|
|
251
|
+
| **ResetPasswordForm** | Set new password |
|
|
252
|
+
| **VerifyEmailForm** | Email verification code input |
|
|
253
|
+
| **SocialConnections** | OAuth provider buttons |
|
|
254
|
+
| **UserMenu** | Profile dropdown for auth flows |
|
|
252
255
|
|
|
253
256
|
### Navigation
|
|
254
257
|
|
|
255
258
|
| Block | Description |
|
|
256
259
|
| --------------------- | ------------------------------------------------- |
|
|
257
|
-
| **AppShell** | Layout shell with slots
|
|
260
|
+
| **AppShell** | Layout shell with header/footer/bottomNav slots |
|
|
258
261
|
| **NavigationSidebar** | Sidebar nav with grouped sections and footer slot |
|
|
259
262
|
| **Header** | Top app bar with back/actions |
|
|
260
263
|
| **BottomNav** | Tab-style bottom navigation bar |
|
|
@@ -262,21 +265,17 @@ function MyScreen() {
|
|
|
262
265
|
| **TabBar** | Top tab bar with indicator |
|
|
263
266
|
| **DrawerMenu** | Drawer with sections and items |
|
|
264
267
|
|
|
265
|
-
###
|
|
266
|
-
|
|
267
|
-
| Block | Description |
|
|
268
|
-
| -------------------- | ------------------------------------ |
|
|
269
|
-
| **ListItem** | Title/subtitle row |
|
|
270
|
-
| **NotificationItem** | Notification row with metadata |
|
|
271
|
-
| **SwipeableItem** | Swipe actions (left/right) list item |
|
|
272
|
-
|
|
273
|
-
### Commerce
|
|
268
|
+
### Layout
|
|
274
269
|
|
|
275
|
-
| Block
|
|
276
|
-
|
|
|
277
|
-
| **
|
|
278
|
-
| **
|
|
279
|
-
| **
|
|
270
|
+
| Block | Description |
|
|
271
|
+
| ---------------------- | ----------------------------------------------- |
|
|
272
|
+
| **ActionBar** | Sticky bottom action row with safe-area padding |
|
|
273
|
+
| **ConfirmActionSheet** | Reusable destructive confirmation sheet |
|
|
274
|
+
| **FormModalScreen** | Modal scaffold for forms with loading states |
|
|
275
|
+
| **EmptyState** | Empty content placeholder |
|
|
276
|
+
| **ErrorState** | Error display with retry |
|
|
277
|
+
| **LoadingScreen** | Full-screen loading indicator |
|
|
278
|
+
| **OnboardingScreen** | Onboarding flow screen |
|
|
280
279
|
|
|
281
280
|
### Profile & Settings
|
|
282
281
|
|
|
@@ -287,6 +286,24 @@ function MyScreen() {
|
|
|
287
286
|
| **SettingsSection** | Section header with optional action |
|
|
288
287
|
| **SettingsItem** | Row for toggles/links/settings |
|
|
289
288
|
|
|
289
|
+
### Lists
|
|
290
|
+
|
|
291
|
+
| Block | Description |
|
|
292
|
+
| -------------------- | ----------------------------------- |
|
|
293
|
+
| **ListItem** | Title/subtitle row |
|
|
294
|
+
| **NotificationItem** | Notification row with metadata |
|
|
295
|
+
| **SwipeableItem** | Swipe actions list item |
|
|
296
|
+
| **TimelineFeed** | Vertical feed with connecting lines |
|
|
297
|
+
|
|
298
|
+
### Commerce
|
|
299
|
+
|
|
300
|
+
| Block | Description |
|
|
301
|
+
| ------------------- | ---------------------------------- |
|
|
302
|
+
| **ProductCard** | Product card with badge/media |
|
|
303
|
+
| **PricingCard** | Pricing tiers with feature list |
|
|
304
|
+
| **CheckoutSummary** | Cart summary with line items |
|
|
305
|
+
| **MetricCard** | Stats/progress card for dashboards |
|
|
306
|
+
|
|
290
307
|
### Splash & States
|
|
291
308
|
|
|
292
309
|
| Block | Description |
|
|
@@ -298,73 +315,82 @@ function MyScreen() {
|
|
|
298
315
|
| **LoadingScreen** | Full-screen loading state |
|
|
299
316
|
| **EmptyState** | Placeholder empty/content-less |
|
|
300
317
|
| **ErrorState** | Error message with action |
|
|
301
|
-
| **UserMenu** | Avatar dropdown with user info |
|
|
302
318
|
|
|
303
|
-
###
|
|
319
|
+
### Media
|
|
304
320
|
|
|
305
|
-
| Block
|
|
306
|
-
|
|
|
307
|
-
| **
|
|
308
|
-
| **Header** | App header with title & actions |
|
|
309
|
-
| **BottomNav** | Bottom tab navigation |
|
|
310
|
-
| **FloatingBottomNav** | Floating bottom navigation |
|
|
311
|
-
| **TabBar** | Horizontal tab bar |
|
|
312
|
-
| **DrawerMenu** | Side drawer navigation |
|
|
321
|
+
| Block | Description |
|
|
322
|
+
| -------------- | ----------------------------------- |
|
|
323
|
+
| **SmartImage** | Image with aspect ratio and loading |
|
|
313
324
|
|
|
314
|
-
|
|
325
|
+
## Layout Primitives (Stack, Row, Box)
|
|
315
326
|
|
|
316
|
-
|
|
317
|
-
| ---------------------- | ----------------------------------------------- |
|
|
318
|
-
| **AppShell** | Main app layout wrapper |
|
|
319
|
-
| **ActionBar** | Sticky bottom action row with safe-area padding |
|
|
320
|
-
| **ConfirmActionSheet** | Reusable destructive confirmation sheet |
|
|
321
|
-
| **EmptyState** | Empty content placeholder |
|
|
322
|
-
| **ErrorState** | Error display with retry |
|
|
323
|
-
| **LoadingScreen** | Full-screen loading indicator |
|
|
324
|
-
| **OnboardingScreen** | Onboarding flow screen |
|
|
327
|
+
Use `Stack` for vertical layouts, `Row` for horizontal layouts. Both support `gap`, `align`, and `justify` variants.
|
|
325
328
|
|
|
326
|
-
|
|
329
|
+
```tsx
|
|
330
|
+
import { Stack, Row, Box } from '@thewhileloop/whileui';
|
|
327
331
|
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
332
|
+
<Stack gap="lg">
|
|
333
|
+
<Text>Title</Text>
|
|
334
|
+
<Row gap="md" justify="between">
|
|
335
|
+
<Button>
|
|
336
|
+
<ButtonText>Cancel</ButtonText>
|
|
337
|
+
</Button>
|
|
338
|
+
<Button>
|
|
339
|
+
<ButtonText>Save</ButtonText>
|
|
340
|
+
</Button>
|
|
341
|
+
</Row>
|
|
342
|
+
</Stack>;
|
|
343
|
+
```
|
|
333
344
|
|
|
334
|
-
|
|
345
|
+
| Prop | Stack/Row | Values |
|
|
346
|
+
| ------- | ------------------------------------------------------------------- | ------------------------ |
|
|
347
|
+
| gap | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` | Spacing between children |
|
|
348
|
+
| align | `'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'` | Cross-axis alignment |
|
|
349
|
+
| justify | `'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'` | Main-axis alignment |
|
|
335
350
|
|
|
336
|
-
|
|
337
|
-
| ------------------- | -------------------------- |
|
|
338
|
-
| **ProfileHeader** | User profile header |
|
|
339
|
-
| **AccountCard** | Account info card |
|
|
340
|
-
| **SettingsItem** | Settings list item |
|
|
341
|
-
| **SettingsSection** | Settings group with header |
|
|
351
|
+
`Box` provides optional padding and margin variants for consistent spacing.
|
|
342
352
|
|
|
343
|
-
|
|
353
|
+
## Full-Screen Composition
|
|
344
354
|
|
|
345
|
-
|
|
346
|
-
| -------------------- | -------------------------------- |
|
|
347
|
-
| **ListItem** | Standard list item |
|
|
348
|
-
| **NotificationItem** | Notification list item |
|
|
349
|
-
| **SwipeableItem** | Swipeable list item with actions |
|
|
355
|
+
Standard pattern: `AppShell` with `header`, scrollable `children`, and `bottomNav`.
|
|
350
356
|
|
|
351
|
-
|
|
357
|
+
```tsx
|
|
358
|
+
import { AppShell, Header, BottomNav, ScrollView } from '@thewhileloop/whileui';
|
|
359
|
+
|
|
360
|
+
<AppShell
|
|
361
|
+
header={<Header title="Home" rightActions={[...]} />}
|
|
362
|
+
bottomNav={
|
|
363
|
+
<BottomNav
|
|
364
|
+
items={[...]}
|
|
365
|
+
activeKey="home"
|
|
366
|
+
onSelect={(key) => setTab(key)}
|
|
367
|
+
/>
|
|
368
|
+
}
|
|
369
|
+
>
|
|
370
|
+
<ScrollView className="flex-1 p-4">
|
|
371
|
+
{/* Screen content */}
|
|
372
|
+
</ScrollView>
|
|
373
|
+
</AppShell>
|
|
374
|
+
```
|
|
352
375
|
|
|
353
|
-
|
|
354
|
-
| ------------------- | -------------------------- |
|
|
355
|
-
| **ProductCard** | Product display card |
|
|
356
|
-
| **PricingCard** | Pricing tier card |
|
|
357
|
-
| **CheckoutSummary** | Order summary for checkout |
|
|
376
|
+
See [BLOCKS.md](./BLOCKS.md) for the full block catalog and [docs/BLUEPRINTS.md](./docs/BLUEPRINTS.md) for flow blueprints.
|
|
358
377
|
|
|
359
378
|
## Quick Start
|
|
360
379
|
|
|
361
380
|
```bash
|
|
362
381
|
# Install dependencies
|
|
363
|
-
|
|
382
|
+
bun install
|
|
383
|
+
|
|
384
|
+
# Run the starter app (minimal composable template)
|
|
385
|
+
cd apps/starter
|
|
386
|
+
npx expo start
|
|
364
387
|
|
|
365
|
-
#
|
|
388
|
+
# Or run the full showcase
|
|
366
389
|
cd apps/showcase
|
|
367
390
|
npx expo start
|
|
391
|
+
|
|
392
|
+
# Run on web (React Native Web)
|
|
393
|
+
npx expo start --web
|
|
368
394
|
```
|
|
369
395
|
|
|
370
396
|
## Project Structure
|
|
@@ -389,7 +415,9 @@ whileui/
|
|
|
389
415
|
│ │ ├── layout/
|
|
390
416
|
│ │ ├── profile/
|
|
391
417
|
│ │ ├── lists/
|
|
392
|
-
│ │
|
|
418
|
+
│ │ ├── commerce/
|
|
419
|
+
│ │ ├── splash/
|
|
420
|
+
│ │ └── media/
|
|
393
421
|
│ ├── lib/ # Utilities
|
|
394
422
|
│ │ ├── cn.ts # clsx + tailwind-merge
|
|
395
423
|
│ │ ├── tv.ts # tailwind-variants re-export
|
|
@@ -401,7 +429,7 @@ whileui/
|
|
|
401
429
|
│ ├── App.tsx # Component showcase
|
|
402
430
|
│ ├── global.css # Theme variables (OKLCH) — at app root!
|
|
403
431
|
│ └── metro.config.js # Uniwind + monorepo config
|
|
404
|
-
└── package.json #
|
|
432
|
+
└── package.json # bun monorepo root
|
|
405
433
|
```
|
|
406
434
|
|
|
407
435
|
## Theming
|
|
@@ -501,7 +529,7 @@ import { tv, type VariantProps } from './lib/tv';
|
|
|
501
529
|
- **Variants**: [tailwind-variants](https://www.tailwind-variants.org/) (`tv()`)
|
|
502
530
|
- **Merging**: [clsx](https://github.com/lukeed/clsx) + [tailwind-merge](https://github.com/dcastil/tailwind-merge)
|
|
503
531
|
- **Expo**: SDK 54
|
|
504
|
-
- **Monorepo**:
|
|
532
|
+
- **Monorepo**: bun + Turborepo
|
|
505
533
|
|
|
506
534
|
## License
|
|
507
535
|
|
|
@@ -542,11 +570,12 @@ import { Input } from '@thewhileloop/whileui';
|
|
|
542
570
|
<Input placeholder="Email" variant="default" value={value} onChangeText={setValue} />;
|
|
543
571
|
```
|
|
544
572
|
|
|
545
|
-
| Prop
|
|
546
|
-
|
|
|
547
|
-
| variant
|
|
548
|
-
| placeholder
|
|
549
|
-
|
|
|
573
|
+
| Prop | Type | Default | Description |
|
|
574
|
+
| -------------------- | ---------------------- | ----------- | ------------------------------------------------ |
|
|
575
|
+
| variant | `'default' \| 'error'` | `'default'` | Input style variant |
|
|
576
|
+
| placeholder | `string` | — | Placeholder text |
|
|
577
|
+
| placeholderTextColor | `string` | — | Hex for placeholder (theme-aware when provided) |
|
|
578
|
+
| editable | `boolean` | `true` | Whether input is editable |
|
|
550
579
|
|
|
551
580
|
## NumericInput
|
|
552
581
|
|
|
@@ -565,14 +594,15 @@ import { NumericInput } from '@thewhileloop/whileui';
|
|
|
565
594
|
/>;
|
|
566
595
|
```
|
|
567
596
|
|
|
568
|
-
| Prop
|
|
569
|
-
|
|
|
570
|
-
| variant
|
|
571
|
-
| size
|
|
572
|
-
| value
|
|
573
|
-
| onValueChange
|
|
574
|
-
|
|
|
575
|
-
|
|
|
597
|
+
| Prop | Type | Default | Description |
|
|
598
|
+
| -------------------- | --------------------------------- | ----------- | --------------------------------- |
|
|
599
|
+
| variant | `'default' \| 'error'` | `'default'` | Input style |
|
|
600
|
+
| size | `'default' \| 'compact'` | `'default'` | Density size |
|
|
601
|
+
| value | `number \| null` | — | Controlled numeric value |
|
|
602
|
+
| onValueChange | `(value: number \| null) => void` | — | Numeric value change callback |
|
|
603
|
+
| placeholderTextColor | `string` | — | Hex for placeholder |
|
|
604
|
+
| prefix / suffix | `ReactNode` | — | Left/right slots |
|
|
605
|
+
| showSteppers | `boolean` | `false` | Show decrement/increment controls |
|
|
576
606
|
|
|
577
607
|
## FormField
|
|
578
608
|
|
|
@@ -1011,17 +1041,45 @@ import {
|
|
|
1011
1041
|
```tsx
|
|
1012
1042
|
import { SignInForm } from '@thewhileloop/whileui';
|
|
1013
1043
|
|
|
1014
|
-
<SignInForm
|
|
1044
|
+
<SignInForm
|
|
1045
|
+
onSubmit={({ email, password }) => signIn(email, password)}
|
|
1046
|
+
onForgotPassword={() => navigate('ForgotPassword')}
|
|
1047
|
+
onSignUp={() => navigate('SignUp')}
|
|
1048
|
+
onGooglePress={() => signInWithGoogle()}
|
|
1049
|
+
onApplePress={() => signInWithApple()}
|
|
1050
|
+
/>;
|
|
1015
1051
|
```
|
|
1016
1052
|
|
|
1053
|
+
| Prop | Type | Description |
|
|
1054
|
+
| ---------------- | ------------------------------------- | ---------------------------- |
|
|
1055
|
+
| onSubmit | `(data: { email, password }) => void` | Called on sign-in submit |
|
|
1056
|
+
| onForgotPassword | `() => void` | Called when "Forgot?" tapped |
|
|
1057
|
+
| onSignUp | `() => void` | Called when "Sign Up" tapped |
|
|
1058
|
+
| onGooglePress | `() => void` | Called when Google tapped |
|
|
1059
|
+
| onApplePress | `() => void` | Called when Apple tapped |
|
|
1060
|
+
|
|
1017
1061
|
## SignUpForm
|
|
1018
1062
|
|
|
1019
1063
|
```tsx
|
|
1020
1064
|
import { SignUpForm } from '@thewhileloop/whileui';
|
|
1021
1065
|
|
|
1022
|
-
<SignUpForm
|
|
1066
|
+
<SignUpForm
|
|
1067
|
+
onSubmit={({ firstName, lastName, email, password }) =>
|
|
1068
|
+
signUp(firstName, lastName, email, password)
|
|
1069
|
+
}
|
|
1070
|
+
onSignIn={() => navigate('SignIn')}
|
|
1071
|
+
onGooglePress={() => signInWithGoogle()}
|
|
1072
|
+
onApplePress={() => signInWithApple()}
|
|
1073
|
+
/>;
|
|
1023
1074
|
```
|
|
1024
1075
|
|
|
1076
|
+
| Prop | Type | Description |
|
|
1077
|
+
| ------------- | ---------------------------------------------------------- | ---------------------------- |
|
|
1078
|
+
| onSubmit | `(data: { firstName, lastName, email, password }) => void` | Called on registration |
|
|
1079
|
+
| onSignIn | `() => void` | Called when "Sign In" tapped |
|
|
1080
|
+
| onGooglePress | `() => void` | Called when Google tapped |
|
|
1081
|
+
| onApplePress | `() => void` | Called when Apple tapped |
|
|
1082
|
+
|
|
1025
1083
|
## BottomNav
|
|
1026
1084
|
|
|
1027
1085
|
```tsx
|
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface ForgotPasswordFormProps {
|
|
2
|
+
/** Called when user submits email. Receives form values. */
|
|
3
|
+
onSubmit?: (data: {
|
|
4
|
+
email: string;
|
|
5
|
+
}) => void;
|
|
6
|
+
/** Called when user taps "Back to Sign In" link. */
|
|
7
|
+
onBackToSignIn?: () => void;
|
|
8
|
+
}
|
|
9
|
+
export declare function ForgotPasswordForm({ onSubmit, onBackToSignIn }?: ForgotPasswordFormProps): import("react/jsx-runtime").JSX.Element;
|
|
2
10
|
//# sourceMappingURL=forgot-password-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"forgot-password-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/forgot-password-form.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"forgot-password-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/forgot-password-form.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,uBAAuB;IACtC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7C,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAE,uBAA4B,2CAyC5F"}
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { View } from 'react-native';
|
|
4
|
+
import { Pressable } from '../../components/pressable';
|
|
3
5
|
import { Button, ButtonText } from '../../components/button';
|
|
4
6
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/card';
|
|
5
7
|
import { Input } from '../../components/input';
|
|
6
8
|
import { Label } from '../../components/label';
|
|
7
9
|
import { Text } from '../../components/text';
|
|
8
|
-
export function ForgotPasswordForm() {
|
|
9
|
-
|
|
10
|
+
export function ForgotPasswordForm({ onSubmit, onBackToSignIn } = {}) {
|
|
11
|
+
const [email, setEmail] = useState('');
|
|
12
|
+
const handleSubmit = () => {
|
|
13
|
+
onSubmit?.({ email });
|
|
14
|
+
};
|
|
15
|
+
return (_jsxs(Card, { className: "w-full max-w-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Forgot Password" }), _jsx(CardDescription, { children: "Enter your email to reset your password." })] }), _jsx(CardContent, { className: "gap-4", children: _jsxs(View, { className: "gap-2", children: [_jsx(Label, { nativeID: "forgot-email", children: "Email" }), _jsx(Input, { placeholder: "you@email.com", keyboardType: "email-address", value: email, onChangeText: setEmail })] }) }), _jsxs(CardFooter, { className: "flex-col gap-4", children: [_jsx(Button, { className: "w-full", onPress: handleSubmit, children: _jsx(ButtonText, { children: "Send Reset Link" }) }), _jsx(Pressable, { onPress: onBackToSignIn, className: "flex-row justify-center", accessibilityRole: "button", children: _jsxs(Text, { className: "text-sm text-center text-muted-foreground", children: ["Remember your password?", ' ', _jsx(Text, { className: "text-primary underline font-medium", children: "Back to Sign In" })] }) })] })] }));
|
|
10
16
|
}
|
|
11
17
|
//# sourceMappingURL=forgot-password-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"forgot-password-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/forgot-password-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"forgot-password-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/forgot-password-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAS7C,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAE,cAAc,KAA8B,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,aAC/B,MAAC,UAAU,eACT,KAAC,SAAS,kCAA4B,EACtC,KAAC,eAAe,2DAA2D,IAChE,EACb,KAAC,WAAW,IAAC,SAAS,EAAC,OAAO,YAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,OAAO,aACrB,KAAC,KAAK,IAAC,QAAQ,EAAC,cAAc,sBAAc,EAC5C,KAAC,KAAK,IACJ,WAAW,EAAC,eAAe,EAC3B,YAAY,EAAC,eAAe,EAC5B,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,GACtB,IACG,GACK,EACd,MAAC,UAAU,IAAC,SAAS,EAAC,gBAAgB,aACpC,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YAC9C,KAAC,UAAU,kCAA6B,GACjC,EACT,KAAC,SAAS,IACR,OAAO,EAAE,cAAc,EACvB,SAAS,EAAC,yBAAyB,EACnC,iBAAiB,EAAC,QAAQ,YAE1B,MAAC,IAAI,IAAC,SAAS,EAAC,2CAA2C,wCACjC,GAAG,EAC3B,KAAC,IAAI,IAAC,SAAS,EAAC,oCAAoC,gCAAuB,IACtE,GACG,IACD,IACR,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface ResetPasswordFormProps {
|
|
2
|
+
/** Called when user submits new password. Receives form values. */
|
|
3
|
+
onSubmit?: (data: {
|
|
4
|
+
password: string;
|
|
5
|
+
confirmPassword: string;
|
|
6
|
+
}) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare function ResetPasswordForm({ onSubmit }?: ResetPasswordFormProps): import("react/jsx-runtime").JSX.Element;
|
|
2
9
|
//# sourceMappingURL=reset-password-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reset-password-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/reset-password-form.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reset-password-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/reset-password-form.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,sBAAsB;IACrC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,GAAE,sBAA2B,2CAyC1E"}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { View } from 'react-native';
|
|
3
4
|
import { Button, ButtonText } from '../../components/button';
|
|
4
5
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/card';
|
|
5
6
|
import { Input } from '../../components/input';
|
|
6
7
|
import { Label } from '../../components/label';
|
|
7
|
-
export function ResetPasswordForm() {
|
|
8
|
-
|
|
8
|
+
export function ResetPasswordForm({ onSubmit } = {}) {
|
|
9
|
+
const [password, setPassword] = useState('');
|
|
10
|
+
const [confirmPassword, setConfirmPassword] = useState('');
|
|
11
|
+
const handleSubmit = () => {
|
|
12
|
+
onSubmit?.({ password, confirmPassword });
|
|
13
|
+
};
|
|
14
|
+
return (_jsxs(Card, { className: "w-full max-w-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Reset Password" }), _jsx(CardDescription, { children: "Enter your new password below." })] }), _jsxs(CardContent, { className: "gap-4", children: [_jsxs(View, { className: "gap-2", children: [_jsx(Label, { nativeID: "new-password", children: "New Password" }), _jsx(Input, { placeholder: "********", secureTextEntry: true, value: password, onChangeText: setPassword })] }), _jsxs(View, { className: "gap-2", children: [_jsx(Label, { nativeID: "confirm-password", children: "Confirm Password" }), _jsx(Input, { placeholder: "********", secureTextEntry: true, value: confirmPassword, onChangeText: setConfirmPassword })] })] }), _jsx(CardFooter, { children: _jsx(Button, { className: "w-full", onPress: handleSubmit, children: _jsx(ButtonText, { children: "Reset Password" }) }) })] }));
|
|
9
15
|
}
|
|
10
16
|
//# sourceMappingURL=reset-password-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reset-password-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/reset-password-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"reset-password-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/reset-password-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAO/C,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,KAA6B,EAAE;IACzE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE3D,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,aAC/B,MAAC,UAAU,eACT,KAAC,SAAS,iCAA2B,EACrC,KAAC,eAAe,iDAAiD,IACtD,EACb,MAAC,WAAW,IAAC,SAAS,EAAC,OAAO,aAC5B,MAAC,IAAI,IAAC,SAAS,EAAC,OAAO,aACrB,KAAC,KAAK,IAAC,QAAQ,EAAC,cAAc,6BAAqB,EACnD,KAAC,KAAK,IACJ,WAAW,EAAC,UAAU,EACtB,eAAe,QACf,KAAK,EAAE,QAAQ,EACf,YAAY,EAAE,WAAW,GACzB,IACG,EACP,MAAC,IAAI,IAAC,SAAS,EAAC,OAAO,aACrB,KAAC,KAAK,IAAC,QAAQ,EAAC,kBAAkB,iCAAyB,EAC3D,KAAC,KAAK,IACJ,WAAW,EAAC,UAAU,EACtB,eAAe,QACf,KAAK,EAAE,eAAe,EACtB,YAAY,EAAE,kBAAkB,GAChC,IACG,IACK,EACd,KAAC,UAAU,cACT,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAY,YAC9C,KAAC,UAAU,iCAA4B,GAChC,GACE,IACR,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -1,2 +1,17 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface SignInFormProps {
|
|
2
|
+
/** Called when user submits email/password. Receives form values. */
|
|
3
|
+
onSubmit?: (data: {
|
|
4
|
+
email: string;
|
|
5
|
+
password: string;
|
|
6
|
+
}) => void;
|
|
7
|
+
/** Called when user taps "Forgot?" link. */
|
|
8
|
+
onForgotPassword?: () => void;
|
|
9
|
+
/** Called when user taps "Sign Up" link. */
|
|
10
|
+
onSignUp?: () => void;
|
|
11
|
+
/** Called when user taps Google button. */
|
|
12
|
+
onGooglePress?: () => void;
|
|
13
|
+
/** Called when user taps Apple button. */
|
|
14
|
+
onApplePress?: () => void;
|
|
15
|
+
}
|
|
16
|
+
export declare function SignInForm({ onSubmit, onForgotPassword, onSignUp, onGooglePress, onApplePress, }?: SignInFormProps): import("react/jsx-runtime").JSX.Element;
|
|
2
17
|
//# sourceMappingURL=sign-in-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign-in-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/sign-in-form.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sign-in-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/sign-in-form.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,YAAY,GACb,GAAE,eAAoB,2CAuEtB"}
|
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { View } from 'react-native';
|
|
4
|
+
import { Pressable } from '../../components/pressable';
|
|
3
5
|
import { Button, ButtonText } from '../../components/button';
|
|
4
6
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/card';
|
|
5
7
|
import { Input } from '../../components/input';
|
|
6
8
|
import { Label } from '../../components/label';
|
|
7
9
|
import { Separator } from '../../components/separator';
|
|
8
10
|
import { Text } from '../../components/text';
|
|
9
|
-
export function SignInForm() {
|
|
10
|
-
|
|
11
|
+
export function SignInForm({ onSubmit, onForgotPassword, onSignUp, onGooglePress, onApplePress, } = {}) {
|
|
12
|
+
const [email, setEmail] = useState('');
|
|
13
|
+
const [password, setPassword] = useState('');
|
|
14
|
+
const handleSubmit = () => {
|
|
15
|
+
onSubmit?.({ email, password });
|
|
16
|
+
};
|
|
17
|
+
return (_jsxs(Card, { className: "w-full max-w-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Welcome back" }), _jsx(CardDescription, { children: "Sign in to your account to continue." })] }), _jsxs(CardContent, { className: "gap-4", children: [_jsxs(View, { className: "gap-2", children: [_jsx(Label, { nativeID: "email", children: "Email" }), _jsx(Input, { placeholder: "you@email.com", keyboardType: "email-address", value: email, onChangeText: setEmail })] }), _jsxs(View, { className: "gap-2", children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Label, { nativeID: "password", children: "Password" }), _jsx(Pressable, { onPress: onForgotPassword, accessibilityRole: "button", children: _jsx(Text, { className: "text-sm text-primary font-medium", children: "Forgot?" }) })] }), _jsx(Input, { placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", secureTextEntry: true, value: password, onChangeText: setPassword })] })] }), _jsxs(CardFooter, { className: "flex-col gap-4", children: [_jsx(Button, { className: "w-full", onPress: handleSubmit, children: _jsx(ButtonText, { children: "Sign In" }) }), _jsxs(View, { className: "flex-row items-center gap-3 w-full", children: [_jsx(Separator, { className: "flex-1" }), _jsx(Text, { className: "text-xs text-muted-foreground uppercase", children: "or" }), _jsx(Separator, { className: "flex-1" })] }), _jsxs(View, { className: "flex-row gap-3 w-full", children: [_jsx(Button, { variant: "outline", className: "flex-1", onPress: onGooglePress, children: _jsx(ButtonText, { children: "Google" }) }), _jsx(Button, { variant: "outline", className: "flex-1", onPress: onApplePress, children: _jsx(ButtonText, { children: "Apple" }) })] }), _jsx(Pressable, { onPress: onSignUp, className: "flex-row justify-center", accessibilityRole: "button", children: _jsxs(Text, { className: "text-sm text-center text-muted-foreground", children: ["Don't have an account? ", _jsx(Text, { className: "text-primary font-medium", children: "Sign Up" })] }) })] })] }));
|
|
11
18
|
}
|
|
12
19
|
//# sourceMappingURL=sign-in-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign-in-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/sign-in-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"sign-in-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/sign-in-form.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,17 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface SignUpFormProps {
|
|
2
|
+
/** Called when user submits registration. Receives form values. */
|
|
3
|
+
onSubmit?: (data: {
|
|
4
|
+
firstName: string;
|
|
5
|
+
lastName: string;
|
|
6
|
+
email: string;
|
|
7
|
+
password: string;
|
|
8
|
+
}) => void;
|
|
9
|
+
/** Called when user taps "Sign In" link. */
|
|
10
|
+
onSignIn?: () => void;
|
|
11
|
+
/** Called when user taps Google button. */
|
|
12
|
+
onGooglePress?: () => void;
|
|
13
|
+
/** Called when user taps Apple button. */
|
|
14
|
+
onApplePress?: () => void;
|
|
15
|
+
}
|
|
16
|
+
export declare function SignUpForm({ onSubmit, onSignIn, onGooglePress, onApplePress, }?: SignUpFormProps): import("react/jsx-runtime").JSX.Element;
|
|
2
17
|
//# sourceMappingURL=sign-up-form.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign-up-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/sign-up-form.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sign-up-form.d.ts","sourceRoot":"","sources":["../../../src/blocks/auth/sign-up-form.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,IAAI,CAAC;IACX,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,GACb,GAAE,eAAoB,2CA8EtB"}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import { View } from 'react-native';
|
|
4
|
+
import { Pressable } from '../../components/pressable';
|
|
3
5
|
import { Button, ButtonText } from '../../components/button';
|
|
4
6
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from '../../components/card';
|
|
5
7
|
import { Input } from '../../components/input';
|
|
6
8
|
import { Label } from '../../components/label';
|
|
7
9
|
import { Separator } from '../../components/separator';
|
|
8
10
|
import { Text } from '../../components/text';
|
|
9
|
-
export function SignUpForm() {
|
|
10
|
-
|
|
11
|
+
export function SignUpForm({ onSubmit, onSignIn, onGooglePress, onApplePress, } = {}) {
|
|
12
|
+
const [firstName, setFirstName] = useState('');
|
|
13
|
+
const [lastName, setLastName] = useState('');
|
|
14
|
+
const [email, setEmail] = useState('');
|
|
15
|
+
const [password, setPassword] = useState('');
|
|
16
|
+
const handleSubmit = () => {
|
|
17
|
+
onSubmit?.({ firstName, lastName, email, password });
|
|
18
|
+
};
|
|
19
|
+
return (_jsxs(Card, { className: "w-full max-w-sm", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Create an account" }), _jsx(CardDescription, { children: "Enter your details to get started." })] }), _jsxs(CardContent, { className: "gap-4", children: [_jsxs(View, { className: "flex-row gap-3", children: [_jsxs(View, { className: "flex-1 gap-2", children: [_jsx(Label, { nativeID: "first-name", children: "First name" }), _jsx(Input, { placeholder: "Jane", value: firstName, onChangeText: setFirstName })] }), _jsxs(View, { className: "flex-1 gap-2", children: [_jsx(Label, { nativeID: "last-name", children: "Last name" }), _jsx(Input, { placeholder: "Doe", value: lastName, onChangeText: setLastName })] })] }), _jsxs(View, { className: "gap-2", children: [_jsx(Label, { nativeID: "signup-email", children: "Email" }), _jsx(Input, { placeholder: "you@email.com", keyboardType: "email-address", value: email, onChangeText: setEmail })] }), _jsxs(View, { className: "gap-2", children: [_jsx(Label, { nativeID: "signup-password", children: "Password" }), _jsx(Input, { placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", secureTextEntry: true, value: password, onChangeText: setPassword })] })] }), _jsxs(CardFooter, { className: "flex-col gap-4", children: [_jsx(Button, { className: "w-full", onPress: handleSubmit, children: _jsx(ButtonText, { children: "Create Account" }) }), _jsxs(View, { className: "flex-row items-center gap-3 w-full", children: [_jsx(Separator, { className: "flex-1" }), _jsx(Text, { className: "text-xs text-muted-foreground uppercase", children: "or" }), _jsx(Separator, { className: "flex-1" })] }), _jsxs(View, { className: "flex-row gap-3 w-full", children: [_jsx(Button, { variant: "outline", className: "flex-1", onPress: onGooglePress, children: _jsx(ButtonText, { children: "Google" }) }), _jsx(Button, { variant: "outline", className: "flex-1", onPress: onApplePress, children: _jsx(ButtonText, { children: "Apple" }) })] }), _jsx(Pressable, { onPress: onSignIn, className: "flex-row justify-center", accessibilityRole: "button", children: _jsxs(Text, { className: "text-sm text-center text-muted-foreground", children: ["Already have an account? ", _jsx(Text, { className: "text-primary font-medium", children: "Sign In" })] }) })] })] }));
|
|
11
20
|
}
|
|
12
21
|
//# sourceMappingURL=sign-up-form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sign-up-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/sign-up-form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"sign-up-form.js","sourceRoot":"","sources":["../../../src/blocks/auth/sign-up-form.tsx"],"names":[],"mappings":"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"}
|