@anyframe/css
Version:
Fast, lightweight, customizable, and modern utility-first CSS framework.
1,519 lines • 56 kB
JavaScript
var F = Object.defineProperty, I = Object.defineProperties;
var V = Object.getOwnPropertyDescriptors;
var R = Object.getOwnPropertySymbols;
var B = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
var W = (o, e, t) => e in o ? F(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, m = (o, e) => {
for (var t in e || (e = {}))
B.call(e, t) && W(o, t, e[t]);
if (R)
for (var t of R(e))
N.call(e, t) && W(o, t, e[t]);
return o;
}, L = (o, e) => I(o, V(e));
var H = Object.defineProperty, T = Object.getOwnPropertySymbols, Z = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable, O = (o, e, t) => e in o ? H(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, U = (o, e) => {
for (var t in e || (e = {}))
Z.call(e, t) && O(o, t, e[t]);
if (T)
for (var t of T(e))
K.call(e, t) && O(o, t, e[t]);
return o;
};
class D {
constructor({ property: e = {}, values: t = {}, classes: r = {}, alwaysUseHyphens: s = !0 } = {}) {
this.property = U({
moxie: ({ key: n }) => n
}, e), this.values = t, this.classes = r, this.useHyphens = s;
}
toKebabCase(e) {
if (/^(webkit|moz|ms|o)[A-Z]/.test(e)) {
const t = e.match(/^(webkit|moz|ms|o)/);
if (t) {
const r = t[0];
return `-${r}${e.slice(r.length).replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`)}`;
}
}
return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
}
escapeCSSSelector(e) {
return e.replace(/([ #{}.:;?%&,@+*~'"!^$[\]()=>|/])/g, "\\$1");
}
getAllClassNames(e) {
if (!e) return [];
const t = /* @__PURE__ */ new Set();
return Object.entries(e).forEach(([r, s]) => {
s && typeof s == "object" && Object.keys(s).forEach((n) => {
t.add(n);
});
}), Array.from(t);
}
getTypePrefixes(e = []) {
const t = this.property, r = this.classes, s = Object.keys(t);
if (!r)
return [...s, ...e].sort((i, a) => a.length - i.length);
const n = [...this.getAllClassNames(r)];
return [...s, ...n, ...e].sort((i, a) => a.length - i.length);
}
generateClassNameRegEx(e) {
const t = this.getTypePrefixes(e).join("|"), r = "\\[[^\\]]+\\]", s = "\\([^()]*(?:\\([^()]*\\)[^()]*)*\\)", n = "\\{[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\}", i = "(?:([a-zA-Z0-9_-]+|[a-zA-Z0-9_-]+(?:-(?:" + r + "|" + s + "|" + n + "))|" + // Direct bracket, parenthesis, or brace content
r + "|" + s + "|" + n + "):)?", a = `(${t}|\\[[^\\]]+\\])`, l = this.useHyphens ? "(?:-)" : "(?:-)?", c = "(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|" + // Hex colors
r + "|" + // Bracket content
n + "|" + // Curly brace content
s + "|(?:\\$[^\\s\\/]+))", u = "([a-zA-Z%]*)", d = "(?:\\/(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|" + r + "|" + n + "|" + s + "|(?:\\$[^\\s\\/]+))([a-zA-Z%]*))?";
return new RegExp(
i + a + l + c + u + d
);
}
parse(e, t) {
if (Object.values(this.classes).some((p) => p == null ? void 0 : p[e]))
return [void 0, e, "", "", void 0, void 0];
const r = this.generateClassNameRegEx(t), s = (e + "-dummy").match(r);
if (!s) return null;
const [, n, i, a, l, c, u] = s, d = a ? a === "dummy" ? "" : a.replace("-dummy", "") : "", b = c ? c === "dummy" ? "" : c.replace("-dummy", "") : "";
return [n, i, d, l || "", b, u];
}
// unique value parser
processValue(e, t, r) {
if (!e) return "";
const s = (n) => n.replace(/\{([^}]+)\}/g, (i, a) => {
const l = this.values, c = l !== null ? typeof l[r] == "object" ? l[r][a] : l[a] : void 0;
return typeof c == "string" ? c : i;
});
if (typeof this.values == "object" && this.values !== null && (this.values[r] && typeof this.values[r] == "object" && this.values[r][e] || this.values[e]))
return typeof this.values[r] == "object" && this.values[r] !== null ? this.values[r][e] : this.values[e];
if (e.startsWith("$"))
return `var(--${e.slice(1)})`;
if (e.startsWith("[") && e.endsWith("]") || e.startsWith("(") && e.endsWith(")")) {
const n = e.slice(1, -1).replace(/_/g, " ");
return n.includes("{") ? s(n) : n.startsWith("--") ? `var(${n})` : n;
}
return e + (t || "");
}
processShorthand(e = "", t = "", r = "", s, n = "", i = "", a = !0) {
const l = this.property[e], c = /^(?:\(|\[)([^:]+):(.+)(?:\)|\])$/;
let u = null, d = t || "";
const b = d.match(c);
b && (u = b[1].trim(), d = b[2].trim());
let p;
t.includes(u + ":") ? p = t.startsWith("(") ? `(${d})` : `[${d}]` : p = t;
const f = this.processValue(p, r, e), y = this.processValue(n, i, e);
if (e.startsWith("[") && e.endsWith("]")) {
const x = e.slice(1, -1).split(",").map((g) => g.trim()).map((g) => `${g.startsWith("--") ? String(g) : this.toKebabCase(String(g))}: ${f}`).join("; ");
return {
className: `${`[${e.slice(1, -1)}]${a ? "-" : ""}${t}${r}`}`,
cssRules: x,
// return css rules directly
value: null,
// and set value to null to prevent value duplication
prefix: s
};
}
if (l) {
if (typeof l == "object" && "property" in l) {
const g = l.group && this.values[l.group][f] ? this.values[l.group][f] : r ? t : f, w = typeof l.property == "function" ? l.property({
value: t.startsWith("[") ? f : g,
unit: t.startsWith("[") ? "" : r,
secondValue: t.startsWith("[") ? "" : i ? n : y,
secondUnit: t.startsWith("[") ? "" : i,
key: u
}) : l.property, $ = l.value || "{0}";
let k;
if (typeof $ == "function")
k = $({
value: g,
unit: r,
secondValue: i ? n : y,
secondUnit: i,
key: u
});
else if (typeof $ == "string") {
const S = l.group || e, C = this.processValue(p, r, S);
this.values[S] && typeof this.values[S] == "object" && this.values[S][p] ? k = this.values[S][p] : $.includes("{") ? k = this.parseValuePattern(
S,
$,
C,
"",
y,
""
) : k = f;
} else k = null;
return {
className: `${e}${t ? `${a && a ? "-" : ""}${t}${r}` : ""}${n ? `/${n}${i}` : ""}`,
cssRules: Array.isArray(w) ? w : typeof w == "string" && (w.includes(":") || w.includes("value:")) ? w.includes("value:") ? w.slice(6) : this.toKebabCase(String(w)) : this.toKebabCase(String(w)),
value: $ === null || w.includes("value:") ? null : t.startsWith("[") ? f : k,
prefix: s
};
}
const x = typeof l == "function" ? l({
value: t.startsWith("[") ? f : r ? t : f,
unit: t.startsWith("[") ? "" : r,
secondValue: t.startsWith("[") ? "" : i ? n : y,
secondUnit: t.startsWith("[") ? "" : i,
key: u
}) : l;
return {
className: `${e}${t ? (a ? "-" : "") + t + r : ""}${n ? `/${n}${i}` : ""}`,
cssRules: Array.isArray(l) ? x : typeof x == "string" && x.startsWith("value:") ? x.slice(6) : this.toKebabCase(String(x)),
value: typeof x == "string" && x.startsWith("value:") ? null : f,
prefix: s
};
}
return null;
}
parseValuePattern(e, t, r, s, n, i) {
if (!t.includes("{0}") && !t.includes("{1") && !t.includes("||"))
return t;
const [a, l] = t.split("||").map((d) => d.trim()), c = this.processValue(r, s, e), u = this.processValue(n, i, e);
if (t.includes("{0}") && t.includes("{1") || t.includes("{1")) {
let d = a;
if (r && (d = d.replace("{0}", c)), t.includes("{1")) {
const b = d.match(/{1([^}]*)}/);
if (t.includes("{1}"))
n ? d = n.startsWith("[") ? u : d.replace("{1}", u) : d = l;
else if (b) {
const p = b[0], f = b[1].trim();
let y = u;
!y && f.includes("|") ? y = f.split("|")[1].trim() : y || (y = ""), d = r.startsWith("[") ? c : d.replace(p, y);
}
}
return r ? d : l || a;
} else
return r ? r.startsWith("[") ? c : a.replace("{0}", c) : l || a;
}
getParentClass(e) {
return Object.keys(this.classes).filter(
(t) => Object.prototype.hasOwnProperty.call(
this.classes[t],
e
)
);
}
processCustomClass(e, t = "", r = "", s = "", n = "", i = "", a = !0) {
if (!e) return null;
const l = this.getParentClass(e);
if (l.length > 0) {
const c = l.map((b) => {
const p = this.classes[b];
if (!p) return "";
const f = this.parseValuePattern(
e,
p[e] || "",
t,
r,
n,
i
);
return `${this.toKebabCase(String(b))}: ${f}`;
}).filter(Boolean).join("; "), u = e.slice(-(t + r).length), d = `${e}${t ? `${a ? "-" : ""}${t}${r}` : ""}${n ? `/${n}${i}` : ""}`;
return {
className: t === u ? e : d,
cssRules: c,
value: null,
prefix: s
};
}
return null;
}
process(e) {
const t = Array.isArray(e) ? e : e.split(/\s+/), r = [];
return t.forEach((s) => {
if (!s) return this;
const [n, i] = s.split(":"), a = i || n, l = i ? n : void 0, c = this.parse(s), u = c || [l, a, "", ""];
if (!u) return this;
const [d, b, p, f, y, x] = u, g = !s.includes((b || "") + (p || "")), w = this.getParentClass(`${b}${g ? "-" : ""}${p}`).length > 0 ? `${b}${g ? "-" : ""}${p}` : b, $ = this.processCustomClass(
w,
p,
f,
d,
y,
x,
g
);
if ($) {
const { className: S, cssRules: C, prefix: z } = $;
r.push({
className: S,
cssRules: C,
value: null,
prefix: z
});
return;
}
const k = this.processShorthand(b, p, f, d, y, x, g);
if (k) {
const { className: S, cssRules: C, value: z, prefix: E } = k;
r.push({
className: S,
cssRules: C,
value: z,
prefix: E
});
}
}), r;
}
}
/*!
* @nousantx/someutils v0.7.0 | MIT License
*
* Copyright (c) 2024-present NOuSantx <nousantx@gmail.com>
*
* Built Date: Mon Mar 03 2025 16:34:24 GMT+0700 (Western Indonesia Time)
*/
function j(...o) {
return o.reduce((e, t) => (Object.keys(t).forEach((r) => {
const s = r;
typeof t[s] == "object" && t[s] !== null && !Array.isArray(t[s]) ? e[s] = j(e[s] || {}, t[s]) : e[s] = t[s];
}), e), {});
}
function G(o) {
const e = {};
return Object.keys(o).forEach((t) => {
Object.entries(o[t]).forEach(([r, s]) => {
const n = r;
e[n] || (e[n] = {}), s !== void 0 && e[n] && (e[n][t] = s);
});
}), e;
}
const h = {
number: /^-?\d+(\.\d+)?$/,
percentage: /^-?\d+(\.\d+)?%$/,
color: /^(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})|\b(?:rgb|hsl|hwb|lch|oklch|oklab)\(\s*[\d.]+(?:%?)\s+[\d.]+(?:%?)\s+[\d.]+(?:%?)(?:\s*[,/]\s*[\d.]+(?:%?))?\s*\)|\b\d+(?:\.\d+)?(?:%?)\s+\d+(?:\.\d+)?(?:%?)\s+\d+(?:\.\d+)?(?:%?))$/,
length: /^-?\d+(\.\d+)?(px|em|rem|vw|vh|vmin|vmax|%)$/,
fraction: /^-?\d+(\.\d+)?fr$/,
time: /^-?\d+(\.\d+)?(ms|s)$/,
angle: /^-?\d+(\.\d+)?(deg|rad|grad|turn)$/,
resolution: /^-?\d+(\.\d+)?(dpi|dpcm|dppx|x)$/
}, Q = {
dark: "@media (prefers-color-scheme: dark)"
}, X = {
supports: ({ key: o, value: e }) => `value:@supports (${o}: ${e})`,
"not-supports": ({ key: o, value: e }) => `value:@supports not (${o}: ${e})`,
nth: ({ value: o }) => `value:&:nth-child(${o})`,
min: ({ value: o, unit: e }) => `value:@media (width >= ${o}${e})`,
max: ({ value: o, unit: e }) => `value:@media (width < ${o}${e})`
}, q = {
columns: "columns",
align: "verticalAlign",
whitespace: "whiteSpace",
hypehns: "hyphens",
content: "content",
isolation: "isolation",
order: "order",
z: "zIndex",
"outline-offset": {
property: "outlineOffset",
value: "{0}px"
},
// grid cols
"grid-cols": {
property: "gridTemplateColumns",
value: "repeat({0}, minmax(0, 1fr))"
},
"col-span": {
property: "gridColumn",
value: "span {0} / span {0}"
},
col: "gridColumn",
"col-start": "gridColumnStart",
"col-end": "gridColumnEnd",
// grid rows
"grid-rows": {
property: "gridTemplateRows",
value: "repeat({0}, minmax(0, 1fr))"
},
"row-span": {
property: "gridRow",
value: "span {0} / span {0}"
},
row: "gridRow",
"row-start": "gridRowStart",
"row-end": "gridRowEnd",
// grid auto
"grid-flow": "gridAutoFlow",
"auto-cols": "gridAutoColumns",
"auto-rows": "gridAutoRows",
opacity: "opacity",
filter: "filter",
"backdrop-filter": "backdropFilter",
resize: "resize",
visibility: "visibility",
overflow: "overflow",
"overflow-x": "overflowX",
"overflow-y": "overflowY",
"list-image": "listStyleImage",
list: "listStyleType"
}, Y = {
w: "width",
h: "height",
"min-w": "minWidth",
"max-w": "maxWidth",
"min-h": "minHeight",
"max-h": "maxHeight",
size: ["width", "height"],
top: "top",
right: "right",
bottom: "bottom",
left: "left",
inset: "inset",
gap: "gap",
"gap-x": "columnGap",
"gap-y": "rowGap",
m: "margin",
mt: "marginTop",
mr: "marginRight",
mb: "marginBottom",
ml: "marginLeft",
mx: "marginInline",
my: "marginBlock",
p: "padding",
pt: "paddingTop",
pr: "paddingRight",
pb: "paddingBottom",
pl: "paddingLeft",
py: "paddingBlock",
px: "paddingInline"
}, J = (o) => {
const e = ({ value: s = "", unit: n = "" }) => h.number.test(s + n) ? s + n !== "0" ? o * Number(s) + "rem" : "0" : h.length.test(s) ? s : s + n, t = (s) => ({
value: e,
group: "container-size",
property: s
}), r = {};
return Object.entries(Y).forEach(([s, n]) => {
r[s] = t(n);
}), r;
}, v = (o, e, t) => ["inherit", "current", "black", "white", "transparent"].includes(o) ? o === "current" ? "currentColor" : o : o.includes("(") && o.endsWith(")") ? `${o.slice(0, -1)}${e ? " / " + e + (t || "%)") : ")"}` : o + e, ee = {
"bg-clip": {
property: "backgroundClip",
value: ({ value: o }) => o !== "text" ? o + "-box" : o
},
"bg-origin": {
property: "backgroundOrigin",
value: ({ value: o }) => o !== "text" ? o + "-box" : o
},
bg: {
property: ({ key: o, value: e = "", unit: t = "" }) => {
const r = {
attachment: "backgroundAttachment",
color: "backgroundColor",
image: "backgroundImage",
clip: "backgroundClip",
position: "backgroundPosition",
repeat: "backgroundRepeat",
size: "backgroundSize",
origin: "backgroundOrigin"
};
return o && r[o] ? r[o] : h.color.test(e) || ["inherit", "current", "black", "white", "transparent"].includes(e) ? r.color : ["fixed", "scroll", "local"].includes(e) ? r.attachment : ["repeat", "repeat-x", "repeat-y", "no-repeat"].includes(e) ? r.repeat : ["cover", "contain", "auto"].includes(e) || h.length.test(e + t) ? r.size : /\d+%|\d+px|top|bottom|left|right|center/.test(e) ? r.position : "background";
},
value: ({ key: o, value: e = "", unit: t = "", secondValue: r = "", secondUnit: s = "" }) => e ? o === "color" || h.color.test(e) || ["inherit", "current", "black", "white", "transparent"].includes(e) ? v(e, r, s) : o === "size" || h.length.test(e + t) || ["cover", "contain", "auto"].includes(e) ? e + t : e : null
}
}, te = (o) => ({
text: {
property: ({
key: e,
value: t = "",
unit: r = "",
secondValue: s = "",
secondUnit: n = ""
}) => {
const i = {
xs: ["0.75rem", "calc(1 / 0.75)"],
sm: ["0.875rem", "calc(1.25 / 0.875)"],
base: ["1rem", "calc(1.5 / 1)"],
lg: ["1.125rem", "calc(1.75 / 1.125)"],
xl: ["1.25rem", "calc(1.75 / 1.25)"],
"2xl": ["1.5rem", "calc(2 / 1.5)"],
"3xl": ["1.875rem", "calc(2.25 / 1.875)"],
"4xl": ["2.25rem", "calc(2.5 / 2.25)"],
"5xl": ["3rem", "1"],
"6xl": ["3.75rem", "1"],
"7xl": ["4.5rem", "1"],
"8xl": ["6rem", "1"],
"9xl": ["8rem", "1"]
}, a = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
if (t) {
if (e === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) && e !== "size")
return `value:color: ${v(t, s, n)}`;
if (e === "align" || ["center", "justify", "left", "right", "start", "end"].includes(t))
return `value:text-align: ${t}`;
if (e === "wrap" || ["wrap", "nowrap", "balance", "pretty"].includes(t))
return `value:text-wrap: ${t}`;
if (e === "overflow" || ["ellipsis", "clip"].includes(t))
return `value:text-overflow: ${t}`;
if (e === "size" || h.length.test(t + r) || t + r in i) {
if (t + r in i) {
const l = t + r, [c, u] = i[l];
return `value:font-size: ${c}; line-height: ${a[s] || s + n || u}`;
}
return `value:font-size: ${t + r}${s ? `; line-height: ${a[s] || s + n}` : ""}`;
}
}
return "value:color: " + t;
},
value: null
},
font: {
value: null,
property: ({ key: e, value: t }) => {
const r = {
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900"
};
if (t) {
if (e === "weight" || r[t] || h.number.test(t) || t.endsWith("00"))
return `value:font-weight: ${r[t] || t}`;
if (e === "family")
return `value:font-family: ${t}`;
}
return `value:font-family: ${t}`;
}
},
tracking: {
property: "letterSpacing",
value: ({ value: e = "", unit: t = "" }) => ({
tighter: "-0.05em",
tight: "-0.025em",
normal: "0em",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em"
})[e] || e + t
},
leading: {
property: "lineHeight",
value: ({ value: e = "", unit: t = "" }) => {
const r = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
return e === "0" ? e : r[e] ? r[e] : !t && h.number.test(e) ? o * Number(e) + "rem" : e + t;
}
},
decoration: {
property: ({ key: e, value: t = "", unit: r = "", secondValue: s = "", secondUnit: n = "" }) => {
if (t) {
if (e === "color" || h.color.test(t))
return `value:text-decoration-color: ${t.slice(0, -1)}${s ? " / " + s + (n || "%)") : ")"}`;
if (e === "style" || ["solid", "dashed", "double", "dotted", "wavy"].includes(t))
return `value:text-decoration-style: ${t}`;
if (e === "length" || ["auto", "from-font"].includes(t) || h.number.test(t + r) || h.length.test(t + r))
return `value:text-decoration-thickness: ${h.number.test(t + r) ? t + "px" : t + r}`;
}
return "value:text-decoration-color: " + t;
},
value: null
},
"underline-offset": {
property: "textUnderlineOffset",
value: "{0}px"
},
indent: {
property: "textIndent",
value: ({ value: e = "", unit: t = "" }) => e ? e === "0" ? e : h.number.test(e + t) ? o * Number(e) + "rem" : e + t : null
}
}), re = (o) => {
const e = (t, r) => t ? h.number.test(t + r) ? t + "px" : t + r : "1px";
return {
border: {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = {
x: "border-inline-width",
y: "border-block-width",
t: "border-top-width",
r: "border-right-width",
b: "border-bottom-width",
l: "border-left-width"
};
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? "value:border-color: " + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? "value:border-style: " + t : "value:" + (a[s] || "border-width") + ": " + e(t, r);
}
},
"border-x": {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = "border-inline";
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? `value:${a}-color: ` + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? `value:${a}-style: ` + t : `value:${a}-width: ` + e(t, r);
},
value: null
},
"border-y": {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = "border-block";
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? `value:${a}-color: ` + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? `value:${a}-style: ` + t : `value:${a}-width: ` + e(t, r);
},
value: null
},
"border-t": {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = "border-top";
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? `value:${a}-color: ` + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? `value:${a}-style: ` + t : `value:${a}-width: ` + e(t, r);
},
value: null
},
"border-r": {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = "border-right";
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? `value:${a}-color: ` + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? `value:${a}-style: ` + t : `value:${a}-width: ` + e(t, r);
},
value: null
},
"border-b": {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = "border-bottom";
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? `value:${a}-color: ` + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? `value:${a}-style: ` + t : `value:${a}-width: ` + e(t, r);
},
value: null
},
"border-l": {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => {
const a = "border-left";
return s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? `value:${a}-color: ` + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(t) ? `value:${a}-style: ` + t : `value:${a}-width: ` + e(t, r);
},
value: null
},
radius: {
// group: 'radius',
property: ({ key: t = "" }) => ({
t: ["borderTopLeftRadius", "borderTopRightRadius"],
r: ["borderTopRightRadius", "borderBottomRightRadius"],
b: ["borderBottomRightRadius", "borderBottomLeftRadius"],
l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
tl: "borderTopLeftRadius",
tr: "borderTopRightRadius",
br: "borderBottomRightRadius",
bl: "borderBottomLeftRadius"
})[t] || "borderRadius",
value: ({ value: t = "", unit: r = "" }) => ({
xs: "0.125rem",
sm: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"4xl": "2rem"
})[t] || t + r
},
outline: {
property: ({ value: t = "", unit: r = "", key: s = "", secondValue: n = "", secondUnit: i = "" }) => s === "color" || h.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? "value:outline-color: " + v(t, n, i) : s === "style" || ["solid", "dashed", "double", "none", "dotted"].includes(t) ? "value:outline-style: " + t : "value:outline-width: " + e(t, r),
value: null
}
};
}, se = {
shadow: {
property: ({ key: o = "", value: e = "", secondValue: t = "", secondUnit: r = "" }) => {
const s = o === "inset" ? "inset-shadow" : "shadow", n = {
"2xs": `0 1px var(--anc-${s}-color, rgb(0 0 0 / 0.05))`,
xs: `0 1px 2px 0 var(--anc-${s}-color, rgb(0 0 0 / 0.05))`,
sm: `0 1px 3px 0 var(--anc-${s}-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--anc-${s}-color, rgb(0 0 0 / 0.1))`,
md: `0 4px 6px -1px var(--anc-${s}-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--anc-${s}-color, rgb(0 0 0 / 0.1))`,
lg: `0 10px 15px -3px var(--anc-${s}-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--anc-${s}-color, rgb(0 0 0 / 0.1))`,
xl: `0 20px 25px -5px var(--anc-${s}-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--anc-${s}-color, rgb(0 0 0 / 0.1))`,
"2xl": `0 25px 50px -12px var(--anc-${s}-color, rgb(0 0 0 / 0.25))`,
none: "0 0 #0000"
}, i = {
"2xs": "inset 0 1px var(--anc-inset-shadow-color, rgb(0 0 0 / 0.05)",
xs: "inset 0 1px 1px var(--anc-inset-shadow-color, rgb(0 0 0 / 0.05))",
sm: "inset 0 2px 4px var(--anc-inset-shadow-color, rgb(0 0 0 / 0.05))",
none: "0 0 #0000"
};
return h.color.test(e) ? `--anc-${s}-color: ${v(
e,
t,
r
)}` : `--anc-${s}: ${(o === "inset" ? i[e] : n[e]) || e}; box-shadow: var(--anc-inset-shadow), var(--anc-inset-ring-shadow), var(--anc-ring-offset-shadow), var(--anc-shadow), var(--anc-ring-shadow)`;
},
value: null
},
ring: {
property: ({ key: o = "", value: e = "", unit: t = "", secondValue: r = "", secondUnit: s = "" }) => {
const n = o === "inset" ? "inset-ring-shadow" : "ring-shadow";
let i;
return e ? h.color.test(e) ? i = v(e, r, s) : h.number.test(e + t) ? i = e + "px" : i = e + t : i = "1px", h.color.test(e) || e === "current" ? `--anc-${n}-color: ${e === "current" ? "currentColor" : i}` : `--anc-${n}: ${o === "inset" ? "inset" : ""} 0 0 0 calc(${i} + var(--anc-ring-offset-width, 2px)) var(--anc-ring-shadow-color, currentColor); box-shadow: var(--anc-inset-shadow), var(--anc-inset-ring-shadow), var(--anc-ring-offset-shadow), var(--anc-shadow), var(--anc-ring-shadow)`;
},
value: null
},
"ring-offset": {
property: ({ key: o = "", value: e = "", unit: t = "", secondValue: r = "", secondUnit: s = "" }) => {
let n;
return e ? h.color.test(e) ? n = v(e, r, s) : h.number.test(e + t) ? n = e + "px" : n = e + t : n = "1px", h.color.test(e) || e === "current" ? `--anc-ring-offset-color: ${e === "current" ? "currentColor" : n}` : `--anc-ring-offset-width: ${n}; --anc-ring-offset-shadow: 0 0 0 var(--anc-ring-offset-width) var(--anc-ring-offset-color);`;
},
value: null
}
}, ne = (o) => ({
blur: {
property: "filter",
group: "anc-blur-value",
value: ({ value: e = "", unit: t = "" }) => {
if (!e) return "blur(10px)";
const r = e + t;
return `blur(${h.length.test(e) ? e : h.length.test(r) ? r : h.number.test(r) ? `${o * Number(e)}rem` : r})`;
}
},
brightness: ({ value: e }) => `value:filter: brightness(${e}%)`,
contrast: ({ value: e }) => `value:filter: contrast(${e}%)`,
saturate: ({ value: e }) => `value:filter: saturate(${e}%)`,
sepia: ({ value: e }) => `value:filter: sepia(${e || "100"}%)`,
grayscale: ({ value: e }) => `value:filter: grayscale(${e || "100"}%)`,
invert: ({ value: e }) => `value:filter: inverlt(${e || "100"}%)`,
"hue-rotate": ({ value: e = "", unit: t = "" }) => {
let r;
return h.angle.test(e + t) ? r = e + t : r = e + "deg", `value:filter: hue-rotate(${r})`;
},
"backdrop-blur": {
property: "backdropFilter",
group: "anc-blur-value",
value: ({ value: e = "", unit: t = "" }) => {
if (!e) return "blur(10px)";
const r = e + t;
return `blur(${h.length.test(e) ? e : h.length.test(r) ? r : h.number.test(r) ? `${o * Number(e)}rem` : r})`;
}
},
"backdrop-brightness": ({ value: e }) => `value:backdrop-filter: brightness(${e}%)`,
"backdrop-contrast": ({ value: e }) => `value:backdrop-filter: contrast(${e}%)`,
"backdrop-saturate": ({ value: e }) => `value:backdrop-filter: saturate(${e}%)`,
"backdrop-sepia": ({ value: e }) => `value:backdrop-filter: sepia(${e || "100"}%)`,
"backdrop-grayscale": ({ value: e }) => `value:backdrop-filter: grayscale(${e || "100"}%)`,
"backdrop-invert": ({ value: e }) => `value:backdrop-filter: invert(${e || "100"}%)`,
"backdrop-hue-rotate": ({ value: e = "", unit: t = "" }) => {
let r;
return h.angle.test(e + t) ? r = e + t : r = e + "deg", `value:backdrop-filter: hue-rotate(${r})`;
}
}), oe = {
transition: {
value: null,
property: ({ key: o = "", value: e = "", unit: t = "" }) => {
if (!e || o === "property" || ["all", "colors", "opacity", "shadow", "transform"].includes(e)) {
let r;
return e ? e === "colors" ? r = "color, background-color, border-color, text-decoration-color, fill, stroke" : e === "shadow" ? r = "box-shadow" : e === "transform" ? r = "transform, translate, scale, rotate" : r = e : r = "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter", `value:transition-property: ${r}; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)`;
} else {
if (o === "behavior" || ["normal", "discrete"].includes(e))
return `value:transition-behavior: ${e === "discrete" ? "allow-discrete" : e}`;
if (o === "duration" || e === "initial" || h.number.test(e))
return `value:transition-duration: ${e === "initial" ? "initial" : e + (t || "ms")}`;
if (o === "delay")
return "value:transition-delay: " + (h.time.test(e) ? e : e + (t || "ms"));
}
return "value:transition: " + e + t;
}
},
ease: {
property: "transitionTimingFunction",
value: ({ value: o = "" }) => ({
in: "cubic-bezier(0.4, 0, 1, 1)",
out: "cubic-bezier(0, 0, 0.2, 1)",
"in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
})[o] || o || "cubic-bezier(0.4, 0, 0.2, 1)"
},
duration: {
property: "transitionDuration",
value: ({ value: o = "", unit: e = "" }) => o + (e || "ms")
},
delay: {
property: "transitionDelay",
value: ({ value: o = "", unit: e = "" }) => o + (e || "ms")
}
}, ie = (o) => ({
move: {
property: "translate",
value: ({ value: e = "", unit: t = "", secondValue: r = "", secondUnit: s = "" }) => {
if (!e) return "";
const i = h.number.test(e + t) ? `${o * Number(e)}rem` : e + t, a = r && h.number.test(r + s) ? `${o * Number(r)}rem` : r ? r + s : i;
return `${i} ${a}`;
}
},
"move-x": {
property: "translate",
value: ({ value: e = "", unit: t = "" }) => h.number.test(e + t) ? o * Number(e) + "rem" : `${e + t} var(--anc-move-y)`
},
"move-y": {
property: "translate",
value: ({ value: e = "", unit: t = "" }) => h.number.test(e + t) ? o * Number(e) + "rem" : `var(--anc-move-y) ${e + t}`
}
}), ae = ({ sizing: o }) => m(m(m(m(m(m(m(m(m({}, q), J(o)), ee), te(o)), re()), se), ne(o)), oe), ie(o)), le = {
px: "1px",
fr: "minmax(0, 1fr)",
full: "100%",
half: "50%",
vh: "100vh",
svh: "100svh",
lvh: "100lvh",
dvh: "100dvh",
vw: "100vw",
svw: "100svw",
lvw: "100lvw",
dvw: "100dvw",
min: "min-content",
max: "max-content",
fit: "fit-content",
order: {
first: "calc(-infinity)",
last: "calc(infinity)",
none: "0"
},
"grid-flow": {
"row-dense": "row dense",
"col-dense": "column dense"
},
"container-size": {
"3xs": "16rem",
"2xs": "18rem",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem"
/* 1280px */
},
"default-font-family": "var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji')",
"default-font-mono": "var(--default-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace)",
"anc-blur-value": {
xs: "4px",
sm: "8px",
md: "12px",
lg: "16px",
xl: "24px",
"2xl": "40px",
"3xl": "64px"
}
}, ce = {
boxSizing: {
"box-border": "border-box",
"box-content": "content-box"
},
fontStyle: {
italic: "italic",
"not-italic": "normal"
},
textDecorationLine: {
underline: "underline",
overline: "overline",
"line-through": "line-through",
"no-underline": "none"
},
textDecorationStyle: {
"decoration-solid": "solid",
"decoration-double": "double",
"decoration-dotted": "dotted",
"decoration-dashed": "dashed",
"decoration-wavy": "wavy"
},
textDecorationThickness: {
"decoration-thickness-from-font": "from-font",
"decoration-thickness-auto": "auto"
},
textUnderlineOffset: {
"underline-offsite-auto": "auto"
},
textTransform: {
uppercase: "uppercase",
lowercase: "lowercase",
capitalize: "capitalize",
"normal-case": "none"
},
display: {
inline: "inline",
block: "block",
"inline-block": "inline-block",
"flow-root": "flow-root",
flex: "flex",
"inline-flex": "inline-flex",
grid: "grid",
"inline-grid": "inline-grid",
contents: "contents",
table: "table",
"inline-table": "inline-table",
"table-caption": "table-caption",
"table-cell": "table-cell",
"table-column": "table-column",
"table-column-group": "table-column-group",
"table-footer-group": "table-footer-group",
"table-header-group": "table-header-group",
"table-row-group": "table-row-group",
"table-row": "table-row",
"list-item": "list-item",
hidden: "none"
},
position: {
static: "static",
fixed: "fixed",
absolute: "absolute",
relative: "relative",
sticky: "sticky"
},
justifyContent: {
"justify-start": "flex-start",
"justify-end": "flex-end",
"justify-center": "center",
"justify-between": "space-between",
"justify-around": "space-around",
"justify-evenly": "space-evenly",
"justify-stretch": "stretch",
"justify-baseline": "baseline",
"justify-normal": "normal"
},
justifyItems: {
"justify-items-start": "start",
"justify-items-end": "end",
"justify-items-center": "center",
"justify-items-stretch": "stretch",
"justify-items-normal": "normal"
},
justifySelf: {
"justify-self-start": "start",
"justify-self-end": "end",
"justify-self-center": "center",
"justify-self-stretch": "stretch",
"justify-self-auto": "auto"
},
alignContent: {
"content-start": "flex-start",
"content-end": "flex-end",
"content-center": "center",
"content-between": "space-between",
"content-around": "space-around",
"content-evenly": "space-evenly",
"content-stretch": "stretch",
"content-baseline": "baseline"
},
alignItems: {
"items-start": "flex-start",
"items-end": "flex-end",
"items-center": "center",
"items-stretch": "stretch",
"items-baseline": "baseline"
},
alignSelf: {
"self-start": "flex-start",
"self-end": "flex-end",
"self-center": "center",
"self-stretch": "stretch",
"self-baseline": "baseline",
"self-auto": "auto"
},
placeContent: {
"place-content-start": "start",
"place-content-end": "end",
"place-content-center": "center",
"place-content-between": "space-between",
"place-content-around": "space-around",
"place-content-evenly": "space-evenly",
"place-content-stretch": "stretch",
"place-content-baseline": "baseline"
},
placeItems: {
"place-items-start": "start",
"place-items-end": "end",
"place-items-center": "center",
"place-items-stretch": "stretch",
"place-items-baseline": "baseline"
},
placeSelf: {
"place-self-start": "start",
"place-self-end": "end",
"place-self-center": "center",
"place-self-stretch": "stretch",
"place-self-auto": "auto"
},
listStylePosition: {
"list-inside": "inside",
"list-outside": "outside"
}
}, de = j(
G({
truncate: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
"outline-hidden": {
outline: "2px solid transparent",
outlineOffset: "2px"
}
}),
ce
), ue = {
isolate: "isolation-isolate",
// flex direction
"flex-row": "[flex-direction]-row",
"flex-col": "[flex-direction]-column",
"flex-row-reverse": "[flex-direction]-row-reverse",
"flex-col-reverse": "[flex-direction]-column-reverse",
// flex wrap
"flex-wrap": "[flex-wrap]-wrap",
"flex-nowrap": "[flex-wrap]-nowrap",
"flex-wrap-reverse": "[flex-wrap]-wrap-reverse",
// columns
"grid-cols-none": "grid-cols-[none]",
"grid-cols-subgrid": "grid-cols-[subgrid]",
"col-span-full": "col-span-[1_/_-1]",
"col-start-auto": "col-start-[auto]",
"col-end-auto": "col-end-[auto]",
// row
"grid-rows-none": "grid-rows-[none]",
"grid-rows-subgrid": "grid-rows-[subgrid]",
"row-span-full": "row-span-[1_/_-1]",
"row-start-auto": "row-start-[auto]",
"row-end-auto": "row-end-[auto]"
};
/*!
* @nousantx/color-generator v1.6.0 | MIT License
*
* Copyright (c) 2024-present NOuSantx <nousantx@gmail.com>
*
* Built Date: Thu Feb 27 2025 09:16:59 GMT+0700 (Western Indonesia Time)
*/
function M(o, e, t) {
o /= 255, e /= 255, t /= 255;
const r = Math.max(o, e, t), s = Math.min(o, e, t);
let n, i;
const a = (r + s) / 2;
if (r === s)
n = i = 0;
else {
const l = r - s;
switch (i = a > 0.5 ? l / (2 - r - s) : l / (r + s), r) {
case o:
n = (e - t) / l + (e < t ? 6 : 0);
break;
case e:
n = (t - o) / l + 2;
break;
case t:
n = (o - e) / l + 4;
break;
default:
n = 0;
}
n /= 6;
}
return [n * 360, i * 100, a * 100];
}
function he(o, e, t) {
o /= 360, e /= 100, t /= 100;
let r, s, n;
if (e === 0)
r = s = n = t;
else {
const i = (c, u, d) => (d < 0 && (d += 1), d > 1 && (d -= 1), d < 0.16666666666666666 ? c + (u - c) * 6 * d : d < 0.5 ? u : d < 0.6666666666666666 ? c + (u - c) * (0.6666666666666666 - d) * 6 : c), a = t < 0.5 ? t * (1 + e) : t + e - t * e, l = 2 * t - a;
r = i(l, a, o + 1 / 3), s = i(l, a, o), n = i(l, a, o - 1 / 3);
}
return [Math.round(r * 255), Math.round(s * 255), Math.round(n * 255)];
}
function pe(o) {
const e = parseInt(o.slice(1, 3), 16), t = parseInt(o.slice(3, 5), 16), r = parseInt(o.slice(5, 7), 16);
return [e, t, r];
}
function fe([o, e, t]) {
return `#${o.toString(16).padStart(2, "0")}${e.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}`;
}
function be(o, e, t) {
o /= 255, e /= 255, t /= 255;
const r = Math.min(o, e, t), s = 1 - Math.max(o, e, t);
let n;
const [i] = M(o * 255, e * 255, t * 255);
return n = i, [n, r * 100, s * 100];
}
function P(o, e, t) {
const [r, s, n] = _(o, e, t), i = 0.95047, a = 1, l = 1.08883, c = r / i, u = s / a, d = n / l, b = c > 8856e-6 ? Math.pow(c, 1 / 3) : 7.787 * c + 16 / 116, p = u > 8856e-6 ? Math.pow(u, 1 / 3) : 7.787 * u + 16 / 116, f = d > 8856e-6 ? Math.pow(d, 1 / 3) : 7.787 * d + 16 / 116, y = 116 * p - 16, x = 500 * (b - p), g = 200 * (p - f);
return [y, x, g];
}
function me(o, e, t) {
const [r, s, n] = P(o, e, t), i = Math.sqrt(s * s + n * n);
let a = Math.atan2(n, s) * 180 / Math.PI;
return a < 0 && (a += 360), [r, i, a];
}
function A(o) {
const e = o / 255;
return e <= 0.03928 ? e / 12.92 : Math.pow((e + 0.055) / 1.055, 2.4);
}
function _(o, e, t) {
o = A(o), e = A(e), t = A(t);
const r = 0.4124564 * o + 0.3575761 * e + 0.1804375 * t, s = 0.2126729 * o + 0.7151522 * e + 0.072175 * t, n = 0.0193339 * o + 0.119192 * e + 0.9503041 * t;
return [r, s, n];
}
function ge(o, e, t) {
const r = Math.cbrt(0.8189330101 * o + 0.3618667424 * e - 0.1288597137 * t), s = Math.cbrt(0.0329845436 * o + 0.9293118715 * e + 0.0361456387 * t), n = Math.cbrt(0.0482003018 * o + 0.2643662691 * e + 0.633851707 * t);
return [
0.2104542553 * r + 0.793617785 * s - 0.0040720468 * n,
1.9779984951 * r - 2.428592205 * s + 0.4505937099 * n,
0.0259040371 * r + 0.7827717662 * s - 0.808675766 * n
];
}
function ye(o, e, t) {
const r = Math.sqrt(e * e + t * t);
let s = Math.atan2(t, e) * 180 / Math.PI;
return s < 0 && (s += 360), [o, r * 1, s];
}
function xe(o, e, t) {
const r = _(o, e, t), s = ge(...r), [n, i, a] = ye(...s);
return [n * 100, i, a];
}
function $e(o, e, t, r, s, n, i) {
let [a, l, c] = o;
return e < 5 ? (c = Math.min(98, c + (98 - c) * ((5 - e) / r)), t || (l = Math.max(10, l - l * ((5 - e) / s)))) : e > 5 && (c = c * (1 - (e - 5) / n), t || (l = Math.min(100, l + (100 - l) * ((e - 5) / i)))), [a, l, c];
}
function we(o, e, t = "") {
const [r, s, n] = o, i = he(r, s, n), a = t ? ` / var(--${t}-opacity)` : "", l = (c) => {
var u;
return ((u = c.match(/[\d.]+%?/g)) === null || u === void 0 ? void 0 : u.join(" ")) || "";
};
switch (e) {
case "rgb":
return `rgb(${i[0]} ${i[1]} ${i[2]}${a})`;
case "rgb-value":
return l(`rgb(${i[0]} ${i[1]} ${i[2]})`);
case "hsl":
return `hsl(${Math.round(r)} ${Math.round(s)}% ${n.toFixed(1)}%${a})`;
case "hsl-value":
return l(`hsl(${Math.round(r)} ${Math.round(s)}% ${n.toFixed(1)}%)`);
case "hwb":
case "hwb-value": {
const [c, u, d] = be(...i), b = `hwb(${Math.round(c)} ${Math.round(u)}% ${Math.round(d)}%)`;
return e === "hwb-value" ? l(b) : b;
}
case "lab":
case "lab-value": {
const [c, u, d] = P(...i), b = `lab(${c.toFixed(1)}% ${u.toFixed(1)} ${d.toFixed(1)})`;
return e === "lab-value" ? l(b) : b;
}
case "lch":
case "lch-value": {
const [c, u, d] = me(...i), b = `lch(${c.toFixed(1)}% ${u.toFixed(1)} ${d.toFixed(1)})`;
return e === "lch-value" ? l(b) : b;
}
case "oklch":
case "oklch-value": {
const [c, u, d] = xe(...i), b = `oklch(${c.toFixed(1)}% ${u.toFixed(3)} ${d.toFixed(1)})`;
return e === "oklch-value" ? l(b) : b;
}
case "hex":
default:
return fe(i);
}
}
function ke({ option: o = {}, color: e }) {
const { format: t = "css", output: r = "hex", opacityPrefix: s = "", prefix: n = "", reverse: i = !1, lighterLightness: a = 4.5, lighterSaturation: l = 10, darkerLightness: c = 6.5, darkerSaturation: u = 7 } = o, d = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], b = i ? [...d].reverse() : d;
let p = t === "array" ? {} : t === "object" || t === "object2" ? {} : t === "tailwind" ? { theme: { colors: {} } } : "";
for (let [f, y] of Object.entries(e)) {
const x = pe(y), g = M(...x), w = g[1] < 10;
n !== "" && (f = n + f), t === "array" && (p[f] = []), b.forEach(($, k) => {
const S = $e(g, k, w, a, l, c, u), C = we(S, r, s);
switch (t) {
case "scss":
p += `$${f}-${$}: ${C};
`;
break;
case "tailwind":
p.theme.colors[f] || (p.theme.colors[f] = {}), p.theme.colors[f][$] = C;
break;
case "object":
typeof p != "object" && (p = {}), p[f] || (p[f] = {}), p[f][$] = C;
break;
case "object2":
p[`${f}-${$}`] = C;
break;
case "array":
p[f].push(C);
break;
case "css":
default:
p += `--${f}-${$}: ${C};
`;
}
}), t === "array" && i && p[f].reverse();
}
return p;
}
const ve = {
red: "#f60410",
orange: "#d85900",
amber: "#d68200",
yellow: "#ca9600",
lime: "#69af00",
green: "#00aa45",
emerald: "#009f6a",
teal: "#009e8d",
cyan: "#009cb9",
sky: "#008cce",
blue: "#0064fc",
indigo: "#2c29ff",
violet: "#6c1dff",
purple: "#9714ff",
fuchsia: "#d604f4",
pink: "#f20984",
rose: "#f3003b",
slate: "#304d76",
gray: "#34486f",
zinc: "#606068",
neutral: "#505050",
stone: "#544e4a"
}, Se = ({
output: o = "oklch",
colors: e = {}
}) => ke({
color: m(m({}, ve), e),
option: {
format: "object2",
output: o
}
}), Ce = {
":root": `
[--anc-inset-shadow]-[0_0_#0000]
[--anc-inset-ring-shadow]-[0_0_#0000]
[--anc-shadow]-[0_0_#0000]
[--anc-ring-shadow]-[0_0_#0000]
[--anc-ring-offset-shadow]-[0_0_#0000]
[--anc-ring-offset-width]-0px
[--anc-ring-inset]-[_]
[--anc-ring-offset-color]-#fff
`
};
/*!
* Based on Tailwind CSS Preflight
* Copyright (c) Tailwind Labs, Inc.
* Licensed under the MIT License (https://github.com/tailwindlabs/tailwindcss/blob/master/LICENSE)
*/
const je = {
"*, ::before, ::after, ::backdrop, ::file-selector-button": "[box-sizing]-border-box m-0 p-0 [border]-[0_solid]",
"html, :host": `
leading-[1.5]
[-webkit-text-size-adjust]-100%
[tab-size]-4
font-(family:{default-font-family})
[fontFeatureSettings,fontVariationSettings]-normal
[webkitTapHighlightColor]-transparent
`,
hr: "h-0 text-inherit border-t-1",
"abbr:where([title])": "[-webkit-text-decoration,text-decoration]-[underline_dotted]",
"h1, h2, h3, h4, h5, h6": "text-(size:inherit) leading-inherit",
a: "[color,-webkit-text-decoration,text-decoration]-inherit",
"b, strong": "[fontWeight]-bolder",
"code, kbd, samp, pre": "font-(family:{default-font-mono}) [fontFeatureSettings]-normal [fontVariationSettings]-normal text-1em",
small: "text-80%",
"sub, sup": "text-75% leading-0 relative align-baseline",
sub: "bottom--1",
sup: "top--2",
table: "indent0 borderinherit [border-collapse]-collapse",
":-moz-focusring": "outline-auto",
progress: "align-baseline",
summary: "list-item",
"ol, ul, menu": "[list-style]-none",
"img, svg, video, canvas, audio, iframe, embed, object": "block align-middle",
"img, video": "max-w-100% h-auto",
"button, input, select, optgroup, textarea, ::file-selector-button": "[font,color,letterSpacing,fontFeatureSettings,fontVariationSettings]-inherit bg-transparent radius-0 opacity-1",
":where(select:is([multiple], [size])) optgroup": "[fontWeight]-bolder",
":where(select:is([multiple], [size])) optgroup option": "[paddingInlineStart]-20px",
"::file-selector-button": "[marginInlineEnd]-4px",
textarea: "resize-vertical",
"::-webkit-search-decoration": "[webkitAppearance]-none",
"::-webkit-date-and-time-value": "min-h-1lh [textAlign]-inherit",
"::-webkit-datetime-edit": "inline-flex",
"::-webkit-datetime-edit-fields-wrapper": "p-0",
"::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field": "py-0",
":-moz-ui-invalid": "[box-shadow]-none",
"button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button": "[appearance]-button",
"::-webkit-inner-spin-button, ::-webkit-outer-spin-button": "h-auto",
"[hidden]:where(:not([hidden='until-found']))": "[display]-[none_!important]"
};
class Ae {
constructor({
sizing: e = 0.25,
colorVariant: t = "oklch",
colors: r = {},
tabSize: s = 2,
showLayerDirective: n = !1,
preflight: i = !1,
layerOrder: a = ["theme", "base", "components", "utilities"],
variants: l = {},
customVariants: c = {},
property: u = {},
values: d = {},
classes: b = {},
alias: p = {},
breakpoints: f = {},
apply: y = {},
theme: x = {},
base: g = {},
components: w = {},
moxie: $ = D,
moxieOptions: k = {}
} = {}) {
this.tabSize = s, this.useLayer = n, this.useResetter = i, this.engine = $, this.variants = m(m({}, Q), l), this.customVariants = c, this.breakpoints = m({
sm: "40rem",
md: "48rem",
lg: "64rem",
xl: "80rem",
"2xl": "96rem"
}, f), this.layerOrder = this.useResetter ? ["preflight", ...a] : a, this.apply = y, this.themeConfig = x, this.baseConfig = g, this.componentsConfig = w, this.layers = /* @__PURE__ */ new Map([
["theme", ""],
["base", ""],
["components", ""],
["utilities", ""]
]), this.property = m(m({}, ae({ sizing: e })), u), this.classes = j(de, b), this.alias = m(m({}, ue), p), this.values = j(
Se({
output: t,
colors: r
}),
le,
d
), this.tuiConfig = L(m({}, k), {
property: this.property,
values: this.values,
classes: this.classes
}), this.main = new this.engine(this.tuiConfig), this.prefixLoader = new this.engine({
property: m(m({}, X), this.customVariants),
values: this.breakpoints
});
}
/**
* Utility methods
*/
addTabs(e, t = 2, r = !1) {
const s = " ".repeat(r ? t : this.tabSize);
return e.split(`
`).filter((n) => n.trim() !== "").map((n) => `${s}${n}`).join(`
`);
}
createEngine(e = {}) {
return new this.engine(j(this.tuiConfig, e));
}
generateRulesFromClass(e) {
return typeof e == "string" && this.alias[e] ? this.main.process(this.alias[e]).map((t) => this.generate(t, !0)).join(`
`) : this.main.process(e).map((t) => this.generate(t, !0)).join(`
`);
}
getConfig() {
return this.tuiConfig;
}
getLayerStyle() {
return {
base: this.baseConfig,
theme: this.themeConfig,
components: this.componentsConfig
};
}
getAliases() {
return this.alias;
}
addAliases(e) {
return this.alias = m(m({}, this.alias), e), this;
}
/**
* Layer Modifier
*/
addLayer(e) {
return this.layers.has(e) || (this.layers.set(e, ""), this.layerOrder.includes(e) || this.layerOrder.push(e)), this;
}
removeLayer(e) {
return e !== "base" && e !== "theme" && (this.layers.delete(e), this.layerOrder = this.layerOrder.filter((t) => t !== e)), this;
}
setLayerOrder(e) {
const r = Array.from(this.layers.keys()).filter((s) => !e.includes(s));
return this.layerOrder = [...e, ...r], this;
}
/**
* Prefix Handling Methods
*/
getPseudoSyntax(e) {
return [
"after",
"backdrop",
"before",
"cue",
"cue-region",
"file-selector-button",
"first-letter",
"first-line",
"grammar-error",
"marker",
"part",
"placeholder",
"selection",
"slotted",
"spelling-error",
"target-text"
].includes(e) ? "::" : ":";
}
getBreakpointQuery(e) {
if (e.startsWith("min-")) {
const t = e.substring(4);
if (this.breakpoints[t])
return `@media (width >= ${this.breakpoints[t]})`;
} else if (e.startsWith("max-")) {
const t = e.substring(4);
if (this.breakpoints[t])
return `@media (width < ${this.breakpoints[t]})`;
} else if (this.breakpoints[e])
return `@media (width >= ${this.breakpoints[e]})`;
return null;
}
isCustomPrefix(e) {
const t = this.prefixLoader.parse(e);
return !!(t && t[1] && t[2]);
}
processCustomPrefix(e) {
try {
const t = this.prefixLoader.process(e);
if ((t == null ? void 0 : t.length) > 0)
return t[0].cssRules;
} catch (t) {
console.error(`Failed to process prefix ${e}:`, t);
}
return null;
}
/**
* Formats CSS rules from cssRules and value
*/
formatRules(e, t) {
return Array.isArray(e) && t !== null ? e.map(
(r) => t ? `${this.main.toKebabCase(String(r))}: ${t}` : this.main.toKebabCase(String(r))
).join("; ") : e;
}
/**
* Creates the CSS selector string
*/
createSelector(e, t, r) {
const s = r ? "" : ".", n = this.main.escapeCSSSelector(
t ? `${t}:${e}` : e
);
return `${s}${n}`;
}
/**
* Generates the CSS wrapper based on prefix type
*/
generateCSSWrapper(e, t, r, s = 0) {
if (this.isCustomPrefix(e)) {
const a = this.processCustomPrefix(e);
if (a && typeof a == "string") {
if (a.startsWith("value:")) {
const l = a.substring(6);
return l.startsWith("@media") ? `${l} {
${t}${r}
}` : `${l} { ${t}${r} }`;
}
return `${a} { ${t}${r} }`;
}
}
if (e.startsWith("[") && e.endsWith("]") || e.startsWith("(") && e.endsWith(")"))
return `${this.prefixLoader.processValue(e, "", "")} { ${t}${r} }`;
const n = this.getBreakpointQuery(e);
return n ? `${n} {
${this.addTabs(t + r, this.tabSize, !0)}
}` : this.variants[e] ? `${this.variants[e]} {
${this.addTabs(t + r)}
}` : `&${this.getPseudoSyntax(e)}${e} { ${t}${r} }`;
}
/**
* Main Generator
*/
processApplyObject(e, t = 0) {
let r = "";
e.SINGLE_RULE && (r += e.SINGLE_RULE.join(`
`) + `
`, delete e.SINGLE_RULE);
for (const s in e) {
const n = e[s];
if (r += s ? `${this.addTabs(s, this.tabSize * t, !0)} {
` : "", typeof n == "string") {
const i = this.generateRulesFromClass(n);
r += `${this.addTabs(i, this.tabSize * (s ? t + 1 : t), !0)}`, i.length && (r += `
`);
} else typeof n == "object" && (r += this.processApplyObject(n, t + 1));
r += s ? `${this.addTabs("}", this.tabSize * t, !0)}
` : "";
}
return r;
}
generate(e, t, r) {
const { className: s, cssRules: n, value: i, prefix: a } = e, l = this.createSelector(s, a, r), c = this.formatRules(n, i), u = Array.isArray(n) || i === null ? "" : `: ${i}`;
if (!a)
return t ? c + u + ";" : `${l} {
${this.addTabs(c + u, this.tabSize)}
}`;
const d = this.generateCSSWrapper(a, c, u);
return t ? d : `${l} {
${this.addTabs(d, this.tabSize)}
}`;
}
addStyle(e = "base", t = {}) {
this.layers.has(e) || this.addLayer(e);
const r = this.processApplyObject(t), s = this.layers.get(e) || "";
return this.layers.set(e, s + r), this;
}
createStyles(e = "") {
if (this.useResetter) {
const n = this.processApplyObject(m(m({}, Ce), je));
this.layers.set("preflight", n);
}
const t = Array.from(this.layers.keys()), r = this.layerOrder.filter((n) => t.includes(n));
let s = this.useLayer ? `@layer ${r.join(", ")};
` : "";
return r.forEach((n) => {
this[`${n}Config`] && Object.entries(this[`${n}Config`]).length > 0 && this.addStyle(n, this[`${n}Config`]);
let i = this.layers.get(n) || "";
n === "utilities" && e.trim() && (i += i !== "" ? `
` : "" + this.processApplyObject(this.apply) + `${e}`), i.trim() && (s += this.useLayer ? `@layer ${n} {
${this.addTabs(i)}
}
` : i);
}), s;
}
render(e) {
if (!e) return this.createStyles();
const t = Array.isArray(e) ? e : e.split(/\s+/).filter(Boolean);
let r = "", s = "";
return t.forEach((n) => {
if (this.alias[n])
s += `.${n} {
${this.addTabs(
this.generateRulesFromClass(this.alias[n])
)}
}
`;
else {
const i = this.main.process(n).map((a) => this.generate(a)).join(`
`);
i && (r += i + `
`);
}
}), this.createStyles(s + r);
}
}
export {
Ae as AnyCSS,
D as TenoxUI,
de as classes,
Se as colorLib,
ve as colors,
v as createColorValue,
G as createUtilityClass,
Ae as default,
h as is,
j as merge,
je as preflight,
ae as properties,
le as values
};
//# sourceMappingURL=anycss.es.js.map