@impulse-ui-native/primitives 4.0.0 → 6.0.0

package/README.md

@@ -10,7 +10,7 @@ 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. Circular `Progress` requires `react-native-svg`:
+`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Icon-based primitives require `react-native-svg`:
 
 ```sh
 pnpm add react-native-safe-area-context react-native-svg
@@ -25,50 +25,55 @@ pnpm add react-native-safe-area-context react-native-svg
 - `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.
 
+Typography presets update their colors with the active theme:
+
+- `Subtitle1`, `Subtitle2`, `BodySmall`, `Caption`, `Helper`, `Overline`, and
+  `Eyebrow` use `theme.colors.text.secondary` for supporting text.
+- The other presets use `theme.colors.text.primary` for headings and main content.
+
+`createPreset` accepts a theme-based `color` in its configuration and falls back
+to `text.primary` when omitted. Explicit `color` props override the preset color;
+`style.color` takes precedence over both. Use tertiary, disabled, inverse, and
+feedback colors explicitly when the surrounding component or state requires them.
+Preset and explicit `fontFamily` and `fontVariant` values are honored, including
+monospace Code. `numeric` selects tabular numbers; style overrides apply last.
+
 ## Example
 
 ```tsx
+import { Card } from "@impulse-ui-native/card";
 import {
   Avatar,
   Badge,
   Button,
-  Card,
   Divider,
-  Progress,
   Spinner,
   Tag,
   Typography,
   View,
 } from "@impulse-ui-native/primitives";
