@sproutsocial/seeds-react-switch 1.2.43 → 1.2.45
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 +7 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +7 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -195,7 +195,13 @@ SwitchTailwind.displayName = "SwitchTailwind";
|
|
|
195
195
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
196
196
|
var SwitchHybrid = React2.forwardRef(
|
|
197
197
|
(props, ref) => {
|
|
198
|
-
const {
|
|
198
|
+
const {
|
|
199
|
+
onClick,
|
|
200
|
+
loading = false,
|
|
201
|
+
checked,
|
|
202
|
+
disabled = false,
|
|
203
|
+
...rest
|
|
204
|
+
} = props;
|
|
199
205
|
if (hasStyledProps(rest)) {
|
|
200
206
|
const handleClick = (e) => {
|
|
201
207
|
if (!disabled) {
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Switch.tsx","../../src/SwitchHybrid.tsx","../../src/styles.ts","../../src/SwitchTailwind.tsx","../../src/SwitchTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport SwitchHybrid from \"./SwitchHybrid\";\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 * Automatically routes between the Tailwind implementation (preferred) and the\n * styled-components implementation (for consumers using system props or styled() extension).\n */\nconst Switch = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => <SwitchHybrid {...props} ref={ref} />\n);\n\nSwitch.displayName = \"Switch\";\nexport default Switch;\n","/**\n * Hybrid Switch Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledSwitchButton } from \"./styles\"; // Styled-components version\nimport { SwitchTailwind } from \"./SwitchTailwind\"; // Tailwind version\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\nconst SwitchHybrid = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => {\n const { onClick, loading = false, checked, disabled = false, ...rest } =\n props;\n\n if (hasStyledProps(rest)) {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\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 ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <SwitchTailwind {...props} ref={ref} />;\n }\n);\n\nSwitchHybrid.displayName = \"Switch\";\nexport default SwitchHybrid;\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","/**\n * Tailwind CSS implementation of Switch component\n * Uses Seeds switch CSS classes from switch.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const SwitchTailwind = React.forwardRef<\n HTMLButtonElement,\n TypeSwitchProps\n>(\n (\n {\n onClick,\n loading = false,\n checked,\n disabled = false,\n className,\n ...rest\n }: TypeSwitchProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n\n // Render through an `any`-typed element so spreading {...rest} (which is\n // typed as still carrying styled-system props from TypeSwitchProps) is not\n // rejected against the strict native ButtonHTMLAttributes. This mirrors\n // ButtonTailwind.tsx. At runtime the Hybrid only routes here when\n // !hasStyledProps(rest), so no system props are ever present.\n const Component = \"button\" as any;\n\n return (\n <Component\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={cn(\"seeds-switch\", { loading }, className)}\n ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </Component>\n );\n }\n);\n\nSwitchTailwind.displayName = \"SwitchTailwind\";\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":["React","React","Icon","jsx","Icon","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/Switch.tsx","../../src/SwitchHybrid.tsx","../../src/styles.ts","../../src/SwitchTailwind.tsx","../../src/SwitchTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport SwitchHybrid from \"./SwitchHybrid\";\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 * Automatically routes between the Tailwind implementation (preferred) and the\n * styled-components implementation (for consumers using system props or styled() extension).\n */\nconst Switch = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => <SwitchHybrid {...props} ref={ref} />\n);\n\nSwitch.displayName = \"Switch\";\nexport default Switch;\n","/**\n * Hybrid Switch Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledSwitchButton } from \"./styles\"; // Styled-components version\nimport { SwitchTailwind } from \"./SwitchTailwind\"; // Tailwind version\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\nconst SwitchHybrid = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => {\n const {\n onClick,\n loading = false,\n checked,\n disabled = false,\n ...rest\n } = props;\n\n if (hasStyledProps(rest)) {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\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 ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <SwitchTailwind {...props} ref={ref} />;\n }\n);\n\nSwitchHybrid.displayName = \"Switch\";\nexport default SwitchHybrid;\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","/**\n * Tailwind CSS implementation of Switch component\n * Uses Seeds switch CSS classes from switch.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const SwitchTailwind = React.forwardRef<\n HTMLButtonElement,\n TypeSwitchProps\n>(\n (\n {\n onClick,\n loading = false,\n checked,\n disabled = false,\n className,\n ...rest\n }: TypeSwitchProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n\n // Render through an `any`-typed element so spreading {...rest} (which is\n // typed as still carrying styled-system props from TypeSwitchProps) is not\n // rejected against the strict native ButtonHTMLAttributes. This mirrors\n // ButtonTailwind.tsx. At runtime the Hybrid only routes here when\n // !hasStyledProps(rest), so no system props are ever present.\n const Component = \"button\" as any;\n\n return (\n <Component\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={cn(\"seeds-switch\", { loading }, className)}\n ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </Component>\n );\n }\n);\n\nSwitchTailwind.displayName = \"SwitchTailwind\";\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":["React","React","Icon","jsx","Icon","jsx"]}
|
package/dist/index.js
CHANGED
|
@@ -233,7 +233,13 @@ SwitchTailwind.displayName = "SwitchTailwind";
|
|
|
233
233
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
234
234
|
var SwitchHybrid = React2.forwardRef(
|
|
235
235
|
(props, ref) => {
|
|
236
|
-
const {
|
|
236
|
+
const {
|
|
237
|
+
onClick,
|
|
238
|
+
loading = false,
|
|
239
|
+
checked,
|
|
240
|
+
disabled = false,
|
|
241
|
+
...rest
|
|
242
|
+
} = props;
|
|
237
243
|
if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
|
|
238
244
|
const handleClick = (e) => {
|
|
239
245
|
if (!disabled) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Switch.tsx","../src/SwitchHybrid.tsx","../src/styles.ts","../src/SwitchTailwind.tsx","../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 SwitchHybrid from \"./SwitchHybrid\";\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 * Automatically routes between the Tailwind implementation (preferred) and the\n * styled-components implementation (for consumers using system props or styled() extension).\n */\nconst Switch = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => <SwitchHybrid {...props} ref={ref} />\n);\n\nSwitch.displayName = \"Switch\";\nexport default Switch;\n","/**\n * Hybrid Switch Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledSwitchButton } from \"./styles\"; // Styled-components version\nimport { SwitchTailwind } from \"./SwitchTailwind\"; // Tailwind version\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\nconst SwitchHybrid = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => {\n const { onClick, loading = false, checked, disabled = false, ...rest } =\n props;\n\n if (hasStyledProps(rest)) {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\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 ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <SwitchTailwind {...props} ref={ref} />;\n }\n);\n\nSwitchHybrid.displayName = \"Switch\";\nexport default SwitchHybrid;\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","/**\n * Tailwind CSS implementation of Switch component\n * Uses Seeds switch CSS classes from switch.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const SwitchTailwind = React.forwardRef<\n HTMLButtonElement,\n TypeSwitchProps\n>(\n (\n {\n onClick,\n loading = false,\n checked,\n disabled = false,\n className,\n ...rest\n }: TypeSwitchProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n\n // Render through an `any`-typed element so spreading {...rest} (which is\n // typed as still carrying styled-system props from TypeSwitchProps) is not\n // rejected against the strict native ButtonHTMLAttributes. This mirrors\n // ButtonTailwind.tsx. At runtime the Hybrid only routes here when\n // !hasStyledProps(rest), so no system props are ever present.\n const Component = \"button\" as any;\n\n return (\n <Component\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={cn(\"seeds-switch\", { loading }, className)}\n ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </Component>\n );\n }\n);\n\nSwitchTailwind.displayName = \"SwitchTailwind\";\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":["React","React","import_seeds_react_icon","styled","Icon","import_jsx_runtime","Icon","import_jsx_runtime","React"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Switch.tsx","../src/SwitchHybrid.tsx","../src/styles.ts","../src/SwitchTailwind.tsx","../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 SwitchHybrid from \"./SwitchHybrid\";\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 * Automatically routes between the Tailwind implementation (preferred) and the\n * styled-components implementation (for consumers using system props or styled() extension).\n */\nconst Switch = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => <SwitchHybrid {...props} ref={ref} />\n);\n\nSwitch.displayName = \"Switch\";\nexport default Switch;\n","/**\n * Hybrid Switch Component\n * Automatically chooses between Tailwind and styled-components based on props\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { StyledSwitchButton } from \"./styles\"; // Styled-components version\nimport { SwitchTailwind } from \"./SwitchTailwind\"; // Tailwind version\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\nconst SwitchHybrid = React.forwardRef<HTMLButtonElement, TypeSwitchProps>(\n (props, ref) => {\n const {\n onClick,\n loading = false,\n checked,\n disabled = false,\n ...rest\n } = props;\n\n if (hasStyledProps(rest)) {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\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 ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </StyledSwitchButton>\n );\n }\n\n // Use Tailwind version (preferred - better performance)\n return <SwitchTailwind {...props} ref={ref} />;\n }\n);\n\nSwitchHybrid.displayName = \"Switch\";\nexport default SwitchHybrid;\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","/**\n * Tailwind CSS implementation of Switch component\n * Uses Seeds switch CSS classes from switch.css\n */\n\nimport * as React from \"react\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeSwitchProps } from \"./SwitchTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n const classes: string[] = [];\n\n for (const input of inputs) {\n if (!input) continue;\n\n if (typeof input === \"string\") {\n classes.push(input);\n } else if (typeof input === \"object\") {\n for (const [key, value] of Object.entries(input)) {\n if (value) {\n classes.push(key);\n }\n }\n }\n }\n\n return classes.join(\" \");\n}\n\nexport const SwitchTailwind = React.forwardRef<\n HTMLButtonElement,\n TypeSwitchProps\n>(\n (\n {\n onClick,\n loading = false,\n checked,\n disabled = false,\n className,\n ...rest\n }: TypeSwitchProps,\n ref: React.Ref<HTMLButtonElement>\n ) => {\n const handleClick = (e: React.SyntheticEvent<HTMLButtonElement>) => {\n if (!disabled) {\n onClick(e, !checked);\n }\n };\n\n // Render through an `any`-typed element so spreading {...rest} (which is\n // typed as still carrying styled-system props from TypeSwitchProps) is not\n // rejected against the strict native ButtonHTMLAttributes. This mirrors\n // ButtonTailwind.tsx. At runtime the Hybrid only routes here when\n // !hasStyledProps(rest), so no system props are ever present.\n const Component = \"button\" as any;\n\n return (\n <Component\n type=\"button\"\n role=\"switch\"\n aria-checked={checked}\n disabled={disabled}\n onClick={handleClick}\n className={cn(\"seeds-switch\", { loading }, className)}\n ref={ref}\n {...rest}\n >\n {checked ? <Icon aria-hidden size=\"mini\" name=\"check-solid\" /> : null}\n </Component>\n );\n }\n);\n\nSwitchTailwind.displayName = \"SwitchTailwind\";\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":["React","React","import_seeds_react_icon","styled","Icon","import_jsx_runtime","Icon","import_jsx_runtime","React"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-switch",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.45",
|
|
4
4
|
"description": "Seeds React Switch",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"styled-system": "^5.1.5",
|
|
31
|
-
"@sproutsocial/seeds-react-mixins": "^4.3.
|
|
32
|
-
"@sproutsocial/seeds-react-system-props": "^3.1.
|
|
33
|
-
"@sproutsocial/seeds-react-icon": "^2.4.
|
|
31
|
+
"@sproutsocial/seeds-react-mixins": "^4.3.11",
|
|
32
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.3",
|
|
33
|
+
"@sproutsocial/seeds-react-icon": "^2.4.5"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/react": "^18.0.0",
|