@impulse-ui-native/primitives 2.7.0 → 2.8.0

package/README.md

@@ -10,10 +10,10 @@ pnpm add @impulse-ui-native/primitives
 
 Render primitives inside `ThemeProvider` from `@impulse-ui-native/theme`.
 
-`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root:
+`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Circular `Progress` requires `react-native-svg`:
 
 ```sh
-pnpm add react-native-safe-area-context
+pnpm add react-native-safe-area-context react-native-svg
 ```
 
 ## Main exports
@@ -22,6 +22,11 @@ pnpm add react-native-safe-area-context
 - `SafeAreaView` maps safe-area edges to the theme spacing scale.
 - `Typography` exposes named text presets such as `DisplayLarge`, `Title1`, `Body`, `Caption`, and `Code`.
 - `Button`, `IconButton`, `Pressable`, and `Tag` provide themed interaction primitives.
+- `Spinner` provides token-aware sizes and semantic colors for indeterminate loading states.
+- `Progress` provides accessible linear and circular determinate or indeterminate progress.
+- `Card` provides compound `Root`, `Pressable`, `Header`, `Content`, `Footer`, and `Media` surfaces.
+- `Divider` separates content horizontally or vertically with logical insets and semantic colors.
+- `Avatar` represents identity with shared visual variants, images, initials, custom fallbacks, and semantic presence status.
 - `Control` is a compound control system with `Provider`, `Root`, `Label`, `Container`, `Addon`, `Input`, `Placeholder`, `Value`, `Loader`, and `Error` parts.
 - `createPreset` creates reusable themed typography presets.
 - Public prop types describe every primitive and control part.
