@tamagui/checkbox 1.5.5 → 1.5.7

package/dist/cjs/Checkbox.js

@@ -148,13 +148,17 @@ const CheckboxFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   variants: {
     unstyled: {
       false: {
+        size: "$true",
         backgroundColor: "$background",
         alignItems: "center",
         justifyContent: "center",
         pressTheme: true,
         focusable: true,
-        borderWidth: 2,
-        borderColor: "transparent",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        hoverStyle: {
+          borderColor: "$borderColorHover"
+        },
         focusStyle: {
           borderColor: "$borderColorFocus"
         }
@@ -170,7 +174,6 @@ const CheckboxFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
     }
   },
   defaultVariants: {
-    size: "$true",
     unstyled: false
   }
 });

package/dist/cjs/Checkbox.js.map

@@ -1,7 +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  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  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            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)\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        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    },\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    size: '$true',\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                  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,\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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",
+  "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  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            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)\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                  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,\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": []
 }

package/dist/esm/Checkbox.js

@@ -119,13 +119,17 @@ const CheckboxFrame = styled(ThemeableStack, {
   variants: {
     unstyled: {
       false: {
+        size: "$true",
         backgroundColor: "$background",
         alignItems: "center",
         justifyContent: "center",
         pressTheme: true,
         focusable: true,
-        borderWidth: 2,
-        borderColor: "transparent",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        hoverStyle: {
+          borderColor: "$borderColorHover"
+        },
         focusStyle: {
           borderColor: "$borderColorFocus"
         }
@@ -141,7 +145,6 @@ const CheckboxFrame = styled(ThemeableStack, {
     }
   },
   defaultVariants: {
-    size: "$true",
     unstyled: false
   }
 });

package/dist/esm/Checkbox.js.map

@@ -1,7 +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  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  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            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)\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        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    },\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    size: '$true',\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                  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,\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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",
+  "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  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            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)\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                  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,\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": []
 }

package/dist/esm/Checkbox.mjs

@@ -119,13 +119,17 @@ const CheckboxFrame = styled(ThemeableStack, {
   variants: {
     unstyled: {
       false: {
+        size: "$true",
         backgroundColor: "$background",
         alignItems: "center",
         justifyContent: "center",
         pressTheme: true,
         focusable: true,
-        borderWidth: 2,
-        borderColor: "transparent",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        hoverStyle: {
+          borderColor: "$borderColorHover"
+        },
         focusStyle: {
           borderColor: "$borderColorFocus"
         }
@@ -141,7 +145,6 @@ const CheckboxFrame = styled(ThemeableStack, {
     }
   },
   defaultVariants: {
-    size: "$true",
     unstyled: false
   }
 });

package/dist/esm/Checkbox.mjs.map

@@ -1,7 +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  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  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            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)\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        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    },\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    size: '$true',\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                  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,\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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",
+  "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  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            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)\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                  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,\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": []
 }

package/dist/jsx/Checkbox.js

@@ -111,13 +111,17 @@ const CheckboxFrame = styled(ThemeableStack, {
   variants: {
     unstyled: {
       false: {
+        size: "$true",
         backgroundColor: "$background",
         alignItems: "center",
         justifyContent: "center",
         pressTheme: true,
         focusable: true,
-        borderWidth: 2,
-        borderColor: "transparent",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        hoverStyle: {
+          borderColor: "$borderColorHover"
+        },
         focusStyle: {
           borderColor: "$borderColorFocus"
         }
@@ -133,7 +137,6 @@ const CheckboxFrame = styled(ThemeableStack, {
     }
   },
   defaultVariants: {
-    size: "$true",
     unstyled: false
   }
 });

package/dist/jsx/Checkbox.js.map

@@ -1,7 +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  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  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            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)\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        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    },\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    size: '$true',\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                  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,\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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",
+  "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  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            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)\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                  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,\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": []
 }

package/dist/jsx/Checkbox.mjs

