@impulse-ui-native/primitives 11.4.0 → 14.0.0

package/README.md

@@ -68,7 +68,7 @@ export function ProfileSummary() {
     <View gap={space.md} padding={space.lg}>
       <Typography.Title3>Profile</Typography.Title3>
       <Avatar initials="AK" status="online" variant="soft" />
-      <Tag label="Active" color="success" />
+      <Tag label="Active" tone="success" />
       <Badge tone="success" variant="soft">
         Active
       </Badge>
@@ -176,7 +176,62 @@ spacing, dimension, and shadow props. Native `style` objects or callbacks overri
 direct style props; `pressedStyle` applies last while pressed.
 
 ```tsx
-<Pressable flex={1} flexDirection="row" alignItems="center" gap={8} padding={16}>
+<Pressable
+  flex={1}
+  flexDirection="row"
+  alignItems="center"
+  gap={8}
+  padding={16}
+>
   <Typography.Master>Continue</Typography.Master>
 </Pressable>
 ```
+
+## Field appearance
+
+Rectangular fields support `variant="outlined" | "soft" | "filled"` and
+`tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
+Outlined uses a transparent surface with a tone border; soft uses a subtle tone
+surface; filled uses the tone fill with its paired foreground. Colors come from
+the active theme in both schemes. Error styling overrides the selected tone;
+disabled fields use neutral styling and block interaction.
+
+Customize `components.controlContainer.colors[tone][variant][state]`,
+`controlInput.colors[tone][variant][state]`, and
+`controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
+the previous `variants[variant][state]` maps.
+
+## Button tones
+
+`Button` and `IconButton` accept `tone="neutral" | "primary" | "secondary"`
+independently of `variant="filled" | "outlined" | "soft" | "ghost"`.
+The default tone is `primary`, preserving the existing default appearances.
+Neutral uses the neutral palette; secondary uses the secondary brand palette.
+Filled uses the tone fill and paired foreground, outlined uses a tone border,
+soft uses a subtle tone surface, and ghost uses tone content on a transparent surface.
+Loading indicators inherit the resolved foreground. Disabled appearances remain
+neutral and both disabled and loading states prevent interaction.
+
+```tsx
+<Button variant="soft" tone="neutral">Cancel</Button>
+<Button variant="filled" tone="primary">Save</Button>
+<IconButton icon={SparkleIcon} variant="outlined" tone="secondary" />
+```
+
+Custom action tokens move from `variants[variant][state]` to
+`components.button.colors[tone][variant][state]` and
+`components.iconButton.colors[tone][variant][state]`. Each map is authored
+explicitly for direct lookup. For custom Button children, style their foreground
+using the matching resolved action tokens; string children are styled automatically.
+
+## Tag and Avatar tones
+
+`Tag` now uses `tone` instead of `color`, with the exported `TagTone` type replacing
+`TagColor`. It supports `neutral`, `primary`, `secondary`, `error`, `warning`,
+`success`, and `info`; existing feedback palettes remain available. The default is
+`primary`. Use `<Tag label="Active" tone="success" />`.
+
+`Avatar` accepts `tone="neutral" | "primary" | "secondary"`, defaulting to
+`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]`.

package/dist/components/atoms/avatar.d.mts

@@ -4,6 +4,6 @@ import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../types/view.types.mjs';
 
-declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, ...props }: AvatarProps) => react.JSX.Element>;
+declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, tone, ...props }: AvatarProps) => react.JSX.Element>;
 
 export { Avatar };

package/dist/components/atoms/avatar.js

