@impulse-ui-native/primitives 2.8.0 → 2.9.0

package/README.md

@@ -21,7 +21,9 @@ pnpm add react-native-safe-area-context react-native-svg
 - `View` adds theme spacing, dimensions, flex, borders, colors, and shadow props to React Native's view.
 - `SafeAreaView` maps safe-area edges to the theme spacing scale.
 - `Typography` exposes named text presets such as `DisplayLarge`, `Title1`, `Body`, `Caption`, and `Code`.
-- `Button`, `IconButton`, `Pressable`, and `Tag` provide themed interaction primitives.
+- `Button`, `IconButton`, and `Pressable` provide themed interaction primitives.
+- `Tag` labels categories, filters, and metadata, with optional press and close behavior.
+- `Badge` provides compact semantic labels with visual variants and Input-style prefix and suffix addons.
 - `Spinner` provides token-aware sizes and semantic colors for indeterminate loading states.
 - `Progress` provides accessible linear and circular determinate or indeterminate progress.
 - `Card` provides compound `Root`, `Pressable`, `Header`, `Content`, `Footer`, and `Media` surfaces.
@@ -36,6 +38,7 @@ pnpm add react-native-safe-area-context react-native-svg
 ```tsx
 import {
   Avatar,
+  Badge,
   Button,
   Card,
   Divider,
@@ -57,6 +60,9 @@ export function ProfileSummary() {
         accessibilityLabel="Alex Kim, online"
       />
       <Tag label="Active" color="success" />
+      <Badge tone="success" variant="soft">
+        Active
+      </Badge>
       <Spinner
         size="small"
         tone="secondary"
@@ -93,3 +99,5 @@ Use `Card.Root` for a static surface and `Card.Pressable` when the whole card ha
 `Divider` defaults to a subtle horizontal separator and exposes `role="separator"`. Use logical start/end insets to preserve RTL alignment, switch to vertical orientation inside a container with a defined height, and use `color` only when the semantic tones do not fit the surrounding surface.
 
 `Avatar` supports the same `filled`, `outlined`, `soft`, `ghost`, and `plain` variants as the control family. It renders fallback content below its image so initials or a custom fallback remain visible while the image loads or when it fails. Provide an `accessibilityLabel` when the represented identity is meaningful, and include presence status in that label when `status` conveys useful information. Avatar grouping and overflow counts are intentionally handled separately.
+
+Use `Badge` for compact states and metadata. It supports the same `filled`, `outlined`, `soft`, `ghost`, and `plain` visual variants as controls and semantic tones. Its addons follow Input: use `PrefixIcon` or `Prefix`, `SuffixIcon` or `Suffix`, and optionally `onPressPrefix` or `onPressSuffix`. A custom component takes precedence over its corresponding icon. Use `Tag` when the whole label needs built-in press or close behavior.

package/dist/components/atoms/avatar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useState } from "react";
 import { Image, StyleSheet, Text } from "react-native";
-import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { View } from "./view";
 const Avatar = memo(function Avatar2({
   accessibilityLabel,
@@ -18,58 +18,18 @@ const Avatar = memo(function Avatar2({
   variant = "filled",
   ...props
 }) {
-  const tokens = useComponentsTokens().avatar;
   const extractedStyleProps = useStyleProps(props);
-  const sizeTokens = tokens.sizes[size];
-  const variantTokens = tokens.variants[variant];
+  const styles = useThemedStyles(
+    themedStyles,
+    { size, status, statusColor, variant },
+    [size, status, statusColor, variant]
+  );
   const resolvedAccessible = accessible ?? Boolean(accessibilityLabel);
   const resolvedRole = role ?? (resolvedAccessible ? "img" : "none");
   const sourceKey = useMemo(() => JSON.stringify(source), [source]);
   const containerStyle = useMemo(
-    () => [
-      styles.container,
-      { height: sizeTokens.size, width: sizeTokens.size },
-      extractedStyleProps,
-      style
-    ],
-    [extractedStyleProps, sizeTokens.size, style]
-  );
-  const contentStyle = useMemo(
-    () => [
-      styles.content,
-      {
-        backgroundColor: variantTokens.backgroundColor,
-        borderColor: variantTokens.borderColor,
-        borderRadius: sizeTokens.size / 2,
-        borderWidth: tokens.borderWidth
-      }
-    ],
-    [sizeTokens.size, tokens.borderWidth, variantTokens]
-  );
-  const initialsStyle = useMemo(
-    () => [
-      styles.initials,
-      {
-        color: variantTokens.color,
-        fontFamily: tokens.fontFamily,
-        fontSize: sizeTokens.fontSize
-      }
-    ],
-    [sizeTokens.fontSize, tokens.fontFamily, variantTokens.color]
-  );
-  const statusStyle = useMemo(
-    () => [
-      styles.status,
-      {
-        backgroundColor: statusColor ?? (status ? tokens.statusColors[status] : void 0),
-        borderColor: tokens.statusBorderColor,
-        borderRadius: sizeTokens.statusSize / 2,
-        borderWidth: sizeTokens.statusBorderWidth,
-        height: sizeTokens.statusSize,
-        width: sizeTokens.statusSize
-      }
-    ],
-    [sizeTokens, status, statusColor, tokens]
+    () => [styles.container, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.container]
   );
   return /* @__PURE__ */ jsxs(
     View,
@@ -80,8 +40,8 @@ const Avatar = memo(function Avatar2({
       role: resolvedRole,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs(View, { style: contentStyle, children: [
-          fallback ?? (initials ? /* @__PURE__ */ jsx(Text, { style: initialsStyle, children: initials }) : null),
+        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+          fallback ?? (initials ? /* @__PURE__ */ jsx(Text, { style: styles.initials, children: initials }) : null),
           source ? /* @__PURE__ */ jsx(
             AvatarImageLayer,
             {
@@ -91,7 +51,7 @@ const Avatar = memo(function Avatar2({
             sourceKey
           ) : null
         ] }),
-        status ? /* @__PURE__ */ jsx(View, { accessible: false, style: statusStyle }) : null
+        status ? /* @__PURE__ */ jsx(View, { accessible: false, style: styles.status }) : null
       ]
     }
   );
@@ -109,7 +69,7 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
     [imageProps]
   );
   const imageStyle = useMemo(
-    () => [styles.image, imageProps?.style],
+    () => [staticStyles.image, imageProps?.style],
     [imageProps?.style]
   );
   if (hasError) return null;
@@ -125,18 +85,49 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
     }
   );
 });
-const styles = StyleSheet.create({
-  container: {
-    flexShrink: 0,
-    position: "relative"
-  },
-  content: {
-    alignItems: "center",
-    height: "100%",
-    justifyContent: "center",
-    overflow: "hidden",
-    width: "100%"
-  },
+function themedStyles(theme, props) {
+  const { size, status, statusColor, variant } = props;
+  const avatarTokens = theme.components.avatar;
+  const sizeTokens = avatarTokens.sizes[size];
+  const variantTokens = avatarTokens.variants[variant];
+  return StyleSheet.create({
+    container: {
+      flexShrink: 0,
+      height: sizeTokens.size,
+      position: "relative",
+      width: sizeTokens.size
+    },
+    content: {
+      alignItems: "center",
+      backgroundColor: variantTokens.backgroundColor,
+      borderColor: variantTokens.borderColor,
+      borderRadius: sizeTokens.size / 2,
+      borderWidth: avatarTokens.borderWidth,
+      height: "100%",
+      justifyContent: "center",
+      overflow: "hidden",
+      width: "100%"
+    },
+    initials: {
+      color: variantTokens.color,
+      fontFamily: avatarTokens.fontFamily,
+      fontSize: sizeTokens.fontSize,
+      textAlign: "center"
+    },
+    status: {
+      backgroundColor: statusColor ?? (status ? avatarTokens.statusColors[status] : void 0),
+      borderColor: avatarTokens.statusBorderColor,
+      borderRadius: sizeTokens.statusSize / 2,
+      borderWidth: sizeTokens.statusBorderWidth,
+      bottom: 0,
+      height: sizeTokens.statusSize,
+      position: "absolute",
+      right: 0,
+      width: sizeTokens.statusSize
+    }
+  });
+}
+const staticStyles = StyleSheet.create({
   image: {
     bottom: 0,
     height: "100%",
@@ -145,14 +136,6 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
     width: "100%"
-  },
-  initials: {
-    textAlign: "center"
-  },
-  status: {
-    bottom: 0,
-    position: "absolute",
-    right: 0
   }
 });
 export {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/atoms/divider.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { View } from "./view";
 const Divider = memo(function Divider2({
   accessible = true,
@@ -13,35 +13,37 @@ const Divider = memo(function Divider2({
   tone = "subtle",
   ...props
 }) {
-  const tokens = useComponentsTokens().divider;
   const extractedStyleProps = useStyleProps(props);
-  const dividerStyle = useMemo(() => {
-    const insetStart = inset === "start" || inset === "both";
-    const insetEnd = inset === "end" || inset === "both";
-    return StyleSheet.flatten([
-      styles.base,
-      orientation === "horizontal" ? {
-        height: tokens.thickness,
-        marginEnd: insetEnd ? tokens.inset : 0,
-        marginStart: insetStart ? tokens.inset : 0
-      } : {
-        marginBottom: insetEnd ? tokens.inset : 0,
-        marginTop: insetStart ? tokens.inset : 0,
-        width: tokens.thickness
-      },
-      { backgroundColor: color ?? tokens.colors[tone] },
-      extractedStyleProps,
-      style
-    ]);
-  }, [color, extractedStyleProps, inset, orientation, style, tone, tokens]);
+  const styles = useThemedStyles(
+    themedStyles,
+    { color, inset, orientation, tone },
+    [color, inset, orientation, tone]
+  );
+  const dividerStyle = useMemo(
+    () => [styles.divider, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.divider]
+  );
   return /* @__PURE__ */ jsx(View, { ...props, accessible, role, style: dividerStyle });
 });
-const styles = StyleSheet.create({
-  base: {
-    alignSelf: "stretch",
-    flexShrink: 0
-  }
-});
+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";
+  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]
+    }
+  });
+}
 export {
   Divider
 };

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 { useComponentsTokens, useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { DividerProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Divider = memo(function Divider({\n  accessible = true,\n  color,\n  inset = \"none\",\n  orientation = \"horizontal\",\n  role = \"separator\",\n  style,\n  tone = \"subtle\",\n  ...props\n}: DividerProps) {\n  const tokens = useComponentsTokens().divider;\n  const extractedStyleProps = useStyleProps(props);\n\n  const dividerStyle = useMemo(() => {\n    const insetStart = inset === \"start\" || inset === \"both\";\n    const insetEnd = inset === \"end\" || inset === \"both\";\n\n    return StyleSheet.flatten([\n      styles.base,\n      orientation === \"horizontal\"\n        ? {\n            height: tokens.thickness,\n            marginEnd: insetEnd ? tokens.inset : 0,\n            marginStart: insetStart ? tokens.inset : 0,\n          }\n        : {\n            marginBottom: insetEnd ? tokens.inset : 0,\n            marginTop: insetStart ? tokens.inset : 0,\n            width: tokens.thickness,\n          },\n      { backgroundColor: color ?? tokens.colors[tone] },\n      extractedStyleProps,\n      style,\n    ]);\n  }, [color, extractedStyleProps, inset, orientation, style, tone, tokens]);\n\n  return (\n    <View {...props} accessible={accessible} role={role} style={dividerStyle} />\n  );\n});\n\nconst styles = StyleSheet.create({\n  base: {\n    alignSelf: \"stretch\",\n    flexShrink: 0,\n  },\n});\n"],"mappings":"AA6CI;AA7CJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB,qBAAqB;AAGnD,SAAS,YAAY;AAEd,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C,aAAa;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,aAAa,UAAU,WAAW,UAAU;AAClD,UAAM,WAAW,UAAU,SAAS,UAAU;AAE9C,WAAO,WAAW,QAAQ;AAAA,MACxB,OAAO;AAAA,MACP,gBAAgB,eACZ;AAAA,QACE,QAAQ,OAAO;AAAA,QACf,WAAW,WAAW,OAAO,QAAQ;AAAA,QACrC,aAAa,aAAa,OAAO,QAAQ;AAAA,MAC3C,IACA;AAAA,QACE,cAAc,WAAW,OAAO,QAAQ;AAAA,QACxC,WAAW,aAAa,OAAO,QAAQ;AAAA,QACvC,OAAO,OAAO;AAAA,MAChB;AAAA,MACJ,EAAE,iBAAiB,SAAS,OAAO,OAAO,IAAI,EAAE;AAAA,MAChD;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,qBAAqB,OAAO,aAAa,OAAO,MAAM,MAAM,CAAC;AAExE,SACE,oBAAC,QAAM,GAAG,OAAO,YAAwB,MAAY,OAAO,cAAc;AAE9E,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF,CAAC;","names":["Divider"]}
+{"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"]}

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

@@ -1,4 +1,5 @@
 export { Avatar } from './avatar.mjs';
+export { BadgeRoot as Badge } from './badge/root.mjs';
 export { View } from './view.mjs';
 export { SafeAreaView } from './safe-area-view.mjs';
 export { Typography, TypographyComponent } from './typography.mjs';
@@ -15,13 +16,15 @@ import '../../types/avatar.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '../../types/view.types.mjs';
+import '../../types/badge.types.mjs';
+import '../../types/control-components.types.mjs';
+import '@impulse-ui-native/icon/types';
+import '../../types/spinner.types.mjs';
+import '../../types/button.types.mjs';
 import '../../types/safe-area-view.types.mjs';
 import 'react-native-safe-area-context';
 import '../../types/typography.types.mjs';
-import '../../types/button.types.mjs';
 import '../../types/divider.types.mjs';
 import '../../types/icon-button.types.mjs';
-import '@impulse-ui-native/icon/types';
 import '../../types/progress.types.mjs';
-import '../../types/spinner.types.mjs';
 import '../../types/tag.types.mjs';

package/dist/components/atoms/index.js

@@ -1,4 +1,5 @@
 import { Avatar } from "./avatar";
+import { Badge } from "./badge";
 import { View } from "./view";
 import { SafeAreaView } from "./safe-area-view";
 import { Typography } from "./typography";
@@ -11,6 +12,7 @@ import { Spinner } from "./spinner";
 import { Tag } from "./tag";
 export {
   Avatar,
+  Badge,
   Button,
   Divider,
   IconButton,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { Avatar } from \"./avatar\";\nexport { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { Divider } from \"./divider\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport { Progress } from \"./progress\";\nexport { Spinner } from \"./spinner\";\nexport { Tag } from \"./tag\";\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAA4C;AACrD,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,WAAW;","names":[]}
+{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { Avatar } from \"./avatar\";\nexport { Badge } from \"./badge\";\nexport { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { Divider } from \"./divider\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport { Progress } from \"./progress\";\nexport { Spinner } from \"./spinner\";\nexport { Tag } from \"./tag\";\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAA4C;AACrD,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,WAAW;","names":[]}

package/dist/components/atoms/spinner.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
-import { useComponentsTokens } from "@impulse-ui-native/theme";
+import { useThemedStyles } from "@impulse-ui-native/theme";
 const Spinner = memo(function Spinner2({
   accessibilityRole = "progressbar",
   accessibilityState,
@@ -14,8 +14,11 @@ const Spinner = memo(function Spinner2({
   tone = "primary",
   ...props
 }) {
-  const tokens = useComponentsTokens().spinner;
-  const resolvedSize = tokens.sizes[size];
+  const styles = useThemedStyles(themedStyles, { color, size, tone }, [
+    color,
+    size,
+    tone
+  ]);
   const resolvedAccessibilityState = useMemo(
     () => ({
       ...accessibilityState,
@@ -24,21 +27,8 @@ const Spinner = memo(function Spinner2({
     [accessibilityState, animating]
   );
   const containerStyle = useMemo(
-    () => [
-      styles.container,
-      {
-        width: resolvedSize,
-        height: resolvedSize
-      },
-      style
-    ],
-    [resolvedSize, style]
-  );
-  const indicatorStyle = useMemo(
-    () => ({
-      transform: [{ scale: resolvedSize / tokens.baseSize }]
-    }),
-    [resolvedSize, tokens.baseSize]
+    () => [styles.container, style],
+    [style, styles.container]
   );
   return /* @__PURE__ */ jsx(
     View,
@@ -53,21 +43,32 @@ const Spinner = memo(function Spinner2({
         {
           accessible: false,
           animating,
-          color: color ?? tokens.colors[tone],
+          color: styles.indicator.color,
           hidesWhenStopped,
           size: "small",
-          style: indicatorStyle
+          style: styles.indicator
         }
       )
     }
   );
 });
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
+function themedStyles(theme, props) {
+  const { color, size, tone } = props;
+  const spinnerTokens = theme.components.spinner;
+  const resolvedSize = spinnerTokens.sizes[size];
+  return StyleSheet.create({
+    container: {
+      alignItems: "center",
+      height: resolvedSize,
+      justifyContent: "center",
+      width: resolvedSize
+    },
+    indicator: {
+      color: color ?? spinnerTokens.colors[tone],
+      transform: [{ scale: resolvedSize / spinnerTokens.baseSize }]
+    }
+  });
+}
 export {
   Spinner
 };

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

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

package/dist/components/card/content.js

@@ -1,26 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { View } from "../atoms/view";
 const CardContent = memo(function CardContent2({
   style,
   ...props
 }) {
-  const tokens = useComponentsTokens().card.content;
   const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
   const contentStyle = useMemo(
-    () => [
-      {
-        gap: tokens.gap,
-        padding: tokens.padding
-      },
-      extractedStyleProps,
-      style
-    ],
-    [extractedStyleProps, style, tokens]
+    () => [styles.content, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.content]
   );
   return /* @__PURE__ */ jsx(View, { ...props, style: contentStyle });
 });
+function themedStyles(theme) {
+  const contentTokens = theme.components.card.content;
+  return StyleSheet.create({
+    content: {
+      gap: contentTokens.gap,
+      padding: contentTokens.padding
+    }
+  });
+}
 export {
   CardContent
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/content.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useComponentsTokens, useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { CardContentProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardContent = memo(function CardContent({\n  style,\n  ...props\n}: CardContentProps) {\n  const tokens = useComponentsTokens().card.content;\n  const extractedStyleProps = useStyleProps(props);\n  const contentStyle = useMemo(\n    () => [\n      {\n        gap: tokens.gap,\n        padding: tokens.padding,\n      },\n      extractedStyleProps,\n      style,\n    ],\n    [extractedStyleProps, style, tokens],\n  );\n\n  return <View {...props} style={contentStyle} />;\n});\n"],"mappings":"AAyBS;AAzBT,SAAS,MAAM,eAAe;AAE9B,SAAS,qBAAqB,qBAAqB;AAGnD,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,oBAAoB,EAAE,KAAK;AAC1C,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,MACJ;AAAA,QACE,KAAK,OAAO;AAAA,QACZ,SAAS,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,OAAO,MAAM;AAAA,EACrC;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,cAAc;AAC/C,CAAC;","names":["CardContent"]}
+{"version":3,"sources":["../../../src/components/card/content.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 { CardContentProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardContent = memo(function CardContent({\n  style,\n  ...props\n}: CardContentProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const contentStyle = useMemo(\n    () => [styles.content, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.content],\n  );\n\n  return <View {...props} style={contentStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const contentTokens = theme.components.card.content;\n\n  return StyleSheet.create({\n    content: {\n      gap: contentTokens.gap,\n      padding: contentTokens.padding,\n    },\n  });\n}\n"],"mappings":"AAoBS;AApBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,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;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,gBAAgB,MAAM,WAAW,KAAK;AAE5C,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,KAAK,cAAc;AAAA,MACnB,SAAS,cAAc;AAAA,IACzB;AAAA,EACF,CAAC;AACH;","names":["CardContent"]}

package/dist/components/card/footer.js

@@ -1,26 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { View } from "../atoms/view";
 const CardFooter = memo(function CardFooter2({
   style,
   ...props
 }) {
-  const tokens = useComponentsTokens().card.footer;
   const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
   const footerStyle = useMemo(
-    () => [
-      {
-        gap: tokens.gap,
-        padding: tokens.padding
-      },
-      extractedStyleProps,
-      style
-    ],
-    [extractedStyleProps, style, tokens]
+    () => [styles.footer, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.footer]
   );
   return /* @__PURE__ */ jsx(View, { ...props, style: footerStyle });
 });
+function themedStyles(theme) {
+  const footerTokens = theme.components.card.footer;
+  return StyleSheet.create({
+    footer: {
+      gap: footerTokens.gap,
+      padding: footerTokens.padding
+    }
+  });
+}
 export {
   CardFooter
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/footer.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useComponentsTokens, useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { CardFooterProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardFooter = memo(function CardFooter({\n  style,\n  ...props\n}: CardFooterProps) {\n  const tokens = useComponentsTokens().card.footer;\n  const extractedStyleProps = useStyleProps(props);\n  const footerStyle = useMemo(\n    () => [\n      {\n        gap: tokens.gap,\n        padding: tokens.padding,\n      },\n      extractedStyleProps,\n      style,\n    ],\n    [extractedStyleProps, style, tokens],\n  );\n\n  return <View {...props} style={footerStyle} />;\n});\n"],"mappings":"AAyBS;AAzBT,SAAS,MAAM,eAAe;AAE9B,SAAS,qBAAqB,qBAAqB;AAGnD,SAAS,YAAY;AAEd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,SAAS,oBAAoB,EAAE,KAAK;AAC1C,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,MACJ;AAAA,QACE,KAAK,OAAO;AAAA,QACZ,SAAS,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,OAAO,MAAM;AAAA,EACrC;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,aAAa;AAC9C,CAAC;","names":["CardFooter"]}
+{"version":3,"sources":["../../../src/components/card/footer.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 { CardFooterProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardFooter = memo(function CardFooter({\n  style,\n  ...props\n}: CardFooterProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const footerStyle = useMemo(\n    () => [styles.footer, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.footer],\n  );\n\n  return <View {...props} style={footerStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const footerTokens = theme.components.card.footer;\n\n  return StyleSheet.create({\n    footer: {\n      gap: footerTokens.gap,\n      padding: footerTokens.padding,\n    },\n  });\n}\n"],"mappings":"AAoBS;AApBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,QAAQ,qBAAqB,KAAK;AAAA,IAChD,CAAC,qBAAqB,OAAO,OAAO,MAAM;AAAA,EAC5C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,aAAa;AAC9C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,eAAe,MAAM,WAAW,KAAK;AAE3C,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,KAAK,aAAa;AAAA,MAClB,SAAS,aAAa;AAAA,IACxB;AAAA,EACF,CAAC;AACH;","names":["CardFooter"]}

package/dist/components/card/header.js

@@ -1,26 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
-import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { StyleSheet } from "react-native";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { View } from "../atoms/view";
 const CardHeader = memo(function CardHeader2({
   style,
   ...props
 }) {
-  const tokens = useComponentsTokens().card.header;
   const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
   const headerStyle = useMemo(
-    () => [
-      {
-        gap: tokens.gap,
-        padding: tokens.padding
-      },
-      extractedStyleProps,
-      style
-    ],
-    [extractedStyleProps, style, tokens]
+    () => [styles.header, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.header]
   );
   return /* @__PURE__ */ jsx(View, { ...props, style: headerStyle });
 });
+function themedStyles(theme) {
+  const headerTokens = theme.components.card.header;
+  return StyleSheet.create({
+    header: {
+      gap: headerTokens.gap,
+      padding: headerTokens.padding
+    }
+  });
+}
 export {
   CardHeader
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/header.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useComponentsTokens, useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { CardHeaderProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardHeader = memo(function CardHeader({\n  style,\n  ...props\n}: CardHeaderProps) {\n  const tokens = useComponentsTokens().card.header;\n  const extractedStyleProps = useStyleProps(props);\n  const headerStyle = useMemo(\n    () => [\n      {\n        gap: tokens.gap,\n        padding: tokens.padding,\n      },\n      extractedStyleProps,\n      style,\n    ],\n    [extractedStyleProps, style, tokens],\n  );\n\n  return <View {...props} style={headerStyle} />;\n});\n"],"mappings":"AAyBS;AAzBT,SAAS,MAAM,eAAe;AAE9B,SAAS,qBAAqB,qBAAqB;AAGnD,SAAS,YAAY;AAEd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,SAAS,oBAAoB,EAAE,KAAK;AAC1C,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,MACJ;AAAA,QACE,KAAK,OAAO;AAAA,QACZ,SAAS,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,OAAO,MAAM;AAAA,EACrC;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,aAAa;AAC9C,CAAC;","names":["CardHeader"]}
+{"version":3,"sources":["../../../src/components/card/header.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 { CardHeaderProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardHeader = memo(function CardHeader({\n  style,\n  ...props\n}: CardHeaderProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const headerStyle = useMemo(\n    () => [styles.header, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.header],\n  );\n\n  return <View {...props} style={headerStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const headerTokens = theme.components.card.header;\n\n  return StyleSheet.create({\n    header: {\n      gap: headerTokens.gap,\n      padding: headerTokens.padding,\n    },\n  });\n}\n"],"mappings":"AAoBS;AApBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,QAAQ,qBAAqB,KAAK;AAAA,IAChD,CAAC,qBAAqB,OAAO,OAAO,MAAM;AAAA,EAC5C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,aAAa;AAC9C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,eAAe,MAAM,WAAW,KAAK;AAE3C,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,KAAK,aAAa;AAAA,MAClB,SAAS,aAAa;AAAA,IACxB;AAAA,EACF,CAAC;AACH;","names":["CardHeader"]}

package/dist/components/card/media.js

@@ -1,31 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { useComponentsTokens, useStyleProps } from "@impulse-ui-native/theme";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
 import { View } from "../atoms/view";
 const CardMedia = memo(function CardMedia2({
   style,
   ...props
 }) {
-  const tokens = useComponentsTokens().card;
   const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
   const mediaStyle = useMemo(
-    () => [
-      styles.media,
-      { backgroundColor: tokens.mediaBackgroundColor },
-      extractedStyleProps,
-      style
-    ],
-    [extractedStyleProps, style, tokens.mediaBackgroundColor]
+    () => [styles.media, extractedStyleProps, style],
+    [extractedStyleProps, style, styles.media]
   );
   return /* @__PURE__ */ jsx(View, { ...props, style: mediaStyle });
 });
-const styles = StyleSheet.create({
-  media: {
-    overflow: "hidden",
-    width: "100%"
-  }
-});
+function themedStyles(theme) {
+  return StyleSheet.create({
+    media: {
+      backgroundColor: theme.components.card.mediaBackgroundColor,
+      overflow: "hidden",
+      width: "100%"
+    }
+  });
+}
 export {
   CardMedia
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/media.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { useComponentsTokens, useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { CardMediaProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardMedia = memo(function CardMedia({\n  style,\n  ...props\n}: CardMediaProps) {\n  const tokens = useComponentsTokens().card;\n  const extractedStyleProps = useStyleProps(props);\n  const mediaStyle = useMemo(\n    () => [\n      styles.media,\n      { backgroundColor: tokens.mediaBackgroundColor },\n      extractedStyleProps,\n      style,\n    ],\n    [extractedStyleProps, style, tokens.mediaBackgroundColor],\n  );\n\n  return <View {...props} style={mediaStyle} />;\n});\n\nconst styles = StyleSheet.create({\n  media: {\n    overflow: \"hidden\",\n    width: \"100%\",\n  },\n});\n"],"mappings":"AAwBS;AAxBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAE3B,SAAS,qBAAqB,qBAAqB;AAGnD,SAAS,YAAY;AAEd,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,aAAa;AAAA,IACjB,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,EAAE,iBAAiB,OAAO,qBAAqB;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,qBAAqB,OAAO,OAAO,oBAAoB;AAAA,EAC1D;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,YAAY;AAC7C,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF,CAAC;","names":["CardMedia"]}
+{"version":3,"sources":["../../../src/components/card/media.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 { CardMediaProps } from \"../../types\";\nimport { View } from \"../atoms/view\";\n\nexport const CardMedia = memo(function CardMedia({\n  style,\n  ...props\n}: CardMediaProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n  const mediaStyle = useMemo(\n    () => [styles.media, extractedStyleProps, style],\n    [extractedStyleProps, style, styles.media],\n  );\n\n  return <View {...props} style={mediaStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  return StyleSheet.create({\n    media: {\n      backgroundColor: theme.components.card.mediaBackgroundColor,\n      overflow: \"hidden\",\n      width: \"100%\",\n    },\n  });\n}\n"],"mappings":"AAoBS;AApBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAC3C,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,qBAAqB,KAAK;AAAA,IAC/C,CAAC,qBAAqB,OAAO,OAAO,KAAK;AAAA,EAC3C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,YAAY;AAC7C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,iBAAiB,MAAM,WAAW,KAAK;AAAA,MACvC,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;","names":["CardMedia"]}

package/dist/components/index.d.mts

@@ -1,4 +1,5 @@
 export { Avatar } from './atoms/avatar.mjs';
+export { BadgeRoot as Badge } from './atoms/badge/root.mjs';
 export { View } from './atoms/view.mjs';
 export { SafeAreaView } from './atoms/safe-area-view.mjs';
 export { Typography, TypographyComponent } from './atoms/typography.mjs';
@@ -18,15 +19,16 @@ import '../types/avatar.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
 import '../types/view.types.mjs';
+import '../types/badge.types.mjs';
+import '../types/control-components.types.mjs';
+import '@impulse-ui-native/icon/types';
+import '../types/spinner.types.mjs';
+import '../types/button.types.mjs';
 import '../types/safe-area-view.types.mjs';
 import 'react-native-safe-area-context';
 import '../types/typography.types.mjs';
-import '../types/button.types.mjs';
 import '../types/divider.types.mjs';
 import '../types/icon-button.types.mjs';
-import '@impulse-ui-native/icon/types';
 import '../types/progress.types.mjs';
-import '../types/spinner.types.mjs';
 import '../types/tag.types.mjs';
 import '../types/card.types.mjs';
-import '../types/control-components.types.mjs';

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 export { Avatar } from './components/atoms/avatar.mjs';
+export { BadgeRoot as Badge } from './components/atoms/badge/root.mjs';
 export { View } from './components/atoms/view.mjs';
 export { SafeAreaView } from './components/atoms/safe-area-view.mjs';
 export { Typography, TypographyComponent } from './components/atoms/typography.mjs';
@@ -15,6 +16,7 @@ export { useControlContext } from './components/controls/provider.mjs';
 export { createPreset } from './hocs/create-preset.hoc.mjs';
 export { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from './constants/safe-area-view.constants.mjs';
 export { AvatarImageProps, AvatarProps } from './types/avatar.types.mjs';
+export { BadgeProps, BadgeThemeProps } from './types/badge.types.mjs';
 export { ViewProps } from './types/view.types.mjs';
 export { SafeAreaViewProps } from './types/safe-area-view.types.mjs';
 export { TextProps } from './types/typography.types.mjs';

package/dist/types/badge.types.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ColorValue } from 'react-native';
+import { ComponentSize, BadgeTone, ComponentVariant } from '@impulse-ui-native/theme';
+import { ControlComponentCommonProps } from './control-components.types.mjs';
+import { ViewProps } from './view.types.mjs';
+import '@impulse-ui-native/icon/types';
+import './spinner.types.mjs';
+import './button.types.mjs';
+
+interface BadgeProps extends Omit<ViewProps, "children">, Pick<ControlComponentCommonProps, "PrefixIcon" | "Prefix" | "onPressPrefix" | "SuffixIcon" | "Suffix" | "onPressSuffix"> {
+    children: ReactNode;
+    size?: ComponentSize;
+    tone?: BadgeTone;
+    variant?: ComponentVariant;
+}
+interface BadgeThemeProps {
+    backgroundColor?: ColorValue;
+    color?: ColorValue;
+    size: ComponentSize;
+    tone: BadgeTone;
+    variant: ComponentVariant;
+}
+
+export type { BadgeProps, BadgeThemeProps };

package/dist/types/badge.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=badge.types.js.map

package/dist/types/badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/index.d.mts

@@ -1,4 +1,5 @@
 export { AvatarImageProps, AvatarProps } from './avatar.types.mjs';
+export { BadgeProps, BadgeThemeProps } from './badge.types.mjs';
 export { ViewProps } from './view.types.mjs';
 export { SafeAreaViewProps } from './safe-area-view.types.mjs';
 export { TextProps } from './typography.types.mjs';

package/dist/types/index.js

@@ -1,4 +1,5 @@
 export * from "./avatar.types";
+export * from "./badge.types";
 export * from "./view.types";
 export * from "./safe-area-view.types";
 export * from "./typography.types";

package/dist/types/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./avatar.types\";\nexport * from \"./view.types\";\nexport * from \"./safe-area-view.types\";\nexport * from \"./typography.types\";\nexport * from \"./typography.types\";\nexport * from \"./button.types\";\nexport * from \"./card.types\";\nexport * from \"./divider.types\";\nexport * from \"./icon-button.types\";\nexport * from \"./progress.types\";\nexport * from \"./spinner.types\";\nexport * from \"./tag.types\";\nexport * from \"./control-components.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./avatar.types\";\nexport * from \"./badge.types\";\nexport * from \"./view.types\";\nexport * from \"./safe-area-view.types\";\nexport * from \"./typography.types\";\nexport * from \"./typography.types\";\nexport * from \"./button.types\";\nexport * from \"./card.types\";\nexport * from \"./divider.types\";\nexport * from \"./icon-button.types\";\nexport * from \"./progress.types\";\nexport * from \"./spinner.types\";\nexport * from \"./tag.types\";\nexport * from \"./control-components.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "Foundational UI primitives for building ImpulseUI Native components.",
   "keywords": [
     "react-native",
@@ -28,9 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/theme": "2.8.0",
-    "@impulse-ui-native/icon": "2.8.0",
-    "@impulse-ui-native/core": "2.8.0"
+    "@impulse-ui-native/theme": "2.9.0",
+    "@impulse-ui-native/icon": "2.9.0",
+    "@impulse-ui-native/core": "2.9.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -41,8 +41,8 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-svg": "15.15.4",
     "typescript": "~6.0.3",
-    "@impulse-ui-native/prettier-config": "1.0.0",
     "@impulse-ui-native/eslint-config": "1.0.0",
+    "@impulse-ui-native/prettier-config": "1.0.0",
     "@impulse-ui-native/tsconfig": "1.0.0"
   },
   "peerDependencies": {