@impulse-ui-native/primitives 15.0.4 → 16.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.
package/README.md CHANGED
@@ -1,261 +1,261 @@
1
- # @impulse-ui-native/primitives
2
-
3
- Token-aware React Native building blocks used directly by applications and by the higher-level Impulse UI Native packages.
4
-
5
- ## Installation
6
-
7
- ```sh
8
- pnpm add @impulse-ui-native/primitives
9
- ```
10
-
11
- Render primitives inside `ThemeProvider` from `@impulse-ui-native/theme`.
12
-
13
- `SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Icon-based primitives require `react-native-svg`:
14
-
15
- ```sh
16
- pnpm add react-native-safe-area-context react-native-svg
17
- ```
18
-
19
- ## Main exports
20
-
21
- - `View` adds theme spacing, dimensions, flex, borders, colors, and shadow props to React Native's view.
22
- - `SafeAreaView` maps safe-area edges to the theme spacing scale.
23
- - `Typography` exposes named text presets such as `DisplayLarge`, `Title1`, `Body`, `Caption`, and `Code`.
24
- - `Button`, `IconButton`, and `Pressable` provide themed interaction primitives.
25
- - `Tag` labels categories, filters, and metadata, with optional press and close behavior.
26
- - `Badge` provides compact semantic labels with visual variants and Input-style prefix and suffix addons.
27
- - `Spinner` provides token-aware sizes and semantic colors for indeterminate loading states.
28
- - `Divider` separates content horizontally or vertically with logical insets and semantic colors.
29
- - `Avatar` represents identity with shared visual variants, images, initials, custom fallbacks, and semantic presence status.
30
- - `Control` is a compound control system with `Provider`, `Root`, `Label`, `Container`, `Addon`, `Input`, `Placeholder`, `Value`, `Loader`, and `Error` parts.
31
- - `createPreset` creates reusable themed typography presets.
32
- - Public prop types describe every primitive and control part.
33
-
34
- Typography presets update their colors with the active theme:
35
-
36
- - `Subtitle1`, `Subtitle2`, `BodySmall`, `Caption`, `Helper`, `Overline`, and
37
- `Eyebrow` use `theme.colors.text.secondary` for supporting text.
38
- - The other presets use `theme.colors.text.primary` for headings and main content.
39
-
40
- `createPreset` accepts a theme-based `color` in its configuration and falls back
41
- to `text.primary` when omitted. Explicit `color` props override the preset color;
42
- `style.color` takes precedence over both. Use tertiary, disabled, inverse, and
43
- feedback colors explicitly when the surrounding component or state requires them.
44
- Preset and explicit `fontFamily` and `fontVariant` values are honored, including
45
- monospace Code. `numeric` selects tabular numbers; style overrides apply last.
46
-
47
- ## Example
48
-
49
- ```tsx
50
- import { Card } from "@impulse-ui-native/card";
51
- import {
52
- Avatar,
53
- Badge,
54
- Button,
55
- Divider,
56
- Spinner,
57
- Tag,
58
- Typography,
59
- View,
60
- } from "@impulse-ui-native/primitives";
61
- import { Progress } from "@impulse-ui-native/progress";
62
- import { useSpace } from "@impulse-ui-native/theme";
63
-
64
- export function ProfileSummary() {
65
- const space = useSpace();
66
-
67
- return (
68
- <View gap={space.md} padding={space.lg}>
69
- <Typography.Title3>Profile</Typography.Title3>
70
- <Avatar initials="AK" status="online" variant="soft" />
71
- <Tag label="Active" tone="success" />
72
- <Badge tone="success" variant="soft">
73
- Active
74
- </Badge>
75
- <Spinner size="small" tone="secondary" />
76
- <Progress value={65} />
77
- <Card.Root>
78
- <Card.Header>
79
- <Typography.Title4>Account activity</Typography.Title4>
80
- </Card.Header>
81
- <Card.Content>
82
- <Typography.Body>Three new updates are available.</Typography.Body>
83
- </Card.Content>
84
- </Card.Root>
85
- <Divider inset="both" />
86
- <Button variant="filled" onPress={() => {}}>
87
- Continue
88
- </Button>
89
- </View>
90
- );
91
- }
92
- ```
93
-
94
- 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`.
95
-
96
- `Control.Trigger` combines the field container's themed geometry with a
97
- Pressable. It respects group and local disabling and accepts supplied children,
98
- style props, and function-valued pressable styles. `Control.Icon` renders a
99
- caller-selected icon with the current field's addon color.
100
-
101
- `Control.Field` assembles a label, trigger, optional prefix/suffix slots, and an
102
- error label for a read-only selection field. The caller supplies the value,
103
- placeholder, icons, and behavior; this convenience component does not choose
104
- default icons or manage selection state.
105
-
106
- ```tsx
107
- <Control.Field
108
- label="Destination"
109
- onPress={openDestinationPicker}
110
- prefix={<Control.Icon icon={LocationIcon} />}
111
- >
112
- <Control.Value>{destination}</Control.Value>
113
- </Control.Field>
114
- ```
115
-
116
- `Control.Addon` and `Control.Error` render supplied children. Addons own spacing
117
- and optional press behavior, including group/local disabling; the parent chooses
118
- and renders icons or custom content. Error owns error-label styling; the parent
119
- chooses the text and whether to render the slot. `Input`, `Select`, date/time
120
- pickers, `Textarea`, and `FormField` assemble these children explicitly.
121
-
122
- For direct composition, migrate `icon` and `Content` props to addon children and
123
- supply error text instead of relying on `Control.Provider.error` to render it:
124
-
125
- ```tsx
126
- <>
127
- <Control.Addon onPress={onPressPrefix}>
128
- <Icon icon={PrefixIcon} color={addonColor} />
129
- </Control.Addon>
130
- {error ? <Control.Error>{error}</Control.Error> : null}
131
- </>
132
- ```
133
-
134
- Resolve `addonColor` from
135
- `getFieldStateTokens(theme.components.controlAddon.variants[variant], { disabled, error: Boolean(error) }).iconColor`
136
- using the current theme. The provider's error value continues to drive field
137
- appearance, but does not inject label content.
138
-
139
- `Button` and `IconButton` replace their content with a loading indicator when `loading` is true. Loading controls block interaction until loading ends.
140
-
141
- `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.
142
-
143
- `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.
144
-
145
- `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.
146
-
147
- 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.
148
-
149
- Badges follow their parent's `alignItems` for cross-axis alignment. For example,
150
- use `alignItems="center"` on a column to center badges horizontally. Use
151
- `alignSelf` on a badge when it needs a different alignment from its siblings.
152
-
153
- ## Dedicated component packages
154
-
155
- 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.
156
-
157
- ## Shared shadow and code-font defaults
158
-
159
- `View` and `Pressable` resolve semantic shadow levels from the active
160
- `theme.shadows` scale, including Android elevation. Explicit shadow style props
161
- and style overrides still take precedence. Configure `theme.codeFontFamily`
162
- to change `Typography.Code` globally; its default remains `monospace`.
163
-
164
- ## Field layout
165
-
166
- `Control.Root` uses normal parent stretching rather than a forced width.
167
- `Control.Field` accepts flex, dimension, and spacing props on its outer root.
168
- In a column, fields stretch horizontally by default without growing vertically.
169
- In a row, set `flex={1}` on each field to share the available width. If the
170
- parent centers its children, use `alignSelf="stretch"` or an explicit `width`.
171
-
172
- ## Pressable styling
173
-
174
- `Pressable` accepts the same direct styling props as `View`: spacing, colors,
175
- opacity, shadows, borders, radii, flex layout, positioning, and dimensions. Both
176
- share the exported `ViewStyleProps` contract. Native `style` objects or callbacks override
177
- direct style props; `pressedStyle` applies last while pressed.
178
-
179
- ```tsx
180
- <Pressable
181
- flex={1}
182
- flexDirection="row"
183
- alignItems="center"
184
- gap={8}
185
- padding={16}
186
- backgroundColor={colors.surface.subtle.value}
187
- borderColor={colors.border.default.value}
188
- borderWidth={1}
189
- borderRadius={radii.md}
190
- >
191
- <Typography.Master>Continue</Typography.Master>
192
- </Pressable>
193
- ```
194
-
195
- Text and icons keep their own foreground styling, as with `View`.
196
-
197
- ## Field appearance
198
-
199
- Rectangular fields support `variant="outlined" | "soft" | "filled"` and
200
- `tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
201
- Outlined uses a transparent surface with a tone border; soft uses a subtle tone
202
- surface; filled uses the tone fill with its paired foreground. Colors come from
203
- the active theme in both schemes. Error styling overrides the selected tone;
204
- disabled fields use neutral styling and block interaction.
205
-
206
- Customize `components.controlContainer.colors[tone][variant][state]`,
207
- `controlInput.colors[tone][variant][state]`, and
208
- `controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
209
- the previous `variants[variant][state]` maps.
210
-
211
- ## Button tones
212
-
213
- `Button` and `IconButton` accept `tone="neutral" | "primary" | "secondary"`
214
- independently of `variant="filled" | "outlined" | "soft" | "ghost"`.
215
- The default tone is `primary`, preserving the existing default appearances.
216
- Neutral uses the neutral palette; secondary uses the secondary brand palette.
217
- Filled uses the tone fill and paired foreground, outlined uses a tone border,
218
- soft uses a subtle tone surface, and ghost uses tone content on a transparent surface.
219
- Loading indicators inherit the resolved foreground. Disabled appearances remain
220
- neutral and both disabled and loading states prevent interaction.
221
-
222
- ```tsx
223
- <Button variant="soft" tone="neutral">Cancel</Button>
224
- <Button variant="filled" tone="primary">Save</Button>
225
- <IconButton icon={SparkleIcon} variant="outlined" tone="secondary" />
226
- ```
227
-
228
- Custom action tokens move from `variants[variant][state]` to
229
- `components.button.colors[tone][variant][state]` and
230
- `components.iconButton.colors[tone][variant][state]`. Each map is authored
231
- explicitly for direct lookup. For custom Button children, style their foreground
232
- using the matching resolved action tokens; string children are styled automatically.
233
-
234
- ## Tag and Avatar tones
235
-
236
- `Tag` now uses `tone` instead of `color`, with the exported `TagTone` type replacing
237
- `TagColor`. It supports `neutral`, `primary`, `secondary`, `error`, `warning`,
238
- `success`, and `info`; existing feedback palettes remain available. The default is
239
- `primary`. Use `<Tag label="Active" tone="success" />`.
240
-
241
- `Avatar` accepts `tone="neutral" | "primary" | "secondary"`, defaulting to
242
- `primary`, across filled, outlined, and soft variants. Tone affects the fallback
243
- surface, initials, and border; images and presence/status colors retain their own
244
- meaning. Avatar appearance tokens move to `components.avatar.colors[tone][variant]`.
245
-
246
- 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.
247
-
248
- 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.
249
-
250
- ## Repository palette consistency
251
-
252
- Spinner uses the shared primary/secondary/neutral stroke accents, plus inverse.
253
- Divider adds neutral and secondary tones alongside primary/inverse and the existing
254
- subtle/default/strong border-intensity aliases. Its default is `tone="default"`.
255
- Feedback tone names are shared through FeedbackTone; generic brand tones through
256
- ComponentTone. Typography foregrounds and raw Icon color/fill remain explicit
257
- semantic or caller-selected colors, rather than a second tone API.
258
-
259
- ## Agent and design reference
260
-
261
- 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.
1
+ # @impulse-ui-native/primitives
2
+
3
+ Token-aware React Native building blocks used directly by applications and by the higher-level Impulse UI Native packages.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ pnpm add @impulse-ui-native/primitives
9
+ ```
10
+
11
+ Render primitives inside `ThemeProvider` from `@impulse-ui-native/theme`.
12
+
13
+ `SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Icon-based primitives require `react-native-svg`:
14
+
15
+ ```sh
16
+ pnpm add react-native-safe-area-context react-native-svg
17
+ ```
18
+
19
+ ## Main exports
20
+
21
+ - `View` adds theme spacing, dimensions, flex, borders, colors, and shadow props to React Native's view.
22
+ - `SafeAreaView` maps safe-area edges to the theme spacing scale.
23
+ - `Typography` exposes named text presets such as `DisplayLarge`, `Title1`, `Body`, `Caption`, and `Code`.
24
+ - `Button`, `IconButton`, and `Pressable` provide themed interaction primitives.
25
+ - `Tag` labels categories, filters, and metadata, with optional press and close behavior.
26
+ - `Badge` provides compact semantic labels with visual variants and Input-style prefix and suffix addons.
27
+ - `Spinner` provides token-aware sizes and semantic colors for indeterminate loading states.
28
+ - `Divider` separates content horizontally or vertically with logical insets and semantic colors.
29
+ - `Avatar` represents identity with shared visual variants, images, initials, custom fallbacks, and semantic presence status.
30
+ - `Control` is a compound control system with `Provider`, `Root`, `Label`, `Container`, `Addon`, `Input`, `Placeholder`, `Value`, `Loader`, and `Error` parts.
31
+ - `createPreset` creates reusable themed typography presets.
32
+ - Public prop types describe every primitive and control part.
33
+
34
+ Typography presets update their colors with the active theme:
35
+
36
+ - `Subtitle1`, `Subtitle2`, `BodySmall`, `Caption`, `Helper`, `Overline`, and
37
+ `Eyebrow` use `theme.colors.text.secondary` for supporting text.
38
+ - The other presets use `theme.colors.text.primary` for headings and main content.
39
+
40
+ `createPreset` accepts a theme-based `color` in its configuration and falls back
41
+ to `text.primary` when omitted. Explicit `color` props override the preset color;
42
+ `style.color` takes precedence over both. Use tertiary, disabled, inverse, and
43
+ feedback colors explicitly when the surrounding component or state requires them.
44
+ Preset and explicit `fontFamily` and `fontVariant` values are honored, including
45
+ monospace Code. `numeric` selects tabular numbers; style overrides apply last.
46
+
47
+ ## Example
48
+
49
+ ```tsx
50
+ import { Card } from "@impulse-ui-native/card";
51
+ import {
52
+ Avatar,
53
+ Badge,
54
+ Button,
55
+ Divider,
56
+ Spinner,
57
+ Tag,
58
+ Typography,
59
+ View,
60
+ } from "@impulse-ui-native/primitives";
61
+ import { Progress } from "@impulse-ui-native/progress";
62
+ import { useSpace } from "@impulse-ui-native/theme";
63
+
64
+ export function ProfileSummary() {
65
+ const space = useSpace();
66
+
67
+ return (
68
+ <View gap={space.md} padding={space.lg}>
69
+ <Typography.Title3>Profile</Typography.Title3>
70
+ <Avatar initials="AK" status="online" variant="soft" />
71
+ <Tag label="Active" tone="success" />
72
+ <Badge tone="success" variant="soft">
73
+ Active
74
+ </Badge>
75
+ <Spinner size="small" tone="secondary" />
76
+ <Progress value={65} />
77
+ <Card.Root>
78
+ <Card.Header>
79
+ <Typography.Title4>Account activity</Typography.Title4>
80
+ </Card.Header>
81
+ <Card.Content>
82
+ <Typography.Body>Three new updates are available.</Typography.Body>
83
+ </Card.Content>
84
+ </Card.Root>
85
+ <Divider inset="both" />
86
+ <Button variant="filled" onPress={() => {}}>
87
+ Continue
88
+ </Button>
89
+ </View>
90
+ );
91
+ }
92
+ ```
93
+
94
+ 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`.
95
+
96
+ `Control.Trigger` combines the field container's themed geometry with a
97
+ Pressable. It respects group and local disabling and accepts supplied children,
98
+ style props, and function-valued pressable styles. `Control.Icon` renders a
99
+ caller-selected icon with the current field's addon color.
100
+
101
+ `Control.Field` assembles a label, trigger, optional prefix/suffix slots, and an
102
+ error label for a read-only selection field. The caller supplies the value,
103
+ placeholder, icons, and behavior; this convenience component does not choose
104
+ default icons or manage selection state.
105
+
106
+ ```tsx
107
+ <Control.Field
108
+ label="Destination"
109
+ onPress={openDestinationPicker}
110
+ prefix={<Control.Icon icon={LocationIcon} />}
111
+ >
112
+ <Control.Value>{destination}</Control.Value>
113
+ </Control.Field>
114
+ ```
115
+
116
+ `Control.Addon` and `Control.Error` render supplied children. Addons own spacing
117
+ and optional press behavior, including group/local disabling; the parent chooses
118
+ and renders icons or custom content. Error owns error-label styling; the parent
119
+ chooses the text and whether to render the slot. `Input`, `Select`, date/time
120
+ pickers, `Textarea`, and `FormField` assemble these children explicitly.
121
+
122
+ For direct composition, migrate `icon` and `Content` props to addon children and
123
+ supply error text instead of relying on `Control.Provider.error` to render it:
124
+
125
+ ```tsx
126
+ <>
127
+ <Control.Addon onPress={onPressPrefix}>
128
+ <Icon icon={PrefixIcon} color={addonColor} />
129
+ </Control.Addon>
130
+ {error ? <Control.Error>{error}</Control.Error> : null}
131
+ </>
132
+ ```
133
+
134
+ Resolve `addonColor` from
135
+ `getFieldStateTokens(theme.components.controlAddon.variants[variant], { disabled, error: Boolean(error) }).iconColor`
136
+ using the current theme. The provider's error value continues to drive field
137
+ appearance, but does not inject label content.
138
+
139
+ `Button` and `IconButton` replace their content with a loading indicator when `loading` is true. Loading controls block interaction until loading ends.
140
+
141
+ `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.
142
+
143
+ `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.
144
+
145
+ `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.
146
+
147
+ 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.
148
+
149
+ Badges follow their parent's `alignItems` for cross-axis alignment. For example,
150
+ use `alignItems="center"` on a column to center badges horizontally. Use
151
+ `alignSelf` on a badge when it needs a different alignment from its siblings.
152
+
153
+ ## Dedicated component packages
154
+
155
+ 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.
156
+
157
+ ## Shared shadow and code-font defaults
158
+
159
+ `View` and `Pressable` resolve semantic shadow levels from the active
160
+ `theme.shadows` scale, including Android elevation. Explicit shadow style props
161
+ and style overrides still take precedence. Configure `theme.codeFontFamily`
162
+ to change `Typography.Code` globally; its default remains `monospace`.
163
+
164
+ ## Field layout
165
+
166
+ `Control.Root` uses normal parent stretching rather than a forced width.
167
+ `Control.Field` accepts flex, dimension, and spacing props on its outer root.
168
+ In a column, fields stretch horizontally by default without growing vertically.
169
+ In a row, set `flex={1}` on each field to share the available width. If the
170
+ parent centers its children, use `alignSelf="stretch"` or an explicit `width`.
171
+
172
+ ## Pressable styling
173
+
174
+ `Pressable` accepts the same direct styling props as `View`: spacing, colors,
175
+ opacity, shadows, borders, radii, flex layout, positioning, and dimensions. Both
176
+ share the exported `ViewStyleProps` contract. Native `style` objects or callbacks override
177
+ direct style props; `pressedStyle` applies last while pressed.
178
+
179
+ ```tsx
180
+ <Pressable
181
+ flex={1}
182
+ flexDirection="row"
183
+ alignItems="center"
184
+ gap={8}
185
+ padding={16}
186
+ backgroundColor={colors.surface.subtle.value}
187
+ borderColor={colors.border.default.value}
188
+ borderWidth={1}
189
+ borderRadius={radii.md}
190
+ >
191
+ <Typography.Master>Continue</Typography.Master>
192
+ </Pressable>
193
+ ```
194
+
195
+ Text and icons keep their own foreground styling, as with `View`.
196
+
197
+ ## Field appearance
198
+
199
+ Rectangular fields support `variant="outlined" | "soft" | "filled"` and
200
+ `tone="neutral" | "primary" | "secondary"`. The default is `outlined` / `neutral`.
201
+ Outlined uses a transparent surface with a tone border; soft uses a subtle tone
202
+ surface; filled uses the tone fill with its paired foreground. Colors come from
203
+ the active theme in both schemes. Error styling overrides the selected tone;
204
+ disabled fields use neutral styling and block interaction.
205
+
206
+ Customize `components.controlContainer.colors[tone][variant][state]`,
207
+ `controlInput.colors[tone][variant][state]`, and
208
+ `controlAddon.colors[tone][variant][state]` together. These tone-aware maps replace
209
+ the previous `variants[variant][state]` maps.
210
+
211
+ ## Button tones
212
+
213
+ `Button` and `IconButton` accept `tone="neutral" | "primary" | "secondary"`
214
+ independently of `variant="filled" | "outlined" | "soft" | "ghost"`.
215
+ The default tone is `primary`, preserving the existing default appearances.
216
+ Neutral uses the neutral palette; secondary uses the secondary brand palette.
217
+ Filled uses the tone fill and paired foreground, outlined uses a tone border,
218
+ soft uses a subtle tone surface, and ghost uses tone content on a transparent surface.
219
+ Loading indicators inherit the resolved foreground. Disabled appearances remain
220
+ neutral and both disabled and loading states prevent interaction.
221
+
222
+ ```tsx
223
+ <Button variant="soft" tone="neutral">Cancel</Button>
224
+ <Button variant="filled" tone="primary">Save</Button>
225
+ <IconButton icon={SparkleIcon} variant="outlined" tone="secondary" />
226
+ ```
227
+
228
+ Custom action tokens move from `variants[variant][state]` to
229
+ `components.button.colors[tone][variant][state]` and
230
+ `components.iconButton.colors[tone][variant][state]`. Each map is authored
231
+ explicitly for direct lookup. For custom Button children, style their foreground
232
+ using the matching resolved action tokens; string children are styled automatically.
233
+
234
+ ## Tag and Avatar tones
235
+
236
+ `Tag` now uses `tone` instead of `color`, with the exported `TagTone` type replacing
237
+ `TagColor`. It supports `neutral`, `primary`, `secondary`, `error`, `warning`,
238
+ `success`, and `info`; existing feedback palettes remain available. The default is
239
+ `primary`. Use `<Tag label="Active" tone="success" />`.
240
+
241
+ `Avatar` accepts `tone="neutral" | "primary" | "secondary"`, defaulting to
242
+ `primary`, across filled, outlined, and soft variants. Tone affects the fallback
243
+ surface, initials, and border; images and presence/status colors retain their own
244
+ meaning. Avatar appearance tokens move to `components.avatar.colors[tone][variant]`.
245
+
246
+ 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.
247
+
248
+ 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.
249
+
250
+ ## Repository palette consistency
251
+
252
+ Spinner uses the shared primary/secondary/neutral stroke accents, plus inverse.
253
+ Divider adds neutral and secondary tones alongside primary/inverse and the existing
254
+ subtle/default/strong border-intensity aliases. Its default is `tone="default"`.
255
+ Feedback tone names are shared through FeedbackTone; generic brand tones through
256
+ ComponentTone. Typography foregrounds and raw Icon color/fill remain explicit
257
+ semantic or caller-selected colors, rather than a second tone API.
258
+
259
+ ## Agent and design reference
260
+
261
+ 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.
@@ -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"]}
@@ -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} 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: 0,\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 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,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 +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"]}
@@ -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"]}
@@ -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"]}
@@ -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 } from \"react\";\r\nimport { StyleSheet, View } from \"react-native\";\r\n\r\nimport { Icon } from \"@impulse-ui-native/icon\";\r\nimport { XCircleIcon } from \"@impulse-ui-native/icon/icons/x-circle\";\r\nimport {\r\n AppTheme,\r\n getAvailabilityStateTokens,\r\n useComponentsTokens,\r\n useThemedStyles,\r\n} from \"@impulse-ui-native/theme\";\r\n\r\nimport { 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 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 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={styles.container}>\r\n <Typography.Caption style={styles.label}>{label}</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\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 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":"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 +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"]}
@@ -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":[]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@impulse-ui-native/primitives",
3
- "version": "15.0.4",
3
+ "version": "16.0.0",
4
4
  "description": "Foundational UI primitives for building ImpulseUI Native components.",
5
5
  "keywords": [
6
6
  "react-native",
@@ -28,9 +28,9 @@
28
28
  ],
29
29
  "sideEffects": false,
30
30
  "dependencies": {
31
- "@impulse-ui-native/theme": "15.0.4",
32
- "@impulse-ui-native/icon": "15.0.4",
33
- "@impulse-ui-native/core": "15.0.4"
31
+ "@impulse-ui-native/theme": "16.0.0",
32
+ "@impulse-ui-native/icon": "16.0.0",
33
+ "@impulse-ui-native/core": "16.0.0"
34
34
  },
35
35
  "devDependencies": {
36
36
  "@impulse-ui-native/eslint-config": "1.0.0",