@campxdev/react-native-blueprint 0.1.4 → 0.1.6
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 +55 -0
- package/lib/module/components/ui/Accordion.js.map +1 -1
- package/lib/module/components/ui/Alert-Dialog.js +2 -2
- package/lib/module/components/ui/Alert-Dialog.js.map +1 -1
- package/lib/module/components/ui/Alert.js +2 -2
- package/lib/module/components/ui/Alert.js.map +1 -1
- package/lib/module/components/ui/AppBar.js.map +1 -1
- package/lib/module/components/ui/Avatar.js +3 -3
- package/lib/module/components/ui/Avatar.js.map +1 -1
- package/lib/module/components/ui/Bottom-Sheet.js +9 -2
- package/lib/module/components/ui/Bottom-Sheet.js.map +1 -1
- package/lib/module/components/ui/Context-Menu.js +24 -24
- package/lib/module/components/ui/Context-Menu.js.map +1 -1
- package/lib/module/components/ui/Custom-Card.js +6 -2
- package/lib/module/components/ui/Custom-Card.js.map +1 -1
- package/lib/module/components/ui/Dialog.js +3 -3
- package/lib/module/components/ui/Dialog.js.map +1 -1
- package/lib/module/components/ui/Dropdown-Menu.js +3 -3
- package/lib/module/components/ui/Dropdown-Menu.js.map +1 -1
- package/lib/module/components/ui/Input.js +3 -2
- package/lib/module/components/ui/Input.js.map +1 -1
- package/lib/module/components/ui/Menubar.js +4 -4
- package/lib/module/components/ui/Menubar.js.map +1 -1
- package/lib/module/components/ui/Native-Only-Animated-View.js.map +1 -1
- package/lib/module/components/ui/NavBar.js.map +1 -1
- package/lib/module/components/ui/Progress.js +2 -2
- package/lib/module/components/ui/Progress.js.map +1 -1
- package/lib/module/components/ui/Select.js +3 -3
- package/lib/module/components/ui/Select.js.map +1 -1
- package/lib/module/components/ui/Separator.js +2 -2
- package/lib/module/components/ui/Separator.js.map +1 -1
- package/lib/module/components/ui/Skeleton.js +2 -2
- package/lib/module/components/ui/Skeleton.js.map +1 -1
- package/lib/module/components/ui/Slider.js +7 -2
- package/lib/module/components/ui/Slider.js.map +1 -1
- package/lib/module/components/ui/Table.js +2 -2
- package/lib/module/components/ui/Table.js.map +1 -1
- package/lib/module/components/ui/Text.js.map +1 -1
- package/lib/module/components/ui/Textarea.js +3 -2
- package/lib/module/components/ui/Textarea.js.map +1 -1
- package/lib/module/components/ui/Theme-Toggle.js +3 -3
- package/lib/module/components/ui/Theme-Toggle.js.map +1 -1
- package/lib/module/components/ui/Toast.js +2 -2
- package/lib/module/components/ui/Toast.js.map +1 -1
- package/lib/module/index.js +4 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/lib/slot-helpers.js +19 -0
- package/lib/module/lib/slot-helpers.js.map +1 -0
- package/lib/module/types/components.d.js +4 -0
- package/lib/module/types/components.d.js.map +1 -0
- package/lib/module/types/global.d.js +5 -0
- package/lib/module/types/global.d.js.map +1 -1
- package/lib/module/types/rn-primitives.d.js +56 -1
- package/lib/module/types/rn-primitives.d.js.map +1 -1
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/app/_layout.d.ts +7 -0
- package/lib/typescript/src/app/_layout.d.ts.map +1 -0
- package/lib/typescript/src/components/theme-config.d.ts +174 -0
- package/lib/typescript/src/components/theme-config.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Accordion.d.ts +103 -0
- package/lib/typescript/src/components/ui/Accordion.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Alert-Dialog.d.ts +145 -0
- package/lib/typescript/src/components/ui/Alert-Dialog.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Alert.d.ts +61 -0
- package/lib/typescript/src/components/ui/Alert.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/AppBar.d.ts +227 -0
- package/lib/typescript/src/components/ui/AppBar.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Aspect-Ratio.d.ts +24 -0
- package/lib/typescript/src/components/ui/Aspect-Ratio.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Avatar.d.ts +1486 -0
- package/lib/typescript/src/components/ui/Avatar.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Badge.d.ts +77 -0
- package/lib/typescript/src/components/ui/Badge.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Bottom-Sheet.d.ts +43 -0
- package/lib/typescript/src/components/ui/Bottom-Sheet.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Button.d.ts +23 -0
- package/lib/typescript/src/components/ui/Button.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Card.d.ts +93 -0
- package/lib/typescript/src/components/ui/Card.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Checkbox.d.ts +36 -0
- package/lib/typescript/src/components/ui/Checkbox.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Collapsible.d.ts +37 -0
- package/lib/typescript/src/components/ui/Collapsible.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Context-Menu.d.ts +107 -0
- package/lib/typescript/src/components/ui/Context-Menu.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Custom-Card.d.ts +103 -0
- package/lib/typescript/src/components/ui/Custom-Card.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Dialog.d.ts +90 -0
- package/lib/typescript/src/components/ui/Dialog.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Dropdown-Menu.d.ts +242 -0
- package/lib/typescript/src/components/ui/Dropdown-Menu.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Floating-Action.d.ts +44 -0
- package/lib/typescript/src/components/ui/Floating-Action.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Greeting-Card.d.ts +153 -0
- package/lib/typescript/src/components/ui/Greeting-Card.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Hover-Card.d.ts +49 -0
- package/lib/typescript/src/components/ui/Hover-Card.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Icon.d.ts +43 -0
- package/lib/typescript/src/components/ui/Icon.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Input.d.ts +54 -0
- package/lib/typescript/src/components/ui/Input.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Label.d.ts +34 -0
- package/lib/typescript/src/components/ui/Label.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Menubar.d.ts +142 -0
- package/lib/typescript/src/components/ui/Menubar.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Native-Only-Animated-View.d.ts +26 -0
- package/lib/typescript/src/components/ui/Native-Only-Animated-View.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/NavBar.d.ts +273 -0
- package/lib/typescript/src/components/ui/NavBar.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Popover.d.ts +54 -0
- package/lib/typescript/src/components/ui/Popover.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Progress.d.ts +27 -0
- package/lib/typescript/src/components/ui/Progress.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Radio-Group.d.ts +47 -0
- package/lib/typescript/src/components/ui/Radio-Group.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Select.d.ts +86 -0
- package/lib/typescript/src/components/ui/Select.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Separator.d.ts +40 -0
- package/lib/typescript/src/components/ui/Separator.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/SizedBox.d.ts +79 -0
- package/lib/typescript/src/components/ui/SizedBox.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Skeleton.d.ts +42 -0
- package/lib/typescript/src/components/ui/Skeleton.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Slider.d.ts +56 -0
- package/lib/typescript/src/components/ui/Slider.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Switch.d.ts +34 -0
- package/lib/typescript/src/components/ui/Switch.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Table.d.ts +80 -0
- package/lib/typescript/src/components/ui/Table.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Tabs.d.ts +51 -0
- package/lib/typescript/src/components/ui/Tabs.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Text.d.ts +45 -0
- package/lib/typescript/src/components/ui/Text.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Textarea.d.ts +65 -0
- package/lib/typescript/src/components/ui/Textarea.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Theme-Toggle.d.ts +67 -0
- package/lib/typescript/src/components/ui/Theme-Toggle.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Toast.d.ts +56 -0
- package/lib/typescript/src/components/ui/Toast.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Toggle-Group.d.ts +49 -0
- package/lib/typescript/src/components/ui/Toggle-Group.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Toggle.d.ts +53 -0
- package/lib/typescript/src/components/ui/Toggle.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/Tooltip.d.ts +51 -0
- package/lib/typescript/src/components/ui/Tooltip.d.ts.map +1 -0
- package/lib/typescript/src/components/ui/index.d.ts +44 -0
- package/lib/typescript/src/components/ui/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +11 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/lib/ThemeProvider.d.ts +137 -0
- package/lib/typescript/src/lib/ThemeProvider.d.ts.map +1 -0
- package/lib/typescript/src/lib/cornerRadius.d.ts +112 -0
- package/lib/typescript/src/lib/cornerRadius.d.ts.map +1 -0
- package/lib/typescript/src/lib/fonts.d.ts +21 -0
- package/lib/typescript/src/lib/fonts.d.ts.map +1 -0
- package/lib/typescript/src/lib/slot-helpers.d.ts +32 -0
- package/lib/typescript/src/lib/slot-helpers.d.ts.map +1 -0
- package/lib/typescript/src/lib/theme.d.ts +87 -0
- package/lib/typescript/src/lib/theme.d.ts.map +1 -0
- package/lib/typescript/src/lib/utils.d.ts +111 -0
- package/lib/typescript/src/lib/utils.d.ts.map +1 -0
- package/nativewind-env.d.ts +7 -0
- package/package.json +15 -2
- package/src/components/ui/Accordion.tsx +3 -1
- package/src/components/ui/Alert-Dialog.tsx +5 -3
- package/src/components/ui/Alert.tsx +7 -4
- package/src/components/ui/AppBar.tsx +6 -2
- package/src/components/ui/Avatar.tsx +10 -6
- package/src/components/ui/Bottom-Sheet.tsx +10 -2
- package/src/components/ui/Context-Menu.tsx +15 -4
- package/src/components/ui/Custom-Card.tsx +6 -1
- package/src/components/ui/Dialog.tsx +13 -3
- package/src/components/ui/Dropdown-Menu.tsx +8 -4
- package/src/components/ui/Input.tsx +12 -4
- package/src/components/ui/Menubar.tsx +13 -6
- package/src/components/ui/Native-Only-Animated-View.tsx +1 -1
- package/src/components/ui/NavBar.tsx +9 -3
- package/src/components/ui/Progress.tsx +4 -2
- package/src/components/ui/Select.tsx +18 -6
- package/src/components/ui/Separator.tsx +4 -2
- package/src/components/ui/Skeleton.tsx +5 -3
- package/src/components/ui/Slider.tsx +8 -2
- package/src/components/ui/Table.tsx +9 -7
- package/src/components/ui/Text.tsx +1 -6
- package/src/components/ui/Textarea.tsx +15 -4
- package/src/components/ui/Theme-Toggle.tsx +7 -3
- package/src/components/ui/Toast.tsx +6 -3
- package/src/index.tsx +4 -0
- package/src/lib/slot-helpers.ts +57 -0
- package/src/types/components.d.ts +38 -0
- package/src/types/global.d.ts +178 -4
- package/src/types/rn-primitives.d.ts +1403 -46
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Properly typed Slot component wrappers
|
|
5
|
+
*
|
|
6
|
+
* The @rn-primitives/slot package has complex type inference that doesn't
|
|
7
|
+
* properly expose className props. These wrappers provide correct typing.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
import * as SlotPrimitive from '@rn-primitives/slot';
|
|
11
|
+
// Create properly typed versions of Slot components
|
|
12
|
+
export const SlotView = SlotPrimitive.View;
|
|
13
|
+
export const SlotPressable = SlotPrimitive.Pressable;
|
|
14
|
+
export const SlotText = SlotPrimitive.Text;
|
|
15
|
+
export const SlotTextInput = SlotPrimitive.TextInput;
|
|
16
|
+
|
|
17
|
+
// Re-export Slot for cases where it's used directly
|
|
18
|
+
export const Slot = SlotPrimitive.Slot;
|
|
19
|
+
//# sourceMappingURL=slot-helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SlotPrimitive","SlotView","View","SlotPressable","Pressable","SlotText","Text","SlotTextInput","TextInput","Slot"],"sourceRoot":"../../../src","sources":["lib/slot-helpers.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,KAAKA,aAAa,MAAM,qBAAqB;AAQpD;AACA,OAAO,MAAMC,QAAQ,GAAGD,aAAa,CAACE,IAMrC;AAED,OAAO,MAAMC,aAAa,GACxBH,aAAa,CAACI,SAMb;AAEH,OAAO,MAAMC,QAAQ,GAAGL,aAAa,CAACM,IAMrC;AAED,OAAO,MAAMC,aAAa,GACxBP,aAAa,CAACQ,SAMb;;AAEH;AACA,OAAO,MAAMC,IAAI,GAAGT,aAAa,CAACS,IAKjC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/components.d.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/global.d.ts"],"mappings":";;AAAA,OAAO,cAAc;AACrB,OAAO,yBAAyB
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/global.d.ts"],"mappings":";;AAAA,OAAO,cAAc;AACrB,OAAO,yBAAyB;;AA2KhC;;AAcA;;AA+BA","ignoreList":[]}
|
|
@@ -1,6 +1,61 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Type augmentations for @rn-primitives/* packages
|
|
5
|
+
* This adds className and children support to all primitive components
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
// Augment the actual primitive exports
|
|
9
|
+
|
|
10
|
+
// Slot components
|
|
11
|
+
|
|
12
|
+
// Accordion
|
|
13
|
+
|
|
14
|
+
// Alert Dialog
|
|
15
|
+
|
|
16
|
+
// Dialog
|
|
17
|
+
|
|
18
|
+
// Checkbox
|
|
19
|
+
|
|
20
|
+
// Context Menu
|
|
21
|
+
|
|
22
|
+
// Dropdown Menu
|
|
23
|
+
|
|
24
|
+
// Hover Card
|
|
25
|
+
|
|
26
|
+
// Label
|
|
27
|
+
|
|
28
|
+
// Menubar
|
|
29
|
+
|
|
30
|
+
// Popover
|
|
31
|
+
|
|
32
|
+
// Progress
|
|
33
|
+
|
|
34
|
+
// Radio Group
|
|
35
|
+
|
|
36
|
+
// Select
|
|
37
|
+
|
|
38
|
+
// Separator
|
|
39
|
+
|
|
40
|
+
// Slider
|
|
41
|
+
|
|
42
|
+
// Switch
|
|
43
|
+
|
|
44
|
+
// Tabs
|
|
45
|
+
|
|
46
|
+
// Toggle
|
|
47
|
+
|
|
48
|
+
// Toggle Group
|
|
49
|
+
|
|
50
|
+
// Tooltip
|
|
51
|
+
|
|
52
|
+
// Collapsible
|
|
53
|
+
|
|
54
|
+
// Avatar
|
|
55
|
+
|
|
56
|
+
// Aspect Ratio
|
|
57
|
+
|
|
58
|
+
// Portal
|
|
4
59
|
|
|
5
60
|
export {};
|
|
6
61
|
//# sourceMappingURL=rn-primitives.d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/rn-primitives.d.ts"],"mappings":";;
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/rn-primitives.d.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAcA;;AAwEA;;AAmDA;;AA4DA;;AA2EA;;AAuEA;;AAyCA;;AAuHA;;AAsHA;;AAgDA;;AAkBA;;AA0HA;;AAqDA;;AA+BA;;AA+CA;;AAgGA;;AAkBA;;AA8CA;;AAoCA;;AAmDA;;AAuBA;;AA+CA;;AAsDA;;AAuCA;;AAkCA;;AAiBA;;AAsBA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_layout.d.ts","sourceRoot":"","sources":["../../../../src/app/_layout.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAY/D"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Comprehensive Dark Theme Configuration
|
|
3
|
+
*
|
|
4
|
+
* This file provides complete theme tokens and utilities for consistent
|
|
5
|
+
* dark mode support across all components in the Blueprint library.
|
|
6
|
+
*
|
|
7
|
+
* Best Practices:
|
|
8
|
+
* - Uses HSL color format for better color manipulation
|
|
9
|
+
* - Provides semantic color tokens (not raw colors)
|
|
10
|
+
* - Maintains proper contrast ratios for accessibility (WCAG AA/AAA)
|
|
11
|
+
* - Consistent with Tailwind CSS conventions
|
|
12
|
+
*/
|
|
13
|
+
import type { ColorValue } from 'react-native';
|
|
14
|
+
/**
|
|
15
|
+
* Color tokens for light and dark themes
|
|
16
|
+
* Each token follows the pattern: purpose-variant
|
|
17
|
+
*/
|
|
18
|
+
export declare const THEME_COLORS: {
|
|
19
|
+
readonly light: {
|
|
20
|
+
readonly background: "hsl(0, 0%, 100%)";
|
|
21
|
+
readonly foreground: "hsl(0, 0%, 3.9%)";
|
|
22
|
+
readonly card: "hsl(0, 0%, 100%)";
|
|
23
|
+
readonly cardForeground: "hsl(0, 0%, 3.9%)";
|
|
24
|
+
readonly popover: "hsl(0, 0%, 100%)";
|
|
25
|
+
readonly popoverForeground: "hsl(0, 0%, 3.9%)";
|
|
26
|
+
readonly primary: "hsl(0, 0%, 9%)";
|
|
27
|
+
readonly primaryForeground: "hsl(0, 0%, 98%)";
|
|
28
|
+
readonly secondary: "hsl(0, 0%, 96.1%)";
|
|
29
|
+
readonly secondaryForeground: "hsl(0, 0%, 9%)";
|
|
30
|
+
readonly muted: "hsl(0, 0%, 96.1%)";
|
|
31
|
+
readonly mutedForeground: "hsl(0, 0%, 45.1%)";
|
|
32
|
+
readonly accent: "hsl(0, 0%, 96.1%)";
|
|
33
|
+
readonly accentForeground: "hsl(0, 0%, 9%)";
|
|
34
|
+
readonly destructive: "hsl(0, 84.2%, 60.2%)";
|
|
35
|
+
readonly destructiveForeground: "hsl(0, 0%, 98%)";
|
|
36
|
+
readonly border: "hsl(0, 0%, 89.8%)";
|
|
37
|
+
readonly input: "hsl(0, 0%, 89.8%)";
|
|
38
|
+
readonly ring: "hsl(0, 0%, 63%)";
|
|
39
|
+
readonly success: "hsl(142, 76%, 36%)";
|
|
40
|
+
readonly successForeground: "hsl(0, 0%, 98%)";
|
|
41
|
+
readonly warning: "hsl(38, 92%, 50%)";
|
|
42
|
+
readonly warningForeground: "hsl(0, 0%, 9%)";
|
|
43
|
+
readonly info: "hsl(199, 89%, 48%)";
|
|
44
|
+
readonly infoForeground: "hsl(0, 0%, 98%)";
|
|
45
|
+
};
|
|
46
|
+
readonly dark: {
|
|
47
|
+
readonly background: "hsl(0, 0%, 3.9%)";
|
|
48
|
+
readonly foreground: "hsl(0, 0%, 98%)";
|
|
49
|
+
readonly card: "hsl(0, 0%, 3.9%)";
|
|
50
|
+
readonly cardForeground: "hsl(0, 0%, 98%)";
|
|
51
|
+
readonly popover: "hsl(0, 0%, 3.9%)";
|
|
52
|
+
readonly popoverForeground: "hsl(0, 0%, 98%)";
|
|
53
|
+
readonly primary: "hsl(0, 0%, 98%)";
|
|
54
|
+
readonly primaryForeground: "hsl(0, 0%, 9%)";
|
|
55
|
+
readonly secondary: "hsl(0, 0%, 14.9%)";
|
|
56
|
+
readonly secondaryForeground: "hsl(0, 0%, 98%)";
|
|
57
|
+
readonly muted: "hsl(0, 0%, 14.9%)";
|
|
58
|
+
readonly mutedForeground: "hsl(0, 0%, 63.9%)";
|
|
59
|
+
readonly accent: "hsl(0, 0%, 14.9%)";
|
|
60
|
+
readonly accentForeground: "hsl(0, 0%, 98%)";
|
|
61
|
+
readonly destructive: "hsl(0, 62.8%, 30.6%)";
|
|
62
|
+
readonly destructiveForeground: "hsl(0, 0%, 98%)";
|
|
63
|
+
readonly border: "hsl(0, 0%, 14.9%)";
|
|
64
|
+
readonly input: "hsl(0, 0%, 14.9%)";
|
|
65
|
+
readonly ring: "hsl(0, 0%, 45%)";
|
|
66
|
+
readonly success: "hsl(142, 76%, 36%)";
|
|
67
|
+
readonly successForeground: "hsl(0, 0%, 98%)";
|
|
68
|
+
readonly warning: "hsl(38, 92%, 50%)";
|
|
69
|
+
readonly warningForeground: "hsl(0, 0%, 9%)";
|
|
70
|
+
readonly info: "hsl(199, 89%, 48%)";
|
|
71
|
+
readonly infoForeground: "hsl(0, 0%, 98%)";
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* Convert HSL string to React Native ColorValue
|
|
76
|
+
* Useful for native platform styling where HSL needs to be converted
|
|
77
|
+
*/
|
|
78
|
+
export declare function hslToRgb(hsl: string): ColorValue;
|
|
79
|
+
/**
|
|
80
|
+
* Get theme color value based on current theme mode
|
|
81
|
+
* Automatically selects the appropriate color from light/dark theme
|
|
82
|
+
*/
|
|
83
|
+
export declare function getThemeColorValue(colorKey: keyof typeof THEME_COLORS.light, isDark: boolean, asRgb?: boolean): ColorValue;
|
|
84
|
+
/**
|
|
85
|
+
* Component-specific dark mode class mappings
|
|
86
|
+
* Use these to ensure consistent styling across all components
|
|
87
|
+
*/
|
|
88
|
+
export declare const DARK_MODE_CLASSES: {
|
|
89
|
+
readonly text: {
|
|
90
|
+
readonly default: "dark:text-foreground";
|
|
91
|
+
readonly muted: "dark:text-muted-foreground";
|
|
92
|
+
readonly primary: "dark:text-primary-foreground";
|
|
93
|
+
readonly secondary: "dark:text-secondary-foreground";
|
|
94
|
+
readonly accent: "dark:text-accent-foreground";
|
|
95
|
+
readonly destructive: "dark:text-destructive-foreground";
|
|
96
|
+
readonly card: "dark:text-card-foreground";
|
|
97
|
+
};
|
|
98
|
+
readonly background: {
|
|
99
|
+
readonly default: "dark:bg-background";
|
|
100
|
+
readonly card: "dark:bg-card";
|
|
101
|
+
readonly primary: "dark:bg-primary";
|
|
102
|
+
readonly secondary: "dark:bg-secondary";
|
|
103
|
+
readonly muted: "dark:bg-muted";
|
|
104
|
+
readonly accent: "dark:bg-accent";
|
|
105
|
+
readonly destructive: "dark:bg-destructive";
|
|
106
|
+
readonly popover: "dark:bg-popover";
|
|
107
|
+
};
|
|
108
|
+
readonly border: {
|
|
109
|
+
readonly default: "dark:border-border";
|
|
110
|
+
readonly input: "dark:border-input";
|
|
111
|
+
readonly primary: "dark:border-primary";
|
|
112
|
+
readonly muted: "dark:border-muted";
|
|
113
|
+
readonly accent: "dark:border-accent";
|
|
114
|
+
readonly destructive: "dark:border-destructive";
|
|
115
|
+
};
|
|
116
|
+
readonly state: {
|
|
117
|
+
readonly hover: "dark:hover:bg-accent";
|
|
118
|
+
readonly active: "dark:active:bg-accent";
|
|
119
|
+
readonly focus: "dark:focus:ring-ring";
|
|
120
|
+
readonly disabled: "dark:disabled:opacity-50";
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* Helper to combine base classes with dark mode classes
|
|
125
|
+
* Ensures consistent application of dark mode styles
|
|
126
|
+
*/
|
|
127
|
+
export declare function withDarkMode(baseClass: string, darkClass: string, additionalClasses?: string): string;
|
|
128
|
+
/**
|
|
129
|
+
* Pre-configured class strings for common component patterns
|
|
130
|
+
* Use these for consistent styling across the library
|
|
131
|
+
*/
|
|
132
|
+
export declare const THEME_PRESETS: {
|
|
133
|
+
readonly card: "bg-card text-card-foreground dark:bg-card dark:text-card-foreground border border-border dark:border-border";
|
|
134
|
+
readonly input: "bg-background text-foreground dark:bg-background dark:text-foreground border border-input dark:border-input";
|
|
135
|
+
readonly buttonPrimary: "bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground";
|
|
136
|
+
readonly buttonSecondary: "bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground";
|
|
137
|
+
readonly buttonOutline: "bg-background text-foreground dark:bg-background dark:text-foreground border border-input dark:border-input";
|
|
138
|
+
readonly buttonGhost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground";
|
|
139
|
+
readonly destructive: "bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground";
|
|
140
|
+
readonly muted: "bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground";
|
|
141
|
+
readonly popover: "bg-popover text-popover-foreground dark:bg-popover dark:text-popover-foreground border border-border dark:border-border";
|
|
142
|
+
};
|
|
143
|
+
/**
|
|
144
|
+
* Semantic color map for native components
|
|
145
|
+
* Use these for StyleSheet-based styling
|
|
146
|
+
*/
|
|
147
|
+
export declare function getNativeThemeColors(isDark: boolean): {
|
|
148
|
+
background: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
149
|
+
foreground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
150
|
+
card: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
151
|
+
cardForeground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
152
|
+
primary: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
153
|
+
primaryForeground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
154
|
+
secondary: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
155
|
+
secondaryForeground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
156
|
+
muted: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
157
|
+
mutedForeground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
158
|
+
accent: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
159
|
+
accentForeground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
160
|
+
destructive: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
161
|
+
destructiveForeground: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
162
|
+
border: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
163
|
+
input: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
164
|
+
ring: import("react-native/types_generated/Libraries/StyleSheet/StyleSheetTypes").____ColorValue_Internal;
|
|
165
|
+
};
|
|
166
|
+
/**
|
|
167
|
+
* Type-safe theme color keys
|
|
168
|
+
*/
|
|
169
|
+
export type ThemeColorKey = keyof typeof THEME_COLORS.light;
|
|
170
|
+
/**
|
|
171
|
+
* Check if a color key exists in the theme
|
|
172
|
+
*/
|
|
173
|
+
export declare function isValidThemeColor(key: string): key is ThemeColorKey;
|
|
174
|
+
//# sourceMappingURL=theme-config.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-config.d.ts","sourceRoot":"","sources":["../../../../src/components/theme-config.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqGf,CAAC;AAEX;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAuChD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,MAAM,OAAO,YAAY,CAAC,KAAK,EACzC,MAAM,EAAE,OAAO,EACf,KAAK,UAAQ,GACZ,UAAU,CAKZ;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCpB,CAAC;AAEX;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,iBAAiB,CAAC,EAAE,MAAM,GACzB,MAAM,CAER;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;CAmChB,CAAC;AAEX;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,OAAO;;;;;;;;;;;;;;;;;;EAgCnD;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,YAAY,CAAC,KAAK,CAAC;AAE5D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,aAAa,CAEnE"}
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import * as AccordionPrimitive from '@rn-primitives/accordion';
|
|
2
|
+
/**
|
|
3
|
+
* Root accordion container with smooth animations
|
|
4
|
+
*
|
|
5
|
+
* A vertically stacked set of interactive panels where only one or multiple panels can be expanded at a time.
|
|
6
|
+
* Features smooth layout animations using Reanimated for a polished user experience.
|
|
7
|
+
*
|
|
8
|
+
* @component
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* // Single selection
|
|
12
|
+
* <Accordion type="single" collapsible defaultValue="item-1">
|
|
13
|
+
* <AccordionItem value="item-1">
|
|
14
|
+
* <AccordionTrigger>
|
|
15
|
+
* <Text>Question 1</Text>
|
|
16
|
+
* </AccordionTrigger>
|
|
17
|
+
* <AccordionContent>
|
|
18
|
+
* <Text>Answer 1</Text>
|
|
19
|
+
* </AccordionContent>
|
|
20
|
+
* </AccordionItem>
|
|
21
|
+
* </Accordion>
|
|
22
|
+
*
|
|
23
|
+
* // Multiple selection
|
|
24
|
+
* <Accordion type="multiple">
|
|
25
|
+
* <AccordionItem value="item-1">
|
|
26
|
+
* <AccordionTrigger><Text>Section 1</Text></AccordionTrigger>
|
|
27
|
+
* <AccordionContent><Text>Content 1</Text></AccordionContent>
|
|
28
|
+
* </AccordionItem>
|
|
29
|
+
* <AccordionItem value="item-2">
|
|
30
|
+
* <AccordionTrigger><Text>Section 2</Text></AccordionTrigger>
|
|
31
|
+
* <AccordionContent><Text>Content 2</Text></AccordionContent>
|
|
32
|
+
* </AccordionItem>
|
|
33
|
+
* </Accordion>
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @accessibility
|
|
37
|
+
* - Implements WAI-ARIA accordion pattern
|
|
38
|
+
* - Keyboard navigation with arrow keys and Enter/Space
|
|
39
|
+
* - Proper ARIA attributes for expanded/collapsed states
|
|
40
|
+
*/
|
|
41
|
+
declare function Accordion({ children, ...props }: Omit<AccordionPrimitive.RootProps, 'asChild'> & React.RefAttributes<AccordionPrimitive.RootRef>): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
/**
|
|
43
|
+
* Individual accordion item with border styling
|
|
44
|
+
*
|
|
45
|
+
* Contains a trigger and content section. Each item must have a unique value prop
|
|
46
|
+
* for identification within the parent Accordion.
|
|
47
|
+
*
|
|
48
|
+
* @component
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* <AccordionItem value="item-1">
|
|
52
|
+
* <AccordionTrigger>
|
|
53
|
+
* <Text>Click to expand</Text>
|
|
54
|
+
* </AccordionTrigger>
|
|
55
|
+
* <AccordionContent>
|
|
56
|
+
* <Text>Hidden content revealed on expansion</Text>
|
|
57
|
+
* </AccordionContent>
|
|
58
|
+
* </AccordionItem>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
declare function AccordionItem({ children, className, value, ...props }: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
/**
|
|
63
|
+
* Clickable trigger button that toggles accordion item expansion
|
|
64
|
+
*
|
|
65
|
+
* Features an animated chevron icon that rotates based on expansion state.
|
|
66
|
+
* Automatically manages focus states and hover effects on web.
|
|
67
|
+
*
|
|
68
|
+
* @component
|
|
69
|
+
* @example
|
|
70
|
+
* ```tsx
|
|
71
|
+
* <AccordionTrigger>
|
|
72
|
+
* <Text>Click to toggle</Text>
|
|
73
|
+
* </AccordionTrigger>
|
|
74
|
+
* ```
|
|
75
|
+
*
|
|
76
|
+
* @accessibility
|
|
77
|
+
* - Automatically includes chevron icon for visual expansion indicator
|
|
78
|
+
* - Focus visible states for keyboard navigation on web
|
|
79
|
+
* - Disabled state prevents interaction
|
|
80
|
+
*/
|
|
81
|
+
declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.TriggerProps & {
|
|
82
|
+
children?: React.ReactNode;
|
|
83
|
+
} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react/jsx-runtime").JSX.Element;
|
|
84
|
+
/**
|
|
85
|
+
* Collapsible content container with smooth animations
|
|
86
|
+
*
|
|
87
|
+
* Automatically animates height changes when expanding/collapsing. Uses platform-specific
|
|
88
|
+
* animations (CSS transitions on web, Reanimated on native).
|
|
89
|
+
*
|
|
90
|
+
* @component
|
|
91
|
+
* @example
|
|
92
|
+
* ```tsx
|
|
93
|
+
* <AccordionContent>
|
|
94
|
+
* <Text>This content slides in and out smoothly</Text>
|
|
95
|
+
* <View className="mt-2">
|
|
96
|
+
* <Text>Additional content here</Text>
|
|
97
|
+
* </View>
|
|
98
|
+
* </AccordionContent>
|
|
99
|
+
* ```
|
|
100
|
+
*/
|
|
101
|
+
declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>): import("react/jsx-runtime").JSX.Element;
|
|
102
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
|
|
103
|
+
//# sourceMappingURL=Accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,0BAA0B,CAAC;AAmB/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,SAAS,CAAC,GAC9C,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,2CAahD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,SAAS,GAC7B,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,2CAoBhD;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,YAAY,GAAG;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,UAAU,CAAC,2CAqDrD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,YAAY,GAChC,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,UAAU,CAAC,2CAsBnD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { type ViewProps } from 'react-native';
|
|
4
|
+
/**
|
|
5
|
+
* Root alert dialog container
|
|
6
|
+
*
|
|
7
|
+
* A modal dialog that interrupts the user with important content and expects a response.
|
|
8
|
+
* Use for critical actions that require user confirmation before proceeding.
|
|
9
|
+
*
|
|
10
|
+
* @component
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <AlertDialog>
|
|
14
|
+
* <AlertDialogTrigger asChild>
|
|
15
|
+
* <Button variant="destructive"><Text>Delete Account</Text></Button>
|
|
16
|
+
* </AlertDialogTrigger>
|
|
17
|
+
* <AlertDialogContent>
|
|
18
|
+
* <AlertDialogHeader>
|
|
19
|
+
* <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
|
20
|
+
* <AlertDialogDescription>
|
|
21
|
+
* This action cannot be undone.
|
|
22
|
+
* </AlertDialogDescription>
|
|
23
|
+
* </AlertDialogHeader>
|
|
24
|
+
* <AlertDialogFooter>
|
|
25
|
+
* <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
|
|
26
|
+
* <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
|
|
27
|
+
* </AlertDialogFooter>
|
|
28
|
+
* </AlertDialogContent>
|
|
29
|
+
* </AlertDialog>
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @accessibility
|
|
33
|
+
* - Traps focus within dialog when open
|
|
34
|
+
* - Closes on Escape key press
|
|
35
|
+
* - Returns focus to trigger on close
|
|
36
|
+
* - Uses appropriate ARIA attributes
|
|
37
|
+
*/
|
|
38
|
+
declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogPrimitive.RootProps>;
|
|
39
|
+
/**
|
|
40
|
+
* Trigger button that opens the alert dialog
|
|
41
|
+
*
|
|
42
|
+
* @component
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* <AlertDialogTrigger asChild>
|
|
46
|
+
* <Button><Text>Open Dialog</Text></Button>
|
|
47
|
+
* </AlertDialogTrigger>
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
50
|
+
declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.TriggerProps>;
|
|
51
|
+
/**
|
|
52
|
+
* Portal component for rendering dialog content outside the DOM hierarchy
|
|
53
|
+
*/
|
|
54
|
+
declare const AlertDialogPortal: React.ForwardRefExoticComponent<AlertDialogPrimitive.PortalProps>;
|
|
55
|
+
/**
|
|
56
|
+
* Semi-transparent overlay behind the alert dialog
|
|
57
|
+
*
|
|
58
|
+
* Provides backdrop that dims background content and handles click-outside behavior.
|
|
59
|
+
* Uses platform-specific full window overlay on iOS for proper z-index layering.
|
|
60
|
+
*
|
|
61
|
+
* @component
|
|
62
|
+
* @example
|
|
63
|
+
* ```tsx
|
|
64
|
+
* <AlertDialogOverlay>
|
|
65
|
+
* <AlertDialogContent>...</AlertDialogContent>
|
|
66
|
+
* </AlertDialogOverlay>
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
declare function AlertDialogOverlay({ className, children, ...props }: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> & React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
|
|
70
|
+
children?: React.ReactNode;
|
|
71
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
72
|
+
/**
|
|
73
|
+
* Main alert dialog content container
|
|
74
|
+
*
|
|
75
|
+
* Contains the dialog's title, description, and action buttons. Automatically centered
|
|
76
|
+
* on screen with smooth entrance animations.
|
|
77
|
+
*
|
|
78
|
+
* @component
|
|
79
|
+
* @example
|
|
80
|
+
* ```tsx
|
|
81
|
+
* <AlertDialogContent>
|
|
82
|
+
* <AlertDialogHeader>
|
|
83
|
+
* <AlertDialogTitle>Confirm Action</AlertDialogTitle>
|
|
84
|
+
* <AlertDialogDescription>Description here</AlertDialogDescription>
|
|
85
|
+
* </AlertDialogHeader>
|
|
86
|
+
* <AlertDialogFooter>
|
|
87
|
+
* <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
|
|
88
|
+
* <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
|
|
89
|
+
* </AlertDialogFooter>
|
|
90
|
+
* </AlertDialogContent>
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
declare function AlertDialogContent({ className, portalHost, ...props }: AlertDialogPrimitive.ContentProps & React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
|
|
94
|
+
portalHost?: string;
|
|
95
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
96
|
+
/**
|
|
97
|
+
* Header section for alert dialog content
|
|
98
|
+
*
|
|
99
|
+
* Groups the title and description with proper spacing and text alignment.
|
|
100
|
+
*
|
|
101
|
+
* @component
|
|
102
|
+
*/
|
|
103
|
+
declare function AlertDialogHeader({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
|
|
104
|
+
/**
|
|
105
|
+
* Footer section for alert dialog action buttons
|
|
106
|
+
*
|
|
107
|
+
* Contains cancel and action buttons with responsive layout (stacked on mobile, row on desktop).
|
|
108
|
+
*
|
|
109
|
+
* @component
|
|
110
|
+
*/
|
|
111
|
+
declare function AlertDialogFooter({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
|
|
112
|
+
/**
|
|
113
|
+
* Title text for the alert dialog
|
|
114
|
+
*
|
|
115
|
+
* Prominently displays the main heading with large, semibold text.
|
|
116
|
+
*
|
|
117
|
+
* @component
|
|
118
|
+
*/
|
|
119
|
+
declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.TitleProps & React.RefAttributes<AlertDialogPrimitive.TitleRef>): import("react/jsx-runtime").JSX.Element;
|
|
120
|
+
/**
|
|
121
|
+
* Description text for the alert dialog
|
|
122
|
+
*
|
|
123
|
+
* Provides additional context below the title with muted styling.
|
|
124
|
+
*
|
|
125
|
+
* @component
|
|
126
|
+
*/
|
|
127
|
+
declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.DescriptionProps & React.RefAttributes<AlertDialogPrimitive.DescriptionRef>): import("react/jsx-runtime").JSX.Element;
|
|
128
|
+
/**
|
|
129
|
+
* Primary action button that confirms the alert dialog action
|
|
130
|
+
*
|
|
131
|
+
* Styled as a primary button. Automatically closes dialog on press.
|
|
132
|
+
*
|
|
133
|
+
* @component
|
|
134
|
+
*/
|
|
135
|
+
declare function AlertDialogAction({ className, ...props }: AlertDialogPrimitive.ActionProps & React.RefAttributes<AlertDialogPrimitive.ActionRef>): import("react/jsx-runtime").JSX.Element;
|
|
136
|
+
/**
|
|
137
|
+
* Cancel button that dismisses the alert dialog
|
|
138
|
+
*
|
|
139
|
+
* Styled as an outline button. Automatically closes dialog on press without performing action.
|
|
140
|
+
*
|
|
141
|
+
* @component
|
|
142
|
+
*/
|
|
143
|
+
declare function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.CancelProps & React.RefAttributes<AlertDialogPrimitive.CancelRef>): import("react/jsx-runtime").JSX.Element;
|
|
144
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
|
|
145
|
+
//# sourceMappingURL=Alert-Dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert-Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Alert-Dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AASxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,WAAW,iEAA4B,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,kBAAkB,oEAA+B,CAAC;AAExD;;GAEG;AACH,QAAA,MAAM,iBAAiB,mEAA8B,CAAC;AAKtD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,SAAS,CAAC,GACnD,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAsBF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,YAAY,GAClC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiBF;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAM5D;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAU5D;AAED;;;;;;GAMG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,UAAU,GAChC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,QAAQ,CAAC,2CAOnD;AAED;;;;;;GAMG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,gBAAgB,GACtC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,2CAOzD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CASpD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CAWpD;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { Text } from './Text';
|
|
2
|
+
import type { LucideIcon } from 'lucide-react-native';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { View as RNView, type ViewProps } from 'react-native';
|
|
5
|
+
/**
|
|
6
|
+
* Alert component for displaying important messages or notifications
|
|
7
|
+
*
|
|
8
|
+
* Features an icon on the left side with title and description.
|
|
9
|
+
* Supports default and destructive variants for different severity levels.
|
|
10
|
+
*
|
|
11
|
+
* @component
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Alert icon={AlertCircle} variant="default">
|
|
15
|
+
* <AlertTitle><Text>Heads up!</Text></AlertTitle>
|
|
16
|
+
* <AlertDescription>
|
|
17
|
+
* <Text>You can add components to your app using the cli.</Text>
|
|
18
|
+
* </AlertDescription>
|
|
19
|
+
* </Alert>
|
|
20
|
+
*
|
|
21
|
+
* // Destructive variant
|
|
22
|
+
* <Alert icon={AlertTriangle} variant="destructive">
|
|
23
|
+
* <AlertTitle><Text>Error</Text></AlertTitle>
|
|
24
|
+
* <AlertDescription>
|
|
25
|
+
* <Text>Your session has expired. Please login again.</Text>
|
|
26
|
+
* </AlertDescription>
|
|
27
|
+
* </Alert>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @param {LucideIcon} icon - Icon component to display
|
|
31
|
+
* @param {'default' | 'destructive'} [variant='default'] - Alert style variant
|
|
32
|
+
* @param {string} [iconClassName] - Additional classes for the icon
|
|
33
|
+
* @param {string} [className] - Additional classes for the container
|
|
34
|
+
*
|
|
35
|
+
* @accessibility Sets role="alert" for screen reader announcement
|
|
36
|
+
*/
|
|
37
|
+
declare function Alert({ className, variant, children, icon, iconClassName, ...props }: ViewProps & React.RefAttributes<RNView> & {
|
|
38
|
+
children?: React.ReactNode;
|
|
39
|
+
icon: LucideIcon;
|
|
40
|
+
variant?: 'default' | 'destructive';
|
|
41
|
+
iconClassName?: string;
|
|
42
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
/**
|
|
44
|
+
* AlertTitle - Title text for the alert
|
|
45
|
+
*
|
|
46
|
+
* Displays as a medium-weight heading with appropriate spacing from the icon.
|
|
47
|
+
*
|
|
48
|
+
* @param {string} [className] - Additional Tailwind classes
|
|
49
|
+
*/
|
|
50
|
+
declare function AlertTitle({ className, ...props }: React.ComponentProps<typeof Text> & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
/**
|
|
52
|
+
* AlertDescription - Description text for the alert
|
|
53
|
+
*
|
|
54
|
+
* Displays detailed message content with muted styling and appropriate spacing.
|
|
55
|
+
* Automatically adjusts color for destructive variants.
|
|
56
|
+
*
|
|
57
|
+
* @param {string} [className] - Additional Tailwind classes
|
|
58
|
+
*/
|
|
59
|
+
declare function AlertDescription({ className, ...props }: React.ComponentProps<typeof Text> & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
|
|
60
|
+
export { Alert, AlertDescription, AlertTitle };
|
|
61
|
+
//# sourceMappingURL=Alert.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAoB,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAO9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,GAAG,KAAK,EACT,EAAE,SAAS,GACV,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,2CAgCF;AAED;;;;;;GAMG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,2CAU/D;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,2CAa/D;AAED,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC"}
|