@kloudlite/design-system/mjs/atoms/select.js

A design system for building ambitious products.

"use client";

// components/atoms/select.tsx
import SelectZener from "@zener/react-select";

// 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/animate-hide.tsx
import { AnimatePresence, motion } from "framer-motion";
import { jsx as jsx2 } from "react/jsx-runtime";
var AnimateHide = ({
  children,
  show,
  initial = false,
  className,
  onClick
}) => {
  return /* @__PURE__ */ jsx2(AnimatePresence, { initial, children: show && /* @__PURE__ */ jsx2(
    motion.div,
    {
      onClick,
      initial: {
        height: 0,
        opacity: 0,
        y: -5
      },
      animate: {
        height: "auto",
        opacity: 1,
        y: 0
      },
      exit: {
        opacity: 0,
        height: 0,
        y: -5
      },
      className: cn(className, "kl-overflow-hidden"),
      children
    }
  ) });
};
var animate_hide_default = AnimateHide;

// components/atoms/select.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var menuItemRender = (props) => {
  const { innerProps, render, active, focused, disabled } = props;
  return /* @__PURE__ */ jsx3(
    "div",
    {
      ...innerProps,
      className: cn("kl-px-xl kl-py-lg kl-select-none", {
        "kl-bg-surface-basic-hovered": !!focused && !active && !disabled,
        "kl-bg-surface-basic-active": !!active,
        "kl-text-text-default": !disabled,
        "kl-text-text-disabled": !!disabled
      }),
      children: typeof render === "string" ? render : render?.({ active: !!active, focused: !!focused, disabled })
    }
  );
};
var groupRender = ({ label }) => {
  return /* @__PURE__ */ jsx3("div", { className: "kl-bodySm-medium kl-text-text-disabled kl-px-lg kl-py-md", children: label });
};
var suffixRender = ({
  loading,
  showclear,
  clear,
  error,
  disabled
}) => {
  const iconSize = 16;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "kl-px-lg kl-flex kl-flex-row kl-items-center kl-gap-lg",
        error && !disabled ? "kl-text-text-critical" : ""
      ),
      children: [
        loading && /* @__PURE__ */ jsx3("span", { className: "kl-animate-spin", children: /* @__PURE__ */ jsx3(CircleNotch, { size: iconSize }) }),
        /* @__PURE__ */ jsx3(ChevronUpDown, { size: iconSize, color: "currentColor" }),
        showclear && /* @__PURE__ */ jsx3("span", { onClick: clear, className: "kl-cursor-pointer", children: /* @__PURE__ */ jsx3(X, { size: iconSize, color: "currentColor" }) })
      ]
    }
  );
};
var Select = (props) => {
  const {
    value,
    options,
    label,
    size = "md",
    placeholder,
    message,
    error = false,
    onChange,
    disabled,
    valueRender,
    creatable,
    multiple,
    loading,
    onSearch,
    searchable,
    showclear,
    noOptionMessage,
    open,
    disableWhileLoading,
    createLabel,
    className,
    portalClass,
    tabIndex
  } = props;
  return /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-col", children: [
    /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-col kl-gap-md", children: [
      label && /* @__PURE__ */ jsx3("div", { className: "kl-bodyMd-medium kl-text-text-default kl-h-4xl", children: label }),
      /* @__PURE__ */ jsx3("div", { className: "pulsable", children: /* @__PURE__ */ jsx3("div", { className: "pulsable pulsable-hidden", children: /* @__PURE__ */ jsx3(
        SelectZener,
        {
          className: className || (() => {
            const c = cn(
              "kl-rounded kl-flex kl-flex-row kl-items-center kl-border kl-bodyMd kl-outline-none kl-cursor-default",
              {
                "kl-py-[10px] kl-px-lg kl-h-[48px]": size === "lg",
                "kl-py-[6px] kl-px-lg kl-h-[36px]": size === "md"
              },
              error && !disabled ? "kl-bg-surface-critical-subdued kl-border-text-critical kl-text-text-critical" : ""
            );
            return {
              default: `${c} kl-border-border-default kl-bg-surface-basic-input kl-text-text-default`,
              disabled: `${c} kl-border-border-disabled kl-text-text-disabled`,
              focus: `${c} kl-bg-surface-basic-default kl-border-border-input kl-text-text-default kl-ring-offset-1 kl-ring-2 kl-ring-border-focus`
            };
          }),
          tabIndex,
          open,
          menuClass: "kl-shadow-popover kl-bg-surface-basic-default kl-border kl-border-border-default kl-rounded kl-py-lg",
          portalClass,
          menuItemRender,
          value,
          options,
          placeholder: /* @__PURE__ */ jsx3(
            "div",
            {
              className: cn(
                error && !disabled ? "kl-text-text-critical/70" : "kl-text-text-disabled"
              ),
              children: placeholder
            }
          ),
          showclear,
          suffixRender: ({ clear, showclear: showclear2 }) => suffixRender({
            loading: loading || false,
            clear,
            showclear: showclear2,
            error,
            disabled: !!disabled
          }),
          onChange,
          groupRender,
          disabled,
          valueRender,
          creatable,
          multiple,
          onSearch,
          searchable,
          noOptionMessage: noOptionMessage || /* @__PURE__ */ jsx3("div", { className: "kl-flex kl-items-center kl-justify-center kl-text-text-default kl-bodyLg kl-p-2xl", children: "No options" }),
          disableWhileLoading,
          createLabel,
          onWheel: (e) => {
            e.stopPropagation();
          },
          onTouchMove: (e) => {
            e.stopPropagation();
          }
        }
      ) }) })
    ] }),
    /* @__PURE__ */ jsx3(animate_hide_default, { show: !!message, children: /* @__PURE__ */ jsx3(
      "div",
      {
        className: cn(
          "kl-bodySm pulsable",
          {
            "kl-text-text-critical": !!error,
            "kl-text-text-default": !error
          },
          "kl-pt-md"
        ),
        children: message
      }
    ) })
  ] });
};
var select_default = Select;
export {
  select_default as default
};