@thewhileloop/whileui 0.1.2 → 0.2.1
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 +283 -38
- package/dist/blocks/layout/action-bar.d.ts +8 -0
- package/dist/blocks/layout/action-bar.d.ts.map +1 -0
- package/dist/blocks/layout/action-bar.js +10 -0
- package/dist/blocks/layout/action-bar.js.map +1 -0
- package/dist/blocks/layout/confirm-action-sheet.d.ts +24 -0
- package/dist/blocks/layout/confirm-action-sheet.d.ts.map +1 -0
- package/dist/blocks/layout/confirm-action-sheet.js +41 -0
- package/dist/blocks/layout/confirm-action-sheet.js.map +1 -0
- package/dist/blocks/layout/index.d.ts +2 -0
- package/dist/blocks/layout/index.d.ts.map +1 -1
- package/dist/blocks/layout/index.js +2 -0
- package/dist/blocks/layout/index.js.map +1 -1
- package/dist/blocks/navigation/index.d.ts +1 -0
- package/dist/blocks/navigation/index.d.ts.map +1 -1
- package/dist/blocks/navigation/index.js +1 -0
- package/dist/blocks/navigation/index.js.map +1 -1
- package/dist/blocks/navigation/navigation-sidebar.d.ts +23 -0
- package/dist/blocks/navigation/navigation-sidebar.d.ts.map +1 -0
- package/dist/blocks/navigation/navigation-sidebar.js +11 -0
- package/dist/blocks/navigation/navigation-sidebar.js.map +1 -0
- package/dist/components/card/card.d.ts +81 -2
- package/dist/components/card/card.d.ts.map +1 -1
- package/dist/components/card/card.js +27 -6
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/card/index.d.ts +1 -1
- package/dist/components/card/index.d.ts.map +1 -1
- package/dist/components/card/index.js +1 -1
- package/dist/components/card/index.js.map +1 -1
- package/dist/components/data-row/data-row.d.ts +69 -0
- package/dist/components/data-row/data-row.d.ts.map +1 -0
- package/dist/components/data-row/data-row.js +89 -0
- package/dist/components/data-row/data-row.js.map +1 -0
- package/dist/components/data-row/index.d.ts +2 -0
- package/dist/components/data-row/index.d.ts.map +1 -0
- package/dist/components/data-row/index.js +2 -0
- package/dist/components/data-row/index.js.map +1 -0
- package/dist/components/form-field/form-field.d.ts +124 -0
- package/dist/components/form-field/form-field.d.ts.map +1 -0
- package/dist/components/form-field/form-field.js +68 -0
- package/dist/components/form-field/form-field.js.map +1 -0
- package/dist/components/form-field/index.d.ts +2 -0
- package/dist/components/form-field/index.d.ts.map +1 -0
- package/dist/components/form-field/index.js +2 -0
- package/dist/components/form-field/index.js.map +1 -0
- package/dist/components/labeled-field/index.d.ts +2 -0
- package/dist/components/labeled-field/index.d.ts.map +1 -0
- package/dist/components/labeled-field/index.js +2 -0
- package/dist/components/labeled-field/index.js.map +1 -0
- package/dist/components/labeled-field/labeled-field.d.ts +19 -0
- package/dist/components/labeled-field/labeled-field.d.ts.map +1 -0
- package/dist/components/labeled-field/labeled-field.js +15 -0
- package/dist/components/labeled-field/labeled-field.js.map +1 -0
- package/dist/components/numeric-input/index.d.ts +2 -0
- package/dist/components/numeric-input/index.d.ts.map +1 -0
- package/dist/components/numeric-input/index.js +2 -0
- package/dist/components/numeric-input/index.js.map +1 -0
- package/dist/components/numeric-input/numeric-input.d.ts +119 -0
- package/dist/components/numeric-input/numeric-input.d.ts.map +1 -0
- package/dist/components/numeric-input/numeric-input.js +129 -0
- package/dist/components/numeric-input/numeric-input.js.map +1 -0
- package/dist/components/segmented-control/index.d.ts +2 -0
- package/dist/components/segmented-control/index.d.ts.map +1 -0
- package/dist/components/segmented-control/index.js +2 -0
- package/dist/components/segmented-control/index.js.map +1 -0
- package/dist/components/segmented-control/segmented-control.d.ts +281 -0
- package/dist/components/segmented-control/segmented-control.d.ts.map +1 -0
- package/dist/components/segmented-control/segmented-control.js +112 -0
- package/dist/components/segmented-control/segmented-control.js.map +1 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/index.d.ts +1 -0
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/lib/index.js +1 -0
- package/dist/lib/index.js.map +1 -1
- package/dist/lib/theme-bridge.d.ts +29 -0
- package/dist/lib/theme-bridge.d.ts.map +1 -0
- package/dist/lib/theme-bridge.js +79 -0
- package/dist/lib/theme-bridge.js.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
Beautiful, accessible, themeable React Native components built with [Uniwind](https://uniwind.dev) + Tailwind CSS v4. Inspired by [shadcn/ui](https://ui.shadcn.com/).
|
|
6
6
|
|
|
7
|
-
Current version: **0.1
|
|
7
|
+
Current version: **0.2.1**
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
@@ -177,27 +177,32 @@ function MyScreen() {
|
|
|
177
177
|
|
|
178
178
|
### Form Controls
|
|
179
179
|
|
|
180
|
-
| Component
|
|
181
|
-
|
|
|
182
|
-
| **Button**
|
|
183
|
-
| **Input**
|
|
184
|
-
| **
|
|
185
|
-
| **
|
|
186
|
-
| **
|
|
187
|
-
| **
|
|
188
|
-
| **
|
|
189
|
-
| **
|
|
190
|
-
| **
|
|
191
|
-
| **
|
|
180
|
+
| Component | Variants | Notes |
|
|
181
|
+
| -------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------- |
|
|
182
|
+
| **Button** | default, destructive, outline, secondary, ghost, link | 4 sizes, ButtonText & ButtonIcon sub-components |
|
|
183
|
+
| **Input** | default, error | TextInput wrapper with themed styling |
|
|
184
|
+
| **NumericInput** | default, error | Numeric input with prefix/suffix slots, optional steppers, and compact size |
|
|
185
|
+
| **FormField** | default, compact | Compound API: FormField, FormLabel, FormControl, FormHint, FormMessage |
|
|
186
|
+
| **LabeledField** | default, compact | Field wrapper with label/helper/error plus left/right slots |
|
|
187
|
+
| **Textarea** | — | Multi-line text input |
|
|
188
|
+
| **Checkbox** | — | Controlled/uncontrolled, accessibility roles |
|
|
189
|
+
| **Switch** | — | Controlled/uncontrolled, accessibility roles |
|
|
190
|
+
| **RadioGroup** | — | RadioGroup + RadioGroupItem |
|
|
191
|
+
| **Select** | — | Uses `SelectOption` type `{value, label}`. Includes SelectGroup, SelectLabel, SelectSeparator |
|
|
192
|
+
| **Label** | — | Form field label |
|
|
193
|
+
| **SegmentedControl** | single select | SegmentedControl, SegmentedControlItem, SegmentedControlItemText with wrapping layout support |
|
|
194
|
+
| **Toggle** | default, outline | ToggleText sub-component |
|
|
195
|
+
| **ToggleGroup** | single, multiple | Group of toggle items |
|
|
192
196
|
|
|
193
197
|
### Display
|
|
194
198
|
|
|
195
199
|
| Component | Variants | Notes |
|
|
196
200
|
| --------------- | ------------------------------------------------- | ------------------------------------------------------------------------------- |
|
|
197
|
-
| **Card** |
|
|
201
|
+
| **Card** | padding (none, sm, default, lg), unstyled | Compound: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
|
|
198
202
|
| **Badge** | default, secondary, destructive, outline, success | BadgeText sub-component |
|
|
199
203
|
| **Alert** | default, destructive, success, warning | AlertTitle & AlertDescription |
|
|
200
204
|
| **Avatar** | sm, default, lg | AvatarImage + AvatarFallback |
|
|
205
|
+
| **DataRow** | default, compact | DataRow, DataRowLeft/Center/Right, DataRowLabel/Description/Value |
|
|
201
206
|
| **Separator** | horizontal, vertical | Themed divider |
|
|
202
207
|
| **Progress** | sm, default, lg | Value-based progress bar with accessibility |
|
|
203
208
|
| **Spinner** | sm, default, lg | ActivityIndicator wrapper |
|
|
@@ -247,14 +252,15 @@ function MyScreen() {
|
|
|
247
252
|
|
|
248
253
|
### Navigation
|
|
249
254
|
|
|
250
|
-
| Block | Description
|
|
251
|
-
| --------------------- |
|
|
252
|
-
| **AppShell** | Layout shell with slots for navigation
|
|
253
|
-
| **
|
|
254
|
-
| **
|
|
255
|
-
| **
|
|
256
|
-
| **
|
|
257
|
-
| **
|
|
255
|
+
| Block | Description |
|
|
256
|
+
| --------------------- | ------------------------------------------------- |
|
|
257
|
+
| **AppShell** | Layout shell with slots for navigation |
|
|
258
|
+
| **NavigationSidebar** | Sidebar nav with grouped sections and footer slot |
|
|
259
|
+
| **Header** | Top app bar with back/actions |
|
|
260
|
+
| **BottomNav** | Tab-style bottom navigation bar |
|
|
261
|
+
| **FloatingBottomNav** | Elevated bottom nav with safe area support |
|
|
262
|
+
| **TabBar** | Top tab bar with indicator |
|
|
263
|
+
| **DrawerMenu** | Drawer with sections and items |
|
|
258
264
|
|
|
259
265
|
### Lists
|
|
260
266
|
|
|
@@ -296,23 +302,26 @@ function MyScreen() {
|
|
|
296
302
|
|
|
297
303
|
### Navigation
|
|
298
304
|
|
|
299
|
-
| Block | Description
|
|
300
|
-
| --------------------- |
|
|
301
|
-
| **
|
|
302
|
-
| **
|
|
303
|
-
| **
|
|
304
|
-
| **
|
|
305
|
-
| **
|
|
305
|
+
| Block | Description |
|
|
306
|
+
| --------------------- | --------------------------------- |
|
|
307
|
+
| **NavigationSidebar** | Sidebar nav with grouped sections |
|
|
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 |
|
|
306
313
|
|
|
307
314
|
### Layout
|
|
308
315
|
|
|
309
|
-
| Block
|
|
310
|
-
|
|
|
311
|
-
| **AppShell**
|
|
312
|
-
| **
|
|
313
|
-
| **
|
|
314
|
-
| **
|
|
315
|
-
| **
|
|
316
|
+
| Block | Description |
|
|
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 |
|
|
316
325
|
|
|
317
326
|
### Splash
|
|
318
327
|
|
|
@@ -368,6 +377,10 @@ whileui/
|
|
|
368
377
|
│ ├── components/ # All components (copy these!)
|
|
369
378
|
│ │ ├── button/
|
|
370
379
|
│ │ ├── card/
|
|
380
|
+
│ │ ├── form-field/
|
|
381
|
+
│ │ ├── numeric-input/
|
|
382
|
+
│ │ ├── segmented-control/
|
|
383
|
+
│ │ ├── data-row/
|
|
371
384
|
│ │ ├── dialog/
|
|
372
385
|
│ │ └── ...
|
|
373
386
|
│ ├── blocks/ # Pre-built screens
|
|
@@ -380,7 +393,8 @@ whileui/
|
|
|
380
393
|
│ ├── lib/ # Utilities
|
|
381
394
|
│ │ ├── cn.ts # clsx + tailwind-merge
|
|
382
395
|
│ │ ├── tv.ts # tailwind-variants re-export
|
|
383
|
-
│ │
|
|
396
|
+
│ │ ├── font-context.ts
|
|
397
|
+
│ │ └── theme-bridge.ts
|
|
384
398
|
│ └── index.ts # Barrel export
|
|
385
399
|
├── apps/
|
|
386
400
|
│ └── showcase/ # Expo demo app
|
|
@@ -408,6 +422,42 @@ Themes are defined in `global.css` using CSS variables with OKLCH colors:
|
|
|
408
422
|
}
|
|
409
423
|
```
|
|
410
424
|
|
|
425
|
+
### Token Contract (Release Baseline)
|
|
426
|
+
|
|
427
|
+
The WhileUI token contract is strict for cross-app reuse. Define these in **every** theme variant (`@variant light`, `@variant dark`, and custom variants):
|
|
428
|
+
|
|
429
|
+
- Required core tokens: `background`, `foreground`, `card`, `card-foreground`, `primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `muted`, `muted-foreground`, `accent`, `accent-foreground`, `destructive`, `destructive-foreground`, `border`, `input`, `ring`
|
|
430
|
+
- Optional status tokens: `success`, `success-foreground`, `warning`, `warning-foreground`, `info`, `info-foreground`
|
|
431
|
+
- Optional scale tokens: spacing (`--spacing`, `--spacing-*`), typography (`--text-*`, `--leading-*`, `--tracking-*`), radius (`--radius-*`), elevation (`--shadow-*`)
|
|
432
|
+
|
|
433
|
+
Minimal contract example:
|
|
434
|
+
|
|
435
|
+
```css
|
|
436
|
+
@layer theme {
|
|
437
|
+
:root {
|
|
438
|
+
@variant light {
|
|
439
|
+
--color-background: oklch(1 0 0);
|
|
440
|
+
--color-foreground: oklch(0.15 0 0);
|
|
441
|
+
--color-card: oklch(1 0 0);
|
|
442
|
+
--color-card-foreground: oklch(0.15 0 0);
|
|
443
|
+
--color-primary: oklch(0.2 0 0);
|
|
444
|
+
--color-primary-foreground: oklch(0.98 0 0);
|
|
445
|
+
--color-secondary: oklch(0.95 0 0);
|
|
446
|
+
--color-secondary-foreground: oklch(0.15 0 0);
|
|
447
|
+
--color-muted: oklch(0.95 0 0);
|
|
448
|
+
--color-muted-foreground: oklch(0.45 0 0);
|
|
449
|
+
--color-accent: oklch(0.9 0.05 180);
|
|
450
|
+
--color-accent-foreground: oklch(0.15 0 0);
|
|
451
|
+
--color-destructive: oklch(0.58 0.2 26);
|
|
452
|
+
--color-destructive-foreground: oklch(0.98 0 0);
|
|
453
|
+
--color-border: oklch(0.9 0 0);
|
|
454
|
+
--color-input: oklch(0.92 0 0);
|
|
455
|
+
--color-ring: oklch(0.22 0 0);
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
```
|
|
460
|
+
|
|
411
461
|
Switch themes at runtime via Uniwind:
|
|
412
462
|
|
|
413
463
|
```tsx
|
|
@@ -416,6 +466,21 @@ import { Uniwind } from 'uniwind';
|
|
|
416
466
|
Uniwind.setTheme('dark'); // or 'light' or 'system'
|
|
417
467
|
```
|
|
418
468
|
|
|
469
|
+
Or use the first-party ThemeBridge helper with optional persistence:
|
|
470
|
+
|
|
471
|
+
```tsx
|
|
472
|
+
import { useThemeBridge, type ThemeBridgeAdapter } from '@thewhileloop/whileui';
|
|
473
|
+
|
|
474
|
+
const adapter: ThemeBridgeAdapter = {
|
|
475
|
+
loadThemeMode: async () => 'system',
|
|
476
|
+
saveThemeMode: async (mode) => {
|
|
477
|
+
await storage.setItem('theme-mode', mode);
|
|
478
|
+
},
|
|
479
|
+
};
|
|
480
|
+
|
|
481
|
+
const { mode, resolvedTheme, setMode, cycleMode } = useThemeBridge({ adapter });
|
|
482
|
+
```
|
|
483
|
+
|
|
419
484
|
## Using Components
|
|
420
485
|
|
|
421
486
|
Copy any component folder from `packages/ui/src/components/` into your project:
|
|
@@ -483,6 +548,124 @@ import { Input } from '@thewhileloop/whileui';
|
|
|
483
548
|
| placeholder | `string` | — | Placeholder text |
|
|
484
549
|
| editable | `boolean` | `true` | Whether input is editable |
|
|
485
550
|
|
|
551
|
+
## NumericInput
|
|
552
|
+
|
|
553
|
+
```tsx
|
|
554
|
+
import { NumericInput } from '@thewhileloop/whileui';
|
|
555
|
+
|
|
556
|
+
<NumericInput
|
|
557
|
+
value={amount}
|
|
558
|
+
onValueChange={setAmount}
|
|
559
|
+
prefix={<Text className="text-muted-foreground">$</Text>}
|
|
560
|
+
suffix={<Text className="text-muted-foreground">USD</Text>}
|
|
561
|
+
min={0}
|
|
562
|
+
step={0.5}
|
|
563
|
+
showSteppers
|
|
564
|
+
size="compact"
|
|
565
|
+
/>;
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
| Prop | Type | Default | Description |
|
|
569
|
+
| --------------- | --------------------------------- | ----------- | --------------------------------- |
|
|
570
|
+
| variant | `'default' \| 'error'` | `'default'` | Input style |
|
|
571
|
+
| size | `'default' \| 'compact'` | `'default'` | Density size |
|
|
572
|
+
| value | `number \| null` | — | Controlled numeric value |
|
|
573
|
+
| onValueChange | `(value: number \| null) => void` | — | Numeric value change callback |
|
|
574
|
+
| prefix / suffix | `ReactNode` | — | Left/right slots |
|
|
575
|
+
| showSteppers | `boolean` | `false` | Show decrement/increment controls |
|
|
576
|
+
|
|
577
|
+
## FormField
|
|
578
|
+
|
|
579
|
+
```tsx
|
|
580
|
+
import {
|
|
581
|
+
FormField,
|
|
582
|
+
FormLabel,
|
|
583
|
+
FormControl,
|
|
584
|
+
FormHint,
|
|
585
|
+
FormMessage,
|
|
586
|
+
Input,
|
|
587
|
+
} from '@thewhileloop/whileui';
|
|
588
|
+
|
|
589
|
+
<FormField required invalid={Boolean(error)}>
|
|
590
|
+
<FormLabel>Email</FormLabel>
|
|
591
|
+
<FormControl>
|
|
592
|
+
<Input placeholder="you@example.com" />
|
|
593
|
+
</FormControl>
|
|
594
|
+
{error ? <FormMessage>{error}</FormMessage> : <FormHint>We'll never share your email.</FormHint>}
|
|
595
|
+
</FormField>;
|
|
596
|
+
```
|
|
597
|
+
|
|
598
|
+
## LabeledField
|
|
599
|
+
|
|
600
|
+
```tsx
|
|
601
|
+
import { LabeledField, LabeledFieldControl, Input } from '@thewhileloop/whileui';
|
|
602
|
+
|
|
603
|
+
<LabeledField
|
|
604
|
+
label="Username"
|
|
605
|
+
hint="3-20 characters"
|
|
606
|
+
leftSlot={<Icon />}
|
|
607
|
+
rightSlot={
|
|
608
|
+
<Button size="sm">
|
|
609
|
+
<ButtonText>Check</ButtonText>
|
|
610
|
+
</Button>
|
|
611
|
+
}
|
|
612
|
+
>
|
|
613
|
+
<LabeledFieldControl>
|
|
614
|
+
<Input className="border-0 bg-transparent px-0" />
|
|
615
|
+
</LabeledFieldControl>
|
|
616
|
+
</LabeledField>;
|
|
617
|
+
```
|
|
618
|
+
|
|
619
|
+
## SegmentedControl
|
|
620
|
+
|
|
621
|
+
```tsx
|
|
622
|
+
import {
|
|
623
|
+
SegmentedControl,
|
|
624
|
+
SegmentedControlItem,
|
|
625
|
+
SegmentedControlItemText,
|
|
626
|
+
} from '@thewhileloop/whileui';
|
|
627
|
+
|
|
628
|
+
<SegmentedControl value={unit} onValueChange={setUnit} wrap>
|
|
629
|
+
<SegmentedControlItem value="metric">
|
|
630
|
+
<SegmentedControlItemText>Metric</SegmentedControlItemText>
|
|
631
|
+
</SegmentedControlItem>
|
|
632
|
+
<SegmentedControlItem value="imperial">
|
|
633
|
+
<SegmentedControlItemText>Imperial</SegmentedControlItemText>
|
|
634
|
+
</SegmentedControlItem>
|
|
635
|
+
</SegmentedControl>;
|
|
636
|
+
```
|
|
637
|
+
|
|
638
|
+
## DataRow
|
|
639
|
+
|
|
640
|
+
```tsx
|
|
641
|
+
import {
|
|
642
|
+
DataRow,
|
|
643
|
+
DataRowLeft,
|
|
644
|
+
DataRowCenter,
|
|
645
|
+
DataRowRight,
|
|
646
|
+
DataRowLabel,
|
|
647
|
+
DataRowDescription,
|
|
648
|
+
DataRowValue,
|
|
649
|
+
Avatar,
|
|
650
|
+
AvatarFallback,
|
|
651
|
+
} from '@thewhileloop/whileui';
|
|
652
|
+
|
|
653
|
+
<DataRow>
|
|
654
|
+
<DataRowLeft>
|
|
655
|
+
<Avatar size="sm">
|
|
656
|
+
<AvatarFallback>JD</AvatarFallback>
|
|
657
|
+
</Avatar>
|
|
658
|
+
</DataRowLeft>
|
|
659
|
+
<DataRowCenter>
|
|
660
|
+
<DataRowLabel>Jane Doe</DataRowLabel>
|
|
661
|
+
<DataRowDescription>Product Designer</DataRowDescription>
|
|
662
|
+
</DataRowCenter>
|
|
663
|
+
<DataRowRight>
|
|
664
|
+
<DataRowValue>Owner</DataRowValue>
|
|
665
|
+
</DataRowRight>
|
|
666
|
+
</DataRow>;
|
|
667
|
+
```
|
|
668
|
+
|
|
486
669
|
## Card
|
|
487
670
|
|
|
488
671
|
```tsx
|
|
@@ -495,7 +678,7 @@ import {
|
|
|
495
678
|
CardFooter,
|
|
496
679
|
} from '@thewhileloop/whileui';
|
|
497
680
|
|
|
498
|
-
<Card>
|
|
681
|
+
<Card padding="default">
|
|
499
682
|
<CardHeader>
|
|
500
683
|
<CardTitle>Title</CardTitle>
|
|
501
684
|
<CardDescription>Description</CardDescription>
|
|
@@ -503,8 +686,17 @@ import {
|
|
|
503
686
|
<CardContent>{/* Content */}</CardContent>
|
|
504
687
|
<CardFooter>{/* Footer */}</CardFooter>
|
|
505
688
|
</Card>;
|
|
689
|
+
|
|
690
|
+
<Card unstyled padding="none" className="rounded-xl border border-border bg-card">
|
|
691
|
+
{/* advanced custom layouts */}
|
|
692
|
+
</Card>;
|
|
506
693
|
```
|
|
507
694
|
|
|
695
|
+
| Prop | Type | Default | Description |
|
|
696
|
+
| -------- | ------------------------------------- | ----------- | ----------------------------------- |
|
|
697
|
+
| padding | `'none' \| 'sm' \| 'default' \| 'lg'` | `'default'` | Card interior padding |
|
|
698
|
+
| unstyled | `boolean` | `false` | Remove built-in card surface styles |
|
|
699
|
+
|
|
508
700
|
## Badge
|
|
509
701
|
|
|
510
702
|
```tsx
|
|
@@ -845,6 +1037,59 @@ import { BottomNav } from '@thewhileloop/whileui';
|
|
|
845
1037
|
/>;
|
|
846
1038
|
```
|
|
847
1039
|
|
|
1040
|
+
## ActionBar
|
|
1041
|
+
|
|
1042
|
+
```tsx
|
|
1043
|
+
import { ActionBar, Button, ButtonText } from '@thewhileloop/whileui';
|
|
1044
|
+
|
|
1045
|
+
<ActionBar>
|
|
1046
|
+
<Button variant="outline" className="flex-1">
|
|
1047
|
+
<ButtonText>Cancel</ButtonText>
|
|
1048
|
+
</Button>
|
|
1049
|
+
<Button className="flex-1">
|
|
1050
|
+
<ButtonText>Save</ButtonText>
|
|
1051
|
+
</Button>
|
|
1052
|
+
</ActionBar>;
|
|
1053
|
+
```
|
|
1054
|
+
|
|
1055
|
+
## ConfirmActionSheet
|
|
1056
|
+
|
|
1057
|
+
```tsx
|
|
1058
|
+
import { ConfirmActionSheet } from '@thewhileloop/whileui';
|
|
1059
|
+
|
|
1060
|
+
<ConfirmActionSheet
|
|
1061
|
+
open={open}
|
|
1062
|
+
onOpenChange={setOpen}
|
|
1063
|
+
title="Delete project?"
|
|
1064
|
+
description="This action cannot be undone."
|
|
1065
|
+
confirmLabel="Delete"
|
|
1066
|
+
destructive
|
|
1067
|
+
onConfirm={() => deleteProject()}
|
|
1068
|
+
/>;
|
|
1069
|
+
```
|
|
1070
|
+
|
|
1071
|
+
## NavigationSidebar
|
|
1072
|
+
|
|
1073
|
+
```tsx
|
|
1074
|
+
import { NavigationSidebar } from '@thewhileloop/whileui';
|
|
1075
|
+
|
|
1076
|
+
<NavigationSidebar
|
|
1077
|
+
sections={[
|
|
1078
|
+
{
|
|
1079
|
+
title: 'Workspace',
|
|
1080
|
+
items: [
|
|
1081
|
+
{ key: 'overview', label: 'Overview', icon: <Icon /> },
|
|
1082
|
+
{ key: 'billing', label: 'Billing', icon: <Icon />, badge: 2 },
|
|
1083
|
+
],
|
|
1084
|
+
},
|
|
1085
|
+
]}
|
|
1086
|
+
activeKey="overview"
|
|
1087
|
+
onSelect={(key) => {}}
|
|
1088
|
+
header={<Text>Acme Inc.</Text>}
|
|
1089
|
+
footer={<Text className="text-xs text-muted-foreground">v1.0.0</Text>}
|
|
1090
|
+
/>;
|
|
1091
|
+
```
|
|
1092
|
+
|
|
848
1093
|
## Header
|
|
849
1094
|
|
|
850
1095
|
```tsx
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ViewProps } from 'react-native';
|
|
2
|
+
export interface ActionBarProps extends ViewProps {
|
|
3
|
+
sticky?: boolean;
|
|
4
|
+
safeArea?: boolean;
|
|
5
|
+
elevated?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare function ActionBar({ sticky, safeArea, elevated, className, style, ...props }: ActionBarProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
//# sourceMappingURL=action-bar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"action-bar.d.ts","sourceRoot":"","sources":["../../../src/blocks/layout/action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAa,EACb,QAAe,EACf,QAAgB,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,2CAgBhB"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
4
|
+
import { cn } from '../../lib/cn';
|
|
5
|
+
export function ActionBar({ sticky = true, safeArea = true, elevated = false, className, style, ...props }) {
|
|
6
|
+
const insets = useSafeAreaInsets();
|
|
7
|
+
const bottomPadding = safeArea ? Math.max(insets.bottom, 12) : 12;
|
|
8
|
+
return (_jsx(View, { className: cn('w-full flex-row items-center gap-3 border-t border-border bg-background px-4 pt-3', sticky && 'absolute inset-x-0 bottom-0', elevated && 'shadow-lg', className), style: [{ paddingBottom: bottomPadding }, style], ...props }));
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=action-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/blocks/layout/action-bar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,GAAG,IAAI,EACb,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACO;IACf,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,mFAAmF,EACnF,MAAM,IAAI,6BAA6B,EACvC,QAAQ,IAAI,WAAW,EACvB,SAAS,CACV,EACD,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,KAC5C,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type ViewProps } from 'react-native';
|
|
2
|
+
export type ConfirmActionSheetActionVariant = 'default' | 'destructive' | 'cancel';
|
|
3
|
+
export interface ConfirmActionSheetAction {
|
|
4
|
+
key: string;
|
|
5
|
+
label: string;
|
|
6
|
+
onPress?: () => void;
|
|
7
|
+
variant?: ConfirmActionSheetActionVariant;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
closeOnPress?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface ConfirmActionSheetProps extends Omit<ViewProps, 'children'> {
|
|
12
|
+
open: boolean;
|
|
13
|
+
onOpenChange: (open: boolean) => void;
|
|
14
|
+
title: string;
|
|
15
|
+
description?: string;
|
|
16
|
+
actions?: ConfirmActionSheetAction[];
|
|
17
|
+
confirmLabel?: string;
|
|
18
|
+
cancelLabel?: string;
|
|
19
|
+
onConfirm?: () => void;
|
|
20
|
+
onCancel?: () => void;
|
|
21
|
+
destructive?: boolean;
|
|
22
|
+
}
|
|
23
|
+
export declare function ConfirmActionSheet({ open, onOpenChange, title, description, actions, confirmLabel, cancelLabel, onConfirm, onCancel, destructive, className, style, ...props }: ConfirmActionSheetProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=confirm-action-sheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-action-sheet.d.ts","sourceRoot":"","sources":["../../../src/blocks/layout/confirm-action-sheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAKtE,MAAM,MAAM,+BAA+B,GAAG,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;AAEnF,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,+BAA+B,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,OAAO,EACP,YAAwB,EACxB,WAAsB,EACtB,SAAS,EACT,QAAQ,EACR,WAAkB,EAClB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAoFzB"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { Modal, Pressable, View } from 'react-native';
|
|
4
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
|
+
import { Text } from '../../components/text';
|
|
6
|
+
import { cn } from '../../lib/cn';
|
|
7
|
+
export function ConfirmActionSheet({ open, onOpenChange, title, description, actions, confirmLabel = 'Confirm', cancelLabel = 'Cancel', onConfirm, onCancel, destructive = true, className, style, ...props }) {
|
|
8
|
+
const insets = useSafeAreaInsets();
|
|
9
|
+
const resolvedActions = useMemo(() => {
|
|
10
|
+
if (actions && actions.length > 0) {
|
|
11
|
+
return actions;
|
|
12
|
+
}
|
|
13
|
+
return [
|
|
14
|
+
{
|
|
15
|
+
key: 'cancel',
|
|
16
|
+
label: cancelLabel,
|
|
17
|
+
variant: 'cancel',
|
|
18
|
+
onPress: onCancel,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
key: 'confirm',
|
|
22
|
+
label: confirmLabel,
|
|
23
|
+
variant: destructive ? 'destructive' : 'default',
|
|
24
|
+
onPress: onConfirm,
|
|
25
|
+
},
|
|
26
|
+
];
|
|
27
|
+
}, [actions, cancelLabel, confirmLabel, destructive, onCancel, onConfirm]);
|
|
28
|
+
const handleClose = () => onOpenChange(false);
|
|
29
|
+
const handleActionPress = (action) => {
|
|
30
|
+
action.onPress?.();
|
|
31
|
+
if (action.closeOnPress ?? true) {
|
|
32
|
+
onOpenChange(false);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: handleClose, children: _jsxs(View, { className: "flex-1 justify-end bg-black/40", children: [_jsx(Pressable, { className: "flex-1", onPress: handleClose }), _jsxs(View, { className: cn('rounded-t-lg border border-border bg-background px-4 pt-4', className), style: [{ paddingBottom: Math.max(insets.bottom, 12) }, style], ...props, children: [_jsxs(View, { className: "mb-4 gap-1.5", children: [_jsx(Text, { className: "text-base font-semibold text-foreground", children: title }), description ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: description })) : null] }), _jsx(View, { className: "gap-2", children: resolvedActions.map((action) => {
|
|
36
|
+
const isDestructive = action.variant === 'destructive';
|
|
37
|
+
const isCancel = action.variant === 'cancel';
|
|
38
|
+
return (_jsx(Pressable, { className: cn('min-h-11 items-center justify-center rounded-md border px-4 py-2 active:opacity-70', isCancel ? 'border-input bg-background' : 'border-transparent bg-secondary', isDestructive && 'bg-destructive/10 border-destructive/30', action.disabled && 'opacity-50'), onPress: () => handleActionPress(action), disabled: action.disabled, accessibilityRole: "button", children: _jsx(Text, { className: cn('text-sm font-medium', isCancel ? 'text-foreground' : 'text-secondary-foreground', isDestructive && 'text-destructive'), children: action.label }) }, action.key));
|
|
39
|
+
}) })] })] }) }));
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=confirm-action-sheet.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"confirm-action-sheet.js","sourceRoot":"","sources":["../../../src/blocks/layout/confirm-action-sheet.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { AppShell, type AppShellProps } from './app-shell';
|
|
2
|
+
export { ActionBar, type ActionBarProps } from './action-bar';
|
|
3
|
+
export { ConfirmActionSheet, type ConfirmActionSheetAction, type ConfirmActionSheetActionVariant, type ConfirmActionSheetProps, } from './confirm-action-sheet';
|
|
2
4
|
export { EmptyState, type EmptyStateProps } from './empty-state';
|
|
3
5
|
export { ErrorState, type ErrorStateProps } from './error-state';
|
|
4
6
|
export { LoadingScreen, type LoadingScreenProps } from './loading-screen';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,GACrB,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,kBAAkB,EAClB,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,EACpC,KAAK,uBAAuB,GAC7B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,GACrB,MAAM,qBAAqB,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { AppShell } from './app-shell';
|
|
2
|
+
export { ActionBar } from './action-bar';
|
|
3
|
+
export { ConfirmActionSheet, } from './confirm-action-sheet';
|
|
2
4
|
export { EmptyState } from './empty-state';
|
|
3
5
|
export { ErrorState } from './error-state';
|
|
4
6
|
export { LoadingScreen } from './loading-screen';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/blocks/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAwB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAwB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EACL,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/blocks/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,kBAAkB,GAInB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,UAAU,EAAwB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAwB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,aAAa,EAA2B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EACL,gBAAgB,GAGjB,MAAM,qBAAqB,CAAC"}
|
|
@@ -3,4 +3,5 @@ export { FloatingBottomNav, type FloatingBottomNavItem, type FloatingBottomNavPr
|
|
|
3
3
|
export { Header, HeaderBackButton, type HeaderAction, type HeaderBackButtonProps, type HeaderProps, } from './header';
|
|
4
4
|
export { TabBar, type TabBarItem, type TabBarProps } from './tab-bar';
|
|
5
5
|
export { DrawerMenu, type DrawerMenuItem, type DrawerMenuSection, type DrawerMenuProps, } from './drawer-menu';
|
|
6
|
+
export { NavigationSidebar, type NavigationSidebarItem, type NavigationSidebarSection, type NavigationSidebarProps, } from './navigation-sidebar';
|
|
6
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,EACL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,EACL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,GAC5B,MAAM,sBAAsB,CAAC"}
|
|
@@ -3,4 +3,5 @@ export { FloatingBottomNav, } from './floating-bottom-nav';
|
|
|
3
3
|
export { Header, HeaderBackButton, } from './header';
|
|
4
4
|
export { TabBar } from './tab-bar';
|
|
5
5
|
export { DrawerMenu, } from './drawer-menu';
|
|
6
|
+
export { NavigationSidebar, } from './navigation-sidebar';
|
|
6
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/blocks/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA2C,MAAM,cAAc,CAAC;AAClF,OAAO,EACL,iBAAiB,GAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,MAAM,EACN,gBAAgB,GAIjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAqC,MAAM,WAAW,CAAC;AACtE,OAAO,EACL,UAAU,GAIX,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/blocks/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA2C,MAAM,cAAc,CAAC;AAClF,OAAO,EACL,iBAAiB,GAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,MAAM,EACN,gBAAgB,GAIjB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,MAAM,EAAqC,MAAM,WAAW,CAAC;AACtE,OAAO,EACL,UAAU,GAIX,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,iBAAiB,GAIlB,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type ViewProps } from 'react-native';
|
|
3
|
+
export interface NavigationSidebarItem {
|
|
4
|
+
key: string;
|
|
5
|
+
label: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
badge?: number;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface NavigationSidebarSection {
|
|
12
|
+
title?: string;
|
|
13
|
+
items: NavigationSidebarItem[];
|
|
14
|
+
}
|
|
15
|
+
export interface NavigationSidebarProps extends ViewProps {
|
|
16
|
+
sections: NavigationSidebarSection[];
|
|
17
|
+
activeKey?: string;
|
|
18
|
+
onSelect?: (key: string) => void;
|
|
19
|
+
header?: React.ReactNode;
|
|
20
|
+
footer?: React.ReactNode;
|
|
21
|
+
}
|
|
22
|
+
export declare function NavigationSidebar({ sections, activeKey, onSelect, header, footer, className, ...props }: NavigationSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
//# sourceMappingURL=navigation-sidebar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navigation-sidebar.d.ts","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI3E,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,qBAAqB,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CA0ExB"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Pressable, ScrollView, View } from 'react-native';
|
|
3
|
+
import { Text } from '../../components/text';
|
|
4
|
+
import { cn } from '../../lib/cn';
|
|
5
|
+
export function NavigationSidebar({ sections, activeKey, onSelect, header, footer, className, ...props }) {
|
|
6
|
+
return (_jsxs(View, { className: cn('w-72 border-r border-border bg-background', className), ...props, children: [header ? _jsx(View, { className: "border-b border-border px-4 py-4", children: header }) : null, _jsx(ScrollView, { className: "flex-1 px-3 py-4", children: _jsx(View, { className: "gap-4", children: sections.map((section, index) => (_jsxs(View, { className: "gap-1", children: [section.title ? (_jsx(Text, { className: "px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: section.title })) : null, section.items.map((item) => {
|
|
7
|
+
const isActive = activeKey === item.key;
|
|
8
|
+
return (_jsxs(Pressable, { onPress: () => onSelect?.(item.key), disabled: item.disabled, className: cn('min-h-11 flex-row items-center gap-3 rounded-lg px-3 py-2 active:opacity-70', isActive && 'bg-primary/10', item.disabled && 'opacity-50'), accessibilityRole: "button", accessibilityState: { selected: isActive, disabled: item.disabled }, children: [item.icon ? _jsx(View, { className: "shrink-0", children: item.icon }) : null, _jsxs(View, { className: "min-w-0 flex-1 gap-0.5", children: [_jsx(Text, { className: cn('font-medium', isActive ? 'text-primary' : 'text-foreground'), numberOfLines: 1, children: item.label }), item.description ? (_jsx(Text, { className: "text-xs text-muted-foreground", numberOfLines: 1, children: item.description })) : null] }), item.badge !== undefined ? (_jsx(View, { className: cn('min-w-5 rounded-full px-1.5 py-0.5', isActive ? 'bg-primary' : 'bg-muted'), children: _jsx(Text, { className: cn('text-[11px] font-medium', isActive ? 'text-primary-foreground' : 'text-muted-foreground'), children: item.badge }) })) : null] }, item.key));
|
|
9
|
+
})] }, index))) }) }), footer ? _jsx(View, { className: "border-t border-border px-4 py-4", children: footer }) : null] }));
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=navigation-sidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navigation-sidebar.js","sourceRoot":"","sources":["../../../src/blocks/navigation/navigation-sidebar.tsx"],"names":[],"mappings":"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"}
|