@impulse-ui-native/primitives 2.7.0 → 2.9.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
@@ -21,7 +21,14 @@ pnpm add react-native-safe-area-context
 - `View` adds theme spacing, dimensions, flex, borders, colors, and shadow props to React Native's view.
 - `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.
+- `Button`, `IconButton`, and `Pressable` provide themed interaction primitives.
+- `Tag` labels categories, filters, and metadata, with optional press and close behavior.
+- `Badge` provides compact semantic labels with visual variants and Input-style prefix and suffix addons.
+- `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 +36,48 @@ pnpm add react-native-safe-area-context
 ## Example
 
 ```tsx
-import { Button, Tag, Typography, View } from "@impulse-ui-native/primitives";
+import {
+  Avatar,
+  Badge,
+  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" />
+      <Badge tone="success" variant="soft">
+        Active
+      </Badge>
+      <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 +89,15 @@ 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.
+
+Use `Badge` for compact states and metadata. It supports the same `filled`, `outlined`, `soft`, `ghost`, and `plain` visual variants as controls and semantic tones. Its addons follow Input: use `PrefixIcon` or `Prefix`, `SuffixIcon` or `Suffix`, and optionally `onPressPrefix` or `onPressSuffix`. A custom component takes precedence over its corresponding icon. Use `Tag` when the whole label needs built-in press or close behavior.

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,144 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from "react";
+import { Image, StyleSheet, Text } from "react-native";
+import { useStyleProps, useThemedStyles } 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 extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(
+    themedStyles,
+    { size, status, statusColor, variant },
+    [size, status, statusColor, variant]
+  );
+  const resolvedAccessible = accessible ?? Boolean(accessibilityLabel);
+  const resolvedRole = role ?? (resolvedAccessible ? "img" : "none");
+  const sourceKey = useMemo(() => JSON.stringify(source), [source]);
+  const containerStyle = useMemo(
+    () => [styles.container, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.container]
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...props,
+      accessibilityLabel,
+      accessible: resolvedAccessible,
+      role: resolvedRole,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+          fallback ?? (initials ? /* @__PURE__ */ jsx(Text, { style: styles.initials, children: initials }) : null),
+          source ? /* @__PURE__ */ jsx(
+            AvatarImageLayer,
+            {
+              imageProps,
+              source
+            },
+            sourceKey
+          ) : null
+        ] }),
+        status ? /* @__PURE__ */ jsx(View, { accessible: false, style: styles.status }) : 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(
+    () => [staticStyles.image, imageProps?.style],
+    [imageProps?.style]
+  );
+  if (hasError) return null;
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      resizeMode: "cover",
+      ...imageProps,
+      accessible: false,
+      onError: handleError,
+      source,
+      style: imageStyle
+    }
+  );
+});
+function themedStyles(theme, props) {
+  const { size, status, statusColor, variant } = props;
+  const avatarTokens = theme.components.avatar;
+  const sizeTokens = avatarTokens.sizes[size];
+  const variantTokens = avatarTokens.variants[variant];
+  return StyleSheet.create({
+    container: {
+      flexShrink: 0,
+      height: sizeTokens.size,
+      position: "relative",
+      width: sizeTokens.size
+    },
+    content: {
+      alignItems: "center",
+      backgroundColor: variantTokens.backgroundColor,
+      borderColor: variantTokens.borderColor,
+      borderRadius: sizeTokens.size / 2,
+      borderWidth: avatarTokens.borderWidth,
+      height: "100%",
+      justifyContent: "center",
+      overflow: "hidden",
+      width: "100%"
+    },
+    initials: {
+      color: variantTokens.color,
+      fontFamily: avatarTokens.fontFamily,
+      fontSize: sizeTokens.fontSize,
+      textAlign: "center"
+    },
+    status: {
+      backgroundColor: statusColor ?? (status ? avatarTokens.statusColors[status] : void 0),
+      borderColor: avatarTokens.statusBorderColor,
+      borderRadius: sizeTokens.statusSize / 2,
+      borderWidth: sizeTokens.statusBorderWidth,
+      bottom: 0,
+      height: sizeTokens.statusSize,
+      position: "absolute",
+      right: 0,
+      width: sizeTokens.statusSize
+    }
+  });
+}
+const staticStyles = StyleSheet.create({
+  image: {
+    bottom: 0,
+    height: "100%",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0,
+    width: "100%"
+  }
+});
+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 type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useThemedStyles } 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 extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, status, statusColor, variant },\n    [size, status, statusColor, variant],\n  );\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    () => [styles.container, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.container],\n  );\n\n  return (\n    <View\n      {...props}\n      accessibilityLabel={accessibilityLabel}\n      accessible={resolvedAccessible}\n      role={resolvedRole}\n      style={containerStyle}\n    >\n      <View style={styles.content}>\n        {fallback ??\n          (initials ? <Text style={styles.initials}>{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={styles.status} /> : 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    () => [staticStyles.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\ninterface AvatarThemeProps {\n  size: NonNullable<AvatarProps[\"size\"]>;\n  status: AvatarProps[\"status\"];\n  statusColor: AvatarProps[\"statusColor\"];\n  variant: NonNullable<AvatarProps[\"variant\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n  const { size, status, statusColor, variant } = props;\n  const avatarTokens = theme.components.avatar;\n  const sizeTokens = avatarTokens.sizes[size];\n  const variantTokens = avatarTokens.variants[variant];\n\n  return StyleSheet.create({\n    container: {\n      flexShrink: 0,\n      height: sizeTokens.size,\n      position: \"relative\",\n      width: sizeTokens.size,\n    },\n    content: {\n      alignItems: \"center\",\n      backgroundColor: variantTokens.backgroundColor,\n      borderColor: variantTokens.borderColor,\n      borderRadius: sizeTokens.size / 2,\n      borderWidth: avatarTokens.borderWidth,\n      height: \"100%\",\n      justifyContent: \"center\",\n      overflow: \"hidden\",\n      width: \"100%\",\n    },\n    initials: {\n      color: variantTokens.color,\n      fontFamily: avatarTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      textAlign: \"center\",\n    },\n    status: {\n      backgroundColor:\n        statusColor ?? (status ? avatarTokens.statusColors[status] : undefined),\n      borderColor: avatarTokens.statusBorderColor,\n      borderRadius: sizeTokens.statusSize / 2,\n      borderWidth: sizeTokens.statusBorderWidth,\n      bottom: 0,\n      height: sizeTokens.statusSize,\n      position: \"absolute\",\n      right: 0,\n      width: sizeTokens.statusSize,\n    },\n  });\n}\n\nconst staticStyles = StyleSheet.create({\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});\n"],"mappings":"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","names":["Avatar","AvatarImageLayer"]}

package/dist/components/atoms/badge/addon.d.mts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { IconProps } from '@impulse-ui-native/icon/types';
+import { PressableCoreProps } from '../../../types/button.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+
+interface BadgeAddonProps {
+    color: string | undefined;
+    Content: ComponentType | undefined;
+    hitSlop: number;
+    iconSize: number;
+    IconComponent: IconProps["icon"] | undefined;
+    onPress: PressableCoreProps["onPress"] | undefined;
+}
+declare const BadgeAddon: react.MemoExoticComponent<({ color, Content, hitSlop, iconSize, IconComponent, onPress, }: BadgeAddonProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { BadgeAddon };

package/dist/components/atoms/badge/addon.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Icon } from "@impulse-ui-native/icon/components/icon";
+import { Pressable } from "../pressable";
+import { View } from "../view";
+const BadgeAddon = memo(function BadgeAddon2({
+  color,
+  Content,
+  hitSlop,
+  iconSize,
+  IconComponent,
+  onPress
+}) {
+  const Container = useMemo(() => onPress ? Pressable : View, [onPress]);
+  const content = useMemo(() => {
+    if (Content) return /* @__PURE__ */ jsx(Content, {});
+    if (IconComponent) {
+      return /* @__PURE__ */ jsx(Icon, { color, icon: IconComponent, size: iconSize });
+    }
+    return null;
+  }, [color, Content, iconSize, IconComponent]);
+  if (!content) return null;
+  return /* @__PURE__ */ jsx(Container, { hitSlop, onPress, children: content });
+});
+export {
+  BadgeAddon
+};
+//# sourceMappingURL=addon.js.map

package/dist/components/atoms/badge/addon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\n\nimport type { PressableCoreProps } from \"../../../types\";\nimport { Pressable } from \"../pressable\";\nimport { View } from \"../view\";\n\ninterface BadgeAddonProps {\n  color: string | undefined;\n  Content: ComponentType | undefined;\n  hitSlop: number;\n  iconSize: number;\n  IconComponent: IconProps[\"icon\"] | undefined;\n  onPress: PressableCoreProps[\"onPress\"] | undefined;\n}\n\nexport const BadgeAddon = memo(function BadgeAddon({\n  color,\n  Content,\n  hitSlop,\n  iconSize,\n  IconComponent,\n  onPress,\n}: BadgeAddonProps) {\n  const Container = useMemo(() => (onPress ? Pressable : View), [onPress]);\n  const content = useMemo(() => {\n    if (Content) return <Content />;\n\n    if (IconComponent) {\n      return <Icon color={color} icon={IconComponent} size={iconSize} />;\n    }\n\n    return null;\n  }, [color, Content, iconSize, IconComponent]);\n\n  if (!content) return null;\n\n  return (\n    <Container hitSlop={hitSlop} onPress={onPress}>\n      {content}\n    </Container>\n  );\n});\n"],"mappings":"AA6BwB;AA5BxB,SAAS,MAAM,eAAe;AAG9B,SAAS,YAAY;AAGrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAWd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,QAAQ,MAAO,UAAU,YAAY,MAAO,CAAC,OAAO,CAAC;AACvE,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,QAAS,QAAO,oBAAC,WAAQ;AAE7B,QAAI,eAAe;AACjB,aAAO,oBAAC,QAAK,OAAc,MAAM,eAAe,MAAM,UAAU;AAAA,IAClE;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,SAAS,UAAU,aAAa,CAAC;AAE5C,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}

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

@@ -0,0 +1,11 @@
+export { BadgeRoot as Badge } from './root.mjs';
+import 'react';
+import 'react/jsx-runtime';
+import '../../../types/badge.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../../types/control-components.types.mjs';
+import '@impulse-ui-native/icon/types';
+import '../../../types/spinner.types.mjs';
+import '../../../types/button.types.mjs';
+import '../../../types/view.types.mjs';

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

@@ -0,0 +1,5 @@
+import { BadgeRoot } from "./root";
+export {
+  BadgeRoot as Badge
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/badge/index.ts"],"sourcesContent":["export { BadgeRoot as Badge } from \"./root\";\n"],"mappings":"AAAA,SAAsB,iBAAa;","names":[]}

package/dist/components/atoms/badge/root.d.mts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BadgeProps } from '../../../types/badge.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import '../../../types/control-components.types.mjs';
+import '@impulse-ui-native/icon/types';
+import '../../../types/spinner.types.mjs';
+import '../../../types/button.types.mjs';
+import '../../../types/view.types.mjs';
+
+declare const BadgeRoot: react.MemoExoticComponent<({ accessible, accessibilityLabel, backgroundColor, children, color, Prefix, PrefixIcon, onPressPrefix, onPressSuffix, role, size, style, Suffix, SuffixIcon, tone, variant, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element>;
+
+export { BadgeRoot };

package/dist/components/atoms/badge/root.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet, Text } from "react-native";
+import {
+  useComponentsTokens,
+  useStyleProps,
+  useThemedStyles
+} from "@impulse-ui-native/theme";
+import { View } from "../view";
+import { BadgeAddon } from "./addon";
+const BadgeRoot = memo(function BadgeRoot2({
+  accessible,
+  accessibilityLabel,
+  backgroundColor,
+  children,
+  color,
+  Prefix,
+  PrefixIcon,
+  onPressPrefix,
+  onPressSuffix,
+  role,
+  size = "medium",
+  style,
+  Suffix,
+  SuffixIcon,
+  tone = "primary",
+  variant = "filled",
+  ...props
+}) {
+  const tokens = useComponentsTokens();
+  const badgeTokens = tokens.badge;
+  const sizeTokens = badgeTokens.sizes[size];
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(
+    themedStyles,
+    { backgroundColor, color, size, tone, variant },
+    [backgroundColor, color, size, tone, variant]
+  );
+  const containerStyle = useMemo(
+    () => [styles.container, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.container]
+  );
+  const affixColor = typeof styles.label.color === "string" ? styles.label.color : void 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...props,
+      accessibilityLabel,
+      accessible: accessible ?? Boolean(accessibilityLabel),
+      role,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          BadgeAddon,
+          {
+            Content: Prefix,
+            IconComponent: PrefixIcon,
+            color: affixColor,
+            hitSlop: badgeTokens.addonHitSlop,
+            iconSize: sizeTokens.iconSize,
+            onPress: onPressPrefix
+          }
+        ),
+        typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children }) : children,
+        /* @__PURE__ */ jsx(
+          BadgeAddon,
+          {
+            Content: Suffix,
+            IconComponent: SuffixIcon,
+            color: affixColor,
+            hitSlop: badgeTokens.addonHitSlop,
+            iconSize: sizeTokens.iconSize,
+            onPress: onPressSuffix
+          }
+        )
+      ]
+    }
+  );
+});
+function themedStyles(theme, props) {
+  const { backgroundColor, color, size, tone, variant } = props;
+  const badgeTokens = theme.components.badge;
+  const sizeTokens = badgeTokens.sizes[size];
+  const variantTokens = badgeTokens.colors[tone][variant];
+  return StyleSheet.create({
+    container: {
+      alignItems: "center",
+      alignSelf: "flex-start",
+      flexDirection: "row",
+      flexShrink: 0,
+      justifyContent: "center",
+      borderRadius: badgeTokens.borderRadius,
+      borderWidth: badgeTokens.borderWidth,
+      gap: badgeTokens.gap,
+      height: sizeTokens.height,
+      minWidth: sizeTokens.minWidth,
+      paddingHorizontal: sizeTokens.paddingHorizontal,
+      backgroundColor: backgroundColor ?? variantTokens.backgroundColor,
+      borderColor: variantTokens.borderColor
+    },
+    label: {
+      textAlign: "center",
+      fontFamily: badgeTokens.fontFamily,
+      fontSize: sizeTokens.fontSize,
+      lineHeight: sizeTokens.lineHeight,
+      color: color ?? variantTokens.color
+    }
+  });
+}
+export {
+  BadgeRoot
+};
+//# sourceMappingURL=root.js.map

package/dist/components/atoms/badge/root.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/badge/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n  useComponentsTokens,\n  useStyleProps,\n  useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { BadgeProps, BadgeThemeProps } from \"../../../types\";\nimport { View } from \"../view\";\nimport { BadgeAddon } from \"./addon\";\n\nexport const BadgeRoot = memo(function BadgeRoot({\n  accessible,\n  accessibilityLabel,\n  backgroundColor,\n  children,\n  color,\n  Prefix,\n  PrefixIcon,\n  onPressPrefix,\n  onPressSuffix,\n  role,\n  size = \"medium\",\n  style,\n  Suffix,\n  SuffixIcon,\n  tone = \"primary\",\n  variant = \"filled\",\n  ...props\n}: BadgeProps) {\n  const tokens = useComponentsTokens();\n  const badgeTokens = tokens.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(\n    themedStyles,\n    { backgroundColor, color, size, tone, variant },\n    [backgroundColor, color, size, tone, variant],\n  );\n\n  const containerStyle = useMemo(\n    () => [styles.container, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.container],\n  );\n  const affixColor =\n    typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n  return (\n    <View\n      {...props}\n      accessibilityLabel={accessibilityLabel}\n      accessible={accessible ?? Boolean(accessibilityLabel)}\n      role={role}\n      style={containerStyle}\n    >\n      <BadgeAddon\n        Content={Prefix}\n        IconComponent={PrefixIcon}\n        color={affixColor}\n        hitSlop={badgeTokens.addonHitSlop}\n        iconSize={sizeTokens.iconSize}\n        onPress={onPressPrefix}\n      />\n\n      {typeof children === \"string\" || typeof children === \"number\" ? (\n        <Text numberOfLines={1} style={styles.label}>\n          {children}\n        </Text>\n      ) : (\n        children\n      )}\n\n      <BadgeAddon\n        Content={Suffix}\n        IconComponent={SuffixIcon}\n        color={affixColor}\n        hitSlop={badgeTokens.addonHitSlop}\n        iconSize={sizeTokens.iconSize}\n        onPress={onPressSuffix}\n      />\n    </View>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n  const { backgroundColor, color, size, tone, variant } = props;\n\n  const badgeTokens = theme.components.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n  const variantTokens = badgeTokens.colors[tone][variant];\n\n  return StyleSheet.create({\n    container: {\n      alignItems: \"center\",\n      alignSelf: \"flex-start\",\n      flexDirection: \"row\",\n      flexShrink: 0,\n      justifyContent: \"center\",\n\n      borderRadius: badgeTokens.borderRadius,\n      borderWidth: badgeTokens.borderWidth,\n      gap: badgeTokens.gap,\n      height: sizeTokens.height,\n      minWidth: sizeTokens.minWidth,\n      paddingHorizontal: sizeTokens.paddingHorizontal,\n\n      backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\n      borderColor: variantTokens.borderColor,\n    },\n\n    label: {\n      textAlign: \"center\",\n\n      fontFamily: badgeTokens.fontFamily,\n      fontSize: sizeTokens.fontSize,\n      lineHeight: sizeTokens.lineHeight,\n\n      color: color ?? variantTokens.color,\n    },\n  });\n}\n"],"mappings":"AAmDI,SAOE,KAPF;AAnDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AACnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AACzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AACA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY,cAAc,QAAQ,kBAAkB;AAAA,MACpD;AAAA,MACA,OAAO;AAAA,MAEP;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAe;AAAA,YACf,OAAO;AAAA,YACP,SAAS,YAAY;AAAA,YACrB,UAAU,WAAW;AAAA,YACrB,SAAS;AAAA;AAAA,QACX;AAAA,QAEC,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,oBAAC,QAAK,eAAe,GAAG,OAAO,OAAO,OACnC,UACH,IAEA;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAe;AAAA,YACf,OAAO;AAAA,YACP,SAAS,YAAY;AAAA,YACrB,UAAU,WAAW;AAAA,YACrB,SAAS;AAAA;AAAA,QACX;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAwB;AAC7D,QAAM,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ,IAAI;AAExD,QAAM,cAAc,MAAM,WAAW;AACrC,QAAM,aAAa,YAAY,MAAM,IAAI;AACzC,QAAM,gBAAgB,YAAY,OAAO,IAAI,EAAE,OAAO;AAEtD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,cAAc,YAAY;AAAA,MAC1B,aAAa,YAAY;AAAA,MACzB,KAAK,YAAY;AAAA,MACjB,QAAQ,WAAW;AAAA,MACnB,UAAU,WAAW;AAAA,MACrB,mBAAmB,WAAW;AAAA,MAE9B,iBAAiB,mBAAmB,cAAc;AAAA,MAClD,aAAa,cAAc;AAAA,IAC7B;AAAA,IAEA,OAAO;AAAA,MACL,WAAW;AAAA,MAEX,YAAY,YAAY;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MAEvB,OAAO,SAAS,cAAc;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["BadgeRoot"]}

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 };