@impulse-ui-native/switch 3.0.0 → 4.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentSize,
|
|
1
|
+
import { ComponentSize, SelectionVariant } from '@impulse-ui-native/theme';
|
|
2
2
|
|
|
3
3
|
interface SwitchAnimationColors {
|
|
4
4
|
activeBackgroundColor: string;
|
|
@@ -11,7 +11,7 @@ interface SwitchAnimationColors {
|
|
|
11
11
|
interface UseSwitchTokensOptions {
|
|
12
12
|
disabled: boolean;
|
|
13
13
|
size: ComponentSize;
|
|
14
|
-
variant:
|
|
14
|
+
variant: SelectionVariant;
|
|
15
15
|
}
|
|
16
16
|
declare function useSwitchTokens({ disabled, size, variant, }: UseSwitchTokensOptions): {
|
|
17
17
|
animationDuration: number;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { useMemo } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
getAvailabilityStateTokens,
|
|
4
|
+
useComponentsTokens
|
|
5
|
+
} from "@impulse-ui-native/theme";
|
|
3
6
|
function useSwitchTokens({
|
|
4
7
|
disabled,
|
|
5
8
|
size,
|
|
@@ -7,17 +10,9 @@ function useSwitchTokens({
|
|
|
7
10
|
}) {
|
|
8
11
|
const tokens = useComponentsTokens().switch;
|
|
9
12
|
const sizeTokens = tokens.sizes[size];
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
activeBackgroundColor: disabled ? tokens.disabledBackgroundColor : variantTokens.backgroundColor,
|
|
14
|
-
activeBorderColor: disabled ? tokens.disabledBorderColor : variantTokens.borderColor,
|
|
15
|
-
activeThumbColor: disabled ? tokens.disabledThumbColor : variantTokens.color,
|
|
16
|
-
inactiveBackgroundColor: disabled ? tokens.disabledBackgroundColor : tokens.uncheckedBackgroundColor,
|
|
17
|
-
inactiveBorderColor: disabled ? tokens.disabledBorderColor : tokens.uncheckedBorderColor,
|
|
18
|
-
inactiveThumbColor: disabled ? tokens.disabledThumbColor : tokens.uncheckedThumbColor
|
|
19
|
-
}),
|
|
20
|
-
[disabled, tokens, variantTokens]
|
|
13
|
+
const colors = getAvailabilityStateTokens(
|
|
14
|
+
tokens.variants[variant],
|
|
15
|
+
{ disabled }
|
|
21
16
|
);
|
|
22
17
|
return useMemo(
|
|
23
18
|
() => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/use-switch-tokens.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { ComponentSize,
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/use-switch-tokens.hook.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { ComponentSize, SelectionVariant } from \"@impulse-ui-native/theme\";\nimport {\n getAvailabilityStateTokens,\n useComponentsTokens,\n} from \"@impulse-ui-native/theme\";\n\nexport interface SwitchAnimationColors {\n activeBackgroundColor: string;\n activeBorderColor: string;\n activeThumbColor: string;\n inactiveBackgroundColor: string;\n inactiveBorderColor: string;\n inactiveThumbColor: string;\n}\n\ninterface UseSwitchTokensOptions {\n disabled: boolean;\n size: ComponentSize;\n variant: SelectionVariant;\n}\n\nexport function useSwitchTokens({\n disabled,\n size,\n variant,\n}: UseSwitchTokensOptions) {\n const tokens = useComponentsTokens().switch;\n const sizeTokens = tokens.sizes[size];\n const colors: SwitchAnimationColors = getAvailabilityStateTokens(\n tokens.variants[variant],\n { disabled },\n );\n\n return useMemo(\n () => ({\n animationDuration: tokens.animationDuration,\n borderWidth: tokens.borderWidth,\n colors,\n loadingIndicatorColor: tokens.loadingIndicatorColor,\n sizeTokens,\n }),\n [colors, sizeTokens, tokens],\n );\n}\n"],"mappings":"AAAA,SAAS,eAAe;AAGxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAiBA,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,aAAa,OAAO,MAAM,IAAI;AACpC,QAAM,SAAgC;AAAA,IACpC,OAAO,SAAS,OAAO;AAAA,IACvB,EAAE,SAAS;AAAA,EACb;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,mBAAmB,OAAO;AAAA,MAC1B,aAAa,OAAO;AAAA,MACpB;AAAA,MACA,uBAAuB,OAAO;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,YAAY,MAAM;AAAA,EAC7B;AACF;","names":[]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { PressableCoreProps } from '@impulse-ui-native/primitives';
|
|
2
|
-
import { ComponentSize,
|
|
2
|
+
import { ComponentSize, SelectionVariant } from '@impulse-ui-native/theme';
|
|
3
3
|
|
|
4
4
|
interface SwitchProps extends Omit<PressableCoreProps, "children"> {
|
|
5
5
|
checked?: boolean;
|
|
6
6
|
defaultChecked?: boolean;
|
|
7
7
|
onCheckedChange?: (checked: boolean) => void;
|
|
8
8
|
size?: ComponentSize;
|
|
9
|
-
variant?:
|
|
9
|
+
variant?: SelectionVariant;
|
|
10
10
|
}
|
|
11
11
|
interface SwitchThemeProps {
|
|
12
12
|
size: ComponentSize;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/switch",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "Animated switch controls for ImpulseUI Native applications.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
],
|
|
30
30
|
"sideEffects": false,
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@impulse-ui-native/core": "
|
|
33
|
-
"@impulse-ui-native/primitives": "
|
|
34
|
-
"@impulse-ui-native/theme": "
|
|
32
|
+
"@impulse-ui-native/core": "4.0.0",
|
|
33
|
+
"@impulse-ui-native/primitives": "4.0.0",
|
|
34
|
+
"@impulse-ui-native/theme": "4.0.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@types/react": "~19.2.14",
|