@impulse-ui-native/primitives 3.0.0 → 5.0.0

package/dist/components/list/pressable.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+import { Pressable } from "../atoms/pressable";
+const ListPressable = memo(function ListPressable2({
+  disabled,
+  style,
+  ...props
+}) {
+  const styles = useThemedStyles(themedStyles);
+  const extractedStyleProps = useStyleProps(props);
+  const rootStyle = useCallback(
+    (state) => StyleSheet.flatten([
+      styles.root,
+      extractedStyleProps,
+      typeof style === "function" ? style(state) : style
+    ]),
+    [extractedStyleProps, style, styles.root]
+  );
+  return /* @__PURE__ */ jsx(Pressable, { ...props, disabled: disabled === true, style: rootStyle });
+});
+function themedStyles(theme) {
+  const tokens = theme.components.list.item;
+  return StyleSheet.create({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.gap,
+      padding: tokens.padding
+    }
+  });
+}
+export {
+  ListPressable
+};
+//# sourceMappingURL=pressable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/pressable.tsx"],"sourcesContent":["import type {\n  PressableStateCallbackType,\n  StyleProp,\n  ViewStyle,\n} from \"react-native\";\nimport { memo, useCallback } 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 { ListPressableProps } from \"../../types\";\nimport { Pressable } from \"../atoms/pressable\";\n\nexport const ListPressable = memo(function ListPressable({\n  disabled,\n  style,\n  ...props\n}: ListPressableProps) {\n  const styles = useThemedStyles(themedStyles);\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\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.list.item;\n  return StyleSheet.create({\n    root: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      gap: tokens.gap,\n      padding: tokens.padding,\n    },\n  });\n}\n"],"mappings":"AAiCI;AA5BJ,SAAS,MAAM,mBAAmB;AAClC,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,iBAAiB;AAEnB,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,gBAAgB,YAAY;AAC3C,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;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW,KAAK;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,KAAK,OAAO;AAAA,MACZ,SAAS,OAAO;AAAA,IAClB;AAAA,EACF,CAAC;AACH;","names":["ListPressable"]}

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ListRootProps } 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 ListRoot: react.MemoExoticComponent<({ style, ...props }: ListRootProps) => react_jsx_runtime.JSX.Element>;
+
+export { ListRoot };

package/dist/components/list/root.js

