@spark-ui/components/dist/tag/index.js

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/tag/index.ts
var tag_exports = {};
__export(tag_exports, {
  Tag: () => Tag
});
module.exports = __toCommonJS(tag_exports);

// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};

// src/tag/Tag.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority = require("class-variance-authority");

// src/tag/variants/default.ts
var tw = (a) => a;

// src/tag/variants/filled.ts
var filledVariants = [
  {
    intent: "main",
    design: "filled",
    class: tw(["bg-main", "text-on-main"])
  },
  {
    intent: "support",
    design: "filled",
    class: tw(["bg-support", "text-on-support"])
  },
  {
    intent: "accent",
    design: "filled",
    class: tw(["bg-accent", "text-on-accent"])
  },
  {
    intent: "basic",
    design: "filled",
    class: tw(["bg-basic", "text-on-basic"])
  },
  {
    intent: "success",
    design: "filled",
    class: tw(["bg-success", "text-on-success"])
  },
  {
    intent: "alert",
    design: "filled",
    class: tw(["bg-alert", "text-on-alert"])
  },
  {
    intent: "danger",
    design: "filled",
    class: tw(["bg-error", "text-on-error"])
  },
  {
    intent: "info",
    design: "filled",
    class: tw(["bg-info", "text-on-info"])
  },
  {
    intent: "neutral",
    design: "filled",
    class: tw(["bg-neutral", "text-on-neutral"])
  },
  {
    intent: "surface",
    design: "filled",
    class: tw(["bg-surface", "text-on-surface"])
  }
];

// src/tag/variants/outlined.ts
var outlinedVariants = [
  {
    intent: "main",
    design: "outlined",
    class: tw(["text-main"])
  },
  {
    intent: "support",
    design: "outlined",
    class: tw(["text-support"])
  },
  {
    intent: "accent",
    design: "outlined",
    class: tw(["text-accent"])
  },
  {
    intent: "basic",
    design: "outlined",
    class: tw(["text-basic"])
  },
  {
    intent: "success",
    design: "outlined",
    class: tw(["text-success"])
  },
  {
    intent: "alert",
    design: "outlined",
    class: tw(["text-alert"])
  },
  {
    intent: "danger",
    design: "outlined",
    class: tw(["text-error"])
  },
  {
    intent: "info",
    design: "outlined",
    class: tw(["text-info"])
  },
  {
    intent: "neutral",
    design: "outlined",
    class: tw(["text-neutral"])
  }
];

// src/tag/variants/tinted.ts
var tintedVariants = [
  {
    intent: "main",
    design: "tinted",
    class: tw(["bg-main-container", "text-on-main-container"])
  },
  {
    intent: "support",
    design: "tinted",
    class: tw(["bg-support-container", "text-on-support-container"])
  },
  {
    intent: "accent",
    design: "tinted",
    class: tw(["bg-accent-container", "text-on-accent-container"])
  },
  {
    intent: "basic",
    design: "tinted",
    class: tw(["bg-basic-container", "text-on-basic-container"])
  },
  {
    intent: "success",
    design: "tinted",
    class: tw(["bg-success-container", "text-on-success-container"])
  },
  {
    intent: "alert",
    design: "tinted",
    class: tw(["bg-alert-container", "text-on-alert-container"])
  },
  {
    intent: "danger",
    design: "tinted",
    class: tw(["bg-error-container", "text-on-error-container"])
  },
  {
    intent: "info",
    design: "tinted",
    class: tw(["bg-info-container", "text-on-info-container"])
  },
  {
    intent: "neutral",
    design: "tinted",
    class: tw(["bg-neutral-container", "text-on-neutral-container"])
  }
];

// src/tag/Tag.styles.tsx
var tagStyles = (0, import_class_variance_authority.cva)(
  [
    "box-border inline-flex items-center justify-center gap-sm whitespace-nowrap",
    "text-caption font-bold",
    "h-sz-20 px-md",
    "rounded-full"
  ],
  {
    variants: {
      /**
       * Main style of the tag.
       * - `filled`: Tag will be plain.
       * - `outlined`: Tag will have a surface background with an colored outline/text.
       * - `tinted`: Tag will be filled but using a lighter color scheme.
       */
      design: (0, import_internal_utils.makeVariants)({
        filled: [],
        outlined: ["border-sm", "border-current"],
        tinted: []
      }),
      /**
       * Color scheme of the tag.
       */
      intent: (0, import_internal_utils.makeVariants)({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: []
      })
    },
    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],
    defaultVariants: {
      design: "filled",
      intent: "basic"
    }
  }
);

// src/tag/Tag.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Tag = ({
  design = "filled",
  intent = "basic",
  asChild,
  className,
  ref,
  ...others
}) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    Component,
    {
      "data-spark-component": "tag",
      ref,
      className: tagStyles({
        className,
        design,
        intent
      }),
      ...others
    }
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Tag
});
//# sourceMappingURL=index.js.map