@@ -29,13 +34,44 @@ pnpm add react-native-safe-area-context
 ## Example
 
 ```tsx
-import { Button, Tag, Typography, View } from "@impulse-ui-native/primitives";
+import {
+  Avatar,
+  Button,
+  Card,
+  Divider,
+  Progress,
+  Spinner,
+  Tag,
+  Typography,
+  View,
+} from "@impulse-ui-native/primitives";
 
 export function ProfileSummary() {
   return (
     <View gap="md" padding="lg">
       <Typography.Title3>Profile</Typography.Title3>
+      <Avatar
+        initials="AK"
+        status="online"
+        variant="soft"
+        accessibilityLabel="Alex Kim, online"
+      />
       <Tag label="Active" color="success" />
+      <Spinner
+        size="small"
+        tone="secondary"
+        accessibilityLabel="Loading profile"
+      />
+      <Progress value={65} accessibilityLabel="Profile completion" />
+      <Card.Root>
+        <Card.Header>
+          <Typography.Title4>Account activity</Typography.Title4>
+        </Card.Header>
+        <Card.Content>
+          <Typography.Body>Three new updates are available.</Typography.Body>
+        </Card.Content>
+      </Card.Root>
+      <Divider inset="both" />
       <Button variant="filled" onPress={() => {}}>
         Continue
       </Button>
@@ -47,3 +83,13 @@ export function ProfileSummary() {
 Use the compound `Control` when building a custom field that should share the same label, addon, error, size, and variant behavior as `Input` and `Select`.
 
 `Button` and `IconButton` replace their content with a loading indicator when `loading` is true. Loading controls block interaction and expose their busy state to assistive technologies. Provide an `accessibilityLabel` for every `IconButton` because its icon does not supply an accessible name.
+
+`Spinner` defaults to the primary theme tone and medium size. Use `tone="inverse"` on inverse surfaces, or provide `color` when the indicator must match contextual content. Give standalone spinners an `accessibilityLabel` that describes what is loading.
+
+`Progress` defaults to a medium linear indicator. Provide `value` for determinate progress or omit it for an indeterminate animation. Values are clamped between `min` and `max`, defaulting to `0` and `100`. Indeterminate animation respects the platform reduced-motion preference. Give each progress indicator an `accessibilityLabel` describing the operation.
+
+Use `Card.Root` for a static surface and `Card.Pressable` when the whole card has one action. Pressable cards default to the `button` accessibility role; override it when another role such as `link` is more accurate and provide an accessible label. Avoid placing independently pressable controls inside `Card.Pressable`; use `Card.Root` with actions in `Card.Footer` instead.
+
+`Divider` defaults to a subtle horizontal separator and exposes `role="separator"`. Use logical start/end insets to preserve RTL alignment, switch to vertical orientation inside a container with a defined height, and use `color` only when the semantic tones do not fit the surrounding surface.
+
+`Avatar` supports the same `filled`, `outlined`, `soft`, `ghost`, and `plain` variants as the control family. It renders fallback content below its image so initials or a custom fallback remain visible while the image loads or when it fails. Provide an `accessibilityLabel` when the represented identity is meaningful, and include presence status in that label when `status` conveys useful information. Avatar grouping and overflow counts are intentionally handled separately.

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

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AvatarProps } from '../../types/avatar.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../types/view.types.mjs';
+
+declare const Avatar: react.MemoExoticComponent<({ accessibilityLabel, accessible, fallback, imageProps, initials, role, size, source, status, statusColor, style, variant, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element>;
+
+export { Avatar };

package/dist/components/atoms/avatar.js

@@ -0,0 +1,161 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Image, StyleSheet, Text } from "react-native";
+import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { View } from "./view";
+const Avatar = memo(function Avatar2({
+  accessibilityLabel,
+  accessible,
+  fallback,
+  imageProps,
+  initials,
+  role,
+  size = "medium",
+  source,
+  status,
+  statusColor,
+  style,
+  variant = "filled",
+  ...props
+}) {
+  const tokens = useComponentsTokens().avatar;
+  const extractedStyleProps = useStyleProps(props);
+  const sizeTokens = tokens.sizes[size];
+  const variantTokens = tokens.variants[variant];
+  const resolvedAccessible = accessible ?? Boolean(accessibilityLabel);
+  const resolvedRole = role ?? (resolvedAccessible ? "img" : "none");
+  const sourceKey = useMemo(() => JSON.stringify(source), [source]);
+  const containerStyle = useMemo(
+    () => [
+      styles.container,
+      { height: sizeTokens.size, width: sizeTokens.size },
+      extractedStyleProps,
+      style
+    ],
+    [extractedStyleProps, sizeTokens.size, style]
+  );
+  const contentStyle = useMemo(
+    () => [
+      styles.content,
+      {
+        backgroundColor: variantTokens.backgroundColor,
+        borderColor: variantTokens.borderColor,
+        borderRadius: sizeTokens.size / 2,
+        borderWidth: tokens.borderWidth
+      }
+    ],
+    [sizeTokens.size, tokens.borderWidth, variantTokens]
+  );
+  const initialsStyle = useMemo(
+    () => [
+      styles.initials,
+      {
+        color: variantTokens.color,
+        fontFamily: tokens.fontFamily,
+        fontSize: sizeTokens.fontSize
+      }
+    ],
+    [sizeTokens.fontSize, tokens.fontFamily, variantTokens.color]
+  );
+  const statusStyle = useMemo(
+    () => [
+      styles.status,
+      {
+        backgroundColor: statusColor ?? (status ? tokens.statusColors[status] : void 0),
+        borderColor: tokens.statusBorderColor,
+        borderRadius: sizeTokens.statusSize / 2,
+        borderWidth: sizeTokens.statusBorderWidth,
+        height: sizeTokens.statusSize,
+        width: sizeTokens.statusSize
+      }
+    ],
+    [sizeTokens, status, statusColor, tokens]
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...props,
+      accessibilityLabel,
+      accessible: resolvedAccessible,
+      role: resolvedRole,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: contentStyle, children: [
+          fallback ?? (initials ? /* @__PURE__ */ jsx(Text, { style: initialsStyle, children: initials }) : null),
+          source ? /* @__PURE__ */ jsx(
+            AvatarImageLayer,
+            {
+              imageProps,
+              source
+            },
+            sourceKey
+          ) : null
+        ] }),
+        status ? /* @__PURE__ */ jsx(View, { accessible: false, style: statusStyle }) : null
+      ]
+    }
+  );
+});
+const AvatarImageLayer = memo(function AvatarImageLayer2({
+  imageProps,
+  source
+}) {
+  const [hasError, setHasError] = useState(false);
+  const handleError = useCallback(
+    (event) => {
+      setHasError(true);
+      imageProps?.onError?.(event);
+    },
+    [imageProps]
+  );
+  const imageStyle = useMemo(
+    () => [styles.image, imageProps?.style],
+    [imageProps?.style]
+  );
+  if (hasError) return null;
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      resizeMode: "cover",
+      ...imageProps,
+      accessible: false,
+      onError: handleError,
+      source,
+      style: imageStyle
+    }
+  );
+});
+const styles = StyleSheet.create({
+  container: {
+    flexShrink: 0,
+    position: "relative"
+  },
+  content: {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    overflow: "hidden",
+    width: "100%"
+  },
+  image: {
+    bottom: 0,
+    height: "100%",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    width: "100%"
+  },
+  initials: {
+    textAlign: "center"
+  },
+  status: {
+    bottom: 0,
+    position: "absolute",
+    right: 0
+  }
+});
+export {
+  Avatar
+};
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/atoms/avatar.tsx"],"sourcesContent":["import type { ImageProps } from \"react-native\";\nimport { memo, useCallback, useMemo, useState } from \"react\";\nimport { Image, StyleSheet, Text } from \"react-native\";\n\nimport { useComponentsTokens, useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { AvatarProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Avatar = memo(function Avatar({\n  accessibilityLabel,\n  accessible,\n  fallback,\n  imageProps,\n  initials,\n  role,\n  size = \"medium\",\n  source,\n  status,\n  statusColor,\n  style,\n  variant = \"filled\",\n  ...props\n}: AvatarProps) {\n  const tokens = useComponentsTokens().avatar;\n  const extractedStyleProps = useStyleProps(props);\n  const sizeTokens = tokens.sizes[size];\n  const variantTokens = tokens.variants[variant];\n  const resolvedAccessible = accessible ?? Boolean(accessibilityLabel);\n  const resolvedRole = role ?? (resolvedAccessible ? \"img\" : \"none\");\n  const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n  const containerStyle = useMemo(\n    () => [\n      styles.container,\n      { height: sizeTokens.size, width: sizeTokens.size },\n      extractedStyleProps,\n      style,\n    ],\n    [extractedStyleProps, sizeTokens.size, style],\n  );\n\n  const contentStyle = useMemo(\n    () => [\n      styles.content,\n      {\n        backgroundColor: variantTokens.backgroundColor,\n        borderColor: variantTokens.borderColor,\n        borderRadius: sizeTokens.size / 2,\n        borderWidth: tokens.borderWidth,\n      },\n    ],\n    [sizeTokens.size, tokens.borderWidth, variantTokens],\n  );\n\n  const initialsStyle = useMemo(\n    () => [\n      styles.initials,\n      {\n        color: variantTokens.color,\n        fontFamily: tokens.fontFamily,\n        fontSize: sizeTokens.fontSize,\n      },\n    ],\n    [sizeTokens.fontSize, tokens.fontFamily, variantTokens.color],\n  );\n\n  const statusStyle = useMemo(\n    () => [\n      styles.status,\n      {\n        backgroundColor:\n          statusColor ?? (status ? tokens.statusColors[status] : undefined),\n        borderColor: tokens.statusBorderColor,\n        borderRadius: sizeTokens.statusSize / 2,\n        borderWidth: sizeTokens.statusBorderWidth,\n        height: sizeTokens.statusSize,\n        width: sizeTokens.statusSize,\n      },\n    ],\n    [sizeTokens, status, statusColor, tokens],\n  );\n\n  return (\n    <View\n      {...props}\n      accessibilityLabel={accessibilityLabel}\n      accessible={resolvedAccessible}\n      role={resolvedRole}\n      style={containerStyle}\n    >\n      <View style={contentStyle}>\n        {fallback ??\n          (initials ? <Text style={initialsStyle}>{initials}</Text> : null)}\n\n        {source ? (\n          <AvatarImageLayer\n            key={sourceKey}\n            imageProps={imageProps}\n            source={source}\n          />\n        ) : null}\n      </View>\n\n      {status ? <View accessible={false} style={statusStyle} /> : null}\n    </View>\n  );\n});\n\ninterface AvatarImageLayerProps {\n  imageProps: AvatarProps[\"imageProps\"];\n  source: NonNullable<AvatarProps[\"source\"]>;\n}\n\nconst AvatarImageLayer = memo(function AvatarImageLayer({\n  imageProps,\n  source,\n}: AvatarImageLayerProps) {\n  const [hasError, setHasError] = useState(false);\n\n  const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\n    (event) => {\n      setHasError(true);\n      imageProps?.onError?.(event);\n    },\n    [imageProps],\n  );\n\n  const imageStyle = useMemo(\n    () => [styles.image, imageProps?.style],\n    [imageProps?.style],\n  );\n\n  if (hasError) return null;\n\n  return (\n    <Image\n      resizeMode=\"cover\"\n      {...imageProps}\n      accessible={false}\n      onError={handleError}\n      source={source}\n      style={imageStyle}\n    />\n  );\n});\n\nconst styles = StyleSheet.create({\n  container: {\n    flexShrink: 0,\n    position: \"relative\",\n  },\n  content: {\n    alignItems: \"center\",\n    height: \"100%\",\n    justifyContent: \"center\",\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n  image: {\n    bottom: 0,\n    height: \"100%\",\n    left: 0,\n    position: \"absolute\",\n    right: 0,\n    top: 0,\n    width: \"100%\",\n  },\n  initials: {\n    textAlign: \"center\",\n  },\n  status: {\n    bottom: 0,\n    position: \"absolute\",\n    right: 0,\n  },\n});\n"],"mappings":"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","names":["Avatar","AvatarImageLayer"]}

package/dist/components/atoms/button.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { ActivityIndicator, StyleSheet } from "react-native";
+import { StyleSheet } from "react-native";
 import { useThemedStyles } from "@impulse-ui-native/theme";
 import { Pressable } from "./pressable";
+import { Spinner } from "./spinner";
 import { Typography } from "./typography";
 const Button = memo(function Button2({
   accessibilityState,
@@ -34,10 +35,10 @@ const Button = memo(function Button2({
   );
   const content = useMemo(() => {
     if (loading) {
-      return /* @__PURE__ */ jsx(ActivityIndicator, { color: styles.text.color });
+      return /* @__PURE__ */ jsx(Spinner, { accessible: false, color: styles.text.color, size });
     }
     return typeof children === "string" ? /* @__PURE__ */ jsx(Typography.Master, { style: styles.text, children }) : children;
-  }, [children, loading, styles.text]);
+  }, [children, loading, size, styles.text]);
   return /* @__PURE__ */ jsx(
     Pressable,
     {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { ActivityIndicator, StyleSheet } from \"react-native\";\n\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n  accessibilityState,\n  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  loading = false,\n  children,\n  style,\n  ...props\n}: PropsWithChildren<ButtonProps>) {\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 buttonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  const content = useMemo(() => {\n    if (loading) {\n      return <ActivityIndicator color={styles.text.color} />;\n    }\n\n    return typeof children === \"string\" ? (\n      <Typography.Master style={styles.text}>{children}</Typography.Master>\n    ) : (\n      children\n    );\n  }, [children, loading, styles.text]);\n\n  return (\n    <Pressable\n      {...props}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={interactionDisabled}\n      style={buttonStyles}\n    >\n      {content}\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n  const { size, variant, disabled } = props;\n\n  const buttonTokens = theme.components.button;\n  const sizeTokens = buttonTokens.sizes[size];\n  const variantTokens = buttonTokens.variants[variant];\n\n  return StyleSheet.create({\n    button: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n\n      height: sizeTokens.height,\n      paddingVertical: sizeTokens.paddingVertical,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderWidth: buttonTokens.borderWidth,\n      borderRadius: buttonTokens.borderRadius,\n\n      borderColor: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    text: {\n      width: \"100%\",\n      textAlign: \"center\",\n\n      fontSize: sizeTokens.fontSize,\n\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AA4Ca;AA3Cb,SAAS,MAAyB,eAAe;AACjD,SAAS,mBAAmB,kBAAkB;AAE9C,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,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,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,qBAAkB,OAAO,OAAO,KAAK,OAAO;AAAA,IACtD;AAEA,WAAO,OAAO,aAAa,WACzB,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,MAAO,UAAS,IAEjD;AAAA,EAEJ,GAAG,CAAC,UAAU,SAAS,OAAO,IAAI,CAAC;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,iBAAiB,WAAW;AAAA,MAC5B,mBAAmB,WAAW;AAAA,MAE9B,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,MAE3B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["Button"]}
+{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import type { AccessibilityState } from \"react-native\";\nimport { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { AppTheme, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\nimport { Typography } from \"./typography\";\n\nexport const Button = memo(function Button({\n  accessibilityState,\n  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  loading = false,\n  children,\n  style,\n  ...props\n}: PropsWithChildren<ButtonProps>) {\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 buttonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  const content = useMemo(() => {\n    if (loading) {\n      return (\n        <Spinner accessible={false} color={styles.text.color} size={size} />\n      );\n    }\n\n    return typeof children === \"string\" ? (\n      <Typography.Master style={styles.text}>{children}</Typography.Master>\n    ) : (\n      children\n    );\n  }, [children, loading, size, styles.text]);\n\n  return (\n    <Pressable\n      {...props}\n      accessibilityState={resolvedAccessibilityState}\n      disabled={interactionDisabled}\n      style={buttonStyles}\n    >\n      {content}\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n  const { size, variant, disabled } = props;\n\n  const buttonTokens = theme.components.button;\n  const sizeTokens = buttonTokens.sizes[size];\n  const variantTokens = buttonTokens.variants[variant];\n\n  return StyleSheet.create({\n    button: {\n      alignItems: \"center\",\n      justifyContent: \"center\",\n\n      height: sizeTokens.height,\n      paddingVertical: sizeTokens.paddingVertical,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      borderWidth: buttonTokens.borderWidth,\n      borderRadius: buttonTokens.borderRadius,\n\n      borderColor: disabled\n        ? variantTokens.disabledBorderColor\n        : variantTokens.borderColor,\n\n      backgroundColor: disabled\n        ? variantTokens.disabledBackgroundColor\n        : variantTokens.backgroundColor,\n    },\n\n    text: {\n      width: \"100%\",\n      textAlign: \"center\",\n\n      fontSize: sizeTokens.fontSize,\n\n      color: disabled ? variantTokens.disabledColor : variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AA8CQ;AA7CR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAmB,uBAAuB;AAG1C,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAEpB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,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,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aACE,oBAAC,WAAQ,YAAY,OAAO,OAAO,OAAO,KAAK,OAAO,MAAY;AAAA,IAEtE;AAEA,WAAO,OAAO,aAAa,WACzB,oBAAC,WAAW,QAAX,EAAkB,OAAO,OAAO,MAAO,UAAS,IAEjD;AAAA,EAEJ,GAAG,CAAC,UAAU,SAAS,MAAM,OAAO,IAAI,CAAC;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAoB;AAAA,MACpB,UAAU;AAAA,MACV,OAAO;AAAA,MAEN;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,SAAS,SAAS,IAAI;AAEpC,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,iBAAiB,WAAW;AAAA,MAC5B,mBAAmB,WAAW;AAAA,MAE9B,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,MAE3B,aAAa,WACT,cAAc,sBACd,cAAc;AAAA,MAElB,iBAAiB,WACb,cAAc,0BACd,cAAc;AAAA,IACpB;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,WAAW,cAAc,gBAAgB,cAAc;AAAA,IAChE;AAAA,EACF,CAAC;AACH;","names":["Button"]}

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

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ViewProps, ColorValue } from 'react-native';
+
+interface CircularProgressProps extends ViewProps {
+    animationDuration: number;
+    fraction: number;
+    indicatorColor: ColorValue;
+    indeterminate: boolean;
+    strokeWidth: number;
+    trackColor: ColorValue;
+    width: number;
+}
+declare const CircularProgress: react.MemoExoticComponent<({ animationDuration, fraction, indicatorColor, indeterminate, strokeWidth, style, trackColor, width, ...props }: CircularProgressProps) => react_jsx_runtime.JSX.Element>;
+
+export { CircularProgress };

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,48 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useComponentsTokens, useStyleProps } 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 tokens = useComponentsTokens().divider;
+  const extractedStyleProps = useStyleProps(props);
+  const dividerStyle = useMemo(() => {
+    const insetStart = inset === "start" || inset === "both";
+    const insetEnd = inset === "end" || inset === "both";
+    return StyleSheet.flatten([
+      styles.base,
+      orientation === "horizontal" ? {
+        height: tokens.thickness,
+        marginEnd: insetEnd ? tokens.inset : 0,
+        marginStart: insetStart ? tokens.inset : 0
+      } : {
+        marginBottom: insetEnd ? tokens.inset : 0,
+        marginTop: insetStart ? tokens.inset : 0,
+        width: tokens.thickness
+      },
+      { backgroundColor: color ?? tokens.colors[tone] },
+      extractedStyleProps,
+      style
+    ]);
+  }, [color, extractedStyleProps, inset, orientation, style, tone, tokens]);
+  return /* @__PURE__ */ jsx(View, { ...props, accessible, role, style: dividerStyle });
+});
+const styles = StyleSheet.create({
+  base: {
+    alignSelf: "stretch",
+    flexShrink: 0
+  }
+});
+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 { useComponentsTokens, useStyleProps } 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 tokens = useComponentsTokens().divider;\n  const extractedStyleProps = useStyleProps(props);\n\n  const dividerStyle = useMemo(() => {\n    const insetStart = inset === \"start\" || inset === \"both\";\n    const insetEnd = inset === \"end\" || inset === \"both\";\n\n    return StyleSheet.flatten([\n      styles.base,\n      orientation === \"horizontal\"\n        ? {\n            height: tokens.thickness,\n            marginEnd: insetEnd ? tokens.inset : 0,\n            marginStart: insetStart ? tokens.inset : 0,\n          }\n        : {\n            marginBottom: insetEnd ? tokens.inset : 0,\n            marginTop: insetStart ? tokens.inset : 0,\n            width: tokens.thickness,\n          },\n      { backgroundColor: color ?? tokens.colors[tone] },\n      extractedStyleProps,\n      style,\n    ]);\n  }, [color, extractedStyleProps, inset, orientation, style, tone, tokens]);\n\n  return (\n    <View {...props} accessible={accessible} role={role} style={dividerStyle} />\n  );\n});\n\nconst styles = StyleSheet.create({\n  base: {\n    alignSelf: \"stretch\",\n    flexShrink: 0,\n  },\n});\n"],"mappings":"AA6CI;AA7CJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB,qBAAqB;AAGnD,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,SAAS,oBAAoB,EAAE;AACrC,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,aAAa,UAAU,WAAW,UAAU;AAClD,UAAM,WAAW,UAAU,SAAS,UAAU;AAE9C,WAAO,WAAW,QAAQ;AAAA,MACxB,OAAO;AAAA,MACP,gBAAgB,eACZ;AAAA,QACE,QAAQ,OAAO;AAAA,QACf,WAAW,WAAW,OAAO,QAAQ;AAAA,QACrC,aAAa,aAAa,OAAO,QAAQ;AAAA,MAC3C,IACA;AAAA,QACE,cAAc,WAAW,OAAO,QAAQ;AAAA,QACxC,WAAW,aAAa,OAAO,QAAQ;AAAA,QACvC,OAAO,OAAO;AAAA,MAChB;AAAA,MACJ,EAAE,iBAAiB,SAAS,OAAO,OAAO,IAAI,EAAE;AAAA,MAChD;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,qBAAqB,OAAO,aAAa,OAAO,MAAM,MAAM,CAAC;AAExE,SACE,oBAAC,QAAM,GAAG,OAAO,YAAwB,MAAY,OAAO,cAAc;AAE9E,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF,CAAC;","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,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';