@tamagui/checkbox 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/createCheckbox.cjs

@@ -2,182 +2,192 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+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: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var createCheckbox_exports = {};
 __export(createCheckbox_exports, {
   CheckboxContext: () => CheckboxContext,
   createCheckbox: () => createCheckbox
 });
 module.exports = __toCommonJS(createCheckbox_exports);
-var import_checkbox_headless = require("@tamagui/checkbox-headless"),
-  import_core = require("@tamagui/core"),
-  import_focusable = require("@tamagui/focusable"),
-  import_font_size = require("@tamagui/font-size"),
-  import_get_token = require("@tamagui/get-token"),
-  import_helpers_tamagui = require("@tamagui/helpers-tamagui"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  import_react = __toESM(require("react"), 1),
-  import_Checkbox = require("./Checkbox.cjs"),
-  import_CheckboxStyledContext = require("./CheckboxStyledContext.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
+var import_checkbox_headless = require("@tamagui/checkbox-headless");
+var import_core = require("@tamagui/core");
+require("@tamagui/focusable");
+var import_font_size = require("@tamagui/font-size");
+var import_get_token = require("@tamagui/get-token");
+var import_helpers_tamagui = require("@tamagui/helpers-tamagui");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_react = __toESM(require("react"), 1);
+var import_Checkbox = require("./Checkbox.cjs");
+var import_CheckboxStyledContext = require("./CheckboxStyledContext.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
 const CheckboxContext = import_react.default.createContext({
-    checked: !1,
-    disabled: !1
-  }),
-  ensureContext = x => {
-    x.context || (x.context = CheckboxContext);
-  };
+  checked: false,
+  disabled: false
+});
+const ensureContext = x => {
+  if (!x.context) x.context = CheckboxContext;
+};
 function createCheckbox(createProps) {
   const {
     Frame = import_Checkbox.CheckboxFrame,
     Indicator = import_Checkbox.CheckboxIndicatorFrame
   } = createProps;
-  ensureContext(Frame), ensureContext(Indicator);
-  const FrameComponent = Frame.styleable(function (_props, forwardedRef) {
-      const {
-          scaleSize = 0.45,
-          sizeAdjust = 0,
-          scaleIcon,
-          checked: checkedProp,
-          defaultChecked,
-          onCheckedChange,
-          native,
-          unstyled = !1,
-          activeStyle,
-          activeTheme,
-          ...props
-        } = _props,
-        propsActive = (0, import_core.useProps)(props),
-        styledContext = import_react.default.useContext(import_CheckboxStyledContext.CheckboxStyledContext.context);
-      let adjustedSize = 0,
-        size = 0;
-      unstyled || (adjustedSize = (0, import_core.getVariableValue)((0, import_get_token.getSize)(propsActive.size ?? styledContext?.size ?? "$true", {
+  ensureContext(Frame);
+  ensureContext(Indicator);
+  const FrameComponent = Frame.styleable(function Checkbox(_props, forwardedRef) {
+    const {
+      scaleSize = .45,
+      sizeAdjust = 0,
+      scaleIcon,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      native,
+      unstyled = false,
+      activeStyle,
+      activeTheme,
+      ...props
+    } = _props;
+    const propsActive = (0, import_core.useProps)(props);
+    const styledContext = import_react.default.useContext(import_CheckboxStyledContext.CheckboxStyledContext.context);
+    let adjustedSize = 0;
+    let size = 0;
+    if (!unstyled) {
+      adjustedSize = (0, import_core.getVariableValue)((0, import_get_token.getSize)(propsActive.size ?? styledContext?.size ?? "$true", {
         shift: sizeAdjust
-      })), size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize);
-      const [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
-          prop: checkedProp,
-          defaultProp: defaultChecked,
-          onChange: onCheckedChange
-        }),
-        {
-          checkboxProps,
-          checkboxRef,
-          bubbleInput
-        } = (0, import_checkbox_headless.useCheckbox)(
-        // @ts-ignore
-        propsActive, [checked, setChecked], forwardedRef);
-      if ((0, import_core.shouldRenderNativePlatform)(native) === "web") return /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
-        type: "checkbox",
-        defaultChecked: (0, import_checkbox_headless.isIndeterminate)(checked) ? !1 : checked,
-        tabIndex: -1,
-        ref: checkboxRef,
-        disabled: checkboxProps.disabled,
-        style: {
-          appearance: "auto",
-          accentColor: "var(--color6)",
-          ...checkboxProps.style
-        }
-      });
-      const memoizedContext = (0, import_react.useMemo)(() => ({
-          checked,
-          disabled: checkboxProps.disabled
-        }), [checked, checkboxProps.disabled]),
-        isActive = !!checked,
-        disabled = checkboxProps.disabled;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxContext.Provider, {
-        value: memoizedContext,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxStyledContext.CheckboxStyledContext.Provider, {
-          size: propsActive.size ?? styledContext?.size ?? "$true",
-          scaleIcon: scaleIcon ?? styledContext?.scaleIcon ?? 1,
+      }));
+      size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize;
+    }
+    const [checked = false, setChecked] = (0, import_use_controllable_state.useControllableState)({
+      prop: checkedProp,
+      defaultProp: defaultChecked,
+      onChange: onCheckedChange
+    });
+    const {
+      checkboxProps,
+      checkboxRef,
+      bubbleInput
+    } = (0, import_checkbox_headless.useCheckbox)(
+    // @ts-ignore
+    propsActive, [checked, setChecked], forwardedRef);
+    if ((0, import_core.shouldRenderNativePlatform)(native) === "web") return /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+      type: "checkbox",
+      defaultChecked: (0, import_checkbox_headless.isIndeterminate)(checked) ? false : checked,
+      tabIndex: -1,
+      ref: checkboxRef,
+      disabled: checkboxProps.disabled,
+      style: {
+        appearance: "auto",
+        accentColor: "var(--color6)",
+        ...checkboxProps.style
+      }
+    });
+    const memoizedContext = (0, import_react.useMemo)(() => ({
+      checked,
+      disabled: checkboxProps.disabled
+    }), [checked, checkboxProps.disabled]);
+    const isActive = !!checked;
+    const disabled = checkboxProps.disabled;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CheckboxContext.Provider, {
+      value: memoizedContext,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_CheckboxStyledContext.CheckboxStyledContext.Provider, {
+        size: propsActive.size ?? styledContext?.size ?? "$true",
+        scaleIcon: scaleIcon ?? styledContext?.scaleIcon ?? 1,
+        unstyled,
+        active: isActive,
+        disabled,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Frame, {
+          render: "button",
+          ref: checkboxRef,
           unstyled,
-          active: isActive,
+          theme: activeTheme ?? null,
+          ...(import_core.isWeb && {
+            type: "button"
+          }),
+          ...(!unstyled && {
+            width: size,
+            height: size,
+            size
+          }),
+          checked,
           disabled,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Frame, {
-            render: "button",
-            ref: checkboxRef,
-            unstyled,
-            theme: activeTheme ?? null,
-            ...(import_core.isWeb && {
-              type: "button"
-            }),
-            ...(!unstyled && {
-              width: size,
-              height: size,
-              size
+          ...checkboxProps,
+          ...props,
+          ...(isActive && {
+            ...(!unstyled && !activeStyle && {
+              backgroundColor: "$backgroundActive"
             }),
-            checked,
-            disabled,
-            ...checkboxProps,
-            ...props,
-            ...(isActive && {
-              ...(!unstyled && !activeStyle && {
-                backgroundColor: "$backgroundActive"
-              }),
-              ...activeStyle
-            }),
-            children: propsActive.children
-          }), bubbleInput]
-        })
+            ...activeStyle
+          }),
+          children: propsActive.children
+        }), bubbleInput]
+      })
+    });
+  });
+  const IndicatorComponent = Indicator.styleable((props, forwardedRef) => {
+    const {
+      children: childrenProp,
+      forceMount,
+      disablePassStyles,
+      unstyled = false,
+      activeStyle,
+      ...indicatorProps
+    } = props;
+    const styledContext = import_CheckboxStyledContext.CheckboxStyledContext.useStyledContext();
+    const {
+      active
+    } = styledContext;
+    let children = childrenProp;
+    if (!unstyled) {
+      const iconSize = (typeof styledContext.size === "number" ? styledContext.size * .65 : (0, import_font_size.getFontSize)(styledContext.size)) * styledContext.scaleIcon;
+      const theme = (0, import_core.useTheme)();
+      const getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
+        size: iconSize,
+        color: theme.color
       });
-    }),
-    IndicatorComponent = Indicator.styleable((props, forwardedRef) => {
-      const {
-          children: childrenProp,
-          forceMount,
-          disablePassStyles,
-          unstyled = !1,
-          activeStyle,
-          ...indicatorProps
-        } = props,
-        styledContext = import_CheckboxStyledContext.CheckboxStyledContext.useStyledContext(),
-        {
-          active
-        } = styledContext;
-      let children = childrenProp;
-      if (!unstyled) {
-        const iconSize = (typeof styledContext.size == "number" ? styledContext.size * 0.65 : (0, import_font_size.getFontSize)(styledContext.size)) * styledContext.scaleIcon,
-          theme = (0, import_core.useTheme)(),
-          getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
-            size: iconSize,
-            color: theme.color
-          });
-        children = import_react.default.Children.toArray(childrenProp).map(child => disablePassStyles || !import_react.default.isValidElement(child) ? child : getThemedIcon(child));
-      }
-      const context = import_react.default.useContext(CheckboxContext);
-      return forceMount || (0, import_checkbox_headless.isIndeterminate)(context.checked) || context.checked === !0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(Indicator, {
-        pointerEvents: "none",
-        ...indicatorProps,
-        ...(active && activeStyle),
-        ref: forwardedRef,
-        children
-      }) : null;
+      children = import_react.default.Children.toArray(childrenProp).map(child => {
+        if (disablePassStyles || !import_react.default.isValidElement(child)) return child;
+        return getThemedIcon(child);
+      });
+    }
+    const context = import_react.default.useContext(CheckboxContext);
+    if (forceMount || (0, import_checkbox_headless.isIndeterminate)(context.checked) || context.checked === true) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Indicator, {
+      pointerEvents: "none",
+      ...indicatorProps,
+      ...(active && activeStyle),
+      ref: forwardedRef,
+      children
     });
+    return null;
+  });
   return (0, import_core.withStaticProperties)(FrameComponent, {
     Indicator: IndicatorComponent
   });