@tamagui/switch 1.6.3 → 1.7.0

package/dist/cjs/Switch.js

@@ -81,15 +81,17 @@ const SwitchThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
 const SwitchThumb = SwitchThumbFrame.extractable(
   React.forwardRef(
     (props, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props;
-      const { size, disabled, checked, unstyled } = useSwitchContext(
-        THUMB_NAME,
-        __scopeSwitch
-      );
+      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
+      const {
+        size: sizeContext,
+        disabled,
+        checked,
+        unstyled
+      } = useSwitchContext(THUMB_NAME, __scopeSwitch);
+      const size = sizeProp ?? sizeContext;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         SwitchThumbFrame,
         {
-          unstyled,
           size,
           theme: checked ? "active" : null,
           "data-state": getState(checked),
@@ -109,11 +111,11 @@ const SwitchFrame = (0, import_core.styled)(import_stacks.XStack, {
   variants: {
     unstyled: {
       false: {
-        size: "$true",
-        borderRadius: 1e3,
-        borderWidth: 2,
-        borderColor: "transparent",
-        backgroundColor: "$background",
+        // size: '$true',
+        // borderRadius: 1000,
+        // borderWidth: 2,
+        // borderColor: 'transparent',
+        // backgroundColor: '$background',
         focusStyle: {
           borderColor: "$borderColorFocus"
         }

package/dist/cjs/Switch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Switch.tsx"],
-  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, ...thumbProps } = props\n      const { size, disabled, checked, unstyled } = useSwitchContext(\n        THUMB_NAME,\n        __scopeSwitch\n      )\n      return (\n        <SwitchThumbFrame\n          unstyled={unstyled}\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        borderRadius: 1000,\n        borderWidth: 2,\n        borderColor: 'transparent',\n        backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props\n      const {\n        size: sizeContext,\n        disabled,\n        checked,\n        unstyled,\n      } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const size = sizeProp ?? sizeContext\n      return (\n        <SwitchThumbFrame\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        // size: '$true',\n        // borderRadius: 1000,\n        // borderWidth: 2,\n        // borderColor: 'transparent',\n        // backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/Switch.js

@@ -49,15 +49,17 @@ const SwitchThumbFrame = styled(ThemeableStack, {
 const SwitchThumb = SwitchThumbFrame.extractable(
   React.forwardRef(
     (props, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props;
-      const { size, disabled, checked, unstyled } = useSwitchContext(
-        THUMB_NAME,
-        __scopeSwitch
-      );
+      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
+      const {
+        size: sizeContext,
+        disabled,
+        checked,
+        unstyled
+      } = useSwitchContext(THUMB_NAME, __scopeSwitch);
+      const size = sizeProp ?? sizeContext;
       return /* @__PURE__ */ jsx(
         SwitchThumbFrame,
         {
-          unstyled,
           size,
           theme: checked ? "active" : null,
           "data-state": getState(checked),
@@ -77,11 +79,11 @@ const SwitchFrame = styled(XStack, {
   variants: {
     unstyled: {
       false: {
-        size: "$true",
-        borderRadius: 1e3,
-        borderWidth: 2,
-        borderColor: "transparent",
-        backgroundColor: "$background",
+        // size: '$true',
+        // borderRadius: 1000,
+        // borderWidth: 2,
+        // borderColor: 'transparent',
+        // backgroundColor: '$background',
         focusStyle: {
           borderColor: "$borderColorFocus"
         }

package/dist/esm/Switch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Switch.tsx"],
-  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, ...thumbProps } = props\n      const { size, disabled, checked, unstyled } = useSwitchContext(\n        THUMB_NAME,\n        __scopeSwitch\n      )\n      return (\n        <SwitchThumbFrame\n          unstyled={unstyled}\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        borderRadius: 1000,\n        borderWidth: 2,\n        borderColor: 'transparent',\n        backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props\n      const {\n        size: sizeContext,\n        disabled,\n        checked,\n        unstyled,\n      } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const size = sizeProp ?? sizeContext\n      return (\n        <SwitchThumbFrame\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        // size: '$true',\n        // borderRadius: 1000,\n        // borderWidth: 2,\n        // borderColor: 'transparent',\n        // backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/Switch.mjs

@@ -49,15 +49,17 @@ const SwitchThumbFrame = styled(ThemeableStack, {
 const SwitchThumb = SwitchThumbFrame.extractable(
   React.forwardRef(
     (props, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props;
-      const { size, disabled, checked, unstyled } = useSwitchContext(
-        THUMB_NAME,
-        __scopeSwitch
-      );
+      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
+      const {
+        size: sizeContext,
+        disabled,
+        checked,
+        unstyled
+      } = useSwitchContext(THUMB_NAME, __scopeSwitch);
+      const size = sizeProp ?? sizeContext;
       return /* @__PURE__ */ jsx(
         SwitchThumbFrame,
         {
-          unstyled,
           size,
           theme: checked ? "active" : null,
           "data-state": getState(checked),
@@ -77,11 +79,11 @@ const SwitchFrame = styled(XStack, {
   variants: {
     unstyled: {
       false: {
-        size: "$true",
-        borderRadius: 1e3,
-        borderWidth: 2,
-        borderColor: "transparent",
-        backgroundColor: "$background",
+        // size: '$true',
+        // borderRadius: 1000,
+        // borderWidth: 2,
+        // borderColor: 'transparent',
+        // backgroundColor: '$background',
         focusStyle: {
           borderColor: "$borderColorFocus"
         }

package/dist/esm/Switch.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Switch.tsx"],
-  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, ...thumbProps } = props\n      const { size, disabled, checked, unstyled } = useSwitchContext(\n        THUMB_NAME,\n        __scopeSwitch\n      )\n      return (\n        <SwitchThumbFrame\n          unstyled={unstyled}\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        borderRadius: 1000,\n        borderWidth: 2,\n        borderColor: 'transparent',\n        backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props\n      const {\n        size: sizeContext,\n        disabled,\n        checked,\n        unstyled,\n      } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const size = sizeProp ?? sizeContext\n      return (\n        <SwitchThumbFrame\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        // size: '$true',\n        // borderRadius: 1000,\n        // borderWidth: 2,\n        // borderColor: 'transparent',\n        // backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/Switch.js

@@ -48,13 +48,15 @@ const SwitchThumbFrame = styled(ThemeableStack, {
 const SwitchThumb = SwitchThumbFrame.extractable(
   React.forwardRef(
     (props, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props;
-      const { size, disabled, checked, unstyled } = useSwitchContext(
-        THUMB_NAME,
-        __scopeSwitch
-      );
+      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
+      const {
+        size: sizeContext,
+        disabled,
+        checked,
+        unstyled
+      } = useSwitchContext(THUMB_NAME, __scopeSwitch);
+      const size = sizeProp ?? sizeContext;
       return <SwitchThumbFrame
-        unstyled={unstyled}
         size={size}
         theme={checked ? "active" : null}
         data-state={getState(checked)}
@@ -73,11 +75,11 @@ const SwitchFrame = styled(XStack, {
   variants: {
     unstyled: {
       false: {
-        size: "$true",
-        borderRadius: 1e3,
-        borderWidth: 2,
-        borderColor: "transparent",
-        backgroundColor: "$background",
+        // size: '$true',
+        // borderRadius: 1000,
+        // borderWidth: 2,
+        // borderColor: 'transparent',
+        // backgroundColor: '$background',
         focusStyle: {
           borderColor: "$borderColorFocus"
         }

package/dist/jsx/Switch.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Switch.tsx"],
-  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, ...thumbProps } = props\n      const { size, disabled, checked, unstyled } = useSwitchContext(\n        THUMB_NAME,\n        __scopeSwitch\n      )\n      return (\n        <SwitchThumbFrame\n          unstyled={unstyled}\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        borderRadius: 1000,\n        borderWidth: 2,\n        borderColor: 'transparent',\n        backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props\n      const {\n        size: sizeContext,\n        disabled,\n        checked,\n        unstyled,\n      } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const size = sizeProp ?? sizeContext\n      return (\n        <SwitchThumbFrame\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        // size: '$true',\n        // borderRadius: 1000,\n        // borderWidth: 2,\n        // borderColor: 'transparent',\n        // backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/Switch.mjs

@@ -48,13 +48,15 @@ const SwitchThumbFrame = styled(ThemeableStack, {
 const SwitchThumb = SwitchThumbFrame.extractable(
   React.forwardRef(
     (props, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props;
-      const { size, disabled, checked, unstyled } = useSwitchContext(
-        THUMB_NAME,
-        __scopeSwitch
-      );
+      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
+      const {
+        size: sizeContext,
+        disabled,
+        checked,
+        unstyled
+      } = useSwitchContext(THUMB_NAME, __scopeSwitch);
+      const size = sizeProp ?? sizeContext;
       return <SwitchThumbFrame
-        unstyled={unstyled}
         size={size}
         theme={checked ? "active" : null}
         data-state={getState(checked)}
@@ -73,11 +75,11 @@ const SwitchFrame = styled(XStack, {
   variants: {
     unstyled: {
       false: {
-        size: "$true",
-        borderRadius: 1e3,
-        borderWidth: 2,
-        borderColor: "transparent",
-        backgroundColor: "$background",
+        // size: '$true',
+        // borderRadius: 1000,
+        // borderWidth: 2,
+        // borderColor: 'transparent',
+        // backgroundColor: '$background',
         focusStyle: {
           borderColor: "$borderColorFocus"
         }

package/dist/jsx/Switch.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Switch.tsx"],
-  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, ...thumbProps } = props\n      const { size, disabled, checked, unstyled } = useSwitchContext(\n        THUMB_NAME,\n        __scopeSwitch\n      )\n      return (\n        <SwitchThumbFrame\n          unstyled={unstyled}\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        borderRadius: 1000,\n        borderWidth: 2,\n        borderColor: 'transparent',\n        backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["// via radix\n// https://github.com/radix-ui/primitives/blob/main/packages/react/switch/src/Switch.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  GetProps,\n  SizeTokens,\n  getVariableValue,\n  isWeb,\n  styled,\n  withStaticProperties,\n} from '@tamagui/core'\nimport { ScopedProps, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) =>\n  Math.round(getVariableValue(getSize(val)) * 0.65)\nconst getSwitchWidth = (val: SizeTokens) => getSwitchHeight(val) * 2\n\nconst scopeContexts = createContextScope(SWITCH_NAME)\nconst [createSwitchContext] = scopeContexts\nexport const createSwitchScope = scopeContexts[1]\n\nconst [SwitchProvider, useSwitchContext] = createSwitchContext<{\n  checked: boolean\n  disabled?: boolean\n  size: SizeTokens\n  unstyled?: boolean\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        borderRadius: 1000,\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const size = getSwitchHeight(val)\n        return {\n          height: size,\n          width: size,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>\n\nexport const SwitchThumb = SwitchThumbFrame.extractable(\n  React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(\n    (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {\n      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props\n      const {\n        size: sizeContext,\n        disabled,\n        checked,\n        unstyled,\n      } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const size = sizeProp ?? sizeContext\n      return (\n        <SwitchThumbFrame\n          size={size}\n          theme={checked ? 'active' : null}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) -\n                getVariableValue(getSwitchHeight(size))\n              : 0\n          }\n          ref={forwardedRef}\n        />\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: SWITCH_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        // size: '$true',\n        // borderRadius: 1000,\n        // borderWidth: 2,\n        // borderColor: 'transparent',\n        // backgroundColor: '$background',\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val) => {\n        const height = getSwitchHeight(val) + 4\n        const width = getSwitchWidth(val) + 4\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype SwitchButtonProps = GetProps<typeof SwitchFrame>\n\nexport type SwitchProps = SwitchButtonProps & {\n  labeledBy?: string\n  name?: string\n  value?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  required?: boolean\n  onCheckedChange?(checked: boolean): void\n}\n\nexport const Switch = withStaticProperties(\n  SwitchFrame.extractable(\n    React.forwardRef<HTMLButtonElement | View, SwitchProps>(\n      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {\n        const {\n          __scopeSwitch,\n          labeledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          size = '$true',\n          unstyled = false,\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) =>\n          setButton(node as any)\n        )\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\n          transition: true,\n        })\n\n        if (!isWeb) {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focus: () => {\n                setChecked((x) => !x)\n              },\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <SwitchProvider\n            scope={__scopeSwitch}\n            checked={checked}\n            disabled={disabled}\n            size={size}\n            unstyled={unstyled}\n          >\n            <SwitchFrame\n              unstyled={unstyled}\n              size={size}\n              // @ts-ignore\n              role=\"switch\"\n              aria-checked={checked}\n              aria-labelledby={labelledBy}\n              aria-required={required}\n              data-state={getState(checked)}\n              data-disabled={disabled ? '' : undefined}\n              disabled={disabled}\n              theme={checked ? 'active' : null}\n              themeShallow\n              // @ts-ignore\n              tabIndex={disabled ? undefined : 0}\n              // @ts-ignore\n              value={value}\n              {...switchProps}\n              ref={composedRefs}\n              onPress={(event) => {\n                props.onPress?.(event)\n                setChecked((prevChecked) => !prevChecked)\n                if (isWeb && isFormControl) {\n                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()\n                  // if switch is in a form, stop propagation from the button so that we only propagate\n                  // one click event (from the input). We propagate changes from an input so that native\n                  // form validation works and form events reflect switch updates.\n                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n                }\n              }}\n            />\n            {isWeb && isFormControl && (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                // We transform because the input is absolutely positioned but we have\n                // rendered it **after** the button. This pulls it back to sit on top\n                // of the button.\n                style={{ transform: 'translateX(-100%)' }}\n              />\n            )}\n          </SwitchProvider>\n        )\n      }\n    )\n  ),\n  {\n    Thumb: SwitchThumb,\n  }\n)\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: boolean\n  control: HTMLElement | null\n  bubbles: boolean\n}\n\n// TODO make this native friendly\nconst BubbleInput = (props: BubbleInputProps) => {\n  const { control, checked, bubbles = true, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  // const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      setChecked.call(input, checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      aria-hidden\n      defaultChecked={checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      style={{\n        ...props.style,\n        // ...controlSize,\n        position: 'absolute',\n        pointerEvents: 'none',\n        opacity: 0,\n        margin: 0,\n      }}\n    />\n  )\n}\n\nfunction getState(checked: boolean) {\n  return checked ? 'checked' : 'unchecked'\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/switch",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "sideEffects": [
     "*.css"
   ],
@@ -24,21 +24,21 @@
   },
   "dependencies": {
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/compose-refs": "1.6.3",
-    "@tamagui/core": "1.6.3",
-    "@tamagui/create-context": "1.6.3",
-    "@tamagui/focusable": "1.6.3",
-    "@tamagui/get-size": "1.6.3",
-    "@tamagui/label": "1.6.3",
-    "@tamagui/stacks": "1.6.3",
-    "@tamagui/use-controllable-state": "1.6.3"
+    "@tamagui/compose-refs": "1.7.0",
+    "@tamagui/core": "1.7.0",
+    "@tamagui/create-context": "1.7.0",
+    "@tamagui/focusable": "1.7.0",
+    "@tamagui/get-size": "1.7.0",
+    "@tamagui/label": "1.7.0",
+    "@tamagui/stacks": "1.7.0",
+    "@tamagui/use-controllable-state": "1.7.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.6.3",
+    "@tamagui/build": "1.7.0",
     "react": "^18.2.0",
     "react-native": "*"
   },

package/src/Switch.tsx

@@ -77,14 +77,16 @@ export type SwitchThumbProps = GetProps<typeof SwitchThumbFrame>
 export const SwitchThumb = SwitchThumbFrame.extractable(
   React.forwardRef<React.ElementRef<'span'>, SwitchThumbProps>(
     (props: ScopedProps<SwitchThumbProps, 'Switch'>, forwardedRef) => {
-      const { __scopeSwitch, ...thumbProps } = props
-      const { size, disabled, checked, unstyled } = useSwitchContext(
-        THUMB_NAME,
-        __scopeSwitch
-      )
+      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props
+      const {
+        size: sizeContext,
+        disabled,
+        checked,
+        unstyled,
+      } = useSwitchContext(THUMB_NAME, __scopeSwitch)
+      const size = sizeProp ?? sizeContext
       return (
         <SwitchThumbFrame
-          unstyled={unstyled}
           size={size}
           theme={checked ? 'active' : null}
           data-state={getState(checked)}
@@ -116,11 +118,11 @@ export const SwitchFrame = styled(XStack, {
   variants: {
     unstyled: {
       false: {
-        size: '$true',
-        borderRadius: 1000,
-        borderWidth: 2,
-        borderColor: 'transparent',
-        backgroundColor: '$background',
+        // size: '$true',
+        // borderRadius: 1000,
+        // borderWidth: 2,
+        // borderColor: 'transparent',
+        // backgroundColor: '$background',
 
         focusStyle: {
           borderColor: '$borderColorFocus',

package/types/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,QAAQ,EACR,UAAU,EAKX,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAWnC,eAAO,MAAM,iBAAiB,+CAAmB,CAAA;AAejD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0B3B,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2BvB,CAAA;AAQD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;EAmCtB,CAAA;AAEF,KAAK,iBAAiB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;8BAHS,OAAO,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHzC,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,QAAQ,EACR,UAAU,EAKX,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAWnC,eAAO,MAAM,iBAAiB,+CAAmB,CAAA;AAejD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0B3B,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA6BvB,CAAA;AAQD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;EAmCtB,CAAA;AAEF,KAAK,iBAAiB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;8BAHS,OAAO,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHzC,CAAA"}