@@ -0,0 +1,33 @@
+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 ListRoot = memo(function ListRoot2({
+  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: {
+      backgroundColor: tokens.backgroundColor,
+      borderColor: tokens.borderColor,
+      borderWidth: tokens.borderWidth,
+      borderRadius: tokens.borderRadius,
+      overflow: "hidden"
+    }
+  });
+}
+export {
+  ListRoot
+};
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/root.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 { ListRootProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const ListRoot = memo(function ListRoot({\n  style,\n  ...props\n}: ListRootProps) {\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      backgroundColor: tokens.backgroundColor,\n      borderColor: tokens.borderColor,\n      borderWidth: tokens.borderWidth,\n      borderRadius: tokens.borderRadius,\n      overflow: \"hidden\",\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,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,cAAc,OAAO;AAAA,MACrB,UAAU;AAAA,IACZ;AAAA,EACF,CAAC;AACH;","names":["ListRoot"]}

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

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { 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 ListTrailing: react.MemoExoticComponent<({ style, ...props }: ListTrailingProps) => react_jsx_runtime.JSX.Element>;
+
+export { ListTrailing };

package/dist/components/list/trailing.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 ListTrailing = memo(function ListTrailing2({
+  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: {
+      flexShrink: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.item.gap
+    }
+  });
+}
+export {
+  ListTrailing
+};
+//# sourceMappingURL=trailing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list/trailing.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 { ListTrailingProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const ListTrailing = memo(function ListTrailing({\n  style,\n  ...props\n}: ListTrailingProps) {\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      flexShrink: 0,\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      gap: tokens.item.gap,\n    },\n  });\n}\n"],"mappings":"AAmBS;AAnBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,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,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,KAAK,OAAO,KAAK;AAAA,IACnB;AAAA,EACF,CAAC;AACH;","names":["ListTrailing"]}

package/dist/hocs/create-preset.hoc.d.mts

@@ -4,7 +4,7 @@ import { AppTheme, TypographyProps, TypographyPresetKey } from '@impulse-ui-nati
 import { TextProps } from '../types/typography.types.mjs';
 import 'react-native';
 
-declare function createPreset(config: (theme: AppTheme) => TypographyProps, key: TypographyPresetKey): react.MemoExoticComponent<{
+declare function createPreset(config: (theme: AppTheme) => TypographyProps & Pick<TextProps, "color">, key: TypographyPresetKey): react.MemoExoticComponent<{
     (props: TextProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 }>;

package/dist/hocs/create-preset.hoc.js

@@ -1,32 +1,47 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet, Text } from "react-native";
-import {
-  useStyleProps,
-  useTheme
-} from "@impulse-ui-native/theme";
+import { useStyleProps, useTheme } from "@impulse-ui-native/theme";
 const numericFontVariant = ["tabular-nums"];
 const defaultFontVariant = [];
 function createPreset(config, key) {
   const Component = (props) => {
-    const { style, numeric, fontStyle, fontWeight, ...rest } = props;
+    const {
+      style,
+      numeric,
+      fontFamily: customFontFamily,
+      fontVariant: customFontVariant,
+      fontStyle,
+      fontWeight,
+      ...rest
+    } = props;
     const theme = useTheme();
     const extractedStyleProps = useStyleProps(props);
     const typographyStyle = useMemo(() => {
       const themedConfig = config(theme);
       const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? "normal";
       const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? 400;
-      const fontFamily = theme.fontFamily[resolvedFontStyle][resolvedFontWeight];
+      const fontFamily = customFontFamily ?? themedConfig.fontFamily ?? theme.fontFamily[resolvedFontStyle][resolvedFontWeight];
       return StyleSheet.flatten([
+        { color: theme.colors.text.primary },
         themedConfig,
         extractedStyleProps,
         {
           fontFamily,
-          fontVariant: numeric ? numericFontVariant : defaultFontVariant
+          fontVariant: numeric ? numericFontVariant : customFontVariant ?? themedConfig.fontVariant ?? defaultFontVariant
         },
         style
       ]);
-    }, [theme, extractedStyleProps, style, numeric, fontStyle, fontWeight]);
+    }, [
+      theme,
+      extractedStyleProps,
+      style,
+      numeric,
+      customFontFamily,
+      customFontVariant,
+      fontStyle,
+      fontWeight
+    ]);
     return /* @__PURE__ */ jsx(Text, { ...rest, style: typographyStyle });
   };
   Component.displayName = `Typography.${key}`;

package/dist/hocs/create-preset.hoc.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hocs/create-preset.hoc.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, Text, TextStyle } from \"react-native\";\n\nimport {\n  AppTheme,\n  TypographyPresetKey,\n  TypographyProps,\n  useStyleProps,\n  useTheme,\n} from \"@impulse-ui-native/theme\";\n\nimport { TextProps } from \"../types\";\n\nconst numericFontVariant: TextStyle[\"fontVariant\"] = [\"tabular-nums\"];\nconst defaultFontVariant: TextStyle[\"fontVariant\"] = [];\n\nexport function createPreset(\n  config: (theme: AppTheme) => TypographyProps,\n  key: TypographyPresetKey,\n) {\n  const Component = (props: TextProps) => {\n    const { style, numeric, fontStyle, fontWeight, ...rest } = props;\n\n    const theme = useTheme();\n    const extractedStyleProps = useStyleProps(props);\n\n    const typographyStyle = useMemo(() => {\n      const themedConfig = config(theme);\n\n      const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? \"normal\";\n      const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? 400;\n\n      const fontFamily =\n        theme.fontFamily[resolvedFontStyle][resolvedFontWeight];\n\n      return StyleSheet.flatten([\n        themedConfig,\n        extractedStyleProps,\n        {\n          fontFamily,\n          fontVariant: numeric ? numericFontVariant : defaultFontVariant,\n        },\n        style,\n      ]);\n    }, [theme, extractedStyleProps, style, numeric, fontStyle, fontWeight]);\n\n    return <Text {...rest} style={typographyStyle} />;\n  };\n\n  Component.displayName = `Typography.${key}`;\n\n  return memo(Component);\n}\n"],"mappings":"AA8CW;AA9CX,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAuB;AAE5C;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAIP,MAAM,qBAA+C,CAAC,cAAc;AACpE,MAAM,qBAA+C,CAAC;AAE/C,SAAS,aACd,QACA,KACA;AACA,QAAM,YAAY,CAAC,UAAqB;AACtC,UAAM,EAAE,OAAO,SAAS,WAAW,YAAY,GAAG,KAAK,IAAI;AAE3D,UAAM,QAAQ,SAAS;AACvB,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB,QAAQ,MAAM;AACpC,YAAM,eAAe,OAAO,KAAK;AAEjC,YAAM,oBAAoB,aAAa,aAAa,aAAa;AACjE,YAAM,qBAAqB,cAAc,aAAa,cAAc;AAEpE,YAAM,aACJ,MAAM,WAAW,iBAAiB,EAAE,kBAAkB;AAExD,aAAO,WAAW,QAAQ;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,UACE;AAAA,UACA,aAAa,UAAU,qBAAqB;AAAA,QAC9C;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,OAAO,qBAAqB,OAAO,SAAS,WAAW,UAAU,CAAC;AAEtE,WAAO,oBAAC,QAAM,GAAG,MAAM,OAAO,iBAAiB;AAAA,EACjD;AAEA,YAAU,cAAc,cAAc,GAAG;AAEzC,SAAO,KAAK,SAAS;AACvB;","names":[]}
+{"version":3,"sources":["../../src/hocs/create-preset.hoc.tsx"],"sourcesContent":["import type { TextStyle } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type {\n  AppTheme,\n  TypographyPresetKey,\n  TypographyProps,\n} from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useTheme } from \"@impulse-ui-native/theme\";\n\nimport type { TextProps } from \"../types\";\n\nconst numericFontVariant: TextStyle[\"fontVariant\"] = [\"tabular-nums\"];\nconst defaultFontVariant: TextStyle[\"fontVariant\"] = [];\n\nexport function createPreset(\n  config: (theme: AppTheme) => TypographyProps & Pick<TextProps, \"color\">,\n  key: TypographyPresetKey,\n) {\n  const Component = (props: TextProps) => {\n    const {\n      style,\n      numeric,\n      fontFamily: customFontFamily,\n      fontVariant: customFontVariant,\n      fontStyle,\n      fontWeight,\n      ...rest\n    } = props;\n\n    const theme = useTheme();\n    const extractedStyleProps = useStyleProps(props);\n\n    const typographyStyle = useMemo(() => {\n      const themedConfig = config(theme);\n\n      const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? \"normal\";\n      const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? 400;\n\n      const fontFamily =\n        customFontFamily ??\n        themedConfig.fontFamily ??\n        theme.fontFamily[resolvedFontStyle][resolvedFontWeight];\n\n      return StyleSheet.flatten([\n        { color: theme.colors.text.primary },\n        themedConfig,\n        extractedStyleProps,\n        {\n          fontFamily,\n          fontVariant: numeric\n            ? numericFontVariant\n            : (customFontVariant ??\n              themedConfig.fontVariant ??\n              defaultFontVariant),\n        },\n        style,\n      ]);\n    }, [\n      theme,\n      extractedStyleProps,\n      style,\n      numeric,\n      customFontFamily,\n      customFontVariant,\n      fontStyle,\n      fontWeight,\n    ]);\n\n    return <Text {...rest} style={typographyStyle} />;\n  };\n\n  Component.displayName = `Typography.${key}`;\n\n  return memo(Component);\n}\n"],"mappings":"AAsEW;AArEX,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAOjC,SAAS,eAAe,gBAAgB;AAIxC,MAAM,qBAA+C,CAAC,cAAc;AACpE,MAAM,qBAA+C,CAAC;AAE/C,SAAS,aACd,QACA,KACA;AACA,QAAM,YAAY,CAAC,UAAqB;AACtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAQ,SAAS;AACvB,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB,QAAQ,MAAM;AACpC,YAAM,eAAe,OAAO,KAAK;AAEjC,YAAM,oBAAoB,aAAa,aAAa,aAAa;AACjE,YAAM,qBAAqB,cAAc,aAAa,cAAc;AAEpE,YAAM,aACJ,oBACA,aAAa,cACb,MAAM,WAAW,iBAAiB,EAAE,kBAAkB;AAExD,aAAO,WAAW,QAAQ;AAAA,QACxB,EAAE,OAAO,MAAM,OAAO,KAAK,QAAQ;AAAA,QACnC;AAAA,QACA;AAAA,QACA;AAAA,UACE;AAAA,UACA,aAAa,UACT,qBACC,qBACD,aAAa,eACb;AAAA,QACN;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,oBAAC,QAAM,GAAG,MAAM,OAAO,iBAAiB;AAAA,EACjD;AAEA,YAAU,cAAc,cAAc,GAAG;AAEzC,SAAO,KAAK,SAAS;AACvB;","names":[]}

