@tamagui/switch 1.0.1-beta.140 → 1.0.1-beta.141

package/dist/jsx/Switch.js

@@ -109,8 +109,7 @@ const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((pr
   }
   return <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>
     <SwitchFrame size={size} role="switch" aria-checked={checked} aria-labelledby={labelledBy} aria-required={required} data-state={getState(checked)} data-disabled={disabled ? "" : void 0} disabled={disabled} theme={checked ? "active" : null} themeShallow tabIndex={disabled ? void 0 : 0} value={value} {...switchProps} ref={composedRefs} onPress={(event) => {
-      var _a;
-      (_a = props.onPress) == null ? void 0 : _a.call(props, event);
+      props.onPress?.(event);
       setChecked((prevChecked) => !prevChecked);
       if (isWeb && isFormControl) {
         hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();

package/dist/jsx/Switch.js.map

@@ -2,6 +2,6 @@
   "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  calc,\n  getSize,\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 { 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) => 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}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n  backgroundColor: '$background',\n  borderRadius: 1000,\n\n  variants: {\n    size: {\n      '...size': (val) => ({\n        height: getSwitchHeight(val),\n        width: getSwitchHeight(val),\n      }),\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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 } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      return (\n        <SwitchThumbFrame\n          size={size}\n          data-state={getState(checked)}\n          data-disabled={disabled ? '' : undefined}\n          {...thumbProps}\n          x={\n            checked\n              ? getVariableValue(getSwitchWidth(size)) - 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',\n  tag: 'button',\n  borderRadius: 1000,\n  borderWidth: 2,\n  borderColor: 'transparent',\n  backgroundColor: '$background',\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': (val) => {\n        const height = calc(getSwitchHeight(val), '+', 4)\n        const width = calc(getSwitchWidth(val), '+', 4)\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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 = '$4',\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\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 ? (button ? Boolean(button.closest('form')) : true) : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\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 scope={__scopeSwitch} checked={checked} disabled={disabled} size={size}>\n            <SwitchFrame\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(inputProto, 'checked') 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": "AAGA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,cAAc;AAGpB,MAAM,kBAAkB,CAAC,QAAoB,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,IAAI;AAC7F,MAAM,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI;AAEnE,MAAM,gBAAgB,mBAAmB,WAAW;AACpD,MAAM,CAAC,uBAAuB;AACvB,MAAM,oBAAoB,cAAc;AAE/C,MAAM,CAAC,gBAAgB,oBAAoB,oBAIxC,WAAW;AAMd,MAAM,aAAa;AAEZ,MAAM,mBAAmB,OAAO,gBAAgB;AAAA,EACrD,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,cAAc;AAAA,EAEd,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAS;AAAA,QACnB,QAAQ,gBAAgB,GAAG;AAAA,QAC3B,OAAO,gBAAgB,GAAG;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAIM,MAAM,cAAc,iBAAiB,YAC1C,MAAM,WACJ,CAAC,OAAgD,iBAAiB;AAChE,QAAM,EAAE,kBAAkB,eAAe;AACzC,QAAM,EAAE,MAAM,UAAU,YAAY,iBAAiB,YAAY,aAAa;AAC9E,SACE,CAAC,iBACC,MAAM,MACN,YAAY,SAAS,OAAO,GAC5B,eAAe,WAAW,KAAK,YAC3B,YACJ,GACE,UACI,iBAAiB,eAAe,IAAI,CAAC,IAAI,iBAAiB,gBAAgB,IAAI,CAAC,IAC/E,GAEN,KAAK,cACP;AAEJ,CACF,CACF;AAEA,YAAY,cAAc;AAMnB,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB;AAAA,EAEjB,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,SAAS,KAAK,gBAAgB,GAAG,GAAG,KAAK,CAAC;AAChD,cAAM,QAAQ,KAAK,eAAe,GAAG,GAAG,KAAK,CAAC;AAC9C,eAAO;AAAA,UACL;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAcM,MAAM,SAAS,qBACpB,YAAY,YACV,MAAM,WACJ,CAAC,OAA2C,iBAAiB;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,OACJ;AAAA,MACD;AACJ,QAAM,CAAC,QAAQ,aAAa,MAAM,SAAmC,IAAI;AACzE,QAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAW,CAAC;AACnF,QAAM,UAAU,gBAAgB,MAAM;AACtC,QAAM,aAAa,kBAAkB;AACrC,QAAM,mCAAmC,MAAM,OAAO,KAAK;AAE3D,QAAM,gBAAgB,QAAS,SAAS,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAAI,OAAQ;AAClF,QAAM,CAAC,UAAU,OAAO,cAAc,qBAAqB;AAAA,IACzD,MAAM;AAAA,IACN,aAAa,kBAAkB;AAAA,IAC/B,UAAU;AAAA,EACZ,CAAC;AAED,MAAI,CAAC,OAAO;AAEV,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,MAAM;AAAI;AACf,aAAO,kBAAkB,MAAM,IAAI;AAAA,QACjC,OAAO,MAAM;AACX,qBAAW,CAAC,MAAM,CAAC,CAAC;AAAA,QACtB;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,IAAI,UAAU,CAAC;AAAA,EAC3B;AAEA,SACE,CAAC,eAAe,OAAO,eAAe,SAAS,SAAS,UAAU,UAAU,MAAM;AAAA,IAChF,CAAC,YACC,MAAM,MAEN,KAAK,SACL,cAAc,SACd,iBAAiB,YACjB,eAAe,UACf,YAAY,SAAS,OAAO,GAC5B,eAAe,WAAW,KAAK,QAC/B,UAAU,UACV,OAAO,UAAU,WAAW,MAC5B,aAEA,UAAU,WAAW,SAAY,GAEjC,OAAO,WACH,aACJ,KAAK,cACL,SAAS,CAAC,UAAU;AAxMlC;AAyMgB,kBAAM,YAAN,+BAAgB;AAChB,iBAAW,CAAC,gBAAgB,CAAC,WAAW;AACxC,UAAI,SAAS,eAAe;AAC1B,yCAAiC,UAAU,MAAM,qBAAqB;AAItE,YAAI,CAAC,iCAAiC;AAAS,gBAAM,gBAAgB;AAAA,MACvE;AAAA,IACF,GACF;AAAA,KACC,SAAS,iBACR,CAAC,YACC,SAAS,QACT,SAAS,CAAC,iCAAiC,SAC3C,MAAM,MACN,OAAO,OACP,SAAS,SACT,UAAU,UACV,UAAU,UAIV,OAAO,EAAE,WAAW,oBAAoB,GAC1C;AAAA,EAEJ,EA9CC;AAgDL,CACF,CACF,GACA;AAAA,EACE,OAAO;AACT,CACF;AAYA,MAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,SAAS,UAAU,SAAS,eAAe;AAC5D,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO,yBAAyB,YAAY,SAAS;AACxE,UAAM,aAAa,WAAW;AAC9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,iBAAW,KAAK,OAAO,OAAO;AAC9B,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,CAAC,MACC,KAAK,WACL,YACA,gBAAgB,aACZ,YACJ,UAAU,IACV,KAAK,KACL,OAAO;AAAA,IACL,GAAG,MAAM;AAAA,IAET,UAAU;AAAA,IACV,eAAe;AAAA,IACf,SAAS;AAAA,IACT,QAAQ;AAAA,EACV,GACF;AAEJ;AAEA,kBAAkB,SAAkB;AAClC,SAAO,UAAU,YAAY;AAC/B;",
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/switch",
-  "version": "1.0.1-beta.140",
+  "version": "1.0.1-beta.141",
   "sideEffects": [
     "*.css"
   ],
@@ -24,13 +24,13 @@
   },
   "dependencies": {
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/compose-refs": "^1.0.1-beta.140",
-    "@tamagui/core": "^1.0.1-beta.140",
-    "@tamagui/create-context": "^1.0.1-beta.140",
-    "@tamagui/focusable": "^1.0.1-beta.140",
-    "@tamagui/label": "^1.0.1-beta.140",
-    "@tamagui/stacks": "^1.0.1-beta.140",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.140"
+    "@tamagui/compose-refs": "^1.0.1-beta.141",
+    "@tamagui/core": "^1.0.1-beta.141",
+    "@tamagui/create-context": "^1.0.1-beta.141",
+    "@tamagui/focusable": "^1.0.1-beta.141",
+    "@tamagui/label": "^1.0.1-beta.141",
+    "@tamagui/stacks": "^1.0.1-beta.141",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.141"
   },
   "peerDependencies": {
     "react": "*",
@@ -38,7 +38,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.140",
+    "@tamagui/build": "^1.0.1-beta.141",
     "@types/react-native": "^0.69.2",
     "react": "*",
     "react-dom": "*",

package/dist/cjs/Switch.draggable-tmp.js

@@ -1,265 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Switch_draggable_tmp_exports = {};
-__export(Switch_draggable_tmp_exports, {
-  Switch: () => Switch,
-  SwitchFrame: () => SwitchFrame,
-  SwitchThumb: () => SwitchThumb,
-  SwitchThumbFrame: () => SwitchThumbFrame,
-  createSwitchScope: () => createSwitchScope
-});
-module.exports = __toCommonJS(Switch_draggable_tmp_exports);
-var import_react_use_previous = require("@radix-ui/react-use-previous");
-var import_compose_refs = require("@tamagui/compose-refs");
-var import_core = require("@tamagui/core");
-var import_create_context = require("@tamagui/create-context");
-var import_focusable = require("@tamagui/focusable");
-var import_label = require("@tamagui/label");
-var import_stacks = require("@tamagui/stacks");
-var import_use_controllable_state = require("@tamagui/use-controllable-state");
-var React = __toESM(require("react"));
-var import_react_native = require("react-native");
-const SWITCH_NAME = "Switch";
-const getSwitchHeight = (val) => Math.round((0, import_core.getVariableValue)((0, import_core.getSize)(val)) * 0.65);
-const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
-const scopeContexts = (0, import_create_context.createContextScope)(SWITCH_NAME);
-const [createSwitchContext] = scopeContexts;
-const createSwitchScope = scopeContexts[1];
-const [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
-const THUMB_NAME = "SwitchThumb";
-const SwitchThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
-  name: "SwitchThumb",
-  backgroundColor: "$background",
-  borderRadius: 1e3,
-  variants: {
-    size: {
-      "...size": (val) => ({
-        height: getSwitchHeight(val),
-        width: getSwitchHeight(val)
-      })
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
-const SwitchThumb = SwitchThumbFrame.extractable(React.forwardRef((props, forwardedRef) => {
-  const { __scopeSwitch, ...thumbProps } = props;
-  const { size, disabled, checked, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch);
-  const [position] = React.useState(new import_react_native.Animated.ValueXY(0));
-  const [thumbWidth, setThumbWidth] = React.useState(0);
-  const responder = React.useMemo(() => {
-    return import_react_native.PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onPanResponderMove: import_react_native.Animated.event([
-        null,
-        {
-          dx: position.x
-        }
-      ], {
-        useNativeDriver: false
-      })
-    });
-  }, []);
-  React.useEffect(() => {
-    position.addListener((val) => {
-      console.log("x", val);
-    });
-  }, []);
-  const maxMove = (0, import_core.getVariableValue)(getSwitchWidth(size)) - (0, import_core.getVariableValue)(getSwitchHeight(size));
-  const maxDrag = ((frameLayout == null ? void 0 : frameLayout.width) || 0) - thumbWidth;
-  return /* @__PURE__ */ React.createElement(import_react_native.Animated.View, {
-    style: [
-      {
-        transform: [{ translateX: position.x }]
-      }
-    ]
-  }, /* @__PURE__ */ React.createElement(SwitchThumbFrame, {
-    size,
-    "data-state": getState(checked),
-    "data-disabled": disabled ? "" : void 0,
-    ...responder.panHandlers,
-    ...thumbProps,
-    onLayout: ({ nativeEvent }) => {
-      console.log("thumb", nativeEvent.layout);
-      setThumbWidth(nativeEvent.layout.width);
-    },
-    x: checked ? maxMove : 0,
-    ref: forwardedRef
-  }));
-}));
-SwitchThumb.displayName = THUMB_NAME;
-const SwitchFrame = (0, import_core.styled)(import_stacks.XStack, {
-  name: "Switch",
-  tag: "button",
-  borderRadius: 1e3,
-  borderWidth: 2,
-  borderColor: "transparent",
-  backgroundColor: "$background",
-  focusStyle: {
-    borderColor: "$borderColorFocus"
-  },
-  variants: {
-    size: {
-      "...size": (val) => {
-        const height = (0, import_core.calc)(getSwitchHeight(val), "+", 4);
-        const width = (0, import_core.calc)(getSwitchWidth(val), "+", 4);
-        return {
-          height,
-          minHeight: height,
-          width
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
-const Switch = (0, import_core.withStaticProperties)(SwitchFrame.extractable(React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeSwitch,
-    labeledBy: ariaLabelledby,
-    name,
-    checked: checkedProp,
-    defaultChecked,
-    required,
-    disabled,
-    value = "on",
-    onCheckedChange,
-    size = "$4",
-    ...switchProps
-  } = props;
-  const [button, setButton] = React.useState(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => setButton(node));
-  const labelId = (0, import_label.useLabelContext)(button);
-  const labelledBy = ariaLabelledby || labelId;
-  const hasConsumerStoppedPropagationRef = React.useRef(false);
-  const [frameLayout, setFrameLayout] = React.useState();
-  const isFormControl = import_core.isWeb ? button ? Boolean(button.closest("form")) : true : false;
-  const [checked = false, setChecked] = (0, import_use_controllable_state.useControllableState)({
-    prop: checkedProp,
-    defaultProp: defaultChecked || false,
-    onChange: onCheckedChange
-  });
-  if (!import_core.isWeb) {
-    React.useEffect(() => {
-      if (!props.id)
-        return;
-      return (0, import_focusable.registerFocusable)(props.id, {
-        focus: () => {
-          setChecked((x) => !x);
-        }
-      });
-    }, [props.id, setChecked]);
-  }
-  return /* @__PURE__ */ React.createElement(SwitchProvider, {
-    scope: __scopeSwitch,
-    checked,
-    disabled,
-    size,
-    frameLayout
-  }, /* @__PURE__ */ React.createElement(SwitchFrame, {
-    size,
-    onLayout: ({ nativeEvent }) => {
-      console.log("?", nativeEvent.layout);
-      setFrameLayout(nativeEvent.layout);
-    },
-    role: "switch",
-    "aria-checked": checked,
-    "aria-labelledby": labelledBy,
-    "aria-required": required,
-    "data-state": getState(checked),
-    "data-disabled": disabled ? "" : void 0,
-    disabled,
-    theme: checked ? "active" : null,
-    themeShallow: true,
-    tabIndex: disabled ? void 0 : 0,
-    value,
-    ...switchProps,
-    ref: composedRefs,
-    onPress: (event) => {
-      var _a;
-      (_a = props.onPress) == null ? void 0 : _a.call(props, event);
-      setChecked((prevChecked) => !prevChecked);
-      if (import_core.isWeb && isFormControl) {
-        hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-        if (!hasConsumerStoppedPropagationRef.current)
-          event.stopPropagation();
-      }
-    }
-  }), import_core.isWeb && isFormControl && /* @__PURE__ */ React.createElement(BubbleInput, {
-    control: button,
-    bubbles: !hasConsumerStoppedPropagationRef.current,
-    name,
-    value,
-    checked,
-    required,
-    disabled,
-    style: { transform: "translateX(-100%)" }
-  }));
-})), {
-  Thumb: SwitchThumb
-});
-const BubbleInput = (props) => {
-  const { control, checked, bubbles = true, ...inputProps } = props;
-  const ref = React.useRef(null);
-  const prevChecked = (0, import_react_use_previous.usePrevious)(checked);
-  React.useEffect(() => {
-    const input = ref.current;
-    const inputProto = window.HTMLInputElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
-    const setChecked = descriptor.set;
-    if (prevChecked !== checked && setChecked) {
-      const event = new Event("click", { bubbles });
-      setChecked.call(input, checked);
-      input.dispatchEvent(event);
-    }
-  }, [prevChecked, checked, bubbles]);
-  return /* @__PURE__ */ React.createElement("input", {
-    type: "checkbox",
-    "aria-hidden": true,
-    defaultChecked: checked,
-    ...inputProps,
-    tabIndex: -1,
-    ref,
-    style: {
-      ...props.style,
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0,
-      margin: 0
-    }
-  });
-};
-function getState(checked) {
-  return checked ? "checked" : "unchecked";
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Switch,
-  SwitchFrame,
-  SwitchThumb,
-  SwitchThumbFrame,
-  createSwitchScope
-});
-//# sourceMappingURL=Switch.draggable-tmp.js.map

package/dist/cjs/Switch.draggable-tmp.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/Switch.draggable-tmp.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  calc,\n  getSize,\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 { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Animated, LayoutRectangle, PanResponder, View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => 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  frameLayout?: LayoutRectangle\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n  backgroundColor: '$background',\n  borderRadius: 1000,\n\n  variants: {\n    size: {\n      '...size': (val) => ({\n        height: getSwitchHeight(val),\n        width: getSwitchHeight(val),\n      }),\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const [position] = React.useState(new Animated.ValueXY(0))\n      const [thumbWidth, setThumbWidth] = React.useState(0)\n      const responder = React.useMemo(() => {\n        return PanResponder.create({\n          onStartShouldSetPanResponder: () => true,\n          onPanResponderMove: Animated.event(\n            [\n              null,\n              {\n                dx: position.x,\n              },\n            ],\n            {\n              useNativeDriver: false,\n            }\n          ),\n        })\n      }, [])\n\n      React.useEffect(() => {\n        position.addListener((val) => {\n          console.log('x', val)\n        })\n      }, [])\n\n      const maxMove =\n        getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n\n      const maxDrag = (frameLayout?.width || 0) - thumbWidth\n\n      return (\n        <Animated.View\n          style={[\n            {\n              transform: [{ translateX: position.x }],\n            },\n          ]}\n        >\n          <SwitchThumbFrame\n            size={size}\n            data-state={getState(checked)}\n            data-disabled={disabled ? '' : undefined}\n            {...responder.panHandlers}\n            {...thumbProps}\n            onLayout={({ nativeEvent }) => {\n              console.log('thumb', nativeEvent.layout)\n              setThumbWidth(nativeEvent.layout.width)\n            }}\n            x={checked ? maxMove : 0}\n            ref={forwardedRef}\n          />\n        </Animated.View>\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: 'Switch',\n  tag: 'button',\n  borderRadius: 1000,\n  borderWidth: 2,\n  borderColor: 'transparent',\n  backgroundColor: '$background',\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': (val) => {\n        const height = calc(getSwitchHeight(val), '+', 4)\n        const width = calc(getSwitchWidth(val), '+', 4)\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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 = '$4',\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        const [frameLayout, setFrameLayout] = React.useState<LayoutRectangle>()\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\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            frameLayout={frameLayout}\n          >\n            <SwitchFrame\n              size={size}\n              onLayout={({ nativeEvent }) => {\n                console.log('?', nativeEvent.layout)\n                setFrameLayout(nativeEvent.layout)\n              }}\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(inputProto, 'checked') 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.draggable-tmp.js

@@ -1,241 +0,0 @@
-import { usePrevious } from "@radix-ui/react-use-previous";
-import { useComposedRefs } from "@tamagui/compose-refs";
-import {
-  calc,
-  getSize,
-  getVariableValue,
-  isWeb,
-  styled,
-  withStaticProperties
-} from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
-import { registerFocusable } from "@tamagui/focusable";
-import { useLabelContext } from "@tamagui/label";
-import { ThemeableStack, XStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import * as React from "react";
-import { Animated, PanResponder } from "react-native";
-const SWITCH_NAME = "Switch";
-const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
-const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
-const scopeContexts = createContextScope(SWITCH_NAME);
-const [createSwitchContext] = scopeContexts;
-const createSwitchScope = scopeContexts[1];
-const [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
-const THUMB_NAME = "SwitchThumb";
-const SwitchThumbFrame = styled(ThemeableStack, {
-  name: "SwitchThumb",
-  backgroundColor: "$background",
-  borderRadius: 1e3,
-  variants: {
-    size: {
-      "...size": (val) => ({
-        height: getSwitchHeight(val),
-        width: getSwitchHeight(val)
-      })
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
-const SwitchThumb = SwitchThumbFrame.extractable(React.forwardRef((props, forwardedRef) => {
-  const { __scopeSwitch, ...thumbProps } = props;
-  const { size, disabled, checked, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch);
-  const [position] = React.useState(new Animated.ValueXY(0));
-  const [thumbWidth, setThumbWidth] = React.useState(0);
-  const responder = React.useMemo(() => {
-    return PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([
-        null,
-        {
-          dx: position.x
-        }
-      ], {
-        useNativeDriver: false
-      })
-    });
-  }, []);
-  React.useEffect(() => {
-    position.addListener((val) => {
-      console.log("x", val);
-    });
-  }, []);
-  const maxMove = getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size));
-  const maxDrag = ((frameLayout == null ? void 0 : frameLayout.width) || 0) - thumbWidth;
-  return /* @__PURE__ */ React.createElement(Animated.View, {
-    style: [
-      {
-        transform: [{ translateX: position.x }]
-      }
-    ]
-  }, /* @__PURE__ */ React.createElement(SwitchThumbFrame, {
-    size,
-    "data-state": getState(checked),
-    "data-disabled": disabled ? "" : void 0,
-    ...responder.panHandlers,
-    ...thumbProps,
-    onLayout: ({ nativeEvent }) => {
-      console.log("thumb", nativeEvent.layout);
-      setThumbWidth(nativeEvent.layout.width);
-    },
-    x: checked ? maxMove : 0,
-    ref: forwardedRef
-  }));
-}));
-SwitchThumb.displayName = THUMB_NAME;
-const SwitchFrame = styled(XStack, {
-  name: "Switch",
-  tag: "button",
-  borderRadius: 1e3,
-  borderWidth: 2,
-  borderColor: "transparent",
-  backgroundColor: "$background",
-  focusStyle: {
-    borderColor: "$borderColorFocus"
-  },
-  variants: {
-    size: {
-      "...size": (val) => {
-        const height = calc(getSwitchHeight(val), "+", 4);
-        const width = calc(getSwitchWidth(val), "+", 4);
-        return {
-          height,
-          minHeight: height,
-          width
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
-const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeSwitch,
-    labeledBy: ariaLabelledby,
-    name,
-    checked: checkedProp,
-    defaultChecked,
-    required,
-    disabled,
-    value = "on",
-    onCheckedChange,
-    size = "$4",
-    ...switchProps
-  } = props;
-  const [button, setButton] = React.useState(null);
-  const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-  const labelId = useLabelContext(button);
-  const labelledBy = ariaLabelledby || labelId;
-  const hasConsumerStoppedPropagationRef = React.useRef(false);
-  const [frameLayout, setFrameLayout] = React.useState();
-  const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
-  const [checked = false, setChecked] = useControllableState({
-    prop: checkedProp,
-    defaultProp: defaultChecked || false,
-    onChange: onCheckedChange
-  });
-  if (!isWeb) {
-    React.useEffect(() => {
-      if (!props.id)
-        return;
-      return registerFocusable(props.id, {
-        focus: () => {
-          setChecked((x) => !x);
-        }
-      });
-    }, [props.id, setChecked]);
-  }
-  return /* @__PURE__ */ React.createElement(SwitchProvider, {
-    scope: __scopeSwitch,
-    checked,
-    disabled,
-    size,
-    frameLayout
-  }, /* @__PURE__ */ React.createElement(SwitchFrame, {
-    size,
-    onLayout: ({ nativeEvent }) => {
-      console.log("?", nativeEvent.layout);
-      setFrameLayout(nativeEvent.layout);
-    },
-    role: "switch",
-    "aria-checked": checked,
-    "aria-labelledby": labelledBy,
-    "aria-required": required,
-    "data-state": getState(checked),
-    "data-disabled": disabled ? "" : void 0,
-    disabled,
-    theme: checked ? "active" : null,
-    themeShallow: true,
-    tabIndex: disabled ? void 0 : 0,
-    value,
-    ...switchProps,
-    ref: composedRefs,
-    onPress: (event) => {
-      var _a;
-      (_a = props.onPress) == null ? void 0 : _a.call(props, event);
-      setChecked((prevChecked) => !prevChecked);
-      if (isWeb && isFormControl) {
-        hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-        if (!hasConsumerStoppedPropagationRef.current)
-          event.stopPropagation();
-      }
-    }
-  }), isWeb && isFormControl && /* @__PURE__ */ React.createElement(BubbleInput, {
-    control: button,
-    bubbles: !hasConsumerStoppedPropagationRef.current,
-    name,
-    value,
-    checked,
-    required,
-    disabled,
-    style: { transform: "translateX(-100%)" }
-  }));
-})), {
-  Thumb: SwitchThumb
-});
-const BubbleInput = (props) => {
-  const { control, checked, bubbles = true, ...inputProps } = props;
-  const ref = React.useRef(null);
-  const prevChecked = usePrevious(checked);
-  React.useEffect(() => {
-    const input = ref.current;
-    const inputProto = window.HTMLInputElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
-    const setChecked = descriptor.set;
-    if (prevChecked !== checked && setChecked) {
-      const event = new Event("click", { bubbles });
-      setChecked.call(input, checked);
-      input.dispatchEvent(event);
-    }
-  }, [prevChecked, checked, bubbles]);
-  return /* @__PURE__ */ React.createElement("input", {
-    type: "checkbox",
-    "aria-hidden": true,
-    defaultChecked: checked,
-    ...inputProps,
-    tabIndex: -1,
-    ref,
-    style: {
-      ...props.style,
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0,
-      margin: 0
-    }
-  });
-};
-function getState(checked) {
-  return checked ? "checked" : "unchecked";
-}
-export {
-  Switch,
-  SwitchFrame,
-  SwitchThumb,
-  SwitchThumbFrame,
-  createSwitchScope
-};
-//# sourceMappingURL=Switch.draggable-tmp.js.map

package/dist/esm/Switch.draggable-tmp.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/Switch.draggable-tmp.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  calc,\n  getSize,\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 { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Animated, LayoutRectangle, PanResponder, View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => 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  frameLayout?: LayoutRectangle\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n  backgroundColor: '$background',\n  borderRadius: 1000,\n\n  variants: {\n    size: {\n      '...size': (val) => ({\n        height: getSwitchHeight(val),\n        width: getSwitchHeight(val),\n      }),\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const [position] = React.useState(new Animated.ValueXY(0))\n      const [thumbWidth, setThumbWidth] = React.useState(0)\n      const responder = React.useMemo(() => {\n        return PanResponder.create({\n          onStartShouldSetPanResponder: () => true,\n          onPanResponderMove: Animated.event(\n            [\n              null,\n              {\n                dx: position.x,\n              },\n            ],\n            {\n              useNativeDriver: false,\n            }\n          ),\n        })\n      }, [])\n\n      React.useEffect(() => {\n        position.addListener((val) => {\n          console.log('x', val)\n        })\n      }, [])\n\n      const maxMove =\n        getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n\n      const maxDrag = (frameLayout?.width || 0) - thumbWidth\n\n      return (\n        <Animated.View\n          style={[\n            {\n              transform: [{ translateX: position.x }],\n            },\n          ]}\n        >\n          <SwitchThumbFrame\n            size={size}\n            data-state={getState(checked)}\n            data-disabled={disabled ? '' : undefined}\n            {...responder.panHandlers}\n            {...thumbProps}\n            onLayout={({ nativeEvent }) => {\n              console.log('thumb', nativeEvent.layout)\n              setThumbWidth(nativeEvent.layout.width)\n            }}\n            x={checked ? maxMove : 0}\n            ref={forwardedRef}\n          />\n        </Animated.View>\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: 'Switch',\n  tag: 'button',\n  borderRadius: 1000,\n  borderWidth: 2,\n  borderColor: 'transparent',\n  backgroundColor: '$background',\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': (val) => {\n        const height = calc(getSwitchHeight(val), '+', 4)\n        const width = calc(getSwitchWidth(val), '+', 4)\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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 = '$4',\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        const [frameLayout, setFrameLayout] = React.useState<LayoutRectangle>()\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\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            frameLayout={frameLayout}\n          >\n            <SwitchFrame\n              size={size}\n              onLayout={({ nativeEvent }) => {\n                console.log('?', nativeEvent.layout)\n                setFrameLayout(nativeEvent.layout)\n              }}\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(inputProto, 'checked') 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.draggable-tmp.js

@@ -1,193 +0,0 @@
-import { usePrevious } from "@radix-ui/react-use-previous";
-import { useComposedRefs } from "@tamagui/compose-refs";
-import {
-  calc,
-  getSize,
-  getVariableValue,
-  isWeb,
-  styled,
-  withStaticProperties
-} from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
-import { registerFocusable } from "@tamagui/focusable";
-import { useLabelContext } from "@tamagui/label";
-import { ThemeableStack, XStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import * as React from "react";
-import { Animated, PanResponder } from "react-native";
-const SWITCH_NAME = "Switch";
-const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
-const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
-const scopeContexts = createContextScope(SWITCH_NAME);
-const [createSwitchContext] = scopeContexts;
-const createSwitchScope = scopeContexts[1];
-const [SwitchProvider, useSwitchContext] = createSwitchContext(SWITCH_NAME);
-const THUMB_NAME = "SwitchThumb";
-const SwitchThumbFrame = styled(ThemeableStack, {
-  name: "SwitchThumb",
-  backgroundColor: "$background",
-  borderRadius: 1e3,
-  variants: {
-    size: {
-      "...size": (val) => ({
-        height: getSwitchHeight(val),
-        width: getSwitchHeight(val)
-      })
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
-const SwitchThumb = SwitchThumbFrame.extractable(React.forwardRef((props, forwardedRef) => {
-  const { __scopeSwitch, ...thumbProps } = props;
-  const { size, disabled, checked, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch);
-  const [position] = React.useState(new Animated.ValueXY(0));
-  const [thumbWidth, setThumbWidth] = React.useState(0);
-  const responder = React.useMemo(() => {
-    return PanResponder.create({
-      onStartShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([
-        null,
-        {
-          dx: position.x
-        }
-      ], {
-        useNativeDriver: false
-      })
-    });
-  }, []);
-  React.useEffect(() => {
-    position.addListener((val) => {
-      console.log("x", val);
-    });
-  }, []);
-  const maxMove = getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size));
-  const maxDrag = ((frameLayout == null ? void 0 : frameLayout.width) || 0) - thumbWidth;
-  return <Animated.View style={[
-    {
-      transform: [{ translateX: position.x }]
-    }
-  ]}><SwitchThumbFrame size={size} data-state={getState(checked)} data-disabled={disabled ? "" : void 0} {...responder.panHandlers} {...thumbProps} onLayout={({ nativeEvent }) => {
-    console.log("thumb", nativeEvent.layout);
-    setThumbWidth(nativeEvent.layout.width);
-  }} x={checked ? maxMove : 0} ref={forwardedRef} /></Animated.View>;
-}));
-SwitchThumb.displayName = THUMB_NAME;
-const SwitchFrame = styled(XStack, {
-  name: "Switch",
-  tag: "button",
-  borderRadius: 1e3,
-  borderWidth: 2,
-  borderColor: "transparent",
-  backgroundColor: "$background",
-  focusStyle: {
-    borderColor: "$borderColorFocus"
-  },
-  variants: {
-    size: {
-      "...size": (val) => {
-        const height = calc(getSwitchHeight(val), "+", 4);
-        const width = calc(getSwitchWidth(val), "+", 4);
-        return {
-          height,
-          minHeight: height,
-          width
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    size: "$4"
-  }
-});
-const Switch = withStaticProperties(SwitchFrame.extractable(React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeSwitch,
-    labeledBy: ariaLabelledby,
-    name,
-    checked: checkedProp,
-    defaultChecked,
-    required,
-    disabled,
-    value = "on",
-    onCheckedChange,
-    size = "$4",
-    ...switchProps
-  } = props;
-  const [button, setButton] = React.useState(null);
-  const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-  const labelId = useLabelContext(button);
-  const labelledBy = ariaLabelledby || labelId;
-  const hasConsumerStoppedPropagationRef = React.useRef(false);
-  const [frameLayout, setFrameLayout] = React.useState();
-  const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
-  const [checked = false, setChecked] = useControllableState({
-    prop: checkedProp,
-    defaultProp: defaultChecked || false,
-    onChange: onCheckedChange
-  });
-  if (!isWeb) {
-    React.useEffect(() => {
-      if (!props.id)
-        return;
-      return registerFocusable(props.id, {
-        focus: () => {
-          setChecked((x) => !x);
-        }
-      });
-    }, [props.id, setChecked]);
-  }
-  return <SwitchProvider scope={__scopeSwitch} checked={checked} disabled={disabled} size={size} frameLayout={frameLayout}>
-    <SwitchFrame size={size} onLayout={({ nativeEvent }) => {
-      console.log("?", nativeEvent.layout);
-      setFrameLayout(nativeEvent.layout);
-    }} role="switch" aria-checked={checked} aria-labelledby={labelledBy} aria-required={required} data-state={getState(checked)} data-disabled={disabled ? "" : void 0} disabled={disabled} theme={checked ? "active" : null} themeShallow tabIndex={disabled ? void 0 : 0} value={value} {...switchProps} ref={composedRefs} onPress={(event) => {
-      var _a;
-      (_a = props.onPress) == null ? void 0 : _a.call(props, event);
-      setChecked((prevChecked) => !prevChecked);
-      if (isWeb && isFormControl) {
-        hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-        if (!hasConsumerStoppedPropagationRef.current)
-          event.stopPropagation();
-      }
-    }} />
-    {isWeb && isFormControl && <BubbleInput control={button} bubbles={!hasConsumerStoppedPropagationRef.current} name={name} value={value} checked={checked} required={required} disabled={disabled} style={{ transform: "translateX(-100%)" }} />}
-  </SwitchProvider>;
-})), {
-  Thumb: SwitchThumb
-});
-const BubbleInput = (props) => {
-  const { control, checked, bubbles = true, ...inputProps } = props;
-  const ref = React.useRef(null);
-  const prevChecked = usePrevious(checked);
-  React.useEffect(() => {
-    const input = ref.current;
-    const inputProto = window.HTMLInputElement.prototype;
-    const descriptor = Object.getOwnPropertyDescriptor(inputProto, "checked");
-    const setChecked = descriptor.set;
-    if (prevChecked !== checked && setChecked) {
-      const event = new Event("click", { bubbles });
-      setChecked.call(input, checked);
-      input.dispatchEvent(event);
-    }
-  }, [prevChecked, checked, bubbles]);
-  return <input type="checkbox" aria-hidden defaultChecked={checked} {...inputProps} tabIndex={-1} ref={ref} style={{
-    ...props.style,
-    position: "absolute",
-    pointerEvents: "none",
-    opacity: 0,
-    margin: 0
-  }} />;
-};
-function getState(checked) {
-  return checked ? "checked" : "unchecked";
-}
-export {
-  Switch,
-  SwitchFrame,
-  SwitchThumb,
-  SwitchThumbFrame,
-  createSwitchScope
-};
-//# sourceMappingURL=Switch.draggable-tmp.js.map

package/dist/jsx/Switch.draggable-tmp.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/Switch.draggable-tmp.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  calc,\n  getSize,\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 { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack, XStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Animated, LayoutRectangle, PanResponder, View } from 'react-native'\n\nconst SWITCH_NAME = 'Switch'\n\n// TODO make customizable\nconst getSwitchHeight = (val: SizeTokens) => 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  frameLayout?: LayoutRectangle\n}>(SWITCH_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * SwitchThumb\n * -----------------------------------------------------------------------------------------------*/\n\nconst THUMB_NAME = 'SwitchThumb'\n\nexport const SwitchThumbFrame = styled(ThemeableStack, {\n  name: 'SwitchThumb',\n  backgroundColor: '$background',\n  borderRadius: 1000,\n\n  variants: {\n    size: {\n      '...size': (val) => ({\n        height: getSwitchHeight(val),\n        width: getSwitchHeight(val),\n      }),\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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, frameLayout } = useSwitchContext(THUMB_NAME, __scopeSwitch)\n      const [position] = React.useState(new Animated.ValueXY(0))\n      const [thumbWidth, setThumbWidth] = React.useState(0)\n      const responder = React.useMemo(() => {\n        return PanResponder.create({\n          onStartShouldSetPanResponder: () => true,\n          onPanResponderMove: Animated.event(\n            [\n              null,\n              {\n                dx: position.x,\n              },\n            ],\n            {\n              useNativeDriver: false,\n            }\n          ),\n        })\n      }, [])\n\n      React.useEffect(() => {\n        position.addListener((val) => {\n          console.log('x', val)\n        })\n      }, [])\n\n      const maxMove =\n        getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size))\n\n      const maxDrag = (frameLayout?.width || 0) - thumbWidth\n\n      return (\n        <Animated.View\n          style={[\n            {\n              transform: [{ translateX: position.x }],\n            },\n          ]}\n        >\n          <SwitchThumbFrame\n            size={size}\n            data-state={getState(checked)}\n            data-disabled={disabled ? '' : undefined}\n            {...responder.panHandlers}\n            {...thumbProps}\n            onLayout={({ nativeEvent }) => {\n              console.log('thumb', nativeEvent.layout)\n              setThumbWidth(nativeEvent.layout.width)\n            }}\n            x={checked ? maxMove : 0}\n            ref={forwardedRef}\n          />\n        </Animated.View>\n      )\n    }\n  )\n)\n\nSwitchThumb.displayName = THUMB_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Switch\n * -----------------------------------------------------------------------------------------------*/\n\nexport const SwitchFrame = styled(XStack, {\n  name: 'Switch',\n  tag: 'button',\n  borderRadius: 1000,\n  borderWidth: 2,\n  borderColor: 'transparent',\n  backgroundColor: '$background',\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\n    size: {\n      '...size': (val) => {\n        const height = calc(getSwitchHeight(val), '+', 4)\n        const width = calc(getSwitchWidth(val), '+', 4)\n        return {\n          height,\n          minHeight: height,\n          width,\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\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 = '$4',\n          ...switchProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        const [frameLayout, setFrameLayout] = React.useState<LayoutRectangle>()\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked || false,\n          onChange: onCheckedChange,\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            frameLayout={frameLayout}\n          >\n            <SwitchFrame\n              size={size}\n              onLayout={({ nativeEvent }) => {\n                console.log('?', nativeEvent.layout)\n                setFrameLayout(nativeEvent.layout)\n              }}\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(inputProto, 'checked') 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": []
-}