@teamturing/react-kit 2.34.0 → 2.35.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/dist/core/GradientText/index.d.ts +1 -1
- package/dist/core/Switch/index.d.ts +10 -0
- package/dist/index.js +92 -3
- package/dist/theme/index.d.ts +1 -1
- package/esm/core/FormControl/index.js +3 -2
- package/esm/core/Switch/index.js +97 -0
- package/esm/packages/token-studio/esm/token/color/index.js +1 -1
- package/package.json +4 -4
|
@@ -270,7 +270,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
|
|
|
270
270
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
|
|
271
271
|
} & {
|
|
272
272
|
typography?: import("styled-system").ResponsiveValue<"m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
|
|
273
|
-
} & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/
|
|
273
|
+
} & import("../..").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "m" | "s" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "medium" | "bold" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 1 | 2> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "border/neutral" | "icon/inverse" | "bg/disabled" | "border/disabled" | "bg/primary" | "icon/disabled" | "border/focused" | "border/danger" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "scale/gray/0" | "scale/gray/1" | "scale/gray/2" | "scale/gray/3" | "scale/gray/4" | "scale/gray/5" | "scale/gray/6" | "scale/gray/7" | "scale/gray/8" | "scale/gray/9" | "scale/blue/0" | "scale/blue/1" | "scale/blue/2" | "scale/blue/3" | "scale/blue/4" | "scale/blue/5" | "scale/blue/6" | "scale/blue/7" | "scale/blue/8" | "scale/blue/9" | "scale/green/0" | "scale/green/1" | "scale/green/2" | "scale/green/3" | "scale/green/4" | "scale/green/5" | "scale/green/6" | "scale/green/7" | "scale/green/8" | "scale/green/9" | "scale/pink/0" | "scale/pink/1" | "scale/pink/2" | "scale/pink/3" | "scale/pink/4" | "scale/pink/5" | "scale/pink/6" | "scale/pink/7" | "scale/pink/8" | "scale/pink/9" | "scale/skyblue/0" | "scale/skyblue/1" | "scale/skyblue/2" | "scale/skyblue/3" | "scale/skyblue/4" | "scale/skyblue/5" | "scale/skyblue/6" | "scale/skyblue/7" | "scale/skyblue/8" | "scale/skyblue/9" | "scale/red/0" | "scale/red/1" | "scale/red/2" | "scale/red/3" | "scale/red/4" | "scale/red/5" | "scale/red/6" | "scale/red/7" | "scale/red/8" | "scale/red/9" | "scale/yellow/0" | "scale/yellow/1" | "scale/yellow/2" | "scale/yellow/3" | "scale/yellow/4" | "scale/yellow/5" | "scale/yellow/6" | "scale/yellow/7" | "scale/yellow/8" | "scale/yellow/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue/subtle" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/primary" | "border/hovered" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/primary/disabled" | "bg/neutral/subtlest" | "bg/neutral/subtlest/hovered" | "bg/neutral/subtlest/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected" | "text/weak">, "ref"> & {
|
|
274
274
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
275
275
|
}, Props>>;
|
|
276
276
|
export default GradientText;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { SxProp } from '../../utils/styled-system';
|
|
3
|
+
type Props = {
|
|
4
|
+
validationStatus?: 'error' | 'success' | undefined;
|
|
5
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & SxProp;
|
|
6
|
+
declare const _default: import("react").ForwardRefExoticComponent<{
|
|
7
|
+
validationStatus?: "error" | "success" | undefined;
|
|
8
|
+
} & Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & SxProp & import("react").RefAttributes<HTMLInputElement>>;
|
|
9
|
+
export default _default;
|
|
10
|
+
export type { Props as SwitchProps };
|
package/dist/index.js
CHANGED
|
@@ -35791,6 +35791,95 @@ var Select$1 = Object.assign( /*#__PURE__*/React.forwardRef(Select), {
|
|
|
35791
35791
|
Option: SelectOption
|
|
35792
35792
|
});
|
|
35793
35793
|
|
|
35794
|
+
const Switch = ({
|
|
35795
|
+
checked,
|
|
35796
|
+
validationStatus,
|
|
35797
|
+
...props
|
|
35798
|
+
}, ref) => {
|
|
35799
|
+
const checkboxRef = useProvidedOrCreatedRef(ref);
|
|
35800
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSwitch, {
|
|
35801
|
+
ref: checkboxRef,
|
|
35802
|
+
checked: checked,
|
|
35803
|
+
validationStatus: validationStatus,
|
|
35804
|
+
...props
|
|
35805
|
+
});
|
|
35806
|
+
};
|
|
35807
|
+
const UnstyledSwitch = styled__default.default.input.attrs({
|
|
35808
|
+
type: 'checkbox'
|
|
35809
|
+
})`
|
|
35810
|
+
appearance: none;
|
|
35811
|
+
|
|
35812
|
+
${sx}
|
|
35813
|
+
`;
|
|
35814
|
+
const BaseSwitch = styled__default.default(UnstyledSwitch)`
|
|
35815
|
+
position: relative;
|
|
35816
|
+
|
|
35817
|
+
width: ${forcePixelValue(36)};
|
|
35818
|
+
height: ${forcePixelValue(20)};
|
|
35819
|
+
|
|
35820
|
+
border-radius: ${({
|
|
35821
|
+
theme
|
|
35822
|
+
}) => `${forcePixelValue(theme.radii.full)}`};
|
|
35823
|
+
cursor: pointer;
|
|
35824
|
+
|
|
35825
|
+
background-color: ${({
|
|
35826
|
+
theme
|
|
35827
|
+
}) => theme.colors['bg/neutral']};
|
|
35828
|
+
|
|
35829
|
+
transition: background-color 200ms;
|
|
35830
|
+
|
|
35831
|
+
&::before {
|
|
35832
|
+
content: '';
|
|
35833
|
+
position: absolute;
|
|
35834
|
+
width: ${forcePixelValue(16)};
|
|
35835
|
+
height: ${forcePixelValue(16)};
|
|
35836
|
+
background-color: ${({
|
|
35837
|
+
theme
|
|
35838
|
+
}) => theme.colors['surface/overlay']};
|
|
35839
|
+
top: ${forcePixelValue(2)};
|
|
35840
|
+
border-radius: ${({
|
|
35841
|
+
theme
|
|
35842
|
+
}) => `${forcePixelValue(theme.radii.full)}`};
|
|
35843
|
+
|
|
35844
|
+
transform: translateX(${forcePixelValue(2)});
|
|
35845
|
+
transition: transform 200ms;
|
|
35846
|
+
}
|
|
35847
|
+
|
|
35848
|
+
&:disabled {
|
|
35849
|
+
background-color: ${({
|
|
35850
|
+
theme
|
|
35851
|
+
}) => theme.colors['bg/disabled']};
|
|
35852
|
+
cursor: not-allowed;
|
|
35853
|
+
}
|
|
35854
|
+
|
|
35855
|
+
&:checked {
|
|
35856
|
+
background-color: ${({
|
|
35857
|
+
theme
|
|
35858
|
+
}) => theme.colors['bg/primary']};
|
|
35859
|
+
|
|
35860
|
+
&::before {
|
|
35861
|
+
transform: translateX(${forcePixelValue(36 - 16 - 2)});
|
|
35862
|
+
}
|
|
35863
|
+
|
|
35864
|
+
&:disabled {
|
|
35865
|
+
background-color: ${({
|
|
35866
|
+
theme
|
|
35867
|
+
}) => theme.colors['bg/primary/disabled']};
|
|
35868
|
+
}
|
|
35869
|
+
}
|
|
35870
|
+
|
|
35871
|
+
&:focus-visible {
|
|
35872
|
+
outline-width: ${forcePixelValue(2)};
|
|
35873
|
+
outline-style: solid;
|
|
35874
|
+
outline-color: ${({
|
|
35875
|
+
theme
|
|
35876
|
+
}) => theme.colors['border/focused']};
|
|
35877
|
+
}
|
|
35878
|
+
|
|
35879
|
+
${sx}
|
|
35880
|
+
`;
|
|
35881
|
+
var Switch$1 = /*#__PURE__*/React.forwardRef(Switch);
|
|
35882
|
+
|
|
35794
35883
|
/**
|
|
35795
35884
|
* lodash (Custom Build) <https://lodash.com/>
|
|
35796
35885
|
* Build: `lodash modularize exports="npm" -o ./`
|
|
@@ -37006,9 +37095,9 @@ const FormControl = ({
|
|
|
37006
37095
|
successMessage: FormControlSuccessMessage
|
|
37007
37096
|
}
|
|
37008
37097
|
});
|
|
37009
|
-
const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, ...additionalInputComponentCandidates];
|
|
37098
|
+
const inputComponentCandidates = [TextInput$1, Textarea, Select$1, SearchSelectInput$1, Checkbox$1, Radio$1, Switch$1, ...additionalInputComponentCandidates];
|
|
37010
37099
|
const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/React.isValidElement(component) && component.type === candidate));
|
|
37011
|
-
const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox$1 || InputComponent.type === Radio$1);
|
|
37100
|
+
const isHorizontalLayoutNeeded = /*#__PURE__*/React.isValidElement(InputComponent) && (InputComponent.type === Checkbox$1 || InputComponent.type === Radio$1 || InputComponent.type === Switch$1);
|
|
37012
37101
|
return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
|
|
37013
37102
|
value: {
|
|
37014
37103
|
id,
|
|
@@ -38641,6 +38730,7 @@ const bgColor = {
|
|
|
38641
38730
|
'bg/primary': palette.violet500,
|
|
38642
38731
|
'bg/primary/hovered': palette.violet700,
|
|
38643
38732
|
'bg/primary/pressed': palette.violet700,
|
|
38733
|
+
'bg/primary/disabled': palette.violet100,
|
|
38644
38734
|
'bg/neutral/subtlest': palette.transparent,
|
|
38645
38735
|
'bg/neutral/subtlest/hovered': palette.gray50,
|
|
38646
38736
|
'bg/neutral/subtlest/pressed': palette.gray50,
|
|
@@ -38669,7 +38759,6 @@ const bgColor = {
|
|
|
38669
38759
|
'bg/accent/red/subtle': palette.red400,
|
|
38670
38760
|
'bg/accent/red': palette.red500,
|
|
38671
38761
|
'bg/accent/gray/subtlest': palette.gray200,
|
|
38672
|
-
'bg/accent/violet/subtlest': palette.violet100,
|
|
38673
38762
|
'bg/selected/violet': palette.violet500,
|
|
38674
38763
|
'bg/selected': palette.gray900,
|
|
38675
38764
|
'bg/selected/subtle': palette.gray100,
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -217,6 +217,7 @@ declare const theme: {
|
|
|
217
217
|
'bg/primary': "#835EEB";
|
|
218
218
|
'bg/primary/hovered': "#5D43A7";
|
|
219
219
|
'bg/primary/pressed': "#5D43A7";
|
|
220
|
+
'bg/primary/disabled': "#E8E1FB";
|
|
220
221
|
'bg/neutral/subtlest': "#FFFFFF00";
|
|
221
222
|
'bg/neutral/subtlest/hovered': "#F9FAFB";
|
|
222
223
|
'bg/neutral/subtlest/pressed': "#F9FAFB";
|
|
@@ -245,7 +246,6 @@ declare const theme: {
|
|
|
245
246
|
'bg/accent/red/subtle': "#F5525D";
|
|
246
247
|
'bg/accent/red': "#F22735";
|
|
247
248
|
'bg/accent/gray/subtlest': "#E5E7EB";
|
|
248
|
-
'bg/accent/violet/subtlest': "#E8E1FB";
|
|
249
249
|
'bg/selected/violet': "#835EEB";
|
|
250
250
|
'bg/selected': "#33373B";
|
|
251
251
|
'bg/selected/subtle': "#F3F4F6";
|
|
@@ -4,6 +4,7 @@ import Checkbox from '../Checkbox/index.js';
|
|
|
4
4
|
import Radio from '../Radio/index.js';
|
|
5
5
|
import SearchSelectInput from '../SearchSelectInput/index.js';
|
|
6
6
|
import Select from '../Select/index.js';
|
|
7
|
+
import Switch from '../Switch/index.js';
|
|
7
8
|
import TextInput from '../TextInput/index.js';
|
|
8
9
|
import Textarea from '../Textarea/index.js';
|
|
9
10
|
import View from '../View/index.js';
|
|
@@ -32,9 +33,9 @@ const FormControl = ({
|
|
|
32
33
|
successMessage: FormControlSuccessMessage
|
|
33
34
|
}
|
|
34
35
|
});
|
|
35
|
-
const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, ...additionalInputComponentCandidates];
|
|
36
|
+
const inputComponentCandidates = [TextInput, Textarea, Select, SearchSelectInput, Checkbox, Radio, Switch, ...additionalInputComponentCandidates];
|
|
36
37
|
const InputComponent = restComponents.find(component => inputComponentCandidates.some(candidate => /*#__PURE__*/isValidElement(component) && component.type === candidate));
|
|
37
|
-
const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio);
|
|
38
|
+
const isHorizontalLayoutNeeded = /*#__PURE__*/isValidElement(InputComponent) && (InputComponent.type === Checkbox || InputComponent.type === Radio || InputComponent.type === Switch);
|
|
38
39
|
return /*#__PURE__*/jsxRuntimeExports.jsx(FormControlContext.Provider, {
|
|
39
40
|
value: {
|
|
40
41
|
id,
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
|
|
5
|
+
import { sx } from '../../utils/styled-system/index.js';
|
|
6
|
+
import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
|
|
7
|
+
|
|
8
|
+
const Switch = ({
|
|
9
|
+
checked,
|
|
10
|
+
validationStatus,
|
|
11
|
+
...props
|
|
12
|
+
}, ref) => {
|
|
13
|
+
const checkboxRef = useProvidedOrCreatedRef(ref);
|
|
14
|
+
return /*#__PURE__*/jsxRuntimeExports.jsx(BaseSwitch, {
|
|
15
|
+
ref: checkboxRef,
|
|
16
|
+
checked: checked,
|
|
17
|
+
validationStatus: validationStatus,
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
const UnstyledSwitch = styled.input.attrs({
|
|
22
|
+
type: 'checkbox'
|
|
23
|
+
})`
|
|
24
|
+
appearance: none;
|
|
25
|
+
|
|
26
|
+
${sx}
|
|
27
|
+
`;
|
|
28
|
+
const BaseSwitch = styled(UnstyledSwitch)`
|
|
29
|
+
position: relative;
|
|
30
|
+
|
|
31
|
+
width: ${forcePixelValue(36)};
|
|
32
|
+
height: ${forcePixelValue(20)};
|
|
33
|
+
|
|
34
|
+
border-radius: ${({
|
|
35
|
+
theme
|
|
36
|
+
}) => `${forcePixelValue(theme.radii.full)}`};
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
|
|
39
|
+
background-color: ${({
|
|
40
|
+
theme
|
|
41
|
+
}) => theme.colors['bg/neutral']};
|
|
42
|
+
|
|
43
|
+
transition: background-color 200ms;
|
|
44
|
+
|
|
45
|
+
&::before {
|
|
46
|
+
content: '';
|
|
47
|
+
position: absolute;
|
|
48
|
+
width: ${forcePixelValue(16)};
|
|
49
|
+
height: ${forcePixelValue(16)};
|
|
50
|
+
background-color: ${({
|
|
51
|
+
theme
|
|
52
|
+
}) => theme.colors['surface/overlay']};
|
|
53
|
+
top: ${forcePixelValue(2)};
|
|
54
|
+
border-radius: ${({
|
|
55
|
+
theme
|
|
56
|
+
}) => `${forcePixelValue(theme.radii.full)}`};
|
|
57
|
+
|
|
58
|
+
transform: translateX(${forcePixelValue(2)});
|
|
59
|
+
transition: transform 200ms;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:disabled {
|
|
63
|
+
background-color: ${({
|
|
64
|
+
theme
|
|
65
|
+
}) => theme.colors['bg/disabled']};
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:checked {
|
|
70
|
+
background-color: ${({
|
|
71
|
+
theme
|
|
72
|
+
}) => theme.colors['bg/primary']};
|
|
73
|
+
|
|
74
|
+
&::before {
|
|
75
|
+
transform: translateX(${forcePixelValue(36 - 16 - 2)});
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&:disabled {
|
|
79
|
+
background-color: ${({
|
|
80
|
+
theme
|
|
81
|
+
}) => theme.colors['bg/primary/disabled']};
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:focus-visible {
|
|
86
|
+
outline-width: ${forcePixelValue(2)};
|
|
87
|
+
outline-style: solid;
|
|
88
|
+
outline-color: ${({
|
|
89
|
+
theme
|
|
90
|
+
}) => theme.colors['border/focused']};
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
${sx}
|
|
94
|
+
`;
|
|
95
|
+
var Switch$1 = /*#__PURE__*/forwardRef(Switch);
|
|
96
|
+
|
|
97
|
+
export { Switch$1 as default };
|
|
@@ -27,6 +27,7 @@ const bgColor = {
|
|
|
27
27
|
'bg/primary': palette.violet500,
|
|
28
28
|
'bg/primary/hovered': palette.violet700,
|
|
29
29
|
'bg/primary/pressed': palette.violet700,
|
|
30
|
+
'bg/primary/disabled': palette.violet100,
|
|
30
31
|
'bg/neutral/subtlest': palette.transparent,
|
|
31
32
|
'bg/neutral/subtlest/hovered': palette.gray50,
|
|
32
33
|
'bg/neutral/subtlest/pressed': palette.gray50,
|
|
@@ -55,7 +56,6 @@ const bgColor = {
|
|
|
55
56
|
'bg/accent/red/subtle': palette.red400,
|
|
56
57
|
'bg/accent/red': palette.red500,
|
|
57
58
|
'bg/accent/gray/subtlest': palette.gray200,
|
|
58
|
-
'bg/accent/violet/subtlest': palette.violet100,
|
|
59
59
|
'bg/selected/violet': palette.violet500,
|
|
60
60
|
'bg/selected': palette.gray900,
|
|
61
61
|
'bg/selected/subtle': palette.gray100,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teamturing/react-kit",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.35.0",
|
|
4
4
|
"description": "React components, hooks for create teamturing web application",
|
|
5
5
|
"author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
|
|
6
6
|
"homepage": "https://github.com/weareteamturing/bombe#readme",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@floating-ui/react-dom": "^2.0.2",
|
|
57
57
|
"@primer/behaviors": "^1.3.6",
|
|
58
|
-
"@teamturing/icons": "^1.43.
|
|
59
|
-
"@teamturing/token-studio": "^1.
|
|
58
|
+
"@teamturing/icons": "^1.43.1",
|
|
59
|
+
"@teamturing/token-studio": "^1.9.0",
|
|
60
60
|
"@teamturing/utils": "^1.4.0",
|
|
61
61
|
"framer-motion": "^10.16.4",
|
|
62
62
|
"lodash.debounce": "^4.0.8",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"react-textarea-autosize": "^8.5.3",
|
|
67
67
|
"styled-system": "^5.1.5"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "55d14d0eab0c2905cc30015c4a13190222e6e545"
|
|
70
70
|
}
|