@impulse-ui-native/primitives 2.7.0 → 2.9.0

package/dist/components/atoms/circular-progress.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import Svg, { Circle, G } from "react-native-svg";
+import { useIndeterminateProgressAnimation } from "../../hooks/use-indeterminate-progress-animation.hook";
+const CircularProgress = memo(function CircularProgress2({
+  animationDuration,
+  fraction,
+  indicatorColor,
+  indeterminate,
+  strokeWidth,
+  style,
+  trackColor,
+  width,
+  ...props
+}) {
+  const rootStyle = useMemo(
+    () => [styles.root, { height: width, width }, style],
+    [style, width]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: rootStyle, children: indeterminate ? /* @__PURE__ */ jsx(
+    CircularIndeterminateIndicator,
+    {
+      animationDuration,
+      color: indicatorColor,
+      strokeWidth,
+      trackColor,
+      width
+    }
+  ) : /* @__PURE__ */ jsx(
+    ProgressCircle,
+    {
+      color: indicatorColor,
+      fraction,
+      strokeWidth,
+      trackColor,
+      width
+    }
+  ) });
+});
+const ProgressCircle = memo(function ProgressCircle2({
+  color,
+  fraction,
+  strokeWidth,
+  trackColor,
+  width
+}) {
+  const center = width / 2;
+  const radius = (width - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDasharray = useMemo(
+    () => [circumference, circumference],
+    [circumference]
+  );
+  return /* @__PURE__ */ jsxs(Svg, { accessible: false, height: width, width, children: [
+    /* @__PURE__ */ jsx(
+      Circle,
+      {
+        cx: center,
+        cy: center,
+        fill: "none",
+        r: radius,
+        stroke: trackColor,
+        strokeWidth
+      }
+    ),
+    /* @__PURE__ */ jsx(G, { origin: `${center}, ${center}`, rotation: -90, children: /* @__PURE__ */ jsx(
+      Circle,
+      {
+        cx: center,
+        cy: center,
+        fill: "none",
+        r: radius,
+        stroke: color,
+        strokeDasharray,
+        strokeDashoffset: circumference * (1 - fraction),
+        strokeLinecap: fraction === 0 ? "butt" : "round",
+        strokeWidth
+      }
+    ) })
+  ] });
+});
+const CircularIndeterminateIndicator = memo(
+  function CircularIndeterminateIndicator2({
+    animationDuration,
+    color,
+    strokeWidth,
+    trackColor,
+    width
+  }) {
+    const progress = useIndeterminateProgressAnimation(animationDuration);
+    const rotation = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "360deg"]
+    });
+    const center = width / 2;
+    const radius = (width - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const animatedStyle = useMemo(
+      () => ({ transform: [{ rotate: rotation }] }),
+      [rotation]
+    );
+    const strokeDasharray = useMemo(
+      () => [circumference * 0.25, circumference * 0.75],
+      [circumference]
+    );
+    return /* @__PURE__ */ jsx(Animated.View, { style: animatedStyle, children: /* @__PURE__ */ jsxs(Svg, { accessible: false, height: width, width, children: [
+      /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: center,
+          cy: center,
+          fill: "none",
+          r: radius,
+          stroke: trackColor,
+          strokeWidth
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Circle,
+        {
+          cx: center,
+          cy: center,
+          fill: "none",
+          r: radius,
+          stroke: color,
+          strokeDasharray,
+          strokeLinecap: "round",
+          strokeWidth
+        }
+      )
+    ] }) });
+  }
+);
+const styles = StyleSheet.create({
+  root: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  CircularProgress
+};
+//# sourceMappingURL=circular-progress.js.map

package/dist/components/atoms/circular-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/circular-progress.tsx"],"sourcesContent":["import type { ColorValue, ViewProps } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { Animated, StyleSheet, View } from \"react-native\";\nimport Svg, { Circle, G } from \"react-native-svg\";\n\nimport { useIndeterminateProgressAnimation } from \"../../hooks/use-indeterminate-progress-animation.hook\";\n\ninterface CircularProgressProps extends ViewProps {\n  animationDuration: number;\n  fraction: number;\n  indicatorColor: ColorValue;\n  indeterminate: boolean;\n  strokeWidth: number;\n  trackColor: ColorValue;\n  width: number;\n}\n\nexport const CircularProgress = memo(function CircularProgress({\n  animationDuration,\n  fraction,\n  indicatorColor,\n  indeterminate,\n  strokeWidth,\n  style,\n  trackColor,\n  width,\n  ...props\n}: CircularProgressProps) {\n  const rootStyle = useMemo(\n    () => [styles.root, { height: width, width }, style],\n    [style, width],\n  );\n\n  return (\n    <View {...props} style={rootStyle}>\n      {indeterminate ? (\n        <CircularIndeterminateIndicator\n          animationDuration={animationDuration}\n          color={indicatorColor}\n          strokeWidth={strokeWidth}\n          trackColor={trackColor}\n          width={width}\n        />\n      ) : (\n        <ProgressCircle\n          color={indicatorColor}\n          fraction={fraction}\n          strokeWidth={strokeWidth}\n          trackColor={trackColor}\n          width={width}\n        />\n      )}\n    </View>\n  );\n});\n\ninterface ProgressCircleProps {\n  color: ColorValue;\n  fraction: number;\n  strokeWidth: number;\n  trackColor: ColorValue;\n  width: number;\n}\n\nconst ProgressCircle = memo(function ProgressCircle({\n  color,\n  fraction,\n  strokeWidth,\n  trackColor,\n  width,\n}: ProgressCircleProps) {\n  const center = width / 2;\n  const radius = (width - strokeWidth) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDasharray = useMemo(\n    () => [circumference, circumference],\n    [circumference],\n  );\n\n  return (\n    <Svg accessible={false} height={width} width={width}>\n      <Circle\n        cx={center}\n        cy={center}\n        fill=\"none\"\n        r={radius}\n        stroke={trackColor}\n        strokeWidth={strokeWidth}\n      />\n      <G origin={`${center}, ${center}`} rotation={-90}>\n        <Circle\n          cx={center}\n          cy={center}\n          fill=\"none\"\n          r={radius}\n          stroke={color}\n          strokeDasharray={strokeDasharray}\n          strokeDashoffset={circumference * (1 - fraction)}\n          strokeLinecap={fraction === 0 ? \"butt\" : \"round\"}\n          strokeWidth={strokeWidth}\n        />\n      </G>\n    </Svg>\n  );\n});\n\ninterface CircularIndeterminateIndicatorProps {\n  animationDuration: number;\n  color: ColorValue;\n  strokeWidth: number;\n  trackColor: ColorValue;\n  width: number;\n}\n\nconst CircularIndeterminateIndicator = memo(\n  function CircularIndeterminateIndicator({\n    animationDuration,\n    color,\n    strokeWidth,\n    trackColor,\n    width,\n  }: CircularIndeterminateIndicatorProps) {\n    const progress = useIndeterminateProgressAnimation(animationDuration);\n    const rotation = progress.interpolate({\n      inputRange: [0, 1],\n      outputRange: [\"0deg\", \"360deg\"],\n    });\n    const center = width / 2;\n    const radius = (width - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const animatedStyle = useMemo(\n      () => ({ transform: [{ rotate: rotation }] }),\n      [rotation],\n    );\n    const strokeDasharray = useMemo(\n      () => [circumference * 0.25, circumference * 0.75],\n      [circumference],\n    );\n\n    return (\n      <Animated.View style={animatedStyle}>\n        <Svg accessible={false} height={width} width={width}>\n          <Circle\n            cx={center}\n            cy={center}\n            fill=\"none\"\n            r={radius}\n            stroke={trackColor}\n            strokeWidth={strokeWidth}\n          />\n          <Circle\n            cx={center}\n            cy={center}\n            fill=\"none\"\n            r={radius}\n            stroke={color}\n            strokeDasharray={strokeDasharray}\n            strokeLinecap=\"round\"\n            strokeWidth={strokeWidth}\n          />\n        </Svg>\n      </Animated.View>\n    );\n  },\n);\n\nconst styles = StyleSheet.create({\n  root: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n"],"mappings":"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","names":["CircularProgress","ProgressCircle","CircularIndeterminateIndicator"]}

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

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DividerProps } from '../../types/divider.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const Divider: react.MemoExoticComponent<({ accessible, color, inset, orientation, role, style, tone, ...props }: DividerProps) => react_jsx_runtime.JSX.Element>;
+
+export { Divider };

