@crossed/ui/lib/commonjs/forms/Radio/Radio.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 Radio_exports = {};
__export(Radio_exports, {
  Radio: () => Radio,
  RadioRoot: () => RadioRoot
});
module.exports = __toCommonJS(Radio_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_core = require("@crossed/core");
var import_styled = require("@crossed/styled");
var import_react = require("react");
var import_react_native = require("react-native");
var import_Text = require("../../typography/Text");
const rootStyles = (0, import_styled.createStyles)((t) => ({
  default: {
    base: {
      width: 16,
      height: 16,
      borderRadius: 44,
      borderWidth: 1,
      borderColor: t.colors.border.secondary,
      alignItems: "center",
      display: "flex",
      justifyContent: "center",
      backgroundColor: t.colors.background.secondary
    }
  },
  hover: { base: { borderColor: t.colors.border.tertiary } },
  active: {
    base: { borderColor: t.colors.border.tertiary },
    web: {
      base: {
        transition: "all 0.1s ease",
        boxShadow: `0px 0px 0px 2px ${t.colors.border.secondary}`
      }
    }
  },
  disabled: {
    base: {
      backgroundColor: t.colors.primary["10"],
      borderColor: t.colors.primary["10"]
    }
  },
  checked: { base: { borderColor: t.colors.primary.primary } },
  checkedActive: { base: { borderColor: t.colors.primary.primary } }
}));
const pressableStyles = (0, import_styled.createStyles)(({ space }) => ({
  pressable: {
    base: {
      alignItems: "center",
      display: "flex",
      flexDirection: "row",
      gap: space.xl
    }
  }
}));
const thumbStyles = (0, import_styled.createStyles)((t) => ({
  default: {
    base: {
      width: 10,
      height: 10,
      borderRadius: 10,
      borderWidth: 1,
      borderStyle: "solid",
      borderColor: "transparent",
      backgroundColor: "transparent"
    }
  },
  checked: {
    base: {
      backgroundColor: t.colors.primary.primary,
      borderColor: t.colors.primary.primary
    }
  },
  checkedActive: {
    base: {
      backgroundColor: t.colors.primary["1"],
      borderColor: t.colors.primary["1"]
    }
  },
  checkedDisabled: {
    base: {
      backgroundColor: t.colors.neutral["70"],
      borderColor: t.colors.neutral["70"]
    }
  }
}));
const [RadioProvider, useRadioContext] = (0, import_core.createScope)({
  checked: false
});
const [RadioInteractionProvider, useStateInteraction] = (0, import_core.createScope)({
  active: false,
  hover: false,
  disabled: false
});
const RadioThumb = (0, import_react.memo)(
  (0, import_react.forwardRef)((props, ref) => {
    const { active, hover, disabled } = useStateInteraction();
    const { checked } = useRadioContext();
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react_native.View,
      {
        ref,
        ...props,
        ...(0, import_styled.composeStyles)(
          rootStyles.default,
          hover && rootStyles.hover,
          active && rootStyles.active,
          checked && rootStyles.checked,
          checked && active && rootStyles.checkedActive,
          disabled && rootStyles.disabled,
          props.style
        ).rnw(),
        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_react_native.View,
          {
            ...(0, import_styled.composeStyles)(
              thumbStyles.default,
              checked && thumbStyles.checked,
              disabled && checked && thumbStyles.checkedDisabled
            ).rnw()
          }
        )
      }
    );
  })
);
const RadioRoot = ({
  children,
  disabled,
  checked: checkedProps,
  defaultChecked = false,
  onChecked,
  noThumb,
  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]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioProvider, { checked, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_react_native.Pressable,
    {
      role: "radio",
      "aria-checked": checked,
      ...props,
      onPress: handlePress,
      disabled,
      style: ({
        pressed,
        hovered,
        focused
      }) => (0, import_styled.composeStyles)(pressableStyles.pressable, style).rnw({
        active: pressed,
        hover: hovered,
        focus: focused
      }).style,
      children: ({ hovered, pressed }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
        RadioInteractionProvider,
        {
          hover: hovered,
          active: pressed,
          disabled,
          children: [
            !noThumb && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioThumb, {}),
            typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children }) : children
          ]
        }
      )
    }
  ) });
};
RadioRoot.displayName = "Radio";
const Radio = (0, import_core.withStaticProperties)(RadioRoot, { Thumb: RadioThumb });
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Radio,
  RadioRoot
});
//# sourceMappingURL=Radio.js.map