@impulse-ui-native/primitives 15.0.0 → 15.0.2
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
|
@@ -140,7 +140,7 @@ appearance, but does not inject label content.
|
|
|
140
140
|
|
|
141
141
|
`Spinner` defaults to the primary theme tone and medium size. Use `tone="inverse"` on inverse surfaces, or provide `color` when the indicator must match contextual content.
|
|
142
142
|
|
|
143
|
-
`Divider` defaults to a
|
|
143
|
+
`Divider` defaults to a horizontal separator using `tone="default"`. Use start/end insets to align it with surrounding content, switch to vertical orientation inside a container with a defined height, and use `color` only when the semantic tones do not fit the surrounding surface.
|
|
144
144
|
|
|
145
145
|
`Avatar` supports `filled`, `outlined`, and `soft` display variants. It renders fallback content below its image so initials or a custom fallback remain visible while the image loads or when it fails. Avatar grouping and overflow counts are intentionally handled separately.
|
|
146
146
|
|
|
@@ -251,7 +251,11 @@ Selected control surfaces and disabled selected surfaces share the Button palett
|
|
|
251
251
|
|
|
252
252
|
Spinner uses the shared primary/secondary/neutral stroke accents, plus inverse.
|
|
253
253
|
Divider adds neutral and secondary tones alongside primary/inverse and the existing
|
|
254
|
-
subtle/default/strong border-intensity aliases. Its default is
|
|
254
|
+
subtle/default/strong border-intensity aliases. Its default is `tone="default"`.
|
|
255
255
|
Feedback tone names are shared through FeedbackTone; generic brand tones through
|
|
256
256
|
ComponentTone. Typography foregrounds and raw Icon color/fill remain explicit
|
|
257
257
|
semantic or caller-selected colors, rather than a second tone API.
|
|
258
|
+
|
|
259
|
+
## Agent and design reference
|
|
260
|
+
|
|
261
|
+
Start with the [capability guide](../../docs/design-system/capabilities/primitives.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/divider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n getDividerTokens,\n useStyleProps,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { DividerProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Divider = memo(function Divider({\n color,\n inset = \"none\",\n orientation = \"horizontal\",\n style,\n tone = \"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/divider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n getDividerTokens,\n useStyleProps,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { DividerProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Divider = memo(function Divider({\n color,\n inset = \"none\",\n orientation = \"horizontal\",\n style,\n tone = \"default\",\n ...props\n}: DividerProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { color, inset, orientation, tone },\n [color, inset, orientation, tone],\n );\n\n const dividerStyle = useMemo(\n () => [styles.divider, extractedStyleProps, style],\n [extractedStyleProps, style, styles.divider],\n );\n\n return <View {...props} style={dividerStyle} />;\n});\n\ninterface DividerThemeProps {\n color: DividerProps[\"color\"];\n inset: NonNullable<DividerProps[\"inset\"]>;\n orientation: NonNullable<DividerProps[\"orientation\"]>;\n tone: NonNullable<DividerProps[\"tone\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: DividerThemeProps) {\n const { color, inset, orientation, tone } = props;\n const dividerTokens = getDividerTokens(theme.components.divider, {\n inset,\n orientation,\n tone,\n });\n\n return StyleSheet.create({\n divider: {\n alignSelf: \"stretch\",\n flexShrink: 0,\n height: dividerTokens.height,\n marginBottom: dividerTokens.marginBottom,\n marginEnd: dividerTokens.marginEnd,\n marginStart: dividerTokens.marginStart,\n marginTop: dividerTokens.marginTop,\n width: dividerTokens.width,\n backgroundColor: color ?? dividerTokens.backgroundColor,\n },\n });\n}\n"],"mappings":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AAEd,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,OAAO,OAAO,aAAa,KAAK;AAAA,IAClC,CAAC,OAAO,OAAO,aAAa,IAAI;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,SAAS,qBAAqB,KAAK;AAAA,IACjD,CAAC,qBAAqB,OAAO,OAAO,OAAO;AAAA,EAC7C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,cAAc;AAC/C,CAAC;AASD,SAAS,aAAa,OAAiB,OAA0B;AAC/D,QAAM,EAAE,OAAO,OAAO,aAAa,KAAK,IAAI;AAC5C,QAAM,gBAAgB,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC/D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ,cAAc;AAAA,MACtB,cAAc,cAAc;AAAA,MAC5B,WAAW,cAAc;AAAA,MACzB,aAAa,cAAc;AAAA,MAC3B,WAAW,cAAc;AAAA,MACzB,OAAO,cAAc;AAAA,MACrB,iBAAiB,SAAS,cAAc;AAAA,IAC1C;AAAA,EACF,CAAC;AACH;","names":["Divider"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.2",
|
|
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": "15.0.
|
|
32
|
-
"@impulse-ui-native/icon": "15.0.
|
|
33
|
-
"@impulse-ui-native/core": "15.0.
|
|
31
|
+
"@impulse-ui-native/theme": "15.0.2",
|
|
32
|
+
"@impulse-ui-native/icon": "15.0.2",
|
|
33
|
+
"@impulse-ui-native/core": "15.0.2"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@impulse-ui-native/eslint-config": "1.0.0",
|