@crossed/ui/lib/module/forms/Radio/Radio.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 {
  forwardRef,
  memo,
  useCallback,
  useTransition
} from "react";
import { Pressable, View } from "react-native";
import { Text } from "../../typography/Text";
const rootStyles = 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 = createStyles(({ space }) => ({
  pressable: {
    base: {
      alignItems: "center",
      display: "flex",
      flexDirection: "row",
      gap: space.md
    }
  }
}));
const thumbStyles = createStyles((t) => ({
  default: {
    base: {
      width: 10,
      height: 10,
      borderRadius: 10,
      backgroundColor: "transparent"
    }
  },
  checked: {
    base: { backgroundColor: t.colors.primary.primary }
  },
  checkedActive: {
    base: { backgroundColor: t.colors.primary["1"] }
  },
  checkedDisabled: {
    base: { backgroundColor: t.colors.neutral["70"] }
  }
}));
const [RadioProvider, useRadioContext] = createScope({
  checked: false
});
const [RadioInteractionProvider, useStateInteraction] = createScope({
  active: false,
  hover: false,
  disabled: false
});
const RadioThumb = memo(
  forwardRef((props, ref) => {
    const { active, hover, disabled } = useStateInteraction();
    const { checked } = useRadioContext();
    return /* @__PURE__ */ jsx(
      View,
      {
        ref,
        ...props,
        ...composeStyles(
          rootStyles.default,
          hover && rootStyles.hover,
          active && rootStyles.active,
          checked && rootStyles.checked,
          checked && active && rootStyles.checkedActive,
          disabled && rootStyles.disabled,
          props.style
        ).rnw(),
        children: /* @__PURE__ */ jsx(
          View,
          {
            ...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] = 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]
  );
  return /* @__PURE__ */ jsx(RadioProvider, { checked, children: /* @__PURE__ */ jsx(
    Pressable,
    {
      role: "radio",
      "aria-checked": checked,
      ...props,
      onPress: handlePress,
      disabled,
      style: ({
        pressed,
        hovered,
        focused
      }) => composeStyles(pressableStyles.pressable, style).rnw({
        active: pressed,
        hover: hovered,
        focus: focused
      }).style,
      children: ({ hovered, pressed }) => /* @__PURE__ */ jsxs(
        RadioInteractionProvider,
        {
          hover: hovered,
          active: pressed,
          disabled,
          children: [
            !noThumb && /* @__PURE__ */ jsx(RadioThumb, {}),
            typeof children === "string" ? /* @__PURE__ */ jsx(Text, { children }) : children
          ]
        }
      )
    }
  ) });
};
RadioRoot.displayName = "Radio";
const Radio = withStaticProperties(RadioRoot, { Thumb: RadioThumb });
export {
  Radio,
  RadioRoot
};
//# sourceMappingURL=Radio.js.map