@sproutsocial/seeds-react-switch 1.2.42 → 1.2.44

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 (8) hide show
  1. package/dist/esm/index.js +100 -27
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +4 -2
  4. package/dist/index.d.ts +4 -2
  5. package/dist/index.js +101 -28
  6. package/dist/index.js.map +1 -1
  7. package/dist/switch.css +139 -0
  8. package/package.json +13 -5
package/dist/esm/index.js CHANGED
@@ -1,6 +1,10 @@
1
1
  // src/Switch.tsx
2
- import "react";
3
- import Icon from "@sproutsocial/seeds-react-icon";
2
+ import * as React3 from "react";
3
+
4
+ // src/SwitchHybrid.tsx
5
+ import * as React2 from "react";
6
+ import Icon2 from "@sproutsocial/seeds-react-icon";
7
+ import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
4
8
 
5
9
  // src/styles.ts
6
10
  import styled, { keyframes } from "styled-components";
@@ -134,34 +138,103 @@ var StyledSwitchButton = styled.button`
134
138
  ${space}
135
139
  `;
136
140
 
137
- // src/Switch.tsx
141
+ // src/SwitchTailwind.tsx
142
+ import * as React from "react";
143
+ import Icon from "@sproutsocial/seeds-react-icon";
138
144
  import { jsx } from "react/jsx-runtime";
