@tamagui/checkbox 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/Checkbox.native.js

@@ -1,90 +1,94 @@
-import { getVariableValue, styled } from "@tamagui/core";
-import { getSize } from "@tamagui/get-token";
-import { YStack } from "@tamagui/stacks";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isIndeterminate, useCheckbox } from "@tamagui/checkbox-headless";
+import { View, createStyledHOC, isWeb, shouldRenderNativePlatform, styled, withStaticProperties } from "@tamagui/core";
+import { registerFocusable } from "@tamagui/focusable";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import React, { useMemo } from "react";
 import { CheckboxStyledContext } from "./CheckboxStyledContext.native.js";
-var INDICATOR_NAME = "CheckboxIndicator";
-var CheckboxIndicatorFrame = styled(YStack, {
-  // use Checkbox for easier themes
-  name: INDICATOR_NAME,
-  context: CheckboxStyledContext,
-  variants: {
-    unstyled: {
-      false: {}
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+
+var CheckboxIndicatorFrame = styled(View, {
+	displayName: "CheckboxIndicator",
+	context: CheckboxStyledContext
 });
-var CHECKBOX_NAME = "Checkbox";
-var CheckboxFrame = styled(YStack, {
-  name: CHECKBOX_NAME,
-  render: "button",
-  context: CheckboxStyledContext,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        alignItems: "center",
-        justifyContent: "center",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        hoverStyle: {
-          borderColor: "$borderColorHover"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorPress"
-        },
-        focusStyle: {
-          borderColor: "$borderColorFocus"
-        },
-        focusVisibleStyle: {
-          outlineStyle: "solid",
-          outlineWidth: 2,
-          outlineColor: "$outlineColor"
-        }
-      }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none",
-        userSelect: "none",
-        cursor: "not-allowed",
-        hoverStyle: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background"
-        },
-        pressStyle: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background"
-        },
-        focusStyle: {
-          outlineWidth: 0
-        }
-      }
-    },
-    size: {
-      "...size": function (val) {
-        var radiusToken = getVariableValue(getSize(val)) / 8;
-        return {
-          borderRadius: radiusToken
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+var CheckboxFrame = styled(View, {
+	displayName: "Checkbox",
+	render: "button",
+	context: CheckboxStyledContext,
+	alignItems: "center",
+	justifyContent: "center",
+	variants: { disabled: { true: {
+		pointerEvents: "none",
+		userSelect: "none"
+	} } }
 });
-export { CheckboxFrame, CheckboxIndicatorFrame };
+var CheckboxContext = /* @__PURE__ */ React.createContext({
+	checked: false,
+	disabled: false
+});
+var Checkbox2 = withStaticProperties(createStyledHOC(CheckboxFrame, function Checkbox(propsIn, forwardedRef) {
+	var { checked: checkedProp, defaultChecked, onCheckedChange, native, activeStyle, activeTheme, ...props } = propsIn;
+	var [checked = false, setChecked] = useControllableState({
+		prop: checkedProp,
+		defaultProp: defaultChecked,
+		onChange: onCheckedChange
+	});
+	var { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(props, [checked, setChecked], forwardedRef);
+	React.useEffect(function() {
+		if (!props.id) return;
+		if (props.disabled) return;
+		return registerFocusable(props.id, {
+			focusAndSelect: function() {
+				setChecked === null || setChecked === void 0 || setChecked(function(value) {
+					return !value;
+				});
+			},
+			focus: function() {}
+		});
+	}, [props.id, props.disabled]);
+	if (shouldRenderNativePlatform(native) === "web") return /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		defaultChecked: isIndeterminate(checked) ? false : checked,
+		tabIndex: -1,
+		ref: checkboxRef,
+		disabled: checkboxProps.disabled,
+		style: checkboxProps.style
+	});
+	var memoizedContext = useMemo(function() {
+		return {
+			checked,
+			disabled: checkboxProps.disabled
+		};
+	}, [checked, checkboxProps.disabled]);
+	var isActive = !!checked;
+	var disabled = checkboxProps.disabled;
+	return /* @__PURE__ */ jsxs(CheckboxContext.Provider, {
+		value: memoizedContext,
+		children: [/* @__PURE__ */ jsx(CheckboxFrame, {
+			render: "button",
+			ref: checkboxRef,
+			theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
+			...isWeb && { type: "button" },
+			checked,
+			...checkboxProps,
+			style: [checkboxProps.style, isActive && activeStyle],
+			active: isActive,
+			disabled,
+			children: props.children
+		}), bubbleInput]
+	});
+}), { Indicator: createStyledHOC(CheckboxIndicatorFrame, function(props, forwardedRef) {
+	var { children, forceMount, activeStyle, ...indicatorProps } = props;
+	var { active } = CheckboxStyledContext.useStyledContext();
+	var context = React.useContext(CheckboxContext);
+	if (forceMount || isIndeterminate(context.checked) || context.checked === true) return /* @__PURE__ */ jsx(CheckboxIndicatorFrame, {
+		pointerEvents: "none",
+		...indicatorProps,
+		style: [indicatorProps.style, active && activeStyle],
+		ref: forwardedRef,
+		children
+	});
+	return null;
+}) });
+
+export { Checkbox2 as Checkbox, CheckboxContext, CheckboxFrame, CheckboxIndicatorFrame };
 //# sourceMappingURL=Checkbox.native.js.map

package/dist/esm/Checkbox.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["getVariableValue","styled","getSize","YStack","CheckboxStyledContext","INDICATOR_NAME","CheckboxIndicatorFrame","name","context","variants","unstyled","false","defaultVariants","process","env","TAMAGUI_HEADLESS","accept","activeStyle","CHECKBOX_NAME","CheckboxFrame","render","size","backgroundColor","alignItems","justifyContent","borderWidth","borderColor","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","outlineStyle","outlineWidth","outlineColor","disabled","true","pointerEvents","userSelect","cursor","...size","val","radiusToken","borderRadius"],"sources":["../../src/Checkbox.tsx"],"sourcesContent":[null],"mappings":"AAGA,SAASA,gBAAA,EAAkBC,MAAA,QAAc;AACzC,SAASC,OAAA,QAAe;AACxB,SAASC,MAAA,QAAc;AAEvB,SAASC,qBAAA,QAA6B;AAKtC,IAAAC,cAAM,sBAAiB;AAEhB,IAAAC,sBAAM,GAAAL,MAAyB,CAAAE,MAAA;EACpC;EACAI,IAAA,EAAAF,cAAA;EAAAG,OAAA,EAAAJ,qBAAA;EAAAK,QAEQ;IACNC,QAAA,EAAS;MACTC,KAAA,GAAU;IAAA;EACE;EACAC,eACV;IACFF,QAAA,EAAAG,OAAA,CAAAC,GAAA,CAAAC,gBAAA;EAAA;AACiB;EAC4BC,MAC7C;IACFC,WAAA;EACA;AAAA;AACU,IAAAC,aACN,GAAa;AAAA,IACfC,aAAA,GAAAlB,MAAA,CAAAE,MAAA;EACFI,IAAA,EAAAW,aAAA;EACFE,MAAA;EAMAZ,OAAM,EAAAJ,qBAAgB;EAEfK,QAAM;IACXC,QAAA;MACAC,KAAA;QACEU,IAAM;QACNC,eAAQ;QAERC,UAAS;QACTC,cAAU;QACRC,WAAU;QACRC,WAAO;QAAAC,UACC;UACND,WAAA;QAAiB;QACLE,UACZ;UACAN,eAAa;UACbI,WAAA,EAAa;QAAA;QAEDG,UACV;UACFH,WAAA;QAAA;QAEYI,iBACV;UAAiBC,YACjB,SAAa;UACfC,YAAA;UAEAC,YAAY;QAAA;MACG;IACf;IAEmBC,QACjB;MAAcC,IAAA,EACd;QAAcC,aACd,QAAc;QAAAC,UAChB;QACFC,MAAA;QACFX,UAAA;UAEAD,WAAU;UACRJ,eAAM;QAAA;QACWM,UACf;UACAF,WAAQ;UAERJ,eAAY;QAAA;QACGO,UACb;UACFG,YAAA;QAAA;MAEY;IACG;IACIX,IAAA,EACnB;MAAA,SAEA,WAAAkB,CAAYC,GAAA;QAAA,IACVC,WAAA,GAAczC,gBAAA,CAAAE,OAAA,CAAAsC,GAAA;QAAA,OAChB;UACFE,YAAA,EAAAD;QACF;MAEA;IAAM;EAEF;EACA7B,eAAO;IAAAF,QACL,EAAAG,OAAA,CAAAC,GAAA,CAAcC,gBAAA;EAAA;AAChB;EACFC,MACF;IACFC,WAAA;EAAA;AAEiB;AAC4B,SAE/CE,aAAA,EACAb,sBAAA","ignoreList":[]}
+{"version":3,"file":"Checkbox.native.js","names":[],"sources":["esm/Checkbox.native.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nimport { isIndeterminate, useCheckbox } from \"@tamagui/checkbox-headless\";\nimport { View, createStyledHOC, isWeb, shouldRenderNativePlatform, styled, withStaticProperties } from \"@tamagui/core\";\nimport { registerFocusable } from \"@tamagui/focusable\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport React, { useMemo } from \"react\";\nimport { CheckboxStyledContext } from \"./CheckboxStyledContext\";\n\nvar CheckboxIndicatorFrame = styled(View, {\n\tdisplayName: \"CheckboxIndicator\",\n\tcontext: CheckboxStyledContext\n});\nvar CheckboxFrame = styled(View, {\n\tdisplayName: \"Checkbox\",\n\trender: \"button\",\n\tcontext: CheckboxStyledContext,\n\talignItems: \"center\",\n\tjustifyContent: \"center\",\n\tvariants: { disabled: { true: {\n\t\tpointerEvents: \"none\",\n\t\tuserSelect: \"none\"\n\t} } }\n});\nvar CheckboxContext = /* @__PURE__ */ React.createContext({\n\tchecked: false,\n\tdisabled: false\n});\nvar Checkbox2 = withStaticProperties(createStyledHOC(CheckboxFrame, function Checkbox(propsIn, forwardedRef) {\n\tvar { checked: checkedProp, defaultChecked, onCheckedChange, native, activeStyle, activeTheme, ...props } = propsIn;\n\tvar [checked = false, setChecked] = useControllableState({\n\t\tprop: checkedProp,\n\t\tdefaultProp: defaultChecked,\n\t\tonChange: onCheckedChange\n\t});\n\tvar { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(props, [checked, setChecked], forwardedRef);\n\tReact.useEffect(function() {\n\t\tif (!props.id) return;\n\t\tif (props.disabled) return;\n\t\treturn registerFocusable(props.id, {\n\t\t\tfocusAndSelect: function() {\n\t\t\t\tsetChecked === null || setChecked === void 0 || setChecked(function(value) {\n\t\t\t\t\treturn !value;\n\t\t\t\t});\n\t\t\t},\n\t\t\tfocus: function() {}\n\t\t});\n\t}, [props.id, props.disabled]);\n\tif (shouldRenderNativePlatform(native) === \"web\") return /* @__PURE__ */ jsx(\"input\", {\n\t\ttype: \"checkbox\",\n\t\tdefaultChecked: isIndeterminate(checked) ? false : checked,\n\t\ttabIndex: -1,\n\t\tref: checkboxRef,\n\t\tdisabled: checkboxProps.disabled,\n\t\tstyle: checkboxProps.style\n\t});\n\tvar memoizedContext = useMemo(function() {\n\t\treturn {\n\t\t\tchecked,\n\t\t\tdisabled: checkboxProps.disabled\n\t\t};\n\t}, [checked, checkboxProps.disabled]);\n\tvar isActive = !!checked;\n\tvar disabled = checkboxProps.disabled;\n\treturn /* @__PURE__ */ jsxs(CheckboxContext.Provider, {\n\t\tvalue: memoizedContext,\n\t\tchildren: [/* @__PURE__ */ jsx(CheckboxFrame, {\n\t\t\trender: \"button\",\n\t\t\tref: checkboxRef,\n\t\t\ttheme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,\n\t\t\t...isWeb && { type: \"button\" },\n\t\t\tchecked,\n\t\t\t...checkboxProps,\n\t\t\tstyle: [checkboxProps.style, isActive && activeStyle],\n\t\t\tactive: isActive,\n\t\t\tdisabled,\n\t\t\tchildren: props.children\n\t\t}), bubbleInput]\n\t});\n}), { Indicator: createStyledHOC(CheckboxIndicatorFrame, function(props, forwardedRef) {\n\tvar { children, forceMount, activeStyle, ...indicatorProps } = props;\n\tvar { active } = CheckboxStyledContext.useStyledContext();\n\tvar context = React.useContext(CheckboxContext);\n\tif (forceMount || isIndeterminate(context.checked) || context.checked === true) return /* @__PURE__ */ jsx(CheckboxIndicatorFrame, {\n\t\tpointerEvents: \"none\",\n\t\t...indicatorProps,\n\t\tstyle: [indicatorProps.style, active && activeStyle],\n\t\tref: forwardedRef,\n\t\tchildren\n\t});\n\treturn null;\n}) });\n\nexport { Checkbox2 as Checkbox, CheckboxContext, CheckboxFrame, CheckboxIndicatorFrame };"],"mappings":";;;;;;;;;AAQA,IAAI,yBAAyB,OAAO,MAAM;CACzC,aAAa;CACb,SAAS;AACV,CAAC;AACD,IAAI,gBAAgB,OAAO,MAAM;CAChC,aAAa;CACb,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU,EAAE,UAAU,EAAE,MAAM;EAC7B,eAAe;EACf,YAAY;CACb,EAAE,EAAE;AACL,CAAC;AACD,IAAI,kBAAkC,sBAAM,cAAc;CACzD,SAAS;CACT,UAAU;AACX,CAAC;AACD,IAAI,YAAY,qBAAqB,gBAAgB,eAAe,SAAS,SAAS,SAAS,cAAc;CAC5G,IAAI,EAAE,SAAS,aAAa,gBAAgB,iBAAiB,QAAQ,aAAa,aAAa,GAAG,UAAU;CAC5G,IAAI,CAAC,UAAU,OAAO,cAAc,qBAAqB;EACxD,MAAM;EACN,aAAa;EACb,UAAU;CACX,CAAC;CACD,IAAI,EAAE,eAAe,aAAa,gBAAgB,YAAY,OAAO,CAAC,SAAS,UAAU,GAAG,YAAY;CACxG,MAAM,UAAU,WAAW;EAC1B,IAAI,CAAC,MAAM,IAAI;EACf,IAAI,MAAM,UAAU;EACpB,OAAO,kBAAkB,MAAM,IAAI;GAClC,gBAAgB,WAAW;IAC1B,eAAe,QAAQ,eAAe,KAAK,KAAK,WAAW,SAAS,OAAO;KAC1E,OAAO,CAAC;IACT,CAAC;GACF;GACA,OAAO,WAAW,CAAC;EACpB,CAAC;CACF,GAAG,CAAC,MAAM,IAAI,MAAM,QAAQ,CAAC;CAC7B,IAAI,2BAA2B,MAAM,MAAM,OAAO,OAAuB,oBAAI,SAAS;EACrF,MAAM;EACN,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;EACnD,UAAU,CAAC;EACX,KAAK;EACL,UAAU,cAAc;EACxB,OAAO,cAAc;CACtB,CAAC;CACD,IAAI,kBAAkB,QAAQ,WAAW;EACxC,OAAO;GACN;GACA,UAAU,cAAc;EACzB;CACD,GAAG,CAAC,SAAS,cAAc,QAAQ,CAAC;CACpC,IAAI,WAAW,CAAC,CAAC;CACjB,IAAI,WAAW,cAAc;CAC7B,OAAuB,qBAAK,gBAAgB,UAAU;EACrD,OAAO;EACP,UAAU,CAAiB,oBAAI,eAAe;GAC7C,QAAQ;GACR,KAAK;GACL,OAAO,gBAAgB,QAAQ,gBAAgB,KAAK,IAAI,cAAc;GACtE,GAAG,SAAS,EAAE,MAAM,SAAS;GAC7B;GACA,GAAG;GACH,OAAO,CAAC,cAAc,OAAO,YAAY,WAAW;GACpD,QAAQ;GACR;GACA,UAAU,MAAM;EACjB,CAAC,GAAG,WAAW;CAChB,CAAC;AACF,CAAC,GAAG,EAAE,WAAW,gBAAgB,wBAAwB,SAAS,OAAO,cAAc;CACtF,IAAI,EAAE,UAAU,YAAY,aAAa,GAAG,mBAAmB;CAC/D,IAAI,EAAE,WAAW,sBAAsB,iBAAiB;CACxD,IAAI,UAAU,MAAM,WAAW,eAAe;CAC9C,IAAI,cAAc,gBAAgB,QAAQ,OAAO,KAAK,QAAQ,YAAY,MAAM,OAAuB,oBAAI,wBAAwB;EAClI,eAAe;EACf,GAAG;EACH,OAAO,CAAC,eAAe,OAAO,UAAU,WAAW;EACnD,KAAK;EACL;CACD,CAAC;CACD,OAAO;AACR,CAAC,EAAE,CAAC"}

package/dist/esm/CheckboxStyledContext.mjs

@@ -1,10 +1,10 @@
 import { createStyledContext } from "@tamagui/core";
+
 const CheckboxStyledContext = createStyledContext({
-  size: "$true",
-  scaleIcon: 1,
-  unstyled: process.env.TAMAGUI_HEADLESS === "1",
-  active: false,
-  disabled: false
+	size: true,
+	active: false,
+	disabled: false
 });
+
 export { CheckboxStyledContext };
 //# sourceMappingURL=CheckboxStyledContext.mjs.map

package/dist/esm/CheckboxStyledContext.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["createStyledContext","CheckboxStyledContext","size","scaleIcon","unstyled","process","env","TAMAGUI_HEADLESS","active","disabled"],"sources":["../../src/CheckboxStyledContext.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,mBAAA,QAA2B;AAE7B,MAAMC,qBAAA,GAAwBD,mBAAA,CAMlC;EACDE,IAAA,EAAM;EACNC,SAAA,EAAW;EACXC,QAAA,EAAUC,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC3CC,MAAA,EAAQ;EACRC,QAAA,EAAU;AACZ,CAAC","ignoreList":[]}
+{"version":3,"file":"CheckboxStyledContext.js","names":[],"sources":["esm/CheckboxStyledContext.js"],"sourcesContent":["import { createStyledContext } from \"@tamagui/core\";\nconst CheckboxStyledContext = createStyledContext({\n  size: true,\n  active: false,\n  disabled: false\n});\nexport {\n  CheckboxStyledContext\n};\n//# sourceMappingURL=CheckboxStyledContext.js.map\n"],"mappings":";;;AACA,MAAM,wBAAwB,oBAAoB;CAChD,MAAM;CACN,QAAQ;CACR,UAAU;AACZ,CAAC"}

package/dist/esm/CheckboxStyledContext.native.js

@@ -1,10 +1,10 @@
 import { createStyledContext } from "@tamagui/core";
+
 var CheckboxStyledContext = createStyledContext({
-  size: "$true",
-  scaleIcon: 1,
-  unstyled: process.env.TAMAGUI_HEADLESS === "1",
-  active: false,
-  disabled: false
+	size: true,
+	active: false,
+	disabled: false
 });
+
 export { CheckboxStyledContext };
 //# sourceMappingURL=CheckboxStyledContext.native.js.map

package/dist/esm/CheckboxStyledContext.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["createStyledContext","CheckboxStyledContext","size","scaleIcon","unstyled","process","env","TAMAGUI_HEADLESS","active","disabled"],"sources":["../../src/CheckboxStyledContext.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,mBAAA,QAA2B;AAE7B,IAAAC,qBAAM,GAAAD,mBAAwB;EAOnCE,IAAA,EAAM;EACNC,SAAA,EAAW;EACXC,QAAA,EAAUC,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC3CC,MAAA,EAAQ;EACRC,QAAA,EAAU;AACZ,CAAC","ignoreList":[]}
+{"version":3,"file":"CheckboxStyledContext.native.js","names":[],"sources":["esm/CheckboxStyledContext.native.js"],"sourcesContent":["import { createStyledContext } from \"@tamagui/core\";\nvar CheckboxStyledContext = createStyledContext({\n  size: true,\n  active: false,\n  disabled: false\n});\nexport {\n  CheckboxStyledContext\n};\n//# sourceMappingURL=CheckboxStyledContext.js.map\n"],"mappings":";;;AACA,IAAI,wBAAwB,oBAAoB;CAC9C,MAAM;CACN,QAAQ;CACR,UAAU;AACZ,CAAC"}

package/dist/esm/index.js

@@ -1,11 +1,3 @@
-import { CheckboxFrame, CheckboxIndicatorFrame } from "./Checkbox.mjs";
-import { createCheckbox } from "./createCheckbox.mjs";
-export * from "./createCheckbox.mjs";
-export * from "./Checkbox.mjs";
-export * from "./CheckboxStyledContext.mjs";
-const Checkbox = createCheckbox({
-  Frame: CheckboxFrame,
-  Indicator: CheckboxIndicatorFrame
-});
-export { Checkbox };
-//# sourceMappingURL=index.js.map
+export * from "./Checkbox.mjs"
+
+export * from "./CheckboxStyledContext.mjs"

package/dist/esm/index.mjs

@@ -1,11 +1,3 @@
-import { CheckboxFrame, CheckboxIndicatorFrame } from "./Checkbox.mjs";
-import { createCheckbox } from "./createCheckbox.mjs";
-export * from "./createCheckbox.mjs";
-export * from "./Checkbox.mjs";
-export * from "./CheckboxStyledContext.mjs";
-const Checkbox = createCheckbox({
-  Frame: CheckboxFrame,
-  Indicator: CheckboxIndicatorFrame
-});
-export { Checkbox };
-//# sourceMappingURL=index.mjs.map
+export * from "./Checkbox.mjs"
+
+export * from "./CheckboxStyledContext.mjs"

package/dist/esm/index.native.js

@@ -1,11 +1,3 @@
-import { CheckboxFrame, CheckboxIndicatorFrame } from "./Checkbox.native.js";
-import { createCheckbox } from "./createCheckbox.native.js";
-export * from "./createCheckbox.native.js";
-export * from "./Checkbox.native.js";
-export * from "./CheckboxStyledContext.native.js";
-var Checkbox = createCheckbox({
-  Frame: CheckboxFrame,
-  Indicator: CheckboxIndicatorFrame
-});
-export { Checkbox };
-//# sourceMappingURL=index.native.js.map
+export * from "./Checkbox.native.js"
+
+export * from "./CheckboxStyledContext.native.js"

package/dist/jsx/Checkbox.mjs

@@ -1,90 +1,79 @@
-import { getVariableValue, styled } from "@tamagui/core";
-import { getSize } from "@tamagui/get-token";
-import { YStack } from "@tamagui/stacks";
+import { isIndeterminate, useCheckbox } from "@tamagui/checkbox-headless";
+import { View, createStyledHOC, isWeb, shouldRenderNativePlatform, styled, withStaticProperties } from "@tamagui/core";
+import { useControllableState } from "@tamagui/use-controllable-state";
+import React, { useMemo } from "react";
 import { CheckboxStyledContext } from "./CheckboxStyledContext.mjs";
-const INDICATOR_NAME = "CheckboxIndicator";
-const CheckboxIndicatorFrame = styled(YStack, {
-  // use Checkbox for easier themes
-  name: INDICATOR_NAME,
-  context: CheckboxStyledContext,
-  variants: {
-    unstyled: {
-      false: {}
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+import { jsx, jsxs } from "react/jsx-runtime";
+
+const CheckboxIndicatorFrame = styled(View, {
+	displayName: "CheckboxIndicator",
+	context: CheckboxStyledContext
 });
-const CHECKBOX_NAME = "Checkbox";
-const CheckboxFrame = styled(YStack, {
-  name: CHECKBOX_NAME,
-  render: "button",
-  context: CheckboxStyledContext,
-  variants: {
-    unstyled: {
-      false: {
-        size: "$true",
-        backgroundColor: "$background",
-        alignItems: "center",
-        justifyContent: "center",
-        borderWidth: 1,
-        borderColor: "$borderColor",
-        hoverStyle: {
-          borderColor: "$borderColorHover"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress",
-          borderColor: "$borderColorPress"
-        },
-        focusStyle: {
-          borderColor: "$borderColorFocus"
-        },
-        focusVisibleStyle: {
-          outlineStyle: "solid",
-          outlineWidth: 2,
-          outlineColor: "$outlineColor"
-        }
-      }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none",
-        userSelect: "none",
-        cursor: "not-allowed",
-        hoverStyle: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background"
-        },
-        pressStyle: {
-          borderColor: "$borderColor",
-          backgroundColor: "$background"
-        },
-        focusStyle: {
-          outlineWidth: 0
-        }
-      }
-    },
-    size: {
-      "...size": val => {
-        const radiusToken = getVariableValue(getSize(val)) / 8;
-        return {
-          borderRadius: radiusToken
-        };
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-}, {
-  accept: {
-    activeStyle: "style"
-  }
+const CheckboxFrame = styled(View, {
+	displayName: "Checkbox",
+	render: "button",
+	context: CheckboxStyledContext,
+	alignItems: "center",
+	justifyContent: "center",
+	variants: { disabled: { true: {
+		pointerEvents: "none",
+		userSelect: "none"
+	} } }
 });
-export { CheckboxFrame, CheckboxIndicatorFrame };
+const CheckboxContext = React.createContext({
+	checked: false,
+	disabled: false
+});
+const Checkbox2 = withStaticProperties(createStyledHOC(CheckboxFrame, function Checkbox(propsIn, forwardedRef) {
+	const { checked: checkedProp, defaultChecked, onCheckedChange, native, activeStyle, activeTheme, ...props } = propsIn;
+	const [checked = false, setChecked] = useControllableState({
+		prop: checkedProp,
+		defaultProp: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(props, [checked, setChecked], forwardedRef);
+	if (shouldRenderNativePlatform(native) === "web") return /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		defaultChecked: isIndeterminate(checked) ? false : checked,
+		tabIndex: -1,
+		ref: checkboxRef,
+		disabled: checkboxProps.disabled,
+		style: checkboxProps.style
+	});
+	const memoizedContext = useMemo(() => ({
+		checked,
+		disabled: checkboxProps.disabled
+	}), [checked, checkboxProps.disabled]);
+	const isActive = !!checked;
+	const disabled = checkboxProps.disabled;
+	return /* @__PURE__ */ jsxs(CheckboxContext.Provider, {
+		value: memoizedContext,
+		children: [/* @__PURE__ */ jsx(CheckboxFrame, {
+			render: "button",
+			ref: checkboxRef,
+			theme: activeTheme ?? null,
+			...isWeb && { type: "button" },
+			checked,
+			...checkboxProps,
+			style: [checkboxProps.style, isActive && activeStyle],
+			active: isActive,
+			disabled,
+			children: props.children
+		}), bubbleInput]
+	});
+}), { Indicator: createStyledHOC(CheckboxIndicatorFrame, (props, forwardedRef) => {
+	const { children, forceMount, activeStyle, ...indicatorProps } = props;
+	const { active } = CheckboxStyledContext.useStyledContext();
+	const context = React.useContext(CheckboxContext);
+	if (forceMount || isIndeterminate(context.checked) || context.checked === true) return /* @__PURE__ */ jsx(CheckboxIndicatorFrame, {
+		pointerEvents: "none",
+		...indicatorProps,
+		style: [indicatorProps.style, active && activeStyle],
+		ref: forwardedRef,
+		children
+	});
+	return null;
+}) });
+
+export { Checkbox2 as Checkbox, CheckboxContext, CheckboxFrame, CheckboxIndicatorFrame };
 //# sourceMappingURL=Checkbox.mjs.map

package/dist/jsx/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["getVariableValue","styled","getSize","YStack","CheckboxStyledContext","INDICATOR_NAME","CheckboxIndicatorFrame","name","context","variants","unstyled","false","defaultVariants","process","env","TAMAGUI_HEADLESS","accept","activeStyle","CHECKBOX_NAME","CheckboxFrame","render","size","backgroundColor","alignItems","justifyContent","borderWidth","borderColor","hoverStyle","pressStyle","focusStyle","focusVisibleStyle","outlineStyle","outlineWidth","outlineColor","disabled","true","pointerEvents","userSelect","cursor","val","radiusToken","borderRadius"],"sources":["../../src/Checkbox.tsx"],"sourcesContent":[null],"mappings":"AAGA,SAASA,gBAAA,EAAkBC,MAAA,QAAc;AACzC,SAASC,OAAA,QAAe;AACxB,SAASC,MAAA,QAAc;AAEvB,SAASC,qBAAA,QAA6B;AAKtC,MAAMC,cAAA,GAAiB;AAEhB,MAAMC,sBAAA,GAAyBL,MAAA,CACpCE,MAAA,EACA;EAAA;EAEEI,IAAA,EAAMF,cAAA;EACNG,OAAA,EAASJ,qBAAA;EACTK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO,CAAC;IACV;EACF;EACAC,eAAA,EAAiB;IACfF,QAAA,EAAUG,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,GACA;EACEC,MAAA,EAAQ;IACNC,WAAA,EAAa;EACf;AACF,CACF;AAMA,MAAMC,aAAA,GAAgB;AAEf,MAAMC,aAAA,GAAgBlB,MAAA,CAC3BE,MAAA,EACA;EACEI,IAAA,EAAMW,aAAA;EACNE,MAAA,EAAQ;EAERZ,OAAA,EAASJ,qBAAA;EACTK,QAAA,EAAU;IACRC,QAAA,EAAU;MACRC,KAAA,EAAO;QACLU,IAAA,EAAM;QACNC,eAAA,EAAiB;QACjBC,UAAA,EAAY;QACZC,cAAA,EAAgB;QAChBC,WAAA,EAAa;QACbC,WAAA,EAAa;QAEbC,UAAA,EAAY;UACVD,WAAA,EAAa;QACf;QAEAE,UAAA,EAAY;UACVN,eAAA,EAAiB;UACjBI,WAAA,EAAa;QACf;QAEAG,UAAA,EAAY;UACVH,WAAA,EAAa;QACf;QAEAI,iBAAA,EAAmB;UACjBC,YAAA,EAAc;UACdC,YAAA,EAAc;UACdC,YAAA,EAAc;QAChB;MACF;IACF;IAEAC,QAAA,EAAU;MACRC,IAAA,EAAM;QACJC,aAAA,EAAe;QACfC,UAAA,EAAY;QACZC,MAAA,EAAQ;QAERX,UAAA,EAAY;UACVD,WAAA,EAAa;UACbJ,eAAA,EAAiB;QACnB;QAEAM,UAAA,EAAY;UACVF,WAAA,EAAa;UACbJ,eAAA,EAAiB;QACnB;QAEAO,UAAA,EAAY;UACVG,YAAA,EAAc;QAChB;MACF;IACF;IAEAX,IAAA,EAAM;MACJ,WAAYkB,GAAA,IAAQ;QAClB,MAAMC,WAAA,GAAcxC,gBAAA,CAAiBE,OAAA,CAAQqC,GAAG,CAAC,IAAI;QACrD,OAAO;UACLE,YAAA,EAAcD;QAChB;MACF;IACF;EACF;EAEA5B,eAAA,EAAiB;IACfF,QAAA,EAAUG,OAAA,CAAQC,GAAA,CAAIC,gBAAA,KAAqB;EAC7C;AACF,GACA;EACEC,MAAA,EAAQ;IACNC,WAAA,EAAa;EACf;AACF,CACF","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["jsx/Checkbox.js"],"sourcesContent":["import { isIndeterminate, useCheckbox } from \"@tamagui/checkbox-headless\";\nimport { View, createStyledHOC, isWeb, shouldRenderNativePlatform, styled, withStaticProperties } from \"@tamagui/core\";\nimport { useControllableState } from \"@tamagui/use-controllable-state\";\nimport React, { useMemo } from \"react\";\nimport { CheckboxStyledContext } from \"./CheckboxStyledContext\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\n\nconst CheckboxIndicatorFrame = styled(View, {\n\tdisplayName: \"CheckboxIndicator\",\n\tcontext: CheckboxStyledContext\n});\nconst CheckboxFrame = styled(View, {\n\tdisplayName: \"Checkbox\",\n\trender: \"button\",\n\tcontext: CheckboxStyledContext,\n\talignItems: \"center\",\n\tjustifyContent: \"center\",\n\tvariants: { disabled: { true: {\n\t\tpointerEvents: \"none\",\n\t\tuserSelect: \"none\"\n\t} } }\n});\nconst CheckboxContext = React.createContext({\n\tchecked: false,\n\tdisabled: false\n});\nconst Checkbox2 = withStaticProperties(createStyledHOC(CheckboxFrame, function Checkbox(propsIn, forwardedRef) {\n\tconst { checked: checkedProp, defaultChecked, onCheckedChange, native, activeStyle, activeTheme, ...props } = propsIn;\n\tconst [checked = false, setChecked] = useControllableState({\n\t\tprop: checkedProp,\n\t\tdefaultProp: defaultChecked,\n\t\tonChange: onCheckedChange\n\t});\n\tconst { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(props, [checked, setChecked], forwardedRef);\n\tif (shouldRenderNativePlatform(native) === \"web\") return /* @__PURE__ */ jsx(\"input\", {\n\t\ttype: \"checkbox\",\n\t\tdefaultChecked: isIndeterminate(checked) ? false : checked,\n\t\ttabIndex: -1,\n\t\tref: checkboxRef,\n\t\tdisabled: checkboxProps.disabled,\n\t\tstyle: checkboxProps.style\n\t});\n\tconst memoizedContext = useMemo(() => ({\n\t\tchecked,\n\t\tdisabled: checkboxProps.disabled\n\t}), [checked, checkboxProps.disabled]);\n\tconst isActive = !!checked;\n\tconst disabled = checkboxProps.disabled;\n\treturn /* @__PURE__ */ jsxs(CheckboxContext.Provider, {\n\t\tvalue: memoizedContext,\n\t\tchildren: [/* @__PURE__ */ jsx(CheckboxFrame, {\n\t\t\trender: \"button\",\n\t\t\tref: checkboxRef,\n\t\t\ttheme: activeTheme ?? null,\n\t\t\t...isWeb && { type: \"button\" },\n\t\t\tchecked,\n\t\t\t...checkboxProps,\n\t\t\tstyle: [checkboxProps.style, isActive && activeStyle],\n\t\t\tactive: isActive,\n\t\t\tdisabled,\n\t\t\tchildren: props.children\n\t\t}), bubbleInput]\n\t});\n}), { Indicator: createStyledHOC(CheckboxIndicatorFrame, (props, forwardedRef) => {\n\tconst { children, forceMount, activeStyle, ...indicatorProps } = props;\n\tconst { active } = CheckboxStyledContext.useStyledContext();\n\tconst context = React.useContext(CheckboxContext);\n\tif (forceMount || isIndeterminate(context.checked) || context.checked === true) return /* @__PURE__ */ jsx(CheckboxIndicatorFrame, {\n\t\tpointerEvents: \"none\",\n\t\t...indicatorProps,\n\t\tstyle: [indicatorProps.style, active && activeStyle],\n\t\tref: forwardedRef,\n\t\tchildren\n\t});\n\treturn null;\n}) });\n\nexport { Checkbox2 as Checkbox, CheckboxContext, CheckboxFrame, CheckboxIndicatorFrame };"],"mappings":";;;;;;;;AAOA,MAAM,yBAAyB,OAAO,MAAM;CAC3C,aAAa;CACb,SAAS;AACV,CAAC;AACD,MAAM,gBAAgB,OAAO,MAAM;CAClC,aAAa;CACb,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU,EAAE,UAAU,EAAE,MAAM;EAC7B,eAAe;EACf,YAAY;CACb,EAAE,EAAE;AACL,CAAC;AACD,MAAM,kBAAkB,MAAM,cAAc;CAC3C,SAAS;CACT,UAAU;AACX,CAAC;AACD,MAAM,YAAY,qBAAqB,gBAAgB,eAAe,SAAS,SAAS,SAAS,cAAc;CAC9G,MAAM,EAAE,SAAS,aAAa,gBAAgB,iBAAiB,QAAQ,aAAa,aAAa,GAAG,UAAU;CAC9G,MAAM,CAAC,UAAU,OAAO,cAAc,qBAAqB;EAC1D,MAAM;EACN,aAAa;EACb,UAAU;CACX,CAAC;CACD,MAAM,EAAE,eAAe,aAAa,gBAAgB,YAAY,OAAO,CAAC,SAAS,UAAU,GAAG,YAAY;CAC1G,IAAI,2BAA2B,MAAM,MAAM,OAAO,OAAuB,oBAAI,SAAS;EACrF,MAAM;EACN,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;EACnD,UAAU,CAAC;EACX,KAAK;EACL,UAAU,cAAc;EACxB,OAAO,cAAc;CACtB,CAAC;CACD,MAAM,kBAAkB,eAAe;EACtC;EACA,UAAU,cAAc;CACzB,IAAI,CAAC,SAAS,cAAc,QAAQ,CAAC;CACrC,MAAM,WAAW,CAAC,CAAC;CACnB,MAAM,WAAW,cAAc;CAC/B,OAAuB,qBAAK,gBAAgB,UAAU;EACrD,OAAO;EACP,UAAU,CAAiB,oBAAI,eAAe;GAC7C,QAAQ;GACR,KAAK;GACL,OAAO,eAAe;GACtB,GAAG,SAAS,EAAE,MAAM,SAAS;GAC7B;GACA,GAAG;GACH,OAAO,CAAC,cAAc,OAAO,YAAY,WAAW;GACpD,QAAQ;GACR;GACA,UAAU,MAAM;EACjB,CAAC,GAAG,WAAW;CAChB,CAAC;AACF,CAAC,GAAG,EAAE,WAAW,gBAAgB,yBAAyB,OAAO,iBAAiB;CACjF,MAAM,EAAE,UAAU,YAAY,aAAa,GAAG,mBAAmB;CACjE,MAAM,EAAE,WAAW,sBAAsB,iBAAiB;CAC1D,MAAM,UAAU,MAAM,WAAW,eAAe;CAChD,IAAI,cAAc,gBAAgB,QAAQ,OAAO,KAAK,QAAQ,YAAY,MAAM,OAAuB,oBAAI,wBAAwB;EAClI,eAAe;EACf,GAAG;EACH,OAAO,CAAC,eAAe,OAAO,UAAU,WAAW;EACnD,KAAK;EACL;CACD,CAAC;CACD,OAAO;AACR,CAAC,EAAE,CAAC"}

package/dist/jsx/Checkbox.native.cjs

@@ -0,0 +1,128 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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: 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;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+	Checkbox: () => Checkbox2,
+	CheckboxContext: () => CheckboxContext,
+	CheckboxFrame: () => CheckboxFrame,
+	CheckboxIndicatorFrame: () => CheckboxIndicatorFrame
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_checkbox_headless = require("@tamagui/checkbox-headless");
+var import_core = require("@tamagui/core");
+var import_focusable = require("@tamagui/focusable");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_react = __toESM(require("react"), 1);
+var import_CheckboxStyledContext = require("./CheckboxStyledContext.native.js");
+var CheckboxIndicatorFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "CheckboxIndicator",
+	context: import_CheckboxStyledContext.CheckboxStyledContext
+});
+var CheckboxFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "Checkbox",
+	render: "button",
+	context: import_CheckboxStyledContext.CheckboxStyledContext,
+	alignItems: "center",
+	justifyContent: "center",
+	variants: { disabled: { true: {
+		pointerEvents: "none",
+		userSelect: "none"
+	} } }
+});
+var CheckboxContext = /* @__PURE__ */ import_react.default.createContext({
+	checked: false,
+	disabled: false
+});
+var CheckboxComponent = (0, import_core.createStyledHOC)(CheckboxFrame, function Checkbox(propsIn, forwardedRef) {
+	var { checked: checkedProp, defaultChecked, onCheckedChange, native, activeStyle, activeTheme, ...props } = propsIn;
+	var [checked = false, setChecked] = (0, import_use_controllable_state.useControllableState)({
+		prop: checkedProp,
+		defaultProp: defaultChecked,
+		onChange: onCheckedChange
+	});
+	var { checkboxProps, checkboxRef, bubbleInput } = (0, import_checkbox_headless.useCheckbox)(props, [checked, setChecked], forwardedRef);
+	import_react.default.useEffect(function() {
+		if (!props.id) return;
+		if (props.disabled) return;
+		return (0, import_focusable.registerFocusable)(props.id, {
+			focusAndSelect: function() {
+				setChecked === null || setChecked === void 0 || setChecked(function(value) {
+					return !value;
+				});
+			},
+			focus: function() {}
+		});
+	}, [props.id, props.disabled]);
+	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: checkboxProps.style
+	});
+	var memoizedContext = (0, import_react.useMemo)(function() {
+		return {
+			checked,
+			disabled: checkboxProps.disabled
+		};
+	}, [checked, checkboxProps.disabled]);
+	var isActive = !!checked;
+	var disabled = checkboxProps.disabled;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CheckboxContext.Provider, {
+		value: memoizedContext,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxFrame, {
+			render: "button",
+			ref: checkboxRef,
+			theme: activeTheme !== null && activeTheme !== void 0 ? activeTheme : null,
+			...import_core.isWeb && { type: "button" },
+			checked,
+			...checkboxProps,
+			style: [checkboxProps.style, isActive && activeStyle],
+			active: isActive,
+			disabled,
+			children: props.children
+		}), bubbleInput]
+	});
+});
+var CheckboxIndicator = (0, import_core.createStyledHOC)(CheckboxIndicatorFrame, function(props, forwardedRef) {
+	var { children, forceMount, activeStyle, ...indicatorProps } = props;
+	var { active } = import_CheckboxStyledContext.CheckboxStyledContext.useStyledContext();
+	var 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)(CheckboxIndicatorFrame, {
+		pointerEvents: "none",
+		...indicatorProps,
+		style: [indicatorProps.style, active && activeStyle],
+		ref: forwardedRef,
+		children
+	});
+	return null;
+});
+var Checkbox2 = (0, import_core.withStaticProperties)(CheckboxComponent, { Indicator: CheckboxIndicator });