react-tailwind-variants/dist/index.mjs

React Stitches-like variants API for tailwindcss classes

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};

// src/cx.ts
import { twMerge } from "tailwind-merge";
var cx = (...classes) => (
  // @ts-ignore
  twMerge(classes.flat(Infinity).filter(Boolean).join(" "))
);

// src/variants.ts
function variants(config) {
  const { base, variants: variants2, compoundVariants, defaultVariants } = config;
  if (!("variants" in config) || !config.variants) {
    return (props) => cx(base, props == null ? void 0 : props.className);
  }
  function isBooleanVariant(name) {
    const variant = variants2 == null ? void 0 : variants2[name];
    return variant && ("false" in variant || "true" in variant);
  }
  return function(props) {
    var _a;
    const result = [base];
    const getSelectedVariant = (name) => {
      var _a2, _b;
      return (_b = (_a2 = props == null ? void 0 : props[name]) != null ? _a2 : defaultVariants == null ? void 0 : defaultVariants[name]) != null ? _b : isBooleanVariant(name) ? false : void 0;
    };
    for (let name in variants2) {
      const selected = getSelectedVariant(name);
      if (selected !== void 0) result.push((_a = variants2[name]) == null ? void 0 : _a[selected]);
    }
    for (let { variants: variants3, className } of compoundVariants != null ? compoundVariants : []) {
      let isSelectedVariant2 = function(name) {
        const selected = getSelectedVariant(name);
        const cvSelector = variants3[name];
        return Array.isArray(cvSelector) ? cvSelector.includes(selected) : selected === cvSelector;
      };
      var isSelectedVariant = isSelectedVariant2;
      if (Object.keys(variants3).every(isSelectedVariant2)) {
        result.push(className);
      }
    }
    if (props == null ? void 0 : props.className) {
      result.push(props.className);
    }
    return cx(result);
  };
}

// src/react.ts
import {
  createElement,
  forwardRef
} from "react";
import { Slot } from "@radix-ui/react-slot";
var StyledComponentConfigKey = "$$tailwindVariantsConfig";
function variantProps(config) {
  const variantsHandler = variants(config);
  return function(props) {
    const result = {};
    for (let prop in props) {
      if (!("variants" in config) || !config.variants || !(prop in config.variants)) {
        result[prop] = props[prop];
      }
    }
    result.className = variantsHandler(props);
    return result;
  };
}
function styled(baseType, config) {
  const propsHandler = variantProps(config);
  const component = forwardRef((props, ref) => {
    if (typeof baseType === "string" && "asChild" in props && props.asChild) {
      const _a = props, { asChild } = _a, otherProps = __objRest(_a, ["asChild"]);
      return createElement(Slot, __spreadProps(__spreadValues({}, propsHandler(otherProps)), {
        ref
      }));
    }
    return createElement(baseType, __spreadProps(__spreadValues({}, propsHandler(props)), {
      ref
    }));
  });
  return Object.assign(component, {
    [StyledComponentConfigKey]: config
  });
}
function extractVariantsConfig(styledComponent) {
  return styledComponent[StyledComponentConfigKey];
}

// src/index.ts
var tw = String.raw;
export {
  cx,
  extractVariantsConfig,
  styled,
  tw,
  variantProps,
  variants
};