@@ -13,13 +13,14 @@ const Avatar = memo(function Avatar2({
   statusColor,
   style,
   variant = "filled",
+  tone = "primary",
   ...props
 }) {
   const extractedStyleProps = useStyleProps(props);
   const styles = useThemedStyles(
     themedStyles,
-    { size, status, statusColor, variant },
-    [size, status, statusColor, variant]
+    { size, status, statusColor, variant, tone },
+    [size, status, statusColor, variant, tone]
   );
   const sourceKey = useMemo(() => JSON.stringify(source), [source]);
   const containerStyle = useMemo(
@@ -74,10 +75,10 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
   );
 });
 function themedStyles(theme, props) {
-  const { size, status, statusColor, variant } = props;
+  const { size, status, statusColor, variant, tone } = props;
   const avatarTokens = theme.components.avatar;
   const sizeTokens = avatarTokens.sizes[size];
-  const variantTokens = avatarTokens.variants[variant];
+  const variantTokens = avatarTokens.colors[tone][variant];
   return StyleSheet.create({
     container: {
       flexShrink: 0,

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

@@ -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.variants[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"]}
+{"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"]}

package/dist/components/atoms/button.d.mts

@@ -4,6 +4,6 @@ import { ButtonProps } from '../../types/button.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Button: react.MemoExoticComponent<({ size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react.JSX.Element>;
+declare const Button: react.MemoExoticComponent<({ size, variant, tone, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react.JSX.Element>;
 
 export { Button };

package/dist/components/atoms/button.js

@@ -11,6 +11,7 @@ import { Typography } from "./typography";
 const Button = memo(function Button2({
   size = "medium",
   variant = "filled",
+  tone = "primary",
   disabled,
   loading = false,
   children,
@@ -19,8 +20,8 @@ const Button = memo(function Button2({
 }) {
   const styles = useThemedStyles(
     themedStyles,
-    { size, variant, disabled, loading },
-    [size, variant, disabled, loading]
+    { size, variant, tone, disabled, loading },
+    [size, variant, tone, disabled, loading]
   );
   const interactionDisabled = disabled === true || loading;
   const buttonStyles = useMemo(
@@ -36,11 +37,11 @@ const Button = memo(function Button2({
   return /* @__PURE__ */ jsx(Pressable, { ...props, disabled: interactionDisabled, style: buttonStyles, children: content });
 });
 function themedStyles(theme, props) {
-  const { size, variant, disabled, loading } = props;
+  const { size, variant, tone, disabled, loading } = props;
   const buttonTokens = theme.components.button;
   const sizeTokens = buttonTokens.sizes[size];
   const appearanceTokens = getActionStateTokens(
-    buttonTokens.variants[variant],
+    buttonTokens.colors[tone][variant],
     {
       disabled,
       loading

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

@@ -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.variants[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":"AAsCa;AAtCb,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;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,QAAQ;AAAA,IACnC,CAAC,MAAM,SAAS,UAAU,OAAO;AAAA,EACnC;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,UAAU,QAAQ,IAAI;AAE7C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,SAAS,OAAO;AAAA,IAC7B;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"]}
+{"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"]}

package/dist/components/atoms/icon-button.d.mts

@@ -6,6 +6,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import 'react-native';
 
-declare const IconButton: react.MemoExoticComponent<({ size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react.JSX.Element>;
+declare const IconButton: react.MemoExoticComponent<({ size, variant, tone, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react.JSX.Element>;
 
 export { IconButton };

package/dist/components/atoms/icon-button.js

@@ -11,6 +11,7 @@ import { Spinner } from "./spinner";
 const IconButton = memo(function IconButton2({
   size = "medium",
   variant = "filled",
+  tone = "primary",
   disabled,
   loading = false,
   style,
@@ -19,8 +20,8 @@ const IconButton = memo(function IconButton2({
 }) {
   const styles = useThemedStyles(
     themedStyles,
-    { size, variant, disabled, loading },
-    [size, variant, disabled, loading]
+    { size, variant, tone, disabled, loading },
+    [size, variant, tone, disabled, loading]
   );
   const interactionDisabled = disabled === true || loading;
   const iconButtonStyles = useMemo(
@@ -38,11 +39,11 @@ const IconButton = memo(function IconButton2({
   );
 });
 function themedStyles(theme, props) {
-  const { size, variant, disabled, loading } = props;
+  const { size, variant, tone, disabled, loading } = props;
   const iconButtonTokens = theme.components.iconButton;
   const sizeTokens = iconButtonTokens.sizes[size];
   const appearanceTokens = getActionStateTokens(
-    iconButtonTokens.variants[variant],
+    iconButtonTokens.colors[tone][variant],
     { disabled, loading }
   );
   return StyleSheet.create({

package/dist/components/atoms/icon-button.js.map

@@ -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.variants[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":"AA2CQ;AA3CR,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;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,QAAQ;AAAA,IACnC,CAAC,MAAM,SAAS,UAAU,OAAO;AAAA,EACnC;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,UAAU,QAAQ,IAAI;AAE7C,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,mBAAmB;AAAA,IACvB,iBAAiB,SAAS,OAAO;AAAA,IACjC,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"]}
+{"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"]}

package/dist/components/atoms/tag.d.mts

@@ -3,6 +3,6 @@ import { TagProps } from '../../types/tag.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Tag: react.MemoExoticComponent<({ label, size, variant, color, closable, disabled, onClose, onPress, }: TagProps) => react.JSX.Element>;
+declare const Tag: react.MemoExoticComponent<({ label, size, variant, tone, closable, disabled, onClose, onPress, }: TagProps) => react.JSX.Element>;
 
 export { Tag };

package/dist/components/atoms/tag.js

@@ -14,7 +14,7 @@ const Tag = memo(function Tag2({
   label,
   size = "medium",
   variant = "filled",
-  color = "primary",
+  tone = "primary",
   closable,
   disabled,
   onClose,
@@ -28,9 +28,9 @@ const Tag = memo(function Tag2({
       size,
       variant,
       disabled,
-      color
+      tone
     },
-    [size, variant, disabled, color]
+    [size, variant, disabled, tone]
   );
   const Container = onPress ? Pressable : View;
   const showClose = closable && !disabled && onClose;
@@ -48,11 +48,11 @@ const Tag = memo(function Tag2({
   ] });
 });
 function themedStyles(theme, props) {
-  const { size, variant, color, disabled } = props;
+  const { size, variant, tone, disabled } = props;
   const tagTokens = theme.components.tag;
   const sizeTokens = tagTokens.sizes[size];
   const appearanceTokens = getAvailabilityStateTokens(
-    tagTokens.colors[color][variant],
+    tagTokens.colors[tone][variant],
     { disabled }
   );
   return StyleSheet.create({

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

@@ -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  color = \"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      color,\n    },\n    [size, variant, disabled, color],\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, color, disabled } = props;\n\n  const tagTokens = theme.components.tag;\n  const sizeTokens = tagTokens.sizes[size];\n  const appearanceTokens = getAvailabilityStateTokens(\n    tagTokens.colors[color][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,QAAQ;AAAA,EACR;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,KAAK;AAAA,EACjC;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,OAAO,SAAS,IAAI;AAE3C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,KAAK,EAAE,OAAO;AAAA,IAC/B,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"]}
+{"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"]}

package/dist/components/controls/container.js

@@ -8,11 +8,17 @@ const ControlContainer = memo(function ControlContainer2({
   style,
   ...props
 }) {
-  const { size, variant, disabled, error } = useControlContext();
+  const {
+    size,
+    variant,
+    tone = "neutral",
+    disabled,
+    error
+  } = useControlContext();
   const styles = useThemedStyles(
     controlContainerStyles,
-    { size, variant, disabled, error },
-    [size, variant, disabled, error]
+    { size, variant, tone, disabled, error },
+    [size, variant, tone, disabled, error]
   );
   const containerStyle = useMemo(
     () => [styles.inputContainer, style],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlContainerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { View } from \"../atoms/view\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlContainer = memo(function ControlContainer({\n  style,\n  ...props\n}: ControlContainerProps) {\n  const { size, variant, disabled, error } = useControlContext();\n  const styles = useThemedStyles(\n    controlContainerStyles,\n    { size, variant, disabled, error },\n    [size, variant, disabled, error],\n  );\n  const containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View {...props} style={containerStyle} />;\n});\n"],"mappings":"AAwBS;AAxBT,SAAS,MAAM,eAAe;AAE9B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAC7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,MAAM;AAAA,IACjC,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AACA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,gBAAgB;AACjD,CAAC;","names":["ControlContainer"]}
+{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlContainerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { View } from \"../atoms/view\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlContainer = memo(function ControlContainer({\n  style,\n  ...props\n}: ControlContainerProps) {\n  const {\n    size,\n    variant,\n    tone = \"neutral\",\n    disabled,\n    error,\n  } = useControlContext();\n  const styles = useThemedStyles(\n    controlContainerStyles,\n    { size, variant, tone, disabled, error },\n    [size, variant, tone, disabled, error],\n  );\n  const containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View {...props} style={containerStyle} />;\n});\n"],"mappings":"AA8BS;AA9BT,SAAS,MAAM,eAAe;AAE9B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AACtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM;AAAA,IACvC,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AACA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,gBAAgB;AACjD,CAAC;","names":["ControlContainer"]}

package/dist/components/controls/container.styles.d.mts

@@ -1,7 +1,7 @@
 import { AppTheme } from '@impulse-ui-native/theme';
 import { ControlFieldThemeProps } from '../../types/control-theme.types.mjs';
 
-declare function controlContainerStyles(theme: AppTheme, { size, variant, disabled, error }: ControlFieldThemeProps): Readonly<{
+declare function controlContainerStyles(theme: AppTheme, { size, variant, tone, disabled, error }: ControlFieldThemeProps): Readonly<{
     inputContainer: {
         flexDirection: "row";
         alignItems: "center";

package/dist/components/controls/container.styles.js

@@ -1,9 +1,9 @@
 import { StyleSheet } from "react-native";
 import { getFieldStateTokens } from "@impulse-ui-native/theme";
-function controlContainerStyles(theme, { size, variant, disabled, error }) {
+function controlContainerStyles(theme, { size, variant, tone, disabled, error }) {
   const tokens = theme.components.controlContainer;
   const sizeTokens = tokens.sizes[size];
-  const appearance = getFieldStateTokens(tokens.variants[variant], {
+  const appearance = getFieldStateTokens(tokens.colors[tone][variant], {
     disabled,
     error: Boolean(error)
   });

package/dist/components/controls/container.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/container.styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\n\nexport function controlContainerStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const tokens = theme.components.controlContainer;\n  const sizeTokens = tokens.sizes[size];\n  const appearance = getFieldStateTokens(tokens.variants[variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n      borderRadius: tokens.borderRadius,\n      borderWidth: tokens.borderWidth,\n      opacity: appearance.opacity,\n      backgroundColor: appearance.backgroundColor,\n      borderColor: appearance.borderColor,\n    },\n  });\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,2BAA2B;AAI7B,SAAS,uBACd,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,aAAa,oBAAoB,OAAO,SAAS,OAAO,GAAG;AAAA,IAC/D;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,SAAS,WAAW;AAAA,MACpB,iBAAiB,WAAW;AAAA,MAC5B,aAAa,WAAW;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../src/components/controls/container.styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\n\nexport function controlContainerStyles(\n  theme: AppTheme,\n  { size, variant, tone, disabled, error }: ControlFieldThemeProps,\n) {\n  const tokens = theme.components.controlContainer;\n  const sizeTokens = tokens.sizes[size];\n  const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n      borderRadius: tokens.borderRadius,\n      borderWidth: tokens.borderWidth,\n      opacity: appearance.opacity,\n      backgroundColor: appearance.backgroundColor,\n      borderColor: appearance.borderColor,\n    },\n  });\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,2BAA2B;AAI7B,SAAS,uBACd,OACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM,GACvC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,SAAS,WAAW;AAAA,MACpB,iBAAiB,WAAW;AAAA,MAC5B,aAAa,WAAW;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/components/controls/control.d.mts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ViewProps } from '../../types/view.types.mjs';
-import { ControlFieldProps, ControlTriggerProps, ControlIconProps, ControlContainerProps, ControlContextData, ControlLabelProps, ControlErrorLabelProps, ControlAddonProps, ControlInputProps, ControlPlaceholderProps, ControlValueProps, ControlLoaderProps } from '../../types/control-components.types.mjs';
+import { ControlFieldProps, ControlTriggerProps, ControlIconProps, ControlContainerProps, ControlComponentProps, ControlLabelProps, ControlErrorLabelProps, ControlAddonProps, ControlInputProps, ControlPlaceholderProps, ControlValueProps, ControlLoaderProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '@impulse-ui-native/icon/types';
@@ -8,11 +8,11 @@ import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
 declare const Control: {
-    Field: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, ...props }: ControlFieldProps) => react.JSX.Element>;
+    Field: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, tone, ...props }: ControlFieldProps) => react.JSX.Element>;
     Trigger: react.MemoExoticComponent<({ disabled: disabledProp, style, ...props }: ControlTriggerProps) => react.JSX.Element>;
     Icon: react.MemoExoticComponent<({ color, ...props }: ControlIconProps) => react.JSX.Element>;
     Container: react.MemoExoticComponent<({ style, ...props }: ControlContainerProps) => react.JSX.Element>;
-    Provider: react.MemoExoticComponent<(props: react.PropsWithChildren<ControlContextData>) => react.JSX.Element>;
+    Provider: react.MemoExoticComponent<(props: react.PropsWithChildren<ControlComponentProps>) => react.JSX.Element>;
     Root: react.MemoExoticComponent<(props: ViewProps) => react.JSX.Element>;
     Label: react.MemoExoticComponent<(props: ControlLabelProps) => react.JSX.Element | null>;
     Error: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react.JSX.Element>;

package/dist/components/controls/field.d.mts

@@ -6,6 +6,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
-declare const ControlField: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, ...props }: ControlFieldProps) => react.JSX.Element>;
+declare const ControlField: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, tone, ...props }: ControlFieldProps) => react.JSX.Element>;
 
 export { ControlField };

package/dist/components/controls/field.js

@@ -19,6 +19,7 @@ const ControlField = memo(function ControlField2({
   size = "medium",
   suffix,
   variant = "outlined",
+  tone = "neutral",
   ...props
 }) {
   const layoutStyle = useStyleProps(props);
@@ -29,6 +30,7 @@ const ControlField = memo(function ControlField2({
     {
       size,
       variant,
+      tone,
       error,
       disabled,
       children: /* @__PURE__ */ jsxs(ControlRoot, { style: layoutStyle, children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/field.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldProps } from \"../../types\";\nimport { ControlAddon } from \"./addon\";\nimport { ControlError } from \"./error\";\nimport { ControlLabel } from \"./label\";\nimport { ControlProvider } from \"./provider\";\nimport { ControlRoot } from \"./root\";\nimport { ControlTrigger } from \"./trigger\";\n\nexport const ControlField = memo(function ControlField({\n  children,\n  disabled,\n  error,\n  label,\n  onPress,\n  onPressPrefix,\n  onPressSuffix,\n  prefix,\n  size = \"medium\",\n  suffix,\n  variant = \"outlined\",\n  ...props\n}: ControlFieldProps) {\n  const layoutStyle = useStyleProps(props);\n\n  const hasPrefix = prefix !== null && prefix !== undefined;\n  const hasSuffix = suffix !== null && suffix !== undefined;\n\n  return (\n    <ControlProvider\n      size={size}\n      variant={variant}\n      error={error}\n      disabled={disabled}\n    >\n      <ControlRoot style={layoutStyle}>\n        <ControlLabel>{label}</ControlLabel>\n        <ControlTrigger onPress={onPress}>\n          {hasPrefix ? (\n            <ControlAddon onPress={onPressPrefix}>{prefix}</ControlAddon>\n          ) : null}\n          {children}\n          {hasSuffix ? (\n            <ControlAddon onPress={onPressSuffix}>{suffix}</ControlAddon>\n          ) : null}\n        </ControlTrigger>\n        {error ? <ControlError>{error}</ControlError> : null}\n      </ControlRoot>\n    </ControlProvider>\n  );\n});\n"],"mappings":"AAuCQ,cACA,YADA;AAvCR,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAG9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAsB;AACpB,QAAM,cAAc,cAAc,KAAK;AAEvC,QAAM,YAAY,WAAW,QAAQ,WAAW;AAChD,QAAM,YAAY,WAAW,QAAQ,WAAW;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,eAAY,OAAO,aAClB;AAAA,4BAAC,gBAAc,iBAAM;AAAA,QACrB,qBAAC,kBAAe,SACb;AAAA,sBACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,UACH;AAAA,UACA,YACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,WACN;AAAA,QACC,QAAQ,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,SAClD;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ControlField"]}
+{"version":3,"sources":["../../../src/components/controls/field.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldProps } from \"../../types\";\nimport { ControlAddon } from \"./addon\";\nimport { ControlError } from \"./error\";\nimport { ControlLabel } from \"./label\";\nimport { ControlProvider } from \"./provider\";\nimport { ControlRoot } from \"./root\";\nimport { ControlTrigger } from \"./trigger\";\n\nexport const ControlField = memo(function ControlField({\n  children,\n  disabled,\n  error,\n  label,\n  onPress,\n  onPressPrefix,\n  onPressSuffix,\n  prefix,\n  size = \"medium\",\n  suffix,\n  variant = \"outlined\",\n  tone = \"neutral\",\n  ...props\n}: ControlFieldProps) {\n  const layoutStyle = useStyleProps(props);\n\n  const hasPrefix = prefix !== null && prefix !== undefined;\n  const hasSuffix = suffix !== null && suffix !== undefined;\n\n  return (\n    <ControlProvider\n      size={size}\n      variant={variant}\n      tone={tone}\n      error={error}\n      disabled={disabled}\n    >\n      <ControlRoot style={layoutStyle}>\n        <ControlLabel>{label}</ControlLabel>\n        <ControlTrigger onPress={onPress}>\n          {hasPrefix ? (\n            <ControlAddon onPress={onPressPrefix}>{prefix}</ControlAddon>\n          ) : null}\n          {children}\n          {hasSuffix ? (\n            <ControlAddon onPress={onPressSuffix}>{suffix}</ControlAddon>\n          ) : null}\n        </ControlTrigger>\n        {error ? <ControlError>{error}</ControlError> : null}\n      </ControlRoot>\n    </ControlProvider>\n  );\n});\n"],"mappings":"AAyCQ,cACA,YADA;AAzCR,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAG9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,QAAM,cAAc,cAAc,KAAK;AAEvC,QAAM,YAAY,WAAW,QAAQ,WAAW;AAChD,QAAM,YAAY,WAAW,QAAQ,WAAW;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,eAAY,OAAO,aAClB;AAAA,4BAAC,gBAAc,iBAAM;AAAA,QACrB,qBAAC,kBAAe,SACb;AAAA,sBACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,UACH;AAAA,UACA,YACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,WACN;AAAA,QACC,QAAQ,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,SAClD;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ControlField"]}

package/dist/components/controls/icon.js

@@ -10,9 +10,9 @@ const ControlIcon = memo(function ControlIcon2({
   color,
   ...props
 }) {
-  const { variant, disabled, error } = useControlContext();
+  const { variant, tone = "neutral", disabled, error } = useControlContext();
   const tokens = useComponentsTokens().controlAddon;
-  const appearance = getFieldStateTokens(tokens.variants[variant], {
+  const appearance = getFieldStateTokens(tokens.colors[tone][variant], {
     disabled,
     error: Boolean(error)
   });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/icon.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n  getFieldStateTokens,\n  useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlIconProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlIcon = memo(function ControlIcon({\n  color,\n  ...props\n}: ControlIconProps) {\n  const { variant, disabled, error } = useControlContext();\n  const tokens = useComponentsTokens().controlAddon;\n  const appearance = getFieldStateTokens(tokens.variants[variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return <Icon {...props} color={color ?? appearance.iconColor} />;\n});\n"],"mappings":"AAsBS;AAtBT,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI,kBAAkB;AACvD,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,SAAS,OAAO,GAAG;AAAA,IAC/D;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,SAAS,WAAW,WAAW;AAChE,CAAC;","names":["ControlIcon"]}
+{"version":3,"sources":["../../../src/components/controls/icon.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n  getFieldStateTokens,\n  useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlIconProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlIcon = memo(function ControlIcon({\n  color,\n  ...props\n}: ControlIconProps) {\n  const { variant, tone = \"neutral\", disabled, error } = useControlContext();\n  const tokens = useComponentsTokens().controlAddon;\n  const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return <Icon {...props} color={color ?? appearance.iconColor} />;\n});\n"],"mappings":"AAsBS;AAtBT,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,SAAS,OAAO,WAAW,UAAU,MAAM,IAAI,kBAAkB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,SAAS,WAAW,WAAW;AAChE,CAAC;","names":["ControlIcon"]}

package/dist/components/controls/input.js

@@ -4,17 +4,24 @@ import { StyleSheet, TextInput } from "react-native";
 import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
 import { useControlContext } from "../../hooks/use-control-context.hook";
 const ControlInput = memo(function ControlInput2(props) {
-  const { onPress: _onPress, style, ...rest } = props;
-  const { size, variant, disabled, error } = useControlContext();
+  const { onPress: _onPress, editable, style, ...rest } = props;
+  const {
+    size,
+    variant,
+    tone = "neutral",
+    disabled,
+    error
+  } = useControlContext();
   const styles = useThemedStyles(
     themedStyles,
     {
       size,
       variant,
+      tone,
       disabled,
       error
     },
-    [size, variant, disabled, error]
+    [size, variant, tone, disabled, error]
   );
   const inputStyles = useMemo(
     () => [styles.input, style],
@@ -26,15 +33,15 @@ const ControlInput = memo(function ControlInput2(props) {
       ...rest,
       style: inputStyles,
       placeholderTextColor: styles.placeholder.color,
-      editable: !disabled
+      editable: !disabled && editable !== false
     }
   );
 });
-function themedStyles(theme, { size, variant, disabled, error }) {
+function themedStyles(theme, { size, variant, tone = "neutral", disabled, error }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(
-    controlInputTokens.variants[variant],
+    controlInputTokens.colors[tone][variant],
     { disabled, error: Boolean(error) }
   );
   return StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlInputProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlInput = memo(function ControlInput(\n  props: ControlInputProps,\n) {\n  const { onPress: _onPress, style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const inputStyles = useMemo(\n    () => [styles.input, style],\n    [styles.input, style],\n  );\n\n  return (\n    <TextInput\n      {...rest}\n      style={inputStyles}\n      placeholderTextColor={styles.placeholder.color}\n      editable={!disabled}\n    />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    input: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontSize: sizeTokens.fontSize,\n      fontFamily: controlInputTokens.fontFamily,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n      height: \"100%\",\n    },\n\n    placeholder: {\n      color: appearanceTokens.placeholderColor,\n    },\n  });\n}\n"],"mappings":"AAkCI;AAlCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAGtC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,GAAG,KAAK,IAAI;AAE9C,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}
+{"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlInputProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlInput = memo(function ControlInput(\n  props: ControlInputProps,\n) {\n  const { onPress: _onPress, editable, style, ...rest } = props;\n\n  const {\n    size,\n    variant,\n    tone = \"neutral\",\n    disabled,\n    error,\n  } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      tone,\n      disabled,\n      error,\n    },\n    [size, variant, tone, disabled, error],\n  );\n\n  const inputStyles = useMemo(\n    () => [styles.input, style],\n    [styles.input, style],\n  );\n\n  return (\n    <TextInput\n      {...rest}\n      style={inputStyles}\n      placeholderTextColor={styles.placeholder.color}\n      editable={!disabled && editable !== false}\n    />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.colors[tone][variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    input: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontSize: sizeTokens.fontSize,\n      fontFamily: controlInputTokens.fontFamily,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n      height: \"100%\",\n    },\n\n    placeholder: {\n      color: appearanceTokens.placeholderColor,\n    },\n  });\n}\n"],"mappings":"AAyCI;AAzCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAGtC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAExD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC,YAAY,aAAa;AAAA;AAAA,EACtC;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}

package/dist/components/controls/label.js

@@ -5,8 +5,9 @@ import { getFieldStateTokens, useThemedStyles } from "@impulse-ui-native/theme";
 import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Typography } from "../atoms";
 const ControlLabel = memo(function ControlLabel2(props) {
-  const { children, disabled, style, ...rest } = props;
-  const { error } = useControlContext();
+  const { children, disabled: disabledProp, style, ...rest } = props;
+  const { error, disabled: groupDisabled } = useControlContext();
+  const disabled = Boolean(groupDisabled) || disabledProp === true;
   const styles = useThemedStyles(
     themedStyles,
     {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlLabelProps } from \"../../types\";\nimport type { ControlStateThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlLabel = memo(function ControlLabel(\n  props: ControlLabelProps,\n) {\n  const { children, disabled, style, ...rest } = props;\n\n  const { error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      disabled,\n      error,\n    },\n    [disabled, error],\n  );\n\n  const labelStyle = useMemo(\n    () => [styles.label, style],\n    [styles.label, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Typography.Label {...rest} style={labelStyle}>\n      {children}\n    </Typography.Label>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ControlStateThemeProps) {\n  const { disabled, error } = props;\n\n  const controlLabelTokens = theme.components.controlLabel;\n  const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    label: {\n      marginBottom: controlLabelTokens.marginBottom,\n      fontSize: controlLabelTokens.fontSize,\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAqCI;AArCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAE/C,QAAM,EAAE,MAAM,IAAI,kBAAkB;AAEpC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA+B;AACpE,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}
+{"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlLabelProps } from \"../../types\";\nimport type { ControlStateThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlLabel = memo(function ControlLabel(\n  props: ControlLabelProps,\n) {\n  const { children, disabled: disabledProp, style, ...rest } = props;\n\n  const { error, disabled: groupDisabled } = useControlContext();\n  const disabled = Boolean(groupDisabled) || disabledProp === true;\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      disabled,\n      error,\n    },\n    [disabled, error],\n  );\n\n  const labelStyle = useMemo(\n    () => [styles.label, style],\n    [styles.label, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Typography.Label {...rest} style={labelStyle}>\n      {children}\n    </Typography.Label>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ControlStateThemeProps) {\n  const { disabled, error } = props;\n\n  const controlLabelTokens = theme.components.controlLabel;\n  const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return StyleSheet.create({\n    label: {\n      marginBottom: controlLabelTokens.marginBottom,\n      fontSize: controlLabelTokens.fontSize,\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,KAAK,IAAI;AAE7D,QAAM,EAAE,OAAO,UAAU,cAAc,IAAI,kBAAkB;AAC7D,QAAM,WAAW,QAAQ,aAAa,KAAK,iBAAiB;AAE5D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA+B;AACpE,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}

package/dist/components/controls/loader.js

@@ -1,8 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
+import {
+  getFieldStateTokens,
+  useComponentsTokens
+} from "@impulse-ui-native/theme";
+import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Spinner } from "../atoms/spinner";
 const ControlLoader = memo(function ControlLoader2(props) {
-  return /* @__PURE__ */ jsx(Spinner, { ...props });
+  const { variant, tone = "neutral", disabled, error } = useControlContext();
+  const tokens = useComponentsTokens().controlAddon;
+  const appearance = getFieldStateTokens(tokens.colors[tone][variant], {
+    disabled,
+    error: Boolean(error)
+  });
+  return /* @__PURE__ */ jsx(Spinner, { color: appearance.iconColor, ...props });
 });
 export {
   ControlLoader

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/loader.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport type { ControlLoaderProps } from \"../../types\";\nimport { Spinner } from \"../atoms/spinner\";\n\nexport const ControlLoader = memo(function ControlLoader(\n  props: ControlLoaderProps,\n) {\n  return <Spinner {...props} />;\n});\n"],"mappings":"AAQS;AART,SAAS,YAAY;AAGrB,SAAS,eAAe;AAEjB,MAAM,gBAAgB,KAAK,SAASA,eACzC,OACA;AACA,SAAO,oBAAC,WAAS,GAAG,OAAO;AAC7B,CAAC;","names":["ControlLoader"]}
+{"version":3,"sources":["../../../src/components/controls/loader.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport {\n  getFieldStateTokens,\n  useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlLoaderProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Spinner } from \"../atoms/spinner\";\n\nexport const ControlLoader = memo(function ControlLoader(\n  props: ControlLoaderProps,\n) {\n  const { variant, tone = \"neutral\", disabled, error } = useControlContext();\n  const tokens = useComponentsTokens().controlAddon;\n  const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\n    disabled,\n    error: Boolean(error),\n  });\n\n  return <Spinner color={appearance.iconColor} {...props} />;\n});\n"],"mappings":"AAqBS;AArBT,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,eAAe;AAEjB,MAAM,gBAAgB,KAAK,SAASA,eACzC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,WAAW,UAAU,MAAM,IAAI,kBAAkB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,WAAQ,OAAO,WAAW,WAAY,GAAG,OAAO;AAC1D,CAAC;","names":["ControlLoader"]}

package/dist/components/controls/placeholder.js

@@ -6,16 +6,23 @@ import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Typography } from "../atoms";
 const ControlPlaceholder = memo(function ControlPlaceholder2(props) {
   const { style, ...rest } = props;
-  const { size, variant, disabled, error } = useControlContext();
+  const {
+    size,
+    variant,
+    tone = "neutral",
+    disabled,
+    error
+  } = useControlContext();
   const styles = useThemedStyles(
     themedStyles,
     {
       size,
       variant,
+      tone,
       disabled,
       error
     },
-    [size, variant, disabled, error]
+    [size, variant, tone, disabled, error]
   );
   const placeholderStyle = useMemo(
     () => [styles.placeholder, style],
@@ -23,11 +30,11 @@ const ControlPlaceholder = memo(function ControlPlaceholder2(props) {
   );
   return /* @__PURE__ */ jsx(Typography.Master, { numberOfLines: 1, ...rest, style: placeholderStyle });
 });
-function themedStyles(theme, { size, variant, disabled, error }) {
+function themedStyles(theme, { size, variant, tone = "neutral", disabled, error }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(
-    controlInputTokens.variants[variant],
+    controlInputTokens.colors[tone][variant],
     { disabled, error: Boolean(error) }
   );
   return StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlPlaceholderProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\n  props: ControlPlaceholderProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      disabled,\n      error,\n    },\n    [size, variant, disabled, error],\n  );\n\n  const placeholderStyle = useMemo(\n    () => [styles.placeholder, style],\n    [styles.placeholder, style],\n  );\n\n  return (\n    <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    placeholder: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.placeholderColor,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAmCI;AAnCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}
+{"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlPlaceholderProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\n  props: ControlPlaceholderProps,\n) {\n  const { style, ...rest } = props;\n\n  const {\n    size,\n    variant,\n    tone = \"neutral\",\n    disabled,\n    error,\n  } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      size,\n      variant,\n      tone,\n      disabled,\n      error,\n    },\n    [size, variant, tone, disabled, error],\n  );\n\n  const placeholderStyle = useMemo(\n    () => [styles.placeholder, style],\n    [styles.placeholder, style],\n  );\n\n  return (\n    <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.colors[tone][variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    placeholder: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.placeholderColor,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AA0CI;AA1CJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}

package/dist/components/controls/provider.d.mts

@@ -1,12 +1,12 @@
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
-import { ControlContextData } from '../../types/control-components.types.mjs';
+import { ControlComponentProps } from '../../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import '../../types/spinner.types.mjs';
 
-declare const ControlProvider: react.MemoExoticComponent<(props: PropsWithChildren<ControlContextData>) => react.JSX.Element>;
+declare const ControlProvider: react.MemoExoticComponent<(props: PropsWithChildren<ControlComponentProps>) => react.JSX.Element>;
 
 export { ControlProvider };

package/dist/components/controls/provider.js

@@ -2,10 +2,16 @@ 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 } = props;
+  const { children, disabled, error, size, variant, tone = "neutral" } = props;
   const context = useMemo(
-    () => ({ disabled, error, size, variant }),
-    [disabled, error, size, variant]
+    () => ({
+      disabled,
+      error,
+      size,
+      variant,
+      tone
+    }),
+    [disabled, error, size, variant, tone]
   );
   return /* @__PURE__ */ jsx(ControlContext.Provider, { value: context, children });
 });

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 { ControlContextData } from \"../../types\";\nimport { ControlContext } from \"../../contexts/control.context\";\n\nexport const ControlProvider = memo(function ControlProvider(\n  props: PropsWithChildren<ControlContextData>,\n) {\n  const { children, disabled, error, size, variant } = props;\n\n  const context = useMemo<ControlContextData>(\n    () => ({ disabled, error, size, variant }),\n    [disabled, error, size, variant],\n  );\n\n  return (\n    <ControlContext.Provider value={context}>\n      {children}\n    </ControlContext.Provider>\n  );\n});\n"],"mappings":"AAiBI;AAhBJ,SAAS,MAAM,eAAe;AAG9B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM,EAAE,UAAU,UAAU,OAAO,MAAM,QAAQ,IAAI;AAErD,QAAM,UAAU;AAAA,IACd,OAAO,EAAE,UAAU,OAAO,MAAM,QAAQ;AAAA,IACxC,CAAC,UAAU,OAAO,MAAM,OAAO;AAAA,EACjC;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 { 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"]}

package/dist/components/controls/trigger.js

@@ -13,13 +13,19 @@ const ControlTrigger = memo(function ControlTrigger2({
   style,
   ...props
 }) {
-  const { size, variant, disabled, error } = useControlContext();
+  const {
+    size,
+    variant,
+    tone = "neutral",
+    disabled,
+    error
+  } = useControlContext();
   const tokens = useComponentsTokens().pressable;
   const resolvedDisabled = Boolean(disabled) || disabledProp === true;
   const styles = useThemedStyles(
     controlContainerStyles,
-    { size, variant, disabled: resolvedDisabled, error },
-    [size, variant, resolvedDisabled, error]
+    { size, variant, tone, disabled: resolvedDisabled, error },
+    [size, variant, tone, resolvedDisabled, error]
   );
   const extractedStyleProps = useStyleProps(props);
   const triggerStyle = useCallback(

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/trigger.tsx"],"sourcesContent":["import type { PressableStateCallbackType } from \"react-native\";\nimport { memo, useCallback } from \"react\";\n\nimport {\n  useComponentsTokens,\n  useStyleProps,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlTriggerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Pressable } from \"../atoms/pressable\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlTrigger = memo(function ControlTrigger({\n  disabled: disabledProp,\n  style,\n  ...props\n}: ControlTriggerProps) {\n  const { size, variant, disabled, error } = useControlContext();\n  const tokens = useComponentsTokens().pressable;\n  const resolvedDisabled = Boolean(disabled) || disabledProp === true;\n  const styles = useThemedStyles(\n    controlContainerStyles,\n    { size, variant, disabled: resolvedDisabled, error },\n    [size, variant, resolvedDisabled, error],\n  );\n  const extractedStyleProps = useStyleProps(props);\n\n  const triggerStyle = useCallback(\n    (state: PressableStateCallbackType) => [\n      styles.inputContainer,\n      {\n        opacity:\n          styles.inputContainer.opacity *\n          (state.pressed ? tokens.pressedOpacity : 1),\n      },\n      extractedStyleProps,\n      typeof style === \"function\" ? style(state) : style,\n    ],\n    [extractedStyleProps, style, styles.inputContainer, tokens.pressedOpacity],\n  );\n\n  return (\n    <Pressable {...props} disabled={resolvedDisabled} style={triggerStyle} />\n  );\n});\n"],"mappings":"AA4CI;AA3CJ,SAAS,MAAM,mBAAmB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAC7D,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,mBAAmB,QAAQ,QAAQ,KAAK,iBAAiB;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,kBAAkB,MAAM;AAAA,IACnD,CAAC,MAAM,SAAS,kBAAkB,KAAK;AAAA,EACzC;AACA,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,QACE,SACE,OAAO,eAAe,WACrB,MAAM,UAAU,OAAO,iBAAiB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,qBAAqB,OAAO,OAAO,gBAAgB,OAAO,cAAc;AAAA,EAC3E;AAEA,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,kBAAkB,OAAO,cAAc;AAE3E,CAAC;","names":["ControlTrigger"]}
+{"version":3,"sources":["../../../src/components/controls/trigger.tsx"],"sourcesContent":["import type { PressableStateCallbackType } from \"react-native\";\nimport { memo, useCallback } from \"react\";\n\nimport {\n  useComponentsTokens,\n  useStyleProps,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlTriggerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Pressable } from \"../atoms/pressable\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlTrigger = memo(function ControlTrigger({\n  disabled: disabledProp,\n  style,\n  ...props\n}: ControlTriggerProps) {\n  const {\n    size,\n    variant,\n    tone = \"neutral\",\n    disabled,\n    error,\n  } = useControlContext();\n  const tokens = useComponentsTokens().pressable;\n  const resolvedDisabled = Boolean(disabled) || disabledProp === true;\n  const styles = useThemedStyles(\n    controlContainerStyles,\n    { size, variant, tone, disabled: resolvedDisabled, error },\n    [size, variant, tone, resolvedDisabled, error],\n  );\n  const extractedStyleProps = useStyleProps(props);\n\n  const triggerStyle = useCallback(\n    (state: PressableStateCallbackType) => [\n      styles.inputContainer,\n      {\n        opacity:\n          styles.inputContainer.opacity *\n          (state.pressed ? tokens.pressedOpacity : 1),\n      },\n      extractedStyleProps,\n      typeof style === \"function\" ? style(state) : style,\n    ],\n    [extractedStyleProps, style, styles.inputContainer, tokens.pressedOpacity],\n  );\n\n  return (\n    <Pressable {...props} disabled={resolvedDisabled} style={triggerStyle} />\n  );\n});\n"],"mappings":"AAkDI;AAjDJ,SAAS,MAAM,mBAAmB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AACtB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,mBAAmB,QAAQ,QAAQ,KAAK,iBAAiB;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,kBAAkB,MAAM;AAAA,IACzD,CAAC,MAAM,SAAS,MAAM,kBAAkB,KAAK;AAAA,EAC/C;AACA,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,QACE,SACE,OAAO,eAAe,WACrB,MAAM,UAAU,OAAO,iBAAiB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,qBAAqB,OAAO,OAAO,gBAAgB,OAAO,cAAc;AAAA,EAC3E;AAEA,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,kBAAkB,OAAO,cAAc;AAE3E,CAAC;","names":["ControlTrigger"]}

package/dist/components/controls/value.js

@@ -6,11 +6,17 @@ import { useControlContext } from "../../hooks/use-control-context.hook";
 import { Typography } from "../atoms";
 const ControlValue = memo(function ControlValue2(props) {
   const { style, ...rest } = props;
-  const { size, variant, disabled, error } = useControlContext();
+  const {
+    size,
+    variant,
+    tone = "neutral",
+    disabled,
+    error
+  } = useControlContext();
   const styles = useThemedStyles(
     themedStyles,
-    { size, variant, disabled, error },
-    [size, variant, disabled, error]
+    { size, variant, tone, disabled, error },
+    [size, variant, tone, disabled, error]
   );
   const valueStyle = useMemo(
     () => [styles.value, style],
@@ -18,11 +24,11 @@ const ControlValue = memo(function ControlValue2(props) {
   );
   return /* @__PURE__ */ jsx(Typography.Master, { numberOfLines: 1, ...rest, style: valueStyle });
 });
-function themedStyles(theme, { size, variant, disabled, error }) {
+function themedStyles(theme, { size, variant, tone = "neutral", disabled, error }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
   const appearanceTokens = getFieldStateTokens(
-    controlInputTokens.variants[variant],
+    controlInputTokens.colors[tone][variant],
     { disabled, error: Boolean(error) }
   );
   return StyleSheet.create({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlValueProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlValue = memo(function ControlValue(\n  props: ControlValueProps,\n) {\n  const { style, ...rest } = props;\n\n  const { size, variant, disabled, error } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, variant, disabled, error },\n    [size, variant, disabled, error],\n  );\n\n  const valueStyle = useMemo(\n    () => [styles.value, style],\n    [styles.value, style],\n  );\n\n  return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    value: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AA6BS;AA7BT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM,EAAE,MAAM,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAE7D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,MAAM;AAAA,IACjC,CAAC,MAAM,SAAS,UAAU,KAAK;AAAA,EACjC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,UAAU,MAAM,GACjC;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}
+{"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlValueProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlValue = memo(function ControlValue(\n  props: ControlValueProps,\n) {\n  const { style, ...rest } = props;\n\n  const {\n    size,\n    variant,\n    tone = \"neutral\",\n    disabled,\n    error,\n  } = useControlContext();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, variant, tone, disabled, error },\n    [size, variant, tone, disabled, error],\n  );\n\n  const valueStyle = useMemo(\n    () => [styles.value, style],\n    [styles.value, style],\n  );\n\n  return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlInputTokens.colors[tone][variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    value: {\n      flex: controlInputTokens.flex,\n      color: appearanceTokens.color,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAmCS;AAnCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM;AAAA,IACvC,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}

package/dist/contexts/control.context.d.mts

@@ -1,11 +1,11 @@
 import * as react from 'react';
-import { ControlComponentProps } from '../types/control-components.types.mjs';
+import { ControlContextData } from '../types/control-components.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/icon/types';
 import '@impulse-ui-native/theme';
 import '../types/button.types.mjs';
 import '../types/spinner.types.mjs';
 
-declare const ControlContext: react.Context<ControlComponentProps | undefined>;
+declare const ControlContext: react.Context<ControlContextData | undefined>;
 
 export { ControlContext };

package/dist/types/avatar.types.d.mts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ImageProps, StyleProp, ImageStyle, ImageSourcePropType, ViewStyle } from 'react-native';
-import { ComponentSize, AvatarStatus, DisplayVariant } from '@impulse-ui-native/theme';
+import { ComponentSize, AvatarStatus, DisplayVariant, ComponentTone } from '@impulse-ui-native/theme';
 import { ViewProps } from './view.types.mjs';
 
 interface AvatarImageProps extends Omit<ImageProps, "source" | "style"> {
@@ -15,6 +15,7 @@ interface AvatarProps extends Omit<ViewProps, "children"> {
     status?: AvatarStatus;
     statusColor?: ViewStyle["backgroundColor"];
     variant?: DisplayVariant;
+    tone?: ComponentTone;
 }
 
 export type { AvatarImageProps, AvatarProps };

package/dist/types/button.types.d.mts

@@ -1,9 +1,10 @@
 import { PressableProps, ViewStyle, StyleProp } from 'react-native';
-import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant, FlexProps } from '@impulse-ui-native/theme';
+import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant, ButtonTone, FlexProps } from '@impulse-ui-native/theme';
 
 interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, ShadowProps {
     size?: ComponentSize;
     variant?: ActionVariant;
+    tone?: ButtonTone;
     disabled?: boolean;
     style?: ViewStyle;
     loading?: boolean;
@@ -11,10 +12,11 @@ interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, Shad
 interface ButtonThemeProps {
     size: ComponentSize;
     variant: ActionVariant;
+    tone: ButtonTone;
     disabled?: boolean;
     loading: boolean;
 }
-interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style">, FlexProps {
+interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style" | "tone">, FlexProps {
     disabled?: boolean;
     pressedStyle?: StyleProp<ViewStyle>;
 }

package/dist/types/control-components.types.d.mts

@@ -1,7 +1,7 @@
 import { ComponentType, ReactNode } from 'react';
 import { ViewProps, TextProps, TextInputProps } from 'react-native';
 import { IconProps } from '@impulse-ui-native/icon/types';
-import { FlexProps, DimensionProps, SpacingProps, ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
+import { FlexProps, DimensionProps, SpacingProps, ComponentSize, FieldVariant, FieldTone } from '@impulse-ui-native/theme';
 import { PressableCoreProps } from './button.types.mjs';
 import { SpinnerProps } from './spinner.types.mjs';
 
@@ -19,10 +19,13 @@ interface ControlComponentCommonProps extends ControlLayoutProps {
 interface ControlComponentProps {
     size: ComponentSize;
     variant: FieldVariant;
+    tone?: FieldTone;
     error: string | undefined;
     disabled: boolean | undefined;
 }
-type ControlContextData = ControlComponentProps;
+interface ControlContextData extends ControlComponentProps {
+    tone: FieldTone;
+}
 type ControlContainerProps = ViewProps;
 type ControlTriggerProps = PressableCoreProps;
 type ControlIconProps = IconProps;

package/dist/types/control-theme.types.d.mts

@@ -1,4 +1,4 @@
-import { ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
+import { ComponentSize, FieldVariant, FieldTone } from '@impulse-ui-native/theme';
 
 interface ControlStateThemeProps {
     disabled?: boolean;
@@ -7,6 +7,7 @@ interface ControlStateThemeProps {
 interface ControlFieldThemeProps extends ControlStateThemeProps {
     size: ComponentSize;
     variant: FieldVariant;
+    tone: FieldTone;
 }
 
 export type { ControlFieldThemeProps, ControlStateThemeProps };

package/dist/types/icon-button.types.d.mts

@@ -1,5 +1,5 @@
 import { IconProps } from '@impulse-ui-native/icon/types';
-import { ComponentSize, ActionVariant } from '@impulse-ui-native/theme';
+import { ComponentSize, ActionVariant, ButtonTone } from '@impulse-ui-native/theme';
 import { ButtonProps } from './button.types.mjs';
 import 'react-native';
 
@@ -9,6 +9,7 @@ interface IconButtonProps extends ButtonProps {
 interface IconButtonThemeProps {
     size: ComponentSize;
     variant: ActionVariant;
+    tone: ButtonTone;
     disabled?: boolean;
     loading: boolean;
 }

package/dist/types/tag.types.d.mts

@@ -1,11 +1,11 @@
 import { ViewStyle, PressableProps } from 'react-native';
-import { ComponentSize, DisplayVariant, TagColor } from '@impulse-ui-native/theme';
+import { ComponentSize, DisplayVariant, TagTone } from '@impulse-ui-native/theme';
 
 interface TagProps {
     label: string;
     size?: ComponentSize;
     variant?: DisplayVariant;
-    color?: TagColor;
+    tone?: TagTone;
     closable?: boolean;
     disabled?: boolean;
     onClose?: () => void;
@@ -15,7 +15,7 @@ interface TagProps {
 interface TagThemeProps {
     size: ComponentSize;
     variant: DisplayVariant;
-    color: TagColor;
+    tone: TagTone;
     disabled?: boolean;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "11.4.0",
+  "version": "14.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": "11.4.0",
-    "@impulse-ui-native/icon": "11.4.0",
-    "@impulse-ui-native/core": "11.4.0"
+    "@impulse-ui-native/theme": "14.0.0",
+    "@impulse-ui-native/icon": "14.0.0",
+    "@impulse-ui-native/core": "14.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",