139
- var Switch = ({
140
- onClick,
141
- loading = false,
142
- checked,
143
- disabled = false,
144
- ...rest
145
- }) => {
146
- const handleClick = (e) => {
147
- if (!disabled) {
148
- onClick(e, !checked);
145
+ function cn(...inputs) {
146
+ const classes = [];
147
+ for (const input of inputs) {
148
+ if (!input) continue;
149
+ if (typeof input === "string") {
150
+ classes.push(input);
151
+ } else if (typeof input === "object") {
152
+ for (const [key, value] of Object.entries(input)) {
153
+ if (value) {
154
+ classes.push(key);
155
+ }
156
+ }
149
157
  }
150
- };
151
- return /* @__PURE__ */ jsx(
152
- StyledSwitchButton,
153
- {
154
- type: "button",
155
- role: "switch",
156
- "aria-checked": checked,
157
- disabled,
158
- onClick: handleClick,
159
- className: loading ? "loading" : "",
160
- ...rest,
161
- children: checked ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
158
+ }
159
+ return classes.join(" ");
160
+ }
161
+ var SwitchTailwind = React.forwardRef(
162
+ ({
163
+ onClick,
164
+ loading = false,
165
+ checked,
166
+ disabled = false,
167
+ className,
168
+ ...rest
169
+ }, ref) => {
170
+ const handleClick = (e) => {
171
+ if (!disabled) {
172
+ onClick(e, !checked);
173
+ }
174
+ };
175
+ const Component = "button";
176
+ return /* @__PURE__ */ jsx(
177
+ Component,
178
+ {
179
+ type: "button",
180
+ role: "switch",
181
+ "aria-checked": checked,
182
+ disabled,
183
+ onClick: handleClick,
184
+ className: cn("seeds-switch", { loading }, className),
185
+ ref,
186
+ ...rest,
187
+ children: checked ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
188
+ }
189
+ );
190
+ }
191
+ );
192
+ SwitchTailwind.displayName = "SwitchTailwind";
193
+
194
+ // src/SwitchHybrid.tsx
195
+ import { jsx as jsx2 } from "react/jsx-runtime";
196
+ var SwitchHybrid = React2.forwardRef(
197
+ (props, ref) => {
198
+ const {
199
+ onClick,
200
+ loading = false,
201
+ checked,
202
+ disabled = false,
203
+ ...rest
204
+ } = props;
205
+ if (hasStyledProps(rest)) {
206
+ const handleClick = (e) => {
207
+ if (!disabled) {
208
+ onClick(e, !checked);
209
+ }
210
+ };
211
+ return /* @__PURE__ */ jsx2(
212
+ StyledSwitchButton,
213
+ {
214
+ type: "button",
215
+ role: "switch",
216
+ "aria-checked": checked,
217
+ disabled,
218
+ onClick: handleClick,
219
+ className: loading ? "loading" : "",
220
+ ref,
221
+ ...rest,
222
+ children: checked ? /* @__PURE__ */ jsx2(Icon2, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
223
+ }
224
+ );
162
225
  }
163
- );
164
- };
226
+ return /* @__PURE__ */ jsx2(SwitchTailwind, { ...props, ref });
227
+ }
228
+ );
229
+ SwitchHybrid.displayName = "Switch";
230
+ var SwitchHybrid_default = SwitchHybrid;
231
+
232
+ // src/Switch.tsx
233
+ import { jsx as jsx3 } from "react/jsx-runtime";
234
+ var Switch = React3.forwardRef(
235
+ (props, ref) => /* @__PURE__ */ jsx3(SwitchHybrid_default, { ...props, ref })
236
+ );
237
+ Switch.displayName = "Switch";
165
238
  var Switch_default = Switch;
166
239
 
167
240
  // src/SwitchTypes.ts
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\";\nexport * from \"./styles\";\n"],"mappings":"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","names":[]}
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.d.mts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as React from 'react';
3
2
  import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
4
3
  import * as styled_components from 'styled-components';
@@ -21,8 +20,11 @@ interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">,
21
20
  *
22
21
  * @example
23
22
  * <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
23
+ *
24
+ * Automatically routes between the Tailwind implementation (preferred) and the
25
+ * styled-components implementation (for consumers using system props or styled() extension).
24
26
  */
25
- declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => react_jsx_runtime.JSX.Element;
27
+ declare const Switch: React.ForwardRefExoticComponent<Omit<TypeSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
26
28
 
27
29
  interface StyledSwitchButtonProps {
28
30
  qa?: object;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
1
  import * as React from 'react';
3
2
  import { TypeStyledComponentsCommonProps, TypeColorSystemProps, TypeLayoutSystemProps, TypeSpaceSystemProps } from '@sproutsocial/seeds-react-system-props';
4
3
  import * as styled_components from 'styled-components';
@@ -21,8 +20,11 @@ interface TypeSwitchProps extends Omit<React.ComponentPropsWithoutRef<"button">,
21
20
  *
22
21
  * @example
23
22
  * <Switch checked={true} onClick={_onClick} aria-label="Switch Example" />
23
+ *
24
+ * Automatically routes between the Tailwind implementation (preferred) and the
25
+ * styled-components implementation (for consumers using system props or styled() extension).
24
26
  */
25
- declare const Switch: ({ onClick, loading, checked, disabled, ...rest }: TypeSwitchProps) => react_jsx_runtime.JSX.Element;
27
+ declare const Switch: React.ForwardRefExoticComponent<Omit<TypeSwitchProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
26
28
 
27
29
  interface StyledSwitchButtonProps {
28
30
  qa?: object;
package/dist/index.js CHANGED
@@ -37,8 +37,12 @@ __export(index_exports, {
37
37
  module.exports = __toCommonJS(index_exports);
38
38
 
39
39
  // src/Switch.tsx
40
- var React = require("react");
41
- var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
40
+ var React3 = __toESM(require("react"));
41
+
42
+ // src/SwitchHybrid.tsx
43
+ var React2 = __toESM(require("react"));
44
+ var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
45
+ var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
42
46
 
43
47
  // src/styles.ts
44
48
  var import_styled_components = __toESM(require("styled-components"));
@@ -172,38 +176,107 @@ var StyledSwitchButton = import_styled_components.default.button`
172
176
  ${import_styled_system.space}
173
177
  `;
174
178
 
175
- // src/Switch.tsx
179
+ // src/SwitchTailwind.tsx
180
+ var React = __toESM(require("react"));
181
+ var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
176
182
  var import_jsx_runtime = require("react/jsx-runtime");
177
- var Switch = ({
178
- onClick,
179
- loading = false,
180
- checked,
181
- disabled = false,
182
- ...rest
183
- }) => {
184
- const handleClick = (e) => {
185
- if (!disabled) {
186
- onClick(e, !checked);
183
+ function cn(...inputs) {
184
+ const classes = [];
185
+ for (const input of inputs) {
186
+ if (!input) continue;
187
+ if (typeof input === "string") {
188
+ classes.push(input);
189
+ } else if (typeof input === "object") {
190
+ for (const [key, value] of Object.entries(input)) {
191
+ if (value) {
192
+ classes.push(key);
193
+ }
194
+ }
187
195
  }
188
- };
189
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
190
- StyledSwitchButton,
191
- {
192
- type: "button",
193
- role: "switch",
194
- "aria-checked": checked,
195
- disabled,
196
- onClick: handleClick,
197
- className: loading ? "loading" : "",
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
196
+ }
197
+ return classes.join(" ");
198
+ }
199
+ var SwitchTailwind = React.forwardRef(
200
+ ({
201
+ onClick,
202
+ loading = false,
203
+ checked,
204
+ disabled = false,
205
+ className,
206
+ ...rest
207
+ }, ref) => {
208
+ const handleClick = (e) => {
209
+ if (!disabled) {
210
+ onClick(e, !checked);
211
+ }
212
+ };
213
+ const Component = "button";
214
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
215
+ Component,
216
+ {
217
+ type: "button",
218
+ role: "switch",
219
+ "aria-checked": checked,
220
+ disabled,
221
+ onClick: handleClick,
222
+ className: cn("seeds-switch", { loading }, className),
223
+ ref,
224
+ ...rest,
225
+ children: checked ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
226
+ }
227
+ );
228
+ }
229
+ );
230
+ SwitchTailwind.displayName = "SwitchTailwind";
231
+
232
+ // src/SwitchHybrid.tsx
233
+ var import_jsx_runtime2 = require("react/jsx-runtime");
234
+ var SwitchHybrid = React2.forwardRef(
235
+ (props, ref) => {
236
+ const {
237
+ onClick,
238
+ loading = false,
239
+ checked,
240
+ disabled = false,
241
+ ...rest
242
+ } = props;
243
+ if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
244
+ const handleClick = (e) => {
245
+ if (!disabled) {
246
+ onClick(e, !checked);
247
+ }
248
+ };
249
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
250
+ StyledSwitchButton,
251
+ {
252
+ type: "button",
253
+ role: "switch",
254
+ "aria-checked": checked,
255
+ disabled,
256
+ onClick: handleClick,
257
+ className: loading ? "loading" : "",
258
+ ref,
259
+ ...rest,
260
+ children: checked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, size: "mini", name: "check-solid" }) : null
261
+ }
262
+ );
200
263
  }
201
- );
202
- };
264
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SwitchTailwind, { ...props, ref });
265
+ }
266
+ );
267
+ SwitchHybrid.displayName = "Switch";
268
+ var SwitchHybrid_default = SwitchHybrid;
269
+
270
+ // src/Switch.tsx
271
+ var import_jsx_runtime3 = require("react/jsx-runtime");
272
+ var Switch = React3.forwardRef(
273
+ (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SwitchHybrid_default, { ...props, ref })
274
+ );
275
+ Switch.displayName = "Switch";
203
276
  var Switch_default = Switch;
