@tamagui/switch 1.14.0 → 1.14.2

package/dist/esm/Switch.js

@@ -1,2 +1,263 @@
-import{jsx as w,jsxs as ee}from"react/jsx-runtime";import{usePrevious as q}from"@radix-ui/react-use-previous";import{useComposedRefs as G}from"@tamagui/compose-refs";import{getVariableValue as y,isWeb as m,styled as x,withStaticProperties as N}from"@tamagui/core";import{createContextScope as O}from"@tamagui/create-context";import{registerFocusable as A}from"@tamagui/focusable";import{getSize as D}from"@tamagui/get-size";import{useLabelContext as X}from"@tamagui/label";import{ThemeableStack as U,XStack as j}from"@tamagui/stacks";import{useControllableState as J}from"@tamagui/use-controllable-state";import*as i from"react";const g="Switch",S=e=>Math.round(y(D(e))*.65),v=e=>S(e)*2,B=O(g),[K]=B,fe=B[1],[Q,Y]=K(g),E="SwitchThumb",R=x(U,{name:"SwitchThumb",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",borderRadius:1e3}},size:{"...size":e=>{const o=S(e);return{height:o,width:o}}}},defaultVariants:{unstyled:!1}}),I=R.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,size:a,...u}=e,{size:l,disabled:d,checked:s,unstyled:n}=Y(E,t),r=a??l;return w(R,{unstyled:n,size:r,theme:s?"active":null,"data-state":M(s),"data-disabled":d?"":void 0,...u,x:s?y(v(r))-y(S(r)):0,ref:o})}));I.displayName=E;const H=x(j,{name:g,tag:"button",variants:{unstyled:{false:{size:"$true",borderRadius:1e3,borderWidth:2,borderColor:"transparent",backgroundColor:"$background",focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":e=>{const o=S(e)+4,t=v(e)+4;return{height:o,minHeight:o,width:t}}}},defaultVariants:{unstyled:!1}}),me=N(H.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,labeledBy:a,name:u,checked:l,defaultChecked:d,required:s,disabled:n,value:r="on",onCheckedChange:p,size:b="$true",unstyled:C=!1,...F}=e,[f,L]=i.useState(null),V=G(o,c=>L(c)),_=X(f),$=a||_,k=i.useRef(!1),z=m?f?Boolean(f.closest("form")):!0:!1,[h=!1,P]=J({prop:l,defaultProp:d||!1,onChange:p,transition:!0});return m||i.useEffect(()=>{if(e.id)return A(e.id,{focus:()=>{P(c=>!c)}})},[e.id,P]),ee(Q,{scope:t,checked:h,disabled:n,size:b,unstyled:C,children:[w(H,{unstyled:C,size:b,role:"switch","aria-checked":h,"aria-labelledby":$,"aria-required":s,"data-state":M(h),"data-disabled":n?"":void 0,disabled:n,theme:h?"active":null,themeShallow:!0,tabIndex:n?void 0:0,value:r,...F,ref:V,onPress:c=>{var T;(T=e.onPress)==null||T.call(e,c),P(W=>!W),m&&z&&(k.current=c.isPropagationStopped(),k.current||c.stopPropagation())}}),m&&z&&w(Z,{control:f,bubbles:!k.current,name:u,value:r,checked:h,required:s,disabled:n,style:{transform:"translateX(-100%)"}})]})})),{Thumb:I}),Z=e=>{const{control:o,checked:t,bubbles:a=!0,...u}=e,l=i.useRef(null),d=q(t);return i.useEffect(()=>{const s=l.current,n=window.HTMLInputElement.prototype,p=Object.getOwnPropertyDescriptor(n,"checked").set;if(d!==t&&p){const b=new Event("click",{bubbles:a});p.call(s,t),s.dispatchEvent(b)}},[d,t,a]),w("input",{type:"checkbox","aria-hidden":!0,defaultChecked:t,...u,tabIndex:-1,ref:l,style:{...e.style,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})};function M(e){return e?"checked":"unchecked"}export{me as Switch,H as SwitchFrame,I as SwitchThumb,R as SwitchThumbFrame,fe as createSwitchScope};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePrevious } from "@radix-ui/react-use-previous";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getVariableValue,
+  isWeb,
+  styled,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { registerFocusable } from "@tamagui/focusable";
+import { getSize } from "@tamagui/get-size";
+import { useLabelContext } from "@tamagui/label";
+import { ThemeableStack, XStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+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",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        backgroundColor: "$background",
+        borderRadius: 1e3
+      }
+    },
+    size: {
+      "...size": (val) => {
+        const size = getSwitchHeight(val);
+        return {
+          height: size,
+          width: size
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const SwitchThumb = SwitchThumbFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      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),
+          "data-disabled": disabled ? "" : void 0,
+          ...thumbProps,
+          x: checked ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size)) : 0,
+          ref: forwardedRef
+        }
+      );
+    }
+  )
+);
+SwitchThumb.displayName = THUMB_NAME;
+const SwitchFrame = styled(XStack, {
+  name: SWITCH_NAME,
+  tag: "button",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        borderRadius: 1e3,
+        borderWidth: 2,
+        borderColor: "transparent",
+        backgroundColor: "$background",
+        focusStyle: {
+          borderColor: "$borderColorFocus"
+        }
+      }
+    },
+    size: {
+      "...size": (val) => {
+        const height = getSwitchHeight(val) + 4;
+        const width = getSwitchWidth(val) + 4;
+        return {
+          height,
+          minHeight: height,
+          width
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const Switch = withStaticProperties(
+  SwitchFrame.extractable(
+    React.forwardRef(
+      (props, forwardedRef) => {
+        const {
+          __scopeSwitch,
+          labeledBy: ariaLabelledby,
+          name,
+          checked: checkedProp,
+          defaultChecked,
+          required,
+          disabled,
+          value = "on",
+          onCheckedChange,
+          size = "$true",
+          unstyled = false,
+          ...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 isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
+        const [checked = false, setChecked] = useControllableState({
+          prop: checkedProp,
+          defaultProp: defaultChecked || false,
+          onChange: onCheckedChange,
+          transition: true
+        });
+        if (!isWeb) {
+          React.useEffect(() => {
+            if (!props.id)
+              return;
+            return registerFocusable(props.id, {
+              focus: () => {
+                setChecked((x) => !x);
+              }
+            });
+          }, [props.id, setChecked]);
+        }
+        return /* @__PURE__ */ jsxs(
+          SwitchProvider,
+          {
+            scope: __scopeSwitch,
+            checked,
+            disabled,
+            size,
+            unstyled,
+            children: [
+              /* @__PURE__ */ jsx(
+                SwitchFrame,
+                {
+                  unstyled,
+                  size,
+                  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__ */ jsx(
+                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__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      "aria-hidden": true,
+      defaultChecked: checked,
+      ...inputProps,
+      tabIndex: -1,
+      ref,
+      style: {
+        ...props.style,
+        // ...controlSize,
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0,
+        margin: 0
+      }
+    }
+  );
+};
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+export {
+  Switch,
+  SwitchFrame,
+  SwitchThumb,
+  SwitchThumbFrame,
+  createSwitchScope
+};
 //# sourceMappingURL=Switch.js.map

package/dist/esm/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  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          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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",
-  "names": ["jsx", "jsxs", "usePrevious", "useComposedRefs", "getVariableValue", "isWeb", "styled", "withStaticProperties", "createContextScope", "registerFocusable", "getSize", "useLabelContext", "ThemeableStack", "XStack", "useControllableState", "React", "SWITCH_NAME", "getSwitchHeight", "val", "getSwitchWidth", "scopeContexts", "createSwitchContext", "createSwitchScope", "SwitchProvider", "useSwitchContext", "THUMB_NAME", "SwitchThumbFrame", "size", "SwitchThumb", "props", "forwardedRef", "__scopeSwitch", "sizeProp", "thumbProps", "sizeContext", "disabled", "checked", "unstyled", "getState", "SwitchFrame", "height", "width", "Switch", "ariaLabelledby", "name", "checkedProp", "defaultChecked", "required", "value", "onCheckedChange", "switchProps", "button", "setButton", "composedRefs", "node", "labelId", "labelledBy", "hasConsumerStoppedPropagationRef", "isFormControl", "setChecked", "x", "event", "_a", "prevChecked", "BubbleInput", "control", "bubbles", "inputProps", "ref", "input", "inputProto"]
+  "mappings": "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",
+  "names": []
 }

package/dist/esm/Switch.mjs

@@ -1,2 +1,263 @@
-import{jsx as w,jsxs as ee}from"react/jsx-runtime";import{usePrevious as q}from"@radix-ui/react-use-previous";import{useComposedRefs as G}from"@tamagui/compose-refs";import{getVariableValue as y,isWeb as m,styled as x,withStaticProperties as N}from"@tamagui/core";import{createContextScope as O}from"@tamagui/create-context";import{registerFocusable as A}from"@tamagui/focusable";import{getSize as D}from"@tamagui/get-size";import{useLabelContext as X}from"@tamagui/label";import{ThemeableStack as U,XStack as j}from"@tamagui/stacks";import{useControllableState as J}from"@tamagui/use-controllable-state";import*as i from"react";const g="Switch",S=e=>Math.round(y(D(e))*.65),v=e=>S(e)*2,B=O(g),[K]=B,fe=B[1],[Q,Y]=K(g),E="SwitchThumb",R=x(U,{name:"SwitchThumb",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",borderRadius:1e3}},size:{"...size":e=>{const o=S(e);return{height:o,width:o}}}},defaultVariants:{unstyled:!1}}),I=R.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,size:a,...u}=e,{size:l,disabled:d,checked:s,unstyled:n}=Y(E,t),r=a??l;return w(R,{unstyled:n,size:r,theme:s?"active":null,"data-state":M(s),"data-disabled":d?"":void 0,...u,x:s?y(v(r))-y(S(r)):0,ref:o})}));I.displayName=E;const H=x(j,{name:g,tag:"button",variants:{unstyled:{false:{size:"$true",borderRadius:1e3,borderWidth:2,borderColor:"transparent",backgroundColor:"$background",focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":e=>{const o=S(e)+4,t=v(e)+4;return{height:o,minHeight:o,width:t}}}},defaultVariants:{unstyled:!1}}),me=N(H.extractable(i.forwardRef((e,o)=>{const{__scopeSwitch:t,labeledBy:a,name:u,checked:l,defaultChecked:d,required:s,disabled:n,value:r="on",onCheckedChange:p,size:b="$true",unstyled:C=!1,...F}=e,[f,L]=i.useState(null),V=G(o,c=>L(c)),_=X(f),$=a||_,k=i.useRef(!1),z=m?f?Boolean(f.closest("form")):!0:!1,[h=!1,P]=J({prop:l,defaultProp:d||!1,onChange:p,transition:!0});return m||i.useEffect(()=>{if(e.id)return A(e.id,{focus:()=>{P(c=>!c)}})},[e.id,P]),ee(Q,{scope:t,checked:h,disabled:n,size:b,unstyled:C,children:[w(H,{unstyled:C,size:b,role:"switch","aria-checked":h,"aria-labelledby":$,"aria-required":s,"data-state":M(h),"data-disabled":n?"":void 0,disabled:n,theme:h?"active":null,themeShallow:!0,tabIndex:n?void 0:0,value:r,...F,ref:V,onPress:c=>{var T;(T=e.onPress)==null||T.call(e,c),P(W=>!W),m&&z&&(k.current=c.isPropagationStopped(),k.current||c.stopPropagation())}}),m&&z&&w(Z,{control:f,bubbles:!k.current,name:u,value:r,checked:h,required:s,disabled:n,style:{transform:"translateX(-100%)"}})]})})),{Thumb:I}),Z=e=>{const{control:o,checked:t,bubbles:a=!0,...u}=e,l=i.useRef(null),d=q(t);return i.useEffect(()=>{const s=l.current,n=window.HTMLInputElement.prototype,p=Object.getOwnPropertyDescriptor(n,"checked").set;if(d!==t&&p){const b=new Event("click",{bubbles:a});p.call(s,t),s.dispatchEvent(b)}},[d,t,a]),w("input",{type:"checkbox","aria-hidden":!0,defaultChecked:t,...u,tabIndex:-1,ref:l,style:{...e.style,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})};function M(e){return e?"checked":"unchecked"}export{me as Switch,H as SwitchFrame,I as SwitchThumb,R as SwitchThumbFrame,fe as createSwitchScope};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePrevious } from "@radix-ui/react-use-previous";
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getVariableValue,
+  isWeb,
+  styled,
+  withStaticProperties
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import { registerFocusable } from "@tamagui/focusable";
+import { getSize } from "@tamagui/get-size";
+import { useLabelContext } from "@tamagui/label";
+import { ThemeableStack, XStack } from "@tamagui/stacks";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import * as React from "react";
+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",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        backgroundColor: "$background",
+        borderRadius: 1e3
+      }
+    },
+    size: {
+      "...size": (val) => {
+        const size = getSwitchHeight(val);
+        return {
+          height: size,
+          width: size
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const SwitchThumb = SwitchThumbFrame.extractable(
+  React.forwardRef(
+    (props, forwardedRef) => {
+      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),
+          "data-disabled": disabled ? "" : void 0,
+          ...thumbProps,
+          x: checked ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size)) : 0,
+          ref: forwardedRef
+        }
+      );
+    }
+  )
+);
+SwitchThumb.displayName = THUMB_NAME;
+const SwitchFrame = styled(XStack, {
+  name: SWITCH_NAME,
+  tag: "button",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        borderRadius: 1e3,
+        borderWidth: 2,
+        borderColor: "transparent",
+        backgroundColor: "$background",
+        focusStyle: {
+          borderColor: "$borderColorFocus"
+        }
+      }
+    },
+    size: {
+      "...size": (val) => {
+        const height = getSwitchHeight(val) + 4;
+        const width = getSwitchWidth(val) + 4;
+        return {
+          height,
+          minHeight: height,
+          width
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const Switch = withStaticProperties(
+  SwitchFrame.extractable(
+    React.forwardRef(
+      (props, forwardedRef) => {
+        const {
+          __scopeSwitch,
+          labeledBy: ariaLabelledby,
+          name,
+          checked: checkedProp,
+          defaultChecked,
+          required,
+          disabled,
+          value = "on",
+          onCheckedChange,
+          size = "$true",
+          unstyled = false,
+          ...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 isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
+        const [checked = false, setChecked] = useControllableState({
+          prop: checkedProp,
+          defaultProp: defaultChecked || false,
+          onChange: onCheckedChange,
+          transition: true
+        });
+        if (!isWeb) {
+          React.useEffect(() => {
+            if (!props.id)
+              return;
+            return registerFocusable(props.id, {
+              focus: () => {
+                setChecked((x) => !x);
+              }
+            });
+          }, [props.id, setChecked]);
+        }
+        return /* @__PURE__ */ jsxs(
+          SwitchProvider,
+          {
+            scope: __scopeSwitch,
+            checked,
+            disabled,
+            size,
+            unstyled,
+            children: [
+              /* @__PURE__ */ jsx(
+                SwitchFrame,
+                {
+                  unstyled,
+                  size,
+                  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__ */ jsx(
+                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__ */ jsx(
+    "input",
+    {
+      type: "checkbox",
+      "aria-hidden": true,
+      defaultChecked: checked,
+      ...inputProps,
+      tabIndex: -1,
+      ref,
+      style: {
+        ...props.style,
+        // ...controlSize,
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0,
+        margin: 0
+      }
+    }
+  );
+};
+function getState(checked) {
+  return checked ? "checked" : "unchecked";
+}
+export {
+  Switch,
+  SwitchFrame,
+  SwitchThumb,
+  SwitchThumbFrame,
+  createSwitchScope
+};
 //# sourceMappingURL=Switch.mjs.map