@impulse-ui-native/primitives 2.6.0 → 2.8.0

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

@@ -4,10 +4,13 @@ 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",
   variant = "filled",
   disabled,
+  loading = false,
   style,
   icon,
   ...props
@@ -17,11 +20,29 @@ const IconButton = memo(function IconButton2({
     variant,
     disabled
   ]);
+  const interactionDisabled = disabled === true || loading;
+  const resolvedAccessibilityState = useMemo(
+    () => ({
+      ...accessibilityState,
+      busy: loading,
+      disabled: interactionDisabled
+    }),
+    [accessibilityState, interactionDisabled, loading]
+  );
   const iconButtonStyles = useMemo(
     () => [styles.button, style],
     [styles.button, style]
   );
-  return /* @__PURE__ */ jsx(Pressable, { style: iconButtonStyles, disabled, ...props, children: /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color }) });
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...props,
+      accessibilityState: resolvedAccessibilityState,
+      disabled: interactionDisabled,
+      style: iconButtonStyles,
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { accessible: false, color: styles.icon.color, size }) : /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color })
+    }
+  );
 });
 function themedStyles(theme, props) {
   const { size, variant, disabled } = props;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/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  size = \"medium\",\n  variant = \"filled\",\n  disabled,\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 iconButtonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  return (\n    <Pressable style={iconButtonStyles} disabled={disabled} {...props}>\n      <Icon size={size} icon={icon} color={styles.icon.color} />\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":"AA8BM;AA9BN,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAEnB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;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,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE,oBAAC,aAAU,OAAO,kBAAkB,UAAqB,GAAG,OAC1D,8BAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO,GAC1D;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,27 @@
+export { Avatar } from './avatar.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/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/spinner.types.mjs';
 import '../../types/tag.types.mjs';

package/dist/components/atoms/index.js

@@ -1,15 +1,23 @@
+import { Avatar } from "./avatar";
 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,
   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 { 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,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 };

package/dist/components/atoms/progress.js

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+import { normalizeProgressValue } from "../../utils/progress.utils";
+import { CircularProgress } from "./circular-progress";
+import { LinearProgress } from "./linear-progress";
+const Progress = memo(function Progress2({
+  accessibilityRole = "progressbar",
+  accessibilityState,
+  accessibilityValue,
+  accessible = true,
+  color,
+  max = 100,
+  min = 0,
+  size = "medium",
+  tone = "primary",
+  trackColor,
+  value,
+  variant = "linear",
+  ...props
+}) {
+  const tokens = useComponentsTokens().progress;
+  const sizeTokens = tokens.sizes[size];
+  const colorTokens = tokens.colors[tone];
+  const normalized = useMemo(
+    () => normalizeProgressValue(value, min, max),
+    [max, min, value]
+  );
+  const indeterminate = normalized.value === void 0;
+  const resolvedAccessibilityState = useMemo(
+    () => ({
+      ...accessibilityState,
+      busy: indeterminate ? true : accessibilityState?.busy
+    }),
+    [accessibilityState, indeterminate]
+  );
+  const resolvedAccessibilityValue = useMemo(
+    () => ({
+      ...accessibilityValue,
+      max: indeterminate ? void 0 : normalized.max,
+      min: indeterminate ? void 0 : normalized.min,
+      now: indeterminate ? void 0 : normalized.value
+    }),
+    [accessibilityValue, indeterminate, normalized]
+  );
+  const commonProps = useMemo(
+    () => ({
+      ...props,
+      accessibilityRole,
+      accessibilityState: resolvedAccessibilityState,
+      accessibilityValue: resolvedAccessibilityValue,
+      accessible,
+      animationDuration: tokens.animationDuration,
+      fraction: normalized.fraction,
+      indicatorColor: color ?? colorTokens.indicatorColor,
+      indeterminate,
+      trackColor: trackColor ?? colorTokens.trackColor
+    }),
+    [
+      accessibilityRole,
+      accessible,
+      color,
+      colorTokens.indicatorColor,
+      colorTokens.trackColor,
+      indeterminate,
+      normalized.fraction,
+      props,
+      resolvedAccessibilityState,
+      resolvedAccessibilityValue,
+      tokens.animationDuration,
+      trackColor
+    ]
+  );
+  return variant === "circular" ? /* @__PURE__ */ jsx(
+    CircularProgress,
+    {
+      ...commonProps,
+      strokeWidth: sizeTokens.circularStrokeWidth,
+      width: sizeTokens.circularSize
+    }
+  ) : /* @__PURE__ */ jsx(
+    LinearProgress,
+    {
+      ...commonProps,
+      borderRadius: tokens.borderRadius,
+      indeterminateWidth: tokens.indeterminateLinearWidth,
+      trackHeight: sizeTokens.linearHeight
+    }
+  );
+});
+export {
+  Progress
+};
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/progress.tsx"],"sourcesContent":["import type { AccessibilityState, AccessibilityValue } from \"react-native\";\nimport { memo, useMemo } from \"react\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ProgressProps } from \"../../types\";\nimport { normalizeProgressValue } from \"../../utils/progress.utils\";\nimport { CircularProgress } from \"./circular-progress\";\nimport { LinearProgress } from \"./linear-progress\";\n\nexport const Progress = memo(function Progress({\n  accessibilityRole = \"progressbar\",\n  accessibilityState,\n  accessibilityValue,\n  accessible = true,\n  color,\n  max = 100,\n  min = 0,\n  size = \"medium\",\n  tone = \"primary\",\n  trackColor,\n  value,\n  variant = \"linear\",\n  ...props\n}: ProgressProps) {\n  const tokens = useComponentsTokens().progress;\n  const sizeTokens = tokens.sizes[size];\n  const colorTokens = tokens.colors[tone];\n  const normalized = useMemo(\n    () => normalizeProgressValue(value, min, max),\n    [max, min, value],\n  );\n  const indeterminate = normalized.value === undefined;\n\n  const resolvedAccessibilityState = useMemo<AccessibilityState>(\n    () => ({\n      ...accessibilityState,\n      busy: indeterminate ? true : accessibilityState?.busy,\n    }),\n    [accessibilityState, indeterminate],\n  );\n\n  const resolvedAccessibilityValue = useMemo<AccessibilityValue>(\n    () => ({\n      ...accessibilityValue,\n      max: indeterminate ? undefined : normalized.max,\n      min: indeterminate ? undefined : normalized.min,\n      now: indeterminate ? undefined : normalized.value,\n    }),\n    [accessibilityValue, indeterminate, normalized],\n  );\n\n  const commonProps = useMemo(\n    () => ({\n      ...props,\n      accessibilityRole,\n      accessibilityState: resolvedAccessibilityState,\n      accessibilityValue: resolvedAccessibilityValue,\n      accessible,\n      animationDuration: tokens.animationDuration,\n      fraction: normalized.fraction,\n      indicatorColor: color ?? colorTokens.indicatorColor,\n      indeterminate,\n      trackColor: trackColor ?? colorTokens.trackColor,\n    }),\n    [\n      accessibilityRole,\n      accessible,\n      color,\n      colorTokens.indicatorColor,\n      colorTokens.trackColor,\n      indeterminate,\n      normalized.fraction,\n      props,\n      resolvedAccessibilityState,\n      resolvedAccessibilityValue,\n      tokens.animationDuration,\n      trackColor,\n    ],\n  );\n\n  return variant === \"circular\" ? (\n    <CircularProgress\n      {...commonProps}\n      strokeWidth={sizeTokens.circularStrokeWidth}\n      width={sizeTokens.circularSize}\n    />\n  ) : (\n    <LinearProgress\n      {...commonProps}\n      borderRadius={tokens.borderRadius}\n      indeterminateWidth={tokens.indeterminateLinearWidth}\n      trackHeight={sizeTokens.linearHeight}\n    />\n  );\n});\n"],"mappings":"AAkFI;AAjFJ,SAAS,MAAM,eAAe;AAE9B,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAExB,MAAM,WAAW,KAAK,SAASA,UAAS;AAAA,EAC7C,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAkB;AAChB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,cAAc,OAAO,OAAO,IAAI;AACtC,QAAM,aAAa;AAAA,IACjB,MAAM,uBAAuB,OAAO,KAAK,GAAG;AAAA,IAC5C,CAAC,KAAK,KAAK,KAAK;AAAA,EAClB;AACA,QAAM,gBAAgB,WAAW,UAAU;AAE3C,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM,gBAAgB,OAAO,oBAAoB;AAAA,IACnD;AAAA,IACA,CAAC,oBAAoB,aAAa;AAAA,EACpC;AAEA,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,KAAK,gBAAgB,SAAY,WAAW;AAAA,MAC5C,KAAK,gBAAgB,SAAY,WAAW;AAAA,MAC5C,KAAK,gBAAgB,SAAY,WAAW;AAAA,IAC9C;AAAA,IACA,CAAC,oBAAoB,eAAe,UAAU;AAAA,EAChD;AAEA,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB;AAAA,MACA,mBAAmB,OAAO;AAAA,MAC1B,UAAU,WAAW;AAAA,MACrB,gBAAgB,SAAS,YAAY;AAAA,MACrC;AAAA,MACA,YAAY,cAAc,YAAY;AAAA,IACxC;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,IACF;AAAA,EACF;AAEA,SAAO,YAAY,aACjB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAa,WAAW;AAAA,MACxB,OAAO,WAAW;AAAA;AAAA,EACpB,IAEA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAc,OAAO;AAAA,MACrB,oBAAoB,OAAO;AAAA,MAC3B,aAAa,WAAW;AAAA;AAAA,EAC1B;AAEJ,CAAC;","names":["Progress"]}

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

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SpinnerProps } from '../../types/spinner.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+
+declare const Spinner: react.MemoExoticComponent<({ accessibilityRole, accessibilityState, accessible, animating, color, hidesWhenStopped, size, style, tone, ...props }: SpinnerProps) => react_jsx_runtime.JSX.Element>;
+
+export { Spinner };

