@tamagui/checkbox 1.14.0 → 1.14.2

package/dist/jsx/Checkbox.js

@@ -1,2 +1,272 @@
-import{usePrevious as N}from"@radix-ui/react-use-previous";import{composeEventHandlers as E,getVariableValue as M,isWeb as P,styled as F,useComposedRefs as $,useMediaPropsActive as K,useTheme as U,withStaticProperties as W}from"@tamagui/core";import{createContextScope as X}from"@tamagui/create-context";import{registerFocusable as J}from"@tamagui/focusable";import{getFontSize as Q}from"@tamagui/font-size";import{getSize as Y,stepTokenUpOrDown as Z}from"@tamagui/get-size";import{useGetThemedIcon as ee}from"@tamagui/helpers-tamagui";import{useLabelContext as te}from"@tamagui/label";import{ThemeableStack as H}from"@tamagui/stacks";import{useControllableState as oe}from"@tamagui/use-controllable-state";import*as c from"react";function l(e){return e==="indeterminate"}function A(e){return l(e)?"indeterminate":e?"checked":"unchecked"}const B=e=>{const{checked:o,bubbles:s=!0,control:C,isHidden:a,...h}=e,u=c.useRef(null),t=N(o);return c.useEffect(()=>{const i=u.current,b=window.HTMLInputElement.prototype,r=Object.getOwnPropertyDescriptor(b,"checked").set;if(t!==o&&r){const d=new Event("click",{bubbles:s});i.indeterminate=l(o),r.call(i,l(o)?!1:o),i.dispatchEvent(d)}},[t,o,s]),<input type="checkbox"defaultChecked={l(o)?!1:o}{...h}tabIndex={-1}ref={u}aria-hidden={a}style={{...a?{position:"absolute",pointerEvents:"none",opacity:0,margin:0}:{appearance:"auto",accentColor:"var(--color6)"},...e.style}}/>},g="CheckboxIndicator",R=F(H,{name:g}),w=R.extractable(c.forwardRef((e,o)=>{const{__scopeCheckbox:s,children:C,forceMount:a,disablePassStyles:h,...u}=e,t=fe(g,s),i=(typeof t.size=="number"?t.size*.65:Q(t.size))*t.scaleIcon,b=U(),f=ee({size:i,color:b.color}),d=c.Children.toArray(C).map(m=>h||!c.isValidElement(m)?m:f(m));return a||l(t.state)||t.state===!0?<R data-state={A(t.state)}data-disabled={t.disabled?"":void 0}pointerEvents="none"{...u}ref={o}>{d}</R>:null}));w.displayName=g;const y="Checkbox",L=F(H,{name:y,tag:"button",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",alignItems:"center",justifyContent:"center",pressTheme:!0,focusable:!0,borderWidth:1,borderColor:"$borderColor",hoverStyle:{borderColor:"$borderColorHover"},focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":(e,{tokens:o})=>({borderRadius:M(Y(e))/8})}},defaultVariants:{unstyled:!1}}),[re,ne]=X(y),[Ce,fe]=re(y),xe=W(L.extractable(c.forwardRef((e,o)=>{const{__scopeCheckbox:s,labelledBy:C,name:a,checked:h,defaultChecked:u,required:t,scaleIcon:i=1,scaleSize:b=.45,sizeAdjust:f=0,disabled:r,value:d="on",onCheckedChange:m,native:_,...D}=e,[k,O]=c.useState(null),G=$(o,n=>O(n)),x=c.useRef(!1),V=K(e),v=P?k?Boolean(k.closest("form")):!0:!1,[p=!1,S]=oe({prop:h,defaultProp:u,onChange:m}),T=M(Z("size",V.size,f)),I=b?Math.round(T*b):T,j=te(k),q=C||j;return process.env.TAMAGUI_TARGET==="native"&&c.useEffect(()=>{if(e.id)return J(e.id,{focusAndSelect:()=>{S(n=>!n)},focus:()=>{}})},[e.id,S]),<Ce scope={s}state={p}disabled={r}size={I}scaleIcon={i}>{P&&_?<B control={k}bubbles={!x.current}name={a}value={d}checked={p}required={t}disabled={r}id={e.id}/>:<><L width={I}height={I}tag="button"role="checkbox"aria-labelledby={q}aria-checked={l(p)?"mixed":p}aria-required={t}data-state={A(p)}data-disabled={r?"":void 0}disabled={r}{...D}ref={G}{...P&&{type:"button",value:d,onKeyDown:E(e.onKeyDown,n=>{n.key==="Enter"&&n.preventDefault()})}}onPress={E(e.onPress,n=>{S(z=>l(z)?!0:!z),v&&(x.current=n.isPropagationStopped(),x.current||n.stopPropagation())})}/>{P&&v?<B isHidden control={k}bubbles={!x.current}name={a}value={d}checked={p}required={t}disabled={r}/>:null}</>}</Ce>})),{Indicator:w});xe.displayName=y;export{B as BubbleInput,xe as Checkbox,L as CheckboxFrame,ne as createCheckboxScope,A as getState,l as isIndeterminate};
+import { usePrevious } from "@radix-ui/react-use-previous";
+import {
+  composeEventHandlers,
+  getVariableValue,
+  isWeb,
+  styled,
+  useComposedRefs,
+  useMediaPropsActive,
+  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 <input
+    type="checkbox"
+    defaultChecked={isIndeterminate(checked) ? false : checked}
+    {...inputProps}
+    tabIndex={-1}
+    ref={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 <CheckboxIndicatorFrame
+          data-state={getState(context.state)}
+          data-disabled={context.disabled ? "" : void 0}
+          pointerEvents="none"
+          {...indicatorProps}
+          ref={forwardedRef}
+        >{children}</CheckboxIndicatorFrame>;
+      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(
+      (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 = useMediaPropsActive(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 <CheckboxProvider
+          scope={__scopeCheckbox}
+          state={checked}
+          disabled={disabled}
+          size={size}
+          scaleIcon={scaleIcon}
+        >{isWeb && native ? <BubbleInput
+          control={button}
+          bubbles={!hasConsumerStoppedPropagationRef.current}
+          name={name}
+          value={value}
+          checked={checked}
+          required={required}
+          disabled={disabled}
+          id={props.id}
+        /> : <>
+          <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={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 ? <BubbleInput
+            isHidden
+            control={button}
+            bubbles={!hasConsumerStoppedPropagationRef.current}
+            name={name}
+            value={value}
+            checked={checked}
+            required={required}
+            disabled={disabled}
+          /> : null}
+        </>}</CheckboxProvider>;
+      }
+    )
+  ),
+  {
+    Indicator: CheckboxIndicator
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+export {
+  BubbleInput,
+  Checkbox,
+  CheckboxFrame,
+  createCheckboxScope,
+  getState,
+  isIndeterminate
+};
 //# sourceMappingURL=Checkbox.js.map

package/dist/jsx/Checkbox.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/Checkbox.tsx"],
   "sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n  GetProps,\n  SizeTokens,\n  TamaguiElement,\n  composeEventHandlers,\n  getVariableValue,\n  isWeb,\n  styled,\n  useComposedRefs,\n  useMediaPropsActive,\n  useTheme,\n  withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n  return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n  checked: CheckedState\n  control: HTMLElement | null\n  bubbles: boolean\n\n  isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n  const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n  const ref = React.useRef<HTMLInputElement>(null)\n  const prevChecked = usePrevious(checked)\n  //   const controlSize = useSize(control)\n\n  // Bubble checked change to parents (e.g form change event)\n  React.useEffect(() => {\n    const input = ref.current!\n    const inputProto = window.HTMLInputElement.prototype\n    const descriptor = Object.getOwnPropertyDescriptor(\n      inputProto,\n      'checked'\n    ) as PropertyDescriptor\n    const setChecked = descriptor.set\n\n    if (prevChecked !== checked && setChecked) {\n      const event = new Event('click', { bubbles })\n      input.indeterminate = isIndeterminate(checked)\n      setChecked.call(input, isIndeterminate(checked) ? false : checked)\n      input.dispatchEvent(event)\n    }\n  }, [prevChecked, checked, bubbles])\n\n  return (\n    <input\n      type=\"checkbox\"\n      defaultChecked={isIndeterminate(checked) ? false : checked}\n      {...inputProps}\n      tabIndex={-1}\n      ref={ref}\n      aria-hidden={isHidden}\n      style={{\n        ...(isHidden\n          ? {\n              // ...controlSize,\n              position: 'absolute',\n              pointerEvents: 'none',\n              opacity: 0,\n              margin: 0,\n            }\n          : {\n              appearance: 'auto',\n              accentColor: 'var(--color6)',\n            }),\n\n        ...props.style,\n      }}\n    />\n  )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n  // use Checkbox for easier themes\n  name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with React animation libraries.\n   */\n  forceMount?: true\n  /**\n   * Used to disable passing styles down to children.\n   */\n  disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n  React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n    (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n      const {\n        __scopeCheckbox,\n        children: childrenProp,\n        forceMount,\n        disablePassStyles,\n        ...indicatorProps\n      } = props\n      const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n      const iconSize =\n        (typeof context.size === 'number'\n          ? context.size * 0.65\n          : getFontSize(context.size)) * context.scaleIcon\n      const theme = useTheme()\n      const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n      const childrens = React.Children.toArray(childrenProp)\n      const children = childrens.map((child) => {\n        if (disablePassStyles || !React.isValidElement(child)) {\n          return child\n        }\n        return getThemedIcon(child)\n      })\n\n      if (forceMount || isIndeterminate(context.state) || context.state === true)\n        return (\n          <CheckboxIndicatorFrame\n            data-state={getState(context.state)}\n            data-disabled={context.disabled ? '' : undefined}\n            pointerEvents=\"none\"\n            {...indicatorProps}\n            ref={forwardedRef}\n          >\n            {children}\n          </CheckboxIndicatorFrame>\n        )\n\n      return null\n    }\n  )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n  name: CHECKBOX_NAME,\n  tag: 'button',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        alignItems: 'center',\n        justifyContent: 'center',\n        pressTheme: true,\n        focusable: true,\n        borderWidth: 1,\n        borderColor: '$borderColor',\n\n        hoverStyle: {\n          borderColor: '$borderColorHover',\n        },\n\n        focusStyle: {\n          borderColor: '$borderColorFocus',\n        },\n      },\n    },\n\n    size: {\n      '...size': (val, { tokens }) => {\n        const radiusToken = getVariableValue(getSize(val)) / 8\n        return {\n          borderRadius: radiusToken,\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n  state: CheckedState\n  disabled?: boolean\n  size: SizeTokens\n  scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n  createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n  extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n  checked?: CheckedState\n  defaultChecked?: CheckedState\n  required?: boolean\n  onCheckedChange?(checked: CheckedState): void\n  labelledBy?: string\n  name?: string\n  value?: string\n  native?: boolean\n  scaleIcon?: number\n  scaleSize?: number\n  sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n  CheckboxFrame.extractable(\n    React.forwardRef<HTMLButtonElement, CheckboxProps>(\n      (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n        const {\n          __scopeCheckbox,\n          labelledBy: ariaLabelledby,\n          name,\n          checked: checkedProp,\n          defaultChecked,\n          required,\n          scaleIcon = 1,\n          scaleSize = 0.45,\n          sizeAdjust = 0,\n          disabled,\n          value = 'on',\n          onCheckedChange,\n          native,\n          ...checkboxProps\n        } = props\n        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n        const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n        const hasConsumerStoppedPropagationRef = React.useRef(false)\n        const propsActive = useMediaPropsActive(props)\n        // We set this to true by default so that events bubble to forms without JS (SSR)\n        const isFormControl = isWeb\n          ? button\n            ? Boolean(button.closest('form'))\n            : true\n          : false\n        const [checked = false, setChecked] = useControllableState({\n          prop: checkedProp,\n          defaultProp: defaultChecked!,\n          onChange: onCheckedChange,\n        })\n\n        const adjustedSize = getVariableValue(\n          stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n        )\n        const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n\n        if (process.env.TAMAGUI_TARGET === 'native') {\n          // eslint-disable-next-line react-hooks/rules-of-hooks\n          React.useEffect(() => {\n            if (!props.id) return\n            return registerFocusable(props.id, {\n              focusAndSelect: () => {\n                setChecked((x) => !x)\n              },\n              focus: () => {},\n            })\n          }, [props.id, setChecked])\n        }\n\n        return (\n          <CheckboxProvider\n            scope={__scopeCheckbox}\n            state={checked}\n            disabled={disabled}\n            size={size}\n            scaleIcon={scaleIcon}\n          >\n            {isWeb && native ? (\n              <BubbleInput\n                control={button}\n                bubbles={!hasConsumerStoppedPropagationRef.current}\n                name={name}\n                value={value}\n                checked={checked}\n                required={required}\n                disabled={disabled}\n                id={props.id}\n              />\n            ) : (\n              <>\n                <CheckboxFrame\n                  width={size}\n                  height={size}\n                  tag=\"button\"\n                  role=\"checkbox\"\n                  aria-labelledby={labelledBy}\n                  aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n                  aria-required={required}\n                  data-state={getState(checked)}\n                  data-disabled={disabled ? '' : undefined}\n                  disabled={disabled}\n                  {...checkboxProps}\n                  ref={composedRefs}\n                  {...(isWeb && {\n                    type: 'button',\n                    value,\n                    onKeyDown: composeEventHandlers(\n                      (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n                      (event) => {\n                        // According to WAI ARIA, Checkboxes don't activate on enter keypress\n                        if (event.key === 'Enter') event.preventDefault()\n                      }\n                    ),\n                  })}\n                  onPress={composeEventHandlers(props.onPress as any, (event) => {\n                    setChecked((prevChecked) =>\n                      isIndeterminate(prevChecked) ? true : !prevChecked\n                    )\n                    if (isFormControl) {\n                      hasConsumerStoppedPropagationRef.current =\n                        event.isPropagationStopped()\n                      // if checkbox is in a form, stop propagation from the button so that we only propagate\n                      // one click event (from the input). We propagate changes from an input so that native\n                      // form validation works and form events reflect checkbox updates.\n                      if (!hasConsumerStoppedPropagationRef.current)\n                        event.stopPropagation()\n                    }\n                  })}\n                />\n\n                {isWeb && isFormControl ? (\n                  <BubbleInput\n                    isHidden\n                    control={button}\n                    bubbles={!hasConsumerStoppedPropagationRef.current}\n                    name={name}\n                    value={value}\n                    checked={checked}\n                    required={required}\n                    disabled={disabled}\n                  />\n                ) : null}\n              </>\n            )}\n          </CheckboxProvider>\n        )\n      }\n    )\n  ),\n  {\n    Indicator: CheckboxIndicator,\n  }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
-  "mappings": "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",
-  "names": ["usePrevious", "composeEventHandlers", "getVariableValue", "isWeb", "styled", "useComposedRefs", "useMediaPropsActive", "useTheme", "withStaticProperties", "createContextScope", "registerFocusable", "getFontSize", "getSize", "stepTokenUpOrDown", "useGetThemedIcon", "useLabelContext", "ThemeableStack", "useControllableState", "React", "isIndeterminate", "checked", "getState", "BubbleInput", "props", "bubbles", "control", "isHidden", "inputProps", "ref", "prevChecked", "input", "inputProto", "setChecked", "event", "INDICATOR_NAME", "CheckboxIndicatorFrame", "CheckboxIndicator", "forwardedRef", "__scopeCheckbox", "childrenProp", "forceMount", "disablePassStyles", "indicatorProps", "context", "useCheckboxContext", "iconSize", "theme", "getThemedIcon", "children", "child", "CHECKBOX_NAME", "CheckboxFrame", "val", "tokens", "createCheckboxContext", "createCheckboxScope", "CheckboxProvider", "Checkbox", "ariaLabelledby", "name", "checkedProp", "defaultChecked", "required", "scaleIcon", "scaleSize", "sizeAdjust", "disabled", "value", "onCheckedChange", "native", "checkboxProps", "button", "setButton", "composedRefs", "node", "hasConsumerStoppedPropagationRef", "propsActive", "isFormControl", "adjustedSize", "size", "labelId", "labelledBy", "x"]
+  "mappings": "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",
+  "names": []
 }

package/dist/jsx/Checkbox.mjs

@@ -1,2 +1,272 @@
-import{usePrevious as N}from"@radix-ui/react-use-previous";import{composeEventHandlers as E,getVariableValue as M,isWeb as P,styled as F,useComposedRefs as $,useMediaPropsActive as K,useTheme as U,withStaticProperties as W}from"@tamagui/core";import{createContextScope as X}from"@tamagui/create-context";import{registerFocusable as J}from"@tamagui/focusable";import{getFontSize as Q}from"@tamagui/font-size";import{getSize as Y,stepTokenUpOrDown as Z}from"@tamagui/get-size";import{useGetThemedIcon as ee}from"@tamagui/helpers-tamagui";import{useLabelContext as te}from"@tamagui/label";import{ThemeableStack as H}from"@tamagui/stacks";import{useControllableState as oe}from"@tamagui/use-controllable-state";import*as c from"react";function l(e){return e==="indeterminate"}function A(e){return l(e)?"indeterminate":e?"checked":"unchecked"}const B=e=>{const{checked:o,bubbles:s=!0,control:C,isHidden:a,...h}=e,u=c.useRef(null),t=N(o);return c.useEffect(()=>{const i=u.current,b=window.HTMLInputElement.prototype,r=Object.getOwnPropertyDescriptor(b,"checked").set;if(t!==o&&r){const d=new Event("click",{bubbles:s});i.indeterminate=l(o),r.call(i,l(o)?!1:o),i.dispatchEvent(d)}},[t,o,s]),<input type="checkbox"defaultChecked={l(o)?!1:o}{...h}tabIndex={-1}ref={u}aria-hidden={a}style={{...a?{position:"absolute",pointerEvents:"none",opacity:0,margin:0}:{appearance:"auto",accentColor:"var(--color6)"},...e.style}}/>},g="CheckboxIndicator",R=F(H,{name:g}),w=R.extractable(c.forwardRef((e,o)=>{const{__scopeCheckbox:s,children:C,forceMount:a,disablePassStyles:h,...u}=e,t=fe(g,s),i=(typeof t.size=="number"?t.size*.65:Q(t.size))*t.scaleIcon,b=U(),f=ee({size:i,color:b.color}),d=c.Children.toArray(C).map(m=>h||!c.isValidElement(m)?m:f(m));return a||l(t.state)||t.state===!0?<R data-state={A(t.state)}data-disabled={t.disabled?"":void 0}pointerEvents="none"{...u}ref={o}>{d}</R>:null}));w.displayName=g;const y="Checkbox",L=F(H,{name:y,tag:"button",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",alignItems:"center",justifyContent:"center",pressTheme:!0,focusable:!0,borderWidth:1,borderColor:"$borderColor",hoverStyle:{borderColor:"$borderColorHover"},focusStyle:{borderColor:"$borderColorFocus"}}},size:{"...size":(e,{tokens:o})=>({borderRadius:M(Y(e))/8})}},defaultVariants:{unstyled:!1}}),[re,ne]=X(y),[Ce,fe]=re(y),xe=W(L.extractable(c.forwardRef((e,o)=>{const{__scopeCheckbox:s,labelledBy:C,name:a,checked:h,defaultChecked:u,required:t,scaleIcon:i=1,scaleSize:b=.45,sizeAdjust:f=0,disabled:r,value:d="on",onCheckedChange:m,native:_,...D}=e,[k,O]=c.useState(null),G=$(o,n=>O(n)),x=c.useRef(!1),V=K(e),v=P?k?Boolean(k.closest("form")):!0:!1,[p=!1,S]=oe({prop:h,defaultProp:u,onChange:m}),T=M(Z("size",V.size,f)),I=b?Math.round(T*b):T,j=te(k),q=C||j;return process.env.TAMAGUI_TARGET==="native"&&c.useEffect(()=>{if(e.id)return J(e.id,{focusAndSelect:()=>{S(n=>!n)},focus:()=>{}})},[e.id,S]),<Ce scope={s}state={p}disabled={r}size={I}scaleIcon={i}>{P&&_?<B control={k}bubbles={!x.current}name={a}value={d}checked={p}required={t}disabled={r}id={e.id}/>:<><L width={I}height={I}tag="button"role="checkbox"aria-labelledby={q}aria-checked={l(p)?"mixed":p}aria-required={t}data-state={A(p)}data-disabled={r?"":void 0}disabled={r}{...D}ref={G}{...P&&{type:"button",value:d,onKeyDown:E(e.onKeyDown,n=>{n.key==="Enter"&&n.preventDefault()})}}onPress={E(e.onPress,n=>{S(z=>l(z)?!0:!z),v&&(x.current=n.isPropagationStopped(),x.current||n.stopPropagation())})}/>{P&&v?<B isHidden control={k}bubbles={!x.current}name={a}value={d}checked={p}required={t}disabled={r}/>:null}</>}</Ce>})),{Indicator:w});xe.displayName=y;export{B as BubbleInput,xe as Checkbox,L as CheckboxFrame,ne as createCheckboxScope,A as getState,l as isIndeterminate};
+import { usePrevious } from "@radix-ui/react-use-previous";
+import {
+  composeEventHandlers,
+  getVariableValue,
+  isWeb,
+  styled,
+  useComposedRefs,
+  useMediaPropsActive,
+  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 <input
+    type="checkbox"
+    defaultChecked={isIndeterminate(checked) ? false : checked}
+    {...inputProps}
+    tabIndex={-1}
+    ref={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 <CheckboxIndicatorFrame
+          data-state={getState(context.state)}
+          data-disabled={context.disabled ? "" : void 0}
+          pointerEvents="none"
+          {...indicatorProps}
+          ref={forwardedRef}
+        >{children}</CheckboxIndicatorFrame>;
+      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(
+      (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 = useMediaPropsActive(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 <CheckboxProvider
+          scope={__scopeCheckbox}
+          state={checked}
+          disabled={disabled}
+          size={size}
+          scaleIcon={scaleIcon}
+        >{isWeb && native ? <BubbleInput
+          control={button}
+          bubbles={!hasConsumerStoppedPropagationRef.current}
+          name={name}
+          value={value}
+          checked={checked}
+          required={required}
+          disabled={disabled}
+          id={props.id}
+        /> : <>
+          <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={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 ? <BubbleInput
+            isHidden
+            control={button}
+            bubbles={!hasConsumerStoppedPropagationRef.current}
+            name={name}
+            value={value}
+            checked={checked}
+            required={required}
+            disabled={disabled}
+          /> : null}
+        </>}</CheckboxProvider>;
+      }
+    )
+  ),
+  {
+    Indicator: CheckboxIndicator
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+export {
+  BubbleInput,
+  Checkbox,
+  CheckboxFrame,
+  createCheckboxScope,
+  getState,
+  isIndeterminate
+};
 //# sourceMappingURL=Checkbox.mjs.map