npm - @impulse-ui-native/primitives - Versions diffs - 15.0.5 → 17.0.0 - Mend

@impulse-ui-native/primitives 15.0.5 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/README.md +263 -261
package/dist/components/atoms/avatar.js.map +1 -1
package/dist/components/atoms/badge/addon.d.mts +6 -11
package/dist/components/atoms/badge/addon.js.map +1 -1
package/dist/components/atoms/badge/root.js +5 -2
package/dist/components/atoms/badge/root.js.map +1 -1
package/dist/components/atoms/button.js.map +1 -1
package/dist/components/atoms/divider.js.map +1 -1
package/dist/components/atoms/icon-button.js.map +1 -1
package/dist/components/atoms/tag.d.mts +1 -1
package/dist/components/atoms/tag.js +20 -3
package/dist/components/atoms/tag.js.map +1 -1
package/dist/components/controls/container.js.map +1 -1
package/dist/components/controls/container.styles.js.map +1 -1
package/dist/components/controls/field.js.map +1 -1
package/dist/components/controls/icon.js.map +1 -1
package/dist/components/controls/input.js.map +1 -1
package/dist/components/controls/label.js.map +1 -1
package/dist/components/controls/loader.js.map +1 -1
package/dist/components/controls/placeholder.js.map +1 -1
package/dist/components/controls/provider.js.map +1 -1
package/dist/components/controls/root.js.map +1 -1
package/dist/components/controls/trigger.js.map +1 -1
package/dist/components/controls/value.js.map +1 -1
package/dist/types/badge-addon.types.d.mts +20 -0
package/dist/types/badge-addon.types.js +1 -0
package/dist/types/badge-addon.types.js.map +1 -0
package/package.json +4 -4

package/README.md CHANGED Viewed