+import { Progress } from "@impulse-ui-native/progress";
+import { useSpace } from "@impulse-ui-native/theme";
 
 export function ProfileSummary() {
+  const space = useSpace();
+
   return (
-    <View gap="md" padding="lg">
+    <View gap={space.md} padding={space.lg}>
       <Typography.Title3>Profile</Typography.Title3>
-      <Avatar
-        initials="AK"
-        status="online"
-        variant="soft"
-        accessibilityLabel="Alex Kim, online"
-      />
+      <Avatar initials="AK" status="online" variant="soft" />
       <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" />
+      <Spinner size="small" tone="secondary" />
+      <Progress value={65} />
       <Card.Root>
         <Card.Header>
           <Typography.Title4>Account activity</Typography.Title4>
@@ -88,16 +93,16 @@ 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.
+`Button` and `IconButton` replace their content with a loading indicator when `loading` is true. Loading controls block interaction until loading ends.
 
-`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.
+`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.
 
-`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.
+`Divider` defaults to a subtle horizontal 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.
 
-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.
+`Avatar` supports `filled`, `outlined`, and `soft` display variants. It renders fallback content below its image so initials or a custom fallback remain visible while the image loads or when it fails. Avatar grouping and overflow counts are intentionally handled separately.
 
-`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.
+Use `Badge` for compact states and metadata. It supports `filled`, `outlined`, and `soft` display variants 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.
 
-`Avatar` supports `filled`, `outlined`, and `soft` display variants. 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.
+## Dedicated component packages
 
-Use `Badge` for compact states and metadata. It supports `filled`, `outlined`, and `soft` display variants 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.
+Card, List, Progress, and their prop types are exported from `@impulse-ui-native/card`, `@impulse-ui-native/list`, and `@impulse-ui-native/progress`, respectively. They remain available through `@impulse-ui-native/toolkit`. Migrate direct primitives imports to their owning packages.

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

@@ -5,6 +5,6 @@ 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>;
+declare const Avatar: react.MemoExoticComponent<({ fallback, imageProps, initials, size, source, status, statusColor, style, variant, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element>;
 
 export { Avatar };

package/dist/components/atoms/avatar.js

@@ -4,12 +4,9 @@ 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,
@@ -24,37 +21,26 @@ const Avatar = memo(function Avatar2({
     { 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
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { ...props, style: containerStyle, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+      fallback,
+      (fallback === null || fallback === void 0) && initials ? /* @__PURE__ */ jsx(Text, { style: styles.initials, children: initials }) : null,
+      source ? /* @__PURE__ */ jsx(
+        AvatarImageLayer,
+        {
+          imageProps,
+          source
+        },
+        sourceKey
+      ) : null
+    ] }),
+    status ? /* @__PURE__ */ jsx(View, { style: styles.status }) : null
+  ] });
 });
 const AvatarImageLayer = memo(function AvatarImageLayer2({
   imageProps,
@@ -72,13 +58,14 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
     () => [staticStyles.image, imageProps?.style],
     [imageProps?.style]
   );
-  if (hasError) return null;
+  if (hasError) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(
     Image,
     {
       resizeMode: "cover",
       ...imageProps,
-      accessible: false,
       onError: handleError,
       source,
       style: imageStyle

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

@@ -1 +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":"AAgDM,SAEgB,KAFhB;AA/CN,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,OAAO,YAAY,YAAY;AAGxC,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAgB;AACd,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,QAAQ,aAAa,QAAQ;AAAA,IACrC,CAAC,MAAM,QAAQ,aAAa,OAAO;AAAA,EACrC;AACA,QAAM,qBAAqB,cAAc,QAAQ,kBAAkB;AACnE,QAAM,eAAe,SAAS,qBAAqB,QAAQ;AAC3D,QAAM,YAAY,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,CAAC;AAEhE,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,OAAO;AAAA,MAEP;AAAA,6BAAC,QAAK,OAAO,OAAO,SACjB;AAAA,uBACE,WAAW,oBAAC,QAAK,OAAO,OAAO,UAAW,oBAAS,IAAU;AAAA,UAE/D,SACC;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA;AAAA,YAFK;AAAA,UAGP,IACE;AAAA,WACN;AAAA,QAEC,SAAS,oBAAC,QAAK,YAAY,OAAO,OAAO,OAAO,QAAQ,IAAK;AAAA;AAAA;AAAA,EAChE;AAEJ,CAAC;AAOD,MAAM,mBAAmB,KAAK,SAASC,kBAAiB;AAAA,EACtD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU;AACT,kBAAY,IAAI;AAChB,kBAAY,UAAU,KAAK;AAAA,IAC7B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,aAAa,OAAO,YAAY,KAAK;AAAA,IAC5C,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,MAAI,SAAU,QAAO;AAErB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACV,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AASD,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,QAAQ,aAAa,QAAQ,IAAI;AAC/C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO,WAAW;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB,cAAc;AAAA,MAC/B,aAAa,cAAc;AAAA,MAC3B,cAAc,WAAW,OAAO;AAAA,MAChC,aAAa,aAAa;AAAA,MAC1B,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,OAAO,cAAc;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,MACN,iBACE,gBAAgB,SAAS,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/D,aAAa,aAAa;AAAA,MAC1B,cAAc,WAAW,aAAa;AAAA,MACtC,aAAa,WAAW;AAAA,MACxB,QAAQ;AAAA,MACR,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO,WAAW;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEA,MAAM,eAAe,WAAW,OAAO;AAAA,EACrC,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;","names":["Avatar","AvatarImageLayer"]}
+{"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  fallback,\n  imageProps,\n  initials,\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\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 {...props} style={containerStyle}>\n      <View style={styles.content}>\n        {fallback}\n        {(fallback === null || fallback === undefined) && initials ? (\n          <Text style={styles.initials}>{initials}</Text>\n        ) : null}\n\n        {source ? (\n          <AvatarImageLayer\n            key={sourceKey}\n            imageProps={imageProps}\n            source={source}\n          />\n        ) : null}\n      </View>\n\n      {status ? <View 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) {\n    return null;\n  }\n\n  return (\n    <Image\n      resizeMode=\"cover\"\n      {...imageProps}\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":"AAsCM,SAGI,KAHJ;AArCN,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,OAAO,YAAY,YAAY;AAGxC,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAgB;AACd,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,QAAQ,aAAa,QAAQ;AAAA,IACrC,CAAC,MAAM,QAAQ,aAAa,OAAO;AAAA,EACrC;AAEA,QAAM,YAAY,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,CAAC;AAEhE,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA,yBAAC,QAAK,OAAO,OAAO,SACjB;AAAA;AAAA,OACC,aAAa,QAAQ,aAAa,WAAc,WAChD,oBAAC,QAAK,OAAO,OAAO,UAAW,oBAAS,IACtC;AAAA,MAEH,SACC;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA;AAAA,QAFK;AAAA,MAGP,IACE;AAAA,OACN;AAAA,IAEC,SAAS,oBAAC,QAAK,OAAO,OAAO,QAAQ,IAAK;AAAA,KAC7C;AAEJ,CAAC;AAOD,MAAM,mBAAmB,KAAK,SAASC,kBAAiB;AAAA,EACtD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU;AACT,kBAAY,IAAI;AAChB,kBAAY,UAAU,KAAK;AAAA,IAC7B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,aAAa,OAAO,YAAY,KAAK;AAAA,IAC5C,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACV,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AASD,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,QAAQ,aAAa,QAAQ,IAAI;AAC/C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO,WAAW;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB,cAAc;AAAA,MAC/B,aAAa,cAAc;AAAA,MAC3B,cAAc,WAAW,OAAO;AAAA,MAChC,aAAa,aAAa;AAAA,MAC1B,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,OAAO,cAAc;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,MACN,iBACE,gBAAgB,SAAS,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/D,aAAa,aAAa;AAAA,MAC1B,cAAc,WAAW,aAAa;AAAA,MACtC,aAAa,WAAW;AAAA,MACxB,QAAQ;AAAA,MACR,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO,WAAW;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEA,MAAM,eAAe,WAAW,OAAO;AAAA,EACrC,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;","names":["Avatar","AvatarImageLayer"]}

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

@@ -13,13 +13,17 @@ const BadgeAddon = memo(function BadgeAddon2({
 }) {
   const Container = useMemo(() => onPress ? Pressable : View, [onPress]);
   const content = useMemo(() => {
-    if (Content) return /* @__PURE__ */ jsx(Content, {});
+    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;
+  if (!content) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(Container, { hitSlop, onPress, children: content });
 });
 export {

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

@@ -1 +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"]}
+{"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) {\n      return <Content />;\n    }\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) {\n    return null;\n  }\n\n  return (\n    <Container hitSlop={hitSlop} onPress={onPress}>\n      {content}\n    </Container>\n  );\n});\n"],"mappings":"AA8Ba;AA7Bb,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,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,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,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}

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

@@ -9,6 +9,6 @@ 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>;
+declare const BadgeRoot: react.MemoExoticComponent<({ backgroundColor, children, color, Prefix, PrefixIcon, onPressPrefix, onPressSuffix, size, style, Suffix, SuffixIcon, tone, variant, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element>;
 
 export { BadgeRoot };

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

@@ -9,8 +9,6 @@ import {
 import { View } from "../view";
 import { BadgeAddon } from "./addon";
 const BadgeRoot = memo(function BadgeRoot2({
-  accessible,
-  accessibilityLabel,
   backgroundColor,
   children,
   color,
@@ -18,7 +16,6 @@ const BadgeRoot = memo(function BadgeRoot2({
   PrefixIcon,
   onPressPrefix,
   onPressSuffix,
-  role,
   size = "medium",
   style,
   Suffix,
@@ -41,41 +38,31 @@ const BadgeRoot = memo(function BadgeRoot2({
     [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
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(View, { ...props, 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;

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

@@ -1 +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"]}
+{"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  backgroundColor,\n  children,\n  color,\n  Prefix,\n  PrefixIcon,\n  onPressPrefix,\n  onPressSuffix,\n  size = \"medium\",\n  style,\n  Suffix,\n  SuffixIcon,\n  tone = \"primary\",\n  variant = \"filled\",\n  ...props\n}: BadgeProps) {\n  const tokens = useComponentsTokens();\n\n  const badgeTokens = tokens.badge;\n  const sizeTokens = badgeTokens.sizes[size];\n\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\n  const affixColor =\n    typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n  return (\n    <View {...props} style={containerStyle}>\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,SACE,KADF;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,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,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;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,IAEC,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,oBAAC,QAAK,eAAe,GAAG,OAAO,OAAO,OACnC,UACH,IAEA;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,KACF;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.d.mts

@@ -5,6 +5,6 @@ import { ButtonProps } from '../../types/button.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 
-declare const Button: react.MemoExoticComponent<({ accessibilityState, size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react_jsx_runtime.JSX.Element>;
+declare const Button: react.MemoExoticComponent<({ size, variant, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react_jsx_runtime.JSX.Element>;
 
 export { Button };

package/dist/components/atoms/button.js

@@ -9,7 +9,6 @@ import { Pressable } from "./pressable";
 import { Spinner } from "./spinner";
 import { Typography } from "./typography";
 const Button = memo(function Button2({
-  accessibilityState,
   size = "medium",
   variant = "filled",
   disabled,
@@ -24,34 +23,17 @@ const Button = memo(function Button2({
     [size, variant, disabled, loading]
   );
   const interactionDisabled = disabled === true || loading;
-  const resolvedAccessibilityState = useMemo(
-    () => ({
-      ...accessibilityState,
-      busy: loading,
-      disabled: interactionDisabled
-    }),
-    [accessibilityState, interactionDisabled, loading]
-  );
   const buttonStyles = useMemo(
     () => [styles.button, style],
     [styles.button, style]
   );
   const content = useMemo(() => {
     if (loading) {
-      return /* @__PURE__ */ jsx(Spinner, { accessible: false, color: styles.text.color, size });
+      return /* @__PURE__ */ jsx(Spinner, { color: styles.text.color, size });
     }
     return typeof children === "string" ? /* @__PURE__ */ jsx(Typography.Master, { style: styles.text, children }) : children;
   }, [children, loading, size, styles.text]);
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      ...props,
-      accessibilityState: resolvedAccessibilityState,
-      disabled: interactionDisabled,
-      style: buttonStyles,
-      children: content
-    }
-  );
+  return /* @__PURE__ */ jsx(Pressable, { ...props, disabled: interactionDisabled, style: buttonStyles, children: content });
 });
 function themedStyles(theme, props) {
   const { size, variant, disabled, loading } = props;

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 { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  getActionStateTokens,\n  useThemedStyles,\n} 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(\n    themedStyles,\n    { size, variant, disabled, loading },\n    [size, variant, disabled, loading],\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, loading } = props;\n\n  const buttonTokens = theme.components.button;\n  const sizeTokens = buttonTokens.sizes[size];\n  const appearanceTokens = getActionStateTokens(\n    buttonTokens.variants[variant],\n    {\n      disabled,\n      loading,\n    },\n  );\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: appearanceTokens.borderColor,\n      backgroundColor: appearanceTokens.backgroundColor,\n    },\n\n    text: {\n      width: \"100%\",\n      textAlign: \"center\",\n\n      fontSize: sizeTokens.fontSize,\n\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAkDQ;AAjDR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,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;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,QAAQ;AAAA,IACnC,CAAC,MAAM,SAAS,UAAU,OAAO;AAAA,EACnC;AAEA,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,UAAU,QAAQ,IAAI;AAE7C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,SAAS,OAAO;AAAA,IAC7B;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,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,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Button"]}
+{"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport {\n  AppTheme,\n  getActionStateTokens,\n  useThemedStyles,\n} 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  size = \"medium\",\n  variant = \"filled\",\n  disabled,\n  loading = false,\n  children,\n  style,\n  ...props\n}: PropsWithChildren<ButtonProps>) {\n  const styles = useThemedStyles(\n    themedStyles,\n    { size, variant, disabled, loading },\n    [size, variant, disabled, loading],\n  );\n\n  const interactionDisabled = disabled === true || loading;\n\n  const buttonStyles = useMemo(\n    () => [styles.button, style],\n    [styles.button, style],\n  );\n\n  const content = useMemo(() => {\n    if (loading) {\n      return <Spinner color={styles.text.color} size={size} />;\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 {...props} disabled={interactionDisabled} style={buttonStyles}>\n      {content}\n    </Pressable>\n  );\n});\n\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\n  const { size, variant, disabled, loading } = props;\n\n  const buttonTokens = theme.components.button;\n  const sizeTokens = buttonTokens.sizes[size];\n  const appearanceTokens = getActionStateTokens(\n    buttonTokens.variants[variant],\n    {\n      disabled,\n      loading,\n    },\n  );\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: appearanceTokens.borderColor,\n      backgroundColor: appearanceTokens.backgroundColor,\n    },\n\n    text: {\n      width: \"100%\",\n      textAlign: \"center\",\n\n      fontSize: sizeTokens.fontSize,\n\n      color: appearanceTokens.color,\n    },\n  });\n}\n"],"mappings":"AAsCa;AAtCb,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAEpB,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,UAAU,QAAQ;AAAA,IACnC,CAAC,MAAM,SAAS,UAAU,OAAO;AAAA,EACnC;AAEA,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,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,WAAQ,OAAO,OAAO,KAAK,OAAO,MAAY;AAAA,IACxD;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,oBAAC,aAAW,GAAG,OAAO,UAAU,qBAAqB,OAAO,cACzD,mBACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,SAAS,UAAU,QAAQ,IAAI;AAE7C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,SAAS,OAAO;AAAA,IAC7B;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,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,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Button"]}

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

@@ -5,6 +5,6 @@ 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>;
+declare const Divider: react.MemoExoticComponent<({ color, inset, orientation, style, tone, ...props }: DividerProps) => react_jsx_runtime.JSX.Element>;
 
 export { Divider };

package/dist/components/atoms/divider.js

@@ -1,14 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+import {
+  getDividerTokens,
+  useStyleProps,
+  useThemedStyles
+} from "@impulse-ui-native/theme";
 import { View } from "./view";
 const Divider = memo(function Divider2({
-  accessible = true,
   color,
   inset = "none",
   orientation = "horizontal",
-  role = "separator",
   style,
   tone = "subtle",
   ...props
@@ -23,24 +25,26 @@ const Divider = memo(function Divider2({
     () => [styles.divider, extractedStyleProps, style],
     [extractedStyleProps, style, styles.divider]
   );
-  return /* @__PURE__ */ jsx(View, { ...props, accessible, role, style: dividerStyle });
+  return /* @__PURE__ */ jsx(View, { ...props, style: dividerStyle });
 });
 function themedStyles(theme, props) {
   const { color, inset, orientation, tone } = props;
-  const dividerTokens = theme.components.divider;
-  const insetStart = inset === "start" || inset === "both";
-  const insetEnd = inset === "end" || inset === "both";
+  const dividerTokens = getDividerTokens(theme.components.divider, {
+    inset,
+    orientation,
+    tone
+  });
   return StyleSheet.create({
     divider: {
       alignSelf: "stretch",
       flexShrink: 0,
-      height: orientation === "horizontal" ? dividerTokens.thickness : void 0,
-      marginBottom: orientation === "vertical" && insetEnd ? dividerTokens.inset : 0,
-      marginEnd: orientation === "horizontal" && insetEnd ? dividerTokens.inset : 0,
-      marginStart: orientation === "horizontal" && insetStart ? dividerTokens.inset : 0,
-      marginTop: orientation === "vertical" && insetStart ? dividerTokens.inset : 0,
-      width: orientation === "vertical" ? dividerTokens.thickness : void 0,
-      backgroundColor: color ?? dividerTokens.colors[tone]
+      height: dividerTokens.height,
+      marginBottom: dividerTokens.marginBottom,
+      marginEnd: dividerTokens.marginEnd,
+      marginStart: dividerTokens.marginStart,
+      marginTop: dividerTokens.marginTop,
+      width: dividerTokens.width,
+      backgroundColor: color ?? dividerTokens.backgroundColor
     }
   });
 }

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

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

package/dist/components/atoms/icon-button.d.mts

@@ -7,6 +7,6 @@ import '@impulse-ui-native/theme';
 import '../../types/button.types.mjs';
 import 'react-native';
 
-declare const IconButton: react.MemoExoticComponent<({ accessibilityState, size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react_jsx_runtime.JSX.Element>;
+declare const IconButton: react.MemoExoticComponent<({ size, variant, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react_jsx_runtime.JSX.Element>;
 
 export { IconButton };

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

@@ -9,7 +9,6 @@ import {
 import { Pressable } from "./pressable";
 import { Spinner } from "./spinner";
 const IconButton = memo(function IconButton2({
-  accessibilityState,
   size = "medium",
   variant = "filled",
   disabled,
@@ -24,14 +23,6 @@ const IconButton = memo(function IconButton2({
     [size, variant, disabled, loading]
   );
   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]
@@ -40,10 +31,9 @@ const IconButton = memo(function IconButton2({
     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 })
+      children: loading ? /* @__PURE__ */ jsx(Spinner, { color: styles.icon.color, size }) : /* @__PURE__ */ jsx(Icon, { size, icon, color: styles.icon.color })
     }
   );
 });