@tamagui/switch 1.57.8 → 1.58.2

package/dist/esm/Switch.js

@@ -1,33 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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: {
@@ -50,35 +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 /* @__PURE__ */ jsx(
-        SwitchThumbFrame,
-        {
-          unstyled,
-          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: {
@@ -95,6 +49,12 @@ const SwitchFrame = styled(XStack, {
         }
       }
     },
+    checked: {
+      true: {}
+    },
+    frameWidth: {
+      ":number": () => null
+    },
     size: {
       "...size": (val) => {
         const height = getSwitchHeight(val) + 4;
@@ -111,170 +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 /* @__PURE__ */ jsx(
-          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 /* @__PURE__ */ jsxs(
-        SwitchProvider,
-        {
-          scope: __scopeSwitch,
-          checked,
-          disabled,
-          size,
-          unstyled,
-          children: [
-            /* @__PURE__ */ jsx(
-              SwitchFrame,
-              {
-                unstyled,
-                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,
-                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%)" }
-              }
-            )
-          ]
-        }
-      );
-    }
-  ),
-  {
-    // 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 /* @__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
+  SwitchThumb
 };
 //# sourceMappingURL=Switch.js.map

package/dist/esm/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/esm/createSwitch.js

@@ -0,0 +1,232 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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
+      /* @__PURE__ */ jsx(
+        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 /* @__PURE__ */ jsx(
+          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 /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Frame,
+          {
+            unstyled,
+            size,
+            checked,
+            disabled,
+            frameWidth: frameWidth - leftBorderWidth * 2,
+            theme: checked ? "active" : null,
+            themeShallow: true,
+            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,
+            ...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 && /* @__PURE__ */ jsx(
+          BubbleInput,
+          {
+            control: button,
+            bubbles: !hasConsumerStoppedPropagationRef.current,
+            name,
+            value,
+            checked,
+            required,
+            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
+      /* @__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";
+  }
+  const Switch = withStaticProperties(SwitchComponent, {
+    Thumb: SwitchThumb
+  });
+  return Switch;
+}
+export {
+  SwitchContext,
+  createSwitch
+};
+//# sourceMappingURL=createSwitch.js.map

package/dist/esm/createSwitch.js.map

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

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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