@aegov/design-system-react/dist/components/Hyperlink/Hyperlink.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.hyperlinkSchema = exports.Hyperlink = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactSlot = require("@radix-ui/react-slot");
var _react2 = require("@phosphor-icons/react");
var _classVarianceAuthority = require("class-variance-authority");
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 hyperlinkVariants = (0, _classVarianceAuthority.cva)(
// Base styles
'relative inline-flex items-center gap-2 rounded transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2', {
  variants: {
    variant: {
      default: 'underline underline-offset-1 text-primary-600 hover:text-primary-500 hover:decoration-2 active:text-primary-700',
      cta: 'px-2.5 py-2 -ml-2.5 font-semibold text-primary-600 hover:text-primary-500 hover:underline rtl:-mr-2.5 rtl:ml-0',
      soft: 'px-2.5 py-2 -ml-2.5 font-semibold text-primary-600 hover:text-primary-500 hover:bg-primary-50 rtl:-mr-2.5 rtl:ml-0',
      secondary: 'px-2.5 py-2 -ml-2.5 font-semibold text-gray-800 hover:text-gray-700 hover:underline rtl:-mr-2.5 rtl:ml-0',
      'secondary-soft': 'px-2.5 py-2 -ml-2.5 font-semibold text-gray-800 hover:text-gray-700 hover:bg-gray-50 rtl:-mr-2.5 rtl:ml-0'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
});
const hyperlinkSchema = exports.hyperlinkSchema = _zod.z.object({
  href: _zod.z.string().url().optional(),
  children: _zod.z.any(),
  variant: _zod.z.enum(['default', 'cta', 'soft', 'secondary', 'secondary-soft']).optional(),
  asChild: _zod.z.boolean().optional(),
  external: _zod.z.boolean().optional(),
  icon: _zod.z.boolean().optional(),
  className: _zod.z.string().optional()
});
const Hyperlink = exports.Hyperlink = /*#__PURE__*/_react.default.forwardRef(({
  href,
  children,
  variant = 'default',
  asChild = false,
  external = false,
  icon = false,
  className,
  ...props
}, ref) => {
  const Comp = asChild ? _reactSlot.Slot : 'a';

  // Validate props
  hyperlinkSchema.parse({
    href,
    children,
    variant,
    asChild,
    external,
    icon,
    className
  });
  const externalProps = external ? {
    target: '_blank',
    rel: 'noopener noreferrer'
  } : {};
  const content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, icon && /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
    className: "h-5 w-5 rtl:-scale-x-100",
    "aria-hidden": "true"
  }), external && /*#__PURE__*/_react.default.createElement("span", {
    className: "sr-only"
  }, " (opens in new tab)"));
  return /*#__PURE__*/_react.default.createElement(Comp, _extends({
    ref: ref,
    href: !asChild ? href : undefined,
    className: hyperlinkVariants({
      variant,
      className
    })
  }, externalProps, props), content);
});
Hyperlink.displayName = 'Hyperlink';