package/dist/components/atoms/spinner.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { useComponentsTokens } from "@impulse-ui-native/theme";
+const Spinner = memo(function Spinner2({
+  accessibilityRole = "progressbar",
+  accessibilityState,
+  accessible = true,
+  animating = true,
+  color,
+  hidesWhenStopped,
+  size = "medium",
+  style,
+  tone = "primary",
+  ...props
+}) {
+  const tokens = useComponentsTokens().spinner;
+  const resolvedSize = tokens.sizes[size];
+  const resolvedAccessibilityState = useMemo(
+    () => ({
+      ...accessibilityState,
+      busy: animating
+    }),
+    [accessibilityState, animating]
+  );
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      {
+        width: resolvedSize,
+        height: resolvedSize
+      },
+      style
+    ],
+    [resolvedSize, style]
+  );
+  const indicatorStyle = useMemo(
+    () => ({
+      transform: [{ scale: resolvedSize / tokens.baseSize }]
+    }),
+    [resolvedSize, tokens.baseSize]
+  );
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...props,
+      accessibilityRole,
+      accessibilityState: resolvedAccessibilityState,
+      accessible,
+      style: containerStyle,
+      children: /* @__PURE__ */ jsx(
+        ActivityIndicator,
+        {
+          accessible: false,
+          animating,
+          color: color ?? tokens.colors[tone],
+          hidesWhenStopped,
+          size: "small",
+          style: indicatorStyle
+        }
+      )
+    }
+  );
+});
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/spinner.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet, View } from \"react-native\";\n\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { SpinnerProps } from \"../../types\";\n\nexport const Spinner = memo(function Spinner({\n  accessibilityRole = \"progressbar\",\n  accessibilityState,\n  accessible = true,\n  animating = true,\n  color,\n  hidesWhenStopped,\n  size = \"medium\",\n  style,\n  tone = \"primary\",\n  ...props\n}: SpinnerProps) {\n  const tokens = useComponentsTokens().spinner;\n  const resolvedSize = tokens.sizes[size];\n\n  const resolvedAccessibilityState = useMemo<AccessibilityState>(\n    () => ({\n      ...accessibilityState,\n      busy: animating,\n    }),\n    [accessibilityState, animating],\n  );\n\n  const containerStyle = useMemo(\n    () => [\n      styles.container,\n      {\n        width: resolvedSize,\n        height: resolvedSize,\n      },\n      style,\n    ],\n    [resolvedSize, style],\n  );\n\n  const indicatorStyle = useMemo(\n    () => ({\n      transform: [{ scale: resolvedSize / tokens.baseSize }],\n    }),\n    [resolvedSize, tokens.baseSize],\n  );\n\n  return (\n    <View\n      {...props}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={resolvedAccessibilityState}\n      accessible={accessible}\n      style={containerStyle}\n    >\n      <ActivityIndicator\n        accessible={false}\n        animating={animating}\n        color={color ?? tokens.colors[tone]}\n        hidesWhenStopped={hidesWhenStopped}\n        size=\"small\"\n        style={indicatorStyle}\n      />\n    </View>\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n"],"mappings":"AA0DM;AAzDN,SAAS,MAAM,eAAe;AAC9B,SAAS,mBAAmB,YAAY,YAAY;AAEpD,SAAS,2BAA2B;AAI7B,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C,oBAAoB;AAAA,EACpB;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,eAAe,OAAO,MAAM,IAAI;AAEtC,QAAM,6BAA6B;AAAA,IACjC,OAAO;AAAA,MACL,GAAG;AAAA,MACH,MAAM;AAAA,IACR;AAAA,IACA,CAAC,oBAAoB,SAAS;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,QACE,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,KAAK;AAAA,EACtB;AAEA,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,WAAW,CAAC,EAAE,OAAO,eAAe,OAAO,SAAS,CAAC;AAAA,IACvD;AAAA,IACA,CAAC,cAAc,OAAO,QAAQ;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA,OAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ;AAAA,UACA,OAAO,SAAS,OAAO,OAAO,IAAI;AAAA,UAClC;AAAA,UACA,MAAK;AAAA,UACL,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,WAAW;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;","names":["Spinner"]}

