@impulse-ui-native/primitives 11.2.0 → 11.3.1
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
CHANGED
|
@@ -146,6 +146,10 @@ appearance, but does not inject label content.
|
|
|
146
146
|
|
|
147
147
|
Use `Badge` for compact states and metadata. It supports `filled`, `outlined`, and `soft` display variants and semantic tones. Its addons follow Input: use `PrefixIcon` or `Prefix`, `SuffixIcon` or `Suffix`, and optionally `onPressPrefix` or `onPressSuffix`. A custom component takes precedence over its corresponding icon. Use `Tag` when the whole label needs built-in press or close behavior.
|
|
148
148
|
|
|
149
|
+
Badges follow their parent's `alignItems` for cross-axis alignment. For example,
|
|
150
|
+
use `alignItems="center"` on a column to center badges horizontally. Use
|
|
151
|
+
`alignSelf` on a badge when it needs a different alignment from its siblings.
|
|
152
|
+
|
|
149
153
|
## Dedicated component packages
|
|
150
154
|
|
|
151
155
|
Card, List, Progress, and their prop types are exported from `@impulse-ui-native/card`, `@impulse-ui-native/list`, and `@impulse-ui-native/progress`, respectively. They remain available through `@impulse-ui-native/toolkit`. Migrate direct primitives imports to their owning packages.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/badge/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n useComponentsTokens,\n useStyleProps,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { BadgeProps, BadgeThemeProps } from \"../../../types\";\nimport { View } from \"../view\";\nimport { BadgeAddon } from \"./addon\";\n\nexport const BadgeRoot = memo(function BadgeRoot({\n backgroundColor,\n children,\n color,\n Prefix,\n PrefixIcon,\n onPressPrefix,\n onPressSuffix,\n size = \"medium\",\n style,\n Suffix,\n SuffixIcon,\n tone = \"primary\",\n variant = \"filled\",\n ...props\n}: BadgeProps) {\n const tokens = useComponentsTokens();\n\n const badgeTokens = tokens.badge;\n const sizeTokens = badgeTokens.sizes[size];\n\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { backgroundColor, color, size, tone, variant },\n [backgroundColor, color, size, tone, variant],\n );\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n const affixColor =\n typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n const isTextChild =\n typeof children === \"string\" || typeof children === \"number\";\n\n return (\n <View {...props} style={containerStyle}>\n <BadgeAddon\n Content={Prefix}\n IconComponent={PrefixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressPrefix}\n />\n\n {isTextChild ? (\n <Text numberOfLines={1} style={styles.label}>\n {children}\n </Text>\n ) : (\n children\n )}\n\n <BadgeAddon\n Content={Suffix}\n IconComponent={SuffixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressSuffix}\n />\n </View>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n const { backgroundColor, color, size, tone, variant } = props;\n\n const badgeTokens = theme.components.badge;\n const sizeTokens = badgeTokens.sizes[size];\n const variantTokens = badgeTokens.colors[tone][variant];\n\n return StyleSheet.create({\n container: {\n alignItems: \"center\",\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/badge/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n useComponentsTokens,\n useStyleProps,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { BadgeProps, BadgeThemeProps } from \"../../../types\";\nimport { View } from \"../view\";\nimport { BadgeAddon } from \"./addon\";\n\nexport const BadgeRoot = memo(function BadgeRoot({\n backgroundColor,\n children,\n color,\n Prefix,\n PrefixIcon,\n onPressPrefix,\n onPressSuffix,\n size = \"medium\",\n style,\n Suffix,\n SuffixIcon,\n tone = \"primary\",\n variant = \"filled\",\n ...props\n}: BadgeProps) {\n const tokens = useComponentsTokens();\n\n const badgeTokens = tokens.badge;\n const sizeTokens = badgeTokens.sizes[size];\n\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { backgroundColor, color, size, tone, variant },\n [backgroundColor, color, size, tone, variant],\n );\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n const affixColor =\n typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n const isTextChild =\n typeof children === \"string\" || typeof children === \"number\";\n\n return (\n <View {...props} style={containerStyle}>\n <BadgeAddon\n Content={Prefix}\n IconComponent={PrefixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressPrefix}\n />\n\n {isTextChild ? (\n <Text numberOfLines={1} style={styles.label}>\n {children}\n </Text>\n ) : (\n children\n )}\n\n <BadgeAddon\n Content={Suffix}\n IconComponent={SuffixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressSuffix}\n />\n </View>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n const { backgroundColor, color, size, tone, variant } = props;\n\n const badgeTokens = theme.components.badge;\n const sizeTokens = badgeTokens.sizes[size];\n const variantTokens = badgeTokens.colors[tone][variant];\n\n return StyleSheet.create({\n container: {\n alignItems: \"center\",\n flexDirection: \"row\",\n flexShrink: 0,\n justifyContent: \"center\",\n\n borderRadius: badgeTokens.borderRadius,\n borderWidth: badgeTokens.borderWidth,\n gap: badgeTokens.gap,\n height: sizeTokens.height,\n minWidth: sizeTokens.minWidth,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\n borderColor: variantTokens.borderColor,\n },\n\n label: {\n textAlign: \"center\",\n\n fontFamily: badgeTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n lineHeight: sizeTokens.lineHeight,\n\n color: color ?? variantTokens.color,\n },\n });\n}\n"],"mappings":"AAsDI,SACE,KADF;AAtDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,QAAM,cACJ,OAAO,aAAa,YAAY,OAAO,aAAa;AAEtD,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,IAEC,cACC,oBAAC,QAAK,eAAe,GAAG,OAAO,OAAO,OACnC,UACH,IAEA;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,KACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAwB;AAC7D,QAAM,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ,IAAI;AAExD,QAAM,cAAc,MAAM,WAAW;AACrC,QAAM,aAAa,YAAY,MAAM,IAAI;AACzC,QAAM,gBAAgB,YAAY,OAAO,IAAI,EAAE,OAAO;AAEtD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,cAAc,YAAY;AAAA,MAC1B,aAAa,YAAY;AAAA,MACzB,KAAK,YAAY;AAAA,MACjB,QAAQ,WAAW;AAAA,MACnB,UAAU,WAAW;AAAA,MACrB,mBAAmB,WAAW;AAAA,MAE9B,iBAAiB,mBAAmB,cAAc;AAAA,MAClD,aAAa,cAAc;AAAA,IAC7B;AAAA,IAEA,OAAO;AAAA,MACL,WAAW;AAAA,MAEX,YAAY,YAAY;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MAEvB,OAAO,SAAS,cAAc;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["BadgeRoot"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.3.1",
|
|
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": "11.
|
|
32
|
-
"@impulse-ui-native/icon": "11.
|
|
33
|
-
"@impulse-ui-native/core": "11.
|
|
31
|
+
"@impulse-ui-native/theme": "11.3.1",
|
|
32
|
+
"@impulse-ui-native/icon": "11.3.1",
|
|
33
|
+
"@impulse-ui-native/core": "11.3.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@impulse-ui-native/eslint-config": "1.0.0",
|