@kloudlite/design-system/mjs/molecule/banner.js

A design system for building ambitious products.

// components/icons.tsx
import {
  BellSimple,
  Warning,
  WarningCircleFill,
  Domain,
  ArrowLeftLg,
  ArrowRightLg,
  ArrowUpLg,
  ArrowDownLg,
  ArrowsDownUp,
  Plus,
  Trash,
  PencilLine,
  PencilSimple,
  GithubLogoFill,
  GitlabLogoFill,
  GitBranchFill,
  Users,
  Check,
  ChevronLeft,
  ChevronRight,
  X,
  SmileySad,
  InfoFill,
  CheckCircleFill,
  WarningFill,
  WarningOctagonFill,
  LockSimple,
  XCircleFill,
  LockSimpleOpen,
  MinusCircle,
  Search,
  ArrowsCounterClockwise,
  ArrowClockwise,
  Copy,
  GearSix,
  QrCode,
  WireGuardlogo,
  ChevronUpDown,
  ChevronDown,
  Buildings,
  Project,
  InfraAsCode,
  Container,
  File,
  TreeStructure,
  CirclesFour,
  BackingServices,
  VirtualMachine,
  Database,
  ArrowsClockwise,
  Info,
  Fan,
  WarningCircle,
  ChecksFill,
  CircleNotch,
  Circle,
  CircleFill,
  Spinner,
  Globe,
  ShieldCheck,
  NoOps,
  Nodeless,
  GitMerge,
  PencilLine as PencilLine2,
  AWSlogoFill,
  GoogleCloudlogo,
  ArrowCounterClockwise,
  CopySimple,
  RecordFill,
  CheckCircle,
  ArrowLeftLg as ArrowLeftLg2,
  EyeSlash,
  Eye,
  CaretUpFill,
  CaretDownFill,
  XFill,
  HamburgerFill,
  CalendarCheckFill,
  GearFill,
  EnvelopeSimple
} from "@jengaicons/react";
import { jsx } from "react/jsx-runtime";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/atoms/button.tsx
import { AnimatePresence, motion } from "framer-motion";
import React from "react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var ButtonBase = React.forwardRef((props, ref) => {
  const {
    onClick = () => {
    },
    to = "",
    linkComponent = motion.button,
    disabled = false,
    suffix,
    prefix,
    block = false,
    type = "button",
    variant = "primary",
    // noRing,
    noRounded = false,
    noBorder = false,
    sharpLeft = false,
    sharpRight = false,
    selected = false,
    iconOnly = false,
    className = "",
    content,
    size = "md",
    loading = false,
    tabIndex,
    toLabel = "to",
    target,
    iconSize,
    ...mprops
  } = props;
  let Component = linkComponent;
  let tempToLabel = toLabel;
  let extraProps = {};
  if (to) {
    if (linkComponent === motion.button) {
      Component = motion.a;
      tempToLabel = "href";
    } else {
      Component = linkComponent;
    }
  }
  if (Component === motion.button || Component === motion.a) {
    extraProps = {
      initial: { scale: 1 },
      whileTap: { scale: 0.99 }
    };
  }
  const noRing = false;
  return /* @__PURE__ */ jsxs(
    Component,
    {
      ...mprops,
      ...{ [tempToLabel]: to },
      disabled,
      onClick,
      ...extraProps,
      ref,
      type,
      tabIndex,
      target,
      className: cn(
        "pulsable kl-flex-nowrap",
        {
          "kl-w-full": !!block,
          "kl-w-fit": !block,
          selected
        },
        {
          "kl-pointer-events-none": loading
        },
        {
          "kl-bodyMd-medium": !variant?.includes("plain"),
          "kl-bodyMd": variant?.includes("plain")
        },
        {
          "kl-pointer-events-none !kl-text-text-disabled kl-bg-surface-basic-disabled": disabled,
          "!kl-border-border-disabled": disabled && ![
            "plain",
            "primary-plain",
            "critical-plain",
            "secondary-plain"
          ].includes(variant)
        },
        "kl-relative kl-ring-offset-1",
        "kl-outline-none",
        "kl-flex kl-flex-row kl-gap-lg kl-items-center kl-justify-center",
        "disabled:kl-text-text-disabled disabled:kl-bg-surface-basic-disabled",
        {
          // noRing
          "focus-visible:kl-ring-2 focus:kl-ring-border-focus focus:kl-z-10": !noRing
        },
        {
          ...!noRounded && {
            "kl-rounded-none": sharpLeft && sharpRight,
            "kl-rounded-r": sharpLeft && !sharpRight,
            "kl-rounded-l": !sharpLeft && sharpRight,
            "kl-rounded": !sharpLeft && !sharpRight
          }
        },
        "disabled:kl-pointer-events-none",
        {
          "kl-border-none": noBorder,
          ...!noBorder && {
            "kl-border-border-default disabled:kl-border-border-disabled": variant === "basic" || variant === "outline" || variant === "secondary-outline",
            "kl-border-border-primary disabled:kl-border-border-disabled": variant === "primary" || variant === "primary-outline",
            "kl-border-border-secondary disabled:kl-border-border-disabled": variant === "secondary",
            "kl-border-border-critical disabled:kl-border-border-disabled": variant === "critical-outline" || variant === "critical",
            "kl-border-border-purple": variant === "purple",
            "kl-border-border-warning": variant === "warning",
            "kl-border-border-tertiary": variant === "tertiary",
            "kl-border-none": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain",
            "kl-border": !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain")
          }
        },
        !disabled ? {
          "kl-bg-surface-basic-default hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && !selected,
          "kl-bg-surface-basic-pressed hover:kl-bg-surface-basic-pressed active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && selected,
          "kl-bg-surface-primary-default hover:kl-bg-surface-primary-hovered active:kl-bg-surface-primary-pressed disabled:kl-bg-surface-basic-default": variant === "primary",
          "kl-bg-surface-secondary-default hover:kl-bg-surface-secondary-hovered active:kl-bg-surface-secondary-pressed disabled:kl-bg-surface-basic-default": variant === "secondary",
          "kl-bg-surface-critical-default hover:kl-bg-surface-critical-hovered active:kl-bg-surface-critical-pressed disabled:kl-bg-surface-basic-default": variant === "critical",
          "kl-bg-none hover:kl-bg-surface-critical-subdued active:kl-bg-surface-critical-subdued": variant === "critical-outline",
          "kl-bg-none hover:kl-bg-surface-primary-subdued active:kl-bg-surface-primary-subdued": variant === "primary-outline",
          "kl-bg-none hover:kl-bg-surface-secondary-subdued active:kl-bg-surface-secondary-subdued": variant === "secondary-outline",
          "kl-bg-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "outline",
          "kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed hover:kl-shadow-button": variant === "outline" && selected,
          "kl-bg-none kl-shadow-none": (variant === "plain" || variant === "primary-plain" || variant === "secondary-plain" || variant === "critical-plain") && !iconOnly,
          "kl-shadow-none active:kl-shadow-button kl-bg-surface-basic-pressed": variant === "plain" && !iconOnly && selected,
          "kl-bg-none kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button active:kl-shadow-button": variant === "plain" && iconOnly,
          "kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button": variant === "plain" && iconOnly && selected,
          "kl-bg-surface-purple-default hover:kl-bg-surface-purple-hovered active:kl-bg-surface-purple-pressed": variant === "purple",
          "kl-bg-surface-tertiary-default hover:kl-bg-surface-tertiary-hovered active:kl-bg-surface-tertiary-pressed": variant === "tertiary",
          "kl-bg-surface-warning-default hover:kl-bg-surface-warning-hovered active:kl-bg-surface-warning-pressed": variant === "warning"
        } : {},
        {
          "kl-text-text-default": variant === "basic" || variant === "plain" || variant === "outline",
          "kl-text-text-on-primary": variant === "primary" || variant === "critical" || variant === "secondary" || variant === "secondary-outline" || variant === "purple" || variant === "warning",
          "kl-text-text-critical": variant === "critical-outline" || variant === "critical-plain",
          "kl-text-text-primary": variant === "primary-outline" || variant === "primary-plain",
          "kl-text-text-secondary": variant === "secondary-plain",
          "kl-text-text-on-secondary": variant === "tertiary"
        },
        {
          "focus:kl-underline": noRing
        },
        {
          "hover:kl-underline": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain"
        },
        {
          // icon
          ...!iconOnly && !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
            "kl-py-md kl-px-lg": size === "sm",
            "kl-py-lg kl-px-2xl": size === "md",
            "kl-py-xl kl-px-4xl": size === "lg",
            "kl-py-2xl kl-px-6xl": size === "xl",
            "kl-py-2xl kl-px-9xl": size === "2xl"
          }
        },
        {
          ...!iconOnly && (variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
            "kl-px-md kl-py-sm": size === "sm",
            "kl-py-sm kl-px-md": size === "md",
            "kl-py-md kl-px-lg": size === "lg"
          }
        },
        {
          "kl-p-lg !kl-h-[36px] !kl-w-[36px]": iconOnly && (size === "md" || size === "lg"),
          "kl-p-md": iconOnly && size === "sm",
          "kl-p-sm": iconOnly && size === "xs"
        },
        className
      ),
      children: [
        /* @__PURE__ */ jsx2(AnimatePresence, { children: loading && /* @__PURE__ */ jsx2(
          motion.span,
          {
            initial: { width: 0 },
            animate: { width: "auto", paddingRight: 0 },
            exit: { width: 0 },
            className: cn(
              "kl-flex kl-items-center kl-justify-center kl-aspect-square kl-overflow-hidden"
            ),
            children: /* @__PURE__ */ jsx2("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ jsx2(Spinner, { color: "currentColor", weight: 2, size: 18 }) })
          }
        ) }),
        !!prefix && React.cloneElement(prefix, {
          size: iconSize || (iconOnly && size === "lg" ? 20 : 16),
          color: "currentColor"
        }),
        !iconOnly && /* @__PURE__ */ jsx2("span", { className: cn("kl-block kl-truncate"), children: content }),
        !!suffix && React.cloneElement(suffix, {
          size: iconSize || 16,
          color: "currentColor"
        })
      ]
    }
  );
});
var IconButton = React.forwardRef(
  (props, ref) => {
    const { icon, block } = props;
    return /* @__PURE__ */ jsx2(
      ButtonBase,
      {
        ...props,
        ref,
        iconOnly: true,
        content: null,
        prefix: icon,
        block: !!block
      }
    );
  }
);
var Button = React.forwardRef(
  (props, ref) => {
    const { block } = props;
    return /* @__PURE__ */ jsx2(ButtonBase, { ...props, iconOnly: false, ref, block: !!block });
  }
);

