tailwindcss-radix/dist/index.js

Utilities and variants for styling Radix state

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
const plugin_1 = __importDefault(require("tailwindcss/plugin"));
module.exports = plugin_1.default.withOptions((options) => ({ addUtilities, matchVariant }) => {
    const { variantPrefix } = Object.assign({ variantPrefix: "radix" }, options);
    const booleanAttributes = {
        disabled: "disabled",
        highlighted: "highlighted",
        placeholder: "placeholder",
    };
    matchVariant(variantPrefix, (value) => {
        return `&[data-${value}]`;
    }, {
        values: booleanAttributes,
    });
    for (const [attributeName, attributeValues] of Object.entries({
        align: ["center", "end", "start"],
        state: [
            "active",
            "checked",
            "closed",
            "delayed-open",
            "hidden",
            "inactive",
            "indeterminate",
            "instant-open",
            "off",
            "on",
            "open",
            "unchecked",
            "visible",
        ],
        side: ["bottom", "left", "right", "top"],
        orientation: ["horizontal", "vertical"],
        motion: ["from-end", "from-start", "to-end", "to-start"],
        swipe: ["cancel", "end", "move", "start"],
        "swipe-direction": ["down", "left", "right", "up"],
    })) {
        const values = Object.fromEntries(attributeValues.map((item) => [item, item]));
        matchVariant(`${variantPrefix}-${attributeName}`, (value) => {
            return `&[data-${attributeName}="${value}"]`;
        }, {
            values,
        });
    }
    [
        "accordion-content",
        "collapsible-content",
        "navigation-menu-viewport",
    ].forEach((kind) => {
        addUtilities({
            [`.w-${variantPrefix}-${kind}`]: {
                width: `var(--radix-${kind}-width)`,
            },
        });
        addUtilities({
            [`.h-${variantPrefix}-${kind}`]: {
                height: `var(--radix-${kind}-height)`,
            },
        });
    });
    [
        "context-menu",
        "dropdown-menu",
        "hover-card",
        "menubar",
        "popover",
        "select",
        "tooltip",
    ].forEach((component) => {
        addUtilities({
            [`.w-${variantPrefix}-${component}-content-available`]: {
                width: `var(--radix-${component}-content-available-width)`,
            },
        });
        addUtilities({
            [`.max-w-${variantPrefix}-${component}-content-available`]: {
                maxWidth: `var(--radix-${component}-content-available-width)`,
            },
        });
        addUtilities({
            [`.h-${variantPrefix}-${component}-content-available`]: {
                height: `var(--radix-${component}-content-available-height)`,
            },
        });
        addUtilities({
            [`.max-h-${variantPrefix}-${component}-content-available`]: {
                maxHeight: `var(--radix-${component}-content-available-height)`,
            },
        });
        addUtilities({
            [`.w-${variantPrefix}-${component}-trigger`]: {
                width: `var(--radix-${component}-trigger-width)`,
            },
        });
        addUtilities({
            [`.h-${variantPrefix}-${component}-trigger`]: {
                height: `var(--radix-${component}-trigger-height)`,
            },
        });
    });
    [
        "context-menu",
        "dropdown-menu",
        "hover-card",
        "menubar",
        "popover",
        "select",
        "tooltip",
    ].forEach((component) => {
        addUtilities({
            [`.origin-${variantPrefix}-${component}`]: {
                "transform-origin": `var(--radix-${component}-content-transform-origin)`,
            },
        });
    });
    ["toast-swipe-end", "toast-swipe-move"].forEach((swipe) => {
        addUtilities({
            [`.translate-x-${variantPrefix}-${swipe}-x`]: {
                transform: `translateX(var(--radix-${swipe}-x))`,
            },
        });
        addUtilities({
            [`.translate-y-${variantPrefix}-${swipe}-y`]: {
                transform: `translateY(var(--radix-${swipe}-y))`,
            },
        });
    });
});