@tamagui/checkbox 1.27.1 → 1.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/checkbox",
-  "version": "1.27.1",
+  "version": "1.27.3",
   "sideEffects": [
     "*.css"
   ],
@@ -20,15 +20,15 @@
   },
   "dependencies": {
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/core": "1.27.1",
-    "@tamagui/create-context": "1.27.1",
-    "@tamagui/focusable": "1.27.1",
-    "@tamagui/font-size": "1.27.1",
-    "@tamagui/get-size": "1.27.1",
-    "@tamagui/helpers-tamagui": "1.27.1",
-    "@tamagui/label": "1.27.1",
-    "@tamagui/stacks": "1.27.1",
-    "@tamagui/use-controllable-state": "1.27.1"
+    "@tamagui/core": "1.27.3",
+    "@tamagui/create-context": "1.27.3",
+    "@tamagui/focusable": "1.27.3",
+    "@tamagui/font-size": "1.27.3",
+    "@tamagui/get-size": "1.27.3",
+    "@tamagui/helpers-tamagui": "1.27.3",
+    "@tamagui/label": "1.27.3",
+    "@tamagui/stacks": "1.27.3",
+    "@tamagui/use-controllable-state": "1.27.3"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -42,7 +42,7 @@
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.27.1",
+    "@tamagui/build": "1.27.3",
     "react": "^18.2.0"
   },
   "publishConfig": {

package/dist/esm/Checkbox.mjs

@@ -1,290 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { usePrevious } from "@radix-ui/react-use-previous";
-import {
-  composeEventHandlers,
-  getVariableValue,
-  isWeb,
-  styled,
-  useComposedRefs,
-  useProps,
-  useTheme,
-  withStaticProperties
-} from "@tamagui/core";
-import { createContextScope } from "@tamagui/create-context";
-import { registerFocusable } from "@tamagui/focusable";
-import { getFontSize } from "@tamagui/font-size";
-import { getSize, stepTokenUpOrDown } from "@tamagui/get-size";
-import { useGetThemedIcon } from "@tamagui/helpers-tamagui";
-import { useLabelContext } from "@tamagui/label";
-import { ThemeableStack } from "@tamagui/stacks";
-import { useControllableState } from "@tamagui/use-controllable-state";
-import * as React from "react";
-function isIndeterminate(checked) {
-  return checked === "indeterminate";
-}
-function getState(checked) {
-  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
-}
-const BubbleInput = (props) => {
-  const { checked, bubbles = true, control, isHidden, ...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 });
-      input.indeterminate = isIndeterminate(checked);
-      setChecked.call(input, isIndeterminate(checked) ? false : checked);
-      input.dispatchEvent(event);
-    }
-  }, [prevChecked, checked, bubbles]);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "checkbox",
-      defaultChecked: isIndeterminate(checked) ? false : checked,
-      ...inputProps,
-      tabIndex: -1,
-      ref,
-      "aria-hidden": isHidden,
-      style: {
-        ...isHidden ? {
-          // ...controlSize,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0
-        } : {
-          appearance: "auto",
-          accentColor: "var(--color6)"
-        },
-        ...props.style
-      }
-    }
-  );
-};
-const INDICATOR_NAME = "CheckboxIndicator";
-const CheckboxIndicatorFrame = styled(ThemeableStack, {
-  // use Checkbox for easier themes
-  name: INDICATOR_NAME
-});
-const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
-  React.forwardRef(
-    (props, forwardedRef) => {
-      const {
-        __scopeCheckbox,
-        children: childrenProp,
-        forceMount,
-        disablePassStyles,
-        ...indicatorProps
-      } = props;
-      const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox);
-      const iconSize = (typeof context.size === "number" ? context.size * 0.65 : getFontSize(context.size)) * context.scaleIcon;
-      const theme = useTheme();
-      const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color });
-      const childrens = React.Children.toArray(childrenProp);
-      const children = childrens.map((child) => {
-        if (disablePassStyles || !React.isValidElement(child)) {
-          return child;
-        }
-        return getThemedIcon(child);
-      });
-      if (forceMount || isIndeterminate(context.state) || context.state === true)
-        return /* @__PURE__ */ jsx(
-          CheckboxIndicatorFrame,
-          {
-            "data-state": getState(context.state),
-            "data-disabled": context.disabled ? "" : void 0,
-            pointerEvents: "none",
-            ...indicatorProps,
-            ref: forwardedRef,
-            children
-          }
-        );
-      return null;
-    }
-  )
-);
-CheckboxIndicator.displayName = INDICATOR_NAME;
-const CHECKBOX_NAME = "Checkbox";
-const CheckboxFrame = styled(ThemeableStack, {
-  name: CHECKBOX_NAME,
-  tag: "button",
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        alignItems: "center",
-        justifyContent: "center",
-        pressTheme: true,
-        focusable: true,
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        hoverStyle: {
-          borderColor: "$borderColorHover"
-        },
-        focusStyle: {
-          borderColor: "$borderColorFocus"
-        }
-      }
-    },
-    size: {
-      "...size": (val, { tokens }) => {
-        const radiusToken = getVariableValue(getSize(val)) / 8;
-        return {
-          borderRadius: radiusToken
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: false
-  }
-});
-const [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
-const [CheckboxProvider, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
-const Checkbox = withStaticProperties(
-  CheckboxFrame.extractable(
-    React.forwardRef(function Checkbox2(props, forwardedRef) {
-      const {
-        __scopeCheckbox,
-        labelledBy: ariaLabelledby,
-        name,
-        checked: checkedProp,
-        defaultChecked,
-        required,
-        scaleIcon = 1,
-        scaleSize = 0.45,
-        sizeAdjust = 0,
-        disabled,
-        value = "on",
-        onCheckedChange,
-        native,
-        ...checkboxProps
-      } = props;
-      const [button, setButton] = React.useState(null);
-      const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
-      const hasConsumerStoppedPropagationRef = React.useRef(false);
-      const propsActive = useProps(props);
-      const isFormControl = isWeb ? button ? Boolean(button.closest("form")) : true : false;
-      const [checked = false, setChecked] = useControllableState({
-        prop: checkedProp,
-        defaultProp: defaultChecked,
-        onChange: onCheckedChange
-      });
-      const adjustedSize = getVariableValue(
-        stepTokenUpOrDown("size", propsActive.size, sizeAdjust)
-      );
-      const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize;
-      const labelId = useLabelContext(button);
-      const labelledBy = ariaLabelledby || labelId;
-      if (process.env.TAMAGUI_TARGET === "native") {
-        React.useEffect(() => {
-          if (!props.id)
-            return;
-          return registerFocusable(props.id, {
-            focusAndSelect: () => {
-              setChecked((x) => !x);
-            },
-            focus: () => {
-            }
-          });
-        }, [props.id, setChecked]);
-      }
-      return /* @__PURE__ */ jsx(
-        CheckboxProvider,
-        {
-          scope: __scopeCheckbox,
-          state: checked,
-          disabled,
-          size,
-          scaleIcon,
-          children: isWeb && native ? /* @__PURE__ */ jsx(
-            BubbleInput,
-            {
-              control: button,
-              bubbles: !hasConsumerStoppedPropagationRef.current,
-              name,
-              value,
-              checked,
-              required,
-              disabled,
-              id: props.id
-            }
-          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              CheckboxFrame,
-              {
-                width: size,
-                height: size,
-                tag: "button",
-                role: "checkbox",
-                "aria-labelledby": labelledBy,
-                "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
-                "aria-required": required,
-                "data-state": getState(checked),
-                "data-disabled": disabled ? "" : void 0,
-                disabled,
-                ...checkboxProps,
-                ref: composedRefs,
-                ...isWeb && {
-                  type: "button",
-                  value,
-                  onKeyDown: composeEventHandlers(
-                    props.onKeyDown,
-                    (event) => {
-                      if (event.key === "Enter")
-                        event.preventDefault();
-                    }
-                  )
-                },
-                onPress: composeEventHandlers(props.onPress, (event) => {
-                  setChecked(
-                    (prevChecked) => isIndeterminate(prevChecked) ? true : !prevChecked
-                  );
-                  if (isFormControl) {
-                    hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-                    if (!hasConsumerStoppedPropagationRef.current)
-                      event.stopPropagation();
-                  }
-                })
-              }
-            ),
-            isWeb && isFormControl ? /* @__PURE__ */ jsx(
-              BubbleInput,
-              {
-                isHidden: true,
-                control: button,
-                bubbles: !hasConsumerStoppedPropagationRef.current,
-                name,
-                value,
-                checked,
-                required,
-                disabled
-              }
-            ) : null
-          ] })
-        }
-      );
-    })
-  ),
-  {
-    Indicator: CheckboxIndicator
-  }
-);
-export {
-  BubbleInput,
-  Checkbox,
-  CheckboxFrame,
-  createCheckboxScope,
-  getState,
-  isIndeterminate
-};
-//# sourceMappingURL=Checkbox.mjs.map

package/dist/esm/index.mjs

@@ -1,2 +0,0 @@
-export * from "./Checkbox";
-//# sourceMappingURL=index.mjs.map