@impulse-ui-native/primitives 14.1.0 → 15.0.0

package/README.md

@@ -140,7 +140,7 @@ appearance, but does not inject label content.
 
 `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.
 
-`Divider` defaults to a subtle horizontal separator. 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.
+`Divider` defaults to a primary horizontal separator. 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.
 
 `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.
 
@@ -242,3 +242,16 @@ using the matching resolved action tokens; string children are styled automatica
 `primary`, across filled, outlined, and soft variants. Tone affects the fallback
 surface, initials, and border; images and presence/status colors retain their own
 meaning. Avatar appearance tokens move to `components.avatar.colors[tone][variant]`.
+
+Badge, Tag, IconView, and field addon icons share the enabled variant/tone palette with Button and IconButton: primary soft uses secondary fill/contrast, secondary soft uses subtle fill with secondary contrast, and neutral soft uses subtle neutral fill with primary text.
+
+Selected control surfaces and disabled selected surfaces share the Button palette, including field borders, Tag borders, slider thumbs/bubbles, and segmented items. Entered text and validation retain their own semantic roles.
+
+## Repository palette consistency
+
+Spinner uses the shared primary/secondary/neutral stroke accents, plus inverse.
+Divider adds neutral and secondary tones alongside primary/inverse and the existing
+subtle/default/strong border-intensity aliases. Its default is primary.
+Feedback tone names are shared through FeedbackTone; generic brand tones through
+ComponentTone. Typography foregrounds and raw Icon color/fill remain explicit
+semantic or caller-selected colors, rather than a second tone API.

package/dist/components/atoms/divider.js

@@ -12,7 +12,7 @@ const Divider = memo(function Divider2({
   inset = "none",
   orientation = "horizontal",
   style,
-  tone = "subtle",
+  tone = "primary",
   ...props
 }) {
   const extractedStyleProps = useStyleProps(props);

package/dist/components/atoms/divider.js.map

@@ -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 = \"subtle\",\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"]}
+{"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 = \"primary\",\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/dist/components/controls/provider.js

@@ -2,7 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { ControlContext } from "../../contexts/control.context";
 const ControlProvider = memo(function ControlProvider2(props) {
-  const { children, disabled, error, size, variant, tone = "neutral" } = props;
+  const {
+    children,
+    disabled,
+    error,
+    size = "medium",
+    variant = "outlined",
+    tone = "neutral"
+  } = props;
   const context = useMemo(
     () => ({
       disabled,

package/dist/components/controls/provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/provider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { ControlComponentProps, ControlContextData } from \"../../types\";\nimport { ControlContext } from \"../../contexts/control.context\";\n\nexport const ControlProvider = memo(function ControlProvider(\n  props: PropsWithChildren<ControlComponentProps>,\n) {\n  const { children, disabled, error, size, variant, tone = \"neutral\" } = props;\n\n  const context = useMemo<ControlContextData>(\n    () => ({\n      disabled,\n      error,\n      size,\n      variant,\n      tone,\n    }),\n    [disabled, error, size, variant, tone],\n  );\n\n  return (\n    <ControlContext.Provider value={context}>\n      {children}\n    </ControlContext.Provider>\n  );\n});\n"],"mappings":"AAuBI;AAtBJ,SAAS,MAAM,eAAe;AAG9B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,MAAM,SAAS,OAAO,UAAU,IAAI;AAEvE,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO,MAAM,SAAS,IAAI;AAAA,EACvC;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["ControlProvider"]}
+{"version":3,"sources":["../../../src/components/controls/provider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { ControlComponentProps, ControlContextData } from \"../../types\";\nimport { ControlContext } from \"../../contexts/control.context\";\n\nexport const ControlProvider = memo(function ControlProvider(\n  props: PropsWithChildren<ControlComponentProps>,\n) {\n  const {\n    children,\n    disabled,\n    error,\n    size = \"medium\",\n    variant = \"outlined\",\n    tone = \"neutral\",\n  } = props;\n\n  const context = useMemo<ControlContextData>(\n    () => ({\n      disabled,\n      error,\n      size,\n      variant,\n      tone,\n    }),\n    [disabled, error, size, variant, tone],\n  );\n\n  return (\n    <ControlContext.Provider value={context}>\n      {children}\n    </ControlContext.Provider>\n  );\n});\n"],"mappings":"AA8BI;AA7BJ,SAAS,MAAM,eAAe;AAG9B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO,MAAM,SAAS,IAAI;AAAA,EACvC;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["ControlProvider"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "14.1.0",
+  "version": "15.0.0",
   "description": "Foundational UI primitives for building ImpulseUI Native components.",
   "keywords": [
     "react-native",
@@ -28,9 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/theme": "14.1.0",
-    "@impulse-ui-native/icon": "14.1.0",
-    "@impulse-ui-native/core": "14.1.0"
+    "@impulse-ui-native/theme": "15.0.0",
+    "@impulse-ui-native/icon": "15.0.0",
+    "@impulse-ui-native/core": "15.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",