@impulse-ui-native/primitives 14.0.0 → 14.1.1
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 +12 -3
- package/dist/components/atoms/badge/addon.d.mts +1 -0
- package/dist/components/atoms/badge/index.d.mts +1 -1
- package/dist/components/atoms/badge/root.d.mts +1 -1
- package/dist/components/atoms/button.d.mts +1 -0
- package/dist/components/atoms/icon-button.d.mts +1 -0
- package/dist/components/atoms/pressable.d.mts +1 -0
- package/dist/components/controls/addon.d.mts +1 -0
- package/dist/components/controls/container.d.mts +1 -0
- package/dist/components/controls/error.d.mts +1 -0
- package/dist/components/controls/field.d.mts +1 -0
- package/dist/components/controls/icon.d.mts +1 -0
- package/dist/components/controls/input.d.mts +1 -0
- package/dist/components/controls/label.d.mts +1 -0
- package/dist/components/controls/loader.d.mts +1 -0
- package/dist/components/controls/placeholder.d.mts +1 -0
- package/dist/components/controls/provider.d.mts +1 -0
- package/dist/components/controls/trigger.d.mts +1 -0
- package/dist/components/controls/value.d.mts +1 -0
- package/dist/contexts/control.context.d.mts +1 -0
- package/dist/hooks/use-control-context.hook.d.mts +1 -0
- package/dist/index.d.mts +1 -1
- package/dist/types/button.types.d.mts +3 -2
- package/dist/types/control-components.types.d.mts +1 -0
- package/dist/types/icon-button.types.d.mts +1 -0
- package/dist/types/index.d.mts +1 -1
- package/dist/types/view.types.d.mts +3 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -169,10 +169,11 @@ In a column, fields stretch horizontally by default without growing vertically.
|
|
|
169
169
|
In a row, set `flex={1}` on each field to share the available width. If the
|
|
170
170
|
parent centers its children, use `alignSelf="stretch"` or an explicit `width`.
|
|
171
171
|
|
|
172
|
-
## Pressable
|
|
172
|
+
## Pressable styling
|
|
173
173
|
|
|
174
|
-
`Pressable` accepts
|
|
175
|
-
|
|
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
|
|
176
177
|
direct style props; `pressedStyle` applies last while pressed.
|
|
177
178
|
|
|
178
179
|
```tsx
|
|
@@ -182,11 +183,17 @@ direct style props; `pressedStyle` applies last while pressed.
|
|
|
182
183
|
alignItems="center"
|
|
183
184
|
gap={8}
|
|
184
185
|
padding={16}
|
|
186
|
+
backgroundColor={colors.surface.subtle.value}
|
|
187
|
+
borderColor={colors.border.default.value}
|
|
188
|
+
borderWidth={1}
|
|
189
|
+
borderRadius={radii.md}
|
|
185
190
|
>
|
|
186
191
|
<Typography.Master>Continue</Typography.Master>
|
|
187
192
|
</Pressable>
|
|
188
193
|
```
|
|
189
194
|
|
|
195
|
+
Text and icons keep their own foreground styling, as with `View`.
|
|
196
|
+
|
|
190
197
|
## Field appearance
|
|
191
198
|
|
|
192
199
|
Rectangular fields support `variant="outlined" | "soft" | "filled"` and
|
|
@@ -235,3 +242,5 @@ using the matching resolved action tokens; string children are styled automatica
|
|
|
235
242
|
`primary`, across filled, outlined, and soft variants. Tone affects the fallback
|
|
236
243
|
surface, initials, and border; images and presence/status colors retain their own
|
|
237
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.
|
|
@@ -4,6 +4,7 @@ import { IconProps } from '@impulse-ui-native/icon/types';
|
|
|
4
4
|
import { PressableCoreProps } from '../../../types/button.types.mjs';
|
|
5
5
|
import 'react-native';
|
|
6
6
|
import '@impulse-ui-native/theme';
|
|
7
|
+
import '../../../types/view.types.mjs';
|
|
7
8
|
|
|
8
9
|
interface BadgeAddonProps {
|
|
9
10
|
color: string | undefined;
|
|
@@ -6,5 +6,5 @@ import '@impulse-ui-native/theme';
|
|
|
6
6
|
import '../../../types/control-components.types.mjs';
|
|
7
7
|
import '@impulse-ui-native/icon/types';
|
|
8
8
|
import '../../../types/button.types.mjs';
|
|
9
|
-
import '../../../types/spinner.types.mjs';
|
|
10
9
|
import '../../../types/view.types.mjs';
|
|
10
|
+
import '../../../types/spinner.types.mjs';
|
|
@@ -5,8 +5,8 @@ import '@impulse-ui-native/theme';
|
|
|
5
5
|
import '../../../types/control-components.types.mjs';
|
|
6
6
|
import '@impulse-ui-native/icon/types';
|
|
7
7
|
import '../../../types/button.types.mjs';
|
|
8
|
-
import '../../../types/spinner.types.mjs';
|
|
9
8
|
import '../../../types/view.types.mjs';
|
|
9
|
+
import '../../../types/spinner.types.mjs';
|
|
10
10
|
|
|
11
11
|
declare const BadgeRoot: react.MemoExoticComponent<({ backgroundColor, children, color, Prefix, PrefixIcon, onPressPrefix, onPressSuffix, size, style, Suffix, SuffixIcon, tone, variant, ...props }: BadgeProps) => react.JSX.Element>;
|
|
12
12
|
|
|
@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
|
|
|
3
3
|
import { ButtonProps } from '../../types/button.types.mjs';
|
|
4
4
|
import 'react-native';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
|
+
import '../../types/view.types.mjs';
|
|
6
7
|
|
|
7
8
|
declare const Button: react.MemoExoticComponent<({ size, variant, tone, disabled, loading, children, style, ...props }: PropsWithChildren<ButtonProps>) => react.JSX.Element>;
|
|
8
9
|
|
|
@@ -5,6 +5,7 @@ import '@impulse-ui-native/icon/types';
|
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
7
|
import 'react-native';
|
|
8
|
+
import '../../types/view.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const IconButton: react.MemoExoticComponent<({ size, variant, tone, disabled, loading, style, icon, ...props }: PropsWithChildren<IconButtonProps>) => react.JSX.Element>;
|
|
10
11
|
|
|
@@ -2,6 +2,7 @@ import { NamedExoticComponent, PropsWithoutRef, RefAttributes, ComponentRef } fr
|
|
|
2
2
|
import { Pressable as Pressable$1 } from 'react-native';
|
|
3
3
|
import { PressableCoreProps } from '../../types/button.types.mjs';
|
|
4
4
|
import '@impulse-ui-native/theme';
|
|
5
|
+
import '../../types/view.types.mjs';
|
|
5
6
|
|
|
6
7
|
declare const Pressable: NamedExoticComponent<PropsWithoutRef<PressableCoreProps> & RefAttributes<ComponentRef<typeof Pressable$1>>>;
|
|
7
8
|
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlAddon: react.MemoExoticComponent<({ children, disabled, hitSlop, onPress, style, ...props }: ControlAddonProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlContainer: react.MemoExoticComponent<({ style, ...props }: ControlContainerProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlError: react.MemoExoticComponent<(props: ControlErrorLabelProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlField: react.MemoExoticComponent<({ children, disabled, error, label, onPress, onPressPrefix, onPressSuffix, prefix, size, suffix, variant, tone, ...props }: ControlFieldProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlIcon: react.MemoExoticComponent<({ color, ...props }: ControlIconProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlInput: react.MemoExoticComponent<(props: ControlInputProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlLabel: react.MemoExoticComponent<(props: ControlLabelProps) => react.JSX.Element | null>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlLoader: react.MemoExoticComponent<(props: ControlLoaderProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlPlaceholder: react.MemoExoticComponent<(props: ControlPlaceholderProps) => react.JSX.Element>;
|
|
@@ -5,6 +5,7 @@ import 'react-native';
|
|
|
5
5
|
import '@impulse-ui-native/icon/types';
|
|
6
6
|
import '@impulse-ui-native/theme';
|
|
7
7
|
import '../../types/button.types.mjs';
|
|
8
|
+
import '../../types/view.types.mjs';
|
|
8
9
|
import '../../types/spinner.types.mjs';
|
|
9
10
|
|
|
10
11
|
declare const ControlProvider: react.MemoExoticComponent<(props: PropsWithChildren<ControlComponentProps>) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlTrigger: react.MemoExoticComponent<({ disabled: disabledProp, style, ...props }: ControlTriggerProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../../types/button.types.mjs';
|
|
7
|
+
import '../../types/view.types.mjs';
|
|
7
8
|
import '../../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlValue: react.MemoExoticComponent<(props: ControlValueProps) => react.JSX.Element>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../types/button.types.mjs';
|
|
7
|
+
import '../types/view.types.mjs';
|
|
7
8
|
import '../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare const ControlContext: react.Context<ControlContextData | undefined>;
|
|
@@ -4,6 +4,7 @@ import 'react-native';
|
|
|
4
4
|
import '@impulse-ui-native/icon/types';
|
|
5
5
|
import '@impulse-ui-native/theme';
|
|
6
6
|
import '../types/button.types.mjs';
|
|
7
|
+
import '../types/view.types.mjs';
|
|
7
8
|
import '../types/spinner.types.mjs';
|
|
8
9
|
|
|
9
10
|
declare function useControlContext(): ControlContextData;
|
package/dist/index.d.mts
CHANGED
|
@@ -15,7 +15,7 @@ export { createPreset } from './hocs/create-preset.hoc.mjs';
|
|
|
15
15
|
export { EdgeToShorthandKeyMap, EdgeToSpacingKeyMap } from './constants/safe-area-view.constants.mjs';
|
|
16
16
|
export { AvatarImageProps, AvatarProps } from './types/avatar.types.mjs';
|
|
17
17
|
export { BadgeProps, BadgeThemeProps } from './types/badge.types.mjs';
|
|
18
|
-
export { ViewProps } from './types/view.types.mjs';
|
|
18
|
+
export { ViewProps, ViewStyleProps } from './types/view.types.mjs';
|
|
19
19
|
export { SafeAreaViewProps } from './types/safe-area-view.types.mjs';
|
|
20
20
|
export { TextProps } from './types/typography.types.mjs';
|
|
21
21
|
export { ButtonProps, ButtonThemeProps, PressableCoreProps } from './types/button.types.mjs';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { PressableProps, ViewStyle, StyleProp } from 'react-native';
|
|
2
|
-
import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant, ButtonTone
|
|
2
|
+
import { DimensionProps, SpacingProps, ShadowProps, ComponentSize, ActionVariant, ButtonTone } from '@impulse-ui-native/theme';
|
|
3
|
+
import { ViewStyleProps } from './view.types.mjs';
|
|
3
4
|
|
|
4
5
|
interface ButtonProps extends PressableProps, DimensionProps, SpacingProps, ShadowProps {
|
|
5
6
|
size?: ComponentSize;
|
|
@@ -16,7 +17,7 @@ interface ButtonThemeProps {
|
|
|
16
17
|
disabled?: boolean;
|
|
17
18
|
loading: boolean;
|
|
18
19
|
}
|
|
19
|
-
interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style" | "tone">,
|
|
20
|
+
interface PressableCoreProps extends PressableProps, Omit<ButtonProps, "style" | "tone">, ViewStyleProps {
|
|
20
21
|
disabled?: boolean;
|
|
21
22
|
pressedStyle?: StyleProp<ViewStyle>;
|
|
22
23
|
}
|
|
@@ -4,6 +4,7 @@ import { IconProps } from '@impulse-ui-native/icon/types';
|
|
|
4
4
|
import { FlexProps, DimensionProps, SpacingProps, ComponentSize, FieldVariant, FieldTone } from '@impulse-ui-native/theme';
|
|
5
5
|
import { PressableCoreProps } from './button.types.mjs';
|
|
6
6
|
import { SpinnerProps } from './spinner.types.mjs';
|
|
7
|
+
import './view.types.mjs';
|
|
7
8
|
|
|
8
9
|
type ControlLayoutProps = FlexProps & DimensionProps & SpacingProps;
|
|
9
10
|
interface ControlComponentCommonProps extends ControlLayoutProps {
|
|
@@ -2,6 +2,7 @@ import { IconProps } from '@impulse-ui-native/icon/types';
|
|
|
2
2
|
import { ComponentSize, ActionVariant, ButtonTone } from '@impulse-ui-native/theme';
|
|
3
3
|
import { ButtonProps } from './button.types.mjs';
|
|
4
4
|
import 'react-native';
|
|
5
|
+
import './view.types.mjs';
|
|
5
6
|
|
|
6
7
|
interface IconButtonProps extends ButtonProps {
|
|
7
8
|
icon: IconProps["icon"];
|
package/dist/types/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { AvatarImageProps, AvatarProps } from './avatar.types.mjs';
|
|
2
2
|
export { BadgeProps, BadgeThemeProps } from './badge.types.mjs';
|
|
3
|
-
export { ViewProps } from './view.types.mjs';
|
|
3
|
+
export { ViewProps, ViewStyleProps } 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';
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ViewProps as ViewProps$1 } from 'react-native';
|
|
2
2
|
import { SpacingProps, ColorProps, ShadowProps, BorderProps, FlexProps, DimensionProps } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
|
-
type
|
|
4
|
+
type ViewStyleProps = SpacingProps & ColorProps & ShadowProps & BorderProps & FlexProps & DimensionProps;
|
|
5
|
+
type ViewProps = ViewProps$1 & ViewStyleProps;
|
|
5
6
|
|
|
6
|
-
export type { ViewProps };
|
|
7
|
+
export type { ViewProps, ViewStyleProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/primitives",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.1.1",
|
|
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": "14.
|
|
32
|
-
"@impulse-ui-native/icon": "14.
|
|
33
|
-
"@impulse-ui-native/core": "14.
|
|
31
|
+
"@impulse-ui-native/theme": "14.1.1",
|
|
32
|
+
"@impulse-ui-native/icon": "14.1.1",
|
|
33
|
+
"@impulse-ui-native/core": "14.1.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@impulse-ui-native/eslint-config": "1.0.0",
|