@@ -1,261 +1,263 @@
-# @impulse-ui-native/primitives
-Token-aware React Native building blocks used directly by applications and by the higher-level Impulse UI Native packages.
-## Installation
-```sh
-pnpm add @impulse-ui-native/primitives
-```
-Render primitives inside `ThemeProvider` from `@impulse-ui-native/theme`.
-`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Icon-based primitives require `react-native-svg`:
-```sh
-pnpm add react-native-safe-area-context react-native-svg
-```
-## Main exports
-- `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`, 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.
-- `Divider` separates content horizontally or vertically with logical insets and semantic colors.
-- `Avatar` represents identity with shared visual variants, images, initials, custom fallbacks, and semantic presence status.
-- `Control` is a compound control system with `Provider`, `Root`, `Label`, `Container`, `Addon`, `Input`, `Placeholder`, `Value`, `Loader`, and `Error` parts.
-- `createPreset` creates reusable themed typography presets.
-- Public prop types describe every primitive and control part.
-Typography presets update their colors with the active theme:
-- `Subtitle1`, `Subtitle2`, `BodySmall`, `Caption`, `Helper`, `Overline`, and
-  `Eyebrow` use `theme.colors.text.secondary` for supporting text.
-- The other presets use `theme.colors.text.primary` for headings and main content.
-`createPreset` accepts a theme-based `color` in its configuration and falls back
-to `text.primary` when omitted. Explicit `color` props override the preset color;
-`style.color` takes precedence over both. Use tertiary, disabled, inverse, and
-feedback colors explicitly when the surrounding component or state requires them.
-Preset and explicit `fontFamily` and `fontVariant` values are honored, including
-monospace Code. `numeric` selects tabular numbers; style overrides apply last.
-## Example
-```tsx
-import { Card } from "@impulse-ui-native/card";
-import {
-  Avatar,
-  Badge,
-  Button,
-  Divider,
-  Spinner,
-  Tag,
-  Typography,
-  View,
-} from "@impulse-ui-native/primitives";
-import { Progress } from "@impulse-ui-native/progress";
-import { useSpace } from "@impulse-ui-native/theme";
-export function ProfileSummary() {
-  const space = useSpace();
-  return (
-    <View gap={space.md} padding={space.lg}>
-      <Typography.Title3>Profile</Typography.Title3>
-      <Avatar initials="AK" status="online" variant="soft" />
-      <Tag label="Active" tone="success" />
-      <Badge tone="success" variant="soft">
-        Active
-      </Badge>
-      <Spinner size="small" tone="secondary" />
-      <Progress value={65} />
-      <Card.Root>
-        <Card.Header>
-          <Typography.Title4>Account activity</Typography.Title4>
-        </Card.Header>
-        <Card.Content>
-          <Typography.Body>Three new updates are available.</Typography.Body>
-        </Card.Content>
-      </Card.Root>
-      <Divider inset="both" />
-      <Button variant="filled" onPress={() => {}}>
-        Continue
-      </Button>
-    </View>
-  );
-}
-```
-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`.
-`Control.Trigger` combines the field container's themed geometry with a
-Pressable. It respects group and local disabling and accepts supplied children,
-style props, and function-valued pressable styles. `Control.Icon` renders a
-caller-selected icon with the current field's addon color.
-`Control.Field` assembles a label, trigger, optional prefix/suffix slots, and an
-error label for a read-only selection field. The caller supplies the value,
-placeholder, icons, and behavior; this convenience component does not choose
-default icons or manage selection state.
-```tsx
-<Control.Field
-  label="Destination"
-  onPress={openDestinationPicker}
-  prefix={<Control.Icon icon={LocationIcon} />}
->
-  <Control.Value>{destination}</Control.Value>
-</Control.Field>
-```
-`Control.Addon` and `Control.Error` render supplied children. Addons own spacing
-and optional press behavior, including group/local disabling; the parent chooses
-and renders icons or custom content. Error owns error-label styling; the parent
-chooses the text and whether to render the slot. `Input`, `Select`, date/time
-pickers, `Textarea`, and `FormField` assemble these children explicitly.
-For direct composition, migrate `icon` and `Content` props to addon children and
-supply error text instead of relying on `Control.Provider.error` to render it:
-```tsx
-<>
-  <Control.Addon onPress={onPressPrefix}>
-    <Icon icon={PrefixIcon} color={addonColor} />
-  </Control.Addon>
-  {error ? <Control.Error>{error}</Control.Error> : null}
-</>
-```
-Resolve `addonColor` from
-`getFieldStateTokens(theme.components.controlAddon.variants[variant], { disabled, error: Boolean(error) }).iconColor`
-using the current theme. The provider's error value continues to drive field
-appearance, but does not inject label content.
-`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.
-`Divider` defaults to a horizontal separator using `tone="default"`. Use start/end insets to align it with surrounding content, 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.
-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.
-Badges follow their parent's `alignItems` for cross-axis alignment. For example,
-use `alignItems="center"` on a column to center badges horizontally. Use
-`alignSelf` on a badge when it needs a different alignment from its siblings.
-## Dedicated component packages
-Card, List, Progress, and their prop types are exported from `@impulse-ui-native/card`, `@impulse-ui-native/list`, and `@impulse-ui-native/progress`, respectively. They remain available through `@impulse-ui-native/toolkit`. Migrate direct primitives imports to their owning packages.
-## Shared shadow and code-font defaults
-`View` and `Pressable` resolve semantic shadow levels from the active
-`theme.shadows` scale, including Android elevation. Explicit shadow style props
-and style overrides still take precedence. Configure `theme.codeFontFamily`
-to change `Typography.Code` globally; its default remains `monospace`.
-## Field layout
-`Control.Root` uses normal parent stretching rather than a forced width.
-`Control.Field` accepts flex, dimension, and spacing props on its outer root.
-In a column, fields stretch horizontally by default without growing vertically.
-In a row, set `flex={1}` on each field to share the available width. If the
-parent centers its children, use `alignSelf="stretch"` or an explicit `width`.
-## Pressable styling
-`Pressable` accepts the same direct styling props as `View`: spacing, colors,
-opacity, shadows, borders, radii, flex layout, positioning, and dimensions. Both
-share the exported `ViewStyleProps` contract. Native `style` objects or callbacks override
-direct style props; `pressedStyle` applies last while pressed.
-```tsx
-<Pressable
-  flex={1}
-  flexDirection="row"
-  alignItems="center"
-  gap={8}
-  padding={16}
-  backgroundColor={colors.surface.subtle.value}
-  borderColor={colors.border.default.value}
-  borderWidth={1}
-  borderRadius={radii.md}
->
-  <Typography.Master>Continue</Typography.Master>
-</Pressable>
-```
-Text and icons keep their own foreground styling, as with `View`.
-## Field appearance
-Rectangular fields support `variant="outlined" | "soft" | "filled"` and
-`tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
-Outlined uses a transparent surface with a tone border; soft uses a subtle tone
-surface; filled uses the tone fill with its paired foreground. Colors come from
-the active theme in both schemes. Error styling overrides the selected tone;
-disabled fields use neutral styling and block interaction.
-Customize `components.controlContainer.colors[tone][variant][state]`,
-`controlInput.colors[tone][variant][state]`, and
-`controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
-the previous `variants[variant][state]` maps.
-## Button tones
-`Button` and `IconButton` accept `tone="neutral" | "primary" | "secondary"`
-independently of `variant="filled" | "outlined" | "soft" | "ghost"`.
-The default tone is `primary`, preserving the existing default appearances.
-Neutral uses the neutral palette; secondary uses the secondary brand palette.
-Filled uses the tone fill and paired foreground, outlined uses a tone border,
-soft uses a subtle tone surface, and ghost uses tone content on a transparent surface.
-Loading indicators inherit the resolved foreground. Disabled appearances remain
-neutral and both disabled and loading states prevent interaction.
-```tsx
-<Button variant="soft" tone="neutral">Cancel</Button>
-<Button variant="filled" tone="primary">Save</Button>
-<IconButton icon={SparkleIcon} variant="outlined" tone="secondary" />
-```
-Custom action tokens move from `variants[variant][state]` to
-`components.button.colors[tone][variant][state]` and
-`components.iconButton.colors[tone][variant][state]`. Each map is authored
-explicitly for direct lookup. For custom Button children, style their foreground
-using the matching resolved action tokens; string children are styled automatically.
-## Tag and Avatar tones
-`Tag` now uses `tone` instead of `color`, with the exported `TagTone` type replacing
-`TagColor`. It supports `neutral`, `primary`, `secondary`, `error`, `warning`,
-`success`, and `info`; existing feedback palettes remain available. The default is
-`primary`. Use `<Tag label="Active" tone="success" />`.
-`Avatar` accepts `tone="neutral" | "primary" | "secondary"`, defaulting to
-`primary`, across filled, outlined, and soft variants. Tone affects the fallback
-surface, initials, and border; images and presence/status colors retain their own
-meaning. Avatar appearance tokens move to `components.avatar.colors[tone][variant]`.
-Badge, Tag, IconView, and field addon icons share the enabled variant/tone palette with Button and IconButton: primary soft uses secondary fill/contrast, secondary soft uses subtle fill with secondary contrast, and neutral soft uses subtle neutral fill with primary text.
-Selected control surfaces and disabled selected surfaces share the Button palette, including field borders, Tag borders, slider thumbs/bubbles, and segmented items. Entered text and validation retain their own semantic roles.
-## Repository palette consistency
-Spinner uses the shared primary/secondary/neutral stroke accents, plus inverse.
-Divider adds neutral and secondary tones alongside primary/inverse and the existing
-subtle/default/strong border-intensity aliases. Its default is `tone="default"`.
-Feedback tone names are shared through FeedbackTone; generic brand tones through
-ComponentTone. Typography foregrounds and raw Icon color/fill remain explicit
-semantic or caller-selected colors, rather than a second tone API.
-## Agent and design reference
-Start with the [capability guide](../../docs/design-system/capabilities/primitives.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.
+# @impulse-ui-native/primitives
+Token-aware React Native building blocks used directly by applications and by the higher-level Impulse UI Native packages.
+## Installation
+```sh
+pnpm add @impulse-ui-native/primitives
+```
+Render primitives inside `ThemeProvider` from `@impulse-ui-native/theme`.
+`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Icon-based primitives require `react-native-svg`:
+```sh
+pnpm add react-native-safe-area-context react-native-svg
+```
+## Main exports
+- `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`, 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.
+- `Divider` separates content horizontally or vertically with logical insets and semantic colors.
+- `Avatar` represents identity with shared visual variants, images, initials, custom fallbacks, and semantic presence status.
+- `Control` is a compound control system with `Provider`, `Root`, `Label`, `Container`, `Addon`, `Input`, `Placeholder`, `Value`, `Loader`, and `Error` parts.
+- `createPreset` creates reusable themed typography presets.
+- Public prop types describe every primitive and control part.
+Typography presets update their colors with the active theme:
+- `Subtitle1`, `Subtitle2`, `BodySmall`, `Caption`, `Helper`, `Overline`, and
+  `Eyebrow` use `theme.colors.text.secondary` for supporting text.
+- The other presets use `theme.colors.text.primary` for headings and main content.
+`createPreset` accepts a theme-based `color` in its configuration and falls back
+to `text.primary` when omitted. Explicit `color` props override the preset color;
+`style.color` takes precedence over both. Use tertiary, disabled, inverse, and
+feedback colors explicitly when the surrounding component or state requires them.
+Preset and explicit `fontFamily` and `fontVariant` values are honored, including
+monospace Code. `numeric` selects tabular numbers; style overrides apply last.
+## Example
+```tsx
+import { Card } from "@impulse-ui-native/card";
+import {
+  Avatar,
+  Badge,
+  Button,
+  Divider,
+  Spinner,
+  Tag,
+  Typography,
+  View,
+} from "@impulse-ui-native/primitives";
+import { Progress } from "@impulse-ui-native/progress";
+import { useSpace } from "@impulse-ui-native/theme";
+export function ProfileSummary() {
+  const space = useSpace();
+  return (
+    <View gap={space.md} padding={space.lg}>
+      <Typography.Title3>Profile</Typography.Title3>
+      <Avatar initials="AK" status="online" variant="soft" />
+      <Tag label="Active" tone="success" />
+      <Badge tone="success" variant="soft">
+        Active
+      </Badge>
+      <Spinner size="small" tone="secondary" />
+      <Progress value={65} />
+      <Card.Root>
+        <Card.Header>
+          <Typography.Title4>Account activity</Typography.Title4>
+        </Card.Header>
+        <Card.Content>
+          <Typography.Body>Three new updates are available.</Typography.Body>
+        </Card.Content>
+      </Card.Root>
+      <Divider inset="both" />
+      <Button variant="filled" onPress={() => {}}>
+        Continue
+      </Button>
+    </View>
+  );
+}
+```
+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`.
+`Control.Trigger` combines the field container's themed geometry with a
+Pressable. It respects group and local disabling and accepts supplied children,
+style props, and function-valued pressable styles. `Control.Icon` renders a
+caller-selected icon with the current field's addon color.
+`Control.Field` assembles a label, trigger, optional prefix/suffix slots, and an
+error label for a read-only selection field. The caller supplies the value,
+placeholder, icons, and behavior; this convenience component does not choose
+default icons or manage selection state.
+```tsx
+<Control.Field
+  label="Destination"
+  onPress={openDestinationPicker}
+  prefix={<Control.Icon icon={LocationIcon} />}
+>
+  <Control.Value>{destination}</Control.Value>
+</Control.Field>
+```
+`Control.Addon` and `Control.Error` render supplied children. Addons own spacing
+and optional press behavior, including group/local disabling; the parent chooses
+and renders icons or custom content. Error owns error-label styling; the parent
+chooses the text and whether to render the slot. `Input`, `Select`, date/time
+pickers, `Textarea`, and `FormField` assemble these children explicitly.
+For direct composition, migrate `icon` and `Content` props to addon children and
+supply error text instead of relying on `Control.Provider.error` to render it:
+```tsx
+<>
+  <Control.Addon onPress={onPressPrefix}>
+    <Icon icon={PrefixIcon} color={addonColor} />
+  </Control.Addon>
+  {error ? <Control.Error>{error}</Control.Error> : null}
+</>
+```
+Resolve `addonColor` from
+`getFieldStateTokens(theme.components.controlAddon.variants[variant], { disabled, error: Boolean(error) }).iconColor`
+using the current theme. The provider's error value continues to drive field
+appearance, but does not inject label content.
+`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.
+`Divider` defaults to a horizontal separator using `tone="default"`. Use start/end insets to align it with surrounding content, 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.
+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.
+Badge text and Tag labels stay on one line and truncate with a trailing ellipsis when constrained by available width. Their containers shrink within rows while icons and close actions retain their space. Use `style.width` or `style.maxWidth` for a specific limit; custom Badge children own their text overflow behavior.
+Badges follow their parent's `alignItems` for cross-axis alignment. For example,
+use `alignItems="center"` on a column to center badges horizontally. Use
+`alignSelf` on a badge when it needs a different alignment from its siblings.
+## Dedicated component packages
+Card, List, Progress, and their prop types are exported from `@impulse-ui-native/card`, `@impulse-ui-native/list`, and `@impulse-ui-native/progress`, respectively. They remain available through `@impulse-ui-native/toolkit`. Migrate direct primitives imports to their owning packages.
+## Shared shadow and code-font defaults
+`View` and `Pressable` resolve semantic shadow levels from the active
+`theme.shadows` scale, including Android elevation. Explicit shadow style props
+and style overrides still take precedence. Configure `theme.codeFontFamily`
+to change `Typography.Code` globally; its default remains `monospace`.
+## Field layout
+`Control.Root` uses normal parent stretching rather than a forced width.
+`Control.Field` accepts flex, dimension, and spacing props on its outer root.
+In a column, fields stretch horizontally by default without growing vertically.
+In a row, set `flex={1}` on each field to share the available width. If the
+parent centers its children, use `alignSelf="stretch"` or an explicit `width`.
+## Pressable styling
+`Pressable` accepts the same direct styling props as `View`: spacing, colors,
+opacity, shadows, borders, radii, flex layout, positioning, and dimensions. Both
+share the exported `ViewStyleProps` contract. Native `style` objects or callbacks override
+direct style props; `pressedStyle` applies last while pressed.
+```tsx
+<Pressable
+  flex={1}
+  flexDirection="row"
+  alignItems="center"
+  gap={8}
+  padding={16}
+  backgroundColor={colors.surface.subtle.value}
+  borderColor={colors.border.default.value}
+  borderWidth={1}
+  borderRadius={radii.md}
+>
+  <Typography.Master>Continue</Typography.Master>
+</Pressable>
+```
+Text and icons keep their own foreground styling, as with `View`.
+## Field appearance
+Rectangular fields support `variant="outlined" | "soft" | "filled"` and
+`tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
+Outlined uses a transparent surface with a tone border; soft uses a subtle tone
+surface; filled uses the tone fill with its paired foreground. Colors come from
+the active theme in both schemes. Error styling overrides the selected tone;
+disabled fields use neutral styling and block interaction.
+Customize `components.controlContainer.colors[tone][variant][state]`,
+`controlInput.colors[tone][variant][state]`, and
+`controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
+the previous `variants[variant][state]` maps.
+## Button tones
+`Button` and `IconButton` accept `tone="neutral" | "primary" | "secondary"`
+independently of `variant="filled" | "outlined" | "soft" | "ghost"`.
+The default tone is `primary`, preserving the existing default appearances.
+Neutral uses the neutral palette; secondary uses the secondary brand palette.
+Filled uses the tone fill and paired foreground, outlined uses a tone border,
+soft uses a subtle tone surface, and ghost uses tone content on a transparent surface.
+Loading indicators inherit the resolved foreground. Disabled appearances remain
+neutral and both disabled and loading states prevent interaction.
+```tsx
+<Button variant="soft" tone="neutral">Cancel</Button>
+<Button variant="filled" tone="primary">Save</Button>
+<IconButton icon={SparkleIcon} variant="outlined" tone="secondary" />
+```
+Custom action tokens move from `variants[variant][state]` to
+`components.button.colors[tone][variant][state]` and
+`components.iconButton.colors[tone][variant][state]`. Each map is authored
+explicitly for direct lookup. For custom Button children, style their foreground
+using the matching resolved action tokens; string children are styled automatically.
+## Tag and Avatar tones
+`Tag` now uses `tone` instead of `color`, with the exported `TagTone` type replacing
+`TagColor`. It supports `neutral`, `primary`, `secondary`, `error`, `warning`,
+`success`, and `info`; existing feedback palettes remain available. The default is
+`primary`. Use `<Tag label="Active" tone="success" />`.
+`Avatar` accepts `tone="neutral" | "primary" | "secondary"`, defaulting to
+`primary`, across filled, outlined, and soft variants. Tone affects the fallback
+surface, initials, and border; images and presence/status colors retain their own
+meaning. Avatar appearance tokens move to `components.avatar.colors[tone][variant]`.
+Badge, Tag, IconView, and field addon icons share the enabled variant/tone palette with Button and IconButton: primary soft uses secondary fill/contrast, secondary soft uses subtle fill with secondary contrast, and neutral soft uses subtle neutral fill with primary text.
+Selected control surfaces and disabled selected surfaces share the Button palette, including field borders, Tag borders, slider thumbs/bubbles, and segmented items. Entered text and validation retain their own semantic roles.
+## Repository palette consistency
+Spinner uses the shared primary/secondary/neutral stroke accents, plus inverse.
+Divider adds neutral and secondary tones alongside primary/inverse and the existing
+subtle/default/strong border-intensity aliases. Its default is `tone="default"`.
+Feedback tone names are shared through FeedbackTone; generic brand tones through
+ComponentTone. Typography foregrounds and raw Icon color/fill remain explicit
+semantic or caller-selected colors, rather than a second tone API.
+## Agent and design reference
+Start with the [capability guide](../../docs/design-system/capabilities/primitives.md) for supported exports, props, defaults, composition rules, setup, and recipes. Use the [component chooser](../../docs/design-system/component-chooser.md) to select a package. These references describe the repository source; verify your installed package version before copying examples.

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

	@@ -1 +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 fallback,\n imageProps,\n initials,\n size = \"medium\",\n source,\n status,\n statusColor,\n style,\n variant = \"filled\",\n tone = \"primary\",\n ...props\n}: AvatarProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { size, status, statusColor, variant, tone },\n [size, status, statusColor, variant, tone],\n );\n\n const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n const showInitials =\n (fallback === null \|\| fallback === undefined) && initials;\n\n return (\n <View {...props} style={containerStyle}>\n <View style={styles.content}>\n {fallback}\n {showInitials ? <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) {\n return null;\n }\n\n return (\n <Image\n resizeMode=\"cover\"\n {...imageProps}\n onError={handleError}\n source={source}\n style={imageStyle}\n />\n );\n});\n\ninterface AvatarThemeProps {\n size: NonNullable<AvatarProps[\"size\"]>;\n status: AvatarProps[\"status\"];\n statusColor: AvatarProps[\"statusColor\"];\n variant: NonNullable<AvatarProps[\"variant\"]>;\n tone: NonNullable<AvatarProps[\"tone\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n const { size, status, statusColor, variant, tone } = props;\n const avatarTokens = theme.components.avatar;\n const sizeTokens = avatarTokens.sizes[size];\n const variantTokens = avatarTokens.colors[tone][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":"AA0CM,SAEkB,KAFlB;AAzCN,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,OAAO,YAAY,YAAY;AAGxC,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAgB;AACd,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,QAAQ,aAAa,SAAS,KAAK;AAAA,IAC3C,CAAC,MAAM,QAAQ,aAAa,SAAS,IAAI;AAAA,EAC3C;AAEA,QAAM,YAAY,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,CAAC;AAEhE,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,gBACH,aAAa,QAAQ,aAAa,WAAc;AAEnD,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA,yBAAC,QAAK,OAAO,OAAO,SACjB;AAAA;AAAA,MACA,eAAe,oBAAC,QAAK,OAAO,OAAO,UAAW,oBAAS,IAAU;AAAA,MAEjE,SACC;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA;AAAA,QAFK;AAAA,MAGP,IACE;AAAA,OACN;AAAA,IAEC,SAAS,oBAAC,QAAK,OAAO,OAAO,QAAQ,IAAK;AAAA,KAC7C;AAEJ,CAAC;AAOD,MAAM,mBAAmB,KAAK,SAASC,kBAAiB;AAAA,EACtD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU;AACT,kBAAY,IAAI;AAChB,kBAAY,UAAU,KAAK;AAAA,IAC7B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,aAAa,OAAO,YAAY,KAAK;AAAA,IAC5C,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACV,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AAUD,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,QAAQ,aAAa,SAAS,KAAK,IAAI;AACrD,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,OAAO,IAAI,EAAE,OAAO;AAEvD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO,WAAW;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB,cAAc;AAAA,MAC/B,aAAa,cAAc;AAAA,MAC3B,cAAc,WAAW,OAAO;AAAA,MAChC,aAAa,aAAa;AAAA,MAC1B,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,OAAO,cAAc;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,MACN,iBACE,gBAAgB,SAAS,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/D,aAAa,aAAa;AAAA,MAC1B,cAAc,WAAW,aAAa;AAAA,MACtC,aAAa,WAAW;AAAA,MACxB,QAAQ;AAAA,MACR,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO,WAAW;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEA,MAAM,eAAe,WAAW,OAAO;AAAA,EACrC,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;","names":["Avatar","AvatarImageLayer"]}
