@tamagui/switch 1.57.8 → 1.58.0

package/dist/jsx/Switch.js

@@ -1,32 +1,10 @@
-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 { getVariableValue, styled } from "@tamagui/core";
 import { getSize } from "@tamagui/get-token";
-import { useLabelContext } from "@tamagui/label";
 import { ThemeableStack, XStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import { usePrevious } from "@tamagui/use-previous";
-import * as React from "react";
-import {
-  Switch as NativeSwitch,
-  Platform
-} 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, {
+import { SwitchContext, createSwitch } from "./createSwitch";
+const SwitchThumb = styled(ThemeableStack, {
   name: "SwitchThumb",
+  context: SwitchContext,
   variants: {
     unstyled: {
       false: {
@@ -49,32 +27,12 @@ const SwitchThumbFrame = styled(ThemeableStack, {
     unstyled: false
   }
 });
-const SwitchThumb = SwitchThumbFrame.extractable(
-  React.forwardRef(
-    function SwitchThumb2(props, forwardedRef) {
-      const { __scopeSwitch, size: sizeProp, ...thumbProps } = props;
-      const {
-        size: sizeContext,
-        disabled,
-        checked,
-        unstyled
-      } = useSwitchContext(THUMB_NAME, __scopeSwitch);
-      const size = sizeProp ?? sizeContext;
-      return <SwitchThumbFrame
-        unstyled={unstyled}
-        size={size}
-        data-state={getState(checked)}
-        data-disabled={disabled ? "" : void 0}
-        x={checked ? getVariableValue(getSwitchWidth(size)) - getVariableValue(getSwitchHeight(size)) : 0}
-        {...thumbProps}
-        ref={forwardedRef}
-      />;
-    }
-  )
-);
+const getSwitchHeight = (val) => Math.round(getVariableValue(getSize(val)) * 0.65);
+const getSwitchWidth = (val) => getSwitchHeight(val) * 2;
 const SwitchFrame = styled(XStack, {
-  name: SWITCH_NAME,
+  name: "Switch",
   tag: "button",
+  context: SwitchContext,
   variants: {
     unstyled: {
       false: {
@@ -91,6 +49,12 @@ const SwitchFrame = styled(XStack, {
         }
       }
     },
+    checked: {
+      true: {}
+    },
+    frameWidth: {
+      ":number": () => null
+    },
     size: {
       "...size": (val) => {
         const height = getSwitchHeight(val) + 4;
@@ -107,153 +71,14 @@ const SwitchFrame = styled(XStack, {
     unstyled: false
   }
 });
-const SwitchComponent = SwitchFrame.extractable(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        __scopeSwitch,
-        labeledBy: ariaLabelledby,
-        name,
-        checked: checkedProp,
-        defaultChecked,
-        required,
-        disabled,
-        value = "on",
-        onCheckedChange,
-        size = "$true",
-        unstyled = false,
-        native: nativeProp,
-        nativeProps,
-        ...switchProps
-      } = props;
-      const native = Array.isArray(nativeProp) ? nativeProp : [nativeProp];
-      const shouldRenderMobileNative = !isWeb && nativeProp === true || !isWeb && native.includes("mobile") || native.includes("android") && Platform.OS === "android" || native.includes("ios") && Platform.OS === "ios";
-      if (shouldRenderMobileNative) {
-        return <NativeSwitch
-          value={checkedProp}
-          onValueChange={onCheckedChange}
-          {...nativeProps}
-        />;
-      }
-      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 <SwitchProvider
-        scope={__scopeSwitch}
-        checked={checked}
-        disabled={disabled}
-        size={size}
-        unstyled={unstyled}
-      >
-        <SwitchFrame
-          unstyled={unstyled}
-          size={size}
-          theme={checked ? "active" : null}
-          role="switch"
-          aria-checked={checked}
-          aria-labelledby={labelledBy}
-          aria-required={required}
-          data-state={getState(checked)}
-          data-disabled={disabled ? "" : void 0}
-          disabled={disabled}
-          tabIndex={disabled ? void 0 : 0}
-          value={value}
-          {...switchProps}
-          ref={composedRefs}
-          onPress={(event) => {
-            props.onPress?.(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>;
-    }
-  ),
-  {
-    // because they may set a variant to be checked, we need to make it also pass checked down
-    inlineProps: /* @__PURE__ */ new Set(["checked"])
-  }
-);
-const Switch = withStaticProperties(SwitchComponent, {
-  Thumb: SwitchThumb
+const Switch = createSwitch({
+  Frame: SwitchFrame,
+  Thumb: SwitchThumb,
+  acceptsUnstyled: true
 });
-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,
-      // ...controlSize,
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0,
-      margin: 0
-    }}
-  />;
-};
-function getState(checked) {
-  return checked ? "checked" : "unchecked";
-}
 export {
   Switch,
   SwitchFrame,
-  SwitchThumb,
-  SwitchThumbFrame,
-  createSwitchScope
+  SwitchThumb
 };
 //# sourceMappingURL=Switch.js.map

package/dist/jsx/Switch.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Switch.tsx"],
-  "mappings": "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",
-  "names": ["SwitchThumb"]
+  "mappings": "AAAA,SAAqB,kBAAkB,cAAc;AACrD,SAAS,eAAe;AACxB,SAAS,gBAAgB,cAAc;AAEvC,SAAS,eAAe,oBAAoB;AAErC,MAAM,cAAc,OAAO,gBAAgB;AAAA,EAChD,MAAM;AAAA,EACN,SAAS;AAAA,EAET,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,iBAAiB;AAAA,QACjB,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,OAAO,gBAAgB,GAAG;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAED,MAAM,kBAAkB,CAAC,QACvB,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,IAAI;AAElD,MAAM,iBAAiB,CAAC,QAAoB,gBAAgB,GAAG,IAAI;AAE5D,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,KAAK;AAAA,EACL,SAAS;AAAA,EAET,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,iBAAiB;AAAA,QAEjB,YAAY;AAAA,UACV,aAAa;AAAA,UACb,cAAc;AAAA,UACd,cAAc;AAAA,UACd,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,CAAC;AAAA,IACT;AAAA,IAEA,YAAY;AAAA,MACV,WAAW,MAAM;AAAA,IACnB;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,QAAQ;AAClB,cAAM,SAAS,gBAAgB,GAAG,IAAI;AACtC,cAAM,QAAQ,eAAe,GAAG,IAAI;AACpC,eAAO;AAAA,UACL;AAAA,UACA,WAAW;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAEM,MAAM,SAAS,aAAa;AAAA,EACjC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,iBAAiB;AACnB,CAAC;",
+  "names": []
 }

package/dist/jsx/createSwitch.js

@@ -0,0 +1,219 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  composeEventHandlers,
+  createStyledContext,
+  getVariableValue,
+  isWeb,
+  useProps,
+  withStaticProperties
+} from "@tamagui/core";
+import { registerFocusable } from "@tamagui/focusable";
+import { getSize } from "@tamagui/get-token";
+import { useLabelContext } from "@tamagui/label";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import { usePrevious } from "@tamagui/use-previous";
+import * as React from "react";
+import {
+  Switch as NativeSwitch,
+  Platform
+} from "react-native";
+const SwitchContext = createStyledContext({
+  checked: false,
+  disabled: false,
+  size: void 0,
+  frameWidth: 60,
+  unstyled: false
+});
+function createSwitch({ Frame, Thumb, acceptsUnstyled }) {
+  const SwitchThumb = Thumb.styleable(function SwitchThumb2(props, forwardedRef) {
+    const { size: sizeProp, ...thumbProps } = props;
+    const { disabled, checked, unstyled, frameWidth } = React.useContext(SwitchContext);
+    const [thumbWidth, setThumbWidth] = React.useState(0);
+    return (
+      // @ts-ignore
+      <Thumb
+        theme={unstyled === false && checked ? "active" : null}
+        data-state={getState(checked)}
+        data-disabled={disabled ? "" : void 0}
+        x={checked ? frameWidth - thumbWidth : 0}
+        {...thumbProps}
+        onLayout={composeEventHandlers(
+          props.onLayout,
+          (e) => (
+            // @ts-ignore
+            setThumbWidth(e.nativeEvent.layout.width)
+          )
+        )}
+        ref={forwardedRef}
+      />
+    );
+  });
+  const SwitchComponent = Frame.extractable(
+    React.forwardRef(function SwitchFrame(propsIn, forwardedRef) {
+      const styledContext = React.useContext(SwitchContext);
+      const props = useProps(propsIn);
+      const {
+        labeledBy: ariaLabelledby,
+        name,
+        checked: checkedProp,
+        defaultChecked,
+        required,
+        disabled,
+        value = "on",
+        onCheckedChange,
+        size = styledContext.size ?? "$true",
+        unstyled = styledContext.unstyled ?? false,
+        native: nativeProp,
+        nativeProps,
+        ...switchProps
+      } = props;
+      const leftBorderWidth = (() => {
+        let _ = void 0;
+        for (const key in switchProps) {
+          if (key === "borderWidth" || key === "borderLeftWidth") {
+            _ = switchProps[key];
+          }
+        }
+        if (acceptsUnstyled && _ === void 0 && unstyled === false) {
+          _ = 2;
+        }
+        if (typeof _ === "string") {
+          _ = getVariableValue(getSize(_));
+        }
+        return +_;
+      })();
+      const native = Array.isArray(nativeProp) ? nativeProp : [nativeProp];
+      const shouldRenderMobileNative = !isWeb && nativeProp === true || !isWeb && native.includes("mobile") || native.includes("android") && Platform.OS === "android" || native.includes("ios") && Platform.OS === "ios";
+      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 [frameWidth, setFrameWidth] = React.useState(60);
+      const [checked = false, setChecked] = useControllableState({
+        prop: checkedProp,
+        defaultProp: defaultChecked || false,
+        onChange: onCheckedChange,
+        transition: true
+      });
+      if (shouldRenderMobileNative) {
+        return <NativeSwitch
+          value={checkedProp}
+          onValueChange={onCheckedChange}
+          {...nativeProps}
+        />;
+      }
+      if (!isWeb) {
+        React.useEffect(() => {
+          if (!props.id)
+            return;
+          return registerFocusable(props.id, {
+            focus: () => {
+              setChecked((x) => !x);
+            }
+          });
+        }, [props.id, setChecked]);
+      }
+      return <>
+        {
+          /* @ts-ignore */
+        }
+        <Frame
+          unstyled={unstyled}
+          size={size}
+          checked={checked}
+          disabled={disabled}
+          frameWidth={frameWidth - leftBorderWidth * 2}
+          theme={checked ? "active" : null}
+          themeShallow
+          role="switch"
+          aria-checked={checked}
+          aria-labelledby={labelledBy}
+          aria-required={required}
+          data-state={getState(checked)}
+          data-disabled={disabled ? "" : void 0}
+          tabIndex={disabled ? void 0 : 0}
+          value={value}
+          {...switchProps}
+          ref={composedRefs}
+          onPress={composeEventHandlers(props.onPress, (event) => {
+            setChecked((prevChecked) => !prevChecked);
+            if (isWeb && isFormControl) {
+              hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+              if (!hasConsumerStoppedPropagationRef.current)
+                event.stopPropagation();
+            }
+          })}
+          onLayout={composeEventHandlers(
+            props.onLayout,
+            (e) => (
+              // @ts-ignore
+              setFrameWidth(e.nativeEvent.layout.width)
+            )
+          )}
+        />
+        {isWeb && isFormControl && <BubbleInput
+          control={button}
+          bubbles={!hasConsumerStoppedPropagationRef.current}
+          name={name}
+          value={value}
+          checked={checked}
+          required={required}
+          disabled={disabled}
+          style={{ transform: "translateX(-100%)" }}
+        />}
+      </>;
+    })
+  );
+  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 (
+      // @ts-ignore
+      <input
+        type="checkbox"
+        aria-hidden
+        defaultChecked={checked}
+        {...inputProps}
+        tabIndex={-1}
+        ref={ref}
+        style={{
+          ...props.style,
+          // ...controlSize,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }}
+      />
+    );
+  };
+  function getState(checked) {
+    return checked ? "checked" : "unchecked";
+  }
+  const Switch = withStaticProperties(SwitchComponent, {
+    Thumb: SwitchThumb
+  });
+  return Switch;
+}
+export {
+  SwitchContext,
+  createSwitch
+};
+//# sourceMappingURL=createSwitch.js.map

package/dist/jsx/createSwitch.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/createSwitch.tsx"],
+  "mappings": "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",
+  "names": ["SwitchThumb"]
+}

package/dist/jsx/index.js

@@ -1,2 +1,3 @@
 export * from "./Switch";
+export * from "./createSwitch";
 //# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "mappings": "AAAA,cAAc;",
+  "mappings": "AAAA,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/switch",
-  "version": "1.57.8",
+  "version": "1.58.0",
   "sideEffects": [
     "*.css"
   ],
@@ -31,22 +31,22 @@
     }
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.57.8",
-    "@tamagui/core": "1.57.8",
-    "@tamagui/create-context": "1.57.8",
-    "@tamagui/focusable": "1.57.8",
-    "@tamagui/get-token": "1.57.8",
-    "@tamagui/label": "1.57.8",
-    "@tamagui/stacks": "1.57.8",
-    "@tamagui/use-controllable-state": "1.57.8",
-    "@tamagui/use-previous": "1.57.8"
+    "@tamagui/compose-refs": "1.58.0",
+    "@tamagui/core": "1.58.0",
+    "@tamagui/create-context": "1.58.0",
+    "@tamagui/focusable": "1.58.0",
+    "@tamagui/get-token": "1.58.0",
+    "@tamagui/label": "1.58.0",
+    "@tamagui/stacks": "1.58.0",
+    "@tamagui/use-controllable-state": "1.58.0",
+    "@tamagui/use-previous": "1.58.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.57.8",
+    "@tamagui/build": "1.58.0",
     "react": "^18.2.0",
     "react-native": "^0.72.1"
   },