@nousantx/tenoxui-preset
Version:
Ready to use tenoxui preset with minimal setup.
983 lines (982 loc) • 36 kB
JavaScript
var I = Object.defineProperty, A = Object.defineProperties;
var H = Object.getOwnPropertyDescriptors;
var T = Object.getOwnPropertySymbols;
var N = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
var _ = (i, r, o) => r in i ? I(i, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : i[r] = o, m = (i, r) => {
for (var o in r || (r = {}))
N.call(r, o) && _(i, o, r[o]);
if (T)
for (var o of T(r))
E.call(r, o) && _(i, o, r[o]);
return i;
}, y = (i, r) => A(i, H(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 M(...i) {
return i.reduce((r, o) => (Object.keys(o).forEach((d) => {
const c = d;
typeof o[c] == "object" && o[c] !== null && !Array.isArray(o[c]) ? r[c] = M(r[c] || {}, o[c]) : r[c] = o[c];
}), r), {});
}
function P(i) {
const r = {};
return Object.keys(i).forEach((o) => {
Object.entries(i[o]).forEach(([d, c]) => {
const l = d;
r[l] || (r[l] = {}), c !== void 0 && r[l] && (r[l][o] = c);
});
}), r;
}
const f = {
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)$/
};
/*!
* @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 z(i, r, o) {
i /= 255, r /= 255, o /= 255;
const d = Math.max(i, r, o), c = Math.min(i, r, o);
let l, e;
const t = (d + c) / 2;
if (d === c)
l = e = 0;
else {
const s = d - c;
switch (e = t > 0.5 ? s / (2 - d - c) : s / (d + c), d) {
case i:
l = (r - o) / s + (r < o ? 6 : 0);
break;
case r:
l = (o - i) / s + 2;
break;
case o:
l = (i - r) / s + 4;
break;
default:
l = 0;
}
l /= 6;
}
return [l * 360, e * 100, t * 100];
}
function D(i, r, o) {
i /= 360, r /= 100, o /= 100;
let d, c, l;
if (r === 0)
d = c = l = o;
else {
const e = (n, a, p) => (p < 0 && (p += 1), p > 1 && (p -= 1), p < 0.16666666666666666 ? n + (a - n) * 6 * p : p < 0.5 ? a : p < 0.6666666666666666 ? n + (a - n) * (0.6666666666666666 - p) * 6 : n), t = o < 0.5 ? o * (1 + r) : o + r - o * r, s = 2 * o - t;
d = e(s, t, i + 1 / 3), c = e(s, t, i), l = e(s, t, i - 1 / 3);
}
return [Math.round(d * 255), Math.round(c * 255), Math.round(l * 255)];
}
function G(i) {
const r = parseInt(i.slice(1, 3), 16), o = parseInt(i.slice(3, 5), 16), d = parseInt(i.slice(5, 7), 16);
return [r, o, d];
}
function K([i, r, o]) {
return `#${i.toString(16).padStart(2, "0")}${r.toString(16).padStart(2, "0")}${o.toString(16).padStart(2, "0")}`;
}
function q(i, r, o) {
i /= 255, r /= 255, o /= 255;
const d = Math.min(i, r, o), c = 1 - Math.max(i, r, o);
let l;
const [e] = z(i * 255, r * 255, o * 255);
return l = e, [l, d * 100, c * 100];
}
function F(i, r, o) {
const [d, c, l] = L(i, r, o), e = 0.95047, t = 1, s = 1.08883, n = d / e, a = c / t, p = l / s, u = n > 8856e-6 ? Math.pow(n, 1 / 3) : 7.787 * n + 16 / 116, h = a > 8856e-6 ? Math.pow(a, 1 / 3) : 7.787 * a + 16 / 116, b = p > 8856e-6 ? Math.pow(p, 1 / 3) : 7.787 * p + 16 / 116, w = 116 * h - 16, j = 500 * (u - h), k = 200 * (h - b);
return [w, j, k];
}
function X(i, r, o) {
const [d, c, l] = F(i, r, o), e = Math.sqrt(c * c + l * l);
let t = Math.atan2(l, c) * 180 / Math.PI;
return t < 0 && (t += 360), [d, e, t];
}
function R(i) {
const r = i / 255;
return r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
}
function L(i, r, o) {
i = R(i), r = R(r), o = R(o);
const d = 0.4124564 * i + 0.3575761 * r + 0.1804375 * o, c = 0.2126729 * i + 0.7151522 * r + 0.072175 * o, l = 0.0193339 * i + 0.119192 * r + 0.9503041 * o;
return [d, c, l];
}
function J(i, r, o) {
const d = Math.cbrt(0.8189330101 * i + 0.3618667424 * r - 0.1288597137 * o), c = Math.cbrt(0.0329845436 * i + 0.9293118715 * r + 0.0361456387 * o), l = Math.cbrt(0.0482003018 * i + 0.2643662691 * r + 0.633851707 * o);
return [
0.2104542553 * d + 0.793617785 * c - 0.0040720468 * l,
1.9779984951 * d - 2.428592205 * c + 0.4505937099 * l,
0.0259040371 * d + 0.7827717662 * c - 0.808675766 * l
];
}
function Q(i, r, o) {
const d = Math.sqrt(r * r + o * o);
let c = Math.atan2(o, r) * 180 / Math.PI;
return c < 0 && (c += 360), [i, d * 1, c];
}
function U(i, r, o) {
const d = L(i, r, o), c = J(...d), [l, e, t] = Q(...c);
return [l * 100, e, t];
}
function Y(i, r, o, d, c, l, e) {
let [t, s, n] = i;
return r < 5 ? (n = Math.min(98, n + (98 - n) * ((5 - r) / d)), o || (s = Math.max(10, s - s * ((5 - r) / c)))) : r > 5 && (n = n * (1 - (r - 5) / l), o || (s = Math.min(100, s + (100 - s) * ((r - 5) / e)))), [t, s, n];
}
function Z(i, r, o = "") {
const [d, c, l] = i, e = D(d, c, l), t = o ? ` / var(--${o}-opacity)` : "", s = (n) => {
var a;
return ((a = n.match(/[\d.]+%?/g)) === null || a === void 0 ? void 0 : a.join(" ")) || "";
};
switch (r) {
case "rgb":
return `rgb(${e[0]} ${e[1]} ${e[2]}${t})`;
case "rgb-value":
return s(`rgb(${e[0]} ${e[1]} ${e[2]})`);
case "hsl":
return `hsl(${Math.round(d)} ${Math.round(c)}% ${l.toFixed(1)}%${t})`;
case "hsl-value":
return s(`hsl(${Math.round(d)} ${Math.round(c)}% ${l.toFixed(1)}%)`);
case "hwb":
case "hwb-value": {
const [n, a, p] = q(...e), u = `hwb(${Math.round(n)} ${Math.round(a)}% ${Math.round(p)}%)`;
return r === "hwb-value" ? s(u) : u;
}
case "lab":
case "lab-value": {
const [n, a, p] = F(...e), u = `lab(${n.toFixed(1)}% ${a.toFixed(1)} ${p.toFixed(1)})`;
return r === "lab-value" ? s(u) : u;
}
case "lch":
case "lch-value": {
const [n, a, p] = X(...e), u = `lch(${n.toFixed(1)}% ${a.toFixed(1)} ${p.toFixed(1)})`;
return r === "lch-value" ? s(u) : u;
}
case "oklch":
case "oklch-value": {
const [n, a, p] = U(...e), u = `oklch(${n.toFixed(1)}% ${a.toFixed(3)} ${p.toFixed(1)})`;
return r === "oklch-value" ? s(u) : u;
}
case "hex":
default:
return K(e);
}
}
function V({ option: i = {}, color: r }) {
const { format: o = "css", output: d = "hex", opacityPrefix: c = "", prefix: l = "", reverse: e = !1, lighterLightness: t = 4.5, lighterSaturation: s = 10, darkerLightness: n = 6.5, darkerSaturation: a = 7 } = i, p = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], u = e ? [...p].reverse() : p;
let h = o === "array" ? {} : o === "object" || o === "object2" ? {} : o === "tailwind" ? { theme: { colors: {} } } : "";
for (let [b, w] of Object.entries(r)) {
const j = G(w), k = z(...j), W = k[1] < 10;
l !== "" && (b = l + b), o === "array" && (h[b] = []), u.forEach(($, O) => {
const B = Y(k, O, W, t, s, n, a), x = Z(B, d, c);
switch (o) {
case "scss":
h += `$${b}-${$}: ${x};
`;
break;
case "tailwind":
h.theme.colors[b] || (h.theme.colors[b] = {}), h.theme.colors[b][$] = x;
break;
case "object":
typeof h != "object" && (h = {}), h[b] || (h[b] = {}), h[b][$] = x;
break;
case "object2":
h[`${b}-${$}`] = x;
break;
case "array":
h[b].push(x);
break;
case "css":
default:
h += `--${b}-${$}: ${x};
`;
}
}), o === "array" && e && h[b].reverse();
}
return h;
}
const v = {
red: "#fb2c36",
orange: "#ff6900",
amber: "#fd9a00",
yellow: "#efb100",
lime: "#7ccf00",
green: "#00c951",
emerald: "#00bc7d",
teal: "#00bba7",
cyan: "#00b8db",
sky: "#00a6f4",
blue: "#2b7fff",
indigo: "#615fff",
violet: "#8e51ff",
purple: "#ad46ff",
fuchsia: "#e12afb",
pink: "#f6339a",
rose: "#ff2056",
slate: "#62748e",
gray: "#6a7282",
zinc: "#71717b",
neutral: "#737373",
stone: "#79716b"
}, tt = ({
output: i = "oklch",
colors: r = {}
}) => V({
color: m(m({}, v), r),
option: {
format: "object2",
output: i
}
}), C = {
"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 */
}, et = {
columns: "columns",
align: "verticalAlign",
whitespace: "whiteSpace",
hypehns: "hyphens",
content: "content",
isolation: "isolation",
order: "order",
z: "zIndex",
opacity: {
property: "opacity",
value: "{0}%"
},
"outline-offset": {
property: "outlineOffset",
value: "{0}px"
},
"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",
// 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",
filter: "filter",
"backdrop-filter": "backdropFilter"
}, rt = {
top: "top",
right: "right",
bottom: "bottom",
left: "left",
inset: "inset",
gap: "gap",
"gap-x": "columnGap",
"gap-y": "rowGap",
"min-w": "minWidth",
"min-h": "minHeight",
"max-w": "maxWidth",
"max-h": "maxHeight",
mt: "marginTop",
mr: "marginRight",
mb: "marginBottom",
ml: "marginLeft",
mx: "marginInline",
my: "marginBlock",
pt: "paddingTop",
pr: "paddingRight",
pb: "paddingBottom",
pl: "paddingLeft",
py: "paddingBlock",
px: "paddingInline"
}, g = (i, r = "", o = (d, c) => `${d || ""}${c}`) => ({
property: i.startsWith("backdrop-") ? "backdropFilter" : "filter",
value: ({ value: d = "", unit: c = "" }) => {
const l = o(d, c || r);
return `${i.replace("backdrop-", "")}(${l})`;
}
}), S = {
xs: "4px",
sm: "8px",
md: "12px",
lg: "16px",
xl: "24px",
"2xl": "40px",
"3xl": "64px"
}, ot = {
xs: "0 1px 1px var(--drop-shadow-color, rgb(0 0 0 / 0.05))",
sm: "0 1px 2px var(--drop-shadow-color, rgb(0 0 0 / 0.15))",
md: "0 3px 3px var(--drop-shadow-color, rgb(0 0 0 / 0.12))",
lg: "0 4px 4px var(--drop-shadow-color, rgb(0 0 0 / 0.15))",
xl: "0 9px 7px var(--drop-shadow-color, rgb(0 0 0 / 0.1))",
"2xl": "0 25px 25px var(--drop-shadow-color, rgb(0 0 0 / 0.15))"
}, nt = () => {
const i = {
// Regular filters
blur: {
property: "filter",
value: ({ value: r = "", unit: o = "" }) => `blur(${S[`${r}${o}`] || `${r}${o}`})`
},
brightness: g("brightness", "%"),
contrast: g("contrast", "%"),
"drop-shadow": {
property: ({
value: r = "",
unit: o = "",
secondValue: d = "",
secondUnit: c = "",
key: l = ""
}) => l === "color" || typeof r == "string" && (r.startsWith("rgb") || r.startsWith("oklch")) && !r.includes("/") && r.endsWith(")") ? `--drop-shadow-color: ${r.slice(0, -1)}${d ? " / " + d + (c || "%)") : ")"}` : `filter: drop-shadow(${ot[r] || r})`,
value: null
},
grayscale: g("grayscale", "%", (r = "", o) => r ? f.number.test(`${r}${o}`) ? `${r}%` : `${r}${o}` : "100%"),
"hue-rotate": g("hue-rotate", "deg", (r = "", o) => f.number.test(`${r}${o}`) ? `${r}deg` : `${r}${o}`),
invert: g("invert", "%", (r = "", o) => r ? f.number.test(`${r}${o}`) ? `${r}%` : `${r}${o}` : "100%"),
sepia: g("sepia", "%", (r = "", o) => r ? f.number.test(`${r}${o}`) ? `${r}%` : `${r}${o}` : "100%"),
saturate: g("saturate", "%", (r = "", o) => f.number.test(`${r}${o}`) ? `${r}%` : `${r}${o}`)
};
return ["brightness", "contrast", "grayscale", "hue-rotate", "invert", "sepia", "saturate"].forEach(
(r) => {
const o = i[r];
i[`backdrop-${r}`] = {
property: "backdropFilter",
value: o.value
};
}
), i["backdrop-blur"] = {
property: "backdropFilter",
value: ({ value: r = "", unit: o = "" }) => `blur(${S[`${r}${o}`] || `${r}${o}`})`
}, i["backdrop-opacity"] = g(
"backdrop-opacity",
"%",
(r = "", o) => f.number.test(`${r}${o}`) ? `${r}%` : `${r}${o}`
), i;
}, it = nt(), st = {
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"
}
}, ct = M(
P({
truncate: {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
},
"outline-hidden": {
outline: "2px solid transparent",
outlineOffset: "2px"
}
}),
{
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"
}
}
);
function lt({
sizing: i = 0.25,
colors: r = {},
colorVariant: o = "oklch"
} = {}) {
const d = ({ value: e = "", unit: t = "" }) => f.number.test(e + t) ? i * Number(e) + (e !== "0" ? "rem" : "") : e + t, c = Object.fromEntries(
Object.entries(rt).map(([e, t]) => [
e,
{ property: t, value: d }
])
), l = (e, t, s) => ({
property: ({ key: n = "" }) => n && n in t ? t[n] : e,
value: ({ value: n = "", unit: a = "" }) => s && s[n + a] ? s[n + a] : n && f.number.test(n + a) ? i * Number(n) + "rem" : n + a
});
return {
apply: {
":root": `
[--tui-inset-shadow]-[0_0_#0000]
[--tui-inset-ring-shadow]-[0_0_#0000]
[--tui-shadow]-[0_0_#0000]
[--tui-ring-shadow]-[0_0_#0000]
[--tui-ring-offset-shadow]-[0_0_#0000]
[--tui-ring-offset-width]-0px
[--tui-ring-inset]-[_]
[--tui-ring-offset-color]-#fff
[--ease-in]-[cubic-bezier(0.4,_0,_1,_1)]
[--ease-out]-[cubic-bezier(0,_0,_0.2,_1)]
[--ease-in-out]-[cubic-bezier(0.4,_0,_0.2,_1)]
[--default-transition-duration]-150ms
[--default-transition-timing-function]-[cubic-bezier(0.4,_0,_0.2,_1)]
`
},
property: y(m(y(m(m(m({}, et), c), it), {
w: l(
"width",
{
min: "minWidth",
max: "maxWidth"
},
y(m({}, C), { screen: "100vw" })
),
h: l(
"height",
{
min: "minHeight",
max: "maxHeight"
},
y(m({}, C), { screen: "100vh" })
),
size: {
property: ["width", "height"],
value: ({ value: e = "", unit: t = "" }) => f.number.test(e + t) ? i * Number(e) + "rem" : e + t
},
p: l("padding", {
x: "paddingInline",
y: "paddingBlock",
t: "paddingTop",
r: "paddingRight",
b: "paddingBottom",
l: "paddingLeft"
}),
m: l("margin", {
x: "marginInline",
y: "marginBlock",
t: "marginTop",
r: "marginRight",
b: "marginBottom",
l: "marginLeft"
}),
/* background */
"bg-clip": {
property: "backgroundClip",
value: ({ value: e }) => e !== "text" ? e + "-box" : e
},
"bg-origin": {
property: "backgroundOrigin",
value: ({ value: e }) => e !== "text" ? e + "-box" : e
},
bg: {
property: ({ key: e, value: t = "", unit: s = "" }) => {
const n = {
attachment: "backgroundAttachment",
color: "backgroundColor",
image: "backgroundImage",
clip: "backgroundClip",
position: "backgroundPosition",
repeat: "backgroundRepeat",
size: "backgroundSize",
origin: "backgroundOrigin"
};
return f.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? n.color : ["fixed", "scroll", "local"].includes(t) ? n.attachment : ["repeat", "repeat-x", "repeat-y", "no-repeat"].includes(t) ? n.repeat : ["cover", "contain", "auto"].includes(t) || f.length.test(t + s) ? n.size : /\d+%|\d+px|top|bottom|left|right|center/.test(t) ? n.position : e ? n[e] : "background";
},
value: ({ key: e, value: t = "", unit: s = "", secondValue: n = "", secondUnit: a = "" }) => t ? e === "color" || f.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t) ? t.startsWith(o) && !t.includes("/") && t.endsWith(")") ? `${t.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}` : t === "current" ? "currentColor" : t : e === "size" || f.length.test(t + s) || ["cover", "contain", "auto"].includes(t) ? t + s : t : null
},
/* typography */
text: {
property: ({
key: e,
value: t = "",
unit: s = "",
secondValue: n = "",
secondUnit: a = ""
}) => {
const p = {
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"]
}, u = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
if (t) {
if (e === "color" || f.color.test(t) || ["inherit", "current", "black", "white", "transparent"].includes(t))
return `color: ${["inherit", "current", "black", "white", "transparent"].includes(t) ? t === "current" ? "currentColor" : t : `${t.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}`}`;
if (e === "align" || ["center", "justify", "left", "right", "start", "end"].includes(t))
return `text-align: ${t}`;
if (e === "wrap" || ["wrap", "nowrap", "balance", "pretty"].includes(t))
return `text-wrap: ${t}`;
if (e === "overflow" || ["ellipsis", "clip"].includes(t))
return `text-overflow: ${t}`;
if (e === "size" || f.length.test(t + s) || t + s in p) {
if (t + s in p) {
const h = t + s, [b, w] = p[h];
return `font-size: ${b}; line-height: ${u[n] || n + a || w}`;
}
return `font-size: ${t + s}${n ? `; line-height: ${u[n] || n + a}` : ""}`;
}
}
return "color: " + t;
},
value: null
},
font: {
value: null,
property: ({ key: e, value: t }) => {
const s = {
thin: "100",
extralight: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900"
};
if (t) {
if (e === "weight" || s[t] || f.number.test(t) || t.endsWith("00"))
return `font-weight: ${s[t] || t}`;
if (e === "family")
return `font-family: ${t}`;
}
return `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 s = {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2"
};
return s[e] ? s[e] : !t && f.number.test(e) ? i * Number(e) + "rem" : e + t;
}
},
decoration: {
property: ({ key: e, value: t = "", unit: s = "", secondValue: n = "", secondUnit: a = "" }) => {
if (t) {
if (e === "color" || f.color.test(t))
return `text-decoration-color: ${t.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}`;
if (e === "style" || ["solid", "dashed", "double", "dotted", "wavy"].includes(t))
return `text-decoration-style: ${t}`;
if (e === "length" || ["auto", "from-font"].includes(t) || f.number.test(t + s) || f.length.test(t + s))
return `text-decoration-thickness: ${f.number.test(t + s) ? t + "px" : t + s}`;
}
return "text-decoration-color: " + t;
},
value: null
},
"underline-offset": {
property: "textUnderlineOffset",
value: "{0}px"
},
indent: {
property: "textIndent",
value: ({ value: e = "", unit: t = "" }) => e ? f.number.test(e + t) ? i * Number(e) + "rem" : e + t : null
},
radius: {
property: ({ key: e = "" }) => ({
t: ["borderTopLeftRadius", "borderTopRightRadius"],
r: ["borderTopRightRadius", "borderBottomRightRadius"],
b: ["borderBottomRightRadius", "borderBottomLeftRadius"],
l: ["borderTopLeftRadius", "borderBottomLeftRadius"],
tl: "borderTopLeftRadius",
tr: "borderTopRightRadius",
br: "borderBottomRightRadius",
bl: "borderBottomLeftRadius"
})[e] || "borderRadius",
value: ({ value: e = "", unit: t = "" }) => ({
xs: "0.125rem",
sm: "0.25rem",
md: "0.375rem",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"4xl": "2rem"
})[e] || e + t
},
border: {
property: ({ value: e = "", unit: t = "", key: s = "", secondValue: n = "", secondUnit: a = "" }) => {
const p = {
x: "border-inline-width",
y: "border-block-eidth",
t: "border-top-width",
r: "border-right-width",
b: "border-bottom-width",
l: "border-left-width"
};
if (s === "color" || f.color.test(e) || ["inherit", "current", "black", "white", "transparent"].includes(e))
return "border-color: " + (e.startsWith(o) && !e.includes("/") && e.endsWith(")") ? `${e.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}` : e === "current" ? "currentColor" : e);
if (s === "style" || ["solid", "dashed", "double", "hidden", "none", "dotted"].includes(e))
return "border-style: " + e;
let u = e ? f.number.test(e + t) ? e + "px" : e + t : "1px";
return "border-style: " + (n || "solid") + "; " + (p[s] || "border-width") + ": " + u;
},
value: null
},
outline: {
property: ({ value: e = "", unit: t = "", key: s = "", secondValue: n = "", secondUnit: a = "" }) => {
if (s === "color" || f.color.test(e) || ["inherit", "current", "black", "white", "transparent"].includes(e))
return "outline-color: " + (e.startsWith(o) && !e.includes("/") && e.endsWith(")") ? `${e.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}` : e === "current" ? "currentColor" : e);
if (s === "style" || ["solid", "dashed", "double", "none", "dotted"].includes(e))
return "outline-style: " + e;
let p = e ? f.number.test(e + t) ? e + "px" : e + t : "1px";
return "outline-style: " + (n || "solid") + "; outline-width: " + p;
},
value: null
},
shadow: {
property: ({ key: e = "", value: t = "", secondValue: s = "", secondUnit: n = "" }) => {
const a = e === "inset" ? "inset-shadow" : "shadow", p = {
"2xs": `0 1px var(--tui-${a}-color, rgb(0 0 0 / 0.05))`,
xs: `0 1px 2px 0 var(--tui-${a}-color, rgb(0 0 0 / 0.05))`,
sm: `0 1px 3px 0 var(--tui-${a}-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tui-${a}-color, rgb(0 0 0 / 0.1))`,
md: `0 4px 6px -1px var(--tui-${a}-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tui-${a}-color, rgb(0 0 0 / 0.1))`,
lg: `0 10px 15px -3px var(--tui-${a}-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tui-${a}-color, rgb(0 0 0 / 0.1))`,
xl: `0 20px 25px -5px var(--tui-${a}-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tui-${a}-color, rgb(0 0 0 / 0.1))`,
"2xl": `0 25px 50px -12px var(--tui-${a}-color, rgb(0 0 0 / 0.25))`,
none: "0 0 #0000"
}, u = {
"2xs": "inset 0 1px var(--tui-inset-shadow-color, rgb(0 0 0 / 0.05)",
xs: "inset 0 1px 1px var(--tui-inset-shadow-color, rgb(0 0 0 / 0.05))",
sm: "inset 0 2px 4px var(--tui-inset-shadow-color, rgb(0 0 0 / 0.05))",
none: "0 0 #0000"
};
let h = t.startsWith(o) && !t.includes("/") && t.endsWith(")") ? `${t.slice(0, -1)}${s ? " / " + s + (n || "%)") : ")"}` : t === "current" ? "currentColor" : t;
return f.color.test(t) ? `--tui-${a}-color: ${h}` : `--tui-${a}: ${(e === "inset" ? u[t] : p[t]) || t}; box-shadow: var(--tui-inset-shadow), var(--tui-inset-ring-shadow), var(--tui-ring-offset-shadow), var(--tui-shadow), var(--tui-ring-shadow)`;
},
value: null
},
ring: {
property: ({ key: e = "", value: t = "", unit: s = "", secondValue: n = "", secondUnit: a = "" }) => {
const p = e === "inset" ? "inset-ring-shadow" : "ring-shadow";
let u;
return t ? f.color.test(t) ? u = t.startsWith(o) && !t.includes("/") && t.endsWith(")") ? `${t.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}` : t : f.number.test(t + s) ? u = t + "px" : u = t + s : u = "1px", f.color.test(t) || t === "current" ? `--tui-${p}-color: ${t === "current" ? "currentColor" : u}` : `--tui-${p}: ${e === "inset" ? "inset" : ""} 0 0 0 calc(${u} + var(--tui-ring-offset-width, 2px)) var(--tui-ring-shadow-color, currentColor); box-shadow: var(--tui-inset-shadow), var(--tui-inset-ring-shadow), var(--tui-ring-offset-shadow), var(--tui-shadow), var(--tui-ring-shadow)`;
},
value: null
},
"ring-offset": {
property: ({ key: e = "", value: t = "", unit: s = "", secondValue: n = "", secondUnit: a = "" }) => {
let p;
return t ? f.color.test(t) ? p = t.startsWith(o) && !t.includes("/") && t.endsWith(")") ? `${t.slice(0, -1)}${n ? " / " + n + (a || "%)") : ")"}` : t : f.number.test(t + s) ? p = t + "px" : p = t + s : p = "1px", f.color.test(t) || t === "current" ? `--tui-ring-offset-color: ${t === "current" ? "currentColor" : p}` : `--tui-ring-offset-width: ${p}; --tui-ring-offset-shadow: 0 0 0 var(--tui-ring-offset-width) var(--tui-ring-offset-color);`;
},
value: null
}
}), Object.fromEntries(
["top", "right", "bottom", "left", "inset"].map((e) => [
e,
{
property: e,
value: ({ value: t = "", unit: s = "" }) => f.number.test(t + s) ? i * Number(t) + (t !== "0" ? "rem" : "") : t + s
}
])
)), {
shrink: {
property: "flexShrink",
value: ({ value: e = "", unit: t = "" }) => e + t || "1"
},
grow: {
property: "flexGrow",
value: ({ value: e = "", unit: t = "" }) => e + t || "1"
},
transition: {
value: null,
property: ({ key: e = "", value: t = "", unit: s = "" }) => {
if (!t || e === "property" || ["all", "colors", "opacity", "shadow", "transform"].includes(t)) {
let n;
return t ? t === "colors" ? n = "color, background-color, border-color, text-decoration-color, fill, stroke" : t === "shadow" ? n = "box-shadow" : t === "transform" ? n = "transform, translate, scale, rotate" : n = t : n = "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter", `transition-property: ${n}; transition-timing-function: var(--default-transition-timing-function); transition-duration: var(--default-transition-duration)`;
} else {
if (e === "behavior" || ["normal", "discrete"].includes(t))
return `transition-behavior: ${t === "discrete" ? "allow-discrete" : t}`;
if (e === "duration" || t === "initial" || f.number.test(t))
return `transition-duration: ${t === "initial" ? "initial" : t + (s || "ms")}`;
if (e === "delay")
return "transition-delay: " + (f.time.test(t) ? t : t + (s || "ms"));
}
return "transition: " + t + s;
}
},
ease: {
property: "transitionTimingFunction",
value: ({ value: e = "" }) => ({
in: "var(--ease-in)",
out: "var(--ease-out)",
"in-out": "var(--ease-in-out)"
})[e] || e
},
duration: {
property: "transitionDuration",
value: ({ value: e = "", unit: t = "" }) => e + (t || "ms")
},
delay: {
property: "transitionDelay",
value: ({ value: e = "", unit: t = "" }) => e + (t || "ms")
},
/* transform properties */
move: {
property: "translate",
value: ({ value: e = "", unit: t = "", secondValue: s = "", secondUnit: n = "" }) => {
if (!e) return "";
const p = f.number.test(e + t) ? `${i * Number(e)}rem` : e + t, u = s && f.number.test(s + n) ? `${i * Number(s)}rem` : s ? s + n : p;
return `${p} ${u}`;
}
},
"move-x": {
property: "translate",
value: ({ value: e = "", unit: t = "" }) => f.number.test(e + t) ? i * Number(e) + "rem" : `${e + t} var(--tui-move-y)`
},
"move-y": {
property: "translate",
value: ({ value: e = "", unit: t = "" }) => f.number.test(e + t) ? i * Number(e) + "rem" : `var(--tui-move-y) ${e + t}`
}
}),
aliases: {
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]"
},
values: M(
tt({
output: o,
colors: r
}),
st
),
classes: ct
};
}
export {
v as color,
tt as colorLib,
lt as createConfig,
f as is,
M as merge
};
//# sourceMappingURL=index.es.js.map