1	+ {"version":3,"sources":["../../../src/components/atoms/avatar.tsx"],"sourcesContent":["import type { ImageProps } from \"react-native\";\r\nimport { memo, useCallback, useMemo, useState } from \"react\";\r\nimport { Image, StyleSheet, Text } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { AvatarProps } from \"../../types\";\r\nimport { View } from \"./view\";\r\n\r\nexport const Avatar = memo(function Avatar({\r\n fallback,\r\n imageProps,\r\n initials,\r\n size = \"medium\",\r\n source,\r\n status,\r\n statusColor,\r\n style,\r\n variant = \"filled\",\r\n tone = \"primary\",\r\n ...props\r\n}: AvatarProps) {\r\n const extractedStyleProps = useStyleProps(props);\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { size, status, statusColor, variant, tone },\r\n [size, status, statusColor, variant, tone],\r\n );\r\n\r\n const sourceKey = useMemo(() => JSON.stringify(source), [source]);\r\n\r\n const containerStyle = useMemo(\r\n () => [styles.container, extractedStyleProps, style],\r\n [extractedStyleProps, style, styles.container],\r\n );\r\n\r\n const showInitials =\r\n (fallback === null \|\| fallback === undefined) && initials;\r\n\r\n return (\r\n <View {...props} style={containerStyle}>\r\n <View style={styles.content}>\r\n {fallback}\r\n {showInitials ? <Text style={styles.initials}>{initials}</Text> : null}\r\n\r\n {source ? (\r\n <AvatarImageLayer\r\n key={sourceKey}\r\n imageProps={imageProps}\r\n source={source}\r\n />\r\n ) : null}\r\n </View>\r\n\r\n {status ? <View style={styles.status} /> : null}\r\n </View>\r\n );\r\n});\r\n\r\ninterface AvatarImageLayerProps {\r\n imageProps: AvatarProps[\"imageProps\"];\r\n source: NonNullable<AvatarProps[\"source\"]>;\r\n}\r\n\r\nconst AvatarImageLayer = memo(function AvatarImageLayer({\r\n imageProps,\r\n source,\r\n}: AvatarImageLayerProps) {\r\n const [hasError, setHasError] = useState(false);\r\n\r\n const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\r\n (event) => {\r\n setHasError(true);\r\n imageProps?.onError?.(event);\r\n },\r\n [imageProps],\r\n );\r\n\r\n const imageStyle = useMemo(\r\n () => [staticStyles.image, imageProps?.style],\r\n [imageProps?.style],\r\n );\r\n\r\n if (hasError) {\r\n return null;\r\n }\r\n\r\n return (\r\n <Image\r\n resizeMode=\"cover\"\r\n {...imageProps}\r\n onError={handleError}\r\n source={source}\r\n style={imageStyle}\r\n />\r\n );\r\n});\r\n\r\ninterface AvatarThemeProps {\r\n size: NonNullable<AvatarProps[\"size\"]>;\r\n status: AvatarProps[\"status\"];\r\n statusColor: AvatarProps[\"statusColor\"];\r\n variant: NonNullable<AvatarProps[\"variant\"]>;\r\n tone: NonNullable<AvatarProps[\"tone\"]>;\r\n}\r\n\r\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\r\n const { size, status, statusColor, variant, tone } = props;\r\n const avatarTokens = theme.components.avatar;\r\n const sizeTokens = avatarTokens.sizes[size];\r\n const variantTokens = avatarTokens.colors[tone][variant];\r\n\r\n return StyleSheet.create({\r\n container: {\r\n flexShrink: 0,\r\n height: sizeTokens.size,\r\n position: \"relative\",\r\n width: sizeTokens.size,\r\n },\r\n content: {\r\n alignItems: \"center\",\r\n backgroundColor: variantTokens.backgroundColor,\r\n borderColor: variantTokens.borderColor,\r\n borderRadius: sizeTokens.size / 2,\r\n borderWidth: avatarTokens.borderWidth,\r\n height: \"100%\",\r\n justifyContent: \"center\",\r\n overflow: \"hidden\",\r\n width: \"100%\",\r\n },\r\n initials: {\r\n color: variantTokens.color,\r\n fontFamily: avatarTokens.fontFamily,\r\n fontSize: sizeTokens.fontSize,\r\n textAlign: \"center\",\r\n },\r\n status: {\r\n backgroundColor:\r\n statusColor ?? (status ? avatarTokens.statusColors[status] : undefined),\r\n borderColor: avatarTokens.statusBorderColor,\r\n borderRadius: sizeTokens.statusSize / 2,\r\n borderWidth: sizeTokens.statusBorderWidth,\r\n bottom: 0,\r\n height: sizeTokens.statusSize,\r\n position: \"absolute\",\r\n right: 0,\r\n width: sizeTokens.statusSize,\r\n },\r\n });\r\n}\r\n\r\nconst staticStyles = StyleSheet.create({\r\n image: {\r\n bottom: 0,\r\n height: \"100%\",\r\n left: 0,\r\n position: \"absolute\",\r\n right: 0,\r\n top: 0,\r\n width: \"100%\",\r\n },\r\n});\r\n"],"mappings":"AA0CM,SAEkB,KAFlB;AAzCN,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,OAAO,YAAY,YAAY;AAGxC,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAgB;AACd,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,QAAQ,aAAa,SAAS,KAAK;AAAA,IAC3C,CAAC,MAAM,QAAQ,aAAa,SAAS,IAAI;AAAA,EAC3C;AAEA,QAAM,YAAY,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,CAAC;AAEhE,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,gBACH,aAAa,QAAQ,aAAa,WAAc;AAEnD,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA,yBAAC,QAAK,OAAO,OAAO,SACjB;AAAA;AAAA,MACA,eAAe,oBAAC,QAAK,OAAO,OAAO,UAAW,oBAAS,IAAU;AAAA,MAEjE,SACC;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA;AAAA,QAFK;AAAA,MAGP,IACE;AAAA,OACN;AAAA,IAEC,SAAS,oBAAC,QAAK,OAAO,OAAO,QAAQ,IAAK;AAAA,KAC7C;AAEJ,CAAC;AAOD,MAAM,mBAAmB,KAAK,SAASC,kBAAiB;AAAA,EACtD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU;AACT,kBAAY,IAAI;AAChB,kBAAY,UAAU,KAAK;AAAA,IAC7B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,aAAa,OAAO,YAAY,KAAK;AAAA,IAC5C,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACV,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AAUD,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,QAAQ,aAAa,SAAS,KAAK,IAAI;AACrD,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,OAAO,IAAI,EAAE,OAAO;AAEvD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO,WAAW;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB,cAAc;AAAA,MAC/B,aAAa,cAAc;AAAA,MAC3B,cAAc,WAAW,OAAO;AAAA,MAChC,aAAa,aAAa;AAAA,MAC1B,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,OAAO,cAAc;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,MACN,iBACE,gBAAgB,SAAS,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/D,aAAa,aAAa;AAAA,MAC1B,cAAc,WAAW,aAAa;AAAA,MACtC,aAAa,WAAW;AAAA,MACxB,QAAQ;AAAA,MACR,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO,WAAW;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEA,MAAM,eAAe,WAAW,OAAO;AAAA,EACrC,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;","names":["Avatar","AvatarImageLayer"]}

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

@@ -1,19 +1,14 @@
 import * as react from 'react';
-import { ComponentType } from 'react';
-import { IconProps } from '@impulse-ui-native/icon/types';
-import { PressableCoreProps } from '../../../types/button.types.mjs';
+import { BadgeAddonProps } from '../../../types/badge-addon.types.mjs';
+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/button.types.mjs';
 import '../../../types/view.types.mjs';
+import '../../../types/spinner.types.mjs';
-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.Element | null>;
 export { BadgeAddon };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import ~~type~~ { ~~ComponentType } from \"react\";\nimport {~~ memo, useMemo } from \"react\";\n\~~nimport type { IconProps } from~~ \~~"@impulse-ui-native/icon/types\";\~~nimport { Icon } from \"@impulse-ui-native/icon\";\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 = onPress ? Pressable : View;\n const content = useMemo(() => {\n if (Content) {\n return <Content />;\n }\n\n if (IconComponent) {\n return <Icon color={color} icon={IconComponent} size={iconSize} />;\n }\n\n return null;\n }, [color, Content, iconSize, IconComponent]);\n\n if (!content) {\n return null;\n }\n\n return (\n <Container hitSlop={hitSlop} onPress={onPress}>\n {content}\n </Container>\n );\n});\n"],"mappings":"~~AA8Ba~~;~~AA7Bb~~,SAAS,MAAM,eAAe;~~AAG9B~~,SAAS,YAAY;AAGrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;~~AAWd~~,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,UAAU,YAAY;AACxC,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,eAAe;AACjB,aAAO,oBAAC,QAAK,OAAc,MAAM,eAAe,MAAM,UAAU;AAAA,IAClE;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,SAAS,UAAU,aAAa,CAAC;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}
1	+ {"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\n\r\nimport { Icon } from \"@impulse-ui-native/icon\";\r\n\r\nimport type { BadgeAddonProps } from \"../../../types/badge-addon.types\";\r\nimport { Pressable } from \"../pressable\";\r\nimport { View } from \"../view\";\r\n\r\nexport const BadgeAddon = memo(function BadgeAddon({\r\n color,\r\n Content,\r\n hitSlop,\r\n iconSize,\r\n IconComponent,\r\n onPress,\r\n}: BadgeAddonProps) {\r\n const Container = onPress ? Pressable : View;\r\n const content = useMemo(() => {\r\n if (Content) {\r\n return <Content />;\r\n }\r\n\r\n if (IconComponent) {\r\n return <Icon color={color} icon={IconComponent} size={iconSize} />;\r\n }\r\n\r\n return null;\r\n }, [color, Content, iconSize, IconComponent]);\r\n\r\n if (!content) {\r\n return null;\r\n }\r\n\r\n return (\r\n <Container hitSlop={hitSlop} onPress={onPress}>\r\n {content}\r\n </Container>\r\n );\r\n});\r\n"],"mappings":"AAmBa;AAnBb,SAAS,MAAM,eAAe;AAE9B,SAAS,YAAY;AAGrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAEd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,UAAU,YAAY;AACxC,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,eAAe;AACjB,aAAO,oBAAC,QAAK,OAAc,MAAM,eAAe,MAAM,UAAU;AAAA,IAClE;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,SAAS,UAAU,aAAa,CAAC;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}

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

