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

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

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Checkbox_exports = {};
__export(Checkbox_exports, {
  Checkbox: () => Checkbox
});
module.exports = __toCommonJS(Checkbox_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_core = require("@crossed/core");
var import_styled = require("@crossed/styled");
var import_unicons = require("@crossed/unicons");
var import_react = require("react");
var import_react_native = require("react-native");
var import_Implementation = require("./Implementation");
var import_Text = require("../../typography/Text");
const checkboxStyles = (0, import_styled.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] = (0, import_core.createScope)({
  checked: false
});
const [CheckboxInteractionProvider, useStateInteraction] = (0, import_core.createScope)({
  active: false,
  hover: false,
  focus: false,
  disabled: false
});
const CheckboxThumb = (0, import_react.memo)(
  (0, import_react.forwardRef)((props, ref) => {
    const { checked } = useCheckboxContext();
    const { disabled, hover, active } = useStateInteraction();
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_native.View,
      {
        ref,
        ...props,
        ...(0, import_styled.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__ */ (0, import_jsx_runtime.jsx)(import_unicons.Check, { size: 15, color: "white" })
      }
    );
  })
);
CheckboxThumb.displayName = "Checkbox.Thumb";
const CheckboxRoot = ({
  children,
  checked: checkedProps,
  defaultChecked = false,
  onChecked,
  noThumb,
  disabled,
  style,
  ...props
}) => {
  const [checked, setChecked] = (0, import_core.useUncontrolled)({
    defaultValue: defaultChecked,
    value: checkedProps,
    onChange: onChecked
  });
  const [, setTransition] = (0, import_react.useTransition)();
  const handlePress = (0, import_react.useCallback)(
    (e) => {
      var _a;
      (_a = props.onPress) == null ? void 0 : _a.call(props, e);
      setTransition(() => {
        setChecked(!checked);
      });
    },
    [setChecked, checked, setTransition, props.onPress]
  );
  const renderCallback = (0, import_react.useCallback)(
    ({
      pressed,
      focused,
      hovered
    }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
      CheckboxInteractionProvider,
      {
        focus: focused,
        active: pressed,
        hover: hovered,
        disabled,
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Implementation.Implementation, { checked, setChecked }),
          !noThumb && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxThumb, {}),
          typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children }) : children
        ]
      }
    ),
    [children, checked, setChecked]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckboxProvider, { checked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_native.Pressable,
    {
      ...props,
      role: "checkbox",
      "aria-checked": checked,
      onPress: handlePress,
      disabled,
      style: ({
        pressed,
        hovered,
        focused
      }) => (0, import_styled.composeStyles)(checkboxStyles.pressable, style).rnw({
        active: pressed,
        hover: hovered,
        focus: focused
      }).style,
      children: renderCallback
    }
  ) });
};
CheckboxRoot.displayName = "Checkbox";
const Checkbox = (0, import_core.withStaticProperties)(CheckboxRoot, {
  Thumb: CheckboxThumb
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Checkbox
});
//# sourceMappingURL=index.js.map