@tamagui/checkbox 1.3.0

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Checkbox'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/esm/index.mjs

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

package/dist/esm/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Checkbox'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/jsx/Checkbox.js

@@ -0,0 +1,269 @@
+import { usePrevious } from "@radix-ui/react-use-previous";
+import {
+  composeEventHandlers,
+  getConfig,
+  getVariableValue,
+  isWeb,
+  mergeProps,
+  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, YStack } 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, {
+  name: INDICATOR_NAME
+});
+const CheckboxIndicator = 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
+        theme="active"
+        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",
+  backgroundColor: "$background",
+  alignItems: "center",
+  justifyContent: "center",
+  pressTheme: true,
+  focusable: true,
+  borderWidth: 2,
+  borderColor: "transparent",
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        const radiusToken = getVariableValue(getSize(val)) / 8;
+        return {
+          borderRadius: radiusToken
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$true"
+  }
+});
+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,
+          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 adjustedSizeToken = stepTokenUpOrDown("size", propsActive.size, sizeAdjust);
+        const size = Math.floor(getVariableValue(adjustedSizeToken) * 0.5);
+        const labelId = useLabelContext(button);
+        const labelledBy = ariaLabelledby || labelId;
+        if (!isWeb) {
+          React.useEffect(() => {
+            if (!props.id)
+              return;
+            return registerFocusable(props.id, {
+              focusAndSelect: () => {
+                setChecked((x) => !x);
+              },
+              focus: () => {
+              }
+            });
+          }, [props.id, setChecked]);
+        }
+        return (
+          // YStack is here to provide theme for native input
+          <YStack asChild theme={checkboxProps.theme}><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}
+              theme={checked ? "active" : null}
+              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></YStack>
+        );
+      }
+    )
+  ),
+  {
+    Indicator: CheckboxIndicator
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+const cloneElementWithPropOrder = (child, props) => {
+  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0];
+  return React.cloneElement({ ...child, props: null }, next);
+};
+export {
+  BubbleInput,
+  Checkbox,
+  CheckboxFrame,
+  createCheckboxScope,
+  getState,
+  isIndeterminate
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/jsx/Checkbox.js.map

@@ -0,0 +1,7 @@
+{
+  "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  getConfig,\n  getVariableValue,\n  isWeb,\n  mergeProps,\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, YStack } 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  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 = 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          theme=\"active\"\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\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  backgroundColor: '$background',\n  alignItems: 'center',\n  justifyContent: 'center',\n  pressTheme: true,\n  focusable: true,\n  borderWidth: 2,\n  borderColor: 'transparent',\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\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    size: '$true',\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  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          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 adjustedSizeToken = stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n        const size = Math.floor(getVariableValue(adjustedSizeToken) * 0.5)\n\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n\n        if (!isWeb) {\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          // YStack is here to provide theme for native input\n          <YStack asChild theme={checkboxProps.theme}>\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                    theme={checked ? 'active' : null}\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: 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          </YStack>\n        )\n      }\n    )\n  ),\n  {\n    Indicator: CheckboxIndicator,\n  }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n  return React.cloneElement({ ...child, props: null }, next)\n}\n"],
+  "mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,yBAAyB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB,cAAc;AACvC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AACA,UAAM,aAAa,WAAW;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,CAAC;AAAA,IACC,KAAK;AAAA,IACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,QAC/C;AAAA,IACJ,UAAU;AAAA,IACV,KAAK;AAAA,IACL,aAAa;AAAA,IACb,OAAO;AAAA,MACL,GAAI,WACA;AAAA;AAAA,QAEE,UAAU;AAAA,QACV,eAAe;AAAA,QACf,SAAS;AAAA,QACT,QAAQ;AAAA,MACV,IACA;AAAA,QACE,YAAY;AAAA,QACZ,aAAa;AAAA,MACf;AAAA,MAEJ,GAAG,MAAM;AAAA,IACX;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA,EACpD,MAAM;AACR,CAAC;AAgBD,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAA4C,iBAAiB;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,UAAM,YACH,OAAO,QAAQ,SAAS,WACrB,QAAQ,OAAO,OACf,YAAY,QAAQ,IAAI,KAAK,QAAQ;AAC3C,UAAM,QAAQ,SAAS;AACvB,UAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,OAAO,MAAM,MAAM,CAAC;AAE7E,UAAM,YAAY,MAAM,SAAS,QAAQ,YAAY;AACrD,UAAM,WAAW,UAAU,IAAI,CAAC,UAAU;AACxC,UAAI,qBAAqB,CAAC,MAAM,eAAe,KAAK,GAAG;AACrD,eAAO;AAAA,MACT;AACA,aAAO,cAAc,KAAK;AAAA,IAC5B,CAAC;AAED,QAAI,cAAc,gBAAgB,QAAQ,KAAK,KAAK,QAAQ,UAAU;AACpE,aACE,CAAC;AAAA,QACC,MAAM;AAAA,QACN,YAAY,SAAS,QAAQ,KAAK;AAAA,QAClC,eAAe,QAAQ,WAAW,KAAK;AAAA,QACvC,cAAc;AAAA,YACV;AAAA,QACJ,KAAK;AAAA,QAEJ,SACH,EATC;AAYL,WAAO;AAAA,EACT;AACF;AAEA,kBAAkB,cAAc;AAMhC,MAAM,gBAAgB;AAEf,MAAM,gBAAgB,OAAO,gBAAgB;AAAA,EAClD,MAAM;AAAA,EACN,KAAK;AAAA,EACL,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb,aAAa;AAAA,EAEb,YAAY;AAAA,IACV,aAAa;AAAA,EACf;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,cAAM,cAAc,iBAAiB,QAAQ,GAAG,CAAC,IAAI;AACrD,eAAO;AAAA,UACL,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAGD,MAAM,CAAC,uBAAuB,mBAAmB,IAAI,mBAAmB,aAAa;AASrF,MAAM,CAAC,kBAAkB,kBAAkB,IACzC,sBAA4C,aAAa;AAiBpD,MAAM,WAAW;AAAA,EACtB,cAAc;AAAA,IACZ,MAAM;AAAA,MACJ,CAAC,OAAmC,iBAAiB;AACnD,cAAM;AAAA,UACJ;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ,aAAa;AAAA,UACb;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL,IAAI;AACJ,cAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AACzE,cAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAI,CAAC;AAC5E,cAAM,mCAAmC,MAAM,OAAO,KAAK;AAC3D,cAAM,cAAc,oBAAoB,KAAK;AAE7C,cAAM,gBAAgB,QAClB,SACE,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAC9B,OACF;AACJ,cAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,UACzD,MAAM;AAAA,UACN,aAAa;AAAA,UACb,UAAU;AAAA,QACZ,CAAC;AAED,cAAM,oBAAoB,kBAAkB,QAAQ,YAAY,MAAM,UAAU;AAChF,cAAM,OAAO,KAAK,MAAM,iBAAiB,iBAAiB,IAAI,GAAG;AAEjE,cAAM,UAAU,gBAAgB,MAAM;AACtC,cAAM,aAAa,kBAAkB;AAErC,YAAI,CAAC,OAAO;AAEV,gBAAM,UAAU,MAAM;AACpB,gBAAI,CAAC,MAAM;AAAI;AACf,mBAAO,kBAAkB,MAAM,IAAI;AAAA,cACjC,gBAAgB,MAAM;AACpB,2BAAW,CAAC,MAAM,CAAC,CAAC;AAAA,cACtB;AAAA,cACA,OAAO,MAAM;AAAA,cAAC;AAAA,YAChB,CAAC;AAAA,UACH,GAAG,CAAC,MAAM,IAAI,UAAU,CAAC;AAAA,QAC3B;AAEA;AAAA;AAAA,UAEE,CAAC,OAAO,QAAQ,OAAO,cAAc,OACnC,CAAC;AAAA,YACC,OAAO;AAAA,YACP,OAAO;AAAA,YACP,UAAU;AAAA,YACV,MAAM;AAAA,YACN,WAAW;AAAA,YAEV,SAAS,SACR,CAAC;AAAA,YACC,SAAS;AAAA,YACT,SAAS,CAAC,iCAAiC;AAAA,YAC3C,MAAM;AAAA,YACN,OAAO;AAAA,YACP,SAAS;AAAA,YACT,UAAU;AAAA,YACV,UAAU;AAAA,YACV,IAAI,MAAM;AAAA,UACZ,KAEA;AAAA,YACE,CAAC;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,OAAO,UAAU,WAAW;AAAA,cAC5B,IAAI;AAAA,cACJ,KAAK;AAAA,cACL,iBAAiB;AAAA,cACjB,cAAc,gBAAgB,OAAO,IAAI,UAAU;AAAA,cACnD,eAAe;AAAA,cACf,YAAY,SAAS,OAAO;AAAA,cAC5B,eAAe,WAAW,KAAK;AAAA,cAC/B,UAAU;AAAA,kBACN;AAAA,cACJ,KAAK;AAAA,kBACA,SAAS;AAAA,gBACZ,MAAM;AAAA,gBACN;AAAA,gBACA,WAAW;AAAA,kBACR,MAA6C;AAAA,kBAC9C,CAAC,UAAU;AAET,wBAAI,MAAM,QAAQ;AAAS,4BAAM,eAAe;AAAA,kBAClD;AAAA,gBACF;AAAA,cACF;AAAA,cACA,SAAS,qBAAqB,MAAM,SAAgB,CAAC,UAAU;AAC7D;AAAA,kBAAW,CAAC,gBACV,gBAAgB,WAAW,IAAI,OAAO,CAAC;AAAA,gBACzC;AACA,oBAAI,eAAe;AACjB,mDAAiC,UAC/B,MAAM,qBAAqB;AAI7B,sBAAI,CAAC,iCAAiC;AACpC,0BAAM,gBAAgB;AAAA,gBAC1B;AAAA,cACF,CAAC;AAAA,YACH;AAAA,aAEC,SAAS,gBACR,CAAC;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,SAAS,CAAC,iCAAiC;AAAA,cAC3C,MAAM;AAAA,cACN,OAAO;AAAA,cACP,SAAS;AAAA,cACT,UAAU;AAAA,cACV,UAAU;AAAA,YACZ,KACE;AAAA,UACN,IAEJ,EA3EC,iBA4EH,EA7EC;AAAA;AAAA,MA+EL;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,WAAW;AAAA,EACb;AACF;AAEA,SAAS,cAAc;AAIvB,MAAM,4BAA4B,CAAC,OAAY,UAAkB;AAC/D,QAAM,OAAO,WAAW,MAAM,OAAO,OAAO,OAAO,UAAU,EAAE,UAAU,EAAE,CAAC;AAC5E,SAAO,MAAM,aAAa,EAAE,GAAG,OAAO,OAAO,KAAK,GAAG,IAAI;AAC3D;",
+  "names": []
+}

