string-authority

String utilities and conflict conditionals.

Installation

using bun

bun add string-authority

using pnpm

pnpm add string-authority

using npm

npm i string-authority

Usage

cnx

import { cnx } from "string-authority";

// allows receiving Arrays and Objects
const className = cnx(["", baz, foo !== "foo" && bar], { "": !props }, "");

// ""
cnx(Boolean, Object, undefined, null, "", 0, NaN);


cnx(["foo", 0, false, "bar"])
// "foo bar"

cnx("hello", true && "foo", false && "bar")
// "hello foo"

cnx(["foo"], ["", 0, false, "bar"], [["baz", [["hello"], "there"]]])
// "foo bar baz hello there"

cnx("foo", [1 && "bar", { baz: false, bat: null }, ["hello", ["world"]]], "cya")
// "foo bar hello world cya"

cn

import { cn } from "string-authority";

<div
  className={
    cn(
      "bg-black/60 dark:bg-white/60 text-white dark:text-black",
      { "font-extrabold border-0": true }
      )
  }
/>

cvx

import { cvx, type VariantsType } from "string-authority";

const classes = cvx({
  // assign values that is definitely returned
  assign: "bg-muted rounded-sm px-2 border flex items-center justify-center",
  variants: {
    variant: {
      bold: "font-bold",
      italic: "font-italic",
      semibold: "font-semibold",
      light: "font-light",
    },
    color: {
      blue: "text-blue-600",
      green: "text-green-700",
      red: "text-red-500",
      purple: "text-purple-500",
    },
    size: {
      sm: "h-4",
      md: "h-6",
      lg: "h-10",
      xl: "h-14",
    },
  },
  // determine the variance value by default
  defaultVariants: {
    variant: "bold",
    color: "blue",
    size: "lg",
  },
});

type MyVariantsType = VariantsType<typeof classes>;
interface ClnProps extends MyVariantsType {
  unstyled?: boolean;
  className?: string;
}

then:

<div {...clN(props)}>MY COMPONENT</div>
<div className={classes()}>MY COMPONENT</div>
<div className={classes({ color: "red", size: "lg" })}>MY COMPONENT</div>

Link

Repository Documentation

License

MIT License

© ilkhoeri