@tamagui/checkbox-headless 1.89.0

package/dist/jsx/useCheckbox.native.js

@@ -0,0 +1,66 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isWeb } from "@tamagui/constants";
+import { composeEventHandlers } from "@tamagui/helpers";
+import { useLabelContext } from "@tamagui/label";
+import React from "react";
+import { BubbleInput } from "./BubbleInput";
+import { getState, isIndeterminate } from "./utils";
+import { jsx } from "react/jsx-runtime";
+function useCheckbox(props, [checked, setChecked], ref) {
+  const {
+    labelledBy: ariaLabelledby,
+    name,
+    required,
+    disabled,
+    value = "on",
+    onCheckedChange,
+    ...checkboxProps
+  } = props, [button, setButton] = React.useState(null), composedRefs = useComposedRefs(ref, (node) => setButton(node)), hasConsumerStoppedPropagationRef = React.useRef(!1), isFormControl = isWeb ? button ? !!button.closest("form") : !0 : !1, labelId = useLabelContext(button), labelledBy = ariaLabelledby || labelId;
+  return {
+    bubbleInput: isWeb && isFormControl ? /* @__PURE__ */ jsx(
+      BubbleInput,
+      {
+        isHidden: !0,
+        control: button,
+        bubbles: !hasConsumerStoppedPropagationRef.current,
+        name,
+        value,
+        checked,
+        required,
+        disabled
+      }
+    ) : null,
+    checkboxRef: composedRefs,
+    checkboxProps: {
+      role: "checkbox",
+      "aria-labelledby": labelledBy,
+      "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
+      ...checkboxProps,
+      ...isWeb && {
+        type: "button",
+        value,
+        "data-state": getState(checked),
+        "data-disabled": disabled ? "" : void 0,
+        disabled,
+        onKeyDown: composeEventHandlers(
+          props.onKeyDown,
+          (event) => {
+            event.key === "Enter" && event.preventDefault();
+          }
+        )
+      },
+      onPress: composeEventHandlers(
+        props.onPress,
+        (event) => {
+          setChecked(
+            (prevChecked) => isIndeterminate(prevChecked) ? !0 : !prevChecked
+          ), isFormControl && "isPropagationStopped" in event && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
+        }
+      )
+    }
+  };
+}
+export {
+  useCheckbox
+};
+//# sourceMappingURL=useCheckbox.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/useCheckbox.tsx"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,aAAa;AAEtB,SAAS,4BAA4B;AACrC,SAAS,uBAAuB;AAChC,OAAO,WAAW;AAGlB,SAAS,mBAAmB;AAC5B,SAAS,UAAU,uBAAuB;AAsDlC;AA7BD,SAAS,YACd,OACA,CAAC,SAAS,UAAU,GAIpB,KACA;AACA,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EACL,IAAI,OACE,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI,GACnE,eAAe,gBAAgB,KAAK,CAAC,SAAS,UAAU,IAAW,CAAC,GACpE,mCAAmC,MAAM,OAAO,EAAK,GAErD,gBAAgB,QAAS,SAAS,EAAQ,OAAO,QAAQ,MAAM,IAAK,KAAQ,IAE5E,UAAU,gBAAgB,MAAM,GAChC,aAAa,kBAAkB;AAErC,SAAO;AAAA,IACL,aACE,SAAS,gBACP;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS,CAAC,iCAAiC;AAAA,QAC3C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,IACE;AAAA,IACN,aAAa;AAAA,IACb,eAAe;AAAA,MACb,MAAM;AAAA,MACN,mBAAmB;AAAA,MACnB,gBAAgB,gBAAgB,OAAO,IAAI,UAAU;AAAA,MACrD,GAAG;AAAA,MACH,GAAI,SAAS;AAAA,QACX,MAAM;AAAA,QACN;AAAA,QACA,cAAc,SAAS,OAAO;AAAA,QAC9B,iBAAiB,WAAW,KAAK;AAAA,QACjC;AAAA,QACA,WAAW;AAAA,UACR,MAA6C;AAAA,UAC9C,CAAC,UAAU;AAET,YAAI,MAAM,QAAQ,WAAS,MAAM,eAAe;AAAA,UAClD;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,CAAC,UAAgC;AAC/B;AAAA,YAAW,CAAC,gBACV,gBAAgB,WAAW,IAAI,KAAO,CAAC;AAAA,UACzC,GACI,iBAAiB,0BAA0B,UAC7C,iCAAiC,UAAU,MAAM,qBAAqB,GAIjE,iCAAiC,WAAS,MAAM,gBAAgB;AAAA,QAEzE;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/jsx/utils.js