@@ -51,7 +51,7 @@ const BadgeRoot = memo(function BadgeRoot2({
         onPress: onPressPrefix
       }
     ),
-    isTextChild ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.label, children }) : children,
+    isTextChild ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, ellipsizeMode: "tail", style: styles.label, children }) : children,
     /* @__PURE__ */ jsx(
       BadgeAddon,
       {
@@ -74,7 +74,8 @@ function themedStyles(theme, props) {
     container: {
       alignItems: "center",
       flexDirection: "row",
-      flexShrink: 0,
+      flexShrink: 1,
+      maxWidth: "100%",
       justifyContent: "center",
       borderRadius: badgeTokens.borderRadius,
       borderWidth: badgeTokens.borderWidth,
@@ -86,6 +87,8 @@ function themedStyles(theme, props) {
       borderColor: variantTokens.borderColor
     },
     label: {
+      flexShrink: 1,
+      minWidth: 0,
       textAlign: "center",
       fontFamily: badgeTokens.fontFamily,
       fontSize: sizeTokens.fontSize,

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

	@@ -1 +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 backgroundColor,\n children,\n color,\n Prefix,\n PrefixIcon,\n onPressPrefix,\n onPressSuffix,\n size = \"medium\",\n style,\n Suffix,\n SuffixIcon,\n tone = \"primary\",\n variant = \"filled\",\n ...props\n}: BadgeProps) {\n const tokens = useComponentsTokens();\n\n const badgeTokens = tokens.badge;\n const sizeTokens = badgeTokens.sizes[size];\n\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { backgroundColor, color, size, tone, variant },\n [backgroundColor, color, size, tone, variant],\n );\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n const affixColor =\n typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n const isTextChild =\n typeof children === \"string\" \|\| typeof children === \"number\";\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 {isTextChild ? (\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 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":"AAsDI,SACE,KADF;AAtDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,QAAM,cACJ,OAAO,aAAa,YAAY,OAAO,aAAa;AAEtD,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,cACC,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,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"]}
1	+ {"version":3,"sources":["../../../../src/components/atoms/badge/root.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet, Text } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport {\r\n useComponentsTokens,\r\n useStyleProps,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { BadgeProps, BadgeThemeProps } from \"../../../types\";\r\nimport { View } from \"../view\";\r\nimport { BadgeAddon } from \"./addon\";\r\n\r\nexport const BadgeRoot = memo(function BadgeRoot({\r\n backgroundColor,\r\n children,\r\n color,\r\n Prefix,\r\n PrefixIcon,\r\n onPressPrefix,\r\n onPressSuffix,\r\n size = \"medium\",\r\n style,\r\n Suffix,\r\n SuffixIcon,\r\n tone = \"primary\",\r\n variant = \"filled\",\r\n ...props\r\n}: BadgeProps) {\r\n const tokens = useComponentsTokens();\r\n\r\n const badgeTokens = tokens.badge;\r\n const sizeTokens = badgeTokens.sizes[size];\r\n\r\n const extractedStyleProps = useStyleProps(props);\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { backgroundColor, color, size, tone, variant },\r\n [backgroundColor, color, size, tone, variant],\r\n );\r\n\r\n const containerStyle = useMemo(\r\n () => [styles.container, extractedStyleProps, style],\r\n [extractedStyleProps, style, styles.container],\r\n );\r\n\r\n const affixColor =\r\n typeof styles.label.color === \"string\" ? styles.label.color : undefined;\r\n\r\n const isTextChild =\r\n typeof children === \"string\" \|\| typeof children === \"number\";\r\n\r\n return (\r\n <View {...props} style={containerStyle}>\r\n <BadgeAddon\r\n Content={Prefix}\r\n IconComponent={PrefixIcon}\r\n color={affixColor}\r\n hitSlop={badgeTokens.addonHitSlop}\r\n iconSize={sizeTokens.iconSize}\r\n onPress={onPressPrefix}\r\n />\r\n\r\n {isTextChild ? (\r\n <Text numberOfLines={1} ellipsizeMode=\"tail\" style={styles.label}>\r\n {children}\r\n </Text>\r\n ) : (\r\n children\r\n )}\r\n\r\n <BadgeAddon\r\n Content={Suffix}\r\n IconComponent={SuffixIcon}\r\n color={affixColor}\r\n hitSlop={badgeTokens.addonHitSlop}\r\n iconSize={sizeTokens.iconSize}\r\n onPress={onPressSuffix}\r\n />\r\n </View>\r\n );\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\r\n const { backgroundColor, color, size, tone, variant } = props;\r\n\r\n const badgeTokens = theme.components.badge;\r\n const sizeTokens = badgeTokens.sizes[size];\r\n const variantTokens = badgeTokens.colors[tone][variant];\r\n\r\n return StyleSheet.create({\r\n container: {\r\n alignItems: \"center\",\r\n flexDirection: \"row\",\r\n flexShrink: 1,\r\n maxWidth: \"100%\",\r\n justifyContent: \"center\",\r\n\r\n borderRadius: badgeTokens.borderRadius,\r\n borderWidth: badgeTokens.borderWidth,\r\n gap: badgeTokens.gap,\r\n height: sizeTokens.height,\r\n minWidth: sizeTokens.minWidth,\r\n paddingHorizontal: sizeTokens.paddingHorizontal,\r\n\r\n backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\r\n borderColor: variantTokens.borderColor,\r\n },\r\n\r\n label: {\r\n flexShrink: 1,\r\n minWidth: 0,\r\n textAlign: \"center\",\r\n\r\n fontFamily: badgeTokens.fontFamily,\r\n fontSize: sizeTokens.fontSize,\r\n lineHeight: sizeTokens.lineHeight,\r\n\r\n color: color ?? variantTokens.color,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAsDI,SACE,KADF;AAtDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,QAAM,cACJ,OAAO,aAAa,YAAY,OAAO,aAAa;AAEtD,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,cACC,oBAAC,QAAK,eAAe,GAAG,eAAc,QAAO,OAAO,OAAO,OACxD,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,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,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,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,WAAW;AAAA,MAEX,YAAY,YAAY;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MAEvB,OAAO,SAAS,cAAc;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["BadgeRoot"]}

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

	@@ -1 +1 @@
1	- {"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 tone = \"primary\",\n disabled,\n loading = false,\n children,\n style,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, tone, disabled, loading },\n [size, variant, tone, 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, tone, disabled, loading } = props;\n\n const buttonTokens = theme.components.button;\n const sizeTokens = buttonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n buttonTokens.colors[tone][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":"AAuCa;AAvCb,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,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ;AAAA,IACzC,CAAC,MAAM,SAAS,MAAM,UAAU,OAAO;AAAA,EACzC;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,MAAM,UAAU,QAAQ,IAAI;AAEnD,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,OAAO,IAAI,EAAE,OAAO;AAAA,IACjC;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"]}
1	+ {"version":3,"sources":["../../../src/components/atoms/button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport {\r\n AppTheme,\r\n getActionStateTokens,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport { ButtonProps, ButtonThemeProps } from \"../../types\";\r\nimport { Pressable } from \"./pressable\";\r\nimport { Spinner } from \"./spinner\";\r\nimport { Typography } from \"./typography\";\r\n\r\nexport const Button = memo(function Button({\r\n size = \"medium\",\r\n variant = \"filled\",\r\n tone = \"primary\",\r\n disabled,\r\n loading = false,\r\n children,\r\n style,\r\n ...props\r\n}: PropsWithChildren<ButtonProps>) {\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { size, variant, tone, disabled, loading },\r\n [size, variant, tone, disabled, loading],\r\n );\r\n\r\n const interactionDisabled = disabled === true \|\| loading;\r\n\r\n const buttonStyles = useMemo(\r\n () => [styles.button, style],\r\n [styles.button, style],\r\n );\r\n\r\n const content = useMemo(() => {\r\n if (loading) {\r\n return <Spinner color={styles.text.color} size={size} />;\r\n }\r\n\r\n return typeof children === \"string\" ? (\r\n <Typography.Master style={styles.text}>{children}</Typography.Master>\r\n ) : (\r\n children\r\n );\r\n }, [children, loading, size, styles.text]);\r\n\r\n return (\r\n <Pressable {...props} disabled={interactionDisabled} style={buttonStyles}>\r\n {content}\r\n </Pressable>\r\n );\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme, props: ButtonThemeProps) {\r\n const { size, variant, tone, disabled, loading } = props;\r\n\r\n const buttonTokens = theme.components.button;\r\n const sizeTokens = buttonTokens.sizes[size];\r\n const appearanceTokens = getActionStateTokens(\r\n buttonTokens.colors[tone][variant],\r\n {\r\n disabled,\r\n loading,\r\n },\r\n );\r\n\r\n return StyleSheet.create({\r\n button: {\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n height: sizeTokens.height,\r\n paddingVertical: sizeTokens.paddingVertical,\r\n paddingHorizontal: sizeTokens.paddingHorizontal,\r\n\r\n borderWidth: buttonTokens.borderWidth,\r\n borderRadius: buttonTokens.borderRadius,\r\n\r\n borderColor: appearanceTokens.borderColor,\r\n backgroundColor: appearanceTokens.backgroundColor,\r\n },\r\n\r\n text: {\r\n width: \"100%\",\r\n textAlign: \"center\",\r\n\r\n fontSize: sizeTokens.fontSize,\r\n\r\n color: appearanceTokens.color,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAuCa;AAvCb,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,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmC;AACjC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ;AAAA,IACzC,CAAC,MAAM,SAAS,MAAM,UAAU,OAAO;AAAA,EACzC;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,MAAM,UAAU,QAAQ,IAAI;AAEnD,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,mBAAmB;AAAA,IACvB,aAAa,OAAO,IAAI,EAAE,OAAO;AAAA,IACjC;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,iBAAiB,WAAW;AAAA,MAC5B,mBAAmB,WAAW;AAAA,MAE9B,aAAa,aAAa;AAAA,MAC1B,cAAc,aAAa;AAAA,MAE3B,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,WAAW;AAAA,MAEX,UAAU,WAAW;AAAA,MAErB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Button"]}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/atoms/divider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n getDividerTokens,\n useStyleProps,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { DividerProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const Divider = memo(function Divider({\n color,\n inset = \"none\",\n orientation = \"horizontal\",\n style,\n tone = \"default\",\n ...props\n}: DividerProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { color, inset, orientation, tone },\n [color, inset, orientation, tone],\n );\n\n const dividerStyle = useMemo(\n () => [styles.divider, extractedStyleProps, style],\n [extractedStyleProps, style, styles.divider],\n );\n\n return <View {...props} style={dividerStyle} />;\n});\n\ninterface DividerThemeProps {\n color: DividerProps[\"color\"];\n inset: NonNullable<DividerProps[\"inset\"]>;\n orientation: NonNullable<DividerProps[\"orientation\"]>;\n tone: NonNullable<DividerProps[\"tone\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: DividerThemeProps) {\n const { color, inset, orientation, tone } = props;\n const dividerTokens = getDividerTokens(theme.components.divider, {\n inset,\n orientation,\n tone,\n });\n\n return StyleSheet.create({\n divider: {\n alignSelf: \"stretch\",\n flexShrink: 0,\n height: dividerTokens.height,\n marginBottom: dividerTokens.marginBottom,\n marginEnd: dividerTokens.marginEnd,\n marginStart: dividerTokens.marginStart,\n marginTop: dividerTokens.marginTop,\n width: dividerTokens.width,\n backgroundColor: color ?? dividerTokens.backgroundColor,\n },\n });\n}\n"],"mappings":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AAEd,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,OAAO,OAAO,aAAa,KAAK;AAAA,IAClC,CAAC,OAAO,OAAO,aAAa,IAAI;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,SAAS,qBAAqB,KAAK;AAAA,IACjD,CAAC,qBAAqB,OAAO,OAAO,OAAO;AAAA,EAC7C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,cAAc;AAC/C,CAAC;AASD,SAAS,aAAa,OAAiB,OAA0B;AAC/D,QAAM,EAAE,OAAO,OAAO,aAAa,KAAK,IAAI;AAC5C,QAAM,gBAAgB,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC/D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ,cAAc;AAAA,MACtB,cAAc,cAAc;AAAA,MAC5B,WAAW,cAAc;AAAA,MACzB,aAAa,cAAc;AAAA,MAC3B,WAAW,cAAc;AAAA,MACzB,OAAO,cAAc;AAAA,MACrB,iBAAiB,SAAS,cAAc;AAAA,IAC1C;AAAA,EACF,CAAC;AACH;","names":["Divider"]}
1	+ {"version":3,"sources":["../../../src/components/atoms/divider.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport {\r\n getDividerTokens,\r\n useStyleProps,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { DividerProps } from \"../../types\";\r\nimport { View } from \"./view\";\r\n\r\nexport const Divider = memo(function Divider({\r\n color,\r\n inset = \"none\",\r\n orientation = \"horizontal\",\r\n style,\r\n tone = \"default\",\r\n ...props\r\n}: DividerProps) {\r\n const extractedStyleProps = useStyleProps(props);\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { color, inset, orientation, tone },\r\n [color, inset, orientation, tone],\r\n );\r\n\r\n const dividerStyle = useMemo(\r\n () => [styles.divider, extractedStyleProps, style],\r\n [extractedStyleProps, style, styles.divider],\r\n );\r\n\r\n return <View {...props} style={dividerStyle} />;\r\n});\r\n\r\ninterface DividerThemeProps {\r\n color: DividerProps[\"color\"];\r\n inset: NonNullable<DividerProps[\"inset\"]>;\r\n orientation: NonNullable<DividerProps[\"orientation\"]>;\r\n tone: NonNullable<DividerProps[\"tone\"]>;\r\n}\r\n\r\nfunction themedStyles(theme: AppTheme, props: DividerThemeProps) {\r\n const { color, inset, orientation, tone } = props;\r\n const dividerTokens = getDividerTokens(theme.components.divider, {\r\n inset,\r\n orientation,\r\n tone,\r\n });\r\n\r\n return StyleSheet.create({\r\n divider: {\r\n alignSelf: \"stretch\",\r\n flexShrink: 0,\r\n height: dividerTokens.height,\r\n marginBottom: dividerTokens.marginBottom,\r\n marginEnd: dividerTokens.marginEnd,\r\n marginStart: dividerTokens.marginStart,\r\n marginTop: dividerTokens.marginTop,\r\n width: dividerTokens.width,\r\n backgroundColor: color ?? dividerTokens.backgroundColor,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AAEd,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,OAAO,OAAO,aAAa,KAAK;AAAA,IAClC,CAAC,OAAO,OAAO,aAAa,IAAI;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,SAAS,qBAAqB,KAAK;AAAA,IACjD,CAAC,qBAAqB,OAAO,OAAO,OAAO;AAAA,EAC7C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,cAAc;AAC/C,CAAC;AASD,SAAS,aAAa,OAAiB,OAA0B;AAC/D,QAAM,EAAE,OAAO,OAAO,aAAa,KAAK,IAAI;AAC5C,QAAM,gBAAgB,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC/D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ,cAAc;AAAA,MACtB,cAAc,cAAc;AAAA,MAC5B,WAAW,cAAc;AAAA,MACzB,aAAa,cAAc;AAAA,MAC3B,WAAW,cAAc;AAAA,MACzB,OAAO,cAAc;AAAA,MACrB,iBAAiB,SAAS,cAAc;AAAA,IAC1C;AAAA,EACF,CAAC;AACH;","names":["Divider"]}

package/dist/components/atoms/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n AppTheme,\n getActionStateTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Spinner } from \"./spinner\";\n\nexport const IconButton = memo(function IconButton({\n size = \"medium\",\n variant = \"filled\",\n tone = \"primary\",\n disabled,\n loading = false,\n style,\n icon,\n ...props\n}: PropsWithChildren<IconButtonProps>) {\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, tone, disabled, loading },\n [size, variant, tone, disabled, loading],\n );\n\n const interactionDisabled = disabled === true \|\| loading;\n\n const iconButtonStyles = useMemo(\n () => [styles.button, style],\n [styles.button, style],\n );\n\n return (\n <Pressable\n {...props}\n disabled={interactionDisabled}\n style={iconButtonStyles}\n >\n {loading ? (\n <Spinner color={styles.icon.color} size={size} />\n ) : (\n <Icon size={size} icon={icon} color={styles.icon.color} />\n )}\n </Pressable>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\n const { size, variant, tone, disabled, loading } = props;\n\n const iconButtonTokens = theme.components.iconButton;\n const sizeTokens = iconButtonTokens.sizes[size];\n const appearanceTokens = getActionStateTokens(\n iconButtonTokens.colors[tone][variant],\n { disabled, loading },\n );\n\n return StyleSheet.create({\n button: {\n alignItems: \"center\",\n justifyContent: \"center\",\n\n height: sizeTokens.size,\n width: sizeTokens.size,\n padding: sizeTokens.padding,\n\n borderWidth: iconButtonTokens.borderWidth,\n borderRadius: iconButtonTokens.borderRadius,\n\n borderColor: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n icon: {\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AA4CQ;AA5CR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAEjB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ;AAAA,IACzC,CAAC,MAAM,SAAS,MAAM,UAAU,OAAO;AAAA,EACzC;AAEA,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MAEN,oBACC,oBAAC,WAAQ,OAAO,OAAO,KAAK,OAAO,MAAY,IAE/C,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ,IAAI;AAEnD,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,mBAAmB;AAAA,IACvB,iBAAiB,OAAO,IAAI,EAAE,OAAO;AAAA,IACrC,EAAE,UAAU,QAAQ;AAAA,EACtB;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}
1	+ {"version":3,"sources":["../../../src/components/atoms/icon-button.tsx"],"sourcesContent":["import { memo, PropsWithChildren, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport { Icon } from \"@impulse-ui-native/icon\";\r\nimport {\r\n AppTheme,\r\n getActionStateTokens,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport { IconButtonProps, IconButtonThemeProps } from \"../../types\";\r\nimport { Pressable } from \"./pressable\";\r\nimport { Spinner } from \"./spinner\";\r\n\r\nexport const IconButton = memo(function IconButton({\r\n size = \"medium\",\r\n variant = \"filled\",\r\n tone = \"primary\",\r\n disabled,\r\n loading = false,\r\n style,\r\n icon,\r\n ...props\r\n}: PropsWithChildren<IconButtonProps>) {\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { size, variant, tone, disabled, loading },\r\n [size, variant, tone, disabled, loading],\r\n );\r\n\r\n const interactionDisabled = disabled === true \|\| loading;\r\n\r\n const iconButtonStyles = useMemo(\r\n () => [styles.button, style],\r\n [styles.button, style],\r\n );\r\n\r\n return (\r\n <Pressable\r\n {...props}\r\n disabled={interactionDisabled}\r\n style={iconButtonStyles}\r\n >\r\n {loading ? (\r\n <Spinner color={styles.icon.color} size={size} />\r\n ) : (\r\n <Icon size={size} icon={icon} color={styles.icon.color} />\r\n )}\r\n </Pressable>\r\n );\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme, props: IconButtonThemeProps) {\r\n const { size, variant, tone, disabled, loading } = props;\r\n\r\n const iconButtonTokens = theme.components.iconButton;\r\n const sizeTokens = iconButtonTokens.sizes[size];\r\n const appearanceTokens = getActionStateTokens(\r\n iconButtonTokens.colors[tone][variant],\r\n { disabled, loading },\r\n );\r\n\r\n return StyleSheet.create({\r\n button: {\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n height: sizeTokens.size,\r\n width: sizeTokens.size,\r\n padding: sizeTokens.padding,\r\n\r\n borderWidth: iconButtonTokens.borderWidth,\r\n borderRadius: iconButtonTokens.borderRadius,\r\n\r\n borderColor: appearanceTokens.borderColor,\r\n backgroundColor: appearanceTokens.backgroundColor,\r\n },\r\n\r\n icon: {\r\n color: appearanceTokens.color,\r\n },\r\n });\r\n}\r\n"],"mappings":"AA4CQ;AA5CR,SAAS,MAAyB,eAAe;AACjD,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAEjB,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ;AAAA,IACzC,CAAC,MAAM,SAAS,MAAM,UAAU,OAAO;AAAA,EACzC;AAEA,QAAM,sBAAsB,aAAa,QAAQ;AAEjD,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,QAAQ,KAAK;AAAA,IAC3B,CAAC,OAAO,QAAQ,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO;AAAA,MAEN,oBACC,oBAAC,WAAQ,OAAO,OAAO,KAAK,OAAO,MAAY,IAE/C,oBAAC,QAAK,MAAY,MAAY,OAAO,OAAO,KAAK,OAAO;AAAA;AAAA,EAE5D;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA6B;AAClE,QAAM,EAAE,MAAM,SAAS,MAAM,UAAU,QAAQ,IAAI;AAEnD,QAAM,mBAAmB,MAAM,WAAW;AAC1C,QAAM,aAAa,iBAAiB,MAAM,IAAI;AAC9C,QAAM,mBAAmB;AAAA,IACvB,iBAAiB,OAAO,IAAI,EAAE,OAAO;AAAA,IACrC,EAAE,UAAU,QAAQ;AAAA,EACtB;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,QAAQ,WAAW;AAAA,MACnB,OAAO,WAAW;AAAA,MAClB,SAAS,WAAW;AAAA,MAEpB,aAAa,iBAAiB;AAAA,MAC9B,cAAc,iBAAiB;AAAA,MAE/B,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,MAAM;AAAA,MACJ,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["IconButton"]}

package/dist/components/atoms/tag.d.mts CHANGED Viewed

@@ -3,6 +3,6 @@ import { TagProps } from '../../types/tag.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/theme';
-declare const Tag: react.MemoExoticComponent<({ label, size, variant, tone, closable, disabled, onClose, onPress, }: TagProps) => react.JSX.Element>;
+declare const Tag: react.MemoExoticComponent<({ label, style, size, variant, tone, closable, disabled, onClose, onPress, }: TagProps) => react.JSX.Element>;
 export { Tag };

package/dist/components/atoms/tag.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
 import { Icon } from "@impulse-ui-native/icon";
 import { XCircleIcon } from "@impulse-ui-native/icon/icons/x-circle";
@@ -12,6 +12,7 @@ import { Pressable } from "./pressable";
 import { Typography } from "./typography";
 const Tag = memo(function Tag2({
   label,
+  style,
   size = "medium",
   variant = "filled",
   tone = "primary",
@@ -32,10 +33,22 @@ const Tag = memo(function Tag2({
     },
     [size, variant, disabled, tone]
   );
+  const containerStyle = useMemo(
+    () => [styles.container, style],
+    [styles.container, style]
+  );
   const Container = onPress ? Pressable : View;
   const showClose = closable && !disabled && onClose;
-  return /* @__PURE__ */ jsxs(Container, { onPress, disabled, style: styles.container, children: [
-    /* @__PURE__ */ jsx(Typography.Caption, { style: styles.label, children: label }),
+  return /* @__PURE__ */ jsxs(Container, { onPress, disabled, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      Typography.Caption,
+      {
+        numberOfLines: 1,
+        ellipsizeMode: "tail",
+        style: styles.label,
+        children: label
+      }
+    ),
     showClose ? /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: tagTokens.closeHitSlop, children: /* @__PURE__ */ jsx(
       Icon,
       {
@@ -61,6 +74,8 @@ function themedStyles(theme, props) {
       alignItems: "center",
       justifyContent: "center",
       alignSelf: "flex-start",
+      flexShrink: 1,
+      maxWidth: "100%",
       height: sizeTokens.height,
       paddingHorizontal: sizeTokens.paddingHorizontal,
       minWidth: sizeTokens.minWidth,
@@ -71,6 +86,8 @@ function themedStyles(theme, props) {
       backgroundColor: appearanceTokens.backgroundColor
     },
     label: {
+      flexShrink: 1,
+      minWidth: 0,
       fontSize: sizeTokens.fontSize,
       color: appearanceTokens.color
     },

package/dist/components/atoms/tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\nimport {\n ~~AppTheme,\n~~ getAvailabilityStateTokens,\n useComponentsTokens,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport { TagProps, TagThemeProps } from \"../../types\";\nimport { Pressable } from \"./pressable\";\nimport { Typography } from \"./typography\";\n\nexport const Tag = memo(function Tag({\n label,\n size = \"medium\",\n variant = \"filled\",\n tone = \"primary\",\n closable,\n disabled,\n onClose,\n onPress,\n}: TagProps) {\n const tokens = useComponentsTokens();\n\n const tagTokens = tokens.tag;\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n tone,\n },\n [size, variant, disabled, tone],\n );\n\n const Container = onPress ? Pressable : View;\n\n const showClose = closable && !disabled && onClose;\n\n return (\n <Container onPress={onPress} disabled={disabled} style={~~styles.container~~}>\n <Typography.Caption style={styles.label}>{label}</Typography.Caption>\n\n {showClose ? (\n <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\n <Icon\n icon={XCircleIcon}\n size=\"small\"\n color={styles.icon.color}\n style={styles.icon}\n />\n </Pressable>\n ) : null}\n </Container>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\n const { size, variant, tone, disabled } = props;\n\n const tagTokens = theme.components.tag;\n const sizeTokens = tagTokens.sizes[size];\n const appearanceTokens = getAvailabilityStateTokens(\n tagTokens.colors[tone][variant],\n { disabled },\n );\n\n return StyleSheet.create({\n container: {\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n alignSelf: \"flex-start\",\n\n height: sizeTokens.height,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n minWidth: sizeTokens.minWidth,\n\n borderRadius: tagTokens.borderRadius,\n gap: tagTokens.gap,\n borderWidth: tagTokens.borderWidth,\n\n borderColor: appearanceTokens.borderColor,\n backgroundColor: appearanceTokens.backgroundColor,\n },\n\n label: {\n fontSize: sizeTokens.fontSize,\n color: appearanceTokens.color,\n },\n\n icon: {\n marginLeft: tagTokens.iconMarginLeft,\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"~~AA8CI~~,SACE,KADF;~~AA9CJ~~,SAAS,~~YAAY~~;~~AACrB~~,SAAS,YAAY,YAAY;~~AAEjC~~,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,~~EAEE~~;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,MAAM,KAAK,SAASA,KAAI;AAAA,EACnC;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,SAAS,oBAAoB;AAEnC,QAAM,YAAY,OAAO;AAEzB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,IAAI;AAAA,EAChC;AAEA,QAAM,YAAY,UAAU,YAAY;AAExC,QAAM,YAAY,YAAY,CAAC,YAAY;AAE3C,SACE,qBAAC,aAAU,SAAkB,UAAoB,OAAO,~~OAAO,WAC7D~~;AAAA,~~wBAAC~~,WAAW,~~SAAX~~,~~EAAmB~~,OAAO,OAAO,~~OAAQ~~,~~iBAAM~~;AAAA,~~IAE/C~~,YACC,oBAAC,aAAU,SAAS,SAAS,SAAS,UAAU,cAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO;AAAA;AAAA,IAChB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAsB;AAC3D,QAAM,EAAE,MAAM,SAAS,MAAM,SAAS,IAAI;AAE1C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,IAAI,EAAE,OAAO;AAAA,IAC9B,EAAE,SAAS;AAAA,EACb;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,~~MAEX~~,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,UAAU,WAAW;AAAA,MAErB,cAAc,UAAU;AAAA,MACxB,KAAK,UAAU;AAAA,MACf,aAAa,UAAU;AAAA,MAEvB,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,OAAO;AAAA,MACL,UAAU,WAAW;AAAA,MACrB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Tag"]}
1	+ {"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet, View } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { Icon } from \"@impulse-ui-native/icon\";\r\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\r\nimport {\r\n getAvailabilityStateTokens,\r\n useComponentsTokens,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { TagProps, TagThemeProps } from \"../../types\";\r\nimport { Pressable } from \"./pressable\";\r\nimport { Typography } from \"./typography\";\r\n\r\nexport const Tag = memo(function Tag({\r\n label,\r\n style,\r\n size = \"medium\",\r\n variant = \"filled\",\r\n tone = \"primary\",\r\n closable,\r\n disabled,\r\n onClose,\r\n onPress,\r\n}: TagProps) {\r\n const tokens = useComponentsTokens();\r\n\r\n const tagTokens = tokens.tag;\r\n\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n {\r\n size,\r\n variant,\r\n disabled,\r\n tone,\r\n },\r\n [size, variant, disabled, tone],\r\n );\r\n\r\n const containerStyle = useMemo(\r\n () => [styles.container, style],\r\n [styles.container, style],\r\n );\r\n const Container = onPress ? Pressable : View;\r\n\r\n const showClose = closable && !disabled && onClose;\r\n\r\n return (\r\n <Container onPress={onPress} disabled={disabled} style={containerStyle}>\r\n <Typography.Caption\r\n numberOfLines={1}\r\n ellipsizeMode=\"tail\"\r\n style={styles.label}\r\n >\r\n {label}\r\n </Typography.Caption>\r\n\r\n {showClose ? (\r\n <Pressable onPress={onClose} hitSlop={tagTokens.closeHitSlop}>\r\n <Icon\r\n icon={XCircleIcon}\r\n size=\"small\"\r\n color={styles.icon.color}\r\n style={styles.icon}\r\n />\r\n </Pressable>\r\n ) : null}\r\n </Container>\r\n );\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme, props: TagThemeProps) {\r\n const { size, variant, tone, disabled } = props;\r\n\r\n const tagTokens = theme.components.tag;\r\n const sizeTokens = tagTokens.sizes[size];\r\n const appearanceTokens = getAvailabilityStateTokens(\r\n tagTokens.colors[tone][variant],\r\n { disabled },\r\n );\r\n\r\n return StyleSheet.create({\r\n container: {\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n alignSelf: \"flex-start\",\r\n flexShrink: 1,\r\n maxWidth: \"100%\",\r\n\r\n height: sizeTokens.height,\r\n paddingHorizontal: sizeTokens.paddingHorizontal,\r\n minWidth: sizeTokens.minWidth,\r\n\r\n borderRadius: tagTokens.borderRadius,\r\n gap: tagTokens.gap,\r\n borderWidth: tagTokens.borderWidth,\r\n\r\n borderColor: appearanceTokens.borderColor,\r\n backgroundColor: appearanceTokens.backgroundColor,\r\n },\r\n\r\n label: {\r\n flexShrink: 1,\r\n minWidth: 0,\r\n fontSize: sizeTokens.fontSize,\r\n color: appearanceTokens.color,\r\n },\r\n\r\n icon: {\r\n marginLeft: tagTokens.iconMarginLeft,\r\n color: appearanceTokens.color,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAmDI,SACE,KADF;AAnDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAEpB,MAAM,MAAM,KAAK,SAASA,KAAI;AAAA,EACnC;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAa;AACX,QAAM,SAAS,oBAAoB;AAEnC,QAAM,YAAY,OAAO;AAEzB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,UAAU,IAAI;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,KAAK;AAAA,IAC9B,CAAC,OAAO,WAAW,KAAK;AAAA,EAC1B;AACA,QAAM,YAAY,UAAU,YAAY;AAExC,QAAM,YAAY,YAAY,CAAC,YAAY;AAE3C,SACE,qBAAC,aAAU,SAAkB,UAAoB,OAAO,gBACtD;AAAA;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACC,eAAe;AAAA,QACf,eAAc;AAAA,QACd,OAAO,OAAO;AAAA,QAEb;AAAA;AAAA,IACH;AAAA,IAEC,YACC,oBAAC,aAAU,SAAS,SAAS,SAAS,UAAU,cAC9C;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,OAAO,OAAO,KAAK;AAAA,QACnB,OAAO,OAAO;AAAA;AAAA,IAChB,GACF,IACE;AAAA,KACN;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAsB;AAC3D,QAAM,EAAE,MAAM,SAAS,MAAM,SAAS,IAAI;AAE1C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,IAAI,EAAE,OAAO;AAAA,IAC9B,EAAE,SAAS;AAAA,EACb;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,MAEV,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,UAAU,WAAW;AAAA,MAErB,cAAc,UAAU;AAAA,MACxB,KAAK,UAAU;AAAA,MACf,aAAa,UAAU;AAAA,MAEvB,aAAa,iBAAiB;AAAA,MAC9B,iBAAiB,iBAAiB;AAAA,IACpC;AAAA,IAEA,OAAO;AAAA,MACL,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAU,WAAW;AAAA,MACrB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,IAEA,MAAM;AAAA,MACJ,YAAY,UAAU;AAAA,MACtB,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["Tag"]}

package/dist/components/controls/container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\n\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlContainerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { View } from \"../atoms/view\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlContainer = memo(function ControlContainer({\n style,\n ...props\n}: ControlContainerProps) {\n const {\n size,\n variant,\n tone = \"neutral\",\n disabled,\n error,\n } = useControlContext();\n const styles = useThemedStyles(\n controlContainerStyles,\n { size, variant, tone, disabled, error },\n [size, variant, tone, disabled, error],\n );\n const containerStyle = useMemo(\n () => [styles.inputContainer, style],\n [styles.inputContainer, style],\n );\n\n return <View {...props} style={containerStyle} />;\n});\n"],"mappings":"AA8BS;AA9BT,SAAS,MAAM,eAAe;AAE9B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AACtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM;AAAA,IACvC,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AACA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,gBAAgB;AACjD,CAAC;","names":["ControlContainer"]}
1	+ {"version":3,"sources":["../../../src/components/controls/container.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\n\r\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlContainerProps } from \"../../types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\nimport { View } from \"../atoms/view\";\r\nimport { controlContainerStyles } from \"./container.styles\";\r\n\r\nexport const ControlContainer = memo(function ControlContainer({\r\n style,\r\n ...props\r\n}: ControlContainerProps) {\r\n const {\r\n size,\r\n variant,\r\n tone = \"neutral\",\r\n disabled,\r\n error,\r\n } = useControlContext();\r\n const styles = useThemedStyles(\r\n controlContainerStyles,\r\n { size, variant, tone, disabled, error },\r\n [size, variant, tone, disabled, error],\r\n );\r\n const containerStyle = useMemo(\r\n () => [styles.inputContainer, style],\r\n [styles.inputContainer, style],\r\n );\r\n\r\n return <View {...props} style={containerStyle} />;\r\n});\r\n"],"mappings":"AA8BS;AA9BT,SAAS,MAAM,eAAe;AAE9B,SAAS,uBAAuB;AAGhC,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,KAAK,SAASA,kBAAiB;AAAA,EAC7D;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AACtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM;AAAA,IACvC,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AACA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,gBAAgB,KAAK;AAAA,IACnC,CAAC,OAAO,gBAAgB,KAAK;AAAA,EAC/B;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,gBAAgB;AACjD,CAAC;","names":["ControlContainer"]}

package/dist/components/controls/container.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/container.styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\n\nexport function controlContainerStyles(\n theme: AppTheme,\n { size, variant, tone, disabled, error }: ControlFieldThemeProps,\n) {\n const tokens = theme.components.controlContainer;\n const sizeTokens = tokens.sizes[size];\n const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\n disabled,\n error: Boolean(error),\n });\n\n return StyleSheet.create({\n inputContainer: {\n flexDirection: \"row\",\n alignItems: \"center\",\n height: sizeTokens.height,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n borderRadius: tokens.borderRadius,\n borderWidth: tokens.borderWidth,\n opacity: appearance.opacity,\n backgroundColor: appearance.backgroundColor,\n borderColor: appearance.borderColor,\n },\n });\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,2BAA2B;AAI7B,SAAS,uBACd,OACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM,GACvC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,SAAS,WAAW;AAAA,MACpB,iBAAiB,WAAW;AAAA,MAC5B,aAAa,WAAW;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":[]}
1	+ {"version":3,"sources":["../../../src/components/controls/container.styles.ts"],"sourcesContent":["import { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { getFieldStateTokens } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\r\n\r\nexport function controlContainerStyles(\r\n theme: AppTheme,\r\n { size, variant, tone, disabled, error }: ControlFieldThemeProps,\r\n) {\r\n const tokens = theme.components.controlContainer;\r\n const sizeTokens = tokens.sizes[size];\r\n const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\r\n disabled,\r\n error: Boolean(error),\r\n });\r\n\r\n return StyleSheet.create({\r\n inputContainer: {\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n height: sizeTokens.height,\r\n paddingHorizontal: sizeTokens.paddingHorizontal,\r\n borderRadius: tokens.borderRadius,\r\n borderWidth: tokens.borderWidth,\r\n opacity: appearance.opacity,\r\n backgroundColor: appearance.backgroundColor,\r\n borderColor: appearance.borderColor,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAAA,SAAS,kBAAkB;AAG3B,SAAS,2BAA2B;AAI7B,SAAS,uBACd,OACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM,GACvC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,mBAAmB,WAAW;AAAA,MAC9B,cAAc,OAAO;AAAA,MACrB,aAAa,OAAO;AAAA,MACpB,SAAS,WAAW;AAAA,MACpB,iBAAiB,WAAW;AAAA,MAC5B,aAAa,WAAW;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/components/controls/field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/field.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { useStyleProps } from \"@impulse-ui-native/theme\";\n\nimport type { ControlFieldProps } from \"../../types\";\nimport { ControlAddon } from \"./addon\";\nimport { ControlError } from \"./error\";\nimport { ControlLabel } from \"./label\";\nimport { ControlProvider } from \"./provider\";\nimport { ControlRoot } from \"./root\";\nimport { ControlTrigger } from \"./trigger\";\n\nexport const ControlField = memo(function ControlField({\n children,\n disabled,\n error,\n label,\n onPress,\n onPressPrefix,\n onPressSuffix,\n prefix,\n size = \"medium\",\n suffix,\n variant = \"outlined\",\n tone = \"neutral\",\n ...props\n}: ControlFieldProps) {\n const layoutStyle = useStyleProps(props);\n\n const hasPrefix = prefix !== null && prefix !== undefined;\n const hasSuffix = suffix !== null && suffix !== undefined;\n\n return (\n <ControlProvider\n size={size}\n variant={variant}\n tone={tone}\n error={error}\n disabled={disabled}\n >\n <ControlRoot style={layoutStyle}>\n <ControlLabel>{label}</ControlLabel>\n <ControlTrigger onPress={onPress}>\n {hasPrefix ? (\n <ControlAddon onPress={onPressPrefix}>{prefix}</ControlAddon>\n ) : null}\n {children}\n {hasSuffix ? (\n <ControlAddon onPress={onPressSuffix}>{suffix}</ControlAddon>\n ) : null}\n </ControlTrigger>\n {error ? <ControlError>{error}</ControlError> : null}\n </ControlRoot>\n </ControlProvider>\n );\n});\n"],"mappings":"AAyCQ,cACA,YADA;AAzCR,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAG9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,QAAM,cAAc,cAAc,KAAK;AAEvC,QAAM,YAAY,WAAW,QAAQ,WAAW;AAChD,QAAM,YAAY,WAAW,QAAQ,WAAW;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,eAAY,OAAO,aAClB;AAAA,4BAAC,gBAAc,iBAAM;AAAA,QACrB,qBAAC,kBAAe,SACb;AAAA,sBACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,UACH;AAAA,UACA,YACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,WACN;AAAA,QACC,QAAQ,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,SAClD;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ControlField"]}
1	+ {"version":3,"sources":["../../../src/components/controls/field.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { useStyleProps } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlFieldProps } from \"../../types\";\r\nimport { ControlAddon } from \"./addon\";\r\nimport { ControlError } from \"./error\";\r\nimport { ControlLabel } from \"./label\";\r\nimport { ControlProvider } from \"./provider\";\r\nimport { ControlRoot } from \"./root\";\r\nimport { ControlTrigger } from \"./trigger\";\r\n\r\nexport const ControlField = memo(function ControlField({\r\n children,\r\n disabled,\r\n error,\r\n label,\r\n onPress,\r\n onPressPrefix,\r\n onPressSuffix,\r\n prefix,\r\n size = \"medium\",\r\n suffix,\r\n variant = \"outlined\",\r\n tone = \"neutral\",\r\n ...props\r\n}: ControlFieldProps) {\r\n const layoutStyle = useStyleProps(props);\r\n\r\n const hasPrefix = prefix !== null && prefix !== undefined;\r\n const hasSuffix = suffix !== null && suffix !== undefined;\r\n\r\n return (\r\n <ControlProvider\r\n size={size}\r\n variant={variant}\r\n tone={tone}\r\n error={error}\r\n disabled={disabled}\r\n >\r\n <ControlRoot style={layoutStyle}>\r\n <ControlLabel>{label}</ControlLabel>\r\n <ControlTrigger onPress={onPress}>\r\n {hasPrefix ? (\r\n <ControlAddon onPress={onPressPrefix}>{prefix}</ControlAddon>\r\n ) : null}\r\n {children}\r\n {hasSuffix ? (\r\n <ControlAddon onPress={onPressSuffix}>{suffix}</ControlAddon>\r\n ) : null}\r\n </ControlTrigger>\r\n {error ? <ControlError>{error}</ControlError> : null}\r\n </ControlRoot>\r\n </ControlProvider>\r\n );\r\n});\r\n"],"mappings":"AAyCQ,cACA,YADA;AAzCR,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAG9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAAsB;AACpB,QAAM,cAAc,cAAc,KAAK;AAEvC,QAAM,YAAY,WAAW,QAAQ,WAAW;AAChD,QAAM,YAAY,WAAW,QAAQ,WAAW;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,eAAY,OAAO,aAClB;AAAA,4BAAC,gBAAc,iBAAM;AAAA,QACrB,qBAAC,kBAAe,SACb;AAAA,sBACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,UACH;AAAA,UACA,YACC,oBAAC,gBAAa,SAAS,eAAgB,kBAAO,IAC5C;AAAA,WACN;AAAA,QACC,QAAQ,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,SAClD;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["ControlField"]}

package/dist/components/controls/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/icon.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport {\n getFieldStateTokens,\n useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlIconProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlIcon = memo(function ControlIcon({\n color,\n ...props\n}: ControlIconProps) {\n const { variant, tone = \"neutral\", disabled, error } = useControlContext();\n const tokens = useComponentsTokens().controlAddon;\n const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\n disabled,\n error: Boolean(error),\n });\n\n return <Icon {...props} color={color ?? appearance.iconColor} />;\n});\n"],"mappings":"AAsBS;AAtBT,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,SAAS,OAAO,WAAW,UAAU,MAAM,IAAI,kBAAkB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,SAAS,WAAW,WAAW;AAChE,CAAC;","names":["ControlIcon"]}
1	+ {"version":3,"sources":["../../../src/components/controls/icon.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport { Icon } from \"@impulse-ui-native/icon\";\r\nimport {\r\n getFieldStateTokens,\r\n useComponentsTokens,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlIconProps } from \"../../types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\n\r\nexport const ControlIcon = memo(function ControlIcon({\r\n color,\r\n ...props\r\n}: ControlIconProps) {\r\n const { variant, tone = \"neutral\", disabled, error } = useControlContext();\r\n const tokens = useComponentsTokens().controlAddon;\r\n const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\r\n disabled,\r\n error: Boolean(error),\r\n });\r\n\r\n return <Icon {...props} color={color ?? appearance.iconColor} />;\r\n});\r\n"],"mappings":"AAsBS;AAtBT,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAE3B,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,EAAE,SAAS,OAAO,WAAW,UAAU,MAAM,IAAI,kBAAkB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,SAAS,WAAW,WAAW;AAChE,CAAC;","names":["ControlIcon"]}

package/dist/components/controls/input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, TextInput } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlInputProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\n\nexport const ControlInput = memo(function ControlInput(\n props: ControlInputProps,\n) {\n const { onPress: _onPress, editable, style, ...rest } = props;\n\n const {\n size,\n variant,\n tone = \"neutral\",\n disabled,\n error,\n } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n tone,\n disabled,\n error,\n },\n [size, variant, tone, disabled, error],\n );\n\n const inputStyles = useMemo(\n () => [styles.input, style],\n [styles.input, style],\n );\n\n return (\n <TextInput\n {...rest}\n style={inputStyles}\n placeholderTextColor={styles.placeholder.color}\n editable={!disabled && editable !== false}\n />\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlInputTokens.colors[tone][variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n input: {\n flex: controlInputTokens.flex,\n color: appearanceTokens.color,\n fontSize: sizeTokens.fontSize,\n fontFamily: controlInputTokens.fontFamily,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n height: \"100%\",\n },\n\n placeholder: {\n color: appearanceTokens.placeholderColor,\n },\n });\n}\n"],"mappings":"AAyCI;AAzCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAGtC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAExD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC,YAAY,aAAa;AAAA;AAAA,EACtC;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}
1	+ {"version":3,"sources":["../../../src/components/controls/input.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet, TextInput } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlInputProps } from \"../../types\";\r\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\n\r\nexport const ControlInput = memo(function ControlInput(\r\n props: ControlInputProps,\r\n) {\r\n const { onPress: _onPress, editable, style, ...rest } = props;\r\n\r\n const {\r\n size,\r\n variant,\r\n tone = \"neutral\",\r\n disabled,\r\n error,\r\n } = useControlContext();\r\n\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n {\r\n size,\r\n variant,\r\n tone,\r\n disabled,\r\n error,\r\n },\r\n [size, variant, tone, disabled, error],\r\n );\r\n\r\n const inputStyles = useMemo(\r\n () => [styles.input, style],\r\n [styles.input, style],\r\n );\r\n\r\n return (\r\n <TextInput\r\n {...rest}\r\n style={inputStyles}\r\n placeholderTextColor={styles.placeholder.color}\r\n editable={!disabled && editable !== false}\r\n />\r\n );\r\n});\r\n\r\nfunction themedStyles(\r\n theme: AppTheme,\r\n { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\r\n) {\r\n const controlInputTokens = theme.components.controlInput;\r\n const sizeTokens = controlInputTokens.sizes[size];\r\n const appearanceTokens = getFieldStateTokens(\r\n controlInputTokens.colors[tone][variant],\r\n { disabled, error: Boolean(error) },\r\n );\r\n\r\n return StyleSheet.create({\r\n input: {\r\n flex: controlInputTokens.flex,\r\n color: appearanceTokens.color,\r\n fontSize: sizeTokens.fontSize,\r\n fontFamily: controlInputTokens.fontFamily,\r\n paddingHorizontal: controlInputTokens.paddingHorizontal,\r\n height: \"100%\",\r\n },\r\n\r\n placeholder: {\r\n color: appearanceTokens.placeholderColor,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAyCI;AAzCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,iBAAiB;AAGtC,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,SAAS,UAAU,UAAU,OAAO,GAAG,KAAK,IAAI;AAExD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,sBAAsB,OAAO,YAAY;AAAA,MACzC,UAAU,CAAC,YAAY,aAAa;AAAA;AAAA,EACtC;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,mBAAmB;AAAA,MAC/B,mBAAmB,mBAAmB;AAAA,MACtC,QAAQ;AAAA,IACV;AAAA,IAEA,aAAa;AAAA,MACX,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlInput"]}

package/dist/components/controls/label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlLabelProps } from \"../../types\";\nimport type { ControlStateThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlLabel = memo(function ControlLabel(\n props: ControlLabelProps,\n) {\n const { children, disabled: disabledProp, style, ...rest } = props;\n\n const { error, disabled: groupDisabled } = useControlContext();\n const disabled = Boolean(groupDisabled) \|\| disabledProp === true;\n\n const styles = useThemedStyles(\n themedStyles,\n {\n disabled,\n error,\n },\n [disabled, error],\n );\n\n const labelStyle = useMemo(\n () => [styles.label, style],\n [styles.label, style],\n );\n\n if (!children) {\n return null;\n }\n\n return (\n <Typography.Label {...rest} style={labelStyle}>\n {children}\n </Typography.Label>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: ControlStateThemeProps) {\n const { disabled, error } = props;\n\n const controlLabelTokens = theme.components.controlLabel;\n const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\n disabled,\n error: Boolean(error),\n });\n\n return StyleSheet.create({\n label: {\n marginBottom: controlLabelTokens.marginBottom,\n fontSize: controlLabelTokens.fontSize,\n color: appearanceTokens.color,\n },\n });\n}\n"],"mappings":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,KAAK,IAAI;AAE7D,QAAM,EAAE,OAAO,UAAU,cAAc,IAAI,kBAAkB;AAC7D,QAAM,WAAW,QAAQ,aAAa,KAAK,iBAAiB;AAE5D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA+B;AACpE,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}
1	+ {"version":3,"sources":["../../../src/components/controls/label.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlLabelProps } from \"../../types\";\r\nimport type { ControlStateThemeProps } from \"../../types/control-theme.types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\nimport { Typography } from \"../atoms\";\r\n\r\nexport const ControlLabel = memo(function ControlLabel(\r\n props: ControlLabelProps,\r\n) {\r\n const { children, disabled: disabledProp, style, ...rest } = props;\r\n\r\n const { error, disabled: groupDisabled } = useControlContext();\r\n const disabled = Boolean(groupDisabled) \|\| disabledProp === true;\r\n\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n {\r\n disabled,\r\n error,\r\n },\r\n [disabled, error],\r\n );\r\n\r\n const labelStyle = useMemo(\r\n () => [styles.label, style],\r\n [styles.label, style],\r\n );\r\n\r\n if (!children) {\r\n return null;\r\n }\r\n\r\n return (\r\n <Typography.Label {...rest} style={labelStyle}>\r\n {children}\r\n </Typography.Label>\r\n );\r\n});\r\n\r\nfunction themedStyles(theme: AppTheme, props: ControlStateThemeProps) {\r\n const { disabled, error } = props;\r\n\r\n const controlLabelTokens = theme.components.controlLabel;\r\n const appearanceTokens = getFieldStateTokens(controlLabelTokens.states, {\r\n disabled,\r\n error: Boolean(error),\r\n });\r\n\r\n return StyleSheet.create({\r\n label: {\r\n marginBottom: controlLabelTokens.marginBottom,\r\n fontSize: controlLabelTokens.fontSize,\r\n color: appearanceTokens.color,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAsCI;AAtCJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,KAAK,IAAI;AAE7D,QAAM,EAAE,OAAO,UAAU,cAAc,IAAI,kBAAkB;AAC7D,QAAM,WAAW,QAAQ,aAAa,KAAK,iBAAiB;AAE5D,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,EAClB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,WAAW,OAAX,EAAkB,GAAG,MAAM,OAAO,YAChC,UACH;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAA+B;AACpE,QAAM,EAAE,UAAU,MAAM,IAAI;AAE5B,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,mBAAmB,oBAAoB,mBAAmB,QAAQ;AAAA,IACtE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,cAAc,mBAAmB;AAAA,MACjC,UAAU,mBAAmB;AAAA,MAC7B,OAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF,CAAC;AACH;","names":["ControlLabel"]}

package/dist/components/controls/loader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/loader.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport {\n getFieldStateTokens,\n useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlLoaderProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Spinner } from \"../atoms/spinner\";\n\nexport const ControlLoader = memo(function ControlLoader(\n props: ControlLoaderProps,\n) {\n const { variant, tone = \"neutral\", disabled, error } = useControlContext();\n const tokens = useComponentsTokens().controlAddon;\n const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\n disabled,\n error: Boolean(error),\n });\n\n return <Spinner color={appearance.iconColor} {...props} />;\n});\n"],"mappings":"AAqBS;AArBT,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,eAAe;AAEjB,MAAM,gBAAgB,KAAK,SAASA,eACzC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,WAAW,UAAU,MAAM,IAAI,kBAAkB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,WAAQ,OAAO,WAAW,WAAY,GAAG,OAAO;AAC1D,CAAC;","names":["ControlLoader"]}
1	+ {"version":3,"sources":["../../../src/components/controls/loader.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport {\r\n getFieldStateTokens,\r\n useComponentsTokens,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlLoaderProps } from \"../../types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\nimport { Spinner } from \"../atoms/spinner\";\r\n\r\nexport const ControlLoader = memo(function ControlLoader(\r\n props: ControlLoaderProps,\r\n) {\r\n const { variant, tone = \"neutral\", disabled, error } = useControlContext();\r\n const tokens = useComponentsTokens().controlAddon;\r\n const appearance = getFieldStateTokens(tokens.colors[tone][variant], {\r\n disabled,\r\n error: Boolean(error),\r\n });\r\n\r\n return <Spinner color={appearance.iconColor} {...props} />;\r\n});\r\n"],"mappings":"AAqBS;AArBT,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,eAAe;AAEjB,MAAM,gBAAgB,KAAK,SAASA,eACzC,OACA;AACA,QAAM,EAAE,SAAS,OAAO,WAAW,UAAU,MAAM,IAAI,kBAAkB;AACzE,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,oBAAoB,OAAO,OAAO,IAAI,EAAE,OAAO,GAAG;AAAA,IACnE;AAAA,IACA,OAAO,QAAQ,KAAK;AAAA,EACtB,CAAC;AAED,SAAO,oBAAC,WAAQ,OAAO,WAAW,WAAY,GAAG,OAAO;AAC1D,CAAC;","names":["ControlLoader"]}

package/dist/components/controls/placeholder.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlPlaceholderProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\n props: ControlPlaceholderProps,\n) {\n const { style, ...rest } = props;\n\n const {\n size,\n variant,\n tone = \"neutral\",\n disabled,\n error,\n } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n tone,\n disabled,\n error,\n },\n [size, variant, tone, disabled, error],\n );\n\n const placeholderStyle = useMemo(\n () => [styles.placeholder, style],\n [styles.placeholder, style],\n );\n\n return (\n <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\n );\n});\n\nfunction themedStyles(\n theme: AppTheme,\n { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlInputTokens.colors[tone][variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n placeholder: {\n flex: controlInputTokens.flex,\n color: appearanceTokens.placeholderColor,\n fontFamily: controlInputTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n },\n });\n}\n"],"mappings":"AA0CI;AA1CJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}
1	+ {"version":3,"sources":["../../../src/components/controls/placeholder.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlPlaceholderProps } from \"../../types\";\r\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\nimport { Typography } from \"../atoms\";\r\n\r\nexport const ControlPlaceholder = memo(function ControlPlaceholder(\r\n props: ControlPlaceholderProps,\r\n) {\r\n const { style, ...rest } = props;\r\n\r\n const {\r\n size,\r\n variant,\r\n tone = \"neutral\",\r\n disabled,\r\n error,\r\n } = useControlContext();\r\n\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n {\r\n size,\r\n variant,\r\n tone,\r\n disabled,\r\n error,\r\n },\r\n [size, variant, tone, disabled, error],\r\n );\r\n\r\n const placeholderStyle = useMemo(\r\n () => [styles.placeholder, style],\r\n [styles.placeholder, style],\r\n );\r\n\r\n return (\r\n <Typography.Master numberOfLines={1} {...rest} style={placeholderStyle} />\r\n );\r\n});\r\n\r\nfunction themedStyles(\r\n theme: AppTheme,\r\n { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\r\n) {\r\n const controlInputTokens = theme.components.controlInput;\r\n const sizeTokens = controlInputTokens.sizes[size];\r\n const appearanceTokens = getFieldStateTokens(\r\n controlInputTokens.colors[tone][variant],\r\n { disabled, error: Boolean(error) },\r\n );\r\n\r\n return StyleSheet.create({\r\n placeholder: {\r\n flex: controlInputTokens.flex,\r\n color: appearanceTokens.placeholderColor,\r\n fontFamily: controlInputTokens.fontFamily,\r\n fontSize: sizeTokens.fontSize,\r\n paddingHorizontal: controlInputTokens.paddingHorizontal,\r\n },\r\n });\r\n}\r\n"],"mappings":"AA0CI;AA1CJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,CAAC,OAAO,aAAa,KAAK;AAAA,IAChC,CAAC,OAAO,aAAa,KAAK;AAAA,EAC5B;AAEA,SACE,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,kBAAkB;AAE5E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,aAAa;AAAA,MACX,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlPlaceholder"]}

package/dist/components/controls/provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/provider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { ControlComponentProps, ControlContextData } from \"../../types\";\nimport { ControlContext } from \"../../contexts/control.context\";\n\nexport const ControlProvider = memo(function ControlProvider(\n props: PropsWithChildren<ControlComponentProps>,\n) {\n const {\n children,\n disabled,\n error,\n size = \"medium\",\n variant = \"outlined\",\n tone = \"neutral\",\n } = props;\n\n const context = useMemo<ControlContextData>(\n () => ({\n disabled,\n error,\n size,\n variant,\n tone,\n }),\n [disabled, error, size, variant, tone],\n );\n\n return (\n <ControlContext.Provider value={context}>\n {children}\n </ControlContext.Provider>\n );\n});\n"],"mappings":"AA8BI;AA7BJ,SAAS,MAAM,eAAe;AAG9B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO,MAAM,SAAS,IAAI;AAAA,EACvC;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["ControlProvider"]}
1	+ {"version":3,"sources":["../../../src/components/controls/provider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport { memo, useMemo } from \"react\";\r\n\r\nimport type { ControlComponentProps, ControlContextData } from \"../../types\";\r\nimport { ControlContext } from \"../../contexts/control.context\";\r\n\r\nexport const ControlProvider = memo(function ControlProvider(\r\n props: PropsWithChildren<ControlComponentProps>,\r\n) {\r\n const {\r\n children,\r\n disabled,\r\n error,\r\n size = \"medium\",\r\n variant = \"outlined\",\r\n tone = \"neutral\",\r\n } = props;\r\n\r\n const context = useMemo<ControlContextData>(\r\n () => ({\r\n disabled,\r\n error,\r\n size,\r\n variant,\r\n tone,\r\n }),\r\n [disabled, error, size, variant, tone],\r\n );\r\n\r\n return (\r\n <ControlContext.Provider value={context}>\r\n {children}\r\n </ControlContext.Provider>\r\n );\r\n});\r\n"],"mappings":"AA8BI;AA7BJ,SAAS,MAAM,eAAe;AAG9B,SAAS,sBAAsB;AAExB,MAAM,kBAAkB,KAAK,SAASA,iBAC3C,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,UAAU,OAAO,MAAM,SAAS,IAAI;AAAA,EACvC;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["ControlProvider"]}

package/dist/components/controls/root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/root.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport type { ViewProps } from \"../../types\";\nimport { View } from \"../atoms\";\n\nexport const ControlRoot = memo(function ControlRoot(props: ViewProps) {\n return <View {...props} />;\n});\n"],"mappings":"AAMS;AANT,SAAS,YAAY;AAGrB,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY,OAAkB;AACrE,SAAO,oBAAC,QAAM,GAAG,OAAO;AAC1B,CAAC;","names":["ControlRoot"]}
1	+ {"version":3,"sources":["../../../src/components/controls/root.tsx"],"sourcesContent":["import { memo } from \"react\";\r\n\r\nimport type { ViewProps } from \"../../types\";\r\nimport { View } from \"../atoms\";\r\n\r\nexport const ControlRoot = memo(function ControlRoot(props: ViewProps) {\r\n return <View {...props} />;\r\n});\r\n"],"mappings":"AAMS;AANT,SAAS,YAAY;AAGrB,SAAS,YAAY;AAEd,MAAM,cAAc,KAAK,SAASA,aAAY,OAAkB;AACrE,SAAO,oBAAC,QAAM,GAAG,OAAO;AAC1B,CAAC;","names":["ControlRoot"]}

package/dist/components/controls/trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/trigger.tsx"],"sourcesContent":["import type { PressableStateCallbackType } from \"react-native\";\nimport { memo, useCallback } from \"react\";\n\nimport {\n useComponentsTokens,\n useStyleProps,\n useThemedStyles,\n} from \"@impulse-ui-native/theme\";\n\nimport type { ControlTriggerProps } from \"../../types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Pressable } from \"../atoms/pressable\";\nimport { controlContainerStyles } from \"./container.styles\";\n\nexport const ControlTrigger = memo(function ControlTrigger({\n disabled: disabledProp,\n style,\n ...props\n}: ControlTriggerProps) {\n const {\n size,\n variant,\n tone = \"neutral\",\n disabled,\n error,\n } = useControlContext();\n const tokens = useComponentsTokens().pressable;\n const resolvedDisabled = Boolean(disabled) \|\| disabledProp === true;\n const styles = useThemedStyles(\n controlContainerStyles,\n { size, variant, tone, disabled: resolvedDisabled, error },\n [size, variant, tone, resolvedDisabled, error],\n );\n const extractedStyleProps = useStyleProps(props);\n\n const triggerStyle = useCallback(\n (state: PressableStateCallbackType) => [\n styles.inputContainer,\n {\n opacity:\n styles.inputContainer.opacity *\n (state.pressed ? tokens.pressedOpacity : 1),\n },\n extractedStyleProps,\n typeof style === \"function\" ? style(state) : style,\n ],\n [extractedStyleProps, style, styles.inputContainer, tokens.pressedOpacity],\n );\n\n return (\n <Pressable {...props} disabled={resolvedDisabled} style={triggerStyle} />\n );\n});\n"],"mappings":"AAkDI;AAjDJ,SAAS,MAAM,mBAAmB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AACtB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,mBAAmB,QAAQ,QAAQ,KAAK,iBAAiB;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,kBAAkB,MAAM;AAAA,IACzD,CAAC,MAAM,SAAS,MAAM,kBAAkB,KAAK;AAAA,EAC/C;AACA,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,QACE,SACE,OAAO,eAAe,WACrB,MAAM,UAAU,OAAO,iBAAiB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,qBAAqB,OAAO,OAAO,gBAAgB,OAAO,cAAc;AAAA,EAC3E;AAEA,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,kBAAkB,OAAO,cAAc;AAE3E,CAAC;","names":["ControlTrigger"]}
1	+ {"version":3,"sources":["../../../src/components/controls/trigger.tsx"],"sourcesContent":["import type { PressableStateCallbackType } from \"react-native\";\r\nimport { memo, useCallback } from \"react\";\r\n\r\nimport {\r\n useComponentsTokens,\r\n useStyleProps,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlTriggerProps } from \"../../types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\nimport { Pressable } from \"../atoms/pressable\";\r\nimport { controlContainerStyles } from \"./container.styles\";\r\n\r\nexport const ControlTrigger = memo(function ControlTrigger({\r\n disabled: disabledProp,\r\n style,\r\n ...props\r\n}: ControlTriggerProps) {\r\n const {\r\n size,\r\n variant,\r\n tone = \"neutral\",\r\n disabled,\r\n error,\r\n } = useControlContext();\r\n const tokens = useComponentsTokens().pressable;\r\n const resolvedDisabled = Boolean(disabled) \|\| disabledProp === true;\r\n const styles = useThemedStyles(\r\n controlContainerStyles,\r\n { size, variant, tone, disabled: resolvedDisabled, error },\r\n [size, variant, tone, resolvedDisabled, error],\r\n );\r\n const extractedStyleProps = useStyleProps(props);\r\n\r\n const triggerStyle = useCallback(\r\n (state: PressableStateCallbackType) => [\r\n styles.inputContainer,\r\n {\r\n opacity:\r\n styles.inputContainer.opacity *\r\n (state.pressed ? tokens.pressedOpacity : 1),\r\n },\r\n extractedStyleProps,\r\n typeof style === \"function\" ? style(state) : style,\r\n ],\r\n [extractedStyleProps, style, styles.inputContainer, tokens.pressedOpacity],\r\n );\r\n\r\n return (\r\n <Pressable {...props} disabled={resolvedDisabled} style={triggerStyle} />\r\n );\r\n});\r\n"],"mappings":"AAkDI;AAjDJ,SAAS,MAAM,mBAAmB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EACzD,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AACtB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,mBAAmB,QAAQ,QAAQ,KAAK,iBAAiB;AAC/D,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,kBAAkB,MAAM;AAAA,IACzD,CAAC,MAAM,SAAS,MAAM,kBAAkB,KAAK;AAAA,EAC/C;AACA,QAAM,sBAAsB,cAAc,KAAK;AAE/C,QAAM,eAAe;AAAA,IACnB,CAAC,UAAsC;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,QACE,SACE,OAAO,eAAe,WACrB,MAAM,UAAU,OAAO,iBAAiB;AAAA,MAC7C;AAAA,MACA;AAAA,MACA,OAAO,UAAU,aAAa,MAAM,KAAK,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,qBAAqB,OAAO,OAAO,gBAAgB,OAAO,cAAc;AAAA,EAC3E;AAEA,SACE,oBAAC,aAAW,GAAG,OAAO,UAAU,kBAAkB,OAAO,cAAc;AAE3E,CAAC;","names":["ControlTrigger"]}

package/dist/components/controls/value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { ControlValueProps } from \"../../types\";\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\nimport { Typography } from \"../atoms\";\n\nexport const ControlValue = memo(function ControlValue(\n props: ControlValueProps,\n) {\n const { style, ...rest } = props;\n\n const {\n size,\n variant,\n tone = \"neutral\",\n disabled,\n error,\n } = useControlContext();\n\n const styles = useThemedStyles(\n themedStyles,\n { size, variant, tone, disabled, error },\n [size, variant, tone, disabled, error],\n );\n\n const valueStyle = useMemo(\n () => [styles.value, style],\n [styles.value, style],\n );\n\n return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\n});\n\nfunction themedStyles(\n theme: AppTheme,\n { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\n) {\n const controlInputTokens = theme.components.controlInput;\n const sizeTokens = controlInputTokens.sizes[size];\n const appearanceTokens = getFieldStateTokens(\n controlInputTokens.colors[tone][variant],\n { disabled, error: Boolean(error) },\n );\n\n return StyleSheet.create({\n value: {\n flex: controlInputTokens.flex,\n color: appearanceTokens.color,\n fontFamily: controlInputTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n paddingHorizontal: controlInputTokens.paddingHorizontal,\n },\n });\n}\n"],"mappings":"AAmCS;AAnCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM;AAAA,IACvC,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}
1	+ {"version":3,"sources":["../../../src/components/controls/value.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\r\nimport { StyleSheet } from \"react-native\";\r\n\r\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\r\nimport { getFieldStateTokens, useThemedStyles } from \"@impulse-ui-native/theme\";\r\n\r\nimport type { ControlValueProps } from \"../../types\";\r\nimport type { ControlFieldThemeProps } from \"../../types/control-theme.types\";\r\nimport { useControlContext } from \"../../hooks/use-control-context.hook\";\r\nimport { Typography } from \"../atoms\";\r\n\r\nexport const ControlValue = memo(function ControlValue(\r\n props: ControlValueProps,\r\n) {\r\n const { style, ...rest } = props;\r\n\r\n const {\r\n size,\r\n variant,\r\n tone = \"neutral\",\r\n disabled,\r\n error,\r\n } = useControlContext();\r\n\r\n const styles = useThemedStyles(\r\n themedStyles,\r\n { size, variant, tone, disabled, error },\r\n [size, variant, tone, disabled, error],\r\n );\r\n\r\n const valueStyle = useMemo(\r\n () => [styles.value, style],\r\n [styles.value, style],\r\n );\r\n\r\n return <Typography.Master numberOfLines={1} {...rest} style={valueStyle} />;\r\n});\r\n\r\nfunction themedStyles(\r\n theme: AppTheme,\r\n { size, variant, tone = \"neutral\", disabled, error }: ControlFieldThemeProps,\r\n) {\r\n const controlInputTokens = theme.components.controlInput;\r\n const sizeTokens = controlInputTokens.sizes[size];\r\n const appearanceTokens = getFieldStateTokens(\r\n controlInputTokens.colors[tone][variant],\r\n { disabled, error: Boolean(error) },\r\n );\r\n\r\n return StyleSheet.create({\r\n value: {\r\n flex: controlInputTokens.flex,\r\n color: appearanceTokens.color,\r\n fontFamily: controlInputTokens.fontFamily,\r\n fontSize: sizeTokens.fontSize,\r\n paddingHorizontal: controlInputTokens.paddingHorizontal,\r\n },\r\n });\r\n}\r\n"],"mappings":"AAmCS;AAnCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,qBAAqB,uBAAuB;AAIrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,GAAG,KAAK,IAAI;AAE3B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAEtB,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,SAAS,MAAM,UAAU,MAAM;AAAA,IACvC,CAAC,MAAM,SAAS,MAAM,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,KAAK;AAAA,IAC1B,CAAC,OAAO,OAAO,KAAK;AAAA,EACtB;AAEA,SAAO,oBAAC,WAAW,QAAX,EAAkB,eAAe,GAAI,GAAG,MAAM,OAAO,YAAY;AAC3E,CAAC;AAED,SAAS,aACP,OACA,EAAE,MAAM,SAAS,OAAO,WAAW,UAAU,MAAM,GACnD;AACA,QAAM,qBAAqB,MAAM,WAAW;AAC5C,QAAM,aAAa,mBAAmB,MAAM,IAAI;AAChD,QAAM,mBAAmB;AAAA,IACvB,mBAAmB,OAAO,IAAI,EAAE,OAAO;AAAA,IACvC,EAAE,UAAU,OAAO,QAAQ,KAAK,EAAE;AAAA,EACpC;AAEA,SAAO,WAAW,OAAO;AAAA,IACvB,OAAO;AAAA,MACL,MAAM,mBAAmB;AAAA,MACzB,OAAO,iBAAiB;AAAA,MACxB,YAAY,mBAAmB;AAAA,MAC/B,UAAU,WAAW;AAAA,MACrB,mBAAmB,mBAAmB;AAAA,IACxC;AAAA,EACF,CAAC;AACH;","names":["ControlValue"]}

package/dist/types/badge-addon.types.d.mts ADDED Viewed

@@ -0,0 +1,20 @@
+import { BadgeProps } from './badge.types.mjs';
+import 'react';
+import 'react-native';
+import '@impulse-ui-native/theme';
+import './control-components.types.mjs';
+import '@impulse-ui-native/icon/types';
+import './button.types.mjs';
+import './view.types.mjs';
+import './spinner.types.mjs';
+interface BadgeAddonProps {
+    color: string | undefined;
+    Content: BadgeProps["Prefix"];
+    hitSlop: number;
+    iconSize: number;
+    IconComponent: BadgeProps["PrefixIcon"];
+    onPress: BadgeProps["onPressPrefix"];
+}
+export type { BadgeAddonProps };

package/dist/types/badge-addon.types.js ADDED Viewed

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

package/dist/types/badge-addon.types.js.map ADDED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/primitives",
-  "version": "15.0.5",
+  "version": "17.0.0",
   "description": "Foundational UI primitives for building ImpulseUI Native components.",
   "keywords": [
     "react-native",
@@ -28,9 +28,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/theme": "15.0.5",
-    "@impulse-ui-native/icon": "15.0.5",
-    "@impulse-ui-native/core": "15.0.5"
+    "@impulse-ui-native/theme": "17.0.0",
+    "@impulse-ui-native/icon": "17.0.0",
+    "@impulse-ui-native/core": "17.0.0"
   },
   "devDependencies": {
     "@impulse-ui-native/eslint-config": "1.0.0",