@aegov/design-system-react/dist/components/Button/Button.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 _tailwindMerge = require("tailwind-merge");
var _classVarianceAuthority = require("class-variance-authority");
var _zod = require("zod");
var _reactSlot = require("@radix-ui/react-slot");
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); } // TODO: RTL
const ButtonSchema = _zod.z.object({
  children: _zod.z.any(),
  className: _zod.z.string().optional(),
  style: _zod.z.enum(['primary', 'secondary'], {
    message: 'Style must be either primary or secondary'
  }).optional(),
  variant: _zod.z.enum(['solid', 'soft', 'link', 'outline']).optional(),
  size: _zod.z.enum(['xs', 'sm', 'base', 'lg']).optional(),
  block: _zod.z.boolean().optional(),
  isIcon: _zod.z.boolean().optional(),
  asChild: _zod.z.boolean().optional(),
  disabled: _zod.z.boolean().optional()
});
const style = {
  primary: {
    variant: {
      solid: 'bg-primary-600 text-whitely-50 hover:bg-primary-500 hover:text-primary-50 hover:ring-4 hover:ring-primary-100 hover:shadow-primary-100 focus-visible:ring-primary-support-300',
      soft: 'bg-primary-50 hover:bg-primary-100 text-primary-700 hover:text-primary-600 focus-visible:ring-primary-support-400 hover:shadow-none focus-visible:ring-offset-0 disabled:opacity-50',
      link: 'text-primary-600 hover:bg-primary-50 focus-visible:ring-primary-support-400 focus-visible:border-primary-support-400 bg-transparent hover:shadow-none focus-visible:ring-1 focus-visible:ring-offset-0',
      outline: 'text-primary-600 hover:bg-primary-50 border-primary-600 focus-visible:border-primary-support-400 focus-visible:ring-primary-support-400 bg-transparent hover:shadow-none focus-visible:ring-1 focus-visible:ring-offset-0'
    }
  },
  secondary: {
    variant: {
      solid: 'bg-secondary-800 text-secondary-50 hover:bg-secondary-950 hover:text-secondary-100 hover:ring-4 hover:ring-secondary-100 hover:shadow-secondary-100 focus-visible:ring-secondary-support-300',
      soft: 'bg-secondary-50 hover:bg-secondary-100 text-secondary-800 hover:text-secondary-800 hover:shadow-none focus-visible:ring-offset-0 disabled:opacity-50',
      link: 'text-secondary-800 hover:bg-secondary-50 focus-visible:border-secondary-support-300 bg-transparent hover:shadow-none focus-visible:ring-1 focus-visible:ring-offset-0',
      outline: 'text-secondary-800 hover:bg-secondary-100 border-secondary-800 focus-visible:border-secondary-support-300 bg-transparent hover:shadow-none focus-visible:ring-1 focus-visible:ring-offset-0'
    }
  }
};
const button = styleType => (0, _classVarianceAuthority.cva)([
// Base styles
'inline-flex flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center text-center no-underline transition duration-200 ease-in-out',
// Basic styles
'h-12 gap-2 rounded-lg border-2 border-transparent px-6 text-base font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
// Disabled styles
'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-30 disabled:!shadow-none'], {
  variants: {
    variant: style[styleType].variant,
    size: {
      xs: 'h-8 rounded px-4 text-sm',
      sm: 'h-10 rounded-md px-5 text-base',
      base: 'h-12 gap-2 rounded-lg px-6',
      lg: 'h-13 gap-3 px-7 text-lg'
    },
    block: {
      true: 'w-full'
    },
    isIcon: {
      true: 'gap-0 px-0',
      false: ''
    }
  },
  compoundVariants: [{
    isIcon: true,
    size: 'xs',
    class: 'w-8'
  }, {
    isIcon: true,
    size: 'sm',
    class: 'w-10'
  }, {
    isIcon: true,
    size: 'base',
    class: 'w-12'
  }, {
    isIcon: true,
    size: 'lg',
    class: 'w-14'
  }],
  defaultVariants: {
    variant: 'solid'
  }
});
const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
  const {
    style: styleType,
    children,
    className,
    variant,
    size,
    block,
    isIcon,
    asChild,
    disabled,
    ...rest
  } = ButtonSchema.parse(props);
  const Comp = asChild ? _reactSlot.Slot : 'button';
  return /*#__PURE__*/_react.default.createElement(Comp, _extends({
    ref: ref,
    className: (0, _tailwindMerge.twMerge)(button(styleType || 'primary')({
      variant,
      size,
      block,
      isIcon
    }), className),
    disabled: disabled,
    "aria-disabled": disabled
  }, rest), children);
});
Button.displayName = 'Button';
var _default = exports.default = Button;