@aegov/design-system-react/dist/components/Radio/Radio.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RadioItem = exports.Radio = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactRadioGroup = require("@radix-ui/react-radio-group");
var _tailwindMerge = require("tailwind-merge");
var _zod = require("zod");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const RadioSchema = _zod.z.object({
  defaultValue: _zod.z.string().optional(),
  value: _zod.z.string().optional(),
  onValueChange: _zod.z.function().optional(),
  name: _zod.z.string().optional(),
  required: _zod.z.boolean().optional(),
  disabled: _zod.z.boolean().optional(),
  orientation: _zod.z.enum(['horizontal', 'vertical']).optional(),
  className: _zod.z.string().optional(),
  children: _zod.z.any().optional(),
  size: _zod.z.enum(['sm', 'base', 'lg']).optional(),
  variant: _zod.z.enum(['primary', 'secondary']).optional()
});
const RadioItemSchema = _zod.z.object({
  id: _zod.z.string().optional(),
  value: _zod.z.string(),
  disabled: _zod.z.boolean().optional(),
  className: _zod.z.string().optional(),
  children: _zod.z.any().optional(),
  description: _zod.z.string().optional()
});
const sizeStyles = {
  sm: {
    radio: 'h-4 w-4',
    indicator: 'h-2 w-2',
    label: 'text-sm',
    description: 'text-xs'
  },
  base: {
    radio: 'h-5 w-5',
    indicator: 'h-2.5 w-2.5',
    label: 'text-base',
    description: 'text-sm'
  },
  lg: {
    radio: 'h-6 w-6',
    indicator: 'h-3 w-3',
    label: 'text-lg',
    description: 'text-base'
  }
};
const variantStyles = {
  primary: {
    radio: 'border-primary-400 focus-visible:ring-primary-500 before:bg-primary-50',
    indicator: 'bg-aegold-450',
    hover: 'hover:border-primary-500 before:absolute before:start-2/4 before:top-2/4 before:mix-blend-multiply before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:scale-0 before:rounded-full before:transition-all hover:before:scale-100'
  },
  secondary: {
    radio: 'border-secondary-400 focus-visible:ring-secondary-500 before:bg-secondary-50',
    indicator: 'bg-secondary-800',
    hover: 'hover:border-secondary-500 before:absolute before:start-2/4 before:top-2/4 before:mix-blend-multiply before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:scale-0 before:rounded-full before:transition-all hover:before:scale-100'
  }
};

// RadioItem component that can be used as a child of Radio
const RadioItem = exports.RadioItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    id,
    value,
    disabled,
    className,
    children,
    description,
    ...rest
  } = RadioItemSchema.parse(props);

  // These props will be injected by the parent Radio component
  const {
    size,
    variant,
    radioGroupDisabled
  } = props;

  // Generate a unique ID if none is provided
  const radioId = _react.default.useMemo(() => id || `radio-${value}-${Math.random().toString(36).slice(2)}`, [id, value]);

  // Determine if this item is disabled (either individually or by the parent group)
  const isDisabled = radioGroupDisabled || disabled;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)("flex rtl:flex-row-reverse rtl:text-right items-start gap-4", className)
  }, /*#__PURE__*/_react.default.createElement(_reactRadioGroup.Item, _extends({
    ref: ref,
    id: radioId,
    value: value,
    disabled: isDisabled,
    className: (0, _tailwindMerge.twMerge)('relative border-2 rounded-full bg-whitely-50 shrink-0 mt-[3px]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50 disabled:border-primary-200 disabled:before:!hidden disabled:pointer-events-none', 'transition-colors', sizeStyles[size]?.radio, variantStyles[variant]?.radio, variantStyles[variant]?.hover)
  }, rest), /*#__PURE__*/_react.default.createElement(_reactRadioGroup.Indicator, {
    className: (0, _tailwindMerge.twMerge)('flex items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'rounded-full', sizeStyles[size]?.indicator, variantStyles[variant]?.indicator)
  })), (children || description) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: radioId,
    className: (0, _tailwindMerge.twMerge)('text-aeblack-800 font-semibold block', isDisabled && 'text-aeblack-300 cursor-not-allowed', sizeStyles[size]?.label)
  }, children), description && /*#__PURE__*/_react.default.createElement("p", {
    id: `${radioId}-description`,
    className: (0, _tailwindMerge.twMerge)('text-aeblack-400 mt-1', isDisabled && 'text-aeblack-200', sizeStyles[size]?.description)
  }, description)));
});
RadioItem.displayName = 'RadioItem';

// Main Radio component
const Radio = exports.Radio = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    defaultValue,
    value,
    onValueChange,
    name,
    required,
    disabled,
    orientation = 'vertical',
    className,
    children,
    size = 'base',
    variant = 'primary',
    ...rest
  } = RadioSchema.parse(props);
  return /*#__PURE__*/_react.default.createElement(_reactRadioGroup.Root, _extends({
    ref: ref,
    defaultValue: defaultValue,
    value: value,
    onValueChange: onValueChange,
    name: name,
    required: required,
    disabled: disabled,
    orientation: orientation,
    className: (0, _tailwindMerge.twMerge)('space-y-6', orientation === 'horizontal' && 'flex space-x-8 space-y-0', className)
  }, rest), _react.default.Children.map(children, child => {
    if (/*#__PURE__*/_react.default.isValidElement(child)) {
      // Clone the child element and inject size, variant and disabled props
      return /*#__PURE__*/_react.default.cloneElement(child, {
        size,
        variant,
        radioGroupDisabled: disabled
      });
    }
    return child;
  }));
});
Radio.displayName = 'Radio';