react-tailwind-variants/dist/index.js

React Stitches-like variants API for tailwindcss classes

"use strict";
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
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;
};
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/index.ts
var index_exports = {};
__export(index_exports, {
  cx: () => cx,
  extractVariantsConfig: () => extractVariantsConfig,
  styled: () => styled,
  tw: () => tw,
  variantProps: () => variantProps,
  variants: () => variants
});
module.exports = __toCommonJS(index_exports);

// src/cx.ts
var import_tailwind_merge = require("tailwind-merge");
var cx = (...classes) => (
  // @ts-ignore
  (0, import_tailwind_merge.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
var import_react = require("react");
var import_react_slot = require("@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 = (0, import_react.forwardRef)((props, ref) => {
    if (typeof baseType === "string" && "asChild" in props && props.asChild) {
      const _a = props, { asChild } = _a, otherProps = __objRest(_a, ["asChild"]);
      return (0, import_react.createElement)(import_react_slot.Slot, __spreadProps(__spreadValues({}, propsHandler(otherProps)), {
        ref
      }));
    }
    return (0, import_react.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;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  cx,
  extractVariantsConfig,
  styled,
  tw,
  variantProps,
  variants
});