package/dist/hooks/use-indeterminate-progress-animation.hook.js

@@ -1,30 +1,9 @@
-import { useEffect, useRef, useState } from "react";
-import { AccessibilityInfo, Animated, Easing } from "react-native";
+import { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
 function useIndeterminateProgressAnimation(duration) {
-  const [reduceMotion, setReduceMotion] = useState(false);
   const progress = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    let mounted = true;
-    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
-      if (mounted) {
-        setReduceMotion(enabled);
-      }
-    });
-    const subscription = AccessibilityInfo.addEventListener(
-      "reduceMotionChanged",
-      setReduceMotion
-    );
-    return () => {
-      mounted = false;
-      subscription.remove();
-    };
-  }, []);
   useEffect(() => {
     progress.stopAnimation();
-    if (reduceMotion) {
-      progress.setValue(0.5);
-      return;
-    }
     progress.setValue(0);
     const animation = Animated.loop(
       Animated.timing(progress, {
@@ -38,7 +17,7 @@ function useIndeterminateProgressAnimation(duration) {
     return () => {
       animation.stop();
     };
-  }, [duration, progress, reduceMotion]);
+  }, [duration, progress]);
   return progress;
 }
 export {

package/dist/hooks/use-indeterminate-progress-animation.hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-indeterminate-progress-animation.hook.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { AccessibilityInfo, Animated, Easing } from \"react-native\";\n\nexport function useIndeterminateProgressAnimation(duration: number) {\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const progress = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    let mounted = true;\n\n    AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {\n      if (mounted) {\n        setReduceMotion(enabled);\n      }\n    });\n\n    const subscription = AccessibilityInfo.addEventListener(\n      \"reduceMotionChanged\",\n      setReduceMotion,\n    );\n\n    return () => {\n      mounted = false;\n      subscription.remove();\n    };\n  }, []);\n\n  useEffect(() => {\n    progress.stopAnimation();\n\n    if (reduceMotion) {\n      progress.setValue(0.5);\n      return;\n    }\n\n    progress.setValue(0);\n\n    const animation = Animated.loop(\n      Animated.timing(progress, {\n        duration,\n        easing: Easing.linear,\n        toValue: 1,\n        useNativeDriver: true,\n      }),\n    );\n\n    animation.start();\n\n    return () => {\n      animation.stop();\n    };\n  }, [duration, progress, reduceMotion]);\n\n  return progress;\n}\n"],"mappings":"AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,mBAAmB,UAAU,cAAc;AAE7C,SAAS,kCAAkC,UAAkB;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,WAAW,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,EAAE;AAE/C,YAAU,MAAM;AACd,QAAI,UAAU;AAEd,sBAAkB,sBAAsB,EAAE,KAAK,CAAC,YAAY;AAC1D,UAAI,SAAS;AACX,wBAAgB,OAAO;AAAA,MACzB;AAAA,IACF,CAAC;AAED,UAAM,eAAe,kBAAkB;AAAA,MACrC;AAAA,MACA;AAAA,IACF;AAEA,WAAO,MAAM;AACX,gBAAU;AACV,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,aAAS,cAAc;AAEvB,QAAI,cAAc;AAChB,eAAS,SAAS,GAAG;AACrB;AAAA,IACF;AAEA,aAAS,SAAS,CAAC;AAEnB,UAAM,YAAY,SAAS;AAAA,MACzB,SAAS,OAAO,UAAU;AAAA,QACxB;AAAA,QACA,QAAQ,OAAO;AAAA,QACf,SAAS;AAAA,QACT,iBAAiB;AAAA,MACnB,CAAC;AAAA,IACH;AAEA,cAAU,MAAM;AAEhB,WAAO,MAAM;AACX,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,YAAY,CAAC;AAErC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-indeterminate-progress-animation.hook.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { Animated, Easing } from \"react-native\";\n\nexport function useIndeterminateProgressAnimation(duration: number) {\n  const progress = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    progress.stopAnimation();\n    progress.setValue(0);\n\n    const animation = Animated.loop(\n      Animated.timing(progress, {\n        duration,\n        easing: Easing.linear,\n        toValue: 1,\n        useNativeDriver: true,\n      }),\n    );\n\n    animation.start();\n\n    return () => {\n      animation.stop();\n    };\n  }, [duration, progress]);\n\n  return progress;\n}\n"],"mappings":"AAAA,SAAS,WAAW,cAAc;AAClC,SAAS,UAAU,cAAc;AAE1B,SAAS,kCAAkC,UAAkB;AAClE,QAAM,WAAW,OAAO,IAAI,SAAS,MAAM,CAAC,CAAC,EAAE;AAE/C,YAAU,MAAM;AACd,aAAS,cAAc;AACvB,aAAS,SAAS,CAAC;AAEnB,UAAM,YAAY,SAAS;AAAA,MACzB,SAAS,OAAO,UAAU;AAAA,QACxB;AAAA,QACA,QAAQ,OAAO;AAAA,QACf,SAAS;AAAA,QACT,iBAAiB;AAAA,MACnB,CAAC;AAAA,IACH;AAEA,cAAU,MAAM;AAEhB,WAAO,MAAM;AACX,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,SAAO;AACT;","names":[]}