204
277
 
205
278
  // src/SwitchTypes.ts
206
- var React2 = require("react");
279
+ var React4 = require("react");
207
280
 
208
281
  // src/index.ts
209
282
  var index_default = Switch_default;
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\";\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"]}
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/dist/switch.css ADDED
@@ -0,0 +1,139 @@
1
+ /**
2
+ * Seeds Switch component classes
3
+ * Use these instead of writing out individual Tailwind utility classes.
4
+ *
5
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
6
+ * CSS variable definitions and dark mode support.
7
+ *
8
+ * Usage:
9
+ * <button class="seeds-switch" role="switch" aria-checked="true"></button>
10
+ * <button class="seeds-switch loading" role="switch" aria-checked="false"></button>
11
+ */
12
+
13
+ @layer components {
14
+ .seeds-switch {
15
+ position: relative;
16
+ display: inline-flex;
17
+ align-self: center;
18
+ width: 40px;
19
+ height: 24px;
20
+ margin: 0;
21
+ padding: var(--space-100) var(--space-200);
22
+ vertical-align: middle;
23
+ appearance: none;
24
+ background-color: var(--color-form-bg-base);
25
+ border-radius: 16px;
26
+ outline: none;
27
+ cursor: pointer;
28
+ transition: background-color var(--duration-fast) var(--ease-ease_inout);
29
+ border: 1px solid var(--color-form-border-base);
30
+ white-space: nowrap;
31
+ overflow: hidden;
32
+ }
33
+
34
+ /* Mixin for styled focus ring — copied from button.css:34-39 */
35
+ .seeds-switch:focus {
36
+ outline: none;
37
+ box-shadow:
38
+ 0 0 0 1px var(--color-button-primary-bg-base),
39
+ 0 0 0 4px color-mix(in srgb, var(--color-button-primary-bg-base) 30%, transparent);
40
+ }
41
+
42
+ /* Base styles for circle element */
43
+ .seeds-switch[aria-checked]::after {
44
+ display: block;
45
+ width: 16px;
46
+ height: 16px;
47
+ border-radius: 50%;
48
+ content: "";
49
+ transition: transform var(--duration-fast) var(--ease-ease_inout);
50
+ }
51
+
52
+ .seeds-switch[aria-checked].loading {
53
+ cursor: not-allowed;
54
+ pointer-events: none;
55
+ background-size: contain;
56
+ background-color: var(--color-form-bg-base);
57
+ }
58
+
59
+ .seeds-switch[aria-checked].loading::after {
60
+ position: absolute;
61
+ box-sizing: content-box;
62
+ width: 8px;
63
+ height: 8px;
64
+ border-radius: var(--radius-pill);
65
+ border: 3px dotted var(--color-icon-base);
66
+ background-color: transparent;
67
+ animation: seeds-switch-loading 2s linear infinite;
68
+ }
69
+
70
+ /* Checked State */
71
+ .seeds-switch[aria-checked="true"] {
72
+ color: var(--color-text-body);
73
+ text-align: left;
74
+ border-color: var(--color-form-border-selected);
75
+ background-color: var(--color-form-bg-selected);
76
+ }
77
+
78
+ .seeds-switch[aria-checked="true"] .Icon {
79
+ position: absolute;
80
+ top: 50%;
81
+ left: 4px;
82
+ transform: translate(0, -50%);
83
+ color: var(--color-icon-inverse);
84
+ }
85
+
86
+ .seeds-switch[aria-checked="true"]::after {
87
+ background-color: var(--color-icon-inverse);
88
+ opacity: 1;
89
+ transform: translate(100%, 6%);
90
+ }
91
+
92
+ .seeds-switch[aria-checked="true"].loading::after {
93
+ top: 4px;
94
+ right: 5px;
95
+ }
96
+
97
+ .seeds-switch[aria-checked="true"]:hover::after,
98
+ .seeds-switch[aria-checked="true"]:focus::after {
99
+ transform: translate(90%, 6%);
100
+ }
101
+
102
+ /* Unchecked State */
103
+ .seeds-switch[aria-checked="false"]::after {
104
+ background-color: var(--color-icon-base);
105
+ opacity: 0.64;
106
+ transform: translate(0%, 6%);
107
+ }
108
+
109
+ .seeds-switch[aria-checked="false"].loading::after {
110
+ top: 4px;
111
+ left: 5px;
112
+ }
113
+
114
+ .seeds-switch[aria-checked="false"]:hover::after,
115
+ .seeds-switch[aria-checked="false"]:focus::after {
116
+ transform: translate(10%, 6%);
117
+ }
118
+
119
+ /* Disabled State Styles */
120
+ .seeds-switch:disabled {
121
+ opacity: 0.4;
122
+ pointer-events: none;
123
+ cursor: not-allowed;
124
+ }
125
+
126
+ .seeds-switch:disabled[aria-checked="true"]:hover,
127
+ .seeds-switch:disabled[aria-checked="true"]:focus {
128
+ background-color: var(--color-container-bg-selected);
129
+ }
130
+
131
+ @keyframes seeds-switch-loading {
132
+ 0% {
133
+ transform: rotate(0deg);
134
+ }
135
+ 100% {
136
+ transform: rotate(360deg);
137
+ }
138
+ }
139
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-switch",
3
- "version": "1.2.42",
3
+ "version": "1.2.44",
4
4
  "description": "Seeds React Switch",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
@@ -10,9 +10,17 @@
10
10
  "files": [
11
11
  "dist"
12
12
  ],
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/esm/index.js",
16
+ "require": "./dist/index.js",
17
+ "types": "./dist/index.d.ts"
18
+ },
19
+ "./dist/switch.css": "./dist/switch.css"
20
+ },
13
21
  "scripts": {
14
- "build": "tsup --dts",
15
- "build:debug": "tsup --dts --metafile",
22
+ "build": "tsup --dts && cp src/switch.css dist/switch.css",
23
+ "build:debug": "tsup --dts --metafile && cp src/switch.css dist/switch.css",
16
24
  "dev": "tsup --watch --dts",
17
25
  "clean": "rm -rf .turbo dist",
18
26
  "clean:modules": "rm -rf node_modules",
@@ -20,9 +28,9 @@
20
28
  },
21
29
  "dependencies": {
22
30
  "styled-system": "^5.1.5",
23
- "@sproutsocial/seeds-react-mixins": "^4.3.9",
31
+ "@sproutsocial/seeds-react-mixins": "^4.3.10",
24
32
  "@sproutsocial/seeds-react-system-props": "^3.1.2",
25
- "@sproutsocial/seeds-react-icon": "^2.4.3"
33
+ "@sproutsocial/seeds-react-icon": "^2.4.4"
26
34
  },
27
35
  "devDependencies": {
28
36
  "@types/react": "^18.0.0",