package/dist/jsx/Checkbox.mjs

@@ -0,0 +1,269 @@
+import { usePrevious } from "@radix-ui/react-use-previous";
+import {
+  composeEventHandlers,
+  getConfig,
+  getVariableValue,
+  isWeb,
+  mergeProps,
+  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, YStack } 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, {
+  name: INDICATOR_NAME
+});
+const CheckboxIndicator = 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
+        theme="active"
+        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",
+  backgroundColor: "$background",
+  alignItems: "center",
+  justifyContent: "center",
+  pressTheme: true,
+  focusable: true,
+  borderWidth: 2,
+  borderColor: "transparent",
+  focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        const radiusToken = getVariableValue(getSize(val)) / 8;
+        return {
+          borderRadius: radiusToken
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    size: "$true"
+  }
+});
+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,
+          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 adjustedSizeToken = stepTokenUpOrDown("size", propsActive.size, sizeAdjust);
+        const size = Math.floor(getVariableValue(adjustedSizeToken) * 0.5);
+        const labelId = useLabelContext(button);
+        const labelledBy = ariaLabelledby || labelId;
+        if (!isWeb) {
+          React.useEffect(() => {
+            if (!props.id)
+              return;
+            return registerFocusable(props.id, {
+              focusAndSelect: () => {
+                setChecked((x) => !x);
+              },
+              focus: () => {
+              }
+            });
+          }, [props.id, setChecked]);
+        }
+        return (
+          // YStack is here to provide theme for native input
+          <YStack asChild theme={checkboxProps.theme}><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}
+              theme={checked ? "active" : null}
+              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></YStack>
+        );
+      }
+    )
+  ),
+  {
+    Indicator: CheckboxIndicator
+  }
+);
+Checkbox.displayName = CHECKBOX_NAME;
+const cloneElementWithPropOrder = (child, props) => {
+  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0];
+  return React.cloneElement({ ...child, props: null }, next);
+};
+export {
+  BubbleInput,
+  Checkbox,
+  CheckboxFrame,
+  createCheckboxScope,
+  getState,
+  isIndeterminate
+};
+//# sourceMappingURL=Checkbox.mjs.map