package/dist/index.d.mts

@@ -13,6 +13,7 @@ export { Tag } from './components/atoms/tag.mjs';
 export { Card } from './components/card/card.mjs';
 export { Control } from './components/controls/control.mjs';
 export { useControlContext } from './components/controls/provider.mjs';
+export { List } from './components/list/list.mjs';
 export { createPreset } from './hocs/create-preset.hoc.mjs';
 export { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from './constants/safe-area-view.constants.mjs';
 export { AvatarImageProps, AvatarProps } from './types/avatar.types.mjs';
@@ -28,6 +29,7 @@ export { ProgressProps } from './types/progress.types.mjs';
 export { SpinnerProps } from './types/spinner.types.mjs';
 export { TagProps, TagThemeProps } from './types/tag.types.mjs';
 export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps } from './types/control-components.types.mjs';
+export { ListContentProps, ListItemProps, ListLeadingProps, ListPressableProps, ListRootProps, ListTrailingProps } from './types/list.types.mjs';
 import 'react';
 import 'react/jsx-runtime';
 import '@impulse-ui-native/theme';

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

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

package/dist/types/badge.types.d.mts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ColorValue } from 'react-native';
-import { ComponentSize, BadgeTone, ComponentVariant } from '@impulse-ui-native/theme';
+import { ComponentSize, BadgeTone, DisplayVariant } from '@impulse-ui-native/theme';
 import { ControlComponentCommonProps } from './control-components.types.mjs';
 import { ViewProps } from './view.types.mjs';
 import '@impulse-ui-native/icon/types';
