@impulse-ui-native/primitives 3.0.0 → 5.0.0

package/README.md

@@ -25,7 +25,7 @@ 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.
+- `Progress` provides 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.
@@ -33,6 +33,19 @@ pnpm add react-native-safe-area-context react-native-svg
 - `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
@@ -48,27 +61,21 @@ import {
   Typography,
   View,
 } from "@impulse-ui-native/primitives";
+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 +95,51 @@ 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.
 
-`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`.
 
-`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. Avoid placing independently pressable controls inside `Card.Pressable`; use `Card.Root` with actions in `Card.Footer` instead.
 
-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. 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.
 
-`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 `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.
 
-`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 `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.
+
+## List
+
+List is a presentation-focused compound component, exported through primitives
+and the toolkit. It uses the existing theme provider and adds no runtime peers.
+
+```tsx
+import { Divider, List, Typography } from "@impulse-ui-native/primitives";
+
+<List.Root>
+  <List.Item>
+    <List.Leading>{/* Icon, avatar, or custom content */}</List.Leading>
+    <List.Content>
+      <Typography.Title6>Account</Typography.Title6>
+      <Typography.BodySmall>Personal details</Typography.BodySmall>
+    </List.Content>
+    <List.Trailing>{/* Badge, metadata, or indicator */}</List.Trailing>
+  </List.Item>
+  <Divider inset="both" />
+  <List.Pressable onPress={openPreferences}>
+    <List.Content>
+      <Typography.Body>Preferences</Typography.Body>
+    </List.Content>
+  </List.Pressable>
+</List.Root>;
+```
 
-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.
+Root supplies the surface; Item supplies a static row; Pressable supplies the
+same row layout with native press and disabled behavior. Leading and Trailing
+keep custom content at its natural size while Content fills the remaining width.
+All parts accept their underlying primitive props and style overrides. Use
+Typography for titles and descriptions and Divider for explicit separators.
+Parts may also be composed without Root for standalone rows. Selection and
+indicators remain application-owned; no context, selection state, or automatic
+separator insertion is included. Theme defaults live in components.list.

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,25 @@ 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 ?? (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,
@@ -78,7 +63,6 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
     {
       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":"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","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  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          (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 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      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/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  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 {...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":"AAgDI,SACE,KADF;AAhDJ,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;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,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

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { useThemedStyles } from "@impulse-ui-native/theme";
+import {
+  getActionStateTokens,
+  useThemedStyles
+} from "@impulse-ui-native/theme";
 import { Pressable } from "./pressable";
 import { Spinner } from "./spinner";
 import { Typography } from "./typography";
 const Button = memo(function Button2({
-  accessibilityState,
   size = "medium",
   variant = "filled",
   disabled,
@@ -15,46 +17,35 @@ const Button = memo(function Button2({
   style,
   ...props
 }) {
-  const styles = useThemedStyles(themedStyles, { size, variant, disabled }, [
-    size,
-    variant,
-    disabled
-  ]);
-  const interactionDisabled = disabled === true || loading;
-  const resolvedAccessibilityState = useMemo(
-    () => ({
-      ...accessibilityState,
-      busy: loading,
-      disabled: interactionDisabled
-    }),
-    [accessibilityState, interactionDisabled, loading]
+  const styles = useThemedStyles(
+    themedStyles,
+    { size, variant, disabled, loading },
+    [size, variant, disabled, loading]
   );
+  const interactionDisabled = disabled === true || 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 } = props;
+  const { size, variant, disabled, loading } = props;
   const buttonTokens = theme.components.button;
   const sizeTokens = buttonTokens.sizes[size];
-  const variantTokens = buttonTokens.variants[variant];
+  const appearanceTokens = getActionStateTokens(
+    buttonTokens.variants[variant],
+    {
+      disabled,
+      loading
+    }
+  );
   return StyleSheet.create({
     button: {
       alignItems: "center",
@@ -64,14 +55,14 @@ function themedStyles(theme, props) {
       paddingHorizontal: sizeTokens.paddingHorizontal,
       borderWidth: buttonTokens.borderWidth,
       borderRadius: buttonTokens.borderRadius,
-      borderColor: disabled ? variantTokens.disabledBorderColor : variantTokens.borderColor,
-      backgroundColor: disabled ? variantTokens.disabledBackgroundColor : variantTokens.backgroundColor
+      borderColor: appearanceTokens.borderColor,
+      backgroundColor: appearanceTokens.backgroundColor
     },
     text: {
       width: "100%",
       textAlign: "center",
       fontSize: sizeTokens.fontSize,
-      color: disabled ? variantTokens.disabledColor : variantTokens.color
+      color: appearanceTokens.color
     }
   });
 }

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 { 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"]}
+{"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/circular-progress.js

@@ -52,7 +52,7 @@ const ProgressCircle = memo(function ProgressCircle2({
     () => [circumference, circumference],
     [circumference]
   );
-  return /* @__PURE__ */ jsxs(Svg, { accessible: false, height: width, width, children: [
+  return /* @__PURE__ */ jsxs(Svg, { height: width, width, children: [
     /* @__PURE__ */ jsx(
       Circle,
       {
@@ -104,7 +104,7 @@ const CircularIndeterminateIndicator = memo(
       () => [circumference * 0.25, circumference * 0.75],
       [circumference]
     );
-    return /* @__PURE__ */ jsx(Animated.View, { style: animatedStyle, children: /* @__PURE__ */ jsxs(Svg, { accessible: false, height: width, width, children: [
+    return /* @__PURE__ */ jsx(Animated.View, { style: animatedStyle, children: /* @__PURE__ */ jsxs(Svg, { height: width, width, children: [
       /* @__PURE__ */ jsx(
         Circle,
         {

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

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

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

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