@dangerousthings/react-native 0.2.1 → 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/README.md +17 -1
- 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
|
@@ -2,10 +2,95 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { StyleSheet, View, Pressable } from 'react-native';
|
|
3
3
|
import { Text } from 'react-native-paper';
|
|
4
4
|
import Svg, { Path } from 'react-native-svg';
|
|
5
|
-
import {
|
|
5
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
6
6
|
import { getVariantColor } from '../utils/variantColors';
|
|
7
7
|
import { buildCardBevelPath } from '../utils/bevelPaths';
|
|
8
8
|
import { useComponentLayout } from '../utils/useComponentLayout';
|
|
9
|
+
/**
|
|
10
|
+
* Build inner card path with left edge at bevelSizeSmall (for progress bar zone).
|
|
11
|
+
* 5-point polygon — no bottom-left bevel, straight vertical left edge.
|
|
12
|
+
*/
|
|
13
|
+
function buildInnerCardPath(w, h, bevelBR, bw, bevelSizeSmall) {
|
|
14
|
+
const right = w - bw;
|
|
15
|
+
const top = bw;
|
|
16
|
+
const bottom = h - bw;
|
|
17
|
+
const br = Math.min(bevelBR - bw, (right - bevelSizeSmall) / 3, (bottom - top) / 3);
|
|
18
|
+
if (right <= bevelSizeSmall || bottom <= top)
|
|
19
|
+
return '';
|
|
20
|
+
return [
|
|
21
|
+
`M ${bevelSizeSmall} ${top}`,
|
|
22
|
+
`L ${right} ${top}`,
|
|
23
|
+
`L ${right} ${bottom - br}`,
|
|
24
|
+
`L ${right - br} ${bottom}`,
|
|
25
|
+
`L ${bevelSizeSmall} ${bottom}`,
|
|
26
|
+
'Z',
|
|
27
|
+
].join(' ');
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Build the full progress bar fill area path (inset 3px from frame on all sides).
|
|
31
|
+
* This is the region where the surface/accent gradient fills.
|
|
32
|
+
*/
|
|
33
|
+
function buildProgressAreaPath(cardH, bw, bevelSizeSmall) {
|
|
34
|
+
const left = bw;
|
|
35
|
+
const right = bevelSizeSmall - bw;
|
|
36
|
+
const top = bw;
|
|
37
|
+
const bevelStartY = cardH - bevelSizeSmall;
|
|
38
|
+
const bottomRight = cardH - bw * 2; // y at bottom-right of fill area (on bevel diagonal)
|
|
39
|
+
if (right <= left || bevelStartY <= top)
|
|
40
|
+
return '';
|
|
41
|
+
return [
|
|
42
|
+
`M ${left} ${top}`,
|
|
43
|
+
`L ${right} ${top}`,
|
|
44
|
+
`L ${right} ${bottomRight}`,
|
|
45
|
+
`L ${left} ${bevelStartY}`,
|
|
46
|
+
'Z',
|
|
47
|
+
].join(' ');
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Build the accent-colored portion of the progress bar (fills from bottom).
|
|
51
|
+
* Returns empty string when progress is 0.
|
|
52
|
+
*/
|
|
53
|
+
function buildProgressFillPath(cardH, bw, bevelSizeSmall, progress) {
|
|
54
|
+
const p = Math.max(0, Math.min(1, progress));
|
|
55
|
+
if (p === 0)
|
|
56
|
+
return '';
|
|
57
|
+
const left = bw;
|
|
58
|
+
const right = bevelSizeSmall - bw;
|
|
59
|
+
const top = bw;
|
|
60
|
+
const bevelStartY = cardH - bevelSizeSmall;
|
|
61
|
+
const bottomRight = cardH - bw * 2;
|
|
62
|
+
if (right <= left || bevelStartY <= top)
|
|
63
|
+
return '';
|
|
64
|
+
// Total fill area height (along the left edge, from top to bevelStartY)
|
|
65
|
+
const areaH = bevelStartY - top;
|
|
66
|
+
// How much of the area is filled from the bottom
|
|
67
|
+
const fillTop = top + areaH * (1 - p);
|
|
68
|
+
if (fillTop >= bevelStartY) {
|
|
69
|
+
// Fill is entirely within the bevel zone
|
|
70
|
+
// The bevel diagonal goes from (left, bevelStartY) to (right, bottomRight)
|
|
71
|
+
// At y=fillTop, x on the diagonal: x = left + (fillTop - bevelStartY) * (right - left) / (bottomRight - bevelStartY)
|
|
72
|
+
const bevelH = bottomRight - bevelStartY;
|
|
73
|
+
if (bevelH <= 0)
|
|
74
|
+
return '';
|
|
75
|
+
const xAtFillTop = left + ((fillTop - bevelStartY) / bevelH) * (right - left);
|
|
76
|
+
if (xAtFillTop >= right)
|
|
77
|
+
return '';
|
|
78
|
+
return [
|
|
79
|
+
`M ${xAtFillTop} ${fillTop}`,
|
|
80
|
+
`L ${right} ${fillTop}`,
|
|
81
|
+
`L ${right} ${bottomRight}`,
|
|
82
|
+
'Z',
|
|
83
|
+
].join(' ');
|
|
84
|
+
}
|
|
85
|
+
// Fill extends above the bevel zone — rectangle + bevel triangle
|
|
86
|
+
return [
|
|
87
|
+
`M ${left} ${fillTop}`,
|
|
88
|
+
`L ${right} ${fillTop}`,
|
|
89
|
+
`L ${right} ${bottomRight}`,
|
|
90
|
+
`L ${left} ${bevelStartY}`,
|
|
91
|
+
'Z',
|
|
92
|
+
].join(' ');
|
|
93
|
+
}
|
|
9
94
|
/**
|
|
10
95
|
* DT-styled Card component with SVG beveled corners
|
|
11
96
|
*
|
|
@@ -19,20 +104,56 @@ import { useComponentLayout } from '../utils/useComponentLayout';
|
|
|
19
104
|
* <Text>Tap to scan</Text>
|
|
20
105
|
* </DTCard>
|
|
21
106
|
*/
|
|
22
|
-
export function DTCard({ children, mode = 'normal', borderColor, title, showHeader, style, contentStyle, padding = 16, borderWidth = 3, bevelSize = 32, bevelSizeSmall = 16, backgroundColor
|
|
107
|
+
export function DTCard({ children, mode = 'normal', borderColor, title, showHeader, progress = 0, style, contentStyle, padding = 16, borderWidth = 3, bevelSize = 32, bevelSizeSmall = 16, backgroundColor, onPress, }) {
|
|
108
|
+
const theme = useDTTheme();
|
|
23
109
|
const { dimensions, onLayout, hasDimensions } = useComponentLayout();
|
|
24
|
-
const accentColor = getVariantColor(mode, borderColor);
|
|
110
|
+
const accentColor = getVariantColor(theme, mode, borderColor);
|
|
25
111
|
const shouldShowHeader = showHeader ?? !!title;
|
|
112
|
+
const bgColor = backgroundColor ?? theme.colors.background;
|
|
26
113
|
const { width, height } = dimensions;
|
|
114
|
+
const useBevels = theme.custom.bevelMd > 0;
|
|
27
115
|
// Outer bevel path (full card shape)
|
|
28
|
-
const outerPath = hasDimensions
|
|
116
|
+
const outerPath = useBevels && hasDimensions
|
|
29
117
|
? buildCardBevelPath(width, height, bevelSize, bevelSizeSmall, 0)
|
|
30
118
|
: '';
|
|
31
|
-
// Inner bevel path
|
|
32
|
-
const innerPath = hasDimensions
|
|
33
|
-
?
|
|
119
|
+
// Inner bevel path — left edge at bevelSizeSmall (progress bar zone)
|
|
120
|
+
const innerPath = useBevels && hasDimensions
|
|
121
|
+
? buildInnerCardPath(width, height, bevelSize, borderWidth, bevelSizeSmall)
|
|
122
|
+
: '';
|
|
123
|
+
// Progress bar paths — computed once, reused in progress SVG and frame overlay
|
|
124
|
+
const progressAreaPath = useBevels && hasDimensions
|
|
125
|
+
? buildProgressAreaPath(height, borderWidth, bevelSizeSmall)
|
|
126
|
+
: '';
|
|
127
|
+
const progressFillPath = useBevels && hasDimensions && progress > 0
|
|
128
|
+
? buildProgressFillPath(height, borderWidth, bevelSizeSmall, progress)
|
|
34
129
|
: '';
|
|
35
|
-
|
|
130
|
+
// Frame overlay: outer + inner + progressArea hole (evenodd punches window for progress bar)
|
|
131
|
+
const framePath = useBevels && hasDimensions
|
|
132
|
+
? outerPath + ' ' + innerPath + (progressAreaPath ? ' ' + progressAreaPath : '')
|
|
133
|
+
: '';
|
|
134
|
+
const content = (_jsxs(View, { style: [
|
|
135
|
+
styles.container,
|
|
136
|
+
!useBevels && {
|
|
137
|
+
borderWidth,
|
|
138
|
+
borderColor: accentColor,
|
|
139
|
+
borderRadius: theme.custom.radius,
|
|
140
|
+
backgroundColor: bgColor,
|
|
141
|
+
overflow: 'hidden',
|
|
142
|
+
},
|
|
143
|
+
style,
|
|
144
|
+
], onLayout: onLayout, children: [useBevels && hasDimensions && (_jsx(Svg, { style: StyleSheet.absoluteFill, width: width, height: height, viewBox: `0 0 ${width} ${height}`, children: _jsx(Path, { d: innerPath, fill: bgColor }) })), useBevels && hasDimensions && (_jsxs(Svg, { style: [StyleSheet.absoluteFill, { zIndex: 1 }], width: width, height: height, viewBox: `0 0 ${width} ${height}`, pointerEvents: "none", children: [_jsx(Path, { d: progressAreaPath, fill: accentColor }), _jsx(Path, { d: progressAreaPath, fill: bgColor, opacity: 0.6 }), progressFillPath !== '' && (_jsx(Path, { d: progressFillPath, fill: accentColor }))] })), !useBevels && (_jsx(View, { style: [styles.progressBar, {
|
|
145
|
+
width: bevelSizeSmall,
|
|
146
|
+
left: borderWidth,
|
|
147
|
+
top: borderWidth,
|
|
148
|
+
bottom: borderWidth,
|
|
149
|
+
borderBottomLeftRadius: theme.custom.radius > 0 ? Math.max(0, theme.custom.radius - borderWidth) : 0,
|
|
150
|
+
}], children: _jsx(View, { style: [
|
|
151
|
+
styles.progressFill,
|
|
152
|
+
{
|
|
153
|
+
backgroundColor: accentColor,
|
|
154
|
+
height: `${Math.round(Math.max(0, Math.min(1, progress)) * 100)}%`,
|
|
155
|
+
},
|
|
156
|
+
] }) })), _jsxs(View, { style: [styles.innerContainer, useBevels && { paddingLeft: bevelSizeSmall - borderWidth }], children: [shouldShowHeader && (_jsx(View, { style: [styles.header, { backgroundColor: accentColor }], children: title && (_jsx(Text, { variant: "titleMedium", style: [styles.headerText, { color: theme.colors.onPrimary }], children: title })) })), _jsx(View, { style: [styles.content, { padding }, contentStyle], children: children })] }), useBevels && hasDimensions && (_jsx(Svg, { style: [StyleSheet.absoluteFill, styles.frameOverlay], width: width, height: height, viewBox: `0 0 ${width} ${height}`, pointerEvents: "none", children: _jsx(Path, { d: framePath, fillRule: "evenodd", fill: accentColor }) }))] }));
|
|
36
157
|
if (onPress) {
|
|
37
158
|
return (_jsx(Pressable, { onPress: onPress, style: ({ pressed }) => ({ opacity: pressed ? 0.8 : 1 }), children: content }));
|
|
38
159
|
}
|
|
@@ -66,7 +187,8 @@ const styles = StyleSheet.create({
|
|
|
66
187
|
overflow: 'hidden',
|
|
67
188
|
},
|
|
68
189
|
header: {
|
|
69
|
-
|
|
190
|
+
paddingLeft: 8,
|
|
191
|
+
paddingRight: 16,
|
|
70
192
|
paddingVertical: 12,
|
|
71
193
|
},
|
|
72
194
|
headerText: {
|
|
@@ -77,5 +199,18 @@ const styles = StyleSheet.create({
|
|
|
77
199
|
frameOverlay: {
|
|
78
200
|
zIndex: 2,
|
|
79
201
|
},
|
|
202
|
+
progressBar: {
|
|
203
|
+
position: 'absolute',
|
|
204
|
+
left: 0,
|
|
205
|
+
top: 0,
|
|
206
|
+
bottom: 0,
|
|
207
|
+
backgroundColor: 'transparent',
|
|
208
|
+
zIndex: 3,
|
|
209
|
+
justifyContent: 'flex-end',
|
|
210
|
+
overflow: 'hidden',
|
|
211
|
+
},
|
|
212
|
+
progressFill: {
|
|
213
|
+
width: '100%',
|
|
214
|
+
},
|
|
80
215
|
});
|
|
81
216
|
//# sourceMappingURL=DTCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTCard.js","sourceRoot":"","sources":["../../src/components/DTCard.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"DTCard.js","sourceRoot":"","sources":["../../src/components/DTCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/DTCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"DTCheckbox.d.ts","sourceRoot":"","sources":["../../src/components/DTCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI1F,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,UAAU,eAAe;IACvB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,OAAkB,EAClB,KAAK,EACL,QAAgB,EAChB,IAAS,EACT,KAAK,EACL,KAAK,EACL,UAAU,GACX,EAAE,eAAe,2CAoEjB"}
|
|
@@ -8,10 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
8
8
|
*
|
|
9
9
|
* Uses diagonal-symmetry bevels (top-left + bottom-right) on the indicator.
|
|
10
10
|
*/
|
|
11
|
-
import { StyleSheet, Pressable } from 'react-native';
|
|
11
|
+
import { StyleSheet, View, Pressable } from 'react-native';
|
|
12
12
|
import { Text } from 'react-native-paper';
|
|
13
13
|
import Svg, { Path } from 'react-native-svg';
|
|
14
|
-
import {
|
|
14
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
15
15
|
import { getVariantColor } from '../utils/variantColors';
|
|
16
16
|
import { buildBeveledRectPath } from '../utils/bevelPaths';
|
|
17
17
|
/**
|
|
@@ -24,20 +24,33 @@ import { buildBeveledRectPath } from '../utils/bevelPaths';
|
|
|
24
24
|
* <DTCheckbox checked={true} onPress={toggle} variant="success" label="Accepted" />
|
|
25
25
|
*/
|
|
26
26
|
export function DTCheckbox({ checked, onPress, variant = 'normal', label, disabled = false, size = 24, color, style, labelStyle, }) {
|
|
27
|
-
const
|
|
27
|
+
const theme = useDTTheme();
|
|
28
|
+
const accentColor = getVariantColor(theme, variant, color);
|
|
28
29
|
const opacity = disabled ? 0.5 : 1;
|
|
29
30
|
const borderWidth = 2;
|
|
31
|
+
const useBevels = theme.custom.bevelMd > 0;
|
|
30
32
|
const bevelSize = Math.round(size * 0.3);
|
|
31
33
|
// Outer beveled path (border)
|
|
32
|
-
const outerPath =
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
const outerPath = useBevels
|
|
35
|
+
? buildBeveledRectPath(size, size, {
|
|
36
|
+
corners: { topLeft: bevelSize, bottomRight: bevelSize },
|
|
37
|
+
strokeWidth: borderWidth,
|
|
38
|
+
})
|
|
39
|
+
: '';
|
|
36
40
|
return (_jsxs(Pressable, { onPress: onPress, disabled: disabled, style: ({ pressed }) => [
|
|
37
41
|
styles.container,
|
|
38
42
|
{ opacity: pressed ? 0.7 : opacity },
|
|
39
43
|
style,
|
|
40
|
-
], children: [_jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx(Path, { d: outerPath, fill: checked ? accentColor : 'transparent', stroke: accentColor, strokeWidth: borderWidth }), checked && (_jsx(Path, { d: `M ${size * 0.2} ${size * 0.5} L ${size * 0.4} ${size * 0.7} L ${size * 0.8} ${size * 0.25}`, fill: "none", stroke:
|
|
44
|
+
], children: [useBevels ? (_jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx(Path, { d: outerPath, fill: checked ? accentColor : 'transparent', stroke: accentColor, strokeWidth: borderWidth }), checked && (_jsx(Path, { d: `M ${size * 0.2} ${size * 0.5} L ${size * 0.4} ${size * 0.7} L ${size * 0.8} ${size * 0.25}`, fill: "none", stroke: theme.colors.onPrimary, strokeWidth: borderWidth + 0.5, strokeLinecap: "round", strokeLinejoin: "round" }))] })) : (_jsx(View, { style: {
|
|
45
|
+
width: size,
|
|
46
|
+
height: size,
|
|
47
|
+
borderWidth,
|
|
48
|
+
borderColor: accentColor,
|
|
49
|
+
borderRadius: theme.custom.radiusSm,
|
|
50
|
+
backgroundColor: checked ? accentColor : 'transparent',
|
|
51
|
+
alignItems: 'center',
|
|
52
|
+
justifyContent: 'center',
|
|
53
|
+
}, children: checked && (_jsx(Text, { style: { color: theme.colors.onPrimary, fontSize: size * 0.6, lineHeight: size * 0.7 }, children: "\u2713" })) })), label && (_jsx(Text, { style: [styles.label, { color: theme.colors.onSurface }, labelStyle], children: label }))] }));
|
|
41
54
|
}
|
|
42
55
|
const styles = StyleSheet.create({
|
|
43
56
|
container: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTCheckbox.js","sourceRoot":"","sources":["../../src/components/DTCheckbox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAC,UAAU,EAAmC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DTCheckbox.js","sourceRoot":"","sources":["../../src/components/DTCheckbox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { ViewStyle, StyleProp } from 'react-native';
|
|
8
8
|
import { ChipProps } from 'react-native-paper';
|
|
9
|
-
|
|
9
|
+
import { type DTVariant } from '../utils/variantColors';
|
|
10
10
|
interface DTChipProps extends Omit<ChipProps, 'mode'> {
|
|
11
11
|
/**
|
|
12
12
|
* Visual variant of the chip
|
|
13
13
|
* @default 'normal'
|
|
14
14
|
*/
|
|
15
|
-
variant?:
|
|
15
|
+
variant?: DTVariant;
|
|
16
16
|
/**
|
|
17
17
|
* Whether the chip is in selected state
|
|
18
18
|
* @default false
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTChip.d.ts","sourceRoot":"","sources":["../../src/components/DTChip.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAQ,SAAS,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"DTChip.d.ts","sourceRoot":"","sources":["../../src/components/DTChip.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAQ,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EAAE,KAAK,SAAS,EAAmB,MAAM,wBAAwB,CAAC;AAEzE,UAAU,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CA2Bb"}
|
|
@@ -8,14 +8,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
8
8
|
// React import not needed with new JSX transform
|
|
9
9
|
import { StyleSheet } from 'react-native';
|
|
10
10
|
import { Chip } from 'react-native-paper';
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
normal: DTColors.modeNormal,
|
|
14
|
-
emphasis: DTColors.modeEmphasis,
|
|
15
|
-
warning: DTColors.modeWarning,
|
|
16
|
-
success: DTColors.modeSuccess,
|
|
17
|
-
other: DTColors.modeOther,
|
|
18
|
-
};
|
|
11
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
12
|
+
import { getVariantColor } from '../utils/variantColors';
|
|
19
13
|
/**
|
|
20
14
|
* DT-styled Chip component
|
|
21
15
|
*
|
|
@@ -29,16 +23,17 @@ const variantColors = {
|
|
|
29
23
|
* <DTChip variant="warning">Non-Cloneable</DTChip>
|
|
30
24
|
*/
|
|
31
25
|
export function DTChip({ variant = 'normal', selected = false, style, children, ...props }) {
|
|
32
|
-
const
|
|
26
|
+
const theme = useDTTheme();
|
|
27
|
+
const color = getVariantColor(theme, variant);
|
|
33
28
|
const chipStyle = {
|
|
34
29
|
backgroundColor: selected ? color : 'transparent',
|
|
35
30
|
borderColor: color,
|
|
36
31
|
borderWidth: 1,
|
|
37
32
|
borderRadius: 0, // Angular DT style
|
|
38
33
|
};
|
|
39
|
-
return (_jsx(Chip, { ...props, mode: "outlined", textStyle: [
|
|
34
|
+
return (_jsx(Chip, { ...props, mode: "outlined", showSelectedCheck: false, textStyle: [
|
|
40
35
|
styles.text,
|
|
41
|
-
{ color: selected ?
|
|
36
|
+
{ color: selected ? theme.colors.onPrimary : color },
|
|
42
37
|
], style: [styles.chip, chipStyle, style], selectedColor: color, selected: selected, children: children }));
|
|
43
38
|
}
|
|
44
39
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTChip.js","sourceRoot":"","sources":["../../src/components/DTChip.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAa,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DTChip.js","sourceRoot":"","sources":["../../src/components/DTChip.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAa,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAkB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAmBzE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,QAAQ,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAE9C,MAAM,SAAS,GAAc;QAC3B,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;QACjD,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC,EAAE,mBAAmB;KACrC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,IAAI,EAAC,UAAU,EACf,iBAAiB,EAAE,KAAK,EACxB,SAAS,EAAE;YACT,MAAM,CAAC,IAAI;YACX,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAAE;SACrD,EACD,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EACtC,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;KAChB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,GAAG;QAClB,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTDrawer.d.ts","sourceRoot":"","sources":["../../src/components/DTDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAMV,MAAM,cAAc,CAAC;AAKtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,UAAU,aAAa;IACrB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAA2B,EAC3B,QAAkB,EAClB,KAAK,EAAE,WAAiB,EACxB,SAAc,EACd,WAAe,EACf,QAAQ,EACR,KAAK,GACN,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"DTDrawer.d.ts","sourceRoot":"","sources":["../../src/components/DTDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAMV,MAAM,cAAc,CAAC;AAKtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,UAAU,aAAa;IACrB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAA2B,EAC3B,QAAkB,EAClB,KAAK,EAAE,WAAiB,EACxB,SAAc,EACd,WAAe,EACf,QAAQ,EACR,KAAK,GACN,EAAE,aAAa,2CAsIf"}
|
|
@@ -21,7 +21,7 @@ import { StyleSheet, View, Pressable, Animated, BackHandler, ScrollView, useWind
|
|
|
21
21
|
import { Portal, Text } from 'react-native-paper';
|
|
22
22
|
import Svg, { Path } from 'react-native-svg';
|
|
23
23
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
24
|
-
import {
|
|
24
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
25
25
|
import { getVariantColor } from '../utils/variantColors';
|
|
26
26
|
import { buildDrawerBevelPath } from '../utils/bevelPaths';
|
|
27
27
|
/**
|
|
@@ -38,9 +38,11 @@ import { buildDrawerBevelPath } from '../utils/bevelPaths';
|
|
|
38
38
|
* </DTDrawer>
|
|
39
39
|
*/
|
|
40
40
|
export function DTDrawer({ visible, onDismiss, heading, headingVariant = 'emphasis', position = 'right', width: drawerWidth = 400, bevelSize = 32, borderWidth = 2, children, style, }) {
|
|
41
|
+
const theme = useDTTheme();
|
|
42
|
+
const useBevels = theme.custom.bevelMd > 0;
|
|
41
43
|
const slideAnim = useRef(new Animated.Value(0)).current;
|
|
42
44
|
const overlayAnim = useRef(new Animated.Value(0)).current;
|
|
43
|
-
const headerColor = getVariantColor(headingVariant);
|
|
45
|
+
const headerColor = getVariantColor(theme, headingVariant);
|
|
44
46
|
const { width: screenWidth, height: screenHeight } = useWindowDimensions();
|
|
45
47
|
const insets = useSafeAreaInsets();
|
|
46
48
|
const effectiveWidth = Math.min(drawerWidth, screenWidth);
|
|
@@ -93,17 +95,21 @@ export function DTDrawer({ visible, onDismiss, heading, headingVariant = 'emphas
|
|
|
93
95
|
});
|
|
94
96
|
// Don't render when fully hidden
|
|
95
97
|
const pointerEvents = visible ? 'auto' : 'none';
|
|
96
|
-
return (_jsx(Portal, { children: _jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: pointerEvents, children: [_jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: overlayAnim }], children: _jsx(Pressable, { style: [StyleSheet.absoluteFill,
|
|
98
|
+
return (_jsx(Portal, { children: _jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: pointerEvents, children: [_jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: overlayAnim }], children: _jsx(Pressable, { style: [StyleSheet.absoluteFill, { backgroundColor: theme.colors.backdrop }], onPress: onDismiss }) }), _jsxs(Animated.View, { style: [
|
|
97
99
|
styles.panel,
|
|
98
100
|
position === 'right' ? styles.panelRight : styles.panelLeft,
|
|
99
101
|
{ width: effectiveWidth, transform: [{ translateX }] },
|
|
102
|
+
!useBevels && {
|
|
103
|
+
borderWidth,
|
|
104
|
+
borderColor: headerColor,
|
|
105
|
+
borderRadius: theme.custom.radius,
|
|
106
|
+
backgroundColor: theme.colors.background,
|
|
107
|
+
overflow: 'hidden',
|
|
108
|
+
},
|
|
100
109
|
style,
|
|
101
|
-
], children: [_jsx(View, { style: StyleSheet.absoluteFill, children: _jsxs(Svg, { width: effectiveWidth, height: screenHeight, children: [_jsx(Path, { d: buildDrawerBevelPath(effectiveWidth, screenHeight, bevelSize, position), fill: headerColor }), _jsx(Path, { d: buildDrawerBevelPath(effectiveWidth - borderWidth * 2, screenHeight - borderWidth * 2, bevelSize - borderWidth, position), fill:
|
|
110
|
+
], children: [useBevels && (_jsx(View, { style: StyleSheet.absoluteFill, children: _jsxs(Svg, { width: effectiveWidth, height: screenHeight, children: [_jsx(Path, { d: buildDrawerBevelPath(effectiveWidth, screenHeight, bevelSize, position), fill: headerColor }), _jsx(Path, { d: buildDrawerBevelPath(effectiveWidth - borderWidth * 2, screenHeight - borderWidth * 2, bevelSize - borderWidth, position), fill: theme.colors.background, transform: `translate(${borderWidth}, ${borderWidth})` })] }) })), _jsxs(View, { style: [styles.header, { backgroundColor: headerColor, paddingTop: insets.top + 16 }], children: [_jsx(Text, { style: [styles.headerText, { color: theme.colors.onPrimary }], children: heading }), _jsx(Pressable, { onPress: onDismiss, style: ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 }), children: _jsx(Text, { style: [styles.closeButton, { color: theme.colors.onPrimary }], children: "\u2715" }) })] }), _jsx(ScrollView, { style: styles.content, contentContainerStyle: [styles.contentContainer, { paddingBottom: insets.bottom + 16 }], children: children })] })] }) }));
|
|
102
111
|
}
|
|
103
112
|
const styles = StyleSheet.create({
|
|
104
|
-
overlay: {
|
|
105
|
-
backgroundColor: DTColors.overlay,
|
|
106
|
-
},
|
|
107
113
|
panel: {
|
|
108
114
|
position: 'absolute',
|
|
109
115
|
top: 0,
|
|
@@ -124,13 +130,11 @@ const styles = StyleSheet.create({
|
|
|
124
130
|
zIndex: 1,
|
|
125
131
|
},
|
|
126
132
|
headerText: {
|
|
127
|
-
color: DTColors.dark,
|
|
128
133
|
fontWeight: '700',
|
|
129
134
|
fontSize: 18,
|
|
130
135
|
letterSpacing: 0.5,
|
|
131
136
|
},
|
|
132
137
|
closeButton: {
|
|
133
|
-
color: DTColors.dark,
|
|
134
138
|
fontSize: 20,
|
|
135
139
|
fontWeight: '700',
|
|
136
140
|
paddingHorizontal: 8,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTDrawer.js","sourceRoot":"","sources":["../../src/components/DTDrawer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,EAAE,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAC,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"DTDrawer.js","sourceRoot":"","sources":["../../src/components/DTDrawer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* DT Feature Legend
|
|
3
|
+
*
|
|
4
|
+
* Displays product features in a grid with icons and rotated labels.
|
|
5
|
+
* Source: dt-shopify-storefront UseCaseLegend component.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNode } from 'react';
|
|
8
|
+
import { ViewStyle, StyleProp } from 'react-native';
|
|
9
|
+
import { type DTVariant } from '../utils/variantColors';
|
|
10
|
+
export interface DTFeatureItem {
|
|
11
|
+
key: string;
|
|
12
|
+
name: string;
|
|
13
|
+
icon: ReactNode;
|
|
14
|
+
state: 'supported' | 'disabled' | 'unsupported';
|
|
15
|
+
}
|
|
16
|
+
interface DTFeatureLegendProps {
|
|
17
|
+
features: DTFeatureItem[];
|
|
18
|
+
/**
|
|
19
|
+
* Header title text
|
|
20
|
+
*/
|
|
21
|
+
title?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Color variant for the header bar
|
|
24
|
+
* @default 'normal'
|
|
25
|
+
*/
|
|
26
|
+
variant?: DTVariant;
|
|
27
|
+
/**
|
|
28
|
+
* Number of columns in the grid
|
|
29
|
+
* @default 5
|
|
30
|
+
*/
|
|
31
|
+
columns?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Icon size in pixels
|
|
34
|
+
* @default 42
|
|
35
|
+
*/
|
|
36
|
+
iconSize?: number;
|
|
37
|
+
style?: StyleProp<ViewStyle>;
|
|
38
|
+
}
|
|
39
|
+
export declare function DTFeatureLegend({ features, title, variant, columns, iconSize, style, }: DTFeatureLegendProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export {};
|
|
41
|
+
//# sourceMappingURL=DTFeatureLegend.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTFeatureLegend.d.ts","sourceRoot":"","sources":["../../src/components/DTFeatureLegend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,aAAa,CAAC;CACjD;AAQD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,KAAK,EACL,OAAkB,EAClB,OAAW,EACX,QAAa,EACb,KAAK,GACN,EAAE,oBAAoB,2CAyCtB"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import { Text } from 'react-native-paper';
|
|
4
|
+
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
5
|
+
import { getVariantColor } from '../utils/variantColors';
|
|
6
|
+
const stateToVariant = {
|
|
7
|
+
supported: 'normal',
|
|
8
|
+
disabled: 'emphasis',
|
|
9
|
+
unsupported: 'warning',
|
|
10
|
+
};
|
|
11
|
+
export function DTFeatureLegend({ features, title, variant = 'normal', columns = 5, iconSize = 42, style, }) {
|
|
12
|
+
const theme = useDTTheme();
|
|
13
|
+
const headerColor = getVariantColor(theme, variant);
|
|
14
|
+
const itemWidth = `${100 / columns}%`;
|
|
15
|
+
return (_jsxs(View, { style: [styles.container, style], children: [title && (_jsx(View, { style: [styles.header, { backgroundColor: headerColor }], children: _jsx(Text, { variant: "labelLarge", style: [styles.headerText, { color: theme.colors.onPrimary }], children: title }) })), _jsx(View, { style: styles.grid, children: features.map(feature => {
|
|
16
|
+
const featureColor = getVariantColor(theme, stateToVariant[feature.state]);
|
|
17
|
+
return (_jsxs(View, { style: [styles.item, { width: itemWidth }], children: [_jsx(View, { style: [styles.iconContainer, { width: iconSize, height: iconSize }], children: feature.icon }), _jsx(View, { style: styles.labelContainer, children: _jsx(Text, { style: [styles.label, { color: featureColor }], children: feature.name }) })] }, feature.key));
|
|
18
|
+
}) })] }));
|
|
19
|
+
}
|
|
20
|
+
const styles = StyleSheet.create({
|
|
21
|
+
container: {
|
|
22
|
+
overflow: 'hidden',
|
|
23
|
+
},
|
|
24
|
+
header: {
|
|
25
|
+
paddingHorizontal: 16,
|
|
26
|
+
paddingVertical: 8,
|
|
27
|
+
},
|
|
28
|
+
headerText: {
|
|
29
|
+
fontWeight: '700',
|
|
30
|
+
letterSpacing: 0.5,
|
|
31
|
+
textTransform: 'uppercase',
|
|
32
|
+
},
|
|
33
|
+
grid: {
|
|
34
|
+
flexDirection: 'row',
|
|
35
|
+
flexWrap: 'wrap',
|
|
36
|
+
},
|
|
37
|
+
item: {
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
paddingVertical: 8,
|
|
40
|
+
paddingHorizontal: 4,
|
|
41
|
+
gap: 4,
|
|
42
|
+
},
|
|
43
|
+
iconContainer: {
|
|
44
|
+
alignItems: 'center',
|
|
45
|
+
justifyContent: 'center',
|
|
46
|
+
},
|
|
47
|
+
labelContainer: {
|
|
48
|
+
paddingTop: 4,
|
|
49
|
+
},
|
|
50
|
+
label: {
|
|
51
|
+
fontSize: 11,
|
|
52
|
+
fontWeight: '600',
|
|
53
|
+
textAlign: 'center',
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
//# sourceMappingURL=DTFeatureLegend.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DTFeatureLegend.js","sourceRoot":"","sources":["../../src/components/DTFeatureLegend.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DTGallery.d.ts","sourceRoot":"","sources":["../../src/components/DTGallery.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAKV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAkB,EAClB,aAAkB,EAClB,SAAc,EACd,WAAe,EACf,KAAK,GACN,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"DTGallery.d.ts","sourceRoot":"","sources":["../../src/components/DTGallery.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAKV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAkB,EAClB,aAAkB,EAClB,SAAc,EACd,WAAe,EACf,KAAK,GACN,EAAE,cAAc,kDA+OhB"}
|