package/dist/components/card/card.d.mts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CardRootProps, CardPressableProps, CardHeaderProps, CardContentProps, CardFooterProps, CardMediaProps } from '../../types/card.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const Card: {
+    Root: react.MemoExoticComponent<({ style, ...props }: CardRootProps) => react_jsx_runtime.JSX.Element>;
+    Pressable: react.MemoExoticComponent<({ accessibilityRole, accessibilityState, disabled, style, ...props }: CardPressableProps) => react_jsx_runtime.JSX.Element>;
+    Header: react.MemoExoticComponent<({ style, ...props }: CardHeaderProps) => react_jsx_runtime.JSX.Element>;
+    Content: react.MemoExoticComponent<({ style, ...props }: CardContentProps) => react_jsx_runtime.JSX.Element>;
+    Footer: react.MemoExoticComponent<({ style, ...props }: CardFooterProps) => react_jsx_runtime.JSX.Element>;
+    Media: react.MemoExoticComponent<({ style, ...props }: CardMediaProps) => react_jsx_runtime.JSX.Element>;
+};
+
+export { Card };

package/dist/components/card/card.js

@@ -0,0 +1,18 @@
+import { CardContent } from "./content";
+import { CardFooter } from "./footer";
+import { CardHeader } from "./header";
+import { CardMedia } from "./media";
+import { CardPressable } from "./pressable";
+import { CardRoot } from "./root";
+const Card = {
+  Root: CardRoot,
+  Pressable: CardPressable,
+  Header: CardHeader,
+  Content: CardContent,
+  Footer: CardFooter,
+  Media: CardMedia
+};
+export {
+  Card
+};
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card/card.tsx"],"sourcesContent":["import { CardContent } from \"./content\";\nimport { CardFooter } from \"./footer\";\nimport { CardHeader } from \"./header\";\nimport { CardMedia } from \"./media\";\nimport { CardPressable } from \"./pressable\";\nimport { CardRoot } from \"./root\";\n\nexport const Card = {\n  Root: CardRoot,\n  Pressable: CardPressable,\n  Header: CardHeader,\n  Content: CardContent,\n  Footer: CardFooter,\n  Media: CardMedia,\n};\n"],"mappings":"AAAA,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AAElB,MAAM,OAAO;AAAA,EAClB,MAAM;AAAA,EACN,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;","names":[]}