v12-ui/dist/Text/Text.js

A React component library with a focus on utility-first design and accessibility.

import { jsx as x } from "react/jsx-runtime";
import { forwardRef as c } from "react";
import { cn as v } from "../utils/utils.js";
import { cva as p } from "class-variance-authority";
const f = p("", {
  variants: {
    variant: {
      default: "text-text-default",
      primary: "text-text-primary",
      secondary: "text-text-secondary",
      muted: "text-text-muted",
      accent: "text-text-accent",
      success: "text-text-success",
      warning: "text-text-warning",
      error: "text-text-error",
      info: "text-text-info"
    },
    hover: {
      true: "",
      false: ""
    },
    textShadow: {
      none: "",
      black_p: "text-shadow-shadow-black-p",
      black_title: "text-shadow-shadow-black-title",
      success_p: "text-shadow-shadow-success-p",
      success_title: "text-shadow-shadow-success-title",
      warning_p: "text-shadow-shadow-warning-p",
      warning_title: "text-shadow-shadow-warning-title",
      error_p: "text-shadow-shadow-error-p",
      error_title: "text-shadow-shadow-error-title",
      info_p: "text-shadow-shadow-info-p",
      info_title: "text-shadow-shadow-info-title"
    },
    fontSize: {
      small_responsive: "size-text-small",
      paragraph_responsive: "size-text-paragraph",
      subtitle_responsive: "size-text-subtitle",
      title_responsive: "size-text-title"
    },
    fontWeight: {
      auto: "",
      small: "font-weight-small",
      paragraph: "font-weight-paragraph",
      subtitle: "font-weight-subtitle",
      title: "font-weight-title"
    }
  },
  compoundVariants: [
    { variant: "default", hover: !0, className: "hover:text-text-inverse" },
    { variant: "primary", hover: !0, className: "hover:text-text-primary-hover" },
    { variant: "secondary", hover: !0, className: "hover:text-text-secondary-hover" },
    { variant: "muted", hover: !0, className: "hover:text-text-muted-hover" },
    { variant: "accent", hover: !0, className: "hover:text-text-accent-hover" },
    { variant: "success", hover: !0, className: "hover:text-text-success-hover" },
    { variant: "warning", hover: !0, className: "hover:text-text-warning-hover" },
    { variant: "error", hover: !0, className: "hover:text-text-error-hover" },
    { variant: "info", hover: !0, className: "hover:text-text-info-hover" },
    { fontSize: "small_responsive", fontWeight: "auto", className: "font-weight-small" },
    { fontSize: "paragraph_responsive", fontWeight: "auto", className: "font-weight-paragraph" },
    { fontSize: "subtitle_responsive", fontWeight: "auto", className: "font-weight-subtitle" },
    { fontSize: "title_responsive", fontWeight: "auto", className: "font-weight-title" }
  ],
  defaultVariants: {
    variant: "default",
    hover: !1,
    textShadow: "none",
    fontSize: "paragraph_responsive",
    fontWeight: "auto"
  }
});
function u({ as: t, children: e, variant: a, hover: r, textShadow: o, fontSize: s, fontWeight: i, className: n, ...h }, l) {
  return /* @__PURE__ */ x(
    t || "p",
    {
      ref: l,
      ...h,
      className: v(f({ variant: a, hover: r, textShadow: o, fontSize: s, fontWeight: i }), "", n),
      children: e
    }
  );
}
const N = c(u);
export {
  N as Text
};