@sikka/hawa/dist/chip/index.js

Modern UI Kit made with Tailwind

"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);

// elements/chip/index.ts
var chip_exports = {};
__export(chip_exports, {
  Chip: () => Chip
});
module.exports = __toCommonJS(chip_exports);

// elements/chip/Chip.tsx
var import_react = __toESM(require("react"));

// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}

// elements/chip/Chip.tsx
var Chip = import_react.default.forwardRef(
  ({
    label,
    size = "normal",
    icon,
    color,
    radius = "inherit",
    dot,
    dotStatus = "none",
    ...rest
  }, ref) => {
    let defaultStyles = "hawa-flex hawa-flex-row hawa-w-fit hawa-gap-1 hawa-items-center  hawa-px-2.5 hawa-py-1  hawa-font-bold ";
    let radiusStyles = {
      inherit: " hawa-rounded",
      full: "hawa-rounded-full",
      none: "hawa-rounded-none"
    };
    let sizeStyles = {
      small: "hawa-h-[15px] hawa-leading-4 hawa-px-0 hawa-py-0 hawa-text-[9px] hawa-gap-0.5 ",
      normal: "hawa-h-fit hawa-text-xs",
      large: "hawa-text-base"
    };
    let dotStyles = {
      small: "hawa-flex hawa-h-1 hawa-w-1 hawa-rounded-full",
      normal: "hawa-flex hawa-h-2 hawa-w-2 hawa-rounded-full",
      large: "hawa-flex hawa-h-3 hawa-w-3 hawa-rounded-full"
    };
    let dotStatusStyles = {
      none: "hawa-bg-gray-500 dark:hawa-bg-gray-800",
      available: "hawa-bg-green-500",
      unavailable: "hawa-bg-red-500"
    };
    let colorStyles = {
      green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
      blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
      red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
      yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
      orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
      purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
      cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
      hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
      oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
    };
    if (label) {
      return /* @__PURE__ */ import_react.default.createElement(
        "span",
        {
          ...rest,
          ref,
          className: cn(
            defaultStyles,
            sizeStyles[size],
            radiusStyles[radius],
            color ? colorStyles[color] : "hawa-border hawa-bg-none",
            rest.className
          )
        },
        dot && /* @__PURE__ */ import_react.default.createElement(
          "span",
          {
            className: cn(dotStyles[size], dotStatusStyles[dotStatus])
          }
        ),
        icon && icon,
        label
      );
    } else {
      return /* @__PURE__ */ import_react.default.createElement(
        "span",
        {
          ...rest,
          ref,
          className: cn(
            "hawa-h-2 hawa-w-2 hawa-rounded-full",
            color ? colorStyles[color] : "hawa-border hawa-bg-none"
          )
        }
      );
    }
  }
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Chip
});
//# sourceMappingURL=index.js.map