@@ -11,14 +11,14 @@ interface BadgeProps extends Omit<ViewProps, "children">, Pick<ControlComponentC
     children: ReactNode;
     size?: ComponentSize;
     tone?: BadgeTone;
-    variant?: ComponentVariant;
+    variant?: DisplayVariant;
 }
 interface BadgeThemeProps {
     backgroundColor?: ColorValue;
     color?: ColorValue;
     size: ComponentSize;
     tone: BadgeTone;
-    variant: ComponentVariant;
+    variant: DisplayVariant;
 }
 
 export type { BadgeProps, BadgeThemeProps };

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

@@ -1,17 +1,18 @@
 import { PressableProps, ViewStyle, StyleProp } from 'react-native';
-import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ComponentVariant } from '@impulse-ui-native/theme';
+import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant } from '@impulse-ui-native/theme';
 
 interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, ShadowProps {
     size?: ComponentSize;
-    variant?: ComponentVariant;
+    variant?: ActionVariant;
     disabled?: boolean;
     style?: ViewStyle;
     loading?: boolean;
 }
 interface ButtonThemeProps {
     size: ComponentSize;
-    variant: ComponentVariant;
+    variant: ActionVariant;
     disabled?: boolean;
+    loading: boolean;
 }
 interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style"> {
     disabled?: boolean;

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

@@ -1,7 +1,7 @@
 import { ComponentType } from 'react';
 import { ViewProps, TextProps, TextInputProps } from 'react-native';
 import { IconProps } from '@impulse-ui-native/icon/types';
-import { ComponentSize, ComponentVariant } from '@impulse-ui-native/theme';
+import { ComponentSize, FieldVariant } from '@impulse-ui-native/theme';
 import { SpinnerProps } from './spinner.types.mjs';
 import { PressableCoreProps } from './button.types.mjs';
 
