@dangerousthings/react-native 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +170 -0
- package/dist/components/DTAccordion.d.ts.map +1 -1
- package/dist/components/DTAccordion.js +7 -6
- package/dist/components/DTAccordion.js.map +1 -1
- package/dist/components/DTBadgeOverlay.d.ts +29 -0
- package/dist/components/DTBadgeOverlay.d.ts.map +1 -0
- package/dist/components/DTBadgeOverlay.js +12 -0
- package/dist/components/DTBadgeOverlay.js.map +1 -0
- package/dist/components/DTButton.d.ts +14 -20
- package/dist/components/DTButton.d.ts.map +1 -1
- package/dist/components/DTButton.js +90 -27
- package/dist/components/DTButton.js.map +1 -1
- package/dist/components/DTCard.d.ts +12 -3
- package/dist/components/DTCard.d.ts.map +1 -1
- package/dist/components/DTCard.js +144 -9
- package/dist/components/DTCard.js.map +1 -1
- package/dist/components/DTCheckbox.d.ts.map +1 -1
- package/dist/components/DTCheckbox.js +21 -8
- package/dist/components/DTCheckbox.js.map +1 -1
- package/dist/components/DTChip.d.ts +2 -2
- package/dist/components/DTChip.d.ts.map +1 -1
- package/dist/components/DTChip.js +6 -11
- package/dist/components/DTChip.js.map +1 -1
- package/dist/components/DTDrawer.d.ts.map +1 -1
- package/dist/components/DTDrawer.js +13 -9
- package/dist/components/DTDrawer.js.map +1 -1
- package/dist/components/DTFeatureLegend.d.ts +41 -0
- package/dist/components/DTFeatureLegend.d.ts.map +1 -0
- package/dist/components/DTFeatureLegend.js +56 -0
- package/dist/components/DTFeatureLegend.js.map +1 -0
- package/dist/components/DTGallery.d.ts.map +1 -1
- package/dist/components/DTGallery.js +25 -6
- package/dist/components/DTGallery.js.map +1 -1
- package/dist/components/DTHexagon.d.ts.map +1 -1
- package/dist/components/DTHexagon.js +3 -1
- package/dist/components/DTHexagon.js.map +1 -1
- package/dist/components/DTLabel.d.ts.map +1 -1
- package/dist/components/DTLabel.js +13 -8
- package/dist/components/DTLabel.js.map +1 -1
- package/dist/components/DTMediaFrame.d.ts.map +1 -1
- package/dist/components/DTMediaFrame.js +14 -7
- package/dist/components/DTMediaFrame.js.map +1 -1
- package/dist/components/DTMenu.d.ts.map +1 -1
- package/dist/components/DTMenu.js +9 -8
- package/dist/components/DTMenu.js.map +1 -1
- package/dist/components/DTMobileFilterOverlay.d.ts +35 -0
- package/dist/components/DTMobileFilterOverlay.d.ts.map +1 -0
- package/dist/components/DTMobileFilterOverlay.js +135 -0
- package/dist/components/DTMobileFilterOverlay.js.map +1 -0
- package/dist/components/DTModal.d.ts.map +1 -1
- package/dist/components/DTModal.js +3 -2
- package/dist/components/DTModal.js.map +1 -1
- package/dist/components/DTProgressBar.d.ts.map +1 -1
- package/dist/components/DTProgressBar.js +7 -7
- package/dist/components/DTProgressBar.js.map +1 -1
- package/dist/components/DTQuantityStepper.d.ts.map +1 -1
- package/dist/components/DTQuantityStepper.js +15 -5
- package/dist/components/DTQuantityStepper.js.map +1 -1
- package/dist/components/DTRadioGroup.d.ts.map +1 -1
- package/dist/components/DTRadioGroup.js +16 -10
- package/dist/components/DTRadioGroup.js.map +1 -1
- package/dist/components/DTSearchInput.d.ts.map +1 -1
- package/dist/components/DTSearchInput.js +7 -7
- package/dist/components/DTSearchInput.js.map +1 -1
- package/dist/components/DTStaggerContainer.d.ts +28 -0
- package/dist/components/DTStaggerContainer.d.ts.map +1 -0
- package/dist/components/DTStaggerContainer.js +28 -0
- package/dist/components/DTStaggerContainer.js.map +1 -0
- package/dist/components/DTSwitch.js +6 -5
- package/dist/components/DTSwitch.js.map +1 -1
- package/dist/components/DTTextInput.d.ts.map +1 -1
- package/dist/components/DTTextInput.js +8 -9
- package/dist/components/DTTextInput.js.map +1 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -1
- package/dist/index.js.map +1 -1
- package/dist/theme/paperTheme.d.ts +8 -0
- package/dist/theme/paperTheme.d.ts.map +1 -1
- package/dist/theme/paperTheme.js +6 -0
- package/dist/theme/paperTheme.js.map +1 -1
- package/dist/utils/animations.d.ts +22 -0
- package/dist/utils/animations.d.ts.map +1 -0
- package/dist/utils/animations.js +62 -0
- package/dist/utils/animations.js.map +1 -0
- package/dist/utils/variantColors.d.ts +6 -4
- package/dist/utils/variantColors.d.ts.map +1 -1
- package/dist/utils/variantColors.js +10 -10
- package/dist/utils/variantColors.js.map +1 -1
- package/package.json +22 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Dangerous Things
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
# @dangerousthings/react-native
|
|
2
|
+
|
|
3
|
+
React Native components for the Dangerous Things design system — 22 themed components built on React Native Paper with cyberpunk beveled aesthetics.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @dangerousthings/react-native
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
### Peer Dependencies
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install react-native-paper react-native-safe-area-context react-native-svg
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Optional for custom fonts:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npx expo install expo-font
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Setup
|
|
24
|
+
|
|
25
|
+
Wrap your app with `DTThemeProvider`:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { DTThemeProvider } from "@dangerousthings/react-native";
|
|
29
|
+
|
|
30
|
+
export default function App() {
|
|
31
|
+
return (
|
|
32
|
+
<DTThemeProvider>
|
|
33
|
+
{/* your app */}
|
|
34
|
+
</DTThemeProvider>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Options:
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
<DTThemeProvider
|
|
43
|
+
includeSafeArea={true} // wraps in SafeAreaProvider (default: true)
|
|
44
|
+
/>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Components
|
|
48
|
+
|
|
49
|
+
### Basic
|
|
50
|
+
|
|
51
|
+
| Component | Description |
|
|
52
|
+
|-----------|-------------|
|
|
53
|
+
| `DTButton` | Beveled button with variant colors (normal, emphasis, warning, success, other) |
|
|
54
|
+
| `DTCard` | Beveled card with optional header and title |
|
|
55
|
+
| `DTChip` | Compact labeled element (MD3 chip style) |
|
|
56
|
+
| `DTLabel` | Top-right beveled label with status colors |
|
|
57
|
+
|
|
58
|
+
### Forms
|
|
59
|
+
|
|
60
|
+
| Component | Description |
|
|
61
|
+
|-----------|-------------|
|
|
62
|
+
| `DTTextInput` | Sharp-cornered input with focus glow |
|
|
63
|
+
| `DTCheckbox` | Beveled checkbox with opposing corner cuts |
|
|
64
|
+
| `DTSwitch` | Angular toggle switch |
|
|
65
|
+
| `DTRadioGroup` | Hexagonal radio buttons |
|
|
66
|
+
| `DTQuantityStepper` | Beveled +/- increment buttons |
|
|
67
|
+
| `DTSearchInput` | Search-styled text input |
|
|
68
|
+
|
|
69
|
+
### Layout & Display
|
|
70
|
+
|
|
71
|
+
| Component | Description |
|
|
72
|
+
|-----------|-------------|
|
|
73
|
+
| `DTProgressBar` | Angular progress bar with optional label |
|
|
74
|
+
| `DTMediaFrame` | Diagonal beveled frame for images |
|
|
75
|
+
| `DTAccordion` | Collapsible sections with accent border |
|
|
76
|
+
| `DTHexagon` | Decorative hexagon SVG shape |
|
|
77
|
+
| `DTBadgeOverlay` | Absolute-positioned badge wrapper (top-left, top-right, bottom-left, bottom-right) |
|
|
78
|
+
| `DTStaggerContainer` | Staggered scale-in entrance animation for child elements |
|
|
79
|
+
| `DTFeatureLegend` | Product feature grid with icons and rotated labels |
|
|
80
|
+
|
|
81
|
+
### Interactive
|
|
82
|
+
|
|
83
|
+
| Component | Description |
|
|
84
|
+
|-----------|-------------|
|
|
85
|
+
| `DTModal` | Modal dialog with beveled corners |
|
|
86
|
+
| `DTDrawer` | Side drawer with edge bevels |
|
|
87
|
+
| `DTGallery` | Image gallery |
|
|
88
|
+
| `DTMenu` | Dropdown menu with item variants |
|
|
89
|
+
| `DTMobileFilterOverlay` | Full-screen slide-up filter overlay with backdrop |
|
|
90
|
+
|
|
91
|
+
### Animation Hooks
|
|
92
|
+
|
|
93
|
+
| Hook | Description |
|
|
94
|
+
|------|-------------|
|
|
95
|
+
| `useScaleIn` | Scale 0→1 entrance animation |
|
|
96
|
+
| `usePulse` | Looping opacity pulse animation |
|
|
97
|
+
|
|
98
|
+
## Usage Examples
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react-native";
|
|
102
|
+
|
|
103
|
+
// Button with variant
|
|
104
|
+
<DTButton variant="normal" onPress={handlePress}>
|
|
105
|
+
Scan NFC
|
|
106
|
+
</DTButton>
|
|
107
|
+
|
|
108
|
+
// Card with title
|
|
109
|
+
<DTCard title="Scan Results" mode="normal">
|
|
110
|
+
<Text>Chip detected</Text>
|
|
111
|
+
</DTCard>
|
|
112
|
+
|
|
113
|
+
// Card with selected state and progress bar
|
|
114
|
+
<DTCard title="PRODUCT" mode="emphasis" selected progress={0.6}>
|
|
115
|
+
<Text>Selected with 60% progress</Text>
|
|
116
|
+
</DTCard>
|
|
117
|
+
|
|
118
|
+
// Text input with error state
|
|
119
|
+
<DTTextInput
|
|
120
|
+
variant="normal"
|
|
121
|
+
label="Username"
|
|
122
|
+
error={true}
|
|
123
|
+
errorMessage="Required"
|
|
124
|
+
/>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Theme Utilities
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
import { useDTTheme, getColor, getVariantColor } from "@dangerousthings/react-native";
|
|
131
|
+
|
|
132
|
+
// Access the full theme in a component
|
|
133
|
+
const theme = useDTTheme();
|
|
134
|
+
theme.colors.primary; // "#00FFFF"
|
|
135
|
+
|
|
136
|
+
// Get a color with optional opacity
|
|
137
|
+
getColor("modeNormal", 0.5); // "rgba(0, 255, 255, 0.5)"
|
|
138
|
+
|
|
139
|
+
// Resolve a variant name to its color
|
|
140
|
+
getVariantColor("emphasis"); // "#FFFF00"
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Bevel Utilities
|
|
144
|
+
|
|
145
|
+
Build SVG paths for custom beveled shapes:
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
import {
|
|
149
|
+
buildBeveledRectPath,
|
|
150
|
+
buildButtonBevelPath,
|
|
151
|
+
buildCardBevelPath,
|
|
152
|
+
} from "@dangerousthings/react-native";
|
|
153
|
+
|
|
154
|
+
// Custom bevel
|
|
155
|
+
const path = buildBeveledRectPath(200, 48, { bottomRight: 12 });
|
|
156
|
+
|
|
157
|
+
// Preset bevel paths
|
|
158
|
+
const buttonPath = buildButtonBevelPath(200, 48);
|
|
159
|
+
const cardPath = buildCardBevelPath(300, 200);
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Re-exported Paper Components
|
|
163
|
+
|
|
164
|
+
For convenience, these React Native Paper components are re-exported:
|
|
165
|
+
|
|
166
|
+
`Text`, `Surface`, `IconButton`, `ActivityIndicator`, `Divider`, `List`, `Portal`, `Modal`, `Snackbar`, `TextInput`
|
|
167
|
+
|
|
168
|
+
## License
|
|
169
|
+
|
|
170
|
+
[MIT](LICENSE)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTAccordion.d.ts","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,gBAAgB;IACxB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAkB,EAClB,aAA0B,EAC1B,aAAqB,EACrB,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"DTAccordion.d.ts","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,gBAAgB;IACxB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAkB,EAClB,aAA0B,EAC1B,aAAqB,EACrB,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,gBAAgB,2CAwClB"}
|
|
@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import { useState, useCallback, useRef, useEffect } from 'react';
|
|
14
14
|
import { StyleSheet, View, Pressable, Animated, } from 'react-native';
|
|
15
15
|
import { Text } from 'react-native-paper';
|
|
16
|
-
import {
|
|
16
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
17
17
|
import { getVariantColor } from '../utils/variantColors';
|
|
18
18
|
/**
|
|
19
19
|
* DT-styled Accordion with animated height expansion
|
|
@@ -28,6 +28,7 @@ import { getVariantColor } from '../utils/variantColors';
|
|
|
28
28
|
* />
|
|
29
29
|
*/
|
|
30
30
|
export function DTAccordion({ sections, variant = 'normal', activeVariant = 'emphasis', allowMultiple = false, initialOpenKeys, onSectionToggle, style, }) {
|
|
31
|
+
const theme = useDTTheme();
|
|
31
32
|
const [openKeys, setOpenKeys] = useState(new Set(initialOpenKeys));
|
|
32
33
|
const toggleSection = useCallback((key) => {
|
|
33
34
|
setOpenKeys(prev => {
|
|
@@ -43,11 +44,12 @@ export function DTAccordion({ sections, variant = 'normal', activeVariant = 'emp
|
|
|
43
44
|
return next;
|
|
44
45
|
});
|
|
45
46
|
}, [allowMultiple, onSectionToggle]);
|
|
46
|
-
const inactiveColor = getVariantColor(variant);
|
|
47
|
-
const activeColor = getVariantColor(activeVariant);
|
|
47
|
+
const inactiveColor = getVariantColor(theme, variant);
|
|
48
|
+
const activeColor = getVariantColor(theme, activeVariant);
|
|
48
49
|
return (_jsx(View, { style: [styles.container, style], children: sections.map(section => (_jsx(AccordionSection, { section: section, isOpen: openKeys.has(section.key), onToggle: () => toggleSection(section.key), inactiveColor: inactiveColor, activeColor: activeColor }, section.key))) }));
|
|
49
50
|
}
|
|
50
51
|
function AccordionSection({ section, isOpen, onToggle, inactiveColor, activeColor, }) {
|
|
52
|
+
const theme = useDTTheme();
|
|
51
53
|
const heightAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
|
|
52
54
|
const chevronAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
|
|
53
55
|
const [contentHeight, setContentHeight] = useState(0);
|
|
@@ -80,6 +82,7 @@ function AccordionSection({ section, isOpen, onToggle, inactiveColor, activeColo
|
|
|
80
82
|
{
|
|
81
83
|
borderColor: sectionColor,
|
|
82
84
|
borderTopColor: sectionColor,
|
|
85
|
+
backgroundColor: theme.colors.background,
|
|
83
86
|
opacity: pressed ? 0.7 : 1,
|
|
84
87
|
},
|
|
85
88
|
], children: [_jsx(Text, { style: [styles.title, { color: sectionColor }], children: section.title }), _jsx(Animated.View, { style: [
|
|
@@ -91,7 +94,7 @@ function AccordionSection({ section, isOpen, onToggle, inactiveColor, activeColo
|
|
|
91
94
|
height: measured ? animatedHeight : undefined,
|
|
92
95
|
overflow: 'hidden',
|
|
93
96
|
},
|
|
94
|
-
], children: _jsx(View, { style: styles.content, onLayout: e => {
|
|
97
|
+
], children: _jsx(View, { style: [styles.content, { backgroundColor: theme.colors.background }], onLayout: e => {
|
|
95
98
|
const h = e.nativeEvent.layout.height;
|
|
96
99
|
if (h > 0 && !measured) {
|
|
97
100
|
setContentHeight(h);
|
|
@@ -110,7 +113,6 @@ const styles = StyleSheet.create({
|
|
|
110
113
|
flexDirection: 'row',
|
|
111
114
|
alignItems: 'center',
|
|
112
115
|
justifyContent: 'space-between',
|
|
113
|
-
backgroundColor: DTColors.dark,
|
|
114
116
|
borderWidth: 1,
|
|
115
117
|
borderTopWidth: 5,
|
|
116
118
|
paddingVertical: 12,
|
|
@@ -126,7 +128,6 @@ const styles = StyleSheet.create({
|
|
|
126
128
|
content: {
|
|
127
129
|
paddingHorizontal: 16,
|
|
128
130
|
paddingVertical: 12,
|
|
129
|
-
backgroundColor: DTColors.dark,
|
|
130
131
|
},
|
|
131
132
|
chevron: {
|
|
132
133
|
justifyContent: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTAccordion.js","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"DTAccordion.js","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAiB,eAAe,EAAC,MAAM,wBAAwB,CAAC;AAmDvE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,aAAa,GAAG,UAAU,EAC1B,aAAa,GAAG,KAAK,EACrB,eAAe,EACf,eAAe,EACf,KAAK,GACY;IACjB,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,IAAI,GAAG,CAAC,eAAe,CAAC,CACzB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,GAAW,EAAE,EAAE;QACd,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAChD,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACjC,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAChB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACnB,CAAC;YACD,eAAe,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;YAClC,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,CAAC,CACjC,CAAC;IAEF,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,YACnC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvB,KAAC,gBAAgB,IAEf,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,EACjC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAC1C,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,IALnB,OAAO,CAAC,GAAG,CAMhB,CACH,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,GAOZ;IACC,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACtE,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,QAAQ,CAAC;YAChB,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;gBAC1B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvB,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,KAAK;aACvB,CAAC;YACF,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;gBAC3B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvB,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;aACtB,CAAC;SACH,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAEtC,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,WAAW,CAAC,WAAW,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,eAEH,MAAC,SAAS,IACR,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC;oBACpB,MAAM,CAAC,MAAM;oBACb;wBACE,WAAW,EAAE,YAAY;wBACzB,cAAc,EAAE,YAAY;wBAC5B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;wBACxC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;qBAC3B;iBACF,aACD,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAC,KAAK,EAAE,YAAY,EAAC,CAAC,YAC/C,OAAO,CAAC,KAAK,GACT,EACP,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE;4BACL,MAAM,CAAC,OAAO;4BACd,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,aAAa,EAAC,CAAC,EAAC;yBACvC,YACD,KAAC,IAAI,IACH,KAAK,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,EAAC,cAAc,EAAE,YAAY,EAAC,CAAC,GAC5D,GACY,IACN,EAGZ,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE;oBACL,MAAM,CAAC,cAAc;oBACrB;wBACE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;wBAC7C,QAAQ,EAAE,QAAQ;qBACnB;iBACF,YACD,KAAC,IAAI,IACH,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EAAC,CAAC,EACnE,QAAQ,EAAE,CAAC,CAAC,EAAE;wBACZ,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC;wBACtC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;4BACvB,gBAAgB,CAAC,CAAC,CAAC,CAAC;4BACpB,WAAW,CAAC,IAAI,CAAC,CAAC;4BAClB,IAAI,CAAC,MAAM,EAAE,CAAC;gCACZ,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;4BACzB,CAAC;wBACH,CAAC;oBACH,CAAC,YACA,OAAO,CAAC,QAAQ,GACZ,GACO,IACX,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,GAAG,EAAE,CAAC;KACP;IACD,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,CAAC;QACd,cAAc,EAAE,CAAC;QACjB,eAAe,EAAE,EAAE;QACnB,iBAAiB,EAAE,EAAE;KACtB;IACD,KAAK,EAAE;QACL,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,GAAG;QAClB,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,EAAE;KACb;IACD,cAAc,EAAE,EAAE;IAClB,OAAO,EAAE;QACP,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;KACpB;IACD,OAAO,EAAE;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,CAAC;QAClB,gBAAgB,EAAE,CAAC;QACnB,cAAc,EAAE,CAAC;QACjB,eAAe,EAAE,aAAa;QAC9B,gBAAgB,EAAE,aAAa;KAChC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DT Badge Overlay
|
|
3
|
+
*
|
|
4
|
+
* Positioning wrapper for badges on cards and media frames.
|
|
5
|
+
* Places children absolutely at a specified corner with configurable offset.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNode } from 'react';
|
|
8
|
+
import { ViewStyle, StyleProp } from 'react-native';
|
|
9
|
+
type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
10
|
+
interface DTBadgeOverlayProps {
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Corner position for the badge
|
|
14
|
+
* @default 'bottom-right'
|
|
15
|
+
*/
|
|
16
|
+
position?: BadgePosition;
|
|
17
|
+
/**
|
|
18
|
+
* Offset from the corner in pixels
|
|
19
|
+
* @default 8
|
|
20
|
+
*/
|
|
21
|
+
offset?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Additional styles
|
|
24
|
+
*/
|
|
25
|
+
style?: StyleProp<ViewStyle>;
|
|
26
|
+
}
|
|
27
|
+
export declare function DTBadgeOverlay({ children, position, offset, style, }: DTBadgeOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export {};
|
|
29
|
+
//# sourceMappingURL=DTBadgeOverlay.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTBadgeOverlay.d.ts","sourceRoot":"","sources":["../../src/components/DTBadgeOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAO,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAExD,KAAK,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE/E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAyB,EACzB,MAAU,EACV,KAAK,GACN,EAAE,mBAAmB,2CASrB"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
export function DTBadgeOverlay({ children, position = 'bottom-right', offset = 8, style, }) {
|
|
4
|
+
const positionStyle = {
|
|
5
|
+
position: 'absolute',
|
|
6
|
+
zIndex: 4,
|
|
7
|
+
...(position.includes('top') ? { top: offset } : { bottom: offset }),
|
|
8
|
+
...(position.includes('right') ? { right: offset } : { left: offset }),
|
|
9
|
+
};
|
|
10
|
+
return _jsx(View, { style: [positionStyle, style], children: children });
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=DTBadgeOverlay.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTBadgeOverlay.js","sourceRoot":"","sources":["../../src/components/DTBadgeOverlay.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,IAAI,EAAuB,MAAM,cAAc,CAAC;AAsBxD,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,GAAG,cAAc,EACzB,MAAM,GAAG,CAAC,EACV,KAAK,GACe;IACpB,MAAM,aAAa,GAAc;QAC/B,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,CAAC;QAChE,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;KACnE,CAAC;IAEF,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,YAAG,QAAQ,GAAQ,CAAC;AAChE,CAAC"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* DT Button Component
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* with
|
|
4
|
+
* Interactive bevel button matching the storefront .menu-item-clipped pattern:
|
|
5
|
+
* - Default: outlined rectangle, no bevel, colored border with thick top
|
|
6
|
+
* - Pressed/hover: bottom-right bevel appears, fills with mode color, text goes dark
|
|
7
|
+
* - Selected: bevel persists, fills with 70% opacity mode color
|
|
6
8
|
*/
|
|
7
9
|
import { ViewStyle, StyleProp } from 'react-native';
|
|
8
10
|
import { type DTVariant } from '../utils/variantColors';
|
|
@@ -18,11 +20,16 @@ interface DTButtonProps {
|
|
|
18
20
|
variant?: DTVariant;
|
|
19
21
|
/**
|
|
20
22
|
* Button display mode
|
|
21
|
-
* - 'outlined': Border with transparent background (default)
|
|
22
|
-
* - 'contained': Filled background
|
|
23
|
+
* - 'outlined': Border with transparent background, bevel on press (default)
|
|
24
|
+
* - 'contained': Filled background with static bevel
|
|
23
25
|
* @default 'outlined'
|
|
24
26
|
*/
|
|
25
27
|
mode?: 'outlined' | 'contained';
|
|
28
|
+
/**
|
|
29
|
+
* Whether the button is in a persistent selected state
|
|
30
|
+
* (bevel visible, filled with 70% opacity mode color)
|
|
31
|
+
*/
|
|
32
|
+
selected?: boolean;
|
|
26
33
|
/**
|
|
27
34
|
* Custom color (overrides variant)
|
|
28
35
|
*/
|
|
@@ -45,24 +52,11 @@ interface DTButtonProps {
|
|
|
45
52
|
*/
|
|
46
53
|
borderWidth?: number;
|
|
47
54
|
/**
|
|
48
|
-
* Bevel size in pixels
|
|
49
|
-
* @default
|
|
55
|
+
* Bevel size in pixels (bottom-right corner)
|
|
56
|
+
* @default 16
|
|
50
57
|
*/
|
|
51
58
|
bevelSize?: number;
|
|
52
59
|
}
|
|
53
|
-
|
|
54
|
-
* DT-styled Button component with SVG beveled corners
|
|
55
|
-
*
|
|
56
|
-
* @example
|
|
57
|
-
* <DTButton variant="normal" onPress={handleScan}>
|
|
58
|
-
* Scan NFC Tag
|
|
59
|
-
* </DTButton>
|
|
60
|
-
*
|
|
61
|
-
* @example
|
|
62
|
-
* <DTButton variant="emphasis" mode="contained" onPress={handleAction}>
|
|
63
|
-
* View Results
|
|
64
|
-
* </DTButton>
|
|
65
|
-
*/
|
|
66
|
-
export declare function DTButton({ children, variant, mode, color, onPress, disabled, style, borderWidth, bevelSize, }: DTButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
60
|
+
export declare function DTButton({ children, variant, mode, selected, color, onPress, disabled, style, borderWidth, bevelSize, }: DTButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
67
61
|
export {};
|
|
68
62
|
//# sourceMappingURL=DTButton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTButton.d.ts","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"DTButton.d.ts","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAsB,MAAM,cAAc,CAAC;AAIzF,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAkB,EAClB,IAAiB,EACjB,QAAgB,EAChB,KAAK,EACL,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,WAAe,EACf,SAAc,GACf,EAAE,aAAa,2CAoJf"}
|
|
@@ -2,40 +2,103 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
/**
|
|
3
3
|
* DT Button Component
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
* with
|
|
5
|
+
* Interactive bevel button matching the storefront .menu-item-clipped pattern:
|
|
6
|
+
* - Default: outlined rectangle, no bevel, colored border with thick top
|
|
7
|
+
* - Pressed/hover: bottom-right bevel appears, fills with mode color, text goes dark
|
|
8
|
+
* - Selected: bevel persists, fills with 70% opacity mode color
|
|
7
9
|
*/
|
|
8
|
-
import {
|
|
10
|
+
import { useRef, useEffect } from 'react';
|
|
11
|
+
import { StyleSheet, View, Pressable, Animated } from 'react-native';
|
|
9
12
|
import { Text } from 'react-native-paper';
|
|
10
|
-
import Svg, { Path } from 'react-native-svg';
|
|
11
|
-
import {
|
|
13
|
+
import Svg, { Path, Rect } from 'react-native-svg';
|
|
14
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
12
15
|
import { getVariantColor } from '../utils/variantColors';
|
|
13
|
-
import {
|
|
16
|
+
import { buildBeveledRectPath } from '../utils/bevelPaths';
|
|
14
17
|
import { useComponentLayout } from '../utils/useComponentLayout';
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
* DT-styled Button component with SVG beveled corners
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* <DTButton variant="normal" onPress={handleScan}>
|
|
21
|
-
* Scan NFC Tag
|
|
22
|
-
* </DTButton>
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* <DTButton variant="emphasis" mode="contained" onPress={handleAction}>
|
|
26
|
-
* View Results
|
|
27
|
-
* </DTButton>
|
|
28
|
-
*/
|
|
29
|
-
export function DTButton({ children, variant = 'normal', mode = 'outlined', color, onPress, disabled = false, style, borderWidth = 2, bevelSize = 8, }) {
|
|
18
|
+
export function DTButton({ children, variant = 'normal', mode = 'outlined', selected = false, color, onPress, disabled = false, style, borderWidth = 2, bevelSize = 16, }) {
|
|
19
|
+
const theme = useDTTheme();
|
|
30
20
|
const { dimensions, onLayout, hasDimensions } = useComponentLayout();
|
|
31
|
-
const
|
|
32
|
-
const
|
|
21
|
+
const pulseAnim = useRef(new Animated.Value(1)).current;
|
|
22
|
+
const pressed = useRef(false);
|
|
23
|
+
const accentColor = getVariantColor(theme, variant, color);
|
|
24
|
+
const selectedColor = accentColor + 'B3'; // ~70% opacity
|
|
33
25
|
const isContained = mode === 'contained';
|
|
34
|
-
const
|
|
35
|
-
const textColor = isContained ? DTColors.dark : accentColor;
|
|
26
|
+
const useBevels = theme.custom.bevelMd > 0;
|
|
36
27
|
const { width, height } = dimensions;
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
// Build SVG paths: rectangle (default) and beveled (active)
|
|
29
|
+
const rectPath = hasDimensions
|
|
30
|
+
? buildBeveledRectPath(width, height, { corners: {}, strokeWidth: borderWidth })
|
|
31
|
+
: '';
|
|
32
|
+
const bevelPath = useBevels && hasDimensions
|
|
33
|
+
? buildBeveledRectPath(width, height, {
|
|
34
|
+
corners: { bottomRight: bevelSize },
|
|
35
|
+
strokeWidth: borderWidth,
|
|
36
|
+
})
|
|
37
|
+
: '';
|
|
38
|
+
// Pulse animation for pressed/selected hover
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (selected) {
|
|
41
|
+
// No pulse when just selected (matches storefront: animation: none on .selected)
|
|
42
|
+
pulseAnim.setValue(1);
|
|
43
|
+
}
|
|
44
|
+
return () => {
|
|
45
|
+
pulseAnim.stopAnimation();
|
|
46
|
+
};
|
|
47
|
+
}, [selected, pulseAnim]);
|
|
48
|
+
const startPulse = () => {
|
|
49
|
+
Animated.loop(Animated.sequence([
|
|
50
|
+
Animated.timing(pulseAnim, {
|
|
51
|
+
toValue: 0.5,
|
|
52
|
+
duration: 1000,
|
|
53
|
+
useNativeDriver: true,
|
|
54
|
+
}),
|
|
55
|
+
Animated.timing(pulseAnim, {
|
|
56
|
+
toValue: 1,
|
|
57
|
+
duration: 1000,
|
|
58
|
+
useNativeDriver: true,
|
|
59
|
+
}),
|
|
60
|
+
])).start();
|
|
61
|
+
};
|
|
62
|
+
const stopPulse = () => {
|
|
63
|
+
pulseAnim.stopAnimation();
|
|
64
|
+
pulseAnim.setValue(1);
|
|
65
|
+
};
|
|
66
|
+
const handlePressIn = () => {
|
|
67
|
+
pressed.current = true;
|
|
68
|
+
startPulse();
|
|
69
|
+
};
|
|
70
|
+
const handlePressOut = () => {
|
|
71
|
+
pressed.current = false;
|
|
72
|
+
if (!selected) {
|
|
73
|
+
stopPulse();
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
// Determine visual state
|
|
77
|
+
const showBevel = isContained || selected;
|
|
78
|
+
const getBgColor = (isPressed) => {
|
|
79
|
+
if (isContained)
|
|
80
|
+
return accentColor;
|
|
81
|
+
if (selected)
|
|
82
|
+
return selectedColor;
|
|
83
|
+
if (isPressed)
|
|
84
|
+
return accentColor;
|
|
85
|
+
return 'transparent';
|
|
86
|
+
};
|
|
87
|
+
const getTextColor = (isPressed) => {
|
|
88
|
+
if (isContained || selected || isPressed)
|
|
89
|
+
return theme.colors.onPrimary;
|
|
90
|
+
return accentColor;
|
|
91
|
+
};
|
|
92
|
+
return (_jsx(Pressable, { onPress: onPress, disabled: disabled, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [{ opacity: disabled ? 0.5 : 1 }, style], children: ({ pressed: isPressedState }) => (_jsxs(Animated.View, { style: [styles.container, { opacity: pulseAnim }], onLayout: onLayout, children: [!useBevels && (_jsx(View, { style: [
|
|
93
|
+
StyleSheet.absoluteFill,
|
|
94
|
+
{
|
|
95
|
+
borderWidth,
|
|
96
|
+
borderColor: accentColor,
|
|
97
|
+
borderTopWidth: 5,
|
|
98
|
+
borderRadius: theme.custom.radiusSm,
|
|
99
|
+
backgroundColor: getBgColor(isPressedState),
|
|
100
|
+
},
|
|
101
|
+
] })), useBevels && hasDimensions && (_jsxs(Svg, { style: StyleSheet.absoluteFill, width: width, height: height, viewBox: `0 0 ${width} ${height}`, children: [_jsx(Path, { d: (isPressedState || showBevel) ? bevelPath : rectPath, fill: getBgColor(isPressedState), stroke: accentColor, strokeWidth: borderWidth }), _jsx(Rect, { x: borderWidth / 2, y: 0, width: width - borderWidth, height: 5, fill: accentColor })] })), _jsx(View, { style: styles.content, children: typeof children === 'string' ? (_jsx(Text, { variant: "labelLarge", style: [styles.label, { color: getTextColor(isPressedState) }], children: children })) : (children) })] })) }));
|
|
39
102
|
}
|
|
40
103
|
const styles = StyleSheet.create({
|
|
41
104
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTButton.js","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":";AAAA
|
|
1
|
+
{"version":3,"file":"DTButton.js","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
* - Bottom-right bevel: 2em (~32px)
|
|
9
9
|
* - Bottom-left bevel: 1em (~16px)
|
|
10
10
|
* - Border width: 0.2em (~3px)
|
|
11
|
+
*
|
|
12
|
+
* The progress bar is a structural element on the left edge (0 to bevelSizeSmall).
|
|
13
|
+
* It is always present. At 0 progress it shows surface color (empty bar).
|
|
14
|
+
* As progress increases, accent color fills from the bottom up.
|
|
11
15
|
*/
|
|
12
16
|
import { ReactNode } from 'react';
|
|
13
17
|
import { ViewStyle, StyleProp } from 'react-native';
|
|
@@ -32,6 +36,12 @@ interface DTCardProps {
|
|
|
32
36
|
* @default true when title is provided
|
|
33
37
|
*/
|
|
34
38
|
showHeader?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Progress value (0–1) for left-edge vertical progress bar.
|
|
41
|
+
* Always present. At 0 the bar shows surface color (empty).
|
|
42
|
+
* @default 0
|
|
43
|
+
*/
|
|
44
|
+
progress?: number;
|
|
35
45
|
/**
|
|
36
46
|
* Additional styles for the card container
|
|
37
47
|
*/
|
|
@@ -61,8 +71,7 @@ interface DTCardProps {
|
|
|
61
71
|
*/
|
|
62
72
|
bevelSizeSmall?: number;
|
|
63
73
|
/**
|
|
64
|
-
* Background color
|
|
65
|
-
* @default '#000000'
|
|
74
|
+
* Background color (defaults to theme background)
|
|
66
75
|
*/
|
|
67
76
|
backgroundColor?: string;
|
|
68
77
|
/**
|
|
@@ -83,7 +92,7 @@ interface DTCardProps {
|
|
|
83
92
|
* <Text>Tap to scan</Text>
|
|
84
93
|
* </DTCard>
|
|
85
94
|
*/
|
|
86
|
-
export declare function DTCard({ children, mode, borderColor, title, showHeader, style, contentStyle, padding, borderWidth, bevelSize, bevelSizeSmall, backgroundColor, onPress, }: DTCardProps): import("react/jsx-runtime").JSX.Element;
|
|
95
|
+
export declare function DTCard({ children, mode, borderColor, title, showHeader, progress, style, contentStyle, padding, borderWidth, bevelSize, bevelSizeSmall, backgroundColor, onPress, }: DTCardProps): import("react/jsx-runtime").JSX.Element;
|
|
87
96
|
/**
|
|
88
97
|
* DT design system constants matching web CSS variables
|
|
89
98
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTCard.d.ts","sourceRoot":"","sources":["../../src/components/DTCard.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"DTCard.d.ts","sourceRoot":"","sources":["../../src/components/DTCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA8GD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAe,EACf,WAAW,EACX,KAAK,EACL,UAAU,EACV,QAAY,EACZ,KAAK,EACL,YAAY,EACZ,OAAY,EACZ,WAAe,EACf,SAAc,EACd,cAAmB,EACnB,eAAe,EACf,OAAO,GACR,EAAE,WAAW,2CAoJb;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;CAc1B,CAAC"}
|