package/dist/jsx/Checkbox.mjs.map

@@ -0,0 +1,7 @@
+{
+  "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  getConfig,\n  getVariableValue,\n  isWeb,\n  mergeProps,\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, YStack } 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  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 = 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          theme=\"active\"\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\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  backgroundColor: '$background',\n  alignItems: 'center',\n  justifyContent: 'center',\n  pressTheme: true,\n  focusable: true,\n  borderWidth: 2,\n  borderColor: 'transparent',\n\n  focusStyle: {\n    borderColor: '$borderColorFocus',\n  },\n\n  variants: {\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    size: '$true',\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  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          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 adjustedSizeToken = stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n        const size = Math.floor(getVariableValue(adjustedSizeToken) * 0.5)\n\n        const labelId = useLabelContext(button)\n        const labelledBy = ariaLabelledby || labelId\n\n        if (!isWeb) {\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          // YStack is here to provide theme for native input\n          <YStack asChild theme={checkboxProps.theme}>\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                    theme={checked ? 'active' : null}\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: 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          </YStack>\n        )\n      }\n    )\n  ),\n  {\n    Indicator: CheckboxIndicator,\n  }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n\nconst cloneElementWithPropOrder = (child: any, props: Object) => {\n  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]\n  return React.cloneElement({ ...child, props: null }, next)\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/jsx/index.js

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

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["export * from './Checkbox'\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/dist/jsx/index.mjs

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