@sproutsocial/seeds-react-switch 1.1.1 → 1.2.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/dist/esm/index.js +3 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +7 -5
- package/dist/index.js.map +1 -1
- package/package.json +5 -4
package/dist/esm/index.js
CHANGED
|
@@ -168,9 +168,10 @@ var Switch_default = Switch;
|
|
|
168
168
|
import "react";
|
|
169
169
|
|
|
170
170
|
// src/index.ts
|
|
171
|
-
var
|
|
171
|
+
var index_default = Switch_default;
|
|
172
172
|
export {
|
|
173
|
+
StyledSwitchButton,
|
|
173
174
|
Switch_default as Switch,
|
|
174
|
-
|
|
175
|
+
index_default as default
|
|
175
176
|
};
|
|
176
177
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switch.tsx","../../src/styles.ts","../../src/SwitchTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { StyledSwitchButton } from \"./styles\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/switch/\n *\n * Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.\n * The accessible label should not change when the checked state changes.\n * The component uses role=\"switch\" and the `checked` prop will be used to set the aria-checked attribute.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n *\n * @example\n * <Switch checked={true} onClick={_onClick} aria-label=\"Switch Example\" />\n */\n\nconst Switch = ({\n onClick,\n loading = false,\n checked,\n disabled = false,\n ...rest\n}: TypeSwitchProps) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n return (\n <StyledSwitchButton\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={loading ? \"loading\" : \"\"}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n};\n\nexport default Switch;\n","import styled, { keyframes } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { color, layout, space } from \"styled-system\";\n\ninterface StyledSwitchButtonProps {\n qa?: object;\n}\n\nconst loadingKeyFrame = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledSwitchButton = styled.button<StyledSwitchButtonProps>`\n /* Base styles for Switch */\n position: relative;\n display: inline-flex;\n align-self: center;\n width: 40px;\n height: 24px;\n margin: 0;\n padding: ${({ theme }) => theme.space[100]} ${({ theme }) => theme.space[200]};\n vertical-align: middle;\n appearance: none;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n border-radius: 16px;\n outline: none;\n cursor: pointer;\n transition: background-color ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n border: 1px solid ${({ theme }) => theme.colors.form.border.base};\n white-space: nowrap;\n overflow: hidden;\n\n /* Mixin for styled focus ring */\n &:focus {\n ${focusRing}\n }\n\n /* Base styles for circle element */\n &[aria-checked] {\n &::after {\n display: block;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n content: \"\";\n transition: transform ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n }\n &.loading {\n cursor: not-allowed;\n pointer-events: none;\n background-size: contain;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n &::after {\n position: absolute;\n box-sizing: content-box;\n width: 8px;\n height: 8px;\n border-radius: ${({ theme }) => theme.radii.pill};\n border: 3px dotted ${({ theme }) => theme.colors.icon.base};\n background-color: transparent;\n animation: ${loadingKeyFrame} 2s linear infinite;\n }\n }\n }\n /* Checked State */\n &[aria-checked=\"true\"] {\n color: ${({ theme }) => theme.colors.text.body};\n text-align: left;\n border-color: ${({ theme }) => theme.colors.form.border.selected};\n background-color: ${({ theme }) => theme.colors.form.background.selected};\n .Icon {\n position: absolute;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n color: ${({ theme }) => theme.colors.icon.inverse};\n }\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.inverse};\n opacity: 1;\n transform: translate(100%, 6%);\n }\n &.loading::after {\n top: 4px;\n right: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(90%, 6%);\n }\n }\n }\n /* Unchecked State */\n &[aria-checked=\"false\"] {\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.base};\n opacity: 0.64;\n transform: translate(0%, 6%);\n }\n &.loading::after {\n top: 4px;\n left: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(10%, 6%);\n }\n }\n }\n\n /* Disabled State Styles */\n &:disabled {\n opacity: 0.4;\n pointer-events: none;\n cursor: not-allowed;\n &[aria-checked=\"true\"] {\n &:hover,\n &:focus {\n background-color: ${({ theme }) =>\n theme.colors.container.background.selected};\n }\n }\n }\n\n ${color}\n ${layout}\n ${space}\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSwitchProps\n extends Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\" | \"onClick\">,\n TypeStyledComponentsCommonProps,\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps {\n onClick: (\n e: React.SyntheticEvent<HTMLButtonElement>,\n checked: boolean\n ) => void;\n checked: boolean;\n loading?: boolean;\n disabled?: boolean;\n}\n","import Switch from \"./Switch\";\n\nexport default Switch;\nexport { Switch };\nexport * from \"./SwitchTypes\";\n"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../src/Switch.tsx","../../src/styles.ts","../../src/SwitchTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { StyledSwitchButton } from \"./styles\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/switch/\n *\n * Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.\n * The accessible label should not change when the checked state changes.\n * The component uses role=\"switch\" and the `checked` prop will be used to set the aria-checked attribute.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n *\n * @example\n * <Switch checked={true} onClick={_onClick} aria-label=\"Switch Example\" />\n */\n\nconst Switch = ({\n onClick,\n loading = false,\n checked,\n disabled = false,\n ...rest\n}: TypeSwitchProps) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n return (\n <StyledSwitchButton\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={loading ? \"loading\" : \"\"}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n};\n\nexport default Switch;\n","import styled, { keyframes } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { color, layout, space } from \"styled-system\";\n\ninterface StyledSwitchButtonProps {\n qa?: object;\n}\n\nconst loadingKeyFrame = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledSwitchButton = styled.button<StyledSwitchButtonProps>`\n /* Base styles for Switch */\n position: relative;\n display: inline-flex;\n align-self: center;\n width: 40px;\n height: 24px;\n margin: 0;\n padding: ${({ theme }) => theme.space[100]} ${({ theme }) => theme.space[200]};\n vertical-align: middle;\n appearance: none;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n border-radius: 16px;\n outline: none;\n cursor: pointer;\n transition: background-color ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n border: 1px solid ${({ theme }) => theme.colors.form.border.base};\n white-space: nowrap;\n overflow: hidden;\n\n /* Mixin for styled focus ring */\n &:focus {\n ${focusRing}\n }\n\n /* Base styles for circle element */\n &[aria-checked] {\n &::after {\n display: block;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n content: \"\";\n transition: transform ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n }\n &.loading {\n cursor: not-allowed;\n pointer-events: none;\n background-size: contain;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n &::after {\n position: absolute;\n box-sizing: content-box;\n width: 8px;\n height: 8px;\n border-radius: ${({ theme }) => theme.radii.pill};\n border: 3px dotted ${({ theme }) => theme.colors.icon.base};\n background-color: transparent;\n animation: ${loadingKeyFrame} 2s linear infinite;\n }\n }\n }\n /* Checked State */\n &[aria-checked=\"true\"] {\n color: ${({ theme }) => theme.colors.text.body};\n text-align: left;\n border-color: ${({ theme }) => theme.colors.form.border.selected};\n background-color: ${({ theme }) => theme.colors.form.background.selected};\n .Icon {\n position: absolute;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n color: ${({ theme }) => theme.colors.icon.inverse};\n }\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.inverse};\n opacity: 1;\n transform: translate(100%, 6%);\n }\n &.loading::after {\n top: 4px;\n right: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(90%, 6%);\n }\n }\n }\n /* Unchecked State */\n &[aria-checked=\"false\"] {\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.base};\n opacity: 0.64;\n transform: translate(0%, 6%);\n }\n &.loading::after {\n top: 4px;\n left: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(10%, 6%);\n }\n }\n }\n\n /* Disabled State Styles */\n &:disabled {\n opacity: 0.4;\n pointer-events: none;\n cursor: not-allowed;\n &[aria-checked=\"true\"] {\n &:hover,\n &:focus {\n background-color: ${({ theme }) =>\n theme.colors.container.background.selected};\n }\n }\n }\n\n ${color}\n ${layout}\n ${space}\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSwitchProps\n extends Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\" | \"onClick\">,\n TypeStyledComponentsCommonProps,\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps {\n onClick: (\n e: React.SyntheticEvent<HTMLButtonElement>,\n checked: boolean\n ) => void;\n checked: boolean;\n loading?: boolean;\n disabled?: boolean;\n}\n","import Switch from \"./Switch\";\n\nexport default Switch;\nexport { Switch };\nexport * from \"./SwitchTypes\";\nexport * from \"./styles\";\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
|
+
import * as styled_components from 'styled-components';
|
|
4
5
|
|
|
5
6
|
interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">, "color" | "onClick">, TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps {
|
|
6
7
|
onClick: (e: React.SyntheticEvent<HTMLButtonElement>, checked: boolean) => void;
|
|
@@ -23,4 +24,9 @@ interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">,
|
|
|
23
24
|
*/
|
|
24
25
|
declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => react_jsx_runtime.JSX.Element;
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
interface StyledSwitchButtonProps {
|
|
28
|
+
qa?: object;
|
|
29
|
+
}
|
|
30
|
+
declare const StyledSwitchButton: styled_components.StyledComponent<"button", any, StyledSwitchButtonProps, never>;
|
|
31
|
+
|
|
32
|
+
export { StyledSwitchButton, Switch, type TypeSwitchProps, Switch as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
|
|
4
|
+
import * as styled_components from 'styled-components';
|
|
4
5
|
|
|
5
6
|
interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">, "color" | "onClick">, TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps {
|
|
6
7
|
onClick: (e: React.SyntheticEvent<HTMLButtonElement>, checked: boolean) => void;
|
|
@@ -23,4 +24,9 @@ interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">,
|
|
|
23
24
|
*/
|
|
24
25
|
declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => react_jsx_runtime.JSX.Element;
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
interface StyledSwitchButtonProps {
|
|
28
|
+
qa?: object;
|
|
29
|
+
}
|
|
30
|
+
declare const StyledSwitchButton: styled_components.StyledComponent<"button", any, StyledSwitchButtonProps, never>;
|
|
31
|
+
|
|
32
|
+
export { StyledSwitchButton, Switch, type TypeSwitchProps, Switch as default };
|
package/dist/index.js
CHANGED
|
@@ -28,12 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
StyledSwitchButton: () => StyledSwitchButton,
|
|
33
34
|
Switch: () => Switch_default,
|
|
34
|
-
default: () =>
|
|
35
|
+
default: () => index_default
|
|
35
36
|
});
|
|
36
|
-
module.exports = __toCommonJS(
|
|
37
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
38
|
|
|
38
39
|
// src/Switch.tsx
|
|
39
40
|
var React = require("react");
|
|
@@ -205,9 +206,10 @@ var Switch_default = Switch;
|
|
|
205
206
|
var React2 = require("react");
|
|
206
207
|
|
|
207
208
|
// src/index.ts
|
|
208
|
-
var
|
|
209
|
+
var index_default = Switch_default;
|
|
209
210
|
// Annotate the CommonJS export names for ESM import in node:
|
|
210
211
|
0 && (module.exports = {
|
|
212
|
+
StyledSwitchButton,
|
|
211
213
|
Switch
|
|
212
214
|
});
|
|
213
215
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Switch.tsx","../src/styles.ts","../src/SwitchTypes.ts"],"sourcesContent":["import Switch from \"./Switch\";\n\nexport default Switch;\nexport { Switch };\nexport * from \"./SwitchTypes\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { StyledSwitchButton } from \"./styles\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/switch/\n *\n * Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.\n * The accessible label should not change when the checked state changes.\n * The component uses role=\"switch\" and the `checked` prop will be used to set the aria-checked attribute.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n *\n * @example\n * <Switch checked={true} onClick={_onClick} aria-label=\"Switch Example\" />\n */\n\nconst Switch = ({\n onClick,\n loading = false,\n checked,\n disabled = false,\n ...rest\n}: TypeSwitchProps) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n return (\n <StyledSwitchButton\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={loading ? \"loading\" : \"\"}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n};\n\nexport default Switch;\n","import styled, { keyframes } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { color, layout, space } from \"styled-system\";\n\ninterface StyledSwitchButtonProps {\n qa?: object;\n}\n\nconst loadingKeyFrame = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledSwitchButton = styled.button<StyledSwitchButtonProps>`\n /* Base styles for Switch */\n position: relative;\n display: inline-flex;\n align-self: center;\n width: 40px;\n height: 24px;\n margin: 0;\n padding: ${({ theme }) => theme.space[100]} ${({ theme }) => theme.space[200]};\n vertical-align: middle;\n appearance: none;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n border-radius: 16px;\n outline: none;\n cursor: pointer;\n transition: background-color ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n border: 1px solid ${({ theme }) => theme.colors.form.border.base};\n white-space: nowrap;\n overflow: hidden;\n\n /* Mixin for styled focus ring */\n &:focus {\n ${focusRing}\n }\n\n /* Base styles for circle element */\n &[aria-checked] {\n &::after {\n display: block;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n content: \"\";\n transition: transform ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n }\n &.loading {\n cursor: not-allowed;\n pointer-events: none;\n background-size: contain;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n &::after {\n position: absolute;\n box-sizing: content-box;\n width: 8px;\n height: 8px;\n border-radius: ${({ theme }) => theme.radii.pill};\n border: 3px dotted ${({ theme }) => theme.colors.icon.base};\n background-color: transparent;\n animation: ${loadingKeyFrame} 2s linear infinite;\n }\n }\n }\n /* Checked State */\n &[aria-checked=\"true\"] {\n color: ${({ theme }) => theme.colors.text.body};\n text-align: left;\n border-color: ${({ theme }) => theme.colors.form.border.selected};\n background-color: ${({ theme }) => theme.colors.form.background.selected};\n .Icon {\n position: absolute;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n color: ${({ theme }) => theme.colors.icon.inverse};\n }\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.inverse};\n opacity: 1;\n transform: translate(100%, 6%);\n }\n &.loading::after {\n top: 4px;\n right: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(90%, 6%);\n }\n }\n }\n /* Unchecked State */\n &[aria-checked=\"false\"] {\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.base};\n opacity: 0.64;\n transform: translate(0%, 6%);\n }\n &.loading::after {\n top: 4px;\n left: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(10%, 6%);\n }\n }\n }\n\n /* Disabled State Styles */\n &:disabled {\n opacity: 0.4;\n pointer-events: none;\n cursor: not-allowed;\n &[aria-checked=\"true\"] {\n &:hover,\n &:focus {\n background-color: ${({ theme }) =>\n theme.colors.container.background.selected};\n }\n }\n }\n\n ${color}\n ${layout}\n ${space}\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSwitchProps\n extends Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\" | \"onClick\">,\n TypeStyledComponentsCommonProps,\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps {\n onClick: (\n e: React.SyntheticEvent<HTMLButtonElement>,\n checked: boolean\n ) => void;\n checked: boolean;\n loading?: boolean;\n disabled?: boolean;\n}\n"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Switch.tsx","../src/styles.ts","../src/SwitchTypes.ts"],"sourcesContent":["import Switch from \"./Switch\";\n\nexport default Switch;\nexport { Switch };\nexport * from \"./SwitchTypes\";\nexport * from \"./styles\";\n","import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { StyledSwitchButton } from \"./styles\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/switch/\n *\n * Switch should always have an accessible label. Use aria-label, aria-labelledby or a `Label` component.\n * The accessible label should not change when the checked state changes.\n * The component uses role=\"switch\" and the `checked` prop will be used to set the aria-checked attribute.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/\n *\n * @example\n * <Switch checked={true} onClick={_onClick} aria-label=\"Switch Example\" />\n */\n\nconst Switch = ({\n onClick,\n loading = false,\n checked,\n disabled = false,\n ...rest\n}: TypeSwitchProps) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n return (\n <StyledSwitchButton\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={loading ? \"loading\" : \"\"}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n};\n\nexport default Switch;\n","import styled, { keyframes } from \"styled-components\";\nimport { focusRing } from \"@sproutsocial/seeds-react-mixins\";\nimport { color, layout, space } from \"styled-system\";\n\ninterface StyledSwitchButtonProps {\n qa?: object;\n}\n\nconst loadingKeyFrame = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n`;\n\nexport const StyledSwitchButton = styled.button<StyledSwitchButtonProps>`\n /* Base styles for Switch */\n position: relative;\n display: inline-flex;\n align-self: center;\n width: 40px;\n height: 24px;\n margin: 0;\n padding: ${({ theme }) => theme.space[100]} ${({ theme }) => theme.space[200]};\n vertical-align: middle;\n appearance: none;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n border-radius: 16px;\n outline: none;\n cursor: pointer;\n transition: background-color ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n border: 1px solid ${({ theme }) => theme.colors.form.border.base};\n white-space: nowrap;\n overflow: hidden;\n\n /* Mixin for styled focus ring */\n &:focus {\n ${focusRing}\n }\n\n /* Base styles for circle element */\n &[aria-checked] {\n &::after {\n display: block;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n content: \"\";\n transition: transform ${({ theme }) => theme.duration.fast}\n ${({ theme }) => theme.easing.ease_inout};\n }\n &.loading {\n cursor: not-allowed;\n pointer-events: none;\n background-size: contain;\n background-color: ${({ theme }) => theme.colors.form.background.base};\n &::after {\n position: absolute;\n box-sizing: content-box;\n width: 8px;\n height: 8px;\n border-radius: ${({ theme }) => theme.radii.pill};\n border: 3px dotted ${({ theme }) => theme.colors.icon.base};\n background-color: transparent;\n animation: ${loadingKeyFrame} 2s linear infinite;\n }\n }\n }\n /* Checked State */\n &[aria-checked=\"true\"] {\n color: ${({ theme }) => theme.colors.text.body};\n text-align: left;\n border-color: ${({ theme }) => theme.colors.form.border.selected};\n background-color: ${({ theme }) => theme.colors.form.background.selected};\n .Icon {\n position: absolute;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n color: ${({ theme }) => theme.colors.icon.inverse};\n }\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.inverse};\n opacity: 1;\n transform: translate(100%, 6%);\n }\n &.loading::after {\n top: 4px;\n right: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(90%, 6%);\n }\n }\n }\n /* Unchecked State */\n &[aria-checked=\"false\"] {\n &::after {\n background-color: ${({ theme }) => theme.colors.icon.base};\n opacity: 0.64;\n transform: translate(0%, 6%);\n }\n &.loading::after {\n top: 4px;\n left: 5px;\n }\n &:hover,\n &:focus {\n &::after {\n transform: translate(10%, 6%);\n }\n }\n }\n\n /* Disabled State Styles */\n &:disabled {\n opacity: 0.4;\n pointer-events: none;\n cursor: not-allowed;\n &[aria-checked=\"true\"] {\n &:hover,\n &:focus {\n background-color: ${({ theme }) =>\n theme.colors.container.background.selected};\n }\n }\n }\n\n ${color}\n ${layout}\n ${space}\n`;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSwitchProps\n extends Omit<React.ComponentPropsWithoutRef<\"button\">, \"color\" | \"onClick\">,\n TypeStyledComponentsCommonProps,\n TypeColorSystemProps,\n TypeLayoutSystemProps,\n TypeSpaceSystemProps {\n onClick: (\n e: React.SyntheticEvent<HTMLButtonElement>,\n checked: boolean\n ) => void;\n checked: boolean;\n loading?: boolean;\n disabled?: boolean;\n}\n"],"mappings":"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","names":["styled","Icon","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-switch",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Seeds React Switch",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
],
|
|
13
13
|
"scripts": {
|
|
14
14
|
"build": "tsup --dts",
|
|
15
|
+
"build:debug": "tsup --dts --metafile",
|
|
15
16
|
"dev": "tsup --watch --dts",
|
|
16
17
|
"clean": "rm -rf .turbo dist",
|
|
17
18
|
"clean:modules": "rm -rf node_modules",
|
|
@@ -19,9 +20,9 @@
|
|
|
19
20
|
},
|
|
20
21
|
"dependencies": {
|
|
21
22
|
"styled-system": "^5.1.5",
|
|
22
|
-
"@sproutsocial/seeds-react-mixins": "
|
|
23
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
24
|
-
"@sproutsocial/seeds-react-icon": "
|
|
23
|
+
"@sproutsocial/seeds-react-mixins": "^4.1.0",
|
|
24
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
25
|
+
"@sproutsocial/seeds-react-icon": "^1.1.1"
|
|
25
26
|
},
|
|
26
27
|
"devDependencies": {
|
|
27
28
|
"@types/react": "^18.0.0",
|