@impulse-ui-native/primitives 3.0.0 → 5.0.0

package/dist/components/card/pressable.js

@@ -1,25 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback } from "react";
 import { StyleSheet } from "react-native";
 import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { Pressable } from "../atoms/pressable";
 import { cardRootStyles } from "./root.styles";
 const CardPressable = memo(function CardPressable2({
-  accessibilityRole = "button",
-  accessibilityState,
   disabled,
   style,
   ...props
 }) {
   const styles = useThemedStyles(cardRootStyles);
   const extractedStyleProps = useStyleProps(props);
-  const resolvedAccessibilityState = useMemo(
-    () => ({
-      ...accessibilityState,
-      disabled: disabled === true
-    }),
-    [accessibilityState, disabled]
-  );
   const rootStyle = useCallback(
     (state) => StyleSheet.flatten([
       styles.root,
@@ -28,16 +19,7 @@ const CardPressable = memo(function CardPressable2({
     ]),
     [extractedStyleProps, style, styles.root]
   );
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      ...props,
-      accessibilityRole,
-      accessibilityState: resolvedAccessibilityState,
-      disabled: disabled === true,
-      style: rootStyle
-    }
-  );
+  return /* @__PURE__ */ jsx(Pressable, { ...props, disabled: disabled === true, style: rootStyle });
 });
 export {
   CardPressable

package/dist/components/card/pressable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/pressable.tsx"],"sourcesContent":["import type {\n  AccessibilityState,\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\nimport { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { CardPressableProps } from \"../../types\";\nimport { Pressable } from \"../atoms/pressable\";\nimport { cardRootStyles } from \"./root.styles\";\n\nexport const CardPressable = memo(function CardPressable({\n  accessibilityRole = \"button\",\n  accessibilityState,\n  disabled,\n  style,\n  ...props\n}: CardPressableProps) {\n  const styles = useThemedStyles(cardRootStyles);\n  const extractedStyleProps = useStyleProps(props);\n\n  const resolvedAccessibilityState = useMemo<AccessibilityState>(\n    () => ({\n      ...accessibilityState,\n      disabled: disabled === true,\n    }),\n    [accessibilityState, disabled],\n  );\n\n  const rootStyle = useCallback(\n    (state: PressableStateCallbackType): StyleProp<ViewStyle> =>\n      StyleSheet.flatten([\n        styles.root,\n        extractedStyleProps,\n        typeof style === \"function\" ? style(state) : style,\n      ]),\n    [extractedStyleProps, style, styles.root],\n  );\n\n  return (\n    <Pressable\n      {...props}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={disabled === true}\n      style={rootStyle}\n    />\n  );\n});\n"],"mappings":"AA4CI;AAtCJ,SAAS,MAAM,aAAa,eAAe;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAExB,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,gBAAgB,cAAc;AAC7C,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,UAAU,aAAa;AAAA,IACzB;AAAA,IACA,CAAC,oBAAoB,QAAQ;AAAA,EAC/B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UACC,WAAW,QAAQ;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C,CAAC;AAAA,IACH,CAAC,qBAAqB,OAAO,OAAO,IAAI;AAAA,EAC1C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,oBAAoB;AAAA,MACpB,UAAU,aAAa;AAAA,MACvB,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;","names":["CardPressable"]}
+{"version":3,"sources":["../../../src/components/card/pressable.tsx"],"sourcesContent":["import type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\nimport { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { CardPressableProps } from \"../../types\";\nimport { Pressable } from \"../atoms/pressable\";\nimport { cardRootStyles } from \"./root.styles\";\n\nexport const CardPressable = memo(function CardPressable({\n  disabled,\n  style,\n  ...props\n}: CardPressableProps) {\n  const styles = useThemedStyles(cardRootStyles);\n  const extractedStyleProps = useStyleProps(props);\n\n  const rootStyle = useCallback(\n    (state: PressableStateCallbackType): StyleProp<ViewStyle> =>\n      StyleSheet.flatten([\n        styles.root,\n        extractedStyleProps,\n        typeof style === \"function\" ? style(state) : style,\n      ]),\n    [extractedStyleProps, style, styles.root],\n  );\n\n  return (\n    <Pressable {...props} disabled={disabled === true} style={rootStyle} />\n  );\n});\n"],"mappings":"AAiCI;AA5BJ,SAAS,MAAM,mBAA4B;AAC3C,SAAS,kBAAkB;AAE3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAExB,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,gBAAgB,cAAc;AAC7C,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,YAAY;AAAA,IAChB,CAAC,UACC,WAAW,QAAQ;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C,CAAC;AAAA,IACH,CAAC,qBAAqB,OAAO,OAAO,IAAI;AAAA,EAC1C;AAEA,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,aAAa,MAAM,OAAO,WAAW;AAEzE,CAAC;","names":["CardPressable"]}

package/dist/components/controls/addon.js

@@ -3,6 +3,7 @@ import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { Icon } from "@impulse-ui-native/icon/components/icon";
 import {
+  getFieldStateTokens,
   useComponentsTokens,
   useThemedStyles
 } from "@impulse-ui-native/theme";
@@ -58,14 +59,16 @@ const ControlAddon = memo(function ControlAddon2(props) {
 function themedStyles(theme, props) {
   const { variant, disabled, error } = props;
   const controlAddonTokens = theme.components.controlAddon;
-  const variantTokens = controlAddonTokens.variants[variant];
-  const color = disabled ? variantTokens.disabledIconColor : error ? variantTokens.errorIconColor : variantTokens.iconColor;
+  const appearanceTokens = getFieldStateTokens(
+    controlAddonTokens.variants[variant],
+    { disabled, error: Boolean(error) }
+  );
   return StyleSheet.create({
     container: {
       marginHorizontal: controlAddonTokens.marginHorizontal
     },
     icon: {
-      color
+      color: appearanceTokens.iconColor
     }
   });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport {\n  AppTheme,\n  ComponentVariant,\n  useComponentsTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlAddonProps } from \"../../types\";\nimport { Pressable, View } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlAddon = memo(function ControlAddon(\n  props: ControlAddonProps,\n) {\n  const { icon: AddonIcon, onPress, Content, style, ...rest } = props;\n\n  const { variant, disabled, error } = useControlContext();\n\n  const tokens = useComponentsTokens();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      variant,\n      disabled,\n      error,\n    },\n    [variant, disabled, error],\n  );\n\n  const Container = useMemo(() => {\n    if (onPress) {\n      return Pressable;\n    }\n\n    return View;\n  }, [onPress]);\n\n  const children = useMemo(() => {\n    if (Content) {\n      return <Content />;\n    }\n\n    if (AddonIcon) {\n      return <Icon color={styles.icon.color} icon={AddonIcon} />;\n    }\n\n    return null;\n  }, [AddonIcon, Content, styles.icon.color]);\n\n  const containerStyle = useMemo(\n    () => [styles.container, style],\n    [styles.container, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Container\n      {...rest}\n      style={containerStyle}\n      hitSlop={tokens.controlAddon.hitSlop}\n      onPress={onPress}\n      disabled={disabled}\n    >\n      {children}\n    </Container>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  props: {\n    variant: ComponentVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const { variant, disabled, error } = props;\n\n  const controlAddonTokens = theme.components.controlAddon;\n  const variantTokens = controlAddonTokens.variants[variant];\n\n  const color = disabled\n    ? variantTokens.disabledIconColor\n    : error\n      ? variantTokens.errorIconColor\n      : variantTokens.iconColor;\n\n  return StyleSheet.create({\n    container: {\n      marginHorizontal: controlAddonTokens.marginHorizontal,\n    },\n\n    icon: {\n      color,\n    },\n  });\n}\n"],"mappings":"AA4Ca;AA5Cb,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,WAAW,YAAY;AAChC,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,MAAM,WAAW,SAAS,SAAS,OAAO,GAAG,KAAK,IAAI;AAE9D,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAEvD,QAAM,SAAS,oBAAoB;AAEnC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,UAAU,KAAK;AAAA,EAC3B;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,WAAW;AACb,aAAO,oBAAC,QAAK,OAAO,OAAO,KAAK,OAAO,MAAM,WAAW;AAAA,IAC1D;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,SAAS,OAAO,KAAK,KAAK,CAAC;AAE1C,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,KAAK;AAAA,IAC9B,CAAC,OAAO,WAAW,KAAK;AAAA,EAC1B;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,OAAO,aAAa;AAAA,MAC7B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAKA;AACA,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI;AAErC,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,gBAAgB,mBAAmB,SAAS,OAAO;AAEzD,QAAM,QAAQ,WACV,cAAc,oBACd,QACE,cAAc,iBACd,cAAc;AAEpB,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,kBAAkB,mBAAmB;AAAA,IACvC;AAAA,IAEA,MAAM;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAC;AACH;","names":["ControlAddon"]}
+{"version":3,"sources":["../../../src/components/controls/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport {\n  AppTheme,\n  FieldVariant,\n  getFieldStateTokens,\n  useComponentsTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlAddonProps } from \"../../types\";\nimport { Pressable, View } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlAddon = memo(function ControlAddon(\n  props: ControlAddonProps,\n) {\n  const { icon: AddonIcon, onPress, Content, style, ...rest } = props;\n\n  const { variant, disabled, error } = useControlContext();\n\n  const tokens = useComponentsTokens();\n\n  const styles = useThemedStyles(\n    themedStyles,\n    {\n      variant,\n      disabled,\n      error,\n    },\n    [variant, disabled, error],\n  );\n\n  const Container = useMemo(() => {\n    if (onPress) {\n      return Pressable;\n    }\n\n    return View;\n  }, [onPress]);\n\n  const children = useMemo(() => {\n    if (Content) {\n      return <Content />;\n    }\n\n    if (AddonIcon) {\n      return <Icon color={styles.icon.color} icon={AddonIcon} />;\n    }\n\n    return null;\n  }, [AddonIcon, Content, styles.icon.color]);\n\n  const containerStyle = useMemo(\n    () => [styles.container, style],\n    [styles.container, style],\n  );\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <Container\n      {...rest}\n      style={containerStyle}\n      hitSlop={tokens.controlAddon.hitSlop}\n      onPress={onPress}\n      disabled={disabled}\n    >\n      {children}\n    </Container>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  props: {\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const { variant, disabled, error } = props;\n\n  const controlAddonTokens = theme.components.controlAddon;\n  const appearanceTokens = getFieldStateTokens(\n    controlAddonTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    container: {\n      marginHorizontal: controlAddonTokens.marginHorizontal,\n    },\n\n    icon: {\n      color: appearanceTokens.iconColor,\n    },\n  });\n}\n"],"mappings":"AA6Ca;AA7Cb,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,WAAW,YAAY;AAChC,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,MAAM,WAAW,SAAS,SAAS,OAAO,GAAG,KAAK,IAAI;AAE9D,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI,kBAAkB;AAEvD,QAAM,SAAS,oBAAoB;AAEnC,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,SAAS,UAAU,KAAK;AAAA,EAC3B;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,WAAW;AACb,aAAO,oBAAC,QAAK,OAAO,OAAO,KAAK,OAAO,MAAM,WAAW;AAAA,IAC1D;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,SAAS,OAAO,KAAK,KAAK,CAAC;AAE1C,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,KAAK;AAAA,IAC9B,CAAC,OAAO,WAAW,KAAK;AAAA,EAC1B;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,OAAO,aAAa;AAAA,MAC7B;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aACP,OACA,OAKA;AACA,QAAM,EAAE,SAAS,UAAU,MAAM,IAAI;AAErC,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,SAAS,OAAO;AAAA,IACnC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,kBAAkB,mBAAmB;AAAA,IACvC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlAddon"]}

package/dist/components/controls/container.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import {
+  getFieldStateTokens,
   useThemedStyles
 } from "@impulse-ui-native/theme";
 import { View } from "../atoms/view";
@@ -33,7 +34,10 @@ function themedStyles(theme, {
 }) {
   const controlContainerTokens = theme.components.controlContainer;
   const sizeTokens = controlContainerTokens.sizes[size];
-  const variantTokens = controlContainerTokens.variants[variant];
+  const appearanceTokens = getFieldStateTokens(
+    controlContainerTokens.variants[variant],
+    { disabled, error: Boolean(error) }
+  );
   return StyleSheet.create({
     inputContainer: {
       flexDirection: "row",
@@ -42,9 +46,9 @@ function themedStyles(theme, {
       paddingHorizontal: sizeTokens.paddingHorizontal,
       borderRadius: controlContainerTokens.borderRadius,
       borderWidth: controlContainerTokens.borderWidth,
-      opacity: disabled ? controlContainerTokens.disabledOpacity : 1,
-      backgroundColor: disabled ? variantTokens.disabledBackgroundColor : variantTokens.backgroundColor,
-      borderColor: error ? variantTokens.errorBorderColor : disabled ? variantTokens.disabledBorderColor : variantTokens.borderColor
+      opacity: appearanceTokens.opacity,
+      backgroundColor: appearanceTokens.backgroundColor,
+      borderColor: appearanceTokens.borderColor
     }
   });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  ComponentSize,\n  ComponentVariant,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlContainerProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlContainer = memo(function ControlContainer(\n  props: ControlContainerProps,\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 containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View style={containerStyle} {...rest} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: ComponentVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlContainerTokens = theme.components.controlContainer;\n  const sizeTokens = controlContainerTokens.sizes[size];\n  const variantTokens = controlContainerTokens.variants[variant];\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderRadius: controlContainerTokens.borderRadius,\n      borderWidth: controlContainerTokens.borderWidth,\n\n      opacity: disabled ? controlContainerTokens.disabledOpacity : 1,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n\n      borderColor: error\n        ? variantTokens.errorBorderColor\n        : disabled\n          ? variantTokens.disabledBorderColor\n          : variantTokens.borderColor,\n    },\n  });\n}\n"],"mappings":"AAqCS;AArCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,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,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAK,OAAO,gBAAiB,GAAG,MAAM;AAChD,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,yBAAyB,MAAM,WAAW;AAChD,QAAM,aAAa,uBAAuB,MAAM,IAAI;AACpD,QAAM,gBAAgB,uBAAuB,SAAS,OAAO;AAE7D,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MAEZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAE9B,cAAc,uBAAuB;AAAA,MACrC,aAAa,uBAAuB;AAAA,MAEpC,SAAS,WAAW,uBAAuB,kBAAkB;AAAA,MAE7D,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,MAElB,aAAa,QACT,cAAc,mBACd,WACE,cAAc,sBACd,cAAc;AAAA,IACtB;AAAA,EACF,CAAC;AACH;","names":["ControlContainer"]}
+{"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlContainerProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlContainer = memo(function ControlContainer(\n  props: ControlContainerProps,\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 containerStyle = useMemo(\n    () => [styles.inputContainer, style],\n    [styles.inputContainer, style],\n  );\n\n  return <View style={containerStyle} {...rest} />;\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlContainerTokens = theme.components.controlContainer;\n  const sizeTokens = controlContainerTokens.sizes[size];\n  const appearanceTokens = getFieldStateTokens(\n    controlContainerTokens.variants[variant],\n    { disabled, error: Boolean(error) },\n  );\n\n  return StyleSheet.create({\n    inputContainer: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n\n      height: sizeTokens.height,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderRadius: controlContainerTokens.borderRadius,\n      borderWidth: controlContainerTokens.borderWidth,\n\n      opacity: appearanceTokens.opacity,\n      backgroundColor: appearanceTokens.backgroundColor,\n      borderColor: appearanceTokens.borderColor,\n    },\n  });\n}\n"],"mappings":"AAsCS;AAtCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,KAAK,SAASA,kBAC5C,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,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAK,OAAO,gBAAiB,GAAG,MAAM;AAChD,CAAC;AAED,SAAS,aACP,OACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,yBAAyB,MAAM,WAAW;AAChD,QAAM,aAAa,uBAAuB,MAAM,IAAI;AACpD,QAAM,mBAAmB;AAAA,IACvB,uBAAuB,SAAS,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MAEZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAE9B,cAAc,uBAAuB;AAAA,MACrC,aAAa,uBAAuB;AAAA,MAEpC,SAAS,iBAAiB;AAAA,MAC1B,iBAAiB,iBAAiB;AAAA,MAClC,aAAa,iBAAiB;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["ControlContainer"]}

package/dist/components/controls/input.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet, TextInput } from "react-native";
 import {
+  getFieldStateTokens,
   useThemedStyles
 } from "@impulse-ui-native/theme";
 import { useControlContext } from "./provider";
@@ -40,20 +41,21 @@ function themedStyles(theme, {
 }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
-  const variantTokens = controlInputTokens.variants[variant];
-  const color = disabled ? variantTokens.disabledColor : error ? variantTokens.errorColor : variantTokens.color;
-  const placeholderColor = disabled ? variantTokens.disabledPlaceholderColor : error ? variantTokens.errorPlaceholderColor : variantTokens.placeholderColor;
+  const appearanceTokens = getFieldStateTokens(
+    controlInputTokens.variants[variant],
+    { disabled, error: Boolean(error) }
+  );
   return StyleSheet.create({
     input: {
       flex: controlInputTokens.flex,
-      color,
+      color: appearanceTokens.color,
       fontSize: sizeTokens.fontSize,
       fontFamily: controlInputTokens.fontFamily,
       paddingHorizontal: controlInputTokens.paddingHorizontal,
       height: "100%"
     },
     placeholder: {
-      color: placeholderColor
+      color: appearanceTokens.placeholderColor
     }
   });
 }

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 {\n  AppTheme,\n  ComponentSize,\n  ComponentVariant,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlInputProps } from \"../../types\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlInput = memo(function ControlInput(\n  props: ControlInputProps,\n) {\n  const { 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  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: ComponentVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const variantTokens = controlInputTokens.variants[variant];\n\n  const color = disabled\n    ? variantTokens.disabledColor\n    : error\n      ? variantTokens.errorColor\n      : variantTokens.color;\n\n  const placeholderColor = disabled\n    ? variantTokens.disabledPlaceholderColor\n    : error\n      ? variantTokens.errorPlaceholderColor\n      : variantTokens.placeholderColor;\n\n  return StyleSheet.create({\n    input: {\n      flex: controlInputTokens.flex,\n      color,\n      fontSize: sizeTokens.fontSize,\n      fontFamily: controlInputTokens.fontFamily,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n      height: \"100%\",\n    },\n\n    placeholder: {\n      color: placeholderColor,\n    },\n  });\n}\n"],"mappings":"AAqCI;AArCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAEtC;AAAA,EAIE;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,GAAG,KAAK,IAAI;AAEpC,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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,gBAAgB,mBAAmB,SAAS,OAAO;AAEzD,QAAM,QAAQ,WACV,cAAc,gBACd,QACE,cAAc,aACd,cAAc;AAEpB,QAAM,mBAAmB,WACrB,cAAc,2BACd,QACE,cAAc,wBACd,cAAc;AAEpB,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO;AAAA,IACT;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 {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlInputProps } from \"../../types\";\nimport { useControlContext } from \"./provider\";\n\nexport const ControlInput = memo(function ControlInput(\n  props: ControlInputProps,\n) {\n  const { 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  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\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":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAEtC;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,GAAG,KAAK,IAAI;AAEpC,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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;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"]}

package/dist/components/controls/label.js

@@ -1,7 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { useThemedStyles } from "@impulse-ui-native/theme";
+import {
+  getFieldStateTokens,
+  useThemedStyles
+} from "@impulse-ui-native/theme";
 import { Typography } from "../atoms";
 import { useControlContext } from "./provider";
 const ControlLabel = memo(function ControlLabel2(props) {
@@ -27,12 +30,15 @@ const ControlLabel = memo(function ControlLabel2(props) {
 function themedStyles(theme, props) {
   const { disabled, error } = props;
   const controlLabelTokens = theme.components.controlLabel;
-  const color = disabled ? controlLabelTokens.disabledColor : error ? controlLabelTokens.errorColor : controlLabelTokens.color;
+  const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {
+    disabled,
+    error: Boolean(error)
+  });
   return StyleSheet.create({
     label: {
       marginBottom: controlLabelTokens.marginBottom,
       fontSize: controlLabelTokens.fontSize,
-      color
+      color: appearanceTokens.color
     }
   });
 }

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 { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ControlLabelProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\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(\n  theme: AppTheme,\n  props: {\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const { disabled, error } = props;\n\n  const controlLabelTokens = theme.components.controlLabel;\n\n  const color = disabled\n    ? controlLabelTokens.disabledColor\n    : error\n      ? controlLabelTokens.errorColor\n      : controlLabelTokens.color;\n\n  return StyleSheet.create({\n    label: {\n      marginBottom: controlLabelTokens.marginBottom,\n      fontSize: controlLabelTokens.fontSize,\n      color,\n    },\n  });\n}\n"],"mappings":"AAmCI;AAnCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAmB,uBAAuB;AAG1C,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,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,aACP,OACA,OAIA;AACA,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAE5C,QAAM,QAAQ,WACV,mBAAmB,gBACnB,QACE,mBAAmB,aACnB,mBAAmB;AAEzB,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B;AAAA,IACF;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 {\n  AppTheme,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlLabelProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\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(\n  theme: AppTheme,\n  props: {\n    disabled?: boolean;\n    error?: string;\n  },\n) {\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":"AAuCI;AAvCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,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,aACP,OACA,OAIA;AACA,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/placeholder.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import {
+  getFieldStateTokens,
   useThemedStyles
 } from "@impulse-ui-native/theme";
 import { Typography } from "../atoms";
@@ -33,12 +34,14 @@ function themedStyles(theme, {
 }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
-  const variantTokens = controlInputTokens.variants[variant];
-  const color = disabled ? variantTokens.disabledPlaceholderColor : error ? variantTokens.errorPlaceholderColor : variantTokens.placeholderColor;
+  const appearanceTokens = getFieldStateTokens(
+    controlInputTokens.variants[variant],
+    { disabled, error: Boolean(error) }
+  );
   return StyleSheet.create({
     placeholder: {
       flex: controlInputTokens.flex,
-      color,
+      color: appearanceTokens.placeholderColor,
       fontFamily: controlInputTokens.fontFamily,
       fontSize: sizeTokens.fontSize,
       paddingHorizontal: controlInputTokens.paddingHorizontal

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 {\n  AppTheme,\n  ComponentSize,\n  ComponentVariant,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlPlaceholderProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\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  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: ComponentVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const variantTokens = controlInputTokens.variants[variant];\n\n  const color = disabled\n    ? variantTokens.disabledPlaceholderColor\n    : error\n      ? variantTokens.errorPlaceholderColor\n      : variantTokens.placeholderColor;\n\n  return StyleSheet.create({\n    placeholder: {\n      flex: controlInputTokens.flex,\n      color,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,gBAAgB,mBAAmB,SAAS,OAAO;AAEzD,QAAM,QAAQ,WACV,cAAc,2BACd,QACE,cAAc,wBACd,cAAc;AAEpB,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB;AAAA,MACA,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 {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlPlaceholderProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\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  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\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":"AAuCI;AAvCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;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"]}

package/dist/components/controls/value.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import {
+  getFieldStateTokens,
   useThemedStyles
 } from "@impulse-ui-native/theme";
 import { Typography } from "../atoms";
@@ -28,12 +29,14 @@ function themedStyles(theme, {
 }) {
   const controlInputTokens = theme.components.controlInput;
   const sizeTokens = controlInputTokens.sizes[size];
-  const variantTokens = controlInputTokens.variants[variant];
-  const color = disabled ? variantTokens.disabledColor : error ? variantTokens.errorColor : variantTokens.color;
+  const appearanceTokens = getFieldStateTokens(
+    controlInputTokens.variants[variant],
+    { disabled, error: Boolean(error) }
+  );
   return StyleSheet.create({
     value: {
       flex: controlInputTokens.flex,
-      color,
+      color: appearanceTokens.color,
       fontFamily: controlInputTokens.fontFamily,
       fontSize: sizeTokens.fontSize,
       paddingHorizontal: controlInputTokens.paddingHorizontal

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 {\n  AppTheme,\n  ComponentSize,\n  ComponentVariant,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlValueProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\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  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: ComponentVariant;\n    disabled?: boolean;\n    error?: string;\n  },\n) {\n  const controlInputTokens = theme.components.controlInput;\n  const sizeTokens = controlInputTokens.sizes[size];\n  const variantTokens = controlInputTokens.variants[variant];\n\n  const color = disabled\n    ? variantTokens.disabledColor\n    : error\n      ? variantTokens.errorColor\n      : variantTokens.color;\n\n  return StyleSheet.create({\n    value: {\n      flex: controlInputTokens.flex,\n      color,\n      fontFamily: controlInputTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      paddingHorizontal: controlInputTokens.paddingHorizontal,\n    },\n  });\n}\n"],"mappings":"AAgCS;AAhCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,gBAAgB,mBAAmB,SAAS,OAAO;AAEzD,QAAM,QAAQ,WACV,cAAc,gBACd,QACE,cAAc,aACd,cAAc;AAEpB,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB;AAAA,MACA,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 {\n  AppTheme,\n  ComponentSize,\n  FieldVariant,\n  getFieldStateTokens,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { ControlValueProps } from \"../../types\";\nimport { Typography } from \"../atoms\";\nimport { useControlContext } from \"./provider\";\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  {\n    size,\n    variant,\n    disabled,\n    error,\n  }: {\n    size: ComponentSize;\n    variant: FieldVariant;\n    disabled?: boolean;\n    error?: string;\n  },\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":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAE3B,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;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMA;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"]}

package/dist/components/index.d.mts

@@ -13,6 +13,7 @@ export { Tag } from './atoms/tag.mjs';
 export { Card } from './card/card.mjs';
 export { Control } from './controls/control.mjs';
 export { useControlContext } from './controls/provider.mjs';
+export { List } from './list/list.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import '../types/avatar.types.mjs';
@@ -32,3 +33,4 @@ import '../types/icon-button.types.mjs';
 import '../types/progress.types.mjs';
 import '../types/tag.types.mjs';
 import '../types/card.types.mjs';
+import '../types/list.types.mjs';

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export * from "./atoms";
 export * from "./card";
 export * from "./controls";
+export * from "./list";
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./atoms\";\nexport * from \"./card\";\nexport * from \"./controls\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./atoms\";\nexport * from \"./card\";\nexport * from \"./controls\";\n\nexport * from \"./list\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;","names":[]}

package/dist/components/list/content.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListContentProps } from '../../types/list.types.mjs';
+import '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const ListContent: react.MemoExoticComponent<({ style, ...props }: ListContentProps) => react_jsx_runtime.JSX.Element>;
+
+export { ListContent };

package/dist/components/list/content.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+import { View } from "../atoms/view";
+const ListContent = memo(function ListContent2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const composedStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: composedStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.list;
+  return StyleSheet.create({
+    part: { flex: 1, minWidth: 0, gap: tokens.content.gap }
+  });
+}
+export {
+  ListContent
+};
+//# sourceMappingURL=content.js.map

package/dist/components/list/content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/content.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ListContentProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const ListContent = memo(function ListContent({\n  style,\n  ...props\n}: ListContentProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const composedStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n  return <View {...props} style={composedStyle} />;\n});\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.list;\n  return StyleSheet.create({\n    part: { flex: 1, minWidth: 0, gap: tokens.content.gap },\n  });\n}\n"],"mappings":"AAmBS;AAnBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AACA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,eAAe;AAChD,CAAC;AACD,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAChC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,KAAK,OAAO,QAAQ,IAAI;AAAA,EACxD,CAAC;AACH;","names":["ListContent"]}

package/dist/components/list/index.d.mts

@@ -0,0 +1,8 @@
+export { List } from './list.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '../../types/list.types.mjs';
+import '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';

package/dist/components/list/index.js

@@ -0,0 +1,5 @@
+import { List } from "./list";
+export {
+  List
+};
+//# sourceMappingURL=index.js.map

package/dist/components/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/index.ts"],"sourcesContent":["export { List } from \"./list\";\n"],"mappings":"AAAA,SAAS,YAAY;","names":[]}

package/dist/components/list/item.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListItemProps } from '../../types/list.types.mjs';
+import '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const ListItem: react.MemoExoticComponent<({ style, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element>;
+
+export { ListItem };

package/dist/components/list/item.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+import { View } from "../atoms/view";
+const ListItem = memo(function ListItem2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const composedStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: composedStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.list;
+  return StyleSheet.create({
+    part: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.item.gap,
+      padding: tokens.item.padding
+    }
+  });
+}
+export {
+  ListItem
+};
+//# sourceMappingURL=item.js.map

package/dist/components/list/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/item.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ListItemProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const ListItem = memo(function ListItem({\n  style,\n  ...props\n}: ListItemProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const composedStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n  return <View {...props} style={composedStyle} />;\n});\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.list;\n  return StyleSheet.create({\n    part: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      gap: tokens.item.gap,\n      padding: tokens.item.padding,\n    },\n  });\n}\n"],"mappings":"AAmBS;AAnBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,WAAW,KAAK,SAASA,UAAS;AAAA,EAC7C;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AACA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,eAAe;AAChD,CAAC;AACD,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAChC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,KAAK,OAAO,KAAK;AAAA,MACjB,SAAS,OAAO,KAAK;AAAA,IACvB;AAAA,EACF,CAAC;AACH;","names":["ListItem"]}

package/dist/components/list/leading.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListLeadingProps } from '../../types/list.types.mjs';
+import '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const ListLeading: react.MemoExoticComponent<({ style, ...props }: ListLeadingProps) => react_jsx_runtime.JSX.Element>;
+
+export { ListLeading };

package/dist/components/list/leading.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+import { View } from "../atoms/view";
+const ListLeading = memo(function ListLeading2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const composedStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: composedStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.list;
+  return StyleSheet.create({
+    part: {
+      gap: tokens.item.gap,
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  });
+}
+export {
+  ListLeading
+};
+//# sourceMappingURL=leading.js.map

package/dist/components/list/leading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/leading.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ListLeadingProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const ListLeading = memo(function ListLeading({\n  style,\n  ...props\n}: ListLeadingProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const composedStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n  return <View {...props} style={composedStyle} />;\n});\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.list;\n  return StyleSheet.create({\n    part: {\n      gap: tokens.item.gap,\n      flexShrink: 0,\n      alignItems: \"center\",\n      justifyContent: \"center\",\n    },\n  });\n}\n"],"mappings":"AAmBS;AAnBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,gBAAgB;AAAA,IACpB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AACA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,eAAe;AAChD,CAAC;AACD,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW;AAChC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,KAAK,OAAO,KAAK;AAAA,MACjB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,gBAAgB;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":["ListLeading"]}

package/dist/components/list/list.d.mts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListRootProps, ListItemProps, ListPressableProps, ListLeadingProps, ListContentProps, ListTrailingProps } from '../../types/list.types.mjs';
+import '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const List: {
+    Root: react.MemoExoticComponent<({ style, ...props }: ListRootProps) => react_jsx_runtime.JSX.Element>;
+    Item: react.MemoExoticComponent<({ style, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element>;
+    Pressable: react.MemoExoticComponent<({ disabled, style, ...props }: ListPressableProps) => react_jsx_runtime.JSX.Element>;
+    Leading: react.MemoExoticComponent<({ style, ...props }: ListLeadingProps) => react_jsx_runtime.JSX.Element>;
+    Content: react.MemoExoticComponent<({ style, ...props }: ListContentProps) => react_jsx_runtime.JSX.Element>;
+    Trailing: react.MemoExoticComponent<({ style, ...props }: ListTrailingProps) => react_jsx_runtime.JSX.Element>;
+};
+
+export { List };

package/dist/components/list/list.js

@@ -0,0 +1,18 @@
+import { ListContent } from "./content";
+import { ListItem } from "./item";
+import { ListLeading } from "./leading";
+import { ListPressable } from "./pressable";
+import { ListRoot } from "./root";
+import { ListTrailing } from "./trailing";
+const List = {
+  Root: ListRoot,
+  Item: ListItem,
+  Pressable: ListPressable,
+  Leading: ListLeading,
+  Content: ListContent,
+  Trailing: ListTrailing
+};
+export {
+  List
+};
+//# sourceMappingURL=list.js.map

package/dist/components/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/list.tsx"],"sourcesContent":["import { ListContent } from \"./content\";\nimport { ListItem } from \"./item\";\nimport { ListLeading } from \"./leading\";\nimport { ListPressable } from \"./pressable\";\nimport { ListRoot } from \"./root\";\nimport { ListTrailing } from \"./trailing\";\n\nexport const List = {\n  Root: ListRoot,\n  Item: ListItem,\n  Pressable: ListPressable,\n  Leading: ListLeading,\n  Content: ListContent,\n  Trailing: ListTrailing,\n};\n"],"mappings":"AAAA,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAEtB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AACZ;","names":[]}

package/dist/components/list/pressable.d.mts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListPressableProps } from '../../types/list.types.mjs';
+import '../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const ListPressable: react.MemoExoticComponent<({ disabled, style, ...props }: ListPressableProps) => react_jsx_runtime.JSX.Element>;
+
+export { ListPressable };