@impulse-ui-native/primitives 12.0.0 → 14.0.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 +36 -1
- package/dist/components/atoms/avatar.d.mts +1 -1
- package/dist/components/atoms/avatar.js +5 -4
- package/dist/components/atoms/avatar.js.map +1 -1
- package/dist/components/atoms/button.d.mts +1 -1
- package/dist/components/atoms/button.js +5 -4
- package/dist/components/atoms/button.js.map +1 -1
- package/dist/components/atoms/icon-button.d.mts +1 -1
- package/dist/components/atoms/icon-button.js +5 -4
- package/dist/components/atoms/icon-button.js.map +1 -1
- package/dist/components/atoms/tag.d.mts +1 -1
- package/dist/components/atoms/tag.js +5 -5
- package/dist/components/atoms/tag.js.map +1 -1
- package/dist/types/avatar.types.d.mts +2 -1
- package/dist/types/button.types.d.mts +4 -2
- package/dist/types/icon-button.types.d.mts +2 -1
- package/dist/types/tag.types.d.mts +3 -3
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -68,7 +68,7 @@ export function ProfileSummary() {
|
|
|
68
68
|
<View gap={space.md} padding={space.lg}>
|
|
69
69
|
<Typography.Title3>Profile</Typography.Title3>
|
|
70
70
|
<Avatar initials="AK" status="online" variant="soft" />
|
|
71
|
-
<Tag label="Active"
|
|
71
|
+
<Tag label="Active" tone="success" />
|
|
72
72
|
<Badge tone="success" variant="soft">
|
|
73
73
|
Active
|
|
74
74
|
</Badge>
|
|
@@ -200,3 +200,38 @@ Customize `components.controlContainer.colors[tone][variant][state]`,
|
|
|
200
200
|
`controlInput.colors[tone][variant][state]`, and
|
|
201
201
|
`controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
|
|
202
202
|
the previous `variants[variant][state]` maps.
|
|
203
|
+
|
|
204
|
+
## Button tones
|
|
205
|
+
|
|
206
|
+
`Button` and `IconButton` accept `tone="neutral" | "primary" | "secondary"`
|
|
207
|
+
independently of `variant="filled" | "outlined" | "soft" | "ghost"`.
|
|
208
|
+
The default tone is `primary`, preserving the existing default appearances.
|
|
209
|
+
Neutral uses the neutral palette; secondary uses the secondary brand palette.
|
|
210
|
+
Filled uses the tone fill and paired foreground, outlined uses a tone border,
|
|
211
|
+
soft uses a subtle tone surface, and ghost uses tone content on a transparent surface.
|
|
212
|
+
Loading indicators inherit the resolved foreground. Disabled appearances remain
|
|
213
|
+
neutral and both disabled and loading states prevent interaction.
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
<Button variant="soft" tone="neutral">Cancel</Button>
|
|
217
|
+
<Button variant="filled" tone="primary">Save</Button>
|
|
218
|
+
<IconButton icon={SparkleIcon} variant="outlined" tone="secondary" />
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Custom action tokens move from `variants[variant][state]` to
|
|
222
|
+
`components.button.colors[tone][variant][state]` and
|
|
223
|
+
`components.iconButton.colors[tone][variant][state]`. Each map is authored
|
|
224
|
+
explicitly for direct lookup. For custom Button children, style their foreground
|
|
225
|
+
using the matching resolved action tokens; string children are styled automatically.
|
|
226
|
+
|
|
227
|
+
## Tag and Avatar tones
|
|
228
|
+
|
|
229
|
+
`Tag` now uses `tone` instead of `color`, with the exported `TagTone` type replacing
|
|
230
|
+
`TagColor`. It supports `neutral`, `primary`, `secondary`, `error`, `warning`,
|
|
231
|
+
`success`, and `info`; existing feedback palettes remain available. The default is
|
|
232
|
+
`primary`. Use `<Tag label="Active" tone="success" />`.
|
|
233
|
+
|
|
234
|
+
`Avatar` accepts `tone="neutral" | "primary" | "secondary"`, defaulting to
|
|
235
|
+
`primary`, across filled, outlined, and soft variants. Tone affects the fallback
|
|
236
|
+
surface, initials, and border; images and presence/status colors retain their own
|
|
237
|
+
meaning. Avatar appearance tokens move to `components.avatar.colors[tone][variant]`.
|
|
@@ -4,6 +4,6 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/theme';
|
|
5
5
|
import '../../types/view.types.mjs';
|
|
6
6
|
|
|
7
|
-
declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, ...props }: AvatarProps) => react.JSX.Element>;
|
|
7
|
+
declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, tone, ...props }: AvatarProps) => react.JSX.Element>;
|
|
8
8
|
|
|
9
9
|
export { Avatar };
|
|
@@ -13,13 +13,14 @@ const Avatar = memo(function Avatar2({
|
|
|
13
13
|
statusColor,
|
|
14
14
|
style,
|
|
15
15
|
variant = "filled",
|
|
16
|
+
tone = "primary",
|
|
16
17
|
...props
|
|
17
18
|
}) {
|
|
18
19
|
const extractedStyleProps = useStyleProps(props);
|
|
19
20
|
const styles = useThemedStyles(
|
|
20
21
|
themedStyles,
|
|
21
|
-
{ size, status, statusColor, variant },
|
|
22
|
-
[size, status, statusColor, variant]
|
|
22
|
+
{ size, status, statusColor, variant, tone },
|
|
23
|
+
[size, status, statusColor, variant, tone]
|
|
23
24
|
);
|
|
24
25
|
const sourceKey = useMemo(() => JSON.stringify(source), [source]);
|
|
25
26
|
const containerStyle = useMemo(
|
|
@@ -74,10 +75,10 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
|
|
|
74
75
|
);
|
|
75
76
|
});
|
|
76
77
|
function themedStyles(theme, props) {
|
|
77
|
-
const { size, status, statusColor, variant } = props;
|
|
78
|
+
const { size, status, statusColor, variant, tone } = props;
|
|
78
79
|
const avatarTokens = theme.components.avatar;
|
|
79
80
|
const sizeTokens = avatarTokens.sizes[size];
|
|
80
|
-
const variantTokens = avatarTokens.
|
|
81
|
+
const variantTokens = avatarTokens.colors[tone][variant];
|
|
81
82
|
return StyleSheet.create({
|
|
82
83
|
container: {
|
|
83
84
|
flexShrink: 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/avatar.tsx"],"sourcesContent":["import type { ImageProps } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { Image, StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AvatarProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Avatar = memo(function Avatar({\n fallback,\n imageProps,\n initials,\n size = \"medium\",\n source,\n status,\n statusColor,\n style,\n variant = \"filled\",\n ...props\n}: AvatarProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { size, status, statusColor, variant },\n [size, status, statusColor, variant],\n );\n\n const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n const showInitials =\n (fallback === null || fallback === undefined) && initials;\n\n return (\n <View {...props} style={containerStyle}>\n <View style={styles.content}>\n {fallback}\n {showInitials ? <Text style={styles.initials}>{initials}</Text> : null}\n\n {source ? (\n <AvatarImageLayer\n key={sourceKey}\n imageProps={imageProps}\n source={source}\n />\n ) : null}\n </View>\n\n {status ? <View style={styles.status} /> : null}\n </View>\n );\n});\n\ninterface AvatarImageLayerProps {\n imageProps: AvatarProps[\"imageProps\"];\n source: NonNullable<AvatarProps[\"source\"]>;\n}\n\nconst AvatarImageLayer = memo(function AvatarImageLayer({\n imageProps,\n source,\n}: AvatarImageLayerProps) {\n const [hasError, setHasError] = useState(false);\n\n const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\n (event) => {\n setHasError(true);\n imageProps?.onError?.(event);\n },\n [imageProps],\n );\n\n const imageStyle = useMemo(\n () => [staticStyles.image, imageProps?.style],\n [imageProps?.style],\n );\n\n if (hasError) {\n return null;\n }\n\n return (\n <Image\n resizeMode=\"cover\"\n {...imageProps}\n onError={handleError}\n source={source}\n style={imageStyle}\n />\n );\n});\n\ninterface AvatarThemeProps {\n size: NonNullable<AvatarProps[\"size\"]>;\n status: AvatarProps[\"status\"];\n statusColor: AvatarProps[\"statusColor\"];\n variant: NonNullable<AvatarProps[\"variant\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n const { size, status, statusColor, variant } = props;\n const avatarTokens = theme.components.avatar;\n const sizeTokens = avatarTokens.sizes[size];\n const variantTokens = avatarTokens.
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/avatar.tsx"],"sourcesContent":["import type { ImageProps } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { Image, StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { AvatarProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Avatar = memo(function Avatar({\n fallback,\n imageProps,\n initials,\n size = \"medium\",\n source,\n status,\n statusColor,\n style,\n variant = \"filled\",\n tone = \"primary\",\n ...props\n}: AvatarProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { size, status, statusColor, variant, tone },\n [size, status, statusColor, variant, tone],\n );\n\n const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n const showInitials =\n (fallback === null || fallback === undefined) && initials;\n\n return (\n <View {...props} style={containerStyle}>\n <View style={styles.content}>\n {fallback}\n {showInitials ? <Text style={styles.initials}>{initials}</Text> : null}\n\n {source ? (\n <AvatarImageLayer\n key={sourceKey}\n imageProps={imageProps}\n source={source}\n />\n ) : null}\n </View>\n\n {status ? <View style={styles.status} /> : null}\n </View>\n );\n});\n\ninterface AvatarImageLayerProps {\n imageProps: AvatarProps[\"imageProps\"];\n source: NonNullable<AvatarProps[\"source\"]>;\n}\n\nconst AvatarImageLayer = memo(function AvatarImageLayer({\n imageProps,\n source,\n}: AvatarImageLayerProps) {\n const [hasError, setHasError] = useState(false);\n\n const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\n (event) => {\n setHasError(true);\n imageProps?.onError?.(event);\n },\n [imageProps],\n );\n\n const imageStyle = useMemo(\n () => [staticStyles.image, imageProps?.style],\n [imageProps?.style],\n );\n\n if (hasError) {\n return null;\n }\n\n return (\n <Image\n resizeMode=\"cover\"\n {...imageProps}\n onError={handleError}\n source={source}\n style={imageStyle}\n />\n );\n});\n\ninterface AvatarThemeProps {\n size: NonNullable<AvatarProps[\"size\"]>;\n status: AvatarProps[\"status\"];\n statusColor: AvatarProps[\"statusColor\"];\n variant: NonNullable<AvatarProps[\"variant\"]>;\n tone: NonNullable<AvatarProps[\"tone\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n const { size, status, statusColor, variant, tone } = props;\n const avatarTokens = theme.components.avatar;\n const sizeTokens = avatarTokens.sizes[size];\n const variantTokens = avatarTokens.colors[tone][variant];\n\n return StyleSheet.create({\n container: {\n flexShrink: 0,\n height: sizeTokens.size,\n position: \"relative\",\n width: sizeTokens.size,\n },\n content: {\n alignItems: \"center\",\n backgroundColor: variantTokens.backgroundColor,\n borderColor: variantTokens.borderColor,\n borderRadius: sizeTokens.size / 2,\n borderWidth: avatarTokens.borderWidth,\n height: \"100%\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n width: \"100%\",\n },\n initials: {\n color: variantTokens.color,\n fontFamily: avatarTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n textAlign: \"center\",\n },\n status: {\n backgroundColor:\n statusColor ?? (status ? avatarTokens.statusColors[status] : undefined),\n borderColor: avatarTokens.statusBorderColor,\n borderRadius: sizeTokens.statusSize / 2,\n borderWidth: sizeTokens.statusBorderWidth,\n bottom: 0,\n height: sizeTokens.statusSize,\n position: \"absolute\",\n right: 0,\n width: sizeTokens.statusSize,\n },\n });\n}\n\nconst staticStyles = StyleSheet.create({\n image: {\n bottom: 0,\n height: \"100%\",\n left: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n width: \"100%\",\n },\n});\n"],"mappings":"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","names":["Avatar","AvatarImageLayer"]}
|
|
@@ -4,6 +4,6 @@ import { ButtonProps } from '../../types/button.types.mjs';
|
|
|
4
4
|
import 'react-native';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
|
|
7
|
-
declare const Button: react.MemoExoticComponent<({ size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react.JSX.Element>;
|
|
7
|
+
declare const Button: react.MemoExoticComponent<({ size, variant, tone, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react.JSX.Element>;
|
|
8
8
|
|
|
9
9
|
export { Button };
|
|
@@ -11,6 +11,7 @@ import { Typography } from "./typography";
|
|
|
11
11
|
const Button = memo(function Button2({
|
|
12
12
|
size = "medium",
|
|
13
13
|
variant = "filled",
|
|
14
|
+
tone = "primary",
|
|
14
15
|
disabled,
|
|
15
16
|
loading = false,
|
|
16
17
|
children,
|
|
@@ -19,8 +20,8 @@ const Button = memo(function Button2({
|
|
|
19
20
|
}) {
|
|
20
21
|
const styles = useThemedStyles(
|
|
21
22
|
themedStyles,
|
|
22
|
-
{ size, variant, disabled, loading },
|
|
23
|
-
[size, variant, disabled, loading]
|
|
23
|
+
{ size, variant, tone, disabled, loading },
|
|
24
|
+
[size, variant, tone, disabled, loading]
|
|
24
25
|
);
|
|
25
26
|
const interactionDisabled = disabled === true || loading;
|
|
26
27
|
const buttonStyles = useMemo(
|
|
@@ -36,11 +37,11 @@ const Button = memo(function Button2({
|
|
|
36
37
|
return /* @__PURE__ */ jsx(Pressable, { ...props, disabled: interactionDisabled, style: buttonStyles, children: content });
|
|
37
38
|
});
|
|
38
39
|
function themedStyles(theme, props) {
|
|
39
|
-
const { size, variant, disabled, loading } = props;
|
|
40
|
+
const { size, variant, tone, disabled, loading } = props;
|
|
40
41
|
const buttonTokens = theme.components.button;
|
|
41
42
|
const sizeTokens = buttonTokens.sizes[size];
|
|
42
43
|
const appearanceTokens = getActionStateTokens(
|
|
43
|
-
buttonTokens.
|
|
44
|
+
buttonTokens.colors[tone][variant],
|
|
44
45
|
{
|
|
45
46
|
disabled,
|
|
46
47
|
loading
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n size = \"medium\",\n variant = \"filled\",\n disabled,\n loading = false,\n children,\n style,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, disabled, loading },\n [size, variant, disabled, loading],\n );\n\n const interactionDisabled = disabled === true || loading;\n\n const buttonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n const content = useMemo(() => {\n if (loading) {\n return <Spinner color={styles.text.color} size={size} />;\n }\n\n return typeof children === \"string\" ? (\n <Typography.Master style={styles.text}>{children}</Typography.Master>\n ) : (\n children\n );\n }, [children, loading, size, styles.text]);\n\n return (\n <Pressable {...props} disabled={interactionDisabled} style={buttonStyles}>\n {content}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n const { size, variant, disabled, loading } = props;\n\n const buttonTokens = theme.components.button;\n const sizeTokens = buttonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n buttonTokens.
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n size = \"medium\",\n variant = \"filled\",\n tone = \"primary\",\n disabled,\n loading = false,\n children,\n style,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, tone, disabled, loading },\n [size, variant, tone, disabled, loading],\n );\n\n const interactionDisabled = disabled === true || loading;\n\n const buttonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n const content = useMemo(() => {\n if (loading) {\n return <Spinner color={styles.text.color} size={size} />;\n }\n\n return typeof children === \"string\" ? (\n <Typography.Master style={styles.text}>{children}</Typography.Master>\n ) : (\n children\n );\n }, [children, loading, size, styles.text]);\n\n return (\n <Pressable {...props} disabled={interactionDisabled} style={buttonStyles}>\n {content}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n const { size, variant, tone, disabled, loading } = props;\n\n const buttonTokens = theme.components.button;\n const sizeTokens = buttonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n buttonTokens.colors[tone][variant],\n {\n disabled,\n loading,\n },\n );\n\n return StyleSheet.create({\n button: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n height: sizeTokens.height,\n paddingVertical: sizeTokens.paddingVertical,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n borderWidth: buttonTokens.borderWidth,\n borderRadius: buttonTokens.borderRadius,\n\n borderColor: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n text: {\n width: \"100%\",\n textAlign: \"center\",\n\n fontSize: sizeTokens.fontSize,\n\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AAuCa;AAvCb,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAEpB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ;AAAA,IACzC,CAAC,MAAM,SAAS,MAAM,UAAU,OAAO;AAAA,EACzC;AAEA,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ,OAAO,OAAO,KAAK,OAAO,MAAY;AAAA,IACxD;AAEA,WAAO,OAAO,aAAa,WACzB,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,MAAO,UAAS,IAEjD;AAAA,EAEJ,GAAG,CAAC,UAAU,SAAS,MAAM,OAAO,IAAI,CAAC;AAEzC,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,qBAAqB,OAAO,cACzD,mBACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ,IAAI;AAEnD,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,OAAO,IAAI,EAAE,OAAO;AAAA,IACjC;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,iBAAiB,WAAW;AAAA,MAC5B,mBAAmB,WAAW;AAAA,MAE9B,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,MAE3B,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Button"]}
|
|
@@ -6,6 +6,6 @@ import '@impulse-ui-native/theme';
|
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
7
|
import 'react-native';
|
|
8
8
|
|
|
9
|
-
declare const IconButton: react.MemoExoticComponent<({ size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react.JSX.Element>;
|
|
9
|
+
declare const IconButton: react.MemoExoticComponent<({ size, variant, tone, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react.JSX.Element>;
|
|
10
10
|
|
|
11
11
|
export { IconButton };
|
|
@@ -11,6 +11,7 @@ import { Spinner } from "./spinner";
|
|
|
11
11
|
const IconButton = memo(function IconButton2({
|
|
12
12
|
size = "medium",
|
|
13
13
|
variant = "filled",
|
|
14
|
+
tone = "primary",
|
|
14
15
|
disabled,
|
|
15
16
|
loading = false,
|
|
16
17
|
style,
|
|
@@ -19,8 +20,8 @@ const IconButton = memo(function IconButton2({
|
|
|
19
20
|
}) {
|
|
20
21
|
const styles = useThemedStyles(
|
|
21
22
|
themedStyles,
|
|
22
|
-
{ size, variant, disabled, loading },
|
|
23
|
-
[size, variant, disabled, loading]
|
|
23
|
+
{ size, variant, tone, disabled, loading },
|
|
24
|
+
[size, variant, tone, disabled, loading]
|
|
24
25
|
);
|
|
25
26
|
const interactionDisabled = disabled === true || loading;
|
|
26
27
|
const iconButtonStyles = useMemo(
|
|
@@ -38,11 +39,11 @@ const IconButton = memo(function IconButton2({
|
|
|
38
39
|
);
|
|
39
40
|
});
|
|
40
41
|
function themedStyles(theme, props) {
|
|
41
|
-
const { size, variant, disabled, loading } = props;
|
|
42
|
+
const { size, variant, tone, disabled, loading } = props;
|
|
42
43
|
const iconButtonTokens = theme.components.iconButton;
|
|
43
44
|
const sizeTokens = iconButtonTokens.sizes[size];
|
|
44
45
|
const appearanceTokens = getActionStateTokens(
|
|
45
|
-
iconButtonTokens.
|
|
46
|
+
iconButtonTokens.colors[tone][variant],
|
|
46
47
|
{ disabled, loading }
|
|
47
48
|
);
|
|
48
49
|
return StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\n\nexport const IconButton = memo(function IconButton({\n size = \"medium\",\n variant = \"filled\",\n disabled,\n loading = false,\n style,\n icon,\n ...props\n}: PropsWithChildren<IconButtonProps>) {\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, disabled, loading },\n [size, variant, disabled, loading],\n );\n\n const interactionDisabled = disabled === true || loading;\n\n const iconButtonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n return (\n <Pressable\n {...props}\n disabled={interactionDisabled}\n style={iconButtonStyles}\n >\n {loading ? (\n <Spinner color={styles.icon.color} size={size} />\n ) : (\n <Icon size={size} icon={icon} color={styles.icon.color} />\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n const { size, variant, disabled, loading } = props;\n\n const iconButtonTokens = theme.components.iconButton;\n const sizeTokens = iconButtonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n iconButtonTokens.
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\n\nexport const IconButton = memo(function IconButton({\n size = \"medium\",\n variant = \"filled\",\n tone = \"primary\",\n disabled,\n loading = false,\n style,\n icon,\n ...props\n}: PropsWithChildren<IconButtonProps>) {\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, tone, disabled, loading },\n [size, variant, tone, disabled, loading],\n );\n\n const interactionDisabled = disabled === true || loading;\n\n const iconButtonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n return (\n <Pressable\n {...props}\n disabled={interactionDisabled}\n style={iconButtonStyles}\n >\n {loading ? (\n <Spinner color={styles.icon.color} size={size} />\n ) : (\n <Icon size={size} icon={icon} color={styles.icon.color} />\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n const { size, variant, tone, disabled, loading } = props;\n\n const iconButtonTokens = theme.components.iconButton;\n const sizeTokens = iconButtonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n iconButtonTokens.colors[tone][variant],\n { disabled, loading },\n );\n\n return StyleSheet.create({\n button: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n height: sizeTokens.size,\n width: sizeTokens.size,\n padding: sizeTokens.padding,\n\n borderWidth: iconButtonTokens.borderWidth,\n borderRadius: iconButtonTokens.borderRadius,\n\n borderColor: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n icon: {\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AA4CQ;AA5CR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAEjB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ;AAAA,IACzC,CAAC,MAAM,SAAS,MAAM,UAAU,OAAO;AAAA,EACzC;AAEA,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MAEN,oBACC,oBAAC,WAAQ,OAAO,OAAO,KAAK,OAAO,MAAY,IAE/C,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ,IAAI;AAEnD,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,mBAAmB;AAAA,IACvB,iBAAiB,OAAO,IAAI,EAAE,OAAO;AAAA,IACrC,EAAE,UAAU,QAAQ;AAAA,EACtB;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}
|
|
@@ -3,6 +3,6 @@ import { TagProps } from '../../types/tag.types.mjs';
|
|
|
3
3
|
import 'react-native';
|
|
4
4
|
import '@impulse-ui-native/theme';
|
|
5
5
|
|
|
6
|
-
declare const Tag: react.MemoExoticComponent<({ label, size, variant,
|
|
6
|
+
declare const Tag: react.MemoExoticComponent<({ label, size, variant, tone, closable, disabled, onClose, onPress, }: TagProps) => react.JSX.Element>;
|
|
7
7
|
|
|
8
8
|
export { Tag };
|
|
@@ -14,7 +14,7 @@ const Tag = memo(function Tag2({
|
|
|
14
14
|
label,
|
|
15
15
|
size = "medium",
|
|
16
16
|
variant = "filled",
|
|
17
|
-
|
|
17
|
+
tone = "primary",
|
|
18
18
|
closable,
|
|
19
19
|
disabled,
|
|
20
20
|
onClose,
|
|
@@ -28,9 +28,9 @@ const Tag = memo(function Tag2({
|
|
|
28
28
|
size,
|
|
29
29
|
variant,
|
|
30
30
|
disabled,
|
|
31
|
-
|
|
31
|
+
tone
|
|
32
32
|
},
|
|
33
|
-
[size, variant, disabled,
|
|
33
|
+
[size, variant, disabled, tone]
|
|
34
34
|
);
|
|
35
35
|
const Container = onPress ? Pressable : View;
|
|
36
36
|
const showClose = closable && !disabled && onClose;
|
|
@@ -48,11 +48,11 @@ const Tag = memo(function Tag2({
|
|
|
48
48
|
] });
|
|
49
49
|
});
|
|
50
50
|
function themedStyles(theme, props) {
|
|
51
|
-
const { size, variant,
|
|
51
|
+
const { size, variant, tone, disabled } = props;
|
|
52
52
|
const tagTokens = theme.components.tag;
|
|
53
53
|
const sizeTokens = tagTokens.sizes[size];
|
|
54
54
|
const appearanceTokens = getAvailabilityStateTokens(
|
|
55
|
-
tagTokens.colors[
|
|
55
|
+
tagTokens.colors[tone][variant],
|
|
56
56
|
{ disabled }
|
|
57
57
|
);
|
|
58
58
|
return StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n AppTheme,\n getAvailabilityStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n label,\n size = \"medium\",\n variant = \"filled\",\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n AppTheme,\n getAvailabilityStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n label,\n size = \"medium\",\n variant = \"filled\",\n tone = \"primary\",\n closable,\n disabled,\n onClose,\n onPress,\n}: TagProps) {\n const tokens = useComponentsTokens();\n\n const tagTokens = tokens.tag;\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n tone,\n },\n [size, variant, disabled, tone],\n );\n\n const Container = onPress ? Pressable : View;\n\n const showClose = closable && !disabled && onClose;\n\n return (\n <Container onPress={onPress} disabled={disabled} style={styles.container}>\n <Typography.Caption style={styles.label}>{label}</Typography.Caption>\n\n {showClose ? (\n <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\n <Icon\n icon={XCircleIcon}\n size=\"small\"\n color={styles.icon.color}\n style={styles.icon}\n />\n </Pressable>\n ) : null}\n </Container>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\n const { size, variant, tone, disabled } = props;\n\n const tagTokens = theme.components.tag;\n const sizeTokens = tagTokens.sizes[size];\n const appearanceTokens = getAvailabilityStateTokens(\n tagTokens.colors[tone][variant],\n { disabled },\n );\n\n return StyleSheet.create({\n container: {\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n alignSelf: \"flex-start\",\n\n height: sizeTokens.height,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n minWidth: sizeTokens.minWidth,\n\n borderRadius: tagTokens.borderRadius,\n gap: tagTokens.gap,\n borderWidth: tagTokens.borderWidth,\n\n borderColor: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n label: {\n fontSize: sizeTokens.fontSize,\n color: appearanceTokens.color,\n },\n\n icon: {\n marginLeft: tagTokens.iconMarginLeft,\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AA8CI,SACE,KADF;AA9CJ,SAAS,YAAY;AACrB,SAAS,YAAY,YAAY;AAEjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,MAAM,KAAK,SAASA,KAAI;AAAA,EACnC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,SAAS,oBAAoB;AAEnC,QAAM,YAAY,OAAO;AAEzB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,IAAI;AAAA,EAChC;AAEA,QAAM,YAAY,UAAU,YAAY;AAExC,QAAM,YAAY,YAAY,CAAC,YAAY;AAE3C,SACE,qBAAC,aAAU,SAAkB,UAAoB,OAAO,OAAO,WAC7D;AAAA,wBAAC,WAAW,SAAX,EAAmB,OAAO,OAAO,OAAQ,iBAAM;AAAA,IAE/C,YACC,oBAAC,aAAU,SAAS,SAAS,SAAS,UAAU,cAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO;AAAA;AAAA,IAChB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAsB;AAC3D,QAAM,EAAE,MAAM,SAAS,MAAM,SAAS,IAAI;AAE1C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,IAAI,EAAE,OAAO;AAAA,IAC9B,EAAE,SAAS;AAAA,EACb;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,MAEX,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,UAAU,WAAW;AAAA,MAErB,cAAc,UAAU;AAAA,MACxB,KAAK,UAAU;AAAA,MACf,aAAa,UAAU;AAAA,MAEvB,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Tag"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { ImageProps, StyleProp, ImageStyle, ImageSourcePropType, ViewStyle } from 'react-native';
|
|
3
|
-
import { ComponentSize, AvatarStatus, DisplayVariant } from '@impulse-ui-native/theme';
|
|
3
|
+
import { ComponentSize, AvatarStatus, DisplayVariant, ComponentTone } from '@impulse-ui-native/theme';
|
|
4
4
|
import { ViewProps } from './view.types.mjs';
|
|
5
5
|
|
|
6
6
|
interface AvatarImageProps extends Omit<ImageProps, "source" | "style"> {
|
|
@@ -15,6 +15,7 @@ interface AvatarProps extends Omit<ViewProps, "children"> {
|
|
|
15
15
|
status?: AvatarStatus;
|
|
16
16
|
statusColor?: ViewStyle["backgroundColor"];
|
|
17
17
|
variant?: DisplayVariant;
|
|
18
|
+
tone?: ComponentTone;
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
export type { AvatarImageProps, AvatarProps };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { PressableProps, ViewStyle, StyleProp } from 'react-native';
|
|
2
|
-
import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant, FlexProps } from '@impulse-ui-native/theme';
|
|
2
|
+
import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant, ButtonTone, FlexProps } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
4
|
interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, ShadowProps {
|
|
5
5
|
size?: ComponentSize;
|
|
6
6
|
variant?: ActionVariant;
|
|
7
|
+
tone?: ButtonTone;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
style?: ViewStyle;
|
|
9
10
|
loading?: boolean;
|
|
@@ -11,10 +12,11 @@ interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, Shad
|
|
|
11
12
|
interface ButtonThemeProps {
|
|
12
13
|
size: ComponentSize;
|
|
13
14
|
variant: ActionVariant;
|
|
15
|
+
tone: ButtonTone;
|
|
14
16
|
disabled?: boolean;
|
|
15
17
|
loading: boolean;
|
|
16
18
|
}
|
|
17
|
-
interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style">, FlexProps {
|
|
19
|
+
interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style" | "tone">, FlexProps {
|
|
18
20
|
disabled?: boolean;
|
|
19
21
|
pressedStyle?: StyleProp<ViewStyle>;
|
|
20
22
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IconProps } from '@impulse-ui-native/icon/types';
|
|
2
|
-
import { ComponentSize, ActionVariant } from '@impulse-ui-native/theme';
|
|
2
|
+
import { ComponentSize, ActionVariant, ButtonTone } from '@impulse-ui-native/theme';
|
|
3
3
|
import { ButtonProps } from './button.types.mjs';
|
|
4
4
|
import 'react-native';
|
|
5
5
|
|
|
@@ -9,6 +9,7 @@ interface IconButtonProps extends ButtonProps {
|
|
|
9
9
|
interface IconButtonThemeProps {
|
|
10
10
|
size: ComponentSize;
|
|
11
11
|
variant: ActionVariant;
|
|
12
|
+
tone: ButtonTone;
|
|
12
13
|
disabled?: boolean;
|
|
13
14
|
loading: boolean;
|
|
14
15
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { ViewStyle, PressableProps } from 'react-native';
|
|
2
|
-
import { ComponentSize, DisplayVariant,
|
|
2
|
+
import { ComponentSize, DisplayVariant, TagTone } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
4
|
interface TagProps {
|
|
5
5
|
label: string;
|
|
6
6
|
size?: ComponentSize;
|
|
7
7
|
variant?: DisplayVariant;
|
|
8
|
-
|
|
8
|
+
tone?: TagTone;
|
|
9
9
|
closable?: boolean;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
onClose?: () => void;
|
|
@@ -15,7 +15,7 @@ interface TagProps {
|
|
|
15
15
|
interface TagThemeProps {
|
|
16
16
|
size: ComponentSize;
|
|
17
17
|
variant: DisplayVariant;
|
|
18
|
-
|
|
18
|
+
tone: TagTone;
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
}
|
|
21
21
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "14.0.0",
|
|
4
4
|
"description": "Foundational UI primitives for building ImpulseUI Native components.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": false,
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@impulse-ui-native/theme": "
|
|
32
|
-
"@impulse-ui-native/icon": "
|
|
33
|
-
"@impulse-ui-native/core": "
|
|
31
|
+
"@impulse-ui-native/theme": "14.0.0",
|
|
32
|
+
"@impulse-ui-native/icon": "14.0.0",
|
|
33
|
+
"@impulse-ui-native/core": "14.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@impulse-ui-native/eslint-config": "1.0.0",
|