@@ -17,7 +17,7 @@ interface ControlComponentCommonProps {
 }
 interface ControlComponentProps {
     size: ComponentSize;
-    variant: ComponentVariant;
+    variant: FieldVariant;
     error: string | undefined;
     disabled: boolean | undefined;
 }

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

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

package/dist/types/index.d.mts

@@ -11,6 +11,7 @@ export { ProgressProps } from './progress.types.mjs';
 export { SpinnerProps } from './spinner.types.mjs';
 export { TagProps, TagThemeProps } from './tag.types.mjs';
 export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps } from './control-components.types.mjs';
+export { ListContentProps, ListItemProps, ListLeadingProps, ListPressableProps, ListRootProps, ListTrailingProps } from './list.types.mjs';
 import 'react';
 import 'react-native';
 import '@impulse-ui-native/theme';

package/dist/types/index.js

@@ -12,4 +12,5 @@ export * from "./progress.types";
 export * from "./spinner.types";
 export * from "./tag.types";
 export * from "./control-components.types";
+export * from "./list.types";
 //# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./avatar.types\";\nexport * from \"./badge.types\";\nexport * from \"./view.types\";\nexport * from \"./safe-area-view.types\";\nexport * from \"./typography.types\";\nexport * from \"./typography.types\";\nexport * from \"./button.types\";\nexport * from \"./card.types\";\nexport * from \"./divider.types\";\nexport * from \"./icon-button.types\";\nexport * from \"./progress.types\";\nexport * from \"./spinner.types\";\nexport * from \"./tag.types\";\nexport * from \"./control-components.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./avatar.types\";\nexport * from \"./badge.types\";\nexport * from \"./view.types\";\nexport * from \"./safe-area-view.types\";\nexport * from \"./typography.types\";\nexport * from \"./typography.types\";\nexport * from \"./button.types\";\nexport * from \"./card.types\";\nexport * from \"./divider.types\";\nexport * from \"./icon-button.types\";\nexport * from \"./progress.types\";\nexport * from \"./spinner.types\";\nexport * from \"./tag.types\";\nexport * from \"./control-components.types\";\n\nexport * from \"./list.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;","names":[]}

package/dist/types/list.types.d.mts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { PressableCoreProps } from './button.types.mjs';
+import { ViewProps } from './view.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+
+interface ListRootProps extends ViewProps {
+}
+interface ListItemProps extends ViewProps {
+}
+interface ListPressableProps extends Omit<PressableCoreProps, "children" | "size" | "variant" | "loading"> {
+    children?: ReactNode;
+}
+interface ListLeadingProps extends ViewProps {
+}
+interface ListContentProps extends ViewProps {
+}
+interface ListTrailingProps extends ViewProps {
+}
+
+export type { ListContentProps, ListItemProps, ListLeadingProps, ListPressableProps, ListRootProps, ListTrailingProps };

package/dist/types/list.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=list.types.js.map

package/dist/types/list.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -1,10 +1,10 @@
 import { ViewStyle, PressableProps } from 'react-native';
-import { ComponentSize, ComponentVariant, TagColor } from '@impulse-ui-native/theme';
+import { ComponentSize, DisplayVariant, TagColor } from '@impulse-ui-native/theme';
 
 interface TagProps {
     label: string;
     size?: ComponentSize;
-    variant?: ComponentVariant;
+    variant?: DisplayVariant;
     color?: TagColor;
     closable?: boolean;
     disabled?: boolean;
@@ -14,7 +14,7 @@ interface TagProps {
 }
 interface TagThemeProps {
     size: ComponentSize;
-    variant: ComponentVariant;
+    variant: DisplayVariant;
     color: TagColor;
     disabled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "3.0.0",
+  "version": "5.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": "3.0.0",
-    "@impulse-ui-native/icon": "3.0.0",
-    "@impulse-ui-native/core": "3.0.0"
+    "@impulse-ui-native/theme": "5.0.0",
+    "@impulse-ui-native/icon": "5.0.0",
+    "@impulse-ui-native/core": "5.0.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -41,9 +41,9 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "15.15.4",
     "typescript": "~6.0.3",
+    "@impulse-ui-native/prettier-config": "1.0.0",
     "@impulse-ui-native/eslint-config": "1.0.0",
-    "@impulse-ui-native/tsconfig": "1.0.0",
-    "@impulse-ui-native/prettier-config": "1.0.0"
+    "@impulse-ui-native/tsconfig": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",