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

Spark (Leboncoin design system) components.

import {
  Slot
} from "../chunk-4F5DOL57.mjs";

// src/tag/Tag.styles.tsx
import { makeVariants } from "@spark-ui/internal-utils";
import { cva } from "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 = 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: makeVariants({
        filled: [],
        outlined: ["border-sm", "border-current"],
        tinted: []
      }),
      /**
       * Color scheme of the tag.
       */
      intent: makeVariants({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: []
      })
    },
    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],
    defaultVariants: {
      design: "filled",
      intent: "basic"
    }
  }
);

// src/tag/Tag.tsx
import { jsx } from "react/jsx-runtime";
var Tag = ({
  design = "filled",
  intent = "basic",
  asChild,
  className,
  ref,
  ...others
}) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ jsx(
    Component,
    {
      "data-spark-component": "tag",
      ref,
      className: tagStyles({
        className,
        design,
        intent
      }),
      ...others
    }
  );
};
export {
  Tag
};
//# sourceMappingURL=index.mjs.map