@spark-web/switch 5.0.1

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @spark-web/switch
+
+## 5.0.1
+
+### Patch Changes
+
+- [#757](https://github.com/brighte-labs/spark-web/pull/757)
+  [`8a40ef9`](https://github.com/brighte-labs/spark-web/commit/8a40ef9a87273c1755f36f834a41ddc7c9fa55df)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - Created
+  Switch component
+
+## 5.0.0
+
+### Patch Changes
+
+- Initial release of the Switch component

package/README.md

@@ -0,0 +1,98 @@
+---
+title: Switch
+storybookPath: forms-switch--default
+isExperimentalPackage: false
+---
+
+A Switch is a binary toggle control that represents on/off states. Built on top
+of `@radix-ui/react-switch` for full accessibility support including keyboard
+navigation, ARIA attributes, and screen reader announcements.
+
+## Examples
+
+### Controlled
+
+Switches can be both controlled and uncontrolled. To control a switch provide
+the `checked` state with a value you control, as well as an `onCheckedChange`
+function to set the new value when the switch is toggled.
+
+```jsx live
+const [checked, setChecked] = React.useState(false);
+
+return (
+  <Stack gap="large">
+    <Switch checked={checked} onCheckedChange={setChecked}>
+      <Text>Enable feature</Text>
+    </Switch>
+    {checked && <Text>Feature is enabled</Text>}
+  </Stack>
+);
+```
+
+### Size
+
+Switches are available in two sizes: `small` and `medium`.
+
+```jsx live
+<Stack gap="large">
+  <Fieldset legend="Switch variations (small)" gap="large">
+    <Switch size="small" checked={false}>
+      Unchecked
+    </Switch>
+    <Switch size="small" checked>
+      Checked
+    </Switch>
+    <Switch size="small" disabled>
+      Disabled
+    </Switch>
+    <Switch size="small" checked disabled>
+      Checked + disabled
+    </Switch>
+  </Fieldset>
+  <Divider />
+  <Fieldset legend="Switch variations (medium)" gap="large">
+    <Switch size="medium" checked={false}>
+      Unchecked
+    </Switch>
+    <Switch size="medium" checked>
+      Checked
+    </Switch>
+    <Switch size="medium" disabled>
+      Disabled
+    </Switch>
+    <Switch size="medium" checked disabled>
+      Checked + disabled
+    </Switch>
+  </Fieldset>
+</Stack>
+```
+
+### Message and tone
+
+The `message` is used to communicate the status of a field, such as an error
+message. This will be announced on focus and can be combined with a `tone` to
+illustrate intent. The supported tones are: `critical`, `positive` and
+`neutral`.
+
+```jsx live
+<Fieldset legend="Message and tone" gap="large">
+  <Switch message="Critical message" tone="critical">
+    Critical
+  </Switch>
+  <Switch message="Positive message" tone="positive">
+    Positive
+  </Switch>
+  <Switch message="Neutral message" tone="neutral">
+    Neutral
+  </Switch>
+</Fieldset>
+```
+
+## Props
+
+### Switch
+
+<PropsTable displayName="Switch" />
+
+[data-attribute-map]:
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from "./switch.js";
+export type { SwitchProps, SwitchSize } from "./switch.js";

package/dist/declarations/src/switch.d.ts

@@ -0,0 +1,40 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import type { Tone } from '@spark-web/field';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type SwitchSize = 'small' | 'medium';
+export type SwitchProps = {
+    /** The label content displayed next to the switch. */
+    children: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** When true, the switch will be on. Use with `onCheckedChange` for controlled usage. */
+    checked?: boolean;
+    /** The initial checked state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** When true, the switch will be disabled. */
+    disabled?: boolean;
+    /** Sets a unique identifier on the component. */
+    id?: string;
+    /** Provide a message, informing the user about changes in state. */
+    message?: string;
+    /** The name submitted with the switch's owning form. */
+    name?: string;
+    /** Callback fired when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** When true, indicates the switch is required in a form. */
+    required?: boolean;
+    /** The size of the switch. */
+    size?: SwitchSize;
+    /** Provide a tone to influence the message appearance. */
+    tone?: Tone;
+    /** The value submitted with the switch's owning form when checked. */
+    value?: string;
+};
+/**
+ * A Switch is a binary toggle control that represents on/off states.
+ * Built on top of `@radix-ui/react-switch` for full accessibility support
+ * including keyboard navigation, ARIA attributes, and screen reader announcements.
+ */
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type SwitchRootProps = ComponentPropsWithoutRef<typeof RadixSwitch.Root>;

package/dist/spark-web-switch.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXN3aXRjaC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/spark-web-switch.cjs.dev.js

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@emotion/react');
+var RadixSwitch = require('@radix-ui/react-switch');
+var box = require('@spark-web/box');
+var controlLabel = require('@spark-web/control-label');
+var field = require('@spark-web/field');
+var stack = require('@spark-web/stack');
+var theme = require('@spark-web/theme');
+var internal = require('@spark-web/utils/internal');
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
+
+var _excluded = ["children", "data", "disabled", "id", "message", "name", "onCheckedChange", "required", "size", "tone", "value"];
+/**
+ * A Switch is a binary toggle control that represents on/off states.
+ * Built on top of `@radix-ui/react-switch` for full accessibility support
+ * including keyboard navigation, ARIA attributes, and screen reader announcements.
+ */
+var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref, forwardedRef) {
+  var children = _ref.children,
+    data = _ref.data,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    idProp = _ref.id,
+    message = _ref.message,
+    name = _ref.name,
+    onCheckedChange = _ref.onCheckedChange,
+    required = _ref.required,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
+    value = _ref.value,
+    radixProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFieldIds = field.useFieldIds(idProp),
+    inputId = _useFieldIds.inputId,
+    messageId = _useFieldIds.messageId;
+  var theme$1 = theme.useTheme();
+  var _useSwitchStyles = useSwitchStyles(size, theme$1),
+    trackStyles = _useSwitchStyles.trackStyles,
+    thumbStyles = _useSwitchStyles.thumbStyles;
+  return jsxRuntime.jsxs(stack.Stack, {
+    gap: "small",
+    position: "relative",
+    children: [jsxRuntime.jsx(controlLabel.ControlLabel, {
+      control: jsxRuntime.jsx(box.Box, {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0,
+        children: jsxRuntime.jsx(RadixSwitch__namespace.Root, _objectSpread(_objectSpread(_objectSpread({}, radixProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+          "aria-describedby": message ? messageId : undefined,
+          ref: forwardedRef,
+          disabled: disabled,
+          id: inputId,
+          name: name,
+          onCheckedChange: onCheckedChange,
+          required: required,
+          value: value,
+          css: react$1.css(trackStyles),
+          children: jsxRuntime.jsx(RadixSwitch__namespace.Thumb, {
+            css: react$1.css(thumbStyles)
+          })
+        }))
+      }),
+      disabled: disabled,
+      htmlFor: inputId,
+      size: size,
+      alignItems: "center",
+      children: children
+    }), message && jsxRuntime.jsx(field.FieldMessage, {
+      tone: tone,
+      id: messageId,
+      message: message
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+var trackDimensions = {
+  small: {
+    width: 36,
+    height: 20,
+    thumbSize: 16,
+    thumbOffset: 2
+  },
+  medium: {
+    width: 44,
+    height: 24,
+    thumbSize: 20,
+    thumbOffset: 2
+  }
+};
+function useSwitchStyles(size, theme) {
+  var _trackDimensions$size = trackDimensions[size],
+    width = _trackDimensions$size.width,
+    height = _trackDimensions$size.height,
+    thumbSize = _trackDimensions$size.thumbSize,
+    thumbOffset = _trackDimensions$size.thumbOffset;
+  var transition = {
+    transitionProperty: 'background-color, transform',
+    transitionTimingFunction: theme.animation.standard.easing,
+    transitionDuration: "".concat(theme.animation.standard.duration, "ms")
+  };
+  var trackStyles = _objectSpread(_objectSpread({
+    // Reset button styles
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    // Track shape
+    width: width,
+    height: height,
+    borderRadius: height / 2,
+    flexShrink: 0,
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    // Unchecked colour
+    backgroundColor: theme.color.background.muted
+  }, transition), {}, {
+    // Checked state (Radix sets data-state="checked")
+    '&[data-state="checked"]': {
+      backgroundColor: theme.color.background.primary
+    },
+    // Focus ring
+    '&:focus-visible': {
+      outline: "2px solid ".concat(theme.color.foreground.primary),
+      outlineOffset: 2
+    },
+    // Hover — unchecked
+    '&:not([disabled]):not([data-state="checked"]):hover': {
+      backgroundColor: theme.color.background.disabled
+    },
+    // Hover — checked
+    '&:not([disabled])[data-state="checked"]:hover': {
+      backgroundColor: theme.color.background.primaryDark
+    },
+    // Disabled (Radix sets the disabled attribute)
+    '&[disabled]': {
+      cursor: 'not-allowed',
+      opacity: 0.5
+    }
+  });
+  var thumbStyles = _objectSpread(_objectSpread({
+    display: 'block',
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: '50%',
+    backgroundColor: '#ffffff',
+    boxShadow: theme.shadow.small,
+    // Unchecked position
+    transform: "translateX(".concat(thumbOffset, "px)")
+  }, transition), {}, {
+    // Checked position (Radix sets data-state="checked" on the Thumb too)
+    '&[data-state="checked"]': {
+      transform: "translateX(".concat(width - thumbSize - thumbOffset, "px)")
+    }
+  });
+  return {
+    trackStyles: trackStyles,
+    thumbStyles: thumbStyles
+  };
+}
+
+// Re-export for consumers who need the root prop types
+
+exports.Switch = Switch;

package/dist/spark-web-switch.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-switch.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-switch.cjs.dev.js");
+}

package/dist/spark-web-switch.cjs.prod.js

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@emotion/react');
+var RadixSwitch = require('@radix-ui/react-switch');
+var box = require('@spark-web/box');
+var controlLabel = require('@spark-web/control-label');
+var field = require('@spark-web/field');
+var stack = require('@spark-web/stack');
+var theme = require('@spark-web/theme');
+var internal = require('@spark-web/utils/internal');
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
+
+var _excluded = ["children", "data", "disabled", "id", "message", "name", "onCheckedChange", "required", "size", "tone", "value"];
+/**
+ * A Switch is a binary toggle control that represents on/off states.
+ * Built on top of `@radix-ui/react-switch` for full accessibility support
+ * including keyboard navigation, ARIA attributes, and screen reader announcements.
+ */
+var Switch = /*#__PURE__*/react.forwardRef(function Switch(_ref, forwardedRef) {
+  var children = _ref.children,
+    data = _ref.data,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    idProp = _ref.id,
+    message = _ref.message,
+    name = _ref.name,
+    onCheckedChange = _ref.onCheckedChange,
+    required = _ref.required,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
+    value = _ref.value,
+    radixProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFieldIds = field.useFieldIds(idProp),
+    inputId = _useFieldIds.inputId,
+    messageId = _useFieldIds.messageId;
+  var theme$1 = theme.useTheme();
+  var _useSwitchStyles = useSwitchStyles(size, theme$1),
+    trackStyles = _useSwitchStyles.trackStyles,
+    thumbStyles = _useSwitchStyles.thumbStyles;
+  return jsxRuntime.jsxs(stack.Stack, {
+    gap: "small",
+    position: "relative",
+    children: [jsxRuntime.jsx(controlLabel.ControlLabel, {
+      control: jsxRuntime.jsx(box.Box, {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0,
+        children: jsxRuntime.jsx(RadixSwitch__namespace.Root, _objectSpread(_objectSpread(_objectSpread({}, radixProps), data ? internal.buildDataAttributes(data) : undefined), {}, {
+          "aria-describedby": message ? messageId : undefined,
+          ref: forwardedRef,
+          disabled: disabled,
+          id: inputId,
+          name: name,
+          onCheckedChange: onCheckedChange,
+          required: required,
+          value: value,
+          css: react$1.css(trackStyles),
+          children: jsxRuntime.jsx(RadixSwitch__namespace.Thumb, {
+            css: react$1.css(thumbStyles)
+          })
+        }))
+      }),
+      disabled: disabled,
+      htmlFor: inputId,
+      size: size,
+      alignItems: "center",
+      children: children
+    }), message && jsxRuntime.jsx(field.FieldMessage, {
+      tone: tone,
+      id: messageId,
+      message: message
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+var trackDimensions = {
+  small: {
+    width: 36,
+    height: 20,
+    thumbSize: 16,
+    thumbOffset: 2
+  },
+  medium: {
+    width: 44,
+    height: 24,
+    thumbSize: 20,
+    thumbOffset: 2
+  }
+};
+function useSwitchStyles(size, theme) {
+  var _trackDimensions$size = trackDimensions[size],
+    width = _trackDimensions$size.width,
+    height = _trackDimensions$size.height,
+    thumbSize = _trackDimensions$size.thumbSize,
+    thumbOffset = _trackDimensions$size.thumbOffset;
+  var transition = {
+    transitionProperty: 'background-color, transform',
+    transitionTimingFunction: theme.animation.standard.easing,
+    transitionDuration: "".concat(theme.animation.standard.duration, "ms")
+  };
+  var trackStyles = _objectSpread(_objectSpread({
+    // Reset button styles
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    // Track shape
+    width: width,
+    height: height,
+    borderRadius: height / 2,
+    flexShrink: 0,
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    // Unchecked colour
+    backgroundColor: theme.color.background.muted
+  }, transition), {}, {
+    // Checked state (Radix sets data-state="checked")
+    '&[data-state="checked"]': {
+      backgroundColor: theme.color.background.primary
+    },
+    // Focus ring
+    '&:focus-visible': {
+      outline: "2px solid ".concat(theme.color.foreground.primary),
+      outlineOffset: 2
+    },
+    // Hover — unchecked
+    '&:not([disabled]):not([data-state="checked"]):hover': {
+      backgroundColor: theme.color.background.disabled
+    },
+    // Hover — checked
+    '&:not([disabled])[data-state="checked"]:hover': {
+      backgroundColor: theme.color.background.primaryDark
+    },
+    // Disabled (Radix sets the disabled attribute)
+    '&[disabled]': {
+      cursor: 'not-allowed',
+      opacity: 0.5
+    }
+  });
+  var thumbStyles = _objectSpread(_objectSpread({
+    display: 'block',
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: '50%',
+    backgroundColor: '#ffffff',
+    boxShadow: theme.shadow.small,
+    // Unchecked position
+    transform: "translateX(".concat(thumbOffset, "px)")
+  }, transition), {}, {
+    // Checked position (Radix sets data-state="checked" on the Thumb too)
+    '&[data-state="checked"]': {
+      transform: "translateX(".concat(width - thumbSize - thumbOffset, "px)")
+    }
+  });
+  return {
+    trackStyles: trackStyles,
+    thumbStyles: thumbStyles
+  };
+}
+
+// Re-export for consumers who need the root prop types
+
+exports.Switch = Switch;

package/dist/spark-web-switch.esm.js

@@ -0,0 +1,170 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { css } from '@emotion/react';
+import * as RadixSwitch from '@radix-ui/react-switch';
+import { Box } from '@spark-web/box';
+import { ControlLabel } from '@spark-web/control-label';
+import { useFieldIds, FieldMessage } from '@spark-web/field';
+import { Stack } from '@spark-web/stack';
+import { useTheme } from '@spark-web/theme';
+import { buildDataAttributes } from '@spark-web/utils/internal';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+
+var _excluded = ["children", "data", "disabled", "id", "message", "name", "onCheckedChange", "required", "size", "tone", "value"];
+/**
+ * A Switch is a binary toggle control that represents on/off states.
+ * Built on top of `@radix-ui/react-switch` for full accessibility support
+ * including keyboard navigation, ARIA attributes, and screen reader announcements.
+ */
+var Switch = /*#__PURE__*/forwardRef(function Switch(_ref, forwardedRef) {
+  var children = _ref.children,
+    data = _ref.data,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    idProp = _ref.id,
+    message = _ref.message,
+    name = _ref.name,
+    onCheckedChange = _ref.onCheckedChange,
+    required = _ref.required,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone,
+    value = _ref.value,
+    radixProps = _objectWithoutProperties(_ref, _excluded);
+  var _useFieldIds = useFieldIds(idProp),
+    inputId = _useFieldIds.inputId,
+    messageId = _useFieldIds.messageId;
+  var theme = useTheme();
+  var _useSwitchStyles = useSwitchStyles(size, theme),
+    trackStyles = _useSwitchStyles.trackStyles,
+    thumbStyles = _useSwitchStyles.thumbStyles;
+  return jsxs(Stack, {
+    gap: "small",
+    position: "relative",
+    children: [jsx(ControlLabel, {
+      control: jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0,
+        children: jsx(RadixSwitch.Root, _objectSpread(_objectSpread(_objectSpread({}, radixProps), data ? buildDataAttributes(data) : undefined), {}, {
+          "aria-describedby": message ? messageId : undefined,
+          ref: forwardedRef,
+          disabled: disabled,
+          id: inputId,
+          name: name,
+          onCheckedChange: onCheckedChange,
+          required: required,
+          value: value,
+          css: css(trackStyles),
+          children: jsx(RadixSwitch.Thumb, {
+            css: css(thumbStyles)
+          })
+        }))
+      }),
+      disabled: disabled,
+      htmlFor: inputId,
+      size: size,
+      alignItems: "center",
+      children: children
+    }), message && jsx(FieldMessage, {
+      tone: tone,
+      id: messageId,
+      message: message
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+var trackDimensions = {
+  small: {
+    width: 36,
+    height: 20,
+    thumbSize: 16,
+    thumbOffset: 2
+  },
+  medium: {
+    width: 44,
+    height: 24,
+    thumbSize: 20,
+    thumbOffset: 2
+  }
+};
+function useSwitchStyles(size, theme) {
+  var _trackDimensions$size = trackDimensions[size],
+    width = _trackDimensions$size.width,
+    height = _trackDimensions$size.height,
+    thumbSize = _trackDimensions$size.thumbSize,
+    thumbOffset = _trackDimensions$size.thumbOffset;
+  var transition = {
+    transitionProperty: 'background-color, transform',
+    transitionTimingFunction: theme.animation.standard.easing,
+    transitionDuration: "".concat(theme.animation.standard.duration, "ms")
+  };
+  var trackStyles = _objectSpread(_objectSpread({
+    // Reset button styles
+    appearance: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    // Track shape
+    width: width,
+    height: height,
+    borderRadius: height / 2,
+    flexShrink: 0,
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    // Unchecked colour
+    backgroundColor: theme.color.background.muted
+  }, transition), {}, {
+    // Checked state (Radix sets data-state="checked")
+    '&[data-state="checked"]': {
+      backgroundColor: theme.color.background.primary
+    },
+    // Focus ring
+    '&:focus-visible': {
+      outline: "2px solid ".concat(theme.color.foreground.primary),
+      outlineOffset: 2
+    },
+    // Hover — unchecked
+    '&:not([disabled]):not([data-state="checked"]):hover': {
+      backgroundColor: theme.color.background.disabled
+    },
+    // Hover — checked
+    '&:not([disabled])[data-state="checked"]:hover': {
+      backgroundColor: theme.color.background.primaryDark
+    },
+    // Disabled (Radix sets the disabled attribute)
+    '&[disabled]': {
+      cursor: 'not-allowed',
+      opacity: 0.5
+    }
+  });
+  var thumbStyles = _objectSpread(_objectSpread({
+    display: 'block',
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: '50%',
+    backgroundColor: '#ffffff',
+    boxShadow: theme.shadow.small,
+    // Unchecked position
+    transform: "translateX(".concat(thumbOffset, "px)")
+  }, transition), {}, {
+    // Checked position (Radix sets data-state="checked" on the Thumb too)
+    '&[data-state="checked"]': {
+      transform: "translateX(".concat(width - thumbSize - thumbOffset, "px)")
+    }
+  });
+  return {
+    trackStyles: trackStyles,
+    thumbStyles: thumbStyles
+  };
+}
+
+// Re-export for consumers who need the root prop types
+
+export { Switch };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@spark-web/switch",
+  "version": "5.0.1",
+  "homepage": "https://github.com/brighte-labs/spark-web#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brighte-labs/spark-web.git",
+    "directory": "packages/switch"
+  },
+  "license": "MIT",
+  "main": "dist/spark-web-switch.cjs.js",
+  "module": "dist/spark-web-switch.esm.js",
+  "exports": {
+    ".": {
+      "require": "./dist/spark-web-switch.cjs.js",
+      "import": "./dist/spark-web-switch.esm.js"
+    }
+  },
+  "files": [
+    "CHANGELOG.md",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.14.0",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@spark-web/box": "^6.0.0",
+    "@spark-web/control-label": "^5.1.0",
+    "@spark-web/field": "^5.3.0",
+    "@spark-web/stack": "^5.1.0",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}