@aegov/design-system-react/dist/components/Checkbox/Checkbox.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.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactCheckbox = require("@radix-ui/react-checkbox");
var _react2 = require("@phosphor-icons/react");
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 CheckboxSchema = _zod.z.object({
  checked: _zod.z.boolean().optional(),
  defaultChecked: _zod.z.boolean().optional(),
  onCheckedChange: _zod.z.function().optional(),
  disabled: _zod.z.boolean().optional(),
  required: _zod.z.boolean().optional(),
  name: _zod.z.string().optional(),
  value: _zod.z.string().optional(),
  id: _zod.z.string().optional(),
  label: _zod.z.string().optional(),
  description: _zod.z.string().optional(),
  size: _zod.z.enum(['sm', 'base', 'lg']).optional(),
  variant: _zod.z.enum(['primary', 'secondary']).optional(),
  className: _zod.z.string().optional(),
  asChild: _zod.z.boolean().optional()
});
const sizeStyles = {
  sm: {
    checkbox: 'h-4 w-4',
    label: 'text-sm',
    description: 'text-xs',
    icon: 'h-3 w-3'
  },
  base: {
    checkbox: 'h-5 w-5',
    label: 'text-base',
    description: 'text-sm',
    icon: 'h-4 w-4'
  },
  lg: {
    checkbox: 'h-6 w-6',
    label: 'text-lg',
    description: 'text-base',
    icon: 'h-5 w-5'
  }
};
const variantStyles = {
  primary: {
    checkbox: 'border-aegold-450 data-[state=checked]:bg-aegold-450 data-[state=checked]:border-aegold-450 before:bg-primary-50 focus:ring-primary-400',
    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 rtl:before:translate-x-2/4',
    focus: 'focus-visible:ring-primary-500'
  },
  secondary: {
    checkbox: 'border-secondary-400 data-[state=checked]:bg-secondary-800 data-[state=checked]:border-secondary-800 before:bg-secondary-50',
    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 rtl:before:translate-x-2/4',
    focus: 'focus-visible:ring-secondary-500'
  }
};
const Checkbox = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    checked,
    defaultChecked,
    onCheckedChange,
    disabled,
    required,
    name,
    value,
    id: providedId,
    label,
    description,
    size = 'base',
    variant = 'primary',
    className,
    asChild,
    ...rest
  } = CheckboxSchema.parse(props);

  // Generate a unique ID if none is provided
  const id = _react.default.useMemo(() => providedId || `checkbox-${Math.random().toString(36).slice(2)}`, [providedId]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _tailwindMerge.twMerge)('flex items-start gap-4', className)
  }, /*#__PURE__*/_react.default.createElement(_reactCheckbox.Root, _extends({
    ref: ref,
    id: id,
    checked: checked,
    defaultChecked: defaultChecked,
    onCheckedChange: onCheckedChange,
    disabled: disabled,
    required: required,
    name: name,
    value: value,
    asChild: asChild,
    className: (0, _tailwindMerge.twMerge)('flex shrink-0 items-center justify-center rounded border bg-whitely-50 transition-colors relative', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50 disabled:before:!hidden disabled:pointer-events-none', sizeStyles[size].checkbox, variantStyles[variant].checkbox, variantStyles[variant].hover, variantStyles[variant].focus)
  }, rest), /*#__PURE__*/_react.default.createElement(_reactCheckbox.Indicator, {
    className: "flex items-center justify-center text-whitely-50"
  }, /*#__PURE__*/_react.default.createElement(_react2.Check, {
    weight: "bold",
    className: sizeStyles[size].icon
  }))), (label || description) && /*#__PURE__*/_react.default.createElement("div", {
    className: "flex flex-col gap-2"
  }, label && /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: id,
    className: (0, _tailwindMerge.twMerge)('text-aeblack-800 font-medium leading-none -mt-0.5 cursor-pointer', disabled && 'text-aeblack-300 cursor-not-allowed', sizeStyles[size].label)
  }, label), description && /*#__PURE__*/_react.default.createElement("p", {
    className: (0, _tailwindMerge.twMerge)('text-aeblack-400 leading-snug', disabled && 'text-aeblack-200', sizeStyles[size].description)
  }, description)));
});
Checkbox.displayName = 'Checkbox';
var _default = exports.default = Checkbox;