// components/molecule/banner.tsx
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
var getStyle = (type) => {
  switch (type) {
    case "info":
      return "kl-bg-surface-primary-subdued kl-border-border-primary";
    case "success":
      return "kl-bg-surface-success-subdued kl-border-border-success";
    case "warning":
      return "kl-bg-surface-warning-subdued kl-border-border-warning";
    case "critical":
      return "kl-bg-surface-critical-subdued kl-border-border-critical";
    case "default":
    default:
      return "kl-bg-surface-basic-subdued kl-border-border-default";
  }
};
var Icon = ({ type }) => {
  const iconSize = 20;
  switch (type) {
    case "info":
      return /* @__PURE__ */ jsx3("span", { className: "kl-text-text-primary", children: /* @__PURE__ */ jsx3(InfoFill, { size: iconSize }) });
    case "success":
      return /* @__PURE__ */ jsx3("span", { className: "kl-text-text-success", children: /* @__PURE__ */ jsx3(CheckCircleFill, { size: iconSize }) });
    case "warning":
      return /* @__PURE__ */ jsx3("span", { className: "kl-text-text-warning", children: /* @__PURE__ */ jsx3(WarningFill, { size: iconSize }) });
    case "critical":
      return /* @__PURE__ */ jsxs2("span", { className: "kl-text-text-critical", children: [
        " ",
        /* @__PURE__ */ jsx3(WarningOctagonFill, { size: iconSize })
      ] });
    case "default":
    default:
      return /* @__PURE__ */ jsx3("span", { className: "kl-text-text-default", children: /* @__PURE__ */ jsx3(InfoFill, { size: iconSize }) });
  }
};
var Banner = (props) => {
  const { type, title, body, onClose, showclose } = props;
  return /* @__PURE__ */ jsxs2(
    "div",
    {
      className: cn(
        "kl-p-2xl kl-flex kl-flex-row kl-gap-2xl kl-border kl-rounded-lg kl-text-text-default kl-items-start",
        getStyle(type)
      ),
      children: [
        /* @__PURE__ */ jsx3("span", { className: cn(!!title && !!body ? "kl-pt-md" : ""), children: /* @__PURE__ */ jsx3(Icon, { type }) }),
        /* @__PURE__ */ jsxs2("div", { className: "kl-flex-1 kl-flex kl-flex-col kl-gap-sm", children: [
          title && /* @__PURE__ */ jsx3("div", { className: "kl-headingMd", children: title }),
          body && /* @__PURE__ */ jsx3("div", { className: "kl-bodyMd", children: body })
        ] }),
        showclose && /* @__PURE__ */ jsx3("span", { children: /* @__PURE__ */ jsx3(IconButton, { icon: /* @__PURE__ */ jsx3(X, {}), variant: "plain", onClick: onClose }) })
      ]
    }
  );
};
var banner_default = Banner;
export {
  banner_default as default
};