@dangerousthings/react-native 0.2.1 → 0.4.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/README.md +17 -1
- package/dist/components/DTAccordion.d.ts.map +1 -1
- package/dist/components/DTAccordion.js +7 -7
- 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 -28
- package/dist/components/DTButton.js.map +1 -1
- package/dist/components/DTCard.d.ts +21 -3
- package/dist/components/DTCard.d.ts.map +1 -1
- package/dist/components/DTCard.js +150 -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 +55 -0
- package/dist/components/DTFeatureLegend.js.map +1 -0
- package/dist/components/DTGallery.d.ts +6 -1
- package/dist/components/DTGallery.d.ts.map +1 -1
- package/dist/components/DTGallery.js +27 -8
- 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 -9
- 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 +6 -5
- 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/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @dangerousthings/react-native
|
|
2
2
|
|
|
3
|
-
React Native components for the Dangerous Things design system —
|
|
3
|
+
React Native components for the Dangerous Things design system — 22 themed components built on React Native Paper with cyberpunk beveled aesthetics.
|
|
4
4
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
@@ -74,6 +74,9 @@ Options:
|
|
|
74
74
|
| `DTMediaFrame` | Diagonal beveled frame for images |
|
|
75
75
|
| `DTAccordion` | Collapsible sections with accent border |
|
|
76
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 |
|
|
77
80
|
|
|
78
81
|
### Interactive
|
|
79
82
|
|
|
@@ -83,6 +86,14 @@ Options:
|
|
|
83
86
|
| `DTDrawer` | Side drawer with edge bevels |
|
|
84
87
|
| `DTGallery` | Image gallery |
|
|
85
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 |
|
|
86
97
|
|
|
87
98
|
## Usage Examples
|
|
88
99
|
|
|
@@ -99,6 +110,11 @@ import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react-native";
|
|
|
99
110
|
<Text>Chip detected</Text>
|
|
100
111
|
</DTCard>
|
|
101
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
|
+
|
|
102
118
|
// Text input with error state
|
|
103
119
|
<DTTextInput
|
|
104
120
|
variant="normal"
|
|
@@ -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,
|
|
@@ -119,14 +121,12 @@ const styles = StyleSheet.create({
|
|
|
119
121
|
title: {
|
|
120
122
|
fontWeight: '600',
|
|
121
123
|
letterSpacing: 0.5,
|
|
122
|
-
textTransform: 'uppercase',
|
|
123
124
|
fontSize: 14,
|
|
124
125
|
},
|
|
125
126
|
contentWrapper: {},
|
|
126
127
|
content: {
|
|
127
128
|
paddingHorizontal: 16,
|
|
128
129
|
paddingVertical: 12,
|
|
129
|
-
backgroundColor: DTColors.dark,
|
|
130
130
|
},
|
|
131
131
|
chevron: {
|
|
132
132
|
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":"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"}
|
|
@@ -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: {
|
|
@@ -53,7 +116,6 @@ const styles = StyleSheet.create({
|
|
|
53
116
|
label: {
|
|
54
117
|
fontWeight: '600',
|
|
55
118
|
letterSpacing: 1,
|
|
56
|
-
textTransform: 'uppercase',
|
|
57
119
|
},
|
|
58
120
|
});
|
|
59
121
|
//# sourceMappingURL=DTButton.js.map
|
|
@@ -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,17 @@ 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;
|
|
45
|
+
/**
|
|
46
|
+
* Which area expands when the card grows to fill space
|
|
47
|
+
* @default 'body'
|
|
48
|
+
*/
|
|
49
|
+
growArea?: 'body' | 'title';
|
|
35
50
|
/**
|
|
36
51
|
* Additional styles for the card container
|
|
37
52
|
*/
|
|
@@ -61,10 +76,13 @@ interface DTCardProps {
|
|
|
61
76
|
*/
|
|
62
77
|
bevelSizeSmall?: number;
|
|
63
78
|
/**
|
|
64
|
-
* Background color
|
|
65
|
-
* @default '#000000'
|
|
79
|
+
* Background color (defaults to theme background)
|
|
66
80
|
*/
|
|
67
81
|
backgroundColor?: string;
|
|
82
|
+
/**
|
|
83
|
+
* Element rendered at the right edge of the header
|
|
84
|
+
*/
|
|
85
|
+
headerRight?: ReactNode;
|
|
68
86
|
/**
|
|
69
87
|
* Press handler
|
|
70
88
|
*/
|
|
@@ -83,7 +101,7 @@ interface DTCardProps {
|
|
|
83
101
|
* <Text>Tap to scan</Text>
|
|
84
102
|
* </DTCard>
|
|
85
103
|
*/
|
|
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;
|
|
104
|
+
export declare function DTCard({ children, mode, borderColor, title, showHeader, progress, growArea, style, contentStyle, padding, borderWidth, bevelSize, bevelSizeSmall, backgroundColor, headerRight, onPress, }: DTCardProps): import("react/jsx-runtime").JSX.Element;
|
|
87
105
|
/**
|
|
88
106
|
* DT design system constants matching web CSS variables
|
|
89
107
|
*/
|
|
@@ -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;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;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,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;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,QAAiB,EACjB,KAAK,EACL,YAAY,EACZ,OAAY,EACZ,WAAe,EACf,SAAc,EACd,cAAmB,EACnB,eAAe,EACf,WAAW,EACX,OAAO,GACR,EAAE,WAAW,2CAqJb;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;CAc1B,CAAC"}
|