@tamagui/checkbox 2.7.7 → 3.0.0-beta.637.1

package/dist/jsx/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,YAAS;;AACT,IAAAA,SAAS,GAAAC,MAAA,CAAAC,cAAsB;AAE/B,IAAAC,gBAAc,GAAAF,MAAA,CAAAG,wBAAA;AACd,IAAAC,iBAAc,GAAAJ,MAAA,CAAAK,mBAAA;AACd,IAAAC,YAAc,GAAAN,MAAA,CAAAO,SAAA,CAAAC,cAAA;AAGP,IAAAC,QAAM,GAAAA,CAAAC,MAAW,EAAAC,GAAA,KAAe;EACrC,SAAOC,IAAA,IAAAD,GAAA,EACPZ,SAAW,CAAAW,MAAA,EAAAE,IAAA;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AACb,CAAC","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["jsx/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./Checkbox\"), module.exports);\n__reExport(index_exports, require(\"./CheckboxStyledContext\"), module.exports);\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,sBAAY,GAAG,OAAO,OAAO;AAC/D,WAAW,eAAe,QAAQ,mCAAyB,GAAG,OAAO,OAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/checkbox",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.637.1",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "source": "src/index.ts",
   "files": [
@@ -35,23 +35,13 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/checkbox-headless": "2.7.7",
-    "@tamagui/compose-refs": "2.7.7",
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/core": "2.7.7",
-    "@tamagui/create-context": "2.7.7",
-    "@tamagui/focusable": "2.7.7",
-    "@tamagui/get-token": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/helpers-tamagui": "2.7.7",
-    "@tamagui/label": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/use-controllable-state": "2.7.7",
-    "@tamagui/font-size": "2.7.7",
-    "@tamagui/use-previous": "2.7.7"
+    "@tamagui/checkbox-headless": "3.0.0-beta.637.1",
+    "@tamagui/core": "3.0.0-beta.637.1",
+    "@tamagui/focusable": "3.0.0-beta.637.1",
+    "@tamagui/use-controllable-state": "3.0.0-beta.637.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
+    "@tamagui/build": "3.0.0-beta.637.1",
     "react": ">=19"
   },
   "peerDependencies": {

package/src/Checkbox.tsx

@@ -1,31 +1,35 @@
 // fork of radix
 // https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx
 
-import { getVariableValue, styled } from '@tamagui/core'
-import { getSize } from '@tamagui/get-token'
-import { YStack } from '@tamagui/stacks'
+import type {
+  CheckedState,
+  CheckboxExtraProps as HeadlessCheckboxExtraProps,
+} from '@tamagui/checkbox-headless'
+import { isIndeterminate, useCheckbox } from '@tamagui/checkbox-headless'
+import type { GetProps, NativeValue, SizeTokens } from '@tamagui/core'
+import {
+  createStyledHOC,
+  isWeb,
+  shouldRenderNativePlatform,
+  styled,
+  useProps,
+  View,
+  withStaticProperties,
+} from '@tamagui/core'
+import { registerFocusable } from '@tamagui/focusable'
+import { useControllableState } from '@tamagui/use-controllable-state'
+import React, { useMemo } from 'react'
 
 import { CheckboxStyledContext } from './CheckboxStyledContext'
 
-/* -------------------------------------------------------------------------------------------------
- * CheckboxIndicator
- * -----------------------------------------------------------------------------------------------*/
 const INDICATOR_NAME = 'CheckboxIndicator'
 
 export const CheckboxIndicatorFrame = styled(
-  YStack,
+  View,
   {
     // use Checkbox for easier themes
-    name: INDICATOR_NAME,
+    displayName: INDICATOR_NAME,
     context: CheckboxStyledContext,
-    variants: {
-      unstyled: {
-        false: {},
-      },
-    } as const,
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-    },
   },
   {
     accept: {
@@ -34,85 +38,25 @@ export const CheckboxIndicatorFrame = styled(
   }
 )
 
-/* -------------------------------------------------------------------------------------------------
- * Checkbox
- * -----------------------------------------------------------------------------------------------*/
-
 const CHECKBOX_NAME = 'Checkbox'
 
 export const CheckboxFrame = styled(
-  YStack,
+  View,
   {
-    name: CHECKBOX_NAME,
+    displayName: CHECKBOX_NAME,
     render: 'button',
-
     context: CheckboxStyledContext,
-    variants: {
-      unstyled: {
-        false: {
-          size: '$true',
-          backgroundColor: '$background',
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderWidth: 1,
-          borderColor: '$borderColor',
-
-          hoverStyle: {
-            borderColor: '$borderColorHover',
-          },
-
-          pressStyle: {
-            backgroundColor: '$backgroundPress',
-            borderColor: '$borderColorPress',
-          },
-
-          focusStyle: {
-            borderColor: '$borderColorFocus',
-          },
-
-          focusVisibleStyle: {
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-            outlineColor: '$outlineColor',
-          },
-        },
-      },
+    alignItems: 'center',
+    justifyContent: 'center',
 
+    variants: {
       disabled: {
         true: {
           pointerEvents: 'none',
           userSelect: 'none',
-          cursor: 'not-allowed',
-
-          hoverStyle: {
-            borderColor: '$borderColor',
-            backgroundColor: '$background',
-          },
-
-          pressStyle: {
-            borderColor: '$borderColor',
-            backgroundColor: '$background',
-          },
-
-          focusStyle: {
-            outlineWidth: 0,
-          },
-        },
-      },
-
-      size: {
-        '...size': (val) => {
-          const radiusToken = getVariableValue(getSize(val)) / 8
-          return {
-            borderRadius: radiusToken,
-          }
         },
       },
     } as const,
-
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-    },
   },
   {
     accept: {
@@ -120,3 +64,167 @@ export const CheckboxFrame = styled(
     } as const,
   }
 )
+
+type CheckboxExpectingVariantProps = {
+  size?: SizeTokens | true
+}
+
+type CheckboxExtraProps = HeadlessCheckboxExtraProps & {
+  native?: NativeValue<'web'>
+}
+
+type CheckboxFrameActiveStyleProps = {
+  activeStyle?: GetProps<typeof CheckboxFrame>
+  activeTheme?: string | null
+}
+
+type CheckboxIndicatorActiveStyleProps = {
+  activeStyle?: GetProps<typeof CheckboxIndicatorFrame>
+}
+
+export type CheckboxProps = GetProps<typeof CheckboxFrame> &
+  CheckboxExtraProps &
+  CheckboxExpectingVariantProps &
+  CheckboxFrameActiveStyleProps
+
+type CheckboxIndicatorExtraProps = {
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with React animation libraries.
+   */
+  forceMount?: boolean
+}
+
+export type CheckboxIndicatorProps = GetProps<typeof CheckboxIndicatorFrame> &
+  CheckboxIndicatorExtraProps &
+  CheckboxIndicatorActiveStyleProps
+
+export const CheckboxContext = React.createContext<{
+  checked: CheckedState
+  disabled?: boolean
+}>({
+  checked: false,
+  disabled: false,
+})
+
+const CheckboxComponent = createStyledHOC(
+  CheckboxFrame,
+  function Checkbox(_props: CheckboxProps, forwardedRef) {
+    const {
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      native,
+      activeStyle,
+      activeTheme,
+      ...props
+    } = _props
+    const propsActive = useProps(props)
+
+    const styledContext = React.useContext(CheckboxStyledContext.context)
+    const [checked = false, setChecked] = useControllableState({
+      prop: checkedProp,
+      defaultProp: defaultChecked!,
+      onChange: onCheckedChange,
+    })
+
+    const { checkboxProps, checkboxRef, bubbleInput } = useCheckbox(
+      // @ts-ignore
+      propsActive,
+      [checked, setChecked],
+      forwardedRef
+    )
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      React.useEffect(() => {
+        if (!props.id) return
+        if (props.disabled) return
+
+        return registerFocusable(props.id, {
+          focusAndSelect: () => {
+            setChecked?.((value) => !value)
+          },
+          focus: () => {},
+        })
+      }, [props.id, props.disabled])
+    }
+
+    const renderNative = shouldRenderNativePlatform(native)
+    if (renderNative === 'web') {
+      return (
+        <input
+          type="checkbox"
+          defaultChecked={isIndeterminate(checked) ? false : checked}
+          tabIndex={-1}
+          ref={checkboxRef as any}
+          disabled={checkboxProps.disabled}
+          style={checkboxProps.style as any}
+        />
+      )
+    }
+
+    const memoizedContext = useMemo(
+      () => ({
+        checked,
+        disabled: checkboxProps.disabled,
+      }),
+      [checked, checkboxProps.disabled]
+    )
+
+    const isActive = !!checked
+    const disabled = checkboxProps.disabled
+
+    return (
+      <CheckboxContext.Provider value={memoizedContext}>
+        <CheckboxStyledContext.Provider
+          size={propsActive.size ?? styledContext?.size ?? true}
+          active={isActive}
+          disabled={disabled}
+        >
+          <CheckboxFrame
+            render="button"
+            ref={checkboxRef}
+            theme={activeTheme ?? null}
+            {...(isWeb && { type: 'button' })}
+            checked={checked}
+            disabled={disabled}
+            {...(checkboxProps as CheckboxProps)}
+            {...props}
+            {...(isActive && activeStyle ? (activeStyle as object) : undefined)}
+          >
+            {propsActive.children}
+          </CheckboxFrame>
+          {bubbleInput}
+        </CheckboxStyledContext.Provider>
+      </CheckboxContext.Provider>
+    )
+  }
+)
+
+const CheckboxIndicator = createStyledHOC(
+  CheckboxIndicatorFrame,
+  (props: CheckboxIndicatorProps, forwardedRef) => {
+    const { children, forceMount, activeStyle, ...indicatorProps } = props
+    const { active } = CheckboxStyledContext.useStyledContext()
+    const context = React.useContext(CheckboxContext)
+
+    if (forceMount || isIndeterminate(context.checked) || context.checked === true) {
+      return (
+        <CheckboxIndicatorFrame
+          pointerEvents="none"
+          {...indicatorProps}
+          {...(active && activeStyle ? (activeStyle as object) : undefined)}
+          ref={forwardedRef}
+        >
+          {children}
+        </CheckboxIndicatorFrame>
+      )
+    }
+
+    return null
+  }
+)
+
+export const Checkbox = withStaticProperties(CheckboxComponent, {
+  Indicator: CheckboxIndicator,
+})

package/src/CheckboxStyledContext.tsx

@@ -2,15 +2,11 @@ import type { SizeTokens } from '@tamagui/core'
 import { createStyledContext } from '@tamagui/core'
 
 export const CheckboxStyledContext = createStyledContext<{
-  size: SizeTokens
-  scaleIcon: number
-  unstyled?: boolean
+  size: SizeTokens | true
   active?: boolean
   disabled?: boolean
 }>({
-  size: '$true' as SizeTokens,
-  scaleIcon: 1,
-  unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  size: true,
   active: false,
   disabled: false,
 })

package/src/index.ts

@@ -1,12 +1,3 @@
-import { CheckboxFrame, CheckboxIndicatorFrame } from './Checkbox'
-import { createCheckbox } from './createCheckbox'
-
-export * from './createCheckbox'
 export * from './Checkbox'
 export * from './CheckboxStyledContext'
 export type { CheckedState } from '@tamagui/checkbox-headless'
-
-export const Checkbox = createCheckbox({
-  Frame: CheckboxFrame,
-  Indicator: CheckboxIndicatorFrame,
-})