@kopexa/chip/dist/index.js

A Chip is a small block of essential information that represent an input, attribute, or action.

"use client";
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  Chip: () => Chip,
  RelatedControlChip: () => RelatedControlChip,
  StandardChip: () => StandardChip
});
module.exports = __toCommonJS(index_exports);

// src/chip.tsx
var import_icons = require("@kopexa/icons");
var import_shared_utils = require("@kopexa/shared-utils");
var import_theme = require("@kopexa/theme");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Chip = (props) => {
  const {
    className,
    children,
    startContent,
    endContent,
    classNames,
    size,
    disabled,
    radius,
    variant,
    color,
    indicator,
    indicatorColor,
    indicatorVariant,
    status,
    isCloseable,
    onClose,
    ...rest
  } = props;
  const styles = (0, import_theme.chip)({
    size,
    radius,
    variant,
    disabled,
    color,
    indicator,
    indicatorColor,
    indicatorVariant,
    isCloseable,
    className
  });
  const start = (0, import_react.useMemo)(() => {
    if (indicator) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.indicator({ class: classNames == null ? void 0 : classNames.indicator }), children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "span",
          {
            className: styles.indicatorPulse({
              class: classNames == null ? void 0 : classNames.indicatorPulse
            })
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "span",
          {
            className: styles.indicatorDot({
              class: classNames == null ? void 0 : classNames.indicatorDot
            })
          }
        )
      ] });
    }
    return startContent;
  }, [startContent, indicator, styles, classNames]);
  const end = (0, import_react.useMemo)(() => {
    if (isCloseable) {
      return (
        // biome-ignore lint/a11y/useSemanticElements: we use a span here
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          "span",
          {
            role: "button",
            tabIndex: 0,
            "aria-label": "Close",
            className: styles.closeButton({ class: classNames == null ? void 0 : classNames.closeButton }),
            onClick: onClose,
            onKeyDown: (e) => {
              if (e.key === "Enter" || e.key === " ") {
                onClose == null ? void 0 : onClose();
              }
            },
            children: endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, {})
          }
        )
      );
    }
    return endContent;
  }, [endContent, isCloseable, styles, classNames, onClose]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
    "div",
    {
      className: styles.root({
        className: (0, import_shared_utils.cn)(classNames == null ? void 0 : classNames.root, className)
      }),
      ...rest,
      children: [
        start,
        status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.status({ class: classNames == null ? void 0 : classNames.status }), children: status }),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.content({ class: classNames == null ? void 0 : classNames.content }), children }),
        end
      ]
    }
  );
};

// src/related-control-chip.tsx
var import_icons2 = require("@kopexa/icons");
var import_theme2 = require("@kopexa/theme");
var import_tooltip = require("@kopexa/tooltip");
var Slot = __toESM(require("@radix-ui/react-slot"));
var import_jsx_runtime2 = require("react/jsx-runtime");
var MappingIconMapper = {
  EQUAL: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.EqualsIcon, {}),
  INTERSECT: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.IntersectIcon, {}),
  SUBSET: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.SubsetIcon, {}),
  PARTIAL: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.PartialIcon, {}),
  SUPERSET: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.SupersetIcon, {})
};
var RelatedControlChip = ({
  refCode,
  mappingType,
  relation,
  asChild
}) => {
  const tooltipDisabled = !relation && !mappingType;
  const Comp = asChild ? Slot.Root : "span";
  const styles = (0, import_theme2.relatedControlChip)();
  if (!tooltipDisabled) {
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      import_tooltip.Tooltip,
      {
        side: "top",
        className: styles.tooltip(),
        content: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex flex-col gap-1", children: mappingType && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-1 items-center", children: [
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons2.ChevronsLeftRightEllipsisIcon, { size: 12 }),
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Mapping type" }),
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
            "div",
            {
              className: `ml-4 flex w-2.5 h-2.5 justify-center items-center ${mappingType === "SUPERSET" ? "h-5 w-5" : "h-2.5 w-2.5"}`,
              children: MappingIconMapper[mappingType]
            }
          ),
          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "capitalize", children: mappingType.toLowerCase() })
        ] }) }),
        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { className: styles.root(), children: refCode })
      }
    );
  }
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Comp, { className: styles.root(), children: refCode });
};

// src/standard-chip.tsx
var import_theme3 = require("@kopexa/theme");
var import_jsx_runtime3 = require("react/jsx-runtime");
var StandardChip = (props) => {
  const {
    className,
    size,
    radius,
    color,
    variant,
    standard: standardProp,
    ...rest
  } = props;
  let standard = standardProp;
  if (import_theme3.standardChip.variants.standard[standardProp]) {
    standard = standardProp;
  }
  const styles = (0, import_theme3.standardChip)({
    size,
    radius,
    color,
    variant,
    className,
    standard
  });
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: styles.root(), ...rest, children: [
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.hexagon() }),
    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.content(), children: standard })
  ] });
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Chip,
  RelatedControlChip,
  StandardChip
});