@crossed/ui/lib/module/forms/Checkbox/index.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import {
  createScope,
  useUncontrolled,
  withStaticProperties
} from "@crossed/core";
import { composeStyles, createStyles } from "@crossed/styled";
import { Check } from "@crossed/unicons";
import {
  forwardRef,
  memo,
  useCallback,
  useTransition
} from "react";
import { Pressable, View } from "react-native";
import { Implementation } from "./Implementation";
import { Text } from "../../typography/Text";
const checkboxStyles = createStyles((t) => ({
  pressable: {
    base: {
      alignItems: "center",
      display: "flex",
      flexDirection: "row",
      gap: t.space.md
    }
  },
  hover: { base: { borderColor: t.colors.border.tertiary } },
  disabled: {
    base: {
      backgroundColor: t.colors.primary["10"],
      borderColor: t.colors.primary["10"]
    }
  },
  active: {
    base: { borderColor: t.colors.border.tertiary },
    "web": {
      base: {
        transition: "all 0.1s ease",
        boxShadow: `0px 0px 0px 2px ${t.colors.border.secondary}`
      }
    }
  },
  root: {
    "base": {
      width: 16,
      height: 16,
      borderRadius: 4,
      borderWidth: 1,
      borderColor: t.colors.border.secondary,
      alignItems: "center",
      display: "flex",
      justifyContent: "center",
      backgroundColor: "transparent"
    }
  },
  checked: {
    "base": {
      borderColor: t.colors.primary.primary,
      backgroundColor: t.colors.primary.primary
    }
  },
  checkedActive: {
    base: {
      borderColor: t.colors.primary.primary,
      backgroundColor: t.colors.primary.primary
    }
  }
}));
const [CheckboxProvider, useCheckboxContext] = createScope({
  checked: false
});
const [CheckboxInteractionProvider, useStateInteraction] = createScope({
  active: false,
  hover: false,
  focus: false,
  disabled: false
});
const CheckboxThumb = memo(
  forwardRef((props, ref) => {
    const { checked } = useCheckboxContext();
    const { disabled, hover, active } = useStateInteraction();
    return /* @__PURE__ */ jsx(
      View,
      {
        ref,
        ...props,
        ...composeStyles(
          checkboxStyles.root,
          checked && checkboxStyles.checked,
          checked && !disabled && active && checkboxStyles.checkedActive,
          disabled && checkboxStyles.disabled,
          !disabled && hover && checkboxStyles.hover,
          !disabled && active && checkboxStyles.active,
          props.style
        ).rnw(),
        children: checked && /* @__PURE__ */ jsx(Check, { size: 15, color: "white" })
      }
    );
  })
);
CheckboxThumb.displayName = "Checkbox.Thumb";
const CheckboxRoot = ({
  children,
  checked: checkedProps,
  defaultChecked = false,
  onChecked,
  noThumb,
  disabled,
  style,
  ...props
}) => {
  const [checked, setChecked] = useUncontrolled({
    defaultValue: defaultChecked,
    value: checkedProps,
    onChange: onChecked
  });
  const [, setTransition] = useTransition();
  const handlePress = useCallback(
    (e) => {
      var _a;
      (_a = props.onPress) == null ? void 0 : _a.call(props, e);
      setTransition(() => {
        setChecked(!checked);
      });
    },
    [setChecked, checked, setTransition, props.onPress]
  );
  const renderCallback = useCallback(
    ({
      pressed,
      focused,
      hovered
    }) => /* @__PURE__ */ jsxs(
      CheckboxInteractionProvider,
      {
        focus: focused,
        active: pressed,
        hover: hovered,
        disabled,
        children: [
          /* @__PURE__ */ jsx(Implementation, { checked, setChecked }),
          !noThumb && /* @__PURE__ */ jsx(CheckboxThumb, {}),
          typeof children === "string" ? /* @__PURE__ */ jsx(Text, { children }) : children
        ]
      }
    ),
    [children, checked, setChecked]
  );
  return /* @__PURE__ */ jsx(CheckboxProvider, { checked, children: /* @__PURE__ */ jsx(
    Pressable,
    {
      ...props,
      role: "checkbox",
      "aria-checked": checked,
      onPress: handlePress,
      disabled,
      style: ({
        pressed,
        hovered,
        focused
      }) => composeStyles(checkboxStyles.pressable, style).rnw({
        active: pressed,
        hover: hovered,
        focus: focused
      }).style,
      children: renderCallback
    }
  ) });
};
CheckboxRoot.displayName = "Checkbox";
const Checkbox = withStaticProperties(CheckboxRoot, {
  Thumb: CheckboxThumb
});
export {
  Checkbox
};
//# sourceMappingURL=index.js.map