@@ -111,13 +111,17 @@ const CheckboxFrame = styled(ThemeableStack, {
   variants: {
     unstyled: {
       false: {
+        size: "$true",
         backgroundColor: "$background",
         alignItems: "center",
         justifyContent: "center",
         pressTheme: true,
         focusable: true,
-        borderWidth: 2,
-        borderColor: "transparent",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        hoverStyle: {
+          borderColor: "$borderColorHover"
+        },
         focusStyle: {
           borderColor: "$borderColorFocus"
         }
@@ -133,7 +137,6 @@ const CheckboxFrame = styled(ThemeableStack, {
     }
   },
   defaultVariants: {
-    size: "$true",
     unstyled: false
   }
 });

package/dist/jsx/Checkbox.mjs.map

@@ -1,7 +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  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  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            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)\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        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    },\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    size: '$true',\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                  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,\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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",
+  "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  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            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)\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                  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,\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": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/checkbox",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "sideEffects": [
     "*.css"
   ],
@@ -20,22 +20,22 @@
   },
   "dependencies": {
     "@radix-ui/react-use-previous": "^0.1.1",
-    "@tamagui/core": "^1.5.5",
-    "@tamagui/create-context": "^1.5.5",
-    "@tamagui/focusable": "^1.5.5",
-    "@tamagui/font-size": "^1.5.5",
-    "@tamagui/get-size": "^1.5.5",
-    "@tamagui/helpers-tamagui": "^1.5.5",
-    "@tamagui/label": "^1.5.5",
-    "@tamagui/stacks": "^1.5.5",
-    "@tamagui/use-controllable-state": "^1.5.5"
+    "@tamagui/core": "^1.5.7",
+    "@tamagui/create-context": "^1.5.7",
+    "@tamagui/focusable": "^1.5.7",
+    "@tamagui/font-size": "^1.5.7",
+    "@tamagui/get-size": "^1.5.7",
+    "@tamagui/helpers-tamagui": "^1.5.7",
+    "@tamagui/label": "^1.5.7",
+    "@tamagui/stacks": "^1.5.7",
+    "@tamagui/use-controllable-state": "^1.5.7"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.5.5",
+    "@tamagui/build": "^1.5.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/src/Checkbox.tsx

@@ -181,13 +181,18 @@ export const CheckboxFrame = styled(ThemeableStack, {
   variants: {
     unstyled: {
       false: {
+        size: '$true',
         backgroundColor: '$background',
         alignItems: 'center',
         justifyContent: 'center',
         pressTheme: true,
         focusable: true,
-        borderWidth: 2,
-        borderColor: 'transparent',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+
+        hoverStyle: {
+          borderColor: '$borderColorHover',
+        },
 
         focusStyle: {
           borderColor: '$borderColorFocus',
@@ -206,7 +211,6 @@ export const CheckboxFrame = styled(ThemeableStack, {
   } as const,
 
   defaultVariants: {
-    size: '$true',
     unstyled: false,
   },
 })

package/types/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EASf,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,IAAI,eAAe,CAElF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,YAAY,6CAE7C;AAED,KAAK,UAAU,GAAG,GAAG,CAAA;AACrB,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAC5D,OAAO,EAAE,YAAY,CAAA;IACrB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAkDlD,CAAA;AAQD,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAE1B,CAAA;AAEF,KAAK,2BAA2B,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE1E,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,GAAG;IACjE;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAuDD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCxB,CAAA;AAGF,QAAA,MAA8B,mBAAmB,+CAAqC,CAAA;AAYtF,KAAK,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AACxD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlInB;;;WAGG;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;CAwQJ,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EASf,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,IAAI,eAAe,CAElF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,YAAY,6CAE7C;AAED,KAAK,UAAU,GAAG,GAAG,CAAA;AACrB,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAC5D,OAAO,EAAE,YAAY,CAAA;IACrB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAkDlD,CAAA;AAQD,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAE1B,CAAA;AAEF,KAAK,2BAA2B,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE1E,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,GAAG;IACjE;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAuDD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCxB,CAAA;AAGF,QAAA,MAA8B,mBAAmB,+CAAqC,CAAA;AAYtF,KAAK,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AACxD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAtInB;;;WAGG;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;CA4QJ,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,CAAA"}