@@ -0,0 +1,11 @@
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+export {
+  getState,
+  isIndeterminate
+};
+//# sourceMappingURL=utils.js.map

package/dist/jsx/utils.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx"],
+  "mappings": "AAEO,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;",
+  "names": []
+}

package/dist/jsx/utils.mjs

@@ -0,0 +1,7 @@
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+export { getState, isIndeterminate };

package/dist/jsx/utils.native.js

@@ -0,0 +1,11 @@
+function isIndeterminate(checked) {
+  return checked === "indeterminate";
+}
+function getState(checked) {
+  return isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+export {
+  getState,
+  isIndeterminate
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils.tsx"],
+  "mappings": "AAEO,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@tamagui/checkbox-headless",
+  "version": "1.89.0",
+  "sideEffects": [
+    "*.css"
+  ],
+  "source": "src/index.ts",
+  "types": "./types/index.d.ts",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "files": [
+    "src",
+    "types",
+    "dist"
+  ],
+  "scripts": {
+    "build": "tamagui-build",
+    "watch": "tamagui-build --watch",
+    "lint": "../../node_modules/.bin/biome check src",
+    "lint:fix": "../../node_modules/.bin/biome check --apply-unsafe src",
+    "clean": "tamagui-build clean",
+    "clean:build": "tamagui-build clean:build"
+  },
+  "dependencies": {
+    "@tamagui/compose-refs": "1.89.0",
+    "@tamagui/constants": "1.89.0",
+    "@tamagui/create-context": "1.89.0",
+    "@tamagui/focusable": "1.89.0",
+    "@tamagui/helpers": "1.89.0",
+    "@tamagui/label": "1.89.0",
+    "@tamagui/use-controllable-state": "1.89.0",
+    "@tamagui/use-previous": "1.89.0"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "react-native": "./dist/cjs/index.native.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@tamagui/build": "1.89.0",
+    "react": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
+}

package/src/BubbleInput.tsx

@@ -0,0 +1,64 @@
+import { usePrevious } from '@tamagui/use-previous'
+import * as React from 'react'
+
+import type { CheckedState } from './useCheckbox'
+import { isIndeterminate } from './utils'
+
+export interface BubbleInputProps extends Omit<React.ComponentProps<'input'>, 'checked'> {
+  checked: CheckedState
+  control: HTMLElement | null
+  bubbles: boolean
+
+  isHidden?: boolean
+}
+
+export const BubbleInput = (props: BubbleInputProps) => {
+  const { checked, bubbles = true, control, isHidden, ...inputProps } = props
+  const ref = React.useRef<HTMLInputElement>(null)
+  const prevChecked = usePrevious(checked)
+  //   const controlSize = useSize(control)
+  // Bubble checked change to parents (e.g form change event)
+  React.useEffect(() => {
+    const input = ref.current!
+    const inputProto = window.HTMLInputElement.prototype
+    const descriptor = Object.getOwnPropertyDescriptor(
+      inputProto,
+      'checked'
+    ) as PropertyDescriptor
+    const setChecked = descriptor.set
+
+    if (prevChecked !== checked && setChecked) {
+      const event = new Event('click', { bubbles })
+      input.indeterminate = isIndeterminate(checked)
+      setChecked.call(input, isIndeterminate(checked) ? false : checked)
+      input.dispatchEvent(event)
+    }
+  }, [prevChecked, checked, bubbles])
+
+  return (
+    <input
+      type="checkbox"
+      defaultChecked={isIndeterminate(checked) ? false : checked}
+      {...inputProps}
+      tabIndex={-1}
+      ref={ref}
+      aria-hidden={isHidden}
+      style={{
+        ...(isHidden
+          ? {
+              // ...controlSize,
+              position: 'absolute',
+              pointerEvents: 'none',
+              opacity: 0,
+              margin: 0,
+            }
+          : {
+              appearance: 'auto',
+              accentColor: 'var(--color6)',
+            }),
+
+        ...props.style,
+      }}
+    />
+  )
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useCheckbox'
+export * from './utils'

package/src/useCheckbox.tsx

@@ -0,0 +1,112 @@
+import { useComposedRefs } from '@tamagui/compose-refs'
+import { isWeb } from '@tamagui/constants'
+import type { GestureReponderEvent } from '@tamagui/core'
+import { composeEventHandlers } from '@tamagui/helpers'
+import { useLabelContext } from '@tamagui/label'
+import React from 'react'
+import type { PressableProps, View, ViewProps } from 'react-native'
+
+import { BubbleInput } from './BubbleInput'
+import { getState, isIndeterminate } from './utils'
+
+export type CheckedState = boolean | 'indeterminate'
+
+type CheckboxBaseProps = ViewProps & Pick<PressableProps, 'onPress'>
+
+export type CheckboxExtraProps = {
+  children?: React.ReactNode
+  id?: string
+  disabled?: boolean
+  checked?: CheckedState
+  defaultChecked?: CheckedState
+  required?: boolean
+  /**
+   *
+   * @param checked Either boolean or "indeterminate" which is meant to allow for a third state that means "neither", usually indicated by a minus sign.
+   */
+  onCheckedChange?(checked: CheckedState): void
+  labelledBy?: string
+  name?: string
+  value?: string
+}
+
+export type CheckboxProps = CheckboxBaseProps & CheckboxExtraProps
+
+export function useCheckbox<R extends View, P extends CheckboxProps>(
+  props: P,
+  [checked, setChecked]: [
+    CheckedState,
+    React.Dispatch<React.SetStateAction<CheckedState>>,
+  ],
+  ref: React.Ref<R>
+) {
+  const {
+    labelledBy: ariaLabelledby,
+    name,
+    required,
+    disabled,
+    value = 'on',
+    onCheckedChange,
+    ...checkboxProps
+  } = props
+  const [button, setButton] = React.useState<HTMLButtonElement | null>(null)
+  const composedRefs = useComposedRefs(ref, (node) => setButton(node as any))
+  const hasConsumerStoppedPropagationRef = React.useRef(false)
+  // We set this to true by default so that events bubble to forms without JS (SSR)
+  const isFormControl = isWeb ? (button ? Boolean(button.closest('form')) : true) : false
+
+  const labelId = useLabelContext(button)
+  const labelledBy = ariaLabelledby || labelId
+
+  return {
+    bubbleInput:
+      isWeb && isFormControl ? (
+        <BubbleInput
+          isHidden
+          control={button}
+          bubbles={!hasConsumerStoppedPropagationRef.current}
+          name={name}
+          value={value}
+          checked={checked}
+          required={required}
+          disabled={disabled}
+        />
+      ) : null,
+    checkboxRef: composedRefs,
+    checkboxProps: {
+      role: 'checkbox',
+      'aria-labelledby': labelledBy,
+      'aria-checked': isIndeterminate(checked) ? 'mixed' : checked,
+      ...checkboxProps,
+      ...(isWeb && {
+        type: 'button',
+        value,
+        'data-state': getState(checked),
+        'data-disabled': disabled ? '' : undefined,
+        disabled: disabled,
+        onKeyDown: composeEventHandlers(
+          (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
+          (event) => {
+            // According to WAI ARIA, Checkboxes don't activate on enter keypress
+            if (event.key === 'Enter') event.preventDefault()
+          }
+        ),
+      }),
+      onPress: composeEventHandlers(
+        props.onPress as any,
+        (event: GestureReponderEvent) => {
+          setChecked((prevChecked) =>
+            isIndeterminate(prevChecked) ? true : !prevChecked
+          )
+          if (isFormControl && 'isPropagationStopped' in event) {
+            hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
+            // if checkbox is in a form, stop propagation from the button so that we only propagate
+            // one click event (from the input). We propagate changes from an input so that native
+            // form validation works and form events reflect checkbox updates.
+            if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
+          }
+        }
+      ),
+    } satisfies CheckboxBaseProps,
+  }
+}

package/src/utils.tsx

@@ -0,0 +1,9 @@
+import type { CheckedState } from './useCheckbox'
+
+export function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {
+  return checked === 'indeterminate'
+}
+
+export function getState(checked: CheckedState) {
+  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'
+}

package/types/BubbleInput.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { CheckedState } from './useCheckbox';
+export interface BubbleInputProps extends Omit<React.ComponentProps<'input'>, 'checked'> {
+    checked: CheckedState;
+    control: HTMLElement | null;
+    bubbles: boolean;
+    isHidden?: boolean;
+}
+export declare const BubbleInput: (props: BubbleInputProps) => JSX.Element;
+//# sourceMappingURL=BubbleInput.d.ts.map

package/types/BubbleInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleInput.d.ts","sourceRoot":"","sources":["../src/BubbleInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAGjD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IACtF,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,gBAiDlD,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useCheckbox';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,SAAS,CAAA"}

package/types/useCheckbox.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { PressableProps, View, ViewProps } from 'react-native';
+export type CheckedState = boolean | 'indeterminate';
+type CheckboxBaseProps = ViewProps & Pick<PressableProps, 'onPress'>;
+export type CheckboxExtraProps = {
+    children?: React.ReactNode;
+    id?: string;
+    disabled?: boolean;
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    required?: boolean;
+    /**
+     *
+     * @param checked Either boolean or "indeterminate" which is meant to allow for a third state that means "neither", usually indicated by a minus sign.
+     */
+    onCheckedChange?(checked: CheckedState): void;
+    labelledBy?: string;
+    name?: string;
+    value?: string;
+};
+export type CheckboxProps = CheckboxBaseProps & CheckboxExtraProps;
+export declare function useCheckbox<R extends View, P extends CheckboxProps>(props: P, [checked, setChecked]: [
+    CheckedState,
+    React.Dispatch<React.SetStateAction<CheckedState>>
+], ref: React.Ref<R>): {
+    bubbleInput: JSX.Element | null;
+    checkboxRef: (node: R) => void;
+    checkboxProps: {
+        role: "checkbox";
+        'aria-labelledby': string | undefined;
+        'aria-checked': boolean | "mixed";
+    } & Omit<P, "disabled" | "labelledBy" | "name" | "required" | "value" | "onCheckedChange"> & {
+        onPress: import("@tamagui/core").EventHandler<import("react-native").GestureResponderEvent> | undefined;
+        type?: string | undefined;
+        value?: string | undefined;
+        'data-state'?: string | undefined;
+        'data-disabled'?: string | undefined;
+        disabled?: boolean | undefined;
+        onKeyDown?: import("@tamagui/core").EventHandler<React.KeyboardEvent<HTMLButtonElement>> | undefined;
+    };
+};
+export {};
+//# sourceMappingURL=useCheckbox.d.ts.map

package/types/useCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckbox.d.ts","sourceRoot":"","sources":["../src/useCheckbox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAKnE,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,KAAK,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,CAAA;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,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;CACf,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,kBAAkB,CAAA;AAElE,wBAAgB,WAAW,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,aAAa,EACjE,KAAK,EAAE,CAAC,EACR,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACrB,YAAY;IACZ,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;CACnD,EACD,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;EAuElB"}

package/types/utils.d.ts

@@ -0,0 +1,4 @@
+import type { CheckedState } from './useCheckbox';
+export declare function isIndeterminate(checked?: CheckedState): checked is 'indeterminate';
+export declare function getState(checked: CheckedState): "indeterminate" | "checked" | "unchecked";
+//# sourceMappingURL=utils.d.ts.map

package/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,IAAI,eAAe,CAElF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,YAAY,6CAE7C"}