@impulse-ui-native/primitives 5.0.0 → 6.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 +5 -42
- package/dist/components/atoms/avatar.js +5 -2
- package/dist/components/atoms/avatar.js.map +1 -1
- package/dist/components/atoms/badge/addon.js +6 -2
- package/dist/components/atoms/badge/addon.js.map +1 -1
- package/dist/components/atoms/badge/root.js.map +1 -1
- package/dist/components/atoms/divider.js.map +1 -1
- package/dist/components/atoms/index.d.mts +0 -2
- package/dist/components/atoms/index.js +0 -2
- package/dist/components/atoms/index.js.map +1 -1
- package/dist/components/atoms/pressable.js.map +1 -1
- package/dist/components/atoms/safe-area-view.js.map +1 -1
- package/dist/components/atoms/tag.js.map +1 -1
- package/dist/components/atoms/view.js.map +1 -1
- package/dist/components/index.d.mts +0 -6
- package/dist/components/index.js +0 -2
- package/dist/components/index.js.map +1 -1
- package/dist/hocs/create-preset.hoc.js.map +1 -1
- package/dist/index.d.mts +0 -6
- package/dist/types/index.d.mts +0 -3
- package/dist/types/index.js +0 -3
- package/dist/types/index.js.map +1 -1
- package/package.json +5 -5
- package/dist/components/atoms/circular-progress.d.mts +0 -16
- package/dist/components/atoms/circular-progress.js +0 -144
- package/dist/components/atoms/circular-progress.js.map +0 -1
- package/dist/components/atoms/linear-progress.d.mts +0 -17
- package/dist/components/atoms/linear-progress.js +0 -97
- package/dist/components/atoms/linear-progress.js.map +0 -1
- package/dist/components/atoms/progress.d.mts +0 -9
- package/dist/components/atoms/progress.js +0 -66
- package/dist/components/atoms/progress.js.map +0 -1
- package/dist/components/card/card.d.mts +0 -17
- package/dist/components/card/card.js +0 -18
- package/dist/components/card/card.js.map +0 -1
- package/dist/components/card/content.d.mts +0 -10
- package/dist/components/card/content.js +0 -30
- package/dist/components/card/content.js.map +0 -1
- package/dist/components/card/footer.d.mts +0 -10
- package/dist/components/card/footer.js +0 -30
- package/dist/components/card/footer.js.map +0 -1
- package/dist/components/card/header.d.mts +0 -10
- package/dist/components/card/header.js +0 -30
- package/dist/components/card/header.js.map +0 -1
- package/dist/components/card/index.d.mts +0 -7
- package/dist/components/card/index.js +0 -5
- package/dist/components/card/index.js.map +0 -1
- package/dist/components/card/media.d.mts +0 -10
- package/dist/components/card/media.js +0 -30
- package/dist/components/card/media.js.map +0 -1
- package/dist/components/card/pressable.d.mts +0 -10
- package/dist/components/card/pressable.js +0 -27
- package/dist/components/card/pressable.js.map +0 -1
- package/dist/components/card/root.d.mts +0 -10
- package/dist/components/card/root.js +0 -21
- package/dist/components/card/root.js.map +0 -1
- package/dist/components/card/root.styles.d.mts +0 -13
- package/dist/components/card/root.styles.js +0 -17
- package/dist/components/card/root.styles.js.map +0 -1
- package/dist/components/list/content.d.mts +0 -11
- package/dist/components/list/content.js +0 -27
- package/dist/components/list/content.js.map +0 -1
- package/dist/components/list/index.d.mts +0 -8
- package/dist/components/list/index.js +0 -5
- package/dist/components/list/index.js.map +0 -1
- package/dist/components/list/item.d.mts +0 -11
- package/dist/components/list/item.js +0 -32
- package/dist/components/list/item.js.map +0 -1
- package/dist/components/list/leading.d.mts +0 -11
- package/dist/components/list/leading.js +0 -32
- package/dist/components/list/leading.js.map +0 -1
- package/dist/components/list/list.d.mts +0 -18
- package/dist/components/list/list.js +0 -18
- package/dist/components/list/list.js.map +0 -1
- package/dist/components/list/pressable.d.mts +0 -11
- package/dist/components/list/pressable.js +0 -37
- package/dist/components/list/pressable.js.map +0 -1
- package/dist/components/list/root.d.mts +0 -11
- package/dist/components/list/root.js +0 -33
- package/dist/components/list/root.js.map +0 -1
- package/dist/components/list/trailing.d.mts +0 -11
- package/dist/components/list/trailing.js +0 -32
- package/dist/components/list/trailing.js.map +0 -1
- package/dist/hooks/use-indeterminate-progress-animation.hook.d.mts +0 -5
- package/dist/hooks/use-indeterminate-progress-animation.hook.js +0 -26
- package/dist/hooks/use-indeterminate-progress-animation.hook.js.map +0 -1
- package/dist/types/card.types.d.mts +0 -21
- package/dist/types/card.types.js +0 -1
- package/dist/types/card.types.js.map +0 -1
- package/dist/types/list.types.d.mts +0 -21
- package/dist/types/list.types.js +0 -1
- package/dist/types/list.types.js.map +0 -1
- package/dist/types/progress.types.d.mts +0 -15
- package/dist/types/progress.types.js +0 -1
- package/dist/types/progress.types.js.map +0 -1
- package/dist/utils/progress.utils.d.mts +0 -9
- package/dist/utils/progress.utils.js +0 -27
- package/dist/utils/progress.utils.js.map +0 -1
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ pnpm add @impulse-ui-native/primitives
|
|
|
10
10
|
|
|
11
11
|
Render primitives inside `ThemeProvider` from `@impulse-ui-native/theme`.
|
|
12
12
|
|
|
13
|
-
`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root.
|
|
13
|
+
`SafeAreaView` additionally requires `react-native-safe-area-context` and a `SafeAreaProvider` near the application root. Icon-based primitives require `react-native-svg`:
|
|
14
14
|
|
|
15
15
|
```sh
|
|
16
16
|
pnpm add react-native-safe-area-context react-native-svg
|
|
@@ -25,8 +25,6 @@ pnpm add react-native-safe-area-context react-native-svg
|
|
|
25
25
|
- `Tag` labels categories, filters, and metadata, with optional press and close behavior.
|
|
26
26
|
- `Badge` provides compact semantic labels with visual variants and Input-style prefix and suffix addons.
|
|
27
27
|
- `Spinner` provides token-aware sizes and semantic colors for indeterminate loading states.
|
|
28
|
-
- `Progress` provides linear and circular determinate or indeterminate progress.
|
|
29
|
-
- `Card` provides compound `Root`, `Pressable`, `Header`, `Content`, `Footer`, and `Media` surfaces.
|
|
30
28
|
- `Divider` separates content horizontally or vertically with logical insets and semantic colors.
|
|
31
29
|
- `Avatar` represents identity with shared visual variants, images, initials, custom fallbacks, and semantic presence status.
|
|
32
30
|
- `Control` is a compound control system with `Provider`, `Root`, `Label`, `Container`, `Addon`, `Input`, `Placeholder`, `Value`, `Loader`, and `Error` parts.
|
|
@@ -49,18 +47,18 @@ monospace Code. `numeric` selects tabular numbers; style overrides apply last.
|
|
|
49
47
|
## Example
|
|
50
48
|
|
|
51
49
|
```tsx
|
|
50
|
+
import { Card } from "@impulse-ui-native/card";
|
|
52
51
|
import {
|
|
53
52
|
Avatar,
|
|
54
53
|
Badge,
|
|
55
54
|
Button,
|
|
56
|
-
Card,
|
|
57
55
|
Divider,
|
|
58
|
-
Progress,
|
|
59
56
|
Spinner,
|
|
60
57
|
Tag,
|
|
61
58
|
Typography,
|
|
62
59
|
View,
|
|
63
60
|
} from "@impulse-ui-native/primitives";
|
|
61
|
+
import { Progress } from "@impulse-ui-native/progress";
|
|
64
62
|
import { useSpace } from "@impulse-ui-native/theme";
|
|
65
63
|
|
|
66
64
|
export function ProfileSummary() {
|
|
@@ -99,47 +97,12 @@ Use the compound `Control` when building a custom field that should share the sa
|
|
|
99
97
|
|
|
100
98
|
`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.
|
|
101
99
|
|
|
102
|
-
`Progress` defaults to a medium linear indicator. Provide `value` for determinate progress or omit it for an indeterminate animation. Values are clamped between `min` and `max`, defaulting to `0` and `100`.
|
|
103
|
-
|
|
104
|
-
Use `Card.Root` for a static surface and `Card.Pressable` when the whole card has one action. Avoid placing independently pressable controls inside `Card.Pressable`; use `Card.Root` with actions in `Card.Footer` instead.
|
|
105
|
-
|
|
106
100
|
`Divider` defaults to a subtle horizontal separator. Use logical start/end insets to preserve RTL alignment, switch to vertical orientation inside a container with a defined height, and use `color` only when the semantic tones do not fit the surrounding surface.
|
|
107
101
|
|
|
108
102
|
`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.
|
|
109
103
|
|
|
110
104
|
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.
|
|
111
105
|
|
|
112
|
-
##
|
|
113
|
-
|
|
114
|
-
List is a presentation-focused compound component, exported through primitives
|
|
115
|
-
and the toolkit. It uses the existing theme provider and adds no runtime peers.
|
|
116
|
-
|
|
117
|
-
```tsx
|
|
118
|
-
import { Divider, List, Typography } from "@impulse-ui-native/primitives";
|
|
119
|
-
|
|
120
|
-
<List.Root>
|
|
121
|
-
<List.Item>
|
|
122
|
-
<List.Leading>{/* Icon, avatar, or custom content */}</List.Leading>
|
|
123
|
-
<List.Content>
|
|
124
|
-
<Typography.Title6>Account</Typography.Title6>
|
|
125
|
-
<Typography.BodySmall>Personal details</Typography.BodySmall>
|
|
126
|
-
</List.Content>
|
|
127
|
-
<List.Trailing>{/* Badge, metadata, or indicator */}</List.Trailing>
|
|
128
|
-
</List.Item>
|
|
129
|
-
<Divider inset="both" />
|
|
130
|
-
<List.Pressable onPress={openPreferences}>
|
|
131
|
-
<List.Content>
|
|
132
|
-
<Typography.Body>Preferences</Typography.Body>
|
|
133
|
-
</List.Content>
|
|
134
|
-
</List.Pressable>
|
|
135
|
-
</List.Root>;
|
|
136
|
-
```
|
|
106
|
+
## Dedicated component packages
|
|
137
107
|
|
|
138
|
-
|
|
139
|
-
same row layout with native press and disabled behavior. Leading and Trailing
|
|
140
|
-
keep custom content at its natural size while Content fills the remaining width.
|
|
141
|
-
All parts accept their underlying primitive props and style overrides. Use
|
|
142
|
-
Typography for titles and descriptions and Divider for explicit separators.
|
|
143
|
-
Parts may also be composed without Root for standalone rows. Selection and
|
|
144
|
-
indicators remain application-owned; no context, selection state, or automatic
|
|
145
|
-
separator insertion is included. Theme defaults live in components.list.
|
|
108
|
+
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.
|
|
@@ -28,7 +28,8 @@ const Avatar = memo(function Avatar2({
|
|
|
28
28
|
);
|
|
29
29
|
return /* @__PURE__ */ jsxs(View, { ...props, style: containerStyle, children: [
|
|
30
30
|
/* @__PURE__ */ jsxs(View, { style: styles.content, children: [
|
|
31
|
-
fallback
|
|
31
|
+
fallback,
|
|
32
|
+
(fallback === null || fallback === void 0) && initials ? /* @__PURE__ */ jsx(Text, { style: styles.initials, children: initials }) : null,
|
|
32
33
|
source ? /* @__PURE__ */ jsx(
|
|
33
34
|
AvatarImageLayer,
|
|
34
35
|
{
|
|
@@ -57,7 +58,9 @@ const AvatarImageLayer = memo(function AvatarImageLayer2({
|
|
|
57
58
|
() => [staticStyles.image, imageProps?.style],
|
|
58
59
|
[imageProps?.style]
|
|
59
60
|
);
|
|
60
|
-
if (hasError)
|
|
61
|
+
if (hasError) {
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
61
64
|
return /* @__PURE__ */ jsx(
|
|
62
65
|
Image,
|
|
63
66
|
{
|
|
@@ -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 ...props\n}: AvatarProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { size, status, statusColor, variant },\n [size, status, statusColor, variant],\n );\n const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n return (\n <View {...props} style={containerStyle}>\n <View style={styles.content}>\n {fallback
|
|
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 ...props\n}: AvatarProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { size, status, statusColor, variant },\n [size, status, statusColor, variant],\n );\n\n const sourceKey = useMemo(() => JSON.stringify(source), [source]);\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n\n return (\n <View {...props} style={containerStyle}>\n <View style={styles.content}>\n {fallback}\n {(fallback === null || fallback === undefined) && initials ? (\n <Text style={styles.initials}>{initials}</Text>\n ) : null}\n\n {source ? (\n <AvatarImageLayer\n key={sourceKey}\n imageProps={imageProps}\n source={source}\n />\n ) : null}\n </View>\n\n {status ? <View style={styles.status} /> : null}\n </View>\n );\n});\n\ninterface AvatarImageLayerProps {\n imageProps: AvatarProps[\"imageProps\"];\n source: NonNullable<AvatarProps[\"source\"]>;\n}\n\nconst AvatarImageLayer = memo(function AvatarImageLayer({\n imageProps,\n source,\n}: AvatarImageLayerProps) {\n const [hasError, setHasError] = useState(false);\n\n const handleError = useCallback<NonNullable<ImageProps[\"onError\"]>>(\n (event) => {\n setHasError(true);\n imageProps?.onError?.(event);\n },\n [imageProps],\n );\n\n const imageStyle = useMemo(\n () => [staticStyles.image, imageProps?.style],\n [imageProps?.style],\n );\n\n if (hasError) {\n return null;\n }\n\n return (\n <Image\n resizeMode=\"cover\"\n {...imageProps}\n onError={handleError}\n source={source}\n style={imageStyle}\n />\n );\n});\n\ninterface AvatarThemeProps {\n size: NonNullable<AvatarProps[\"size\"]>;\n status: AvatarProps[\"status\"];\n statusColor: AvatarProps[\"statusColor\"];\n variant: NonNullable<AvatarProps[\"variant\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: AvatarThemeProps) {\n const { size, status, statusColor, variant } = props;\n const avatarTokens = theme.components.avatar;\n const sizeTokens = avatarTokens.sizes[size];\n const variantTokens = avatarTokens.variants[variant];\n\n return StyleSheet.create({\n container: {\n flexShrink: 0,\n height: sizeTokens.size,\n position: \"relative\",\n width: sizeTokens.size,\n },\n content: {\n alignItems: \"center\",\n backgroundColor: variantTokens.backgroundColor,\n borderColor: variantTokens.borderColor,\n borderRadius: sizeTokens.size / 2,\n borderWidth: avatarTokens.borderWidth,\n height: \"100%\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n width: \"100%\",\n },\n initials: {\n color: variantTokens.color,\n fontFamily: avatarTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n textAlign: \"center\",\n },\n status: {\n backgroundColor:\n statusColor ?? (status ? avatarTokens.statusColors[status] : undefined),\n borderColor: avatarTokens.statusBorderColor,\n borderRadius: sizeTokens.statusSize / 2,\n borderWidth: sizeTokens.statusBorderWidth,\n bottom: 0,\n height: sizeTokens.statusSize,\n position: \"absolute\",\n right: 0,\n width: sizeTokens.statusSize,\n },\n });\n}\n\nconst staticStyles = StyleSheet.create({\n image: {\n bottom: 0,\n height: \"100%\",\n left: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n width: \"100%\",\n },\n});\n"],"mappings":"AAsCM,SAGI,KAHJ;AArCN,SAAS,MAAM,aAAa,SAAS,gBAAgB;AACrD,SAAS,OAAO,YAAY,YAAY;AAGxC,SAAS,eAAe,uBAAuB;AAG/C,SAAS,YAAY;AAEd,MAAM,SAAS,KAAK,SAASA,QAAO;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAgB;AACd,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,MAAM,QAAQ,aAAa,QAAQ;AAAA,IACrC,CAAC,MAAM,QAAQ,aAAa,OAAO;AAAA,EACrC;AAEA,QAAM,YAAY,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,CAAC,MAAM,CAAC;AAEhE,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA,yBAAC,QAAK,OAAO,OAAO,SACjB;AAAA;AAAA,OACC,aAAa,QAAQ,aAAa,WAAc,WAChD,oBAAC,QAAK,OAAO,OAAO,UAAW,oBAAS,IACtC;AAAA,MAEH,SACC;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA;AAAA,QAFK;AAAA,MAGP,IACE;AAAA,OACN;AAAA,IAEC,SAAS,oBAAC,QAAK,OAAO,OAAO,QAAQ,IAAK;AAAA,KAC7C;AAEJ,CAAC;AAOD,MAAM,mBAAmB,KAAK,SAASC,kBAAiB;AAAA,EACtD;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU;AACT,kBAAY,IAAI;AAChB,kBAAY,UAAU,KAAK;AAAA,IAC7B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,aAAa,OAAO,YAAY,KAAK;AAAA,IAC5C,CAAC,YAAY,KAAK;AAAA,EACpB;AAEA,MAAI,UAAU;AACZ,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACV,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA;AAAA,EACT;AAEJ,CAAC;AASD,SAAS,aAAa,OAAiB,OAAyB;AAC9D,QAAM,EAAE,MAAM,QAAQ,aAAa,QAAQ,IAAI;AAC/C,QAAM,eAAe,MAAM,WAAW;AACtC,QAAM,aAAa,aAAa,MAAM,IAAI;AAC1C,QAAM,gBAAgB,aAAa,SAAS,OAAO;AAEnD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO,WAAW;AAAA,IACpB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,iBAAiB,cAAc;AAAA,MAC/B,aAAa,cAAc;AAAA,MAC3B,cAAc,WAAW,OAAO;AAAA,MAChC,aAAa,aAAa;AAAA,MAC1B,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,MACR,OAAO,cAAc;AAAA,MACrB,YAAY,aAAa;AAAA,MACzB,UAAU,WAAW;AAAA,MACrB,WAAW;AAAA,IACb;AAAA,IACA,QAAQ;AAAA,MACN,iBACE,gBAAgB,SAAS,aAAa,aAAa,MAAM,IAAI;AAAA,MAC/D,aAAa,aAAa;AAAA,MAC1B,cAAc,WAAW,aAAa;AAAA,MACtC,aAAa,WAAW;AAAA,MACxB,QAAQ;AAAA,MACR,QAAQ,WAAW;AAAA,MACnB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,OAAO,WAAW;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAEA,MAAM,eAAe,WAAW,OAAO;AAAA,EACrC,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACT;AACF,CAAC;","names":["Avatar","AvatarImageLayer"]}
|
|
@@ -13,13 +13,17 @@ const BadgeAddon = memo(function BadgeAddon2({
|
|
|
13
13
|
}) {
|
|
14
14
|
const Container = useMemo(() => onPress ? Pressable : View, [onPress]);
|
|
15
15
|
const content = useMemo(() => {
|
|
16
|
-
if (Content)
|
|
16
|
+
if (Content) {
|
|
17
|
+
return /* @__PURE__ */ jsx(Content, {});
|
|
18
|
+
}
|
|
17
19
|
if (IconComponent) {
|
|
18
20
|
return /* @__PURE__ */ jsx(Icon, { color, icon: IconComponent, size: iconSize });
|
|
19
21
|
}
|
|
20
22
|
return null;
|
|
21
23
|
}, [color, Content, iconSize, IconComponent]);
|
|
22
|
-
if (!content)
|
|
24
|
+
if (!content) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
23
27
|
return /* @__PURE__ */ jsx(Container, { hitSlop, onPress, children: content });
|
|
24
28
|
});
|
|
25
29
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\n\nimport type { PressableCoreProps } from \"../../../types\";\nimport { Pressable } from \"../pressable\";\nimport { View } from \"../view\";\n\ninterface BadgeAddonProps {\n color: string | undefined;\n Content: ComponentType | undefined;\n hitSlop: number;\n iconSize: number;\n IconComponent: IconProps[\"icon\"] | undefined;\n onPress: PressableCoreProps[\"onPress\"] | undefined;\n}\n\nexport const BadgeAddon = memo(function BadgeAddon({\n color,\n Content,\n hitSlop,\n iconSize,\n IconComponent,\n onPress,\n}: BadgeAddonProps) {\n const Container = useMemo(() => (onPress ? Pressable : View), [onPress]);\n const content = useMemo(() => {\n if (Content) return <Content />;\n\n if (IconComponent) {\n return <Icon color={color} icon={IconComponent} size={iconSize} />;\n }\n\n return null;\n }, [color, Content, iconSize, IconComponent]);\n\n if (!content) return null;\n\n return (\n <Container hitSlop={hitSlop} onPress={onPress}>\n {content}\n </Container>\n );\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/badge/addon.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { memo, useMemo } from \"react\";\n\nimport type { IconProps } from \"@impulse-ui-native/icon/types\";\nimport { Icon } from \"@impulse-ui-native/icon/components/icon\";\n\nimport type { PressableCoreProps } from \"../../../types\";\nimport { Pressable } from \"../pressable\";\nimport { View } from \"../view\";\n\ninterface BadgeAddonProps {\n color: string | undefined;\n Content: ComponentType | undefined;\n hitSlop: number;\n iconSize: number;\n IconComponent: IconProps[\"icon\"] | undefined;\n onPress: PressableCoreProps[\"onPress\"] | undefined;\n}\n\nexport const BadgeAddon = memo(function BadgeAddon({\n color,\n Content,\n hitSlop,\n iconSize,\n IconComponent,\n onPress,\n}: BadgeAddonProps) {\n const Container = useMemo(() => (onPress ? Pressable : View), [onPress]);\n const content = useMemo(() => {\n if (Content) {\n return <Content />;\n }\n\n if (IconComponent) {\n return <Icon color={color} icon={IconComponent} size={iconSize} />;\n }\n\n return null;\n }, [color, Content, iconSize, IconComponent]);\n\n if (!content) {\n return null;\n }\n\n return (\n <Container hitSlop={hitSlop} onPress={onPress}>\n {content}\n </Container>\n );\n});\n"],"mappings":"AA8Ba;AA7Bb,SAAS,MAAM,eAAe;AAG9B,SAAS,YAAY;AAGrB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAWd,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,YAAY,QAAQ,MAAO,UAAU,YAAY,MAAO,CAAC,OAAO,CAAC;AACvE,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS;AACX,aAAO,oBAAC,WAAQ;AAAA,IAClB;AAEA,QAAI,eAAe;AACjB,aAAO,oBAAC,QAAK,OAAc,MAAM,eAAe,MAAM,UAAU;AAAA,IAClE;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,SAAS,UAAU,aAAa,CAAC;AAE5C,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,aAAU,SAAkB,SAC1B,mBACH;AAEJ,CAAC;","names":["BadgeAddon"]}
|
|
@@ -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 const badgeTokens = tokens.badge;\n const sizeTokens = badgeTokens.sizes[size];\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { backgroundColor, color, size, tone, variant },\n [backgroundColor, color, size, tone, variant],\n );\n\n const containerStyle = useMemo(\n () => [styles.container, extractedStyleProps, style],\n [extractedStyleProps, style, styles.container],\n );\n const affixColor =\n typeof styles.label.color === \"string\" ? styles.label.color : undefined;\n\n return (\n <View {...props} style={containerStyle}>\n <BadgeAddon\n Content={Prefix}\n IconComponent={PrefixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressPrefix}\n />\n\n {typeof children === \"string\" || typeof children === \"number\" ? (\n <Text numberOfLines={1} style={styles.label}>\n {children}\n </Text>\n ) : (\n children\n )}\n\n <BadgeAddon\n Content={Suffix}\n IconComponent={SuffixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressSuffix}\n />\n </View>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n const { backgroundColor, color, size, tone, variant } = props;\n\n const badgeTokens = theme.components.badge;\n const sizeTokens = badgeTokens.sizes[size];\n const variantTokens = badgeTokens.colors[tone][variant];\n\n return StyleSheet.create({\n container: {\n alignItems: \"center\",\n alignSelf: \"flex-start\",\n flexDirection: \"row\",\n flexShrink: 0,\n justifyContent: \"center\",\n\n borderRadius: badgeTokens.borderRadius,\n borderWidth: badgeTokens.borderWidth,\n gap: badgeTokens.gap,\n height: sizeTokens.height,\n minWidth: sizeTokens.minWidth,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\n borderColor: variantTokens.borderColor,\n },\n\n label: {\n textAlign: \"center\",\n\n fontFamily: badgeTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n lineHeight: sizeTokens.lineHeight,\n\n color: color ?? variantTokens.color,\n },\n });\n}\n"],"mappings":"
|
|
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 return (\n <View {...props} style={containerStyle}>\n <BadgeAddon\n Content={Prefix}\n IconComponent={PrefixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressPrefix}\n />\n\n {typeof children === \"string\" || typeof children === \"number\" ? (\n <Text numberOfLines={1} style={styles.label}>\n {children}\n </Text>\n ) : (\n children\n )}\n\n <BadgeAddon\n Content={Suffix}\n IconComponent={SuffixIcon}\n color={affixColor}\n hitSlop={badgeTokens.addonHitSlop}\n iconSize={sizeTokens.iconSize}\n onPress={onPressSuffix}\n />\n </View>\n );\n});\n\nfunction themedStyles(theme: AppTheme, props: BadgeThemeProps) {\n const { backgroundColor, color, size, tone, variant } = props;\n\n const badgeTokens = theme.components.badge;\n const sizeTokens = badgeTokens.sizes[size];\n const variantTokens = badgeTokens.colors[tone][variant];\n\n return StyleSheet.create({\n container: {\n alignItems: \"center\",\n alignSelf: \"flex-start\",\n flexDirection: \"row\",\n flexShrink: 0,\n justifyContent: \"center\",\n\n borderRadius: badgeTokens.borderRadius,\n borderWidth: badgeTokens.borderWidth,\n gap: badgeTokens.gap,\n height: sizeTokens.height,\n minWidth: sizeTokens.minWidth,\n paddingHorizontal: sizeTokens.paddingHorizontal,\n\n backgroundColor: backgroundColor ?? variantTokens.backgroundColor,\n borderColor: variantTokens.borderColor,\n },\n\n label: {\n textAlign: \"center\",\n\n fontFamily: badgeTokens.fontFamily,\n fontSize: sizeTokens.fontSize,\n lineHeight: sizeTokens.lineHeight,\n\n color: color ?? variantTokens.color,\n },\n });\n}\n"],"mappings":"AAmDI,SACE,KADF;AAnDJ,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAGjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAEpB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAe;AACb,QAAM,SAAS,oBAAoB;AAEnC,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,YAAY,MAAM,IAAI;AAEzC,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ;AAAA,IAC9C,CAAC,iBAAiB,OAAO,MAAM,MAAM,OAAO;AAAA,EAC9C;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,CAAC,OAAO,WAAW,qBAAqB,KAAK;AAAA,IACnD,CAAC,qBAAqB,OAAO,OAAO,SAAS;AAAA,EAC/C;AAEA,QAAM,aACJ,OAAO,OAAO,MAAM,UAAU,WAAW,OAAO,MAAM,QAAQ;AAEhE,SACE,qBAAC,QAAM,GAAG,OAAO,OAAO,gBACtB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,IAEC,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,oBAAC,QAAK,eAAe,GAAG,OAAO,OAAO,OACnC,UACH,IAEA;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,OAAO;AAAA,QACP,SAAS,YAAY;AAAA,QACrB,UAAU,WAAW;AAAA,QACrB,SAAS;AAAA;AAAA,IACX;AAAA,KACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB,OAAwB;AAC7D,QAAM,EAAE,iBAAiB,OAAO,MAAM,MAAM,QAAQ,IAAI;AAExD,QAAM,cAAc,MAAM,WAAW;AACrC,QAAM,aAAa,YAAY,MAAM,IAAI;AACzC,QAAM,gBAAgB,YAAY,OAAO,IAAI,EAAE,OAAO;AAEtD,SAAO,WAAW,OAAO;AAAA,IACvB,WAAW;AAAA,MACT,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAEhB,cAAc,YAAY;AAAA,MAC1B,aAAa,YAAY;AAAA,MACzB,KAAK,YAAY;AAAA,MACjB,QAAQ,WAAW;AAAA,MACnB,UAAU,WAAW;AAAA,MACrB,mBAAmB,WAAW;AAAA,MAE9B,iBAAiB,mBAAmB,cAAc;AAAA,MAClD,aAAa,cAAc;AAAA,IAC7B;AAAA,IAEA,OAAO;AAAA,MACL,WAAW;AAAA,MAEX,YAAY,YAAY;AAAA,MACxB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MAEvB,OAAO,SAAS,cAAc;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["BadgeRoot"]}
|
|
@@ -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 = \"subtle\",\n ...props\n}: DividerProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { color, inset, orientation, tone },\n [color, inset, orientation, tone],\n );\n const dividerStyle = useMemo(\n () => [styles.divider, extractedStyleProps, style],\n [extractedStyleProps, style, styles.divider],\n );\n\n return <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":"
|
|
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 = \"subtle\",\n ...props\n}: DividerProps) {\n const extractedStyleProps = useStyleProps(props);\n const styles = useThemedStyles(\n themedStyles,\n { color, inset, orientation, tone },\n [color, inset, orientation, tone],\n );\n\n const dividerStyle = useMemo(\n () => [styles.divider, extractedStyleProps, style],\n [extractedStyleProps, style, styles.divider],\n );\n\n return <View {...props} style={dividerStyle} />;\n});\n\ninterface DividerThemeProps {\n color: DividerProps[\"color\"];\n inset: NonNullable<DividerProps[\"inset\"]>;\n orientation: NonNullable<DividerProps[\"orientation\"]>;\n tone: NonNullable<DividerProps[\"tone\"]>;\n}\n\nfunction themedStyles(theme: AppTheme, props: DividerThemeProps) {\n const { color, inset, orientation, tone } = props;\n const dividerTokens = getDividerTokens(theme.components.divider, {\n inset,\n orientation,\n tone,\n });\n\n return StyleSheet.create({\n divider: {\n alignSelf: \"stretch\",\n flexShrink: 0,\n height: dividerTokens.height,\n marginBottom: dividerTokens.marginBottom,\n marginEnd: dividerTokens.marginEnd,\n marginStart: dividerTokens.marginStart,\n marginTop: dividerTokens.marginTop,\n width: dividerTokens.width,\n backgroundColor: color ?? dividerTokens.backgroundColor,\n },\n });\n}\n"],"mappings":"AAiCS;AAjCT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AAEd,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAAiB;AACf,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS;AAAA,IACb;AAAA,IACA,EAAE,OAAO,OAAO,aAAa,KAAK;AAAA,IAClC,CAAC,OAAO,OAAO,aAAa,IAAI;AAAA,EAClC;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM,CAAC,OAAO,SAAS,qBAAqB,KAAK;AAAA,IACjD,CAAC,qBAAqB,OAAO,OAAO,OAAO;AAAA,EAC7C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,cAAc;AAC/C,CAAC;AASD,SAAS,aAAa,OAAiB,OAA0B;AAC/D,QAAM,EAAE,OAAO,OAAO,aAAa,KAAK,IAAI;AAC5C,QAAM,gBAAgB,iBAAiB,MAAM,WAAW,SAAS;AAAA,IAC/D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,QAAQ,cAAc;AAAA,MACtB,cAAc,cAAc;AAAA,MAC5B,WAAW,cAAc;AAAA,MACzB,aAAa,cAAc;AAAA,MAC3B,WAAW,cAAc;AAAA,MACzB,OAAO,cAAc;AAAA,MACrB,iBAAiB,SAAS,cAAc;AAAA,IAC1C;AAAA,EACF,CAAC;AACH;","names":["Divider"]}
|
|
@@ -7,7 +7,6 @@ export { Button } from './button.mjs';
|
|
|
7
7
|
export { Divider } from './divider.mjs';
|
|
8
8
|
export { IconButton } from './icon-button.mjs';
|
|
9
9
|
export { Pressable } from './pressable.mjs';
|
|
10
|
-
export { Progress } from './progress.mjs';
|
|
11
10
|
export { Spinner } from './spinner.mjs';
|
|
12
11
|
export { Tag } from './tag.mjs';
|
|
13
12
|
import 'react';
|
|
@@ -26,5 +25,4 @@ import 'react-native-safe-area-context';
|
|
|
26
25
|
import '../../types/typography.types.mjs';
|
|
27
26
|
import '../../types/divider.types.mjs';
|
|
28
27
|
import '../../types/icon-button.types.mjs';
|
|
29
|
-
import '../../types/progress.types.mjs';
|
|
30
28
|
import '../../types/tag.types.mjs';
|
|
@@ -7,7 +7,6 @@ import { Button } from "./button";
|
|
|
7
7
|
import { Divider } from "./divider";
|
|
8
8
|
import { IconButton } from "./icon-button";
|
|
9
9
|
import { Pressable } from "./pressable";
|
|
10
|
-
import { Progress } from "./progress";
|
|
11
10
|
import { Spinner } from "./spinner";
|
|
12
11
|
import { Tag } from "./tag";
|
|
13
12
|
export {
|
|
@@ -17,7 +16,6 @@ export {
|
|
|
17
16
|
Divider,
|
|
18
17
|
IconButton,
|
|
19
18
|
Pressable,
|
|
20
|
-
Progress,
|
|
21
19
|
SafeAreaView,
|
|
22
20
|
Spinner,
|
|
23
21
|
Tag,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { Avatar } from \"./avatar\";\nexport { Badge } from \"./badge\";\nexport { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { Divider } from \"./divider\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/index.ts"],"sourcesContent":["export { Avatar } from \"./avatar\";\nexport { Badge } from \"./badge\";\nexport { View } from \"./view\";\nexport { SafeAreaView } from \"./safe-area-view\";\nexport { Typography, type TypographyComponent } from \"./typography\";\nexport { Button } from \"./button\";\nexport { Divider } from \"./divider\";\nexport { IconButton } from \"./icon-button\";\nexport { Pressable } from \"./pressable\";\nexport { Spinner } from \"./spinner\";\nexport { Tag } from \"./tag\";\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAA4C;AACrD,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,WAAW;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type { ComponentRef, PropsWithChildren } from \"react\";\nimport { forwardRef, memo, useCallback } from \"react\";\nimport {\n PressableStateCallbackType,\n Pressable as RNPressable,\n StyleProp,\n StyleSheet,\n ViewStyle,\n} from \"react-native\";\n\nimport {\n getShadowStyle,\n useColors,\n useComponentsTokens,\n useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(\n forwardRef<\n ComponentRef<typeof RNPressable>,\n PropsWithChildren<PressableCoreProps>\n >(function PressableCore(\n { children, disabled, pressedStyle, style, ...props },\n ref,\n ) {\n const colors = useColors();\n const tokens = useComponentsTokens();\n const pressableTokens = tokens.pressable;\n const extractedStyleProps = useStyleProps(props);\n\n const pressableStyles = useCallback(\n (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n let overrideStyle: StyleProp<ViewStyle>;\n\n if (typeof style === \"function\") {\n overrideStyle = style(state);\n } else {\n overrideStyle = style;\n }\n\n return StyleSheet.flatten([\n {\n opacity: disabled\n ? pressableTokens.disabledOpacity\n : state.pressed\n ? pressableTokens.pressedOpacity\n : 1,\n },\n getShadowStyle(props.shadow, props.shadowPosition, colors),\n extractedStyleProps,\n overrideStyle,\n state.pressed ? pressedStyle : undefined,\n ]);\n },\n [\n style,\n pressedStyle,\n disabled,\n extractedStyleProps,\n props.shadow,\n props.shadowPosition,\n colors,\n pressableTokens.disabledOpacity,\n pressableTokens.pressedOpacity,\n ],\n );\n\n return (\n <RNPressable\n {...props}\n ref={ref}\n style={pressableStyles}\n disabled={disabled}\n >\n {children}\n </RNPressable>\n );\n }),\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/pressable.tsx"],"sourcesContent":["import type { ComponentRef, PropsWithChildren } from \"react\";\nimport { forwardRef, memo, useCallback } from \"react\";\nimport {\n PressableStateCallbackType,\n Pressable as RNPressable,\n StyleProp,\n StyleSheet,\n ViewStyle,\n} from \"react-native\";\n\nimport {\n getShadowStyle,\n useColors,\n useComponentsTokens,\n useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { PressableCoreProps } from \"../../types\";\n\nexport const Pressable = memo(\n forwardRef<\n ComponentRef<typeof RNPressable>,\n PropsWithChildren<PressableCoreProps>\n >(function PressableCore(\n { children, disabled, pressedStyle, style, ...props },\n ref,\n ) {\n const colors = useColors();\n const tokens = useComponentsTokens();\n\n const pressableTokens = tokens.pressable;\n\n const extractedStyleProps = useStyleProps(props);\n\n const pressableStyles = useCallback(\n (state: PressableStateCallbackType): StyleProp<ViewStyle> => {\n let overrideStyle: StyleProp<ViewStyle>;\n\n if (typeof style === \"function\") {\n overrideStyle = style(state);\n } else {\n overrideStyle = style;\n }\n\n return StyleSheet.flatten([\n {\n opacity: disabled\n ? pressableTokens.disabledOpacity\n : state.pressed\n ? pressableTokens.pressedOpacity\n : 1,\n },\n getShadowStyle(props.shadow, props.shadowPosition, colors),\n extractedStyleProps,\n overrideStyle,\n state.pressed ? pressedStyle : undefined,\n ]);\n },\n [\n style,\n pressedStyle,\n disabled,\n extractedStyleProps,\n props.shadow,\n props.shadowPosition,\n colors,\n pressableTokens.disabledOpacity,\n pressableTokens.pressedOpacity,\n ],\n );\n\n return (\n <RNPressable\n {...props}\n ref={ref}\n style={pressableStyles}\n disabled={disabled}\n >\n {children}\n </RNPressable>\n );\n }),\n);\n"],"mappings":"AAwEM;AAvEN,SAAS,YAAY,MAAM,mBAAmB;AAC9C;AAAA,EAEE,aAAa;AAAA,EAEb;AAAA,OAEK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,YAAY;AAAA,EACvB,WAGE,SAAS,cACT,EAAE,UAAU,UAAU,cAAc,OAAO,GAAG,MAAM,GACpD,KACA;AACA,UAAM,SAAS,UAAU;AACzB,UAAM,SAAS,oBAAoB;AAEnC,UAAM,kBAAkB,OAAO;AAE/B,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAA4D;AAC3D,YAAI;AAEJ,YAAI,OAAO,UAAU,YAAY;AAC/B,0BAAgB,MAAM,KAAK;AAAA,QAC7B,OAAO;AACL,0BAAgB;AAAA,QAClB;AAEA,eAAO,WAAW,QAAQ;AAAA,UACxB;AAAA,YACE,SAAS,WACL,gBAAgB,kBAChB,MAAM,UACJ,gBAAgB,iBAChB;AAAA,UACR;AAAA,UACA,eAAe,MAAM,QAAQ,MAAM,gBAAgB,MAAM;AAAA,UACzD;AAAA,UACA;AAAA,UACA,MAAM,UAAU,eAAe;AAAA,QACjC,CAAC;AAAA,MACH;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAClB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AACH;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/safe-area-view.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet, ViewStyle } from \"react-native\";\nimport {\n Edge,\n EdgeMode,\n EdgeRecord,\n useSafeAreaInsets,\n} from \"react-native-safe-area-context\";\n\nimport { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from \"../../constants\";\nimport { SafeAreaViewProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const SafeAreaView = memo(function SafeAreaView(\n props: SafeAreaViewProps,\n) {\n const { edges, mode = \"padding\", style, ...rest } = props;\n const insets = useSafeAreaInsets();\n\n const flatenedStyle = useMemo(() => {\n return StyleSheet.flatten(style);\n }, [style]);\n\n const nativeEdges = useMemo<Record<Edge, EdgeMode>>(() => {\n if (!edges) {\n return {\n top: \"additive\",\n bottom: \"additive\",\n left: \"additive\",\n right: \"additive\",\n };\n }\n\n let computedEdges: EdgeRecord;\n\n if (Array.isArray(edges)) {\n computedEdges = edges.reduce<EdgeRecord>((acc, current: Edge) => {\n acc[current] = \"additive\";\n\n return acc;\n }, {});\n } else {\n computedEdges = edges as EdgeRecord;\n }\n\n return {\n top: computedEdges.top ?? \"off\",\n bottom: computedEdges.bottom ?? \"off\",\n left: computedEdges.left ?? \"off\",\n right: computedEdges.right ?? \"off\",\n };\n }, [edges]);\n\n const getSpacingKey = useCallback(\n (edge: Edge): keyof ViewStyle => `${mode}${EdgeToSpacingKeyMap[edge]}`,\n [mode],\n );\n\n const getSpacingForEdge = useCallback(\n (edge: Edge): number => {\n const shorthand: keyof ViewStyle = `${mode}${EdgeToShorthandKeyMap[edge]}`;\n const spacing: keyof ViewStyle = getSpacingKey(edge);\n\n return Number(\n flatenedStyle?.[spacing] ??\n flatenedStyle?.[shorthand] ??\n flatenedStyle?.[mode] ??\n 0,\n );\n },\n [flatenedStyle, getSpacingKey, mode],\n );\n\n const resolveEdge = useCallback(\n (inset: number, current: number, edgeMode: EdgeMode) => {\n if (edgeMode === \"off\") {\n return current;\n }\n\n if (edgeMode === \"maximum\") {\n return Math.max(inset, current);\n }\n\n return inset + current;\n },\n [],\n );\n\n const computedStyle = useMemo(() => {\n const insetsStyle: ViewStyle = {\n [getSpacingKey(\"top\")]: resolveEdge(\n insets.top,\n getSpacingForEdge(\"top\"),\n nativeEdges.top,\n ),\n [getSpacingKey(\"bottom\")]: resolveEdge(\n insets.bottom,\n getSpacingForEdge(\"bottom\"),\n nativeEdges.bottom,\n ),\n [getSpacingKey(\"left\")]: resolveEdge(\n insets.left,\n getSpacingForEdge(\"left\"),\n nativeEdges.left,\n ),\n [getSpacingKey(\"right\")]: resolveEdge(\n insets.right,\n getSpacingForEdge(\"right\"),\n nativeEdges.right,\n ),\n };\n\n return StyleSheet.flatten([style, insetsStyle]);\n }, [\n insets,\n nativeEdges,\n style,\n resolveEdge,\n getSpacingKey,\n getSpacingForEdge,\n ]);\n\n return <View style={computedStyle} {...rest} />;\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/safe-area-view.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from \"react\";\nimport { StyleSheet, ViewStyle } from \"react-native\";\nimport {\n Edge,\n EdgeMode,\n EdgeRecord,\n useSafeAreaInsets,\n} from \"react-native-safe-area-context\";\n\nimport { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from \"../../constants\";\nimport { SafeAreaViewProps } from \"../../types\";\nimport { View } from \"./view\";\n\nexport const SafeAreaView = memo(function SafeAreaView(\n props: SafeAreaViewProps,\n) {\n const { edges, mode = \"padding\", style, ...rest } = props;\n\n const insets = useSafeAreaInsets();\n\n const flatenedStyle = useMemo(() => {\n return StyleSheet.flatten(style);\n }, [style]);\n\n const nativeEdges = useMemo<Record<Edge, EdgeMode>>(() => {\n if (!edges) {\n return {\n top: \"additive\",\n bottom: \"additive\",\n left: \"additive\",\n right: \"additive\",\n };\n }\n\n let computedEdges: EdgeRecord;\n\n if (Array.isArray(edges)) {\n computedEdges = edges.reduce<EdgeRecord>((acc, current: Edge) => {\n acc[current] = \"additive\";\n\n return acc;\n }, {});\n } else {\n computedEdges = edges as EdgeRecord;\n }\n\n return {\n top: computedEdges.top ?? \"off\",\n bottom: computedEdges.bottom ?? \"off\",\n left: computedEdges.left ?? \"off\",\n right: computedEdges.right ?? \"off\",\n };\n }, [edges]);\n\n const getSpacingKey = useCallback(\n (edge: Edge): keyof ViewStyle => `${mode}${EdgeToSpacingKeyMap[edge]}`,\n [mode],\n );\n\n const getSpacingForEdge = useCallback(\n (edge: Edge): number => {\n const shorthand: keyof ViewStyle = `${mode}${EdgeToShorthandKeyMap[edge]}`;\n const spacing: keyof ViewStyle = getSpacingKey(edge);\n\n return Number(\n flatenedStyle?.[spacing] ??\n flatenedStyle?.[shorthand] ??\n flatenedStyle?.[mode] ??\n 0,\n );\n },\n [flatenedStyle, getSpacingKey, mode],\n );\n\n const resolveEdge = useCallback(\n (inset: number, current: number, edgeMode: EdgeMode) => {\n if (edgeMode === \"off\") {\n return current;\n }\n\n if (edgeMode === \"maximum\") {\n return Math.max(inset, current);\n }\n\n return inset + current;\n },\n [],\n );\n\n const computedStyle = useMemo(() => {\n const insetsStyle: ViewStyle = {\n [getSpacingKey(\"top\")]: resolveEdge(\n insets.top,\n getSpacingForEdge(\"top\"),\n nativeEdges.top,\n ),\n [getSpacingKey(\"bottom\")]: resolveEdge(\n insets.bottom,\n getSpacingForEdge(\"bottom\"),\n nativeEdges.bottom,\n ),\n [getSpacingKey(\"left\")]: resolveEdge(\n insets.left,\n getSpacingForEdge(\"left\"),\n nativeEdges.left,\n ),\n [getSpacingKey(\"right\")]: resolveEdge(\n insets.right,\n getSpacingForEdge(\"right\"),\n nativeEdges.right,\n ),\n };\n\n return StyleSheet.flatten([style, insetsStyle]);\n }, [\n insets,\n nativeEdges,\n style,\n resolveEdge,\n getSpacingKey,\n getSpacingForEdge,\n ]);\n\n return <View style={computedStyle} {...rest} />;\n});\n"],"mappings":"AA2HS;AA3HT,SAAS,MAAM,aAAa,eAAe;AAC3C,SAAS,kBAA6B;AACtC;AAAA,EAIE;AAAA,OACK;AAEP,SAAS,uBAAuB,2BAA2B;AAE3D,SAAS,YAAY;AAEd,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,OAAO,OAAO,WAAW,OAAO,GAAG,KAAK,IAAI;AAEpD,QAAM,SAAS,kBAAkB;AAEjC,QAAM,gBAAgB,QAAQ,MAAM;AAClC,WAAO,WAAW,QAAQ,KAAK;AAAA,EACjC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,cAAc,QAAgC,MAAM;AACxD,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,QACL,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAEA,QAAI;AAEJ,QAAI,MAAM,QAAQ,KAAK,GAAG;AACxB,sBAAgB,MAAM,OAAmB,CAAC,KAAK,YAAkB;AAC/D,YAAI,OAAO,IAAI;AAEf,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,OAAO;AACL,sBAAgB;AAAA,IAClB;AAEA,WAAO;AAAA,MACL,KAAK,cAAc,OAAO;AAAA,MAC1B,QAAQ,cAAc,UAAU;AAAA,MAChC,MAAM,cAAc,QAAQ;AAAA,MAC5B,OAAO,cAAc,SAAS;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAgC,GAAG,IAAI,GAAG,oBAAoB,IAAI,CAAC;AAAA,IACpE,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAuB;AACtB,YAAM,YAA6B,GAAG,IAAI,GAAG,sBAAsB,IAAI,CAAC;AACxE,YAAM,UAA2B,cAAc,IAAI;AAEnD,aAAO;AAAA,QACL,gBAAgB,OAAO,KACrB,gBAAgB,SAAS,KACzB,gBAAgB,IAAI,KACpB;AAAA,MACJ;AAAA,IACF;AAAA,IACA,CAAC,eAAe,eAAe,IAAI;AAAA,EACrC;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,OAAe,SAAiB,aAAuB;AACtD,UAAI,aAAa,OAAO;AACtB,eAAO;AAAA,MACT;AAEA,UAAI,aAAa,WAAW;AAC1B,eAAO,KAAK,IAAI,OAAO,OAAO;AAAA,MAChC;AAEA,aAAO,QAAQ;AAAA,IACjB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,cAAyB;AAAA,MAC7B,CAAC,cAAc,KAAK,CAAC,GAAG;AAAA,QACtB,OAAO;AAAA,QACP,kBAAkB,KAAK;AAAA,QACvB,YAAY;AAAA,MACd;AAAA,MACA,CAAC,cAAc,QAAQ,CAAC,GAAG;AAAA,QACzB,OAAO;AAAA,QACP,kBAAkB,QAAQ;AAAA,QAC1B,YAAY;AAAA,MACd;AAAA,MACA,CAAC,cAAc,MAAM,CAAC,GAAG;AAAA,QACvB,OAAO;AAAA,QACP,kBAAkB,MAAM;AAAA,QACxB,YAAY;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO,CAAC,GAAG;AAAA,QACxB,OAAO;AAAA,QACP,kBAAkB,OAAO;AAAA,QACzB,YAAY;AAAA,MACd;AAAA,IACF;AAEA,WAAO,WAAW,QAAQ,CAAC,OAAO,WAAW,CAAC;AAAA,EAChD,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,oBAAC,QAAK,OAAO,eAAgB,GAAG,MAAM;AAC/C,CAAC;","names":["SafeAreaView"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/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 color = \"primary\",\n closable,\n disabled,\n onClose,\n onPress,\n}: TagProps) {\n const tokens = useComponentsTokens();\n const tagTokens = tokens.tag;\n const styles = useThemedStyles(\n themedStyles,\n {\n size,\n variant,\n disabled,\n color,\n },\n [size, variant, disabled, color],\n );\n\n const Container = useMemo(() => {\n if (onPress) {\n return Pressable;\n }\n\n return View;\n }, [onPress]);\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, color, disabled } = props;\n\n const tagTokens = theme.components.tag;\n const sizeTokens = tagTokens.sizes[size];\n const appearanceTokens = getAvailabilityStateTokens(\n tagTokens.colors[color][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":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/tag.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet, View } from \"react-native\";\n\nimport { Icon } from \"@impulse-ui-native/icon/components/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 color = \"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 color,\n },\n [size, variant, disabled, color],\n );\n\n const Container = useMemo(() => {\n if (onPress) {\n return Pressable;\n }\n\n return View;\n }, [onPress]);\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, color, disabled } = props;\n\n const tagTokens = theme.components.tag;\n const sizeTokens = tagTokens.sizes[size];\n const appearanceTokens = getAvailabilityStateTokens(\n tagTokens.colors[color][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":"AAoDI,SACE,KADF;AApDJ,SAAS,MAAM,eAAe;AAC9B,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,QAAQ;AAAA,EACR;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,KAAK;AAAA,EACjC;AAEA,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,SAAS;AACX,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,CAAC;AAEZ,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,OAAO,SAAS,IAAI;AAE3C,QAAM,YAAY,MAAM,WAAW;AACnC,QAAM,aAAa,UAAU,MAAM,IAAI;AACvC,QAAM,mBAAmB;AAAA,IACvB,UAAU,OAAO,KAAK,EAAE,OAAO;AAAA,IAC/B,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/atoms/view.tsx"],"sourcesContent":["import { forwardRef, memo, useMemo } from \"react\";\nimport { View as NativeView, StyleSheet } from \"react-native\";\n\nimport {\n getShadowStyle,\n useColors,\n useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { ViewProps } from \"../../types\";\n\nexport const View = memo(\n forwardRef<NativeView, ViewProps>(function View(props: ViewProps, ref) {\n const { style, shadow, shadowPosition, ...rest } = props;\n\n const colors = useColors();\n const extractedStyleProps = useStyleProps(props);\n\n const viewStyle = useMemo(() => {\n return StyleSheet.flatten([\n getShadowStyle(shadow, shadowPosition, colors),\n extractedStyleProps,\n style,\n ]);\n }, [extractedStyleProps, style, shadow, shadowPosition, colors]);\n\n return <NativeView {...rest} style={viewStyle} ref={ref} />;\n }),\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/atoms/view.tsx"],"sourcesContent":["import { forwardRef, memo, useMemo } from \"react\";\nimport { View as NativeView, StyleSheet } from \"react-native\";\n\nimport {\n getShadowStyle,\n useColors,\n useStyleProps,\n} from \"@impulse-ui-native/theme\";\n\nimport { ViewProps } from \"../../types\";\n\nexport const View = memo(\n forwardRef<NativeView, ViewProps>(function View(props: ViewProps, ref) {\n const { style, shadow, shadowPosition, ...rest } = props;\n\n const colors = useColors();\n\n const extractedStyleProps = useStyleProps(props);\n\n const viewStyle = useMemo(() => {\n return StyleSheet.flatten([\n getShadowStyle(shadow, shadowPosition, colors),\n extractedStyleProps,\n style,\n ]);\n }, [extractedStyleProps, style, shadow, shadowPosition, colors]);\n\n return <NativeView {...rest} style={viewStyle} ref={ref} />;\n }),\n);\n"],"mappings":"AA2BW;AA3BX,SAAS,YAAY,MAAM,eAAe;AAC1C,SAAS,QAAQ,YAAY,kBAAkB;AAE/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIA,MAAM,OAAO;AAAA,EAClB,WAAkC,SAASA,MAAK,OAAkB,KAAK;AACrE,UAAM,EAAE,OAAO,QAAQ,gBAAgB,GAAG,KAAK,IAAI;AAEnD,UAAM,SAAS,UAAU;AAEzB,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,YAAY,QAAQ,MAAM;AAC9B,aAAO,WAAW,QAAQ;AAAA,QACxB,eAAe,QAAQ,gBAAgB,MAAM;AAAA,QAC7C;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,qBAAqB,OAAO,QAAQ,gBAAgB,MAAM,CAAC;AAE/D,WAAO,oBAAC,cAAY,GAAG,MAAM,OAAO,WAAW,KAAU;AAAA,EAC3D,CAAC;AACH;","names":["View"]}
|
|
@@ -7,13 +7,10 @@ export { Button } from './atoms/button.mjs';
|
|
|
7
7
|
export { Divider } from './atoms/divider.mjs';
|
|
8
8
|
export { IconButton } from './atoms/icon-button.mjs';
|
|
9
9
|
export { Pressable } from './atoms/pressable.mjs';
|
|
10
|
-
export { Progress } from './atoms/progress.mjs';
|
|
11
10
|
export { Spinner } from './atoms/spinner.mjs';
|
|
12
11
|
export { Tag } from './atoms/tag.mjs';
|
|
13
|
-
export { Card } from './card/card.mjs';
|
|
14
12
|
export { Control } from './controls/control.mjs';
|
|
15
13
|
export { useControlContext } from './controls/provider.mjs';
|
|
16
|
-
export { List } from './list/list.mjs';
|
|
17
14
|
import 'react';
|
|
18
15
|
import 'react/jsx-runtime';
|
|
19
16
|
import '../types/avatar.types.mjs';
|
|
@@ -30,7 +27,4 @@ import 'react-native-safe-area-context';
|
|
|
30
27
|
import '../types/typography.types.mjs';
|
|
31
28
|
import '../types/divider.types.mjs';
|
|
32
29
|
import '../types/icon-button.types.mjs';
|
|
33
|
-
import '../types/progress.types.mjs';
|
|
34
30
|
import '../types/tag.types.mjs';
|
|
35
|
-
import '../types/card.types.mjs';
|
|
36
|
-
import '../types/list.types.mjs';
|
package/dist/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./atoms\";\nexport * from \"./
|
|
1
|
+
{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from \"./atoms\";\nexport * from \"./controls\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hocs/create-preset.hoc.tsx"],"sourcesContent":["import type { TextStyle } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type {\n AppTheme,\n TypographyPresetKey,\n TypographyProps,\n} from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useTheme } from \"@impulse-ui-native/theme\";\n\nimport type { TextProps } from \"../types\";\n\nconst numericFontVariant: TextStyle[\"fontVariant\"] = [\"tabular-nums\"];\nconst defaultFontVariant: TextStyle[\"fontVariant\"] = [];\n\nexport function createPreset(\n config: (theme: AppTheme) => TypographyProps & Pick<TextProps, \"color\">,\n key: TypographyPresetKey,\n) {\n const Component = (props: TextProps) => {\n const {\n style,\n numeric,\n fontFamily: customFontFamily,\n fontVariant: customFontVariant,\n fontStyle,\n fontWeight,\n ...rest\n } = props;\n\n const theme = useTheme();\n const extractedStyleProps = useStyleProps(props);\n\n const typographyStyle = useMemo(() => {\n const themedConfig = config(theme);\n\n const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? \"normal\";\n const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? 400;\n\n const fontFamily =\n customFontFamily ??\n themedConfig.fontFamily ??\n theme.fontFamily[resolvedFontStyle][resolvedFontWeight];\n\n return StyleSheet.flatten([\n { color: theme.colors.text.primary },\n themedConfig,\n extractedStyleProps,\n {\n fontFamily,\n fontVariant: numeric\n ? numericFontVariant\n : (customFontVariant ??\n themedConfig.fontVariant ??\n defaultFontVariant),\n },\n style,\n ]);\n }, [\n theme,\n extractedStyleProps,\n style,\n numeric,\n customFontFamily,\n customFontVariant,\n fontStyle,\n fontWeight,\n ]);\n\n return <Text {...rest} style={typographyStyle} />;\n };\n\n Component.displayName = `Typography.${key}`;\n\n return memo(Component);\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/hocs/create-preset.hoc.tsx"],"sourcesContent":["import type { TextStyle } from \"react-native\";\nimport { memo, useMemo } from \"react\";\nimport { StyleSheet, Text } from \"react-native\";\n\nimport type {\n AppTheme,\n TypographyPresetKey,\n TypographyProps,\n} from \"@impulse-ui-native/theme\";\nimport { useStyleProps, useTheme } from \"@impulse-ui-native/theme\";\n\nimport type { TextProps } from \"../types\";\n\nconst numericFontVariant: TextStyle[\"fontVariant\"] = [\"tabular-nums\"];\nconst defaultFontVariant: TextStyle[\"fontVariant\"] = [];\n\nexport function createPreset(\n config: (theme: AppTheme) => TypographyProps & Pick<TextProps, \"color\">,\n key: TypographyPresetKey,\n) {\n const Component = (props: TextProps) => {\n const {\n style,\n numeric,\n fontFamily: customFontFamily,\n fontVariant: customFontVariant,\n fontStyle,\n fontWeight,\n ...rest\n } = props;\n\n const theme = useTheme();\n\n const extractedStyleProps = useStyleProps(props);\n\n const typographyStyle = useMemo(() => {\n const themedConfig = config(theme);\n\n const resolvedFontStyle = fontStyle ?? themedConfig.fontStyle ?? \"normal\";\n const resolvedFontWeight = fontWeight ?? themedConfig.fontWeight ?? 400;\n\n const fontFamily =\n customFontFamily ??\n themedConfig.fontFamily ??\n theme.fontFamily[resolvedFontStyle][resolvedFontWeight];\n\n return StyleSheet.flatten([\n { color: theme.colors.text.primary },\n themedConfig,\n extractedStyleProps,\n {\n fontFamily,\n fontVariant: numeric\n ? numericFontVariant\n : (customFontVariant ??\n themedConfig.fontVariant ??\n defaultFontVariant),\n },\n style,\n ]);\n }, [\n theme,\n extractedStyleProps,\n style,\n numeric,\n customFontFamily,\n customFontVariant,\n fontStyle,\n fontWeight,\n ]);\n\n return <Text {...rest} style={typographyStyle} />;\n };\n\n Component.displayName = `Typography.${key}`;\n\n return memo(Component);\n}\n"],"mappings":"AAuEW;AAtEX,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY,YAAY;AAOjC,SAAS,eAAe,gBAAgB;AAIxC,MAAM,qBAA+C,CAAC,cAAc;AACpE,MAAM,qBAA+C,CAAC;AAE/C,SAAS,aACd,QACA,KACA;AACA,QAAM,YAAY,CAAC,UAAqB;AACtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAQ,SAAS;AAEvB,UAAM,sBAAsB,cAAc,KAAK;AAE/C,UAAM,kBAAkB,QAAQ,MAAM;AACpC,YAAM,eAAe,OAAO,KAAK;AAEjC,YAAM,oBAAoB,aAAa,aAAa,aAAa;AACjE,YAAM,qBAAqB,cAAc,aAAa,cAAc;AAEpE,YAAM,aACJ,oBACA,aAAa,cACb,MAAM,WAAW,iBAAiB,EAAE,kBAAkB;AAExD,aAAO,WAAW,QAAQ;AAAA,QACxB,EAAE,OAAO,MAAM,OAAO,KAAK,QAAQ;AAAA,QACnC;AAAA,QACA;AAAA,QACA;AAAA,UACE;AAAA,UACA,aAAa,UACT,qBACC,qBACD,aAAa,eACb;AAAA,QACN;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH,GAAG;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,oBAAC,QAAM,GAAG,MAAM,OAAO,iBAAiB;AAAA,EACjD;AAEA,YAAU,cAAc,cAAc,GAAG;AAEzC,SAAO,KAAK,SAAS;AACvB;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -7,13 +7,10 @@ export { Button } from './components/atoms/button.mjs';
|
|
|
7
7
|
export { Divider } from './components/atoms/divider.mjs';
|
|
8
8
|
export { IconButton } from './components/atoms/icon-button.mjs';
|
|
9
9
|
export { Pressable } from './components/atoms/pressable.mjs';
|
|
10
|
-
export { Progress } from './components/atoms/progress.mjs';
|
|
11
10
|
export { Spinner } from './components/atoms/spinner.mjs';
|
|
12
11
|
export { Tag } from './components/atoms/tag.mjs';
|
|
13
|
-
export { Card } from './components/card/card.mjs';
|
|
14
12
|
export { Control } from './components/controls/control.mjs';
|
|
15
13
|
export { useControlContext } from './components/controls/provider.mjs';
|
|
16
|
-
export { List } from './components/list/list.mjs';
|
|
17
14
|
export { createPreset } from './hocs/create-preset.hoc.mjs';
|
|
18
15
|
export { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from './constants/safe-area-view.constants.mjs';
|
|
19
16
|
export { AvatarImageProps, AvatarProps } from './types/avatar.types.mjs';
|
|
@@ -22,14 +19,11 @@ export { ViewProps } from './types/view.types.mjs';
|
|
|
22
19
|
export { SafeAreaViewProps } from './types/safe-area-view.types.mjs';
|
|
23
20
|
export { TextProps } from './types/typography.types.mjs';
|
|
24
21
|
export { ButtonProps, ButtonThemeProps, PressableCoreProps } from './types/button.types.mjs';
|
|
25
|
-
export { CardContentProps, CardFooterProps, CardHeaderProps, CardMediaProps, CardPressableProps, CardRootProps } from './types/card.types.mjs';
|
|
26
22
|
export { DividerInset, DividerOrientation, DividerProps } from './types/divider.types.mjs';
|
|
27
23
|
export { IconButtonProps, IconButtonThemeProps } from './types/icon-button.types.mjs';
|
|
28
|
-
export { ProgressProps } from './types/progress.types.mjs';
|
|
29
24
|
export { SpinnerProps } from './types/spinner.types.mjs';
|
|
30
25
|
export { TagProps, TagThemeProps } from './types/tag.types.mjs';
|
|
31
26
|
export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps } from './types/control-components.types.mjs';
|
|
32
|
-
export { ListContentProps, ListItemProps, ListLeadingProps, ListPressableProps, ListRootProps, ListTrailingProps } from './types/list.types.mjs';
|
|
33
27
|
import 'react';
|
|
34
28
|
import 'react/jsx-runtime';
|
|
35
29
|
import '@impulse-ui-native/theme';
|
package/dist/types/index.d.mts
CHANGED
|
@@ -4,14 +4,11 @@ export { ViewProps } from './view.types.mjs';
|
|
|
4
4
|
export { SafeAreaViewProps } from './safe-area-view.types.mjs';
|
|
5
5
|
export { TextProps } from './typography.types.mjs';
|
|
6
6
|
export { ButtonProps, ButtonThemeProps, PressableCoreProps } from './button.types.mjs';
|
|
7
|
-
export { CardContentProps, CardFooterProps, CardHeaderProps, CardMediaProps, CardPressableProps, CardRootProps } from './card.types.mjs';
|
|
8
7
|
export { DividerInset, DividerOrientation, DividerProps } from './divider.types.mjs';
|
|
9
8
|
export { IconButtonProps, IconButtonThemeProps } from './icon-button.types.mjs';
|
|
10
|
-
export { ProgressProps } from './progress.types.mjs';
|
|
11
9
|
export { SpinnerProps } from './spinner.types.mjs';
|
|
12
10
|
export { TagProps, TagThemeProps } from './tag.types.mjs';
|
|
13
11
|
export { ControlAddonProps, ControlComponentCommonProps, ControlComponentProps, ControlContainerProps, ControlContextData, ControlErrorLabelProps, ControlInputProps, ControlLabelProps, ControlLoaderProps, ControlPlaceholderProps, ControlValueProps } from './control-components.types.mjs';
|
|
14
|
-
export { ListContentProps, ListItemProps, ListLeadingProps, ListPressableProps, ListRootProps, ListTrailingProps } from './list.types.mjs';
|
|
15
12
|
import 'react';
|
|
16
13
|
import 'react-native';
|
|
17
14
|
import '@impulse-ui-native/theme';
|
package/dist/types/index.js
CHANGED
|
@@ -5,12 +5,9 @@ export * from "./safe-area-view.types";
|
|
|
5
5
|
export * from "./typography.types";
|
|
6
6
|
export * from "./typography.types";
|
|
7
7
|
export * from "./button.types";
|
|
8
|
-
export * from "./card.types";
|
|
9
8
|
export * from "./divider.types";
|
|
10
9
|
export * from "./icon-button.types";
|
|
11
|
-
export * from "./progress.types";
|
|
12
10
|
export * from "./spinner.types";
|
|
13
11
|
export * from "./tag.types";
|
|
14
12
|
export * from "./control-components.types";
|
|
15
|
-
export * from "./list.types";
|
|
16
13
|
//# sourceMappingURL=index.js.map
|
package/dist/types/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./avatar.types\";\nexport * from \"./badge.types\";\nexport * from \"./view.types\";\nexport * from \"./safe-area-view.types\";\nexport * from \"./typography.types\";\nexport * from \"./typography.types\";\nexport * from \"./button.types\";\nexport * from \"./
|
|
1
|
+
{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export * from \"./avatar.types\";\nexport * from \"./badge.types\";\nexport * from \"./view.types\";\nexport * from \"./safe-area-view.types\";\nexport * from \"./typography.types\";\nexport * from \"./typography.types\";\nexport * from \"./button.types\";\nexport * from \"./divider.types\";\nexport * from \"./icon-button.types\";\nexport * from \"./spinner.types\";\nexport * from \"./tag.types\";\nexport * from \"./control-components.types\";\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.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": "
|
|
32
|
-
"@impulse-ui-native/icon": "
|
|
33
|
-
"@impulse-ui-native/core": "
|
|
31
|
+
"@impulse-ui-native/theme": "6.0.0",
|
|
32
|
+
"@impulse-ui-native/icon": "6.0.0",
|
|
33
|
+
"@impulse-ui-native/core": "6.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "~19.2.14",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"react-native-safe-area-context": "~5.7.0",
|
|
42
42
|
"react-native-svg": "15.15.4",
|
|
43
43
|
"typescript": "~6.0.3",
|
|
44
|
-
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
45
44
|
"@impulse-ui-native/eslint-config": "1.0.0",
|
|
45
|
+
"@impulse-ui-native/prettier-config": "1.0.0",
|
|
46
46
|
"@impulse-ui-native/tsconfig": "1.0.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import { ViewProps, ColorValue } from 'react-native';
|
|
4
|
-
|
|
5
|
-
interface CircularProgressProps extends ViewProps {
|
|
6
|
-
animationDuration: number;
|
|
7
|
-
fraction: number;
|
|
8
|
-
indicatorColor: ColorValue;
|
|
9
|
-
indeterminate: boolean;
|
|
10
|
-
strokeWidth: number;
|
|
11
|
-
trackColor: ColorValue;
|
|
12
|
-
width: number;
|
|
13
|
-
}
|
|
14
|
-
declare const CircularProgress: react.MemoExoticComponent<({ animationDuration, fraction, indicatorColor, indeterminate, strokeWidth, style, trackColor, width, ...props }: CircularProgressProps) => react_jsx_runtime.JSX.Element>;
|
|
15
|
-
|
|
16
|
-
export { CircularProgress };
|