package/dist/components/atoms/divider.js

@@ -0,0 +1,50 @@
+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 "./view";
+const Divider = memo(function Divider2({
+  accessible = true,
+  color,
+  inset = "none",
+  orientation = "horizontal",
+  role = "separator",
+  style,
+  tone = "subtle",
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(
+    themedStyles,
+    { color, inset, orientation, tone },
+    [color, inset, orientation, tone]
+  );
+  const dividerStyle = useMemo(
+    () => [styles.divider, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.divider]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, accessible, role, style: dividerStyle });
+});
+function themedStyles(theme, props) {
+  const { color, inset, orientation, tone } = props;
+  const dividerTokens = theme.components.divider;
+  const insetStart = inset === "start" || inset === "both";
+  const insetEnd = inset === "end" || inset === "both";
+  return StyleSheet.create({
+    divider: {
+      alignSelf: "stretch",
+      flexShrink: 0,
+      height: orientation === "horizontal" ? dividerTokens.thickness : void 0,
+      marginBottom: orientation === "vertical" && insetEnd ? dividerTokens.inset : 0,
+      marginEnd: orientation === "horizontal" && insetEnd ? dividerTokens.inset : 0,
+      marginStart: orientation === "horizontal" && insetStart ? dividerTokens.inset : 0,
+      marginTop: orientation === "vertical" && insetStart ? dividerTokens.inset : 0,
+      width: orientation === "vertical" ? dividerTokens.thickness : void 0,
+      backgroundColor: color ?? dividerTokens.colors[tone]
+    }
+  });
+}
+export {
+  Divider
+};
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/divider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { DividerProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Divider = memo(function Divider({\n  accessible = true,\n  color,\n  inset = \"none\",\n  orientation = \"horizontal\",\n  role = \"separator\",\n  style,\n  tone = \"subtle\",\n  ...props\n}: DividerProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { color, inset, orientation, tone },\n    [color, inset, orientation, tone],\n  );\n  const dividerStyle = useMemo(\n    () => [styles.divider, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.divider],\n  );\n\n  return (\n    <View {...props} accessible={accessible} role={role} style={dividerStyle} />\n  );\n});\n\ninterface DividerThemeProps {\n  color: DividerProps[\"color\"];\n  inset: NonNullable<DividerProps[\"inset\"]>;\n  orientation: NonNullable<DividerProps[\"orientation\"]>;\n  tone: NonNullable<DividerProps[\"tone\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: DividerThemeProps) {\n  const { color, inset, orientation, tone } = props;\n  const dividerTokens = theme.components.divider;\n  const insetStart = inset === \"start\" || inset === \"both\";\n  const insetEnd = inset === \"end\" || inset === \"both\";\n\n  return StyleSheet.create({\n    divider: {\n      alignSelf: \"stretch\",\n      flexShrink: 0,\n      height:\n        orientation === \"horizontal\" ? dividerTokens.thickness : undefined,\n      marginBottom:\n        orientation === \"vertical\" && insetEnd ? dividerTokens.inset : 0,\n      marginEnd:\n        orientation === \"horizontal\" && insetEnd ? dividerTokens.inset : 0,\n      marginStart:\n        orientation === \"horizontal\" && insetStart ? dividerTokens.inset : 0,\n      marginTop:\n        orientation === \"vertical\" && insetStart ? dividerTokens.inset : 0,\n      width: orientation === \"vertical\" ? dividerTokens.thickness : undefined,\n      backgroundColor: color ?? dividerTokens.colors[tone],\n    },\n  });\n}\n"],"mappings":"AA+BI;AA/BJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,OAAO,OAAO,aAAa,KAAK;AAAA,IAClC,CAAC,OAAO,OAAO,aAAa,IAAI;AAAA,EAClC;AACA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,SAAS,qBAAqB,KAAK;AAAA,IACjD,CAAC,qBAAqB,OAAO,OAAO,OAAO;AAAA,EAC7C;AAEA,SACE,oBAAC,QAAM,GAAG,OAAO,YAAwB,MAAY,OAAO,cAAc;AAE9E,CAAC;AASD,SAAS,aAAa,OAAiB,OAA0B;AAC/D,QAAM,EAAE,OAAO,OAAO,aAAa,KAAK,IAAI;AAC5C,QAAM,gBAAgB,MAAM,WAAW;AACvC,QAAM,aAAa,UAAU,WAAW,UAAU;AAClD,QAAM,WAAW,UAAU,SAAS,UAAU;AAE9C,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QACE,gBAAgB,eAAe,cAAc,YAAY;AAAA,MAC3D,cACE,gBAAgB,cAAc,WAAW,cAAc,QAAQ;AAAA,MACjE,WACE,gBAAgB,gBAAgB,WAAW,cAAc,QAAQ;AAAA,MACnE,aACE,gBAAgB,gBAAgB,aAAa,cAAc,QAAQ;AAAA,MACrE,WACE,gBAAgB,cAAc,aAAa,cAAc,QAAQ;AAAA,MACnE,OAAO,gBAAgB,aAAa,cAAc,YAAY;AAAA,MAC9D,iBAAiB,SAAS,cAAc,OAAO,IAAI;AAAA,IACrD;AAAA,EACF,CAAC;AACH;","names":["Divider"]}

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

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { ActivityIndicator, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { Icon } from "@impulse-ui-native/icon/components/icon";
 import { useThemedStyles } from "@impulse-ui-native/theme";
 import { Pressable } from "./pressable";
+import { Spinner } from "./spinner";
 const IconButton = memo(function IconButton2({
   accessibilityState,
   size = "medium",
@@ -39,7 +40,7 @@ const IconButton = memo(function IconButton2({
       accessibilityState: resolvedAccessibilityState,
       disabled: interactionDisabled,
       style: iconButtonStyles,
-      children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: styles.icon.color }) : /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color })
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { accessible: false, color: styles.icon.color, size }) : /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color })
     }
   );
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\n\nexport const IconButton = memo(function IconButton({\n  accessibilityState,\n  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  loading = false,\n  style,\n  icon,\n  ...props\n}: PropsWithChildren<IconButtonProps>) {\n  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n    size,\n    variant,\n    disabled,\n  ]);\n\n  const interactionDisabled = disabled === true || loading;\n\n  const resolvedAccessibilityState = useMemo<AccessibilityState>(\n    () => ({\n      ...accessibilityState,\n      busy: loading,\n      disabled: interactionDisabled,\n    }),\n    [accessibilityState, interactionDisabled, loading],\n  );\n\n  const iconButtonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  return (\n    <Pressable\n      {...props}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={interactionDisabled}\n      style={iconButtonStyles}\n    >\n      {loading ? (\n        <ActivityIndicator color={styles.icon.color} />\n      ) : (\n        <Icon size={size} icon={icon} color={styles.icon.color} />\n      )}\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n  const { size, variant, disabled } = props;\n\n  const iconButtonTokens = theme.components.iconButton;\n  const sizeTokens = iconButtonTokens.sizes[size];\n  const variantTokens = iconButtonTokens.variants[variant];\n\n  return StyleSheet.create({\n    button: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n\n      height: sizeTokens.size,\n      width: sizeTokens.size,\n      padding: sizeTokens.padding,\n\n      borderWidth: iconButtonTokens.borderWidth,\n      borderRadius: iconButtonTokens.borderRadius,\n\n      borderColor: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    icon: {\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AAkDQ;AAjDR,SAAS,MAAyB,eAAe;AACjD,SAAS,mBAAmB,kBAAkB;AAE9C,SAAS,YAAY;AACrB,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAEnB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,SAAS,SAAS,GAAG;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,oBAAoB,qBAAqB,OAAO;AAAA,EACnD;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,MAEN,oBACC,oBAAC,qBAAkB,OAAO,OAAO,KAAK,OAAO,IAE7C,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,gBAAgB,iBAAiB,SAAS,OAAO;AAEvD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}
+{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\n\nexport const IconButton = memo(function IconButton({\n  accessibilityState,\n  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  loading = false,\n  style,\n  icon,\n  ...props\n}: PropsWithChildren<IconButtonProps>) {\n  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [\n    size,\n    variant,\n    disabled,\n  ]);\n\n  const interactionDisabled = disabled === true || loading;\n\n  const resolvedAccessibilityState = useMemo<AccessibilityState>(\n    () => ({\n      ...accessibilityState,\n      busy: loading,\n      disabled: interactionDisabled,\n    }),\n    [accessibilityState, interactionDisabled, loading],\n  );\n\n  const iconButtonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  return (\n    <Pressable\n      {...props}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={interactionDisabled}\n      style={iconButtonStyles}\n    >\n      {loading ? (\n        <Spinner accessible={false} color={styles.icon.color} size={size} />\n      ) : (\n        <Icon size={size} icon={icon} color={styles.icon.color} />\n      )}\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n  const { size, variant, disabled } = props;\n\n  const iconButtonTokens = theme.components.iconButton;\n  const sizeTokens = iconButtonTokens.sizes[size];\n  const variantTokens = iconButtonTokens.variants[variant];\n\n  return StyleSheet.create({\n    button: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n\n      height: sizeTokens.size,\n      width: sizeTokens.size,\n      padding: sizeTokens.padding,\n\n      borderWidth: iconButtonTokens.borderWidth,\n      borderRadius: iconButtonTokens.borderRadius,\n\n      borderColor: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    icon: {\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AAmDQ;AAlDR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAEjB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,gBAAgB,cAAc,EAAE,MAAM,SAAS,SAAS,GAAG;AAAA,IACxE;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,oBAAoB,qBAAqB,OAAO;AAAA,EACnD;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,MAEN,oBACC,oBAAC,WAAQ,YAAY,OAAO,OAAO,OAAO,KAAK,OAAO,MAAY,IAElE,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,gBAAgB,iBAAiB,SAAS,OAAO;AAEvD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}

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

@@ -1,18 +1,30 @@
+export { Avatar } from './avatar.mjs';
+export { BadgeRoot as Badge } from './badge/root.mjs';
 export { View } from './view.mjs';
 export { SafeAreaView } from './safe-area-view.mjs';
 export { Typography, TypographyComponent } from './typography.mjs';
 export { Button } from './button.mjs';
+export { Divider } from './divider.mjs';
 export { IconButton } from './icon-button.mjs';
 export { Pressable } from './pressable.mjs';
+export { Progress } from './progress.mjs';
+export { Spinner } from './spinner.mjs';
 export { Tag } from './tag.mjs';
 import 'react';
-import '@impulse-ui-native/theme';
-import 'react-native';
 import 'react/jsx-runtime';
+import '../../types/avatar.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+import '../../types/badge.types.mjs';
+import '../../types/control-components.types.mjs';
+import '@impulse-ui-native/icon/types';
+import '../../types/spinner.types.mjs';
+import '../../types/button.types.mjs';
 import '../../types/safe-area-view.types.mjs';
 import 'react-native-safe-area-context';
 import '../../types/typography.types.mjs';
-import '../../types/button.types.mjs';
+import '../../types/divider.types.mjs';
 import '../../types/icon-button.types.mjs';
-import '@impulse-ui-native/icon/types';
+import '../../types/progress.types.mjs';
 import '../../types/tag.types.mjs';

package/dist/components/atoms/index.js

@@ -1,15 +1,25 @@
+import { Avatar } from "./avatar";
+import { Badge } from "./badge";
 import { View } from "./view";
 import { SafeAreaView } from "./safe-area-view";
 import { Typography } from "./typography";
 import { Button } from "./button";
+import { Divider } from "./divider";
 import { IconButton } from "./icon-button";
 import { Pressable } from "./pressable";
+import { Progress } from "./progress";
+import { Spinner } from "./spinner";
 import { Tag } from "./tag";
 export {
+  Avatar,
+  Badge,
   Button,
+  Divider,
   IconButton,
   Pressable,
+  Progress,
   SafeAreaView,
+  Spinner,
   Tag,
   Typography,
   View

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport { Tag } from \"./tag\";\n"],"mappings":"AAAA,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAA4C;AACrD,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,WAAW;","names":[]}
+{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { Avatar } from \"./avatar\";\nexport { Badge } from \"./badge\";\nexport { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { Divider } from \"./divider\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport { Progress } from \"./progress\";\nexport { Spinner } from \"./spinner\";\nexport { Tag } from \"./tag\";\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAA4C;AACrD,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,WAAW;","names":[]}

package/dist/components/atoms/linear-progress.d.mts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ViewProps, ColorValue } from 'react-native';
+
+interface LinearProgressProps extends ViewProps {
+    animationDuration: number;
+    borderRadius: number;
+    fraction: number;
+    indicatorColor: ColorValue;
+    indeterminate: boolean;
+    indeterminateWidth: number;
+    trackColor: ColorValue;
+    trackHeight: number;
+}
+declare const LinearProgress: react.MemoExoticComponent<({ animationDuration, borderRadius, fraction, indicatorColor, indeterminate, indeterminateWidth, onLayout, style, trackColor, trackHeight, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element>;
+
+export { LinearProgress };

package/dist/components/atoms/linear-progress.js

@@ -0,0 +1,97 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Animated, I18nManager, StyleSheet, View } from "react-native";
+import { useIndeterminateProgressAnimation } from "../../hooks/use-indeterminate-progress-animation.hook";
+const LinearProgress = memo(function LinearProgress2({
+  animationDuration,
+  borderRadius,
+  fraction,
+  indicatorColor,
+  indeterminate,
+  indeterminateWidth,
+  onLayout,
+  style,
+  trackColor,
+  trackHeight,
+  ...props
+}) {
+  const [trackWidth, setTrackWidth] = useState(0);
+  const handleLayout = useCallback(
+    (event) => {
+      setTrackWidth(event.nativeEvent.layout.width);
+      onLayout?.(event);
+    },
+    [onLayout]
+  );
+  const trackStyle = useMemo(
+    () => [
+      styles.track,
+      {
+        backgroundColor: trackColor,
+        borderRadius,
+        height: trackHeight
+      },
+      style
+    ],
+    [borderRadius, style, trackColor, trackHeight]
+  );
+  const determinateIndicatorStyle = useMemo(
+    () => ({
+      alignSelf: I18nManager.isRTL ? "flex-end" : "flex-start",
+      backgroundColor: indicatorColor,
+      borderRadius,
+      height: trackHeight,
+      width: `${fraction * 100}%`
+    }),
+    [borderRadius, fraction, indicatorColor, trackHeight]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, onLayout: handleLayout, style: trackStyle, children: indeterminate ? /* @__PURE__ */ jsx(
+    LinearIndeterminateIndicator,
+    {
+      animationDuration,
+      borderRadius,
+      color: indicatorColor,
+      ratio: indeterminateWidth,
+      trackHeight,
+      trackWidth
+    }
+  ) : /* @__PURE__ */ jsx(View, { style: determinateIndicatorStyle }) });
+});
+const LinearIndeterminateIndicator = memo(
+  function LinearIndeterminateIndicator2({
+    animationDuration,
+    borderRadius,
+    color,
+    ratio,
+    trackHeight,
+    trackWidth
+  }) {
+    const progress = useIndeterminateProgressAnimation(animationDuration);
+    const indicatorWidth = trackWidth * ratio;
+    const translateX = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: I18nManager.isRTL ? [trackWidth, -indicatorWidth] : [-indicatorWidth, trackWidth]
+    });
+    const indicatorStyle = useMemo(
+      () => ({
+        backgroundColor: color,
+        borderRadius,
+        height: trackHeight,
+        transform: [{ translateX }],
+        width: `${ratio * 100}%`
+      }),
+      [borderRadius, color, ratio, trackHeight, translateX]
+    );
+    return /* @__PURE__ */ jsx(Animated.View, { style: indicatorStyle });
+  }
+);
+const styles = StyleSheet.create({
+  track: {
+    overflow: "hidden",
+    width: "100%"
+  }
+});
+export {
+  LinearProgress
+};
+//# sourceMappingURL=linear-progress.js.map

package/dist/components/atoms/linear-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/linear-progress.tsx"],"sourcesContent":["import type { ColorValue, LayoutChangeEvent, ViewProps } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { Animated, I18nManager, StyleSheet, View } from \"react-native\";\n\nimport { useIndeterminateProgressAnimation } from \"../../hooks/use-indeterminate-progress-animation.hook\";\n\ninterface LinearProgressProps extends ViewProps {\n  animationDuration: number;\n  borderRadius: number;\n  fraction: number;\n  indicatorColor: ColorValue;\n  indeterminate: boolean;\n  indeterminateWidth: number;\n  trackColor: ColorValue;\n  trackHeight: number;\n}\n\nexport const LinearProgress = memo(function LinearProgress({\n  animationDuration,\n  borderRadius,\n  fraction,\n  indicatorColor,\n  indeterminate,\n  indeterminateWidth,\n  onLayout,\n  style,\n  trackColor,\n  trackHeight,\n  ...props\n}: LinearProgressProps) {\n  const [trackWidth, setTrackWidth] = useState(0);\n\n  const handleLayout = useCallback(\n    (event: LayoutChangeEvent) => {\n      setTrackWidth(event.nativeEvent.layout.width);\n      onLayout?.(event);\n    },\n    [onLayout],\n  );\n\n  const trackStyle = useMemo(\n    () => [\n      styles.track,\n      {\n        backgroundColor: trackColor,\n        borderRadius,\n        height: trackHeight,\n      },\n      style,\n    ],\n    [borderRadius, style, trackColor, trackHeight],\n  );\n\n  const determinateIndicatorStyle = useMemo(\n    () => ({\n      alignSelf: I18nManager.isRTL\n        ? (\"flex-end\" as const)\n        : (\"flex-start\" as const),\n      backgroundColor: indicatorColor,\n      borderRadius,\n      height: trackHeight,\n      width: `${fraction * 100}%` as const,\n    }),\n    [borderRadius, fraction, indicatorColor, trackHeight],\n  );\n\n  return (\n    <View {...props} onLayout={handleLayout} style={trackStyle}>\n      {indeterminate ? (\n        <LinearIndeterminateIndicator\n          animationDuration={animationDuration}\n          borderRadius={borderRadius}\n          color={indicatorColor}\n          ratio={indeterminateWidth}\n          trackHeight={trackHeight}\n          trackWidth={trackWidth}\n        />\n      ) : (\n        <View style={determinateIndicatorStyle} />\n      )}\n    </View>\n  );\n});\n\ninterface LinearIndeterminateIndicatorProps {\n  animationDuration: number;\n  borderRadius: number;\n  color: ColorValue;\n  ratio: number;\n  trackHeight: number;\n  trackWidth: number;\n}\n\nconst LinearIndeterminateIndicator = memo(\n  function LinearIndeterminateIndicator({\n    animationDuration,\n    borderRadius,\n    color,\n    ratio,\n    trackHeight,\n    trackWidth,\n  }: LinearIndeterminateIndicatorProps) {\n    const progress = useIndeterminateProgressAnimation(animationDuration);\n    const indicatorWidth = trackWidth * ratio;\n    const translateX = progress.interpolate({\n      inputRange: [0, 1],\n      outputRange: I18nManager.isRTL\n        ? [trackWidth, -indicatorWidth]\n        : [-indicatorWidth, trackWidth],\n    });\n\n    const indicatorStyle = useMemo(\n      () => ({\n        backgroundColor: color,\n        borderRadius,\n        height: trackHeight,\n        transform: [{ translateX }],\n        width: `${ratio * 100}%` as const,\n      }),\n      [borderRadius, color, ratio, trackHeight, translateX],\n    );\n\n    return <Animated.View style={indicatorStyle} />;\n  },\n);\n\nconst styles = StyleSheet.create({\n  track: {\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n});\n"],"mappings":"AAqEQ;AApER,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,UAAU,aAAa,YAAY,YAAY;AAExD,SAAS,yCAAyC;AAa3C,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,QAAM,eAAe;AAAA,IACnB,CAAC,UAA6B;AAC5B,oBAAc,MAAM,YAAY,OAAO,KAAK;AAC5C,iBAAW,KAAK;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,QACE,iBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,OAAO,YAAY,WAAW;AAAA,EAC/C;AAEA,QAAM,4BAA4B;AAAA,IAChC,OAAO;AAAA,MACL,WAAW,YAAY,QAClB,aACA;AAAA,MACL,iBAAiB;AAAA,MACjB;AAAA,MACA,QAAQ;AAAA,MACR,OAAO,GAAG,WAAW,GAAG;AAAA,IAC1B;AAAA,IACA,CAAC,cAAc,UAAU,gBAAgB,WAAW;AAAA,EACtD;AAEA,SACE,oBAAC,QAAM,GAAG,OAAO,UAAU,cAAc,OAAO,YAC7C,0BACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF,IAEA,oBAAC,QAAK,OAAO,2BAA2B,GAE5C;AAEJ,CAAC;AAWD,MAAM,+BAA+B;AAAA,EACnC,SAASC,8BAA6B;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAsC;AACpC,UAAM,WAAW,kCAAkC,iBAAiB;AACpE,UAAM,iBAAiB,aAAa;AACpC,UAAM,aAAa,SAAS,YAAY;AAAA,MACtC,YAAY,CAAC,GAAG,CAAC;AAAA,MACjB,aAAa,YAAY,QACrB,CAAC,YAAY,CAAC,cAAc,IAC5B,CAAC,CAAC,gBAAgB,UAAU;AAAA,IAClC,CAAC;AAED,UAAM,iBAAiB;AAAA,MACrB,OAAO;AAAA,QACL,iBAAiB;AAAA,QACjB;AAAA,QACA,QAAQ;AAAA,QACR,WAAW,CAAC,EAAE,WAAW,CAAC;AAAA,QAC1B,OAAO,GAAG,QAAQ,GAAG;AAAA,MACvB;AAAA,MACA,CAAC,cAAc,OAAO,OAAO,aAAa,UAAU;AAAA,IACtD;AAEA,WAAO,oBAAC,SAAS,MAAT,EAAc,OAAO,gBAAgB;AAAA,EAC/C;AACF;AAEA,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF,CAAC;","names":["LinearProgress","LinearIndeterminateIndicator"]}

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

@@ -1,10 +1,10 @@
+import * as react_native from 'react-native';
 import * as react from 'react';
-import { PropsWithChildren } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PressableCoreProps } from '../../types/button.types.mjs';
-import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Pressable: react.MemoExoticComponent<({ children, disabled, pressedStyle, style, ...props }: PropsWithChildren<PressableCoreProps>) => react_jsx_runtime.JSX.Element>;
+declare const Pressable: react.NamedExoticComponent<PressableCoreProps & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<react_native.View>>;
 
 export { Pressable };

package/dist/components/atoms/pressable.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useCallback } from "react";
+import { forwardRef, memo, useCallback } from "react";
 import {
   Pressable as RNPressable,
   StyleSheet
@@ -10,49 +10,54 @@ import {
   useComponentsTokens,
   useStyleProps
 } from "@impulse-ui-native/theme";
-const Pressable = memo(function PressableCore({
-  children,
-  disabled,
-  pressedStyle,
-  style,
-  ...props
-}) {
-  const colors = useColors();
-  const tokens = useComponentsTokens();
-  const pressableTokens = tokens.pressable;
-  const extractedStyleProps = useStyleProps(props);
-  const pressableStyles = useCallback(
-    (state) => {
-      let overrideStyle;
-      if (typeof style === "function") {
-        overrideStyle = style(state);
-      } else {
-        overrideStyle = style;
-      }
-      return StyleSheet.flatten([
-        {
-          opacity: disabled ? pressableTokens.disabledOpacity : state.pressed ? pressableTokens.pressedOpacity : 1
-        },
-        getShadowStyle(props.shadow, props.shadowPosition, colors),
+const Pressable = memo(
+  forwardRef(function PressableCore({ children, disabled, pressedStyle, style, ...props }, ref) {
+    const colors = useColors();
+    const tokens = useComponentsTokens();
+    const pressableTokens = tokens.pressable;
+    const extractedStyleProps = useStyleProps(props);
+    const pressableStyles = useCallback(
+      (state) => {
+        let overrideStyle;
+        if (typeof style === "function") {
+          overrideStyle = style(state);
+        } else {
+          overrideStyle = style;
+        }
+        return StyleSheet.flatten([
+          {
+            opacity: disabled ? pressableTokens.disabledOpacity : state.pressed ? pressableTokens.pressedOpacity : 1
+          },
+          getShadowStyle(props.shadow, props.shadowPosition, colors),
+          extractedStyleProps,
+          overrideStyle,
+          state.pressed ? pressedStyle : void 0
+        ]);
+      },
+      [
+        style,
+        pressedStyle,
+        disabled,
         extractedStyleProps,
-        overrideStyle,
-        state.pressed ? pressedStyle : void 0
-      ]);
-    },
-    [
-      style,
-      pressedStyle,
-      disabled,
-      extractedStyleProps,
-      props.shadow,
-      props.shadowPosition,
-      colors,
-      pressableTokens.disabledOpacity,
-      pressableTokens.pressedOpacity
-    ]
-  );
-  return /* @__PURE__ */ jsx(RNPressable, { ...props, style: pressableStyles, disabled, children });
-});
+        props.shadow,
+        props.shadowPosition,
+        colors,
+        pressableTokens.disabledOpacity,
+        pressableTokens.pressedOpacity
+      ]
+    );
+    return /* @__PURE__ */ jsx(
+      RNPressable,
+      {
+        ...props,
+        ref,
+        style: pressableStyles,
+        disabled,
+        children
+      }
+    );
+  })
+);
 export {
   Pressable
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useCallback } from \"react\";\nimport {\n  PressableStateCallbackType,\n  Pressable as RNPressable,\n  StyleProp,\n  StyleSheet,\n  ViewStyle,\n} from \"react-native\";\n\nimport {\n  getShadowStyle,\n  useColors,\n  useComponentsTokens,\n  useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(function PressableCore({\n  children,\n  disabled,\n  pressedStyle,\n  style,\n  ...props\n}: PropsWithChildren<PressableCoreProps>) {\n  const colors = useColors();\n  const tokens = useComponentsTokens();\n  const pressableTokens = tokens.pressable;\n  const extractedStyleProps = useStyleProps(props);\n\n  const pressableStyles = useCallback(\n    (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n      let overrideStyle: StyleProp<ViewStyle>;\n\n      if (typeof style === \"function\") {\n        overrideStyle = style(state);\n      } else {\n        overrideStyle = style;\n      }\n\n      return StyleSheet.flatten([\n        {\n          opacity: disabled\n            ? pressableTokens.disabledOpacity\n            : state.pressed\n              ? pressableTokens.pressedOpacity\n              : 1,\n        },\n        getShadowStyle(props.shadow, props.shadowPosition, colors),\n        extractedStyleProps,\n        overrideStyle,\n        state.pressed ? pressedStyle : undefined,\n      ]);\n    },\n    [\n      style,\n      pressedStyle,\n      disabled,\n      extractedStyleProps,\n      props.shadow,\n      props.shadowPosition,\n      colors,\n      pressableTokens.disabledOpacity,\n      pressableTokens.pressedOpacity,\n    ],\n  );\n\n  return (\n    <RNPressable {...props} style={pressableStyles} disabled={disabled}>\n      {children}\n    </RNPressable>\n  );\n});\n"],"mappings":"AAoEI;AApEJ,SAAS,MAAyB,mBAAmB;AACrD;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY,KAAK,SAAS,cAAc;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0C;AACxC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,oBAAoB;AACnC,QAAM,kBAAkB,OAAO;AAC/B,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA4D;AAC3D,UAAI;AAEJ,UAAI,OAAO,UAAU,YAAY;AAC/B,wBAAgB,MAAM,KAAK;AAAA,MAC7B,OAAO;AACL,wBAAgB;AAAA,MAClB;AAEA,aAAO,WAAW,QAAQ;AAAA,QACxB;AAAA,UACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,QACR;AAAA,QACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,MAAM;AAAA,QACzD;AAAA,QACA;AAAA,QACA,MAAM,UAAU,eAAe;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE,oBAAC,eAAa,GAAG,OAAO,OAAO,iBAAiB,UAC7C,UACH;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type { ComponentRef, PropsWithChildren } from \"react\";\nimport { forwardRef, memo, useCallback } from \"react\";\nimport {\n  PressableStateCallbackType,\n  Pressable as RNPressable,\n  StyleProp,\n  StyleSheet,\n  ViewStyle,\n} from \"react-native\";\n\nimport {\n  getShadowStyle,\n  useColors,\n  useComponentsTokens,\n  useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(\n  forwardRef<\n    ComponentRef<typeof RNPressable>,\n    PropsWithChildren<PressableCoreProps>\n  >(function PressableCore(\n    { children, disabled, pressedStyle, style, ...props },\n    ref,\n  ) {\n    const colors = useColors();\n    const tokens = useComponentsTokens();\n    const pressableTokens = tokens.pressable;\n    const extractedStyleProps = useStyleProps(props);\n\n    const pressableStyles = useCallback(\n      (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n        let overrideStyle: StyleProp<ViewStyle>;\n\n        if (typeof style === \"function\") {\n          overrideStyle = style(state);\n        } else {\n          overrideStyle = style;\n        }\n\n        return StyleSheet.flatten([\n          {\n            opacity: disabled\n              ? pressableTokens.disabledOpacity\n              : state.pressed\n                ? pressableTokens.pressedOpacity\n                : 1,\n          },\n          getShadowStyle(props.shadow, props.shadowPosition, colors),\n          extractedStyleProps,\n          overrideStyle,\n          state.pressed ? pressedStyle : undefined,\n        ]);\n      },\n      [\n        style,\n        pressedStyle,\n        disabled,\n        extractedStyleProps,\n        props.shadow,\n        props.shadowPosition,\n        colors,\n        pressableTokens.disabledOpacity,\n        pressableTokens.pressedOpacity,\n      ],\n    );\n\n    return (\n      <RNPressable\n        {...props}\n        ref={ref}\n        style={pressableStyles}\n        disabled={disabled}\n      >\n        {children}\n      </RNPressable>\n    );\n  }),\n);\n"],"mappings":"AAsEM;AArEN,SAAS,YAAY,MAAM,mBAAmB;AAC9C;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY;AAAA,EACvB,WAGE,SAAS,cACT,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,MAAM,GACpD,KACA;AACA,UAAM,SAAS,UAAU;AACzB,UAAM,SAAS,oBAAoB;AACnC,UAAM,kBAAkB,OAAO;AAC/B,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAA4D;AAC3D,YAAI;AAEJ,YAAI,OAAO,UAAU,YAAY;AAC/B,0BAAgB,MAAM,KAAK;AAAA,QAC7B,OAAO;AACL,0BAAgB;AAAA,QAClB;AAEA,eAAO,WAAW,QAAQ;AAAA,UACxB;AAAA,YACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,UACR;AAAA,UACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,MAAM;AAAA,UACzD;AAAA,UACA;AAAA,UACA,MAAM,UAAU,eAAe;AAAA,QACjC,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAClB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AACH;","names":[]}

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

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ProgressProps } from '../../types/progress.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+
+declare const Progress: react.MemoExoticComponent<({ accessibilityRole, accessibilityState, accessibilityValue, accessible, color, max, min, size, tone, trackColor, value, variant, ...props }: ProgressProps) => react_jsx_runtime.JSX.Element>;
+
+export { Progress };