@bao-ui/react
Version:
Styled React components built on Base UI primitives
1,824 lines • 92.8 kB
JavaScript
import { jsx as f, jsxs as F } from "react/jsx-runtime";
import * as b from "react";
import { forwardRef as se, createElement as L } from "react";
import { clsx as Ge } from "clsx";
import { Input as Ke } from "@base-ui-components/react/input";
import { Checkbox as Re } from "@base-ui-components/react/checkbox";
import { RadioGroup as Je } from "@base-ui-components/react/radio-group";
import { Radio as ze } from "@base-ui-components/react/radio";
import { Select as S } from "@base-ui-components/react/select";
import { Switch as Ne } from "@base-ui-components/react/switch";
import { Dialog as G } from "@base-ui-components/react/dialog";
import { Tooltip as ae } from "@base-ui-components/react/tooltip";
function Se(e, o) {
if (typeof e == "function")
return e(o);
e != null && (e.current = o);
}
function Xe(...e) {
return (o) => {
let t = !1;
const r = e.map((s) => {
const a = Se(s, o);
return !t && typeof a == "function" && (t = !0), a;
});
if (t)
return () => {
for (let s = 0; s < r.length; s++) {
const a = r[s];
typeof a == "function" ? a() : Se(e[s], null);
}
};
};
}
// @__NO_SIDE_EFFECTS__
function Qe(e) {
const o = /* @__PURE__ */ et(e), t = b.forwardRef((r, s) => {
const { children: a, ...i } = r, p = b.Children.toArray(a), c = p.find(ot);
if (c) {
const g = c.props.children, h = p.map((k) => k === c ? b.Children.count(g) > 1 ? b.Children.only(null) : b.isValidElement(g) ? g.props.children : null : k);
return /* @__PURE__ */ f(o, { ...i, ref: s, children: b.isValidElement(g) ? b.cloneElement(g, void 0, h) : null });
}
return /* @__PURE__ */ f(o, { ...i, ref: s, children: a });
});
return t.displayName = `${e}.Slot`, t;
}
var Ye = /* @__PURE__ */ Qe("Slot");
// @__NO_SIDE_EFFECTS__
function et(e) {
const o = b.forwardRef((t, r) => {
const { children: s, ...a } = t;
if (b.isValidElement(s)) {
const i = st(s), p = rt(a, s.props);
return s.type !== b.Fragment && (p.ref = r ? Xe(r, i) : i), b.cloneElement(s, p);
}
return b.Children.count(s) > 1 ? b.Children.only(null) : null;
});
return o.displayName = `${e}.SlotClone`, o;
}
var tt = Symbol("radix.slottable");
function ot(e) {
return b.isValidElement(e) && typeof e.type == "function" && "__radixId" in e.type && e.type.__radixId === tt;
}
function rt(e, o) {
const t = { ...o };
for (const r in o) {
const s = e[r], a = o[r];
/^on[A-Z]/.test(r) ? s && a ? t[r] = (...p) => {
const c = a(...p);
return s(...p), c;
} : s && (t[r] = s) : r === "style" ? t[r] = { ...s, ...a } : r === "className" && (t[r] = [s, a].filter(Boolean).join(" "));
}
return { ...e, ...t };
}
function st(e) {
let o = Object.getOwnPropertyDescriptor(e.props, "ref")?.get, t = o && "isReactWarning" in o && o.isReactWarning;
return t ? e.ref : (o = Object.getOwnPropertyDescriptor(e, "ref")?.get, t = o && "isReactWarning" in o && o.isReactWarning, t ? e.props.ref : e.props.ref || e.ref);
}
const Ie = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, Pe = Ge, Ve = (e, o) => (t) => {
var r;
if (o?.variants == null) return Pe(e, t?.class, t?.className);
const { variants: s, defaultVariants: a } = o, i = Object.keys(s).map((g) => {
const h = t?.[g], k = a?.[g];
if (h === null) return null;
const N = Ie(h) || Ie(k);
return s[g][N];
}), p = t && Object.entries(t).reduce((g, h) => {
let [k, N] = h;
return N === void 0 || (g[k] = N), g;
}, {}), c = o == null || (r = o.compoundVariants) === null || r === void 0 ? void 0 : r.reduce((g, h) => {
let { class: k, className: N, ...V } = h;
return Object.entries(V).every((C) => {
let [R, I] = C;
return Array.isArray(I) ? I.includes({
...a,
...p
}[R]) : {
...a,
...p
}[R] === I;
}) ? [
...g,
k,
N
] : g;
}, []);
return Pe(e, i, c, t?.class, t?.className);
}, ge = "-", at = (e) => {
const o = lt(e), {
conflictingClassGroups: t,
conflictingClassGroupModifiers: r
} = e;
return {
getClassGroupId: (i) => {
const p = i.split(ge);
return p[0] === "" && p.length !== 1 && p.shift(), Ee(p, o) || nt(i);
},
getConflictingClassGroupIds: (i, p) => {
const c = t[i] || [];
return p && r[i] ? [...c, ...r[i]] : c;
}
};
}, Ee = (e, o) => {
if (e.length === 0)
return o.classGroupId;
const t = e[0], r = o.nextPart.get(t), s = r ? Ee(e.slice(1), r) : void 0;
if (s)
return s;
if (o.validators.length === 0)
return;
const a = e.join(ge);
return o.validators.find(({
validator: i
}) => i(a))?.classGroupId;
}, Ae = /^\[(.+)\]$/, nt = (e) => {
if (Ae.test(e)) {
const o = Ae.exec(e)[1], t = o?.substring(0, o.indexOf(":"));
if (t)
return "arbitrary.." + t;
}
}, lt = (e) => {
const {
theme: o,
classGroups: t
} = e, r = {
nextPart: /* @__PURE__ */ new Map(),
validators: []
};
for (const s in t)
ue(t[s], r, s, o);
return r;
}, ue = (e, o, t, r) => {
e.forEach((s) => {
if (typeof s == "string") {
const a = s === "" ? o : Me(o, s);
a.classGroupId = t;
return;
}
if (typeof s == "function") {
if (it(s)) {
ue(s(r), o, t, r);
return;
}
o.validators.push({
validator: s,
classGroupId: t
});
return;
}
Object.entries(s).forEach(([a, i]) => {
ue(i, Me(o, a), t, r);
});
});
}, Me = (e, o) => {
let t = e;
return o.split(ge).forEach((r) => {
t.nextPart.has(r) || t.nextPart.set(r, {
nextPart: /* @__PURE__ */ new Map(),
validators: []
}), t = t.nextPart.get(r);
}), t;
}, it = (e) => e.isThemeGetter, dt = (e) => {
if (e < 1)
return {
get: () => {
},
set: () => {
}
};
let o = 0, t = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map();
const s = (a, i) => {
t.set(a, i), o++, o > e && (o = 0, r = t, t = /* @__PURE__ */ new Map());
};
return {
get(a) {
let i = t.get(a);
if (i !== void 0)
return i;
if ((i = r.get(a)) !== void 0)
return s(a, i), i;
},
set(a, i) {
t.has(a) ? t.set(a, i) : s(a, i);
}
};
}, pe = "!", fe = ":", ct = fe.length, mt = (e) => {
const {
prefix: o,
experimentalParseClassName: t
} = e;
let r = (s) => {
const a = [];
let i = 0, p = 0, c = 0, g;
for (let C = 0; C < s.length; C++) {
let R = s[C];
if (i === 0 && p === 0) {
if (R === fe) {
a.push(s.slice(c, C)), c = C + ct;
continue;
}
if (R === "/") {
g = C;
continue;
}
}
R === "[" ? i++ : R === "]" ? i-- : R === "(" ? p++ : R === ")" && p--;
}
const h = a.length === 0 ? s : s.substring(c), k = ut(h), N = k !== h, V = g && g > c ? g - c : void 0;
return {
modifiers: a,
hasImportantModifier: N,
baseClassName: k,
maybePostfixModifierPosition: V
};
};
if (o) {
const s = o + fe, a = r;
r = (i) => i.startsWith(s) ? a(i.substring(s.length)) : {
isExternal: !0,
modifiers: [],
hasImportantModifier: !1,
baseClassName: i,
maybePostfixModifierPosition: void 0
};
}
if (t) {
const s = r;
r = (a) => t({
className: a,
parseClassName: s
});
}
return r;
}, ut = (e) => e.endsWith(pe) ? e.substring(0, e.length - 1) : e.startsWith(pe) ? e.substring(1) : e, pt = (e) => {
const o = Object.fromEntries(e.orderSensitiveModifiers.map((r) => [r, !0]));
return (r) => {
if (r.length <= 1)
return r;
const s = [];
let a = [];
return r.forEach((i) => {
i[0] === "[" || o[i] ? (s.push(...a.sort(), i), a = []) : a.push(i);
}), s.push(...a.sort()), s;
};
}, ft = (e) => ({
cache: dt(e.cacheSize),
parseClassName: mt(e),
sortModifiers: pt(e),
...at(e)
}), gt = /\s+/, bt = (e, o) => {
const {
parseClassName: t,
getClassGroupId: r,
getConflictingClassGroupIds: s,
sortModifiers: a
} = o, i = [], p = e.trim().split(gt);
let c = "";
for (let g = p.length - 1; g >= 0; g -= 1) {
const h = p[g], {
isExternal: k,
modifiers: N,
hasImportantModifier: V,
baseClassName: C,
maybePostfixModifierPosition: R
} = t(h);
if (k) {
c = h + (c.length > 0 ? " " + c : c);
continue;
}
let I = !!R, E = r(I ? C.substring(0, R) : C);
if (!E) {
if (!I) {
c = h + (c.length > 0 ? " " + c : c);
continue;
}
if (E = r(C), !E) {
c = h + (c.length > 0 ? " " + c : c);
continue;
}
I = !1;
}
const J = a(N).join(":"), H = V ? J + pe : J, D = H + E;
if (i.includes(D))
continue;
i.push(D);
const $ = s(E, I);
for (let j = 0; j < $.length; ++j) {
const q = $[j];
i.push(H + q);
}
c = h + (c.length > 0 ? " " + c : c);
}
return c;
};
function ht() {
let e = 0, o, t, r = "";
for (; e < arguments.length; )
(o = arguments[e++]) && (t = je(o)) && (r && (r += " "), r += t);
return r;
}
const je = (e) => {
if (typeof e == "string")
return e;
let o, t = "";
for (let r = 0; r < e.length; r++)
e[r] && (o = je(e[r])) && (t && (t += " "), t += o);
return t;
};
function xt(e, ...o) {
let t, r, s, a = i;
function i(c) {
const g = o.reduce((h, k) => k(h), e());
return t = ft(g), r = t.cache.get, s = t.cache.set, a = p, p(c);
}
function p(c) {
const g = r(c);
if (g)
return g;
const h = bt(c, t);
return s(c, h), h;
}
return function() {
return a(ht.apply(null, arguments));
};
}
const x = (e) => {
const o = (t) => t[e] || [];
return o.isThemeGetter = !0, o;
}, Oe = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, _e = /^\((?:(\w[\w-]*):)?(.+)\)$/i, wt = /^\d+\/\d+$/, vt = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, kt = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, yt = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Ct = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Rt = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, W = (e) => wt.test(e), u = (e) => !!e && !Number.isNaN(Number(e)), T = (e) => !!e && Number.isInteger(Number(e)), ce = (e) => e.endsWith("%") && u(e.slice(0, -1)), M = (e) => vt.test(e), zt = () => !0, Nt = (e) => (
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
kt.test(e) && !yt.test(e)
), De = () => !1, St = (e) => Ct.test(e), It = (e) => Rt.test(e), Pt = (e) => !n(e) && !l(e), At = (e) => U(e, We, De), n = (e) => Oe.test(e), _ = (e) => U(e, Fe, Nt), me = (e) => U(e, Vt, u), Te = (e) => U(e, $e, De), Mt = (e) => U(e, Be, It), oe = (e) => U(e, Ue, St), l = (e) => _e.test(e), K = (e) => Z(e, Fe), Tt = (e) => Z(e, Et), Le = (e) => Z(e, $e), Lt = (e) => Z(e, We), Gt = (e) => Z(e, Be), re = (e) => Z(e, Ue, !0), U = (e, o, t) => {
const r = Oe.exec(e);
return r ? r[1] ? o(r[1]) : t(r[2]) : !1;
}, Z = (e, o, t = !1) => {
const r = _e.exec(e);
return r ? r[1] ? o(r[1]) : t : !1;
}, $e = (e) => e === "position" || e === "percentage", Be = (e) => e === "image" || e === "url", We = (e) => e === "length" || e === "size" || e === "bg-size", Fe = (e) => e === "length", Vt = (e) => e === "number", Et = (e) => e === "family-name", Ue = (e) => e === "shadow", jt = () => {
const e = x("color"), o = x("font"), t = x("text"), r = x("font-weight"), s = x("tracking"), a = x("leading"), i = x("breakpoint"), p = x("container"), c = x("spacing"), g = x("radius"), h = x("shadow"), k = x("inset-shadow"), N = x("text-shadow"), V = x("drop-shadow"), C = x("blur"), R = x("perspective"), I = x("aspect"), E = x("ease"), J = x("animate"), H = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], D = () => [
"center",
"top",
"bottom",
"left",
"right",
"top-left",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"left-top",
"top-right",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"right-top",
"bottom-right",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"right-bottom",
"bottom-left",
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
"left-bottom"
], $ = () => [...D(), l, n], j = () => ["auto", "hidden", "clip", "visible", "scroll"], q = () => ["auto", "contain", "none"], m = () => [l, n, c], P = () => [W, "full", "auto", ...m()], be = () => [T, "none", "subgrid", l, n], he = () => ["auto", {
span: ["full", T, l, n]
}, T, l, n], X = () => [T, "auto", l, n], xe = () => ["auto", "min", "max", "fr", l, n], le = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], B = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], A = () => ["auto", ...m()], O = () => [W, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...m()], d = () => [e, l, n], we = () => [...D(), Le, Te, {
position: [l, n]
}], ve = () => ["no-repeat", {
repeat: ["", "x", "y", "space", "round"]
}], ke = () => ["auto", "cover", "contain", Lt, At, {
size: [l, n]
}], ie = () => [ce, K, _], y = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
"full",
g,
l,
n
], z = () => ["", u, K, _], Q = () => ["solid", "dashed", "dotted", "double"], ye = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], v = () => [u, ce, Le, Te], Ce = () => [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
C,
l,
n
], Y = () => ["none", u, l, n], ee = () => ["none", u, l, n], de = () => [u, l, n], te = () => [W, "full", ...m()];
return {
cacheSize: 500,
theme: {
animate: ["spin", "ping", "pulse", "bounce"],
aspect: ["video"],
blur: [M],
breakpoint: [M],
color: [zt],
container: [M],
"drop-shadow": [M],
ease: ["in", "out", "in-out"],
font: [Pt],
"font-weight": ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"],
"inset-shadow": [M],
leading: ["none", "tight", "snug", "normal", "relaxed", "loose"],
perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
radius: [M],
shadow: [M],
spacing: ["px", u],
text: [M],
"text-shadow": [M],
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
},
classGroups: {
// --------------
// --- Layout ---
// --------------
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
aspect: [{
aspect: ["auto", "square", W, n, l, I]
}],
/**
* Container
* @see https://tailwindcss.com/docs/container
* @deprecated since Tailwind CSS v4.0.0
*/
container: ["container"],
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
columns: [{
columns: [u, n, l, p]
}],
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
"break-after": [{
"break-after": H()
}],
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
"break-before": [{
"break-before": H()
}],
/**
* Break Inside
* @see https://tailwindcss.com/docs/break-inside
*/
"break-inside": [{
"break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
}],
/**
* Box Decoration Break
* @see https://tailwindcss.com/docs/box-decoration-break
*/
"box-decoration": [{
"box-decoration": ["slice", "clone"]
}],
/**
* Box Sizing
* @see https://tailwindcss.com/docs/box-sizing
*/
box: [{
box: ["border", "content"]
}],
/**
* Display
* @see https://tailwindcss.com/docs/display
*/
display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
/**
* Screen Reader Only
* @see https://tailwindcss.com/docs/display#screen-reader-only
*/
sr: ["sr-only", "not-sr-only"],
/**
* Floats
* @see https://tailwindcss.com/docs/float
*/
float: [{
float: ["right", "left", "none", "start", "end"]
}],
/**
* Clear
* @see https://tailwindcss.com/docs/clear
*/
clear: [{
clear: ["left", "right", "both", "none", "start", "end"]
}],
/**
* Isolation
* @see https://tailwindcss.com/docs/isolation
*/
isolation: ["isolate", "isolation-auto"],
/**
* Object Fit
* @see https://tailwindcss.com/docs/object-fit
*/
"object-fit": [{
object: ["contain", "cover", "fill", "none", "scale-down"]
}],
/**
* Object Position
* @see https://tailwindcss.com/docs/object-position
*/
"object-position": [{
object: $()
}],
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
overflow: [{
overflow: j()
}],
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-x": [{
"overflow-x": j()
}],
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-y": [{
"overflow-y": j()
}],
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
overscroll: [{
overscroll: q()
}],
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-x": [{
"overscroll-x": q()
}],
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-y": [{
"overscroll-y": q()
}],
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
position: ["static", "fixed", "absolute", "relative", "sticky"],
/**
* Top / Right / Bottom / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: P()
}],
/**
* Right / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-x": [{
"inset-x": P()
}],
/**
* Top / Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-y": [{
"inset-y": P()
}],
/**
* Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
start: [{
start: P()
}],
/**
* End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
end: [{
end: P()
}],
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
top: [{
top: P()
}],
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
right: [{
right: P()
}],
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
bottom: [{
bottom: P()
}],
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
left: [{
left: P()
}],
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
visibility: ["visible", "invisible", "collapse"],
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
z: [{
z: [T, "auto", l, n]
}],
// ------------------------
// --- Flexbox and Grid ---
// ------------------------
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
basis: [{
basis: [W, "full", "auto", p, ...m()]
}],
/**
* Flex Direction
* @see https://tailwindcss.com/docs/flex-direction
*/
"flex-direction": [{
flex: ["row", "row-reverse", "col", "col-reverse"]
}],
/**
* Flex Wrap
* @see https://tailwindcss.com/docs/flex-wrap
*/
"flex-wrap": [{
flex: ["nowrap", "wrap", "wrap-reverse"]
}],
/**
* Flex
* @see https://tailwindcss.com/docs/flex
*/
flex: [{
flex: [u, W, "auto", "initial", "none", n]
}],
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
grow: [{
grow: ["", u, l, n]
}],
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
shrink: [{
shrink: ["", u, l, n]
}],
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
order: [{
order: [T, "first", "last", "none", l, n]
}],
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
"grid-cols": [{
"grid-cols": be()
}],
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start-end": [{
col: he()
}],
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start": [{
"col-start": X()
}],
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-end": [{
"col-end": X()
}],
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
"grid-rows": [{
"grid-rows": be()
}],
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start-end": [{
row: he()
}],
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start": [{
"row-start": X()
}],
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-end": [{
"row-end": X()
}],
/**
* Grid Auto Flow
* @see https://tailwindcss.com/docs/grid-auto-flow
*/
"grid-flow": [{
"grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
}],
/**
* Grid Auto Columns
* @see https://tailwindcss.com/docs/grid-auto-columns
*/
"auto-cols": [{
"auto-cols": xe()
}],
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
"auto-rows": [{
"auto-rows": xe()
}],
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{
gap: m()
}],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
"gap-x": [{
"gap-x": m()
}],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
"gap-y": [{
"gap-y": m()
}],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
"justify-content": [{
justify: [...le(), "normal"]
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
"justify-items": [{
"justify-items": [...B(), "normal"]
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
"justify-self": [{
"justify-self": ["auto", ...B()]
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
"align-content": [{
content: ["normal", ...le()]
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
"align-items": [{
items: [...B(), {
baseline: ["", "last"]
}]
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
"align-self": [{
self: ["auto", ...B(), {
baseline: ["", "last"]
}]
}],
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
"place-content": [{
"place-content": le()
}],
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
"place-items": [{
"place-items": [...B(), "baseline"]
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
"place-self": [{
"place-self": ["auto", ...B()]
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: m()
}],
/**
* Padding X
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: m()
}],
/**
* Padding Y
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: m()
}],
/**
* Padding Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: m()
}],
/**
* Padding End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: m()
}],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{
pt: m()
}],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{
pr: m()
}],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{
pb: m()
}],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{
pl: m()
}],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
m: [{
m: A()
}],
/**
* Margin X
* @see https://tailwindcss.com/docs/margin
*/
mx: [{
mx: A()
}],
/**
* Margin Y
* @see https://tailwindcss.com/docs/margin
*/
my: [{
my: A()
}],
/**
* Margin Start
* @see https://tailwindcss.com/docs/margin
*/
ms: [{
ms: A()
}],
/**
* Margin End
* @see https://tailwindcss.com/docs/margin
*/
me: [{
me: A()
}],
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
mt: [{
mt: A()
}],
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
mr: [{
mr: A()
}],
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
mb: [{
mb: A()
}],
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
ml: [{
ml: A()
}],
/**
* Space Between X
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-x": [{
"space-x": m()
}],
/**
* Space Between X Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-x-reverse": ["space-x-reverse"],
/**
* Space Between Y
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-y": [{
"space-y": m()
}],
/**
* Space Between Y Reverse
* @see https://tailwindcss.com/docs/margin#adding-space-between-children
*/
"space-y-reverse": ["space-y-reverse"],
// --------------
// --- Sizing ---
// --------------
/**
* Size
* @see https://tailwindcss.com/docs/width#setting-both-width-and-height
*/
size: [{
size: O()
}],
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
w: [{
w: [p, "screen", ...O()]
}],
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
"min-w": [{
"min-w": [
p,
"screen",
/** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
"none",
...O()
]
}],
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
"max-w": [{
"max-w": [
p,
"screen",
"none",
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
"prose",
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
{
screen: [i]
},
...O()
]
}],
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
h: [{
h: ["screen", "lh", ...O()]
}],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
"min-h": [{
"min-h": ["screen", "lh", "none", ...O()]
}],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
"max-h": [{
"max-h": ["screen", "lh", ...O()]
}],
// ------------------
// --- Typography ---
// ------------------
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
"font-size": [{
text: ["base", t, K, _]
}],
/**
* Font Smoothing
* @see https://tailwindcss.com/docs/font-smoothing
*/
"font-smoothing": ["antialiased", "subpixel-antialiased"],
/**
* Font Style
* @see https://tailwindcss.com/docs/font-style
*/
"font-style": ["italic", "not-italic"],
/**
* Font Weight
* @see https://tailwindcss.com/docs/font-weight
*/
"font-weight": [{
font: [r, l, me]
}],
/**
* Font Stretch
* @see https://tailwindcss.com/docs/font-stretch
*/
"font-stretch": [{
"font-stretch": ["ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "normal", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded", ce, n]
}],
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
"font-family": [{
font: [Tt, n, o]
}],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-normal": ["normal-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-ordinal": ["ordinal"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-slashed-zero": ["slashed-zero"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-figure": ["lining-nums", "oldstyle-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-spacing": ["proportional-nums", "tabular-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
/**
* Letter Spacing
* @see https://tailwindcss.com/docs/letter-spacing
*/
tracking: [{
tracking: [s, l, n]
}],
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
"line-clamp": [{
"line-clamp": [u, "none", l, me]
}],
/**
* Line Height
* @see https://tailwindcss.com/docs/line-height
*/
leading: [{
leading: [
/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
a,
...m()
]
}],
/**
* List Style Image
* @see https://tailwindcss.com/docs/list-style-image
*/
"list-image": [{
"list-image": ["none", l, n]
}],
/**
* List Style Position
* @see https://tailwindcss.com/docs/list-style-position
*/
"list-style-position": [{
list: ["inside", "outside"]
}],
/**
* List Style Type
* @see https://tailwindcss.com/docs/list-style-type
*/
"list-style-type": [{
list: ["disc", "decimal", "none", l, n]
}],
/**
* Text Alignment
* @see https://tailwindcss.com/docs/text-align
*/
"text-alignment": [{
text: ["left", "center", "right", "justify", "start", "end"]
}],
/**
* Placeholder Color
* @deprecated since Tailwind CSS v3.0.0
* @see https://v3.tailwindcss.com/docs/placeholder-color
*/
"placeholder-color": [{
placeholder: d()
}],
/**
* Text Color
* @see https://tailwindcss.com/docs/text-color
*/
"text-color": [{
text: d()
}],
/**
* Text Decoration
* @see https://tailwindcss.com/docs/text-decoration
*/
"text-decoration": ["underline", "overline", "line-through", "no-underline"],
/**
* Text Decoration Style
* @see https://tailwindcss.com/docs/text-decoration-style
*/
"text-decoration-style": [{
decoration: [...Q(), "wavy"]
}],
/**
* Text Decoration Thickness
* @see https://tailwindcss.com/docs/text-decoration-thickness
*/
"text-decoration-thickness": [{
decoration: [u, "from-font", "auto", l, _]
}],
/**
* Text Decoration Color
* @see https://tailwindcss.com/docs/text-decoration-color
*/
"text-decoration-color": [{
decoration: d()
}],
/**
* Text Underline Offset
* @see https://tailwindcss.com/docs/text-underline-offset
*/
"underline-offset": [{
"underline-offset": [u, "auto", l, n]
}],
/**
* Text Transform
* @see https://tailwindcss.com/docs/text-transform
*/
"text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
/**
* Text Overflow
* @see https://tailwindcss.com/docs/text-overflow
*/
"text-overflow": ["truncate", "text-ellipsis", "text-clip"],
/**
* Text Wrap
* @see https://tailwindcss.com/docs/text-wrap
*/
"text-wrap": [{
text: ["wrap", "nowrap", "balance", "pretty"]
}],
/**
* Text Indent
* @see https://tailwindcss.com/docs/text-indent
*/
indent: [{
indent: m()
}],
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
*/
"vertical-align": [{
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", l, n]
}],
/**
* Whitespace
* @see https://tailwindcss.com/docs/whitespace
*/
whitespace: [{
whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
}],
/**
* Word Break
* @see https://tailwindcss.com/docs/word-break
*/
break: [{
break: ["normal", "words", "all", "keep"]
}],
/**
* Overflow Wrap
* @see https://tailwindcss.com/docs/overflow-wrap
*/
wrap: [{
wrap: ["break-word", "anywhere", "normal"]
}],
/**
* Hyphens
* @see https://tailwindcss.com/docs/hyphens
*/
hyphens: [{
hyphens: ["none", "manual", "auto"]
}],
/**
* Content
* @see https://tailwindcss.com/docs/content
*/
content: [{
content: ["none", l, n]
}],
// -------------------
// --- Backgrounds ---
// -------------------
/**
* Background Attachment
* @see https://tailwindcss.com/docs/background-attachment
*/
"bg-attachment": [{
bg: ["fixed", "local", "scroll"]
}],
/**
* Background Clip
* @see https://tailwindcss.com/docs/background-clip
*/
"bg-clip": [{
"bg-clip": ["border", "padding", "content", "text"]
}],
/**
* Background Origin
* @see https://tailwindcss.com/docs/background-origin
*/
"bg-origin": [{
"bg-origin": ["border", "padding", "content"]
}],
/**
* Background Position
* @see https://tailwindcss.com/docs/background-position
*/
"bg-position": [{
bg: we()
}],
/**
* Background Repeat
* @see https://tailwindcss.com/docs/background-repeat
*/
"bg-repeat": [{
bg: ve()
}],
/**
* Background Size
* @see https://tailwindcss.com/docs/background-size
*/
"bg-size": [{
bg: ke()
}],
/**
* Background Image
* @see https://tailwindcss.com/docs/background-image
*/
"bg-image": [{
bg: ["none", {
linear: [{
to: ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
}, T, l, n],
radial: ["", l, n],
conic: [T, l, n]
}, Gt, Mt]
}],
/**
* Background Color
* @see https://tailwindcss.com/docs/background-color
*/
"bg-color": [{
bg: d()
}],
/**
* Gradient Color Stops From Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from-pos": [{
from: ie()
}],
/**
* Gradient Color Stops Via Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via-pos": [{
via: ie()
}],
/**
* Gradient Color Stops To Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to-pos": [{
to: ie()
}],
/**
* Gradient Color Stops From
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from": [{
from: d()
}],
/**
* Gradient Color Stops Via
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via": [{
via: d()
}],
/**
* Gradient Color Stops To
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to": [{
to: d()
}],
// ---------------
// --- Borders ---
// ---------------
/**
* Border Radius
* @see https://tailwindcss.com/docs/border-radius
*/
rounded: [{
rounded: y()
}],
/**
* Border Radius Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-s": [{
"rounded-s": y()
}],
/**
* Border Radius End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-e": [{
"rounded-e": y()
}],
/**
* Border Radius Top
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-t": [{
"rounded-t": y()
}],
/**
* Border Radius Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-r": [{
"rounded-r": y()
}],
/**
* Border Radius Bottom
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-b": [{
"rounded-b": y()
}],
/**
* Border Radius Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-l": [{
"rounded-l": y()
}],
/**
* Border Radius Start Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ss": [{
"rounded-ss": y()
}],
/**
* Border Radius Start End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-se": [{
"rounded-se": y()
}],
/**
* Border Radius End End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ee": [{
"rounded-ee": y()
}],
/**
* Border Radius End Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-es": [{
"rounded-es": y()
}],
/**
* Border Radius Top Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tl": [{
"rounded-tl": y()
}],
/**
* Border Radius Top Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tr": [{
"rounded-tr": y()
}],
/**
* Border Radius Bottom Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-br": [{
"rounded-br": y()
}],
/**
* Border Radius Bottom Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-bl": [{
"rounded-bl": y()
}],
/**
* Border Width
* @see https://tailwindcss.com/docs/border-width
*/
"border-w": [{
border: z()
}],
/**
* Border Width X
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-x": [{
"border-x": z()
}],
/**
* Border Width Y
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-y": [{
"border-y": z()
}],
/**
* Border Width Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-s": [{
"border-s": z()
}],
/**
* Border Width End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-e": [{
"border-e": z()
}],
/**
* Border Width Top
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-t": [{
"border-t": z()
}],
/**
* Border Width Right
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-r": [{
"border-r": z()
}],
/**
* Border Width Bottom
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-b": [{
"border-b": z()
}],
/**
* Border Width Left
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-l": [{
"border-l": z()
}],
/**
* Divide Width X
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-x": [{
"divide-x": z()
}],
/**
* Divide Width X Reverse
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-x-reverse": ["divide-x-reverse"],
/**
* Divide Width Y
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-y": [{
"divide-y": z()
}],
/**
* Divide Width Y Reverse
* @see https://tailwindcss.com/docs/border-width#between-children
*/
"divide-y-reverse": ["divide-y-reverse"],
/**
* Border Style
* @see https://tailwindcss.com/docs/border-style
*/
"border-style": [{
border: [...Q(), "hidden", "none"]
}],
/**
* Divide Style
* @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
*/
"divide-style": [{
divide: [...Q(), "hidden", "none"]
}],
/**
* Border Color
* @see https://tailwindcss.com/docs/border-color
*/
"border-color": [{
border: d()
}],
/**
* Border Color X
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-x": [{
"border-x": d()
}],
/**
* Border Color Y
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-y": [{
"border-y": d()
}],
/**
* Border Color S
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-s": [{
"border-s": d()
}],
/**
* Border Color E
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-e": [{
"border-e": d()
}],
/**
* Border Color Top
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-t": [{
"border-t": d()
}],
/**
* Border Color Right
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-r": [{
"border-r": d()
}],
/**
* Border Color Bottom
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-b": [{
"border-b": d()
}],
/**
* Border Color Left
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-l": [{
"border-l": d()
}],
/**
* Divide Color
* @see https://tailwindcss.com/docs/divide-color
*/
"divide-color": [{
divide: d()
}],
/**
* Outline Style
* @see https://tailwindcss.com/docs/outline-style
*/
"outline-style": [{
outline: [...Q(), "none", "hidden"]
}],
/**
* Outline Offset
* @see https://tailwindcss.com/docs/outline-offset
*/
"outline-offset": [{
"outline-offset": [u, l, n]
}],
/**
* Outline Width
* @see https://tailwindcss.com/docs/outline-width
*/
"outline-w": [{
outline: ["", u, K, _]
}],
/**
* Outline Color
* @see https://tailwindcss.com/docs/outline-color
*/
"outline-color": [{
outline: d()
}],
// ---------------
// --- Effects ---
// ---------------
/**
* Box Shadow
* @see https://tailwindcss.com/docs/box-shadow
*/
shadow: [{
shadow: [
// Deprecated since Tailwind CSS v4.0.0
"",
"none",
h,
re,
oe
]
}],
/**
* Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
*/
"shadow-color": [{
shadow: d()
}],
/**
* Inset Box Shadow
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
*/
"inset-shadow": [{
"inset-shadow": ["none", k, re, oe]
}],
/**
* Inset Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
*/
"inset-shadow-color": [{
"inset-shadow": d()
}],
/**
* Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
*/
"ring-w": [{
ring: z()
}],
/**
* Ring Width Inset
* @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/
"ring-w-inset": ["ring-inset"],
/**
* Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
*/
"ring-color": [{
ring: d()
}],
/**
* Ring Offset Width
* @see https://v3.tailwindcss.com/docs/ring-offset-width
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/
"ring-offset-w": [{
"ring-offset": [u, _]
}],
/**
* Ring Offset Color
* @see https://v3.tailwindcss.com/docs/ring-offset-color
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/
"ring-offset-color": [{
"ring-offset": d()
}],
/**
* Inset Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
*/
"inset-ring-w": [{
"inset-ring": z()
}],
/**
* Inset Ring Color
* @see https://tailwindcss.com/docs/bo