@sproutsocial/seeds-react-switch 1.1.0 → 1.2.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.
Files changed (7) hide show
  1. package/dist/esm/index.js +12 -7
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +9 -2
  4. package/dist/index.d.ts +9 -2
  5. package/dist/index.js +16 -10
  6. package/dist/index.js.map +1 -1
  7. package/package.json +8 -5
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/Switch.tsx
2
- import * as React from "react";
2
+ import "react";
3
3
  import Icon from "@sproutsocial/seeds-react-icon";
4
4
 
5
5
  // src/styles.ts
@@ -135,6 +135,7 @@ var StyledSwitchButton = styled.button`
135
135
  `;
136
136
 
137
137
  // src/Switch.tsx
138
+ import { jsx } from "react/jsx-runtime";
138
139
  var Switch = ({
139
140
  onClick,
140
141
  loading = false,
@@ -147,7 +148,7 @@ var Switch = ({
147
148
  onClick(e, !checked);
148
149
  }
149
150
  };
150
- return /* @__PURE__ */ React.createElement(
151
+ return /* @__PURE__ */ jsx(
151
152
  StyledSwitchButton,
152
153
  {
153
154
  type: "button",
@@ -156,17 +157,21 @@ var Switch = ({
156
157
  disabled,
157
158
  onClick: handleClick,
158
159
  className: loading ? "loading" : "",
159
- ...rest
160
- },
161
- checked ? /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
160
+ ...rest,
161
+ children: checked ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
162
+ }
162
163
  );
163
164
  };
164
165
  var Switch_default = Switch;
165
166
 
167
+ // src/SwitchTypes.ts
168
+ import "react";
169
+
166
170
  // src/index.ts
167
- var src_default = Switch_default;
171
+ var index_default = Switch_default;
168
172
  export {
173
+ StyledSwitchButton,
169
174
  Switch_default as Switch,
170
- src_default as default
175
+ index_default as default
171
176
  };
172
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/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { StyledSwitchButton } from \"./styles\";\nimport { 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 Switch from \"./Switch\";\n\nexport default Switch;\nexport { Switch };\nexport * from \"./SwitchTypes\";\n"],"mappings":"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","names":[]}
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,5 +1,7 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
4
+ import * as styled_components from 'styled-components';
3
5
 
4
6
  interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">, "color" | "onClick">, TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps {
5
7
  onClick: (e: React.SyntheticEvent<HTMLButtonElement>, checked: boolean) => void;
@@ -20,6 +22,11 @@ interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">,
20
22
  * @example
21
23
  * <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
22
24
  */
23
- declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => React.JSX.Element;
25
+ declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => react_jsx_runtime.JSX.Element;
24
26
 
25
- export { Switch, type TypeSwitchProps, Switch as default };
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,5 +1,7 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
1
2
  import * as React from 'react';
2
3
  import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
4
+ import * as styled_components from 'styled-components';
3
5
 
4
6
  interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">, "color" | "onClick">, TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps {
5
7
  onClick: (e: React.SyntheticEvent<HTMLButtonElement>, checked: boolean) => void;
@@ -20,6 +22,11 @@ interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">,
20
22
  * @example
21
23
  * <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
22
24
  */
23
- declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => React.JSX.Element;
25
+ declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => react_jsx_runtime.JSX.Element;
24
26
 
25
- export { Switch, type TypeSwitchProps, Switch as default };
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,15 +28,16 @@ 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 src_exports = {};
32
- __export(src_exports, {
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
+ StyledSwitchButton: () => StyledSwitchButton,
33
34
  Switch: () => Switch_default,
34
- default: () => src_default
35
+ default: () => index_default
35
36
  });
36
- module.exports = __toCommonJS(src_exports);
37
+ module.exports = __toCommonJS(index_exports);
37
38
 
38
39
  // src/Switch.tsx
39
- var React = __toESM(require("react"));
40
+ var React = require("react");
40
41
  var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
41
42
 
42
43
  // src/styles.ts
@@ -172,6 +173,7 @@ var StyledSwitchButton = import_styled_components.default.button`
172
173
  `;
173
174
 
174
175
  // src/Switch.tsx
176
+ var import_jsx_runtime = require("react/jsx-runtime");
175
177
  var Switch = ({
176
178
  onClick,
177
179
  loading = false,
@@ -184,7 +186,7 @@ var Switch = ({
184
186
  onClick(e, !checked);
185
187
  }
186
188
  };
187
- return /* @__PURE__ */ React.createElement(
189
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
188
190
  StyledSwitchButton,
189
191
  {
190
192
  type: "button",
@@ -193,17 +195,21 @@ var Switch = ({
193
195
  disabled,
194
196
  onClick: handleClick,
195
197
  className: loading ? "loading" : "",
196
- ...rest
197
- },
198
- checked ? /* @__PURE__ */ React.createElement(import_seeds_react_icon.default, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
198
+ ...rest,
199
+ children: checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
200
+ }
199
201
  );
200
202
  };
201
203
  var Switch_default = Switch;
202
204
 
205
+ // src/SwitchTypes.ts
206
+ var React2 = require("react");
207
+
203
208
  // src/index.ts
204
- var src_default = Switch_default;
209
+ var index_default = Switch_default;
205
210
  // Annotate the CommonJS export names for ESM import in node:
206
211
  0 && (module.exports = {
212
+ StyledSwitchButton,
207
213
  Switch
208
214
  });
209
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"],"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 { 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"],"mappings":"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","names":["styled","Icon"]}
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.1.0",
3
+ "version": "1.2.0",
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": "^2.0.1",
23
- "@sproutsocial/seeds-react-system-props": "^2.2.0",
24
- "@sproutsocial/seeds-react-icon": "^1.0.0"
23
+ "@sproutsocial/seeds-react-mixins": "*",
24
+ "@sproutsocial/seeds-react-system-props": "*",
25
+ "@sproutsocial/seeds-react-icon": "*"
25
26
  },
26
27
  "devDependencies": {
27
28
  "@types/react": "^18.0.0",
@@ -29,7 +30,9 @@
29
30
  "@sproutsocial/eslint-config-seeds": "*",
30
31
  "react": "^18.0.0",
31
32
  "styled-components": "^5.2.3",
32
- "typescript": "^5.1.6"
33
+ "typescript": "^5.6.2",
34
+ "@sproutsocial/seeds-tsconfig": "*",
35
+ "tsup": "^8.0.2"
33
36
  },
34
37
  "peerDependencies": {
35
